diff --git a/.env.example b/.env.example
index 1bb9ba3d0c..dd5dd755f9 100644
--- a/.env.example
+++ b/.env.example
@@ -92,3 +92,9 @@ ENABLE_PRIVATE_APP_EMBED=
 
 #Enable cors else restricted to TOOLJET_HOST. Set the value true if you are serving front end from diffrent host
 ENABLE_CORS=
+
+#pat session expiry in minutes
+PAT_SESSION_EXPIRY=
+
+#pat expiry in days
+PAT_EXPIRY=
diff --git a/.github/workflows/cypress-platform.yml b/.github/workflows/cypress-platform.yml
index d3374604f8..1f6d39997f 100644
--- a/.github/workflows/cypress-platform.yml
+++ b/.github/workflows/cypress-platform.yml
@@ -37,21 +37,9 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.ref }}
 
-      # Create Docker Buildx builder with platform configuration
-      - name: Set up Docker Buildx
-        run: |
-          mkdir -p ~/.docker/cli-plugins
-          curl -SL https://github.com/docker/buildx/releases/download/v0.11.0/buildx-v0.11.0.linux-amd64 -o ~/.docker/cli-plugins/docker-buildx
-          chmod a+x ~/.docker/cli-plugins/docker-buildx
-          docker buildx create --name mybuilder --platform linux/arm64,linux/amd64
-          docker buildx use mybuilder
-
       - name: Set DOCKER_CLI_EXPERIMENTAL
         run: echo "DOCKER_CLI_EXPERIMENTAL=enabled" >> $GITHUB_ENV
 
-      - name: use mybuilder buildx
-        run: docker buildx use mybuilder
-
       - name: Docker Login
         uses: docker/login-action@v2
         with:
diff --git a/.github/workflows/merging-pr.yml b/.github/workflows/merging-pr.yml
index bb4f144eac..f091baf0ec 100644
--- a/.github/workflows/merging-pr.yml
+++ b/.github/workflows/merging-pr.yml
@@ -37,6 +37,40 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.TOKEN_PR }}
 
+
+  update-submodule-sha:
+    needs: merge-submodules
+    if: github.event.pull_request.merged == true && github.event.pull_request.base.ref == 'main'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout base repo
+        uses: actions/checkout@v4
+        with:
+          repository: ToolJet/ToolJet
+          token: ${{ secrets.TOKEN_PR }}
+          ref: main
+          submodules: recursive
+
+      - name: Update submodules to latest main
+        run: |
+          git config user.name "adishM98 Bot"
+          git config user.email "adish.madhu@gmail.com"
+
+          git submodule update --remote frontend/ee
+          git submodule update --remote server/ee
+
+          git add frontend/ee server/ee
+
+          if git diff --cached --quiet; then
+            echo "No submodule updates found."
+          else
+            git commit -m "🔄 chore: update submodules to latest main after auto-merge"
+            git push origin main
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.TOKEN_PR }}          
+
   check-submodule-prs:
     if: github.event.action == 'labeled' && github.event.label.name == 'ready-to-merge'
     runs-on: ubuntu-latest
diff --git a/.github/workflows/vulnerability-ci.yml b/.github/workflows/vulnerability-ci.yml
index 568ab6df31..ca8c525ace 100644
--- a/.github/workflows/vulnerability-ci.yml
+++ b/.github/workflows/vulnerability-ci.yml
@@ -24,10 +24,10 @@ jobs:
         with:
           ref: refs/heads/main
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix frontend install
@@ -75,10 +75,10 @@ jobs:
         with:
           ref: refs/heads/main
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix server install
@@ -106,7 +106,7 @@ jobs:
 
       - name: Send Slack Notification
         run: |
-          message="### Periodic Security Audit Report Of Server directory\n
+          message="Periodic Security Audit Report Of Server directory\n
           Node module vulnerabilities summary:\n
           🔴 Critical: ${{ steps.parse-audit.outputs.critical }}\n
           🟠 High: ${{ steps.parse-audit.outputs.high }}\n
@@ -126,10 +126,10 @@ jobs:
         with:
           ref: refs/heads/main
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix marketplace install
@@ -177,10 +177,10 @@ jobs:
         with:
           ref: refs/heads/main
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix plugins install
@@ -228,10 +228,10 @@ jobs:
         with:
           ref: refs/heads/main
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix cypress-tests install
@@ -279,10 +279,10 @@ jobs:
         with:
           ref: refs/heads/main
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm install
@@ -330,10 +330,10 @@ jobs:
         with:
           ref:  ${{ github.event.pull_request.head.ref }}
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix frontend install
@@ -385,10 +385,10 @@ jobs:
         with:
           ref:  ${{ github.event.pull_request.head.ref }}
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix server install
@@ -440,10 +440,10 @@ jobs:
         with:
           ref:  ${{ github.event.pull_request.head.ref }}
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix marketplace install
@@ -494,10 +494,10 @@ jobs:
         with:
           ref:  ${{ github.event.pull_request.head.ref }}
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix plugins install
@@ -550,10 +550,10 @@ jobs:
         with:
           ref:  ${{ github.event.pull_request.head.ref }}
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm --prefix cypress-tests install
@@ -606,10 +606,10 @@ jobs:
         with:
           ref:  ${{ github.event.pull_request.head.ref }}
 
-      - name: Use Node.js 18.18.2
+      - name: Use Node.js 22.15.1
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 22.15.1
       
       - name: Install dependencies
         run: npm install
@@ -648,4 +648,4 @@ jobs:
              🟠 High: ${{ steps.parse-audit.outputs.high }}
              🟡 Moderate: ${{ steps.parse-audit.outputs.moderate }}
 
-            Please find the JSON file in the [summary page](${{ github.root_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}).
\ No newline at end of file
+            Please find the JSON file in the [summary page](${{ github.root_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}).
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e13d54d778..ac6e6079cc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "[javascript, typescript]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "eslint.validate": [
         "javascript",
@@ -8,8 +8,8 @@
         "typescript",
         "typescriptreact"
     ],
-    "eslint.format.enable": false,
-    "editor.formatOnSave": false,
+    "eslint.format.enable": true,
+    "editor.formatOnSave": true,
     "json.schemas": [
         {
             "fileMatch": [
diff --git a/cypress-tests/cypress-ee-platform.config.js b/cypress-tests/cypress-ee-platform.config.js
index 02b8c1d952..25aa7f6f15 100644
--- a/cypress-tests/cypress-ee-platform.config.js
+++ b/cypress-tests/cypress-ee-platform.config.js
@@ -98,7 +98,7 @@ module.exports = defineConfig({
         configFile: environment.configFile,
         specPattern: [
             "cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js",
-            "cypress/e2e/happyPath/platform/commonTestcases/**/*.cy.js",
+            "cypress/e2e/happyPath/platform/commonTestcases/userManagment/*.cy.js",
             "cypress/e2e/happyPath/platform/eeTestcases/**/*.cy.js",
         ],
         numTestsKeptInMemory: 1,
diff --git a/cypress-tests/cypress/commands/apiCommands.js b/cypress-tests/cypress/commands/apiCommands.js
index 62d72f7cdc..c8ca26fd2f 100644
--- a/cypress-tests/cypress/commands/apiCommands.js
+++ b/cypress-tests/cypress/commands/apiCommands.js
@@ -221,21 +221,21 @@ Cypress.Commands.add(
     const requestBody =
       envVar === "Enterprise"
         ? {
-            email: userEmail,
-            firstName: userName,
-            groups: [],
-            lastName: "",
-            role: userRole,
-            userMetadata: metaData,
-          }
+          email: userEmail,
+          firstName: userName,
+          groups: [],
+          lastName: "",
+          role: userRole,
+          userMetadata: metaData,
+        }
         : {
-            email: userEmail,
-            firstName: userName,
-            groups: [],
-            lastName: "",
-            role: userRole,
-            userMetadata: metaData,
-          };
+          email: userEmail,
+          firstName: userName,
+          groups: [],
+          lastName: "",
+          role: userRole,
+          userMetadata: metaData,
+        };
 
     cy.getCookie("tj_auth_token").then((cookie) => {
       cy.request(
@@ -509,7 +509,7 @@ Cypress.Commands.add("apiDeleteGranularPermission", (groupName) => {
         // Delete the granular permission
         cy.request({
           method: "DELETE",
-          url: `${Cypress.env("server_host")}/api/v2/group-permissions/granular-permissions/${granularPermissionId}`,
+          url: `${Cypress.env("server_host")}/api/v2/group-permissions/granular-permissions/app/${granularPermissionId}`,
           headers,
           log: false,
         }).then((deleteResponse) => {
diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js
index 3bb63cc926..39e68da18a 100644
--- a/cypress-tests/cypress/commands/commands.js
+++ b/cypress-tests/cypress/commands/commands.js
@@ -11,7 +11,7 @@ import { selectAppCardOption } from "Support/utils/common";
 const API_ENDPOINT =
   Cypress.env("environment") === "Community"
     ? "/api/library_apps"
-    : "/api/library_apps/";
+    : "/api/library_apps";
 
 Cypress.Commands.add(
   "appUILogin",
@@ -226,9 +226,9 @@ Cypress.Commands.add(
       .invoke("text")
       .then((text) => {
         cy.wrap(subject).realType(createBackspaceText(text)),
-          {
-            delay: 0,
-          };
+        {
+          delay: 0,
+        };
       });
   }
 );
@@ -548,7 +548,7 @@ Cypress.Commands.add("installMarketplacePlugin", (pluginName) => {
     }
   });
 
-  function installPlugin(pluginName) {
+  function installPlugin (pluginName) {
     cy.get('[data-cy="-list-item"]').eq(1).click();
     cy.wait(1000);
 
@@ -621,3 +621,12 @@ Cypress.Commands.add(
       .and("have.text", `${fieldName} is required`);
   }
 );
+
+Cypress.Commands.add('ifEnv', (expectedEnvs, callback) => {
+  const actualEnv = Cypress.env("environment");
+  const envArray = Array.isArray(expectedEnvs) ? expectedEnvs : [expectedEnvs];
+
+  if (envArray.includes(actualEnv)) {
+    callback();
+  }
+});
\ No newline at end of file
diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js
index c5785dcef1..06f34baa99 100644
--- a/cypress-tests/cypress/constants/selectors/common.js
+++ b/cypress-tests/cypress/constants/selectors/common.js
@@ -18,7 +18,7 @@ export const commonSelectors = {
   canvas: "[data-cy=real-canvas]",
   appCardOptionsButton: "[data-cy=app-card-menu-icon]",
   autoSave: "[data-cy=autosave-indicator]",
-  nameInputFieldd: "[data-cy=name-input-field]",
+  inputFieldName: "[data-cy=name-input-field]",
   valueInputFieldd: "[data-cy=value-input-field]",
   skipButton: ".driver-close-btn",
   skipInstallationModal: "[data-cy=skip-button]",
diff --git a/cypress-tests/cypress/constants/selectors/eeCommon.js b/cypress-tests/cypress/constants/selectors/eeCommon.js
new file mode 100644
index 0000000000..de54858f45
--- /dev/null
+++ b/cypress-tests/cypress/constants/selectors/eeCommon.js
@@ -0,0 +1,202 @@
+import { cyParamName } from "./common";
+
+export const commonEeSelectors = {
+    instanceSettingIcon: '[data-cy="instance-settings-option"]',
+    auditLogIcon: '[data-cy="audit-log-option"]',
+    cancelButton: '[data-cy="cancel-button"]',
+    saveButton: '[data-cy="save-button"]',
+    pageTitle: '[data-cy="dashboard-section-header"]',
+    modalTitle: '[data-cy="modal-title"]',
+    modalCloseButton: '[data-cy="modal-close-button"]',
+    saveButton: '[data-cy="save-button"]',
+    cardTitle: '[data-cy="card-title"]',
+    AddQueryButton: '[data-cy="show-ds-popover-button"]',
+    promoteButton: '[data-cy="promote-button"]',
+    settingsIcon: '[data-cy="icon-settings"]',
+    gitSyncIcon: '[data-cy="git-sync-icon"]',
+    confirmButton: '[data-cy="confirm-button"]',
+    importFromGit: '[data-cy="import-from-git-button"]',
+    searchBar: '[data-cy="query-manager-search-bar"]',
+    nameHeader: '[data-cy="name-header"]',
+    modalMessage: '[data-cy="modal-message"]',
+    paginationSection: '[data-cy="pagination-section"]',
+
+};
+
+export const ssoEeSelector = {
+    oidc: '[data-cy="openid-connect-sso-card"]',
+    statusLabel: '[data-cy="status-label"]',
+    oidcToggle: '[data-cy="openid-toggle-input"] > .slider',
+    oidcPageElements: {
+        oidcToggleLabel: '[data-cy="openid-toggle-label"]',
+        nameLabel: '[data-cy="name-label"]',
+        clientIdLabel: '[data-cy="client-id-label"]',
+        clientSecretLabel: '[data-cy="client-secret-label"]',
+        encryptedLabel: '[data-cy="encripted-label"]',
+        WellKnownUrlLabel: '[data-cy="well-known-url-label"]',
+        // redirectUrlLabel: '[data-cy="redirect-url-label"]',
+    },
+    nameInput: '[data-cy="name-input"]',
+    clientIdInput: '[data-cy="client-id-input"]',
+    clientSecretInput: '[data-cy="client-secret-input"]',
+    WellKnownUrlInput: '[data-cy="well-known-url-input"]',
+    redirectUrl: '[data-cy="redirect-url"]',
+    copyIcon: '[data-cy="copy-icon]',
+    oidcSSOText: '[data-cy="oidc-sso-button-text"]',
+    oidcSSOIcon: '[data-cy="oidc-so-icon"]',
+    ldapPageElements: {
+        ldapToggleLabel: '[data-cy="ldap-toggle-label"]',
+        nameLabel: '[data-cy="name-label"]',
+        hostLabel: '[data-cy="host-label"]',
+        portLabel: '[data-cy="port-label"]',
+        baseDnLabel: '[data-cy="base-dn-label"]',
+        baseDnHelperText: '[data-cy="base-dn-helper-text"]',
+        sslLabel: '[data-cy="ssl-label"]',
+    },
+    ldapToggle: '[data-cy="ldap-toggle-input"] > .slider',
+    hostInput: '[data-cy="host-input"]',
+    portInput: '[data-cy="port-input"]',
+    baseDnInput: '[data-cy="base-dn-input"]',
+    sslToggleInput: '[data-cy="ssl-toggle-input"]',
+    ldapSSOText: '[data-cy="ldap-sso-button-text"]',
+    userNameInputLabel: '[data-cy="user-name-input-label"]',
+    passwordInputLabel: '[data-cy="password-label"]',
+    passwordInputField: '[data-cy="password-input-field"]',
+
+    samlModalElements: {
+        toggleLabel: '[data-cy="saml-toggle-label"]',
+        NameLabel: '[data-cy="name-label"]',
+        metaDataLabel: '[data-cy="idp-metadata-label"]',
+        baseDNHelperText: '[data-cy="base-dn-helper-text"]',
+        groupAttributeLabel: '[data-cy="group-attribute-label"]',
+        groupAttributeHelperText: '[data-cy="group-attribute-helper-text"]',
+    }
+};
+
+export const eeGroupsSelector = {
+    resourceDs: '[data-cy="resource-datasources"]',
+    dsCreateCheck: '[data-cy="checkbox-create-ds"]',
+    dsDeleteCheck: '[data-cy="checkbox-delete-ds"]',
+    datasourceLink: '[data-cy="datasource-link"]',
+    dsSearch: '[data-cy="datasource-select-search"]',
+    AddDsButton: '[data-cy="datasource-add-button"]',
+    dsNameHeader: '[data-cy="datasource-name-header"]',
+};
+
+export const instanceSettingsSelector = {
+    allUsersTab: '[data-cy="all-users-list-item"]',
+    manageInstanceSettings: '[data-cy="manage-instance-settings-list-item"]',
+    typeColumnHeader: '[data-cy="users-table-type-column-header"]',
+    workspaceColumnHeader: '[data-cy="users-table-workspaces-column-header"]',
+    userName: (userName) => {
+        return `[data-cy="${cyParamName(userName)}-user-name"]`;
+    },
+    userEmail: (userName) => {
+        return `[data-cy="${cyParamName(userName)}-user-email"]`;
+    },
+    userType: (userName) => {
+        return `[data-cy="${cyParamName(userName)}-user-type"]`;
+    },
+    userStatus: (userName) => {
+        return `[data-cy="${cyParamName(userName)}-user-status"]`;
+    },
+    viewButton: (userName) => {
+        return `[data-cy="${cyParamName(userName)}-user-view-button"]`;
+    },
+    editButton: (userName) => {
+        return `[data-cy="${cyParamName(userName)}-user-edit-button"]`;
+    },
+    viewModalNoColumnHeader: '[data-cy="number-column-header"]',
+    viewModalNameColumnHeader: '[data-cy="name-column-header"]',
+    viewModalStatusColumnHeader: '[data-cy="status-column-header"]',
+    archiveAllButton: '[data-cy="archive-all-button"]',
+    viewModalRow: (workspaceName) => {
+        return `[data-cy="${cyParamName(workspaceName)}-workspace-row"]>`;
+    },
+
+    workspaceName: (workspaceName) => {
+        return `[data-cy="${cyParamName(workspaceName)}-workspace-name"]`;
+    },
+    userStatusChangeButton: '[data-cy="user-state-change-button"]',
+    superAdminToggle: '[data-cy="super-admin-form-check-input"]',
+    superAdminToggleLabel: '[data-cy="super-admin-form-check-label"]',
+    allowWorkspaceToggle: '[data-cy="form-check-input"]',
+    allowWorkspaceToggleLabel: '[data-cy="form-check-label"]',
+    allowWorkspaceHelperText: '[data-cy="instance-settings-help-text"]',
+    allWorkspaceTab: '[data-cy="all-workspaces-list-item"]',
+};
+
+
+export const multiEnvSelector = {
+    envContainer: '[data-cy="env-container"]',
+    currentEnvName: '[data-cy="list-current-env-name"]',
+    envArrow: '[data-cy="env-arrow"]',
+    selectedEnvName: '[data-cy="selected-current-env-name"]',
+    envNameList: '[data-cy="env-name-list"]',
+    appVersionLabel: '[data-cy="app-version-label"]',
+    currentVersion: '[data-cy="current-version"]',
+    createNewVersionButton: '[data-cy="create-new-version-button"]',
+    fromLabel: '[data-cy="from-label"]',
+    toLabel: '[data-cy="to-label"]',
+    currEnvName: '[data-cy="current-env-name"]',
+    targetEnvName: '[data-cy="target-env-name"]',
+    stagingLabel: '[data-cy="staging-label"]',
+    productionLabel: '[data-cy="production-label"]',
+};
+
+export const whiteLabellingSelectors = {
+    whiteLabelList: '[data-cy="white-labelling-list-item"]',
+    appLogoLabel: '[data-cy="app-logo-label"]',
+    appLogoInput: '[data-cy="input-field-app-logo"]',
+    appLogoHelpText: '[data-cy="app-logo-help-text"]',
+    pageTitleLabel: '[data-cy="page-title-label"]',
+    pageTitleInput: '[data-cy="input-field-page-title"]',
+    pageTitleHelpText: '[data-cy="page-title-help-text"]',
+    favIconLabel: '[data-cy="fav-icon-label"]',
+    favIconInput: '[data-cy="input-field-fav-icon"]',
+    favIconHelpText: '[data-cy="fav-icon-help-text"]',
+};
+
+export const gitSyncSelector = {
+    gitCommitInput: '[data-cy="git-commit-input"]',
+    commitHelperText: '[data-cy="commit-helper-text"]',
+    gitRepoInput: '[data-cy="git-repo-input"]',
+    commitMessageInput: '[data-cy="commit-message-input"]',
+    lastCommitInput: '[data-cy="las-commit-message"]',
+    lastCommitVersion: '[data-cy="last-commit-version"]',
+    autherInfo: '[data-cy="auther-info"]',
+    commitButton: '[data-cy="commit-button"]',
+    gitSyncToggleInput: '[data-cy="git-sync-toggle-input"]',
+    gitSyncApphelperText: '[data-cy="sync-app-helper-text"]',
+    connectRepoButton: '[data-cy="connect-repo-button"]',
+    toggleMessage: '[data-cy="toggle-message"]',
+    sshInput: '[data-cy="git-ssh-input"]',
+    generateSshButton: '[data-cy="generate-ssh-key-button"',
+    sshInputHelperText: '[data-cy="git-ssh-input-helper-text"]',
+    configDeleteButton: '[data-cy="button-config-delete"]',
+    testConnectionButton: '[data-cy="test-connection-button"]',
+    sshKey: '[data-cy="ssh-key"]',
+    deployKeyHelperText: '[data-cy="deploy-key-helper-text"]',
+    gitRepoLink: '[data-cy="git-repo-link"]',
+    appNameField: '[data-cy="app-name-field"]',
+    gitRepoInfo: '[data-cy="git-repo-info"]',
+    pullButton: '[data-cy="pull-button"]'
+
+
+}
+
+export const workspaceSelector = {
+    activelink: '[data-cy="active-link"]',
+    archivedLik: '[data-cy="archived-link"]',
+    userStatusChange: '[data-cy="button-user-status-change"]',
+    workspaceStatusChange: '[data-cy="button-ws-status-change"]',
+    switchWsModalTitle: '[data-cy="switch-modal-title"]',
+    switchWsModalMessage: '[data-cy="switch-modal-message"]',
+    workspaceName: (workspaceName) => {
+        return `[data-cy="${workspaceName}-workspace-name"]`
+    },
+    workspaceInput: (workspaceName) => {
+        return `[data-cy="${workspaceName}-workspace-input"]`
+    },
+
+}
\ No newline at end of file
diff --git a/cypress-tests/cypress/constants/selectors/onboarding.js b/cypress-tests/cypress/constants/selectors/onboarding.js
index a7839afa74..cf2404f6f3 100644
--- a/cypress-tests/cypress/constants/selectors/onboarding.js
+++ b/cypress-tests/cypress/constants/selectors/onboarding.js
@@ -54,8 +54,8 @@ export const onboardingSelectors = {
   basicPlanTitle: '[data-cy="basic-plan-title"]',
   planPrice: '[data-cy="plan-price"]',
   pricePeriod: '[data-cy="price-period"]',
-  flexibleTitle: '[data-cy="flexible-title"]',
-  businessTitle: '[data-cy="business-title"]',
+  flexibleTitle: '[data-cy="pro-title"]',
+  businessTitle: '[data-cy="team-title"]',
   enterpriseTitle: '[data-cy="enterprise-title"]',
   customPricingHeader: '[data-cy="custom-pricing-header"]',
   noCreditCardBanner: '[data-cy="no-credit-card-banner"]',
diff --git a/cypress-tests/cypress/constants/texts/eeCommon.js b/cypress-tests/cypress/constants/texts/eeCommon.js
new file mode 100644
index 0000000000..b112762f65
--- /dev/null
+++ b/cypress-tests/cypress/constants/texts/eeCommon.js
@@ -0,0 +1,75 @@
+export const commonEeText = {
+    cancelButton: "Cancel",
+    saveButton: "Save changes",
+    closeButton: "Close",
+    defaultWorkspace: "My workspace",
+};
+
+export const ssoEeText = {
+    statusLabel: "Disabled",
+    enabledLabel: "Enabled",
+    disabledLabel: "Disabled",
+    oidcPageElements: {
+        oidcToggleLabel: "OpenID Connect",
+        nameLabel: "Name",
+        clientIdLabel: "Client ID",
+        clientSecretLabel: "Client secretEncrypted",
+        encryptedLabel: "Encrypted",
+        WellKnownUrlLabel: "Well known URL",
+        // redirectUrlLabel: "Redirect URL",
+    },
+    oidcEnabledToast: "Enabled OpenId SSO",
+    oidcDisabledToast: "Disabled OpenId SSO",
+    oidcUpdatedToast: "updated SSO configurations",
+    testName: "Tooljet OIDC",
+    testclientId: "24567098-mklj8t20za1smb2if.apps.googleusercontent.com",
+    testclientSecret: "2345-client-id-.apps.googleusercontent.com",
+    testWellknownUrl: "google.com",
+    oidcSSOText: "Sign in with Tooljet OIDC",
+
+    ldapPageElements: {
+        ldapToggleLabel: "LDAP",
+        nameLabel: "Name",
+        hostLabel: "Host name",
+        portLabel: "Port",
+        baseDnLabel: "Base DN",
+        baseDnHelperText: "Location without UID or CN",
+        sslLabel: "SSL",
+    },
+    ldapSSOText: "Sign in with Tooljet LDAP Auth",
+    userNameInputLabel: "Username",
+    samlModalElements: {
+        toggleLabel: "SAML",
+        NameLabel: "Name",
+        metaDataLabel: "Identity provider metadata",
+        baseDNHelperText:
+            "Ensure the Identity provider metadata is in XML format. You can download it from your IdP's site",
+        groupAttributeLabel: "Group attribute",
+        groupAttributeHelperText:
+            "Define attribute for user-to-group mapping based on the IdP",
+    },
+};
+export const eeGroupsText = {
+    resourceDs: "Datasources",
+    AddDsButton: "Add",
+    dsNameHeader: "Datasource name",
+};
+
+export const instanceSettingsText = {
+    pageTitle: "Settings",
+    allUsersTab: "All users",
+    manageInstanceSettings: "Manage instance settings",
+    typeColumnHeader: "Type",
+    workspaceColumnHeader: "Workspaces",
+    superAdminType: "instance",
+    viewModalTitle: "Workspaces of The Developer",
+    archiveAllButton: "Archive All",
+    archiveState: "Archive",
+    editModalTitle: "Edit user details",
+    superAdminToggleLabel: "Super admin",
+    allowWorkspaceToggleLabel: "Allow personal workspace",
+    allowWorkspaceHelperText:
+        "This feature will enable users to create their own workspace",
+    saveButton: "Save",
+    untitledWorkspace: "Untitled workspace",
+};
diff --git a/cypress-tests/cypress/constants/texts/manageSSO.js b/cypress-tests/cypress/constants/texts/manageSSO.js
index c1a95e7179..56052be58f 100644
--- a/cypress-tests/cypress/constants/texts/manageSSO.js
+++ b/cypress-tests/cypress/constants/texts/manageSSO.js
@@ -59,4 +59,9 @@ export const ssoText = {
   alertText: "Danger zone",
   disablePasswordHelperText:
     "Disable password login only if your SSO is configured otherwise you will get locked out",
+  disablePasswordHelperText:
+    "Disable password login only if your SSO is configured otherwise you will get locked out",
+  toggleUpdateToast: (toggle) => {
+    return `Saved ${toggle} SSO configurations`
+  }
 };
diff --git a/cypress-tests/cypress/constants/texts/onboarding.js b/cypress-tests/cypress/constants/texts/onboarding.js
index a41a654525..18efeb9006 100644
--- a/cypress-tests/cypress/constants/texts/onboarding.js
+++ b/cypress-tests/cypress/constants/texts/onboarding.js
@@ -23,8 +23,8 @@ export const onboardingText = {
     endUserPriceText: "$10",
     comparePlansText: "Compare plans",
     basicPlanText: "Basic Plan",
-    flexibleText: "Flexible",
-    businessText: "Business",
+    flexibleText: "Pro",
+    businessText: "Team",
     enterpriseText: "Enterprise",
     customPricingText: "Custom pricing",
     noCreditCardText: "No credit card required!",
diff --git a/cypress-tests/cypress/e2e/happyPath/marketplace/commonTestcases/data-source/restAPIHappyPath.cy.js b/cypress-tests/cypress/e2e/happyPath/marketplace/commonTestcases/data-source/restAPIHappyPath.cy.js
index 09559e2ba7..ab3d3993a3 100644
--- a/cypress-tests/cypress/e2e/happyPath/marketplace/commonTestcases/data-source/restAPIHappyPath.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/marketplace/commonTestcases/data-source/restAPIHappyPath.cy.js
@@ -337,7 +337,7 @@ describe("Data source Rest API", () => {
       `cypress-${data.dataSourceName}-restapi`,
       "restapi",
       [
-        { key: "url", value: Cypress.env("restAPI_BaseURL") },
+        { key: "url", value: "https://jsonplaceholder.typicode.com" },
         { key: "auth_type", value: "none" },
         { key: "grant_type", value: "authorization_code" },
         { key: "add_token_to", value: "header" },
@@ -370,62 +370,100 @@ describe("Data source Rest API", () => {
     cy.apiCreateApp(`${fake.companyName}-restAPI-CURD-App`);
     cy.openApp();
     createAndRunRestAPIQuery({
-      queryName: "get_beeceptor_data",
+      queryName: "get_all_users",
       dsName: `cypress-${data.dataSourceName}-restapi`,
       method: "GET",
-      urlSuffix: "/api/users",
+      urlSuffix: "/users",
       run: true,
+      expectedResponseShape: {
+        "0.id": true,
+        "0.name": true,
+        "0.email": true,
+      },
     });
     createAndRunRestAPIQuery({
       queryName: "post_restapi",
       dsName: `cypress-${data.dataSourceName}-restapi`,
       method: "POST",
       headersList: [["Content-Type", "application/json"]],
-      rawBody: '{"price": 200,"name": "Violin"}',
-      urlSuffix: "/api/users",
-      expectedResponseShape: { price: 200, name: "Violin", id: true },
+      rawBody: `{
+        "name": "Test User",
+        "username": "testuser",
+        "email": "test@example.com",
+        "address": {
+          "street": "123 Test St",
+          "city": "Testville",
+          "zipcode": "12345"
+        }
+      }`,
+      urlSuffix: "/users",
+      run: true,
+      expectedResponseShape: {
+        id: true,
+        name: "Test User",
+        email: "test@example.com",
+      },
     });
-    cy.readFile("cypress/fixtures/restAPI/storedId.json").then(
-      (postResponseID) => {
-        const id1 = postResponseID.id;
+    const id1 = 1;
 
-        createAndRunRestAPIQuery({
-          queryName: "put_restapi_id",
-          dsName: `cypress-${data.dataSourceName}-restapi`,
-          method: "PUT",
-          headersList: [["Content-Type", "application/json"]],
-          rawBody: '{"price": 500,"name": "Guitar"}',
-          urlSuffix: `/api/users/${id1}`,
-          expectedResponseShape: { price: 500, name: "Guitar", id: id1 },
-        });
-        createAndRunRestAPIQuery({
-          queryName: "patch_restapi_id",
-          dsName: `cypress-${data.dataSourceName}-restapi`,
-          method: "PATCH",
-          headersList: [["Content-Type", "application/json"]],
-          rawBody: '{"price": 999 }',
-          urlSuffix: `/api/users/${id1}`,
-          run: true,
-          expectedResponseShape: { price: 999, id: id1 },
-        });
-        createAndRunRestAPIQuery({
-          queryName: "get_restapi_id",
-          dsName: `cypress-${data.dataSourceName}-restapi`,
-          method: "GET",
-          urlSuffix: `/api/users/${id1}`,
-          run: true,
-          expectedResponseShape: { price: 999, name: "Guitar", id: id1 },
-        });
-        createAndRunRestAPIQuery({
-          queryName: "delete_restapi_id",
-          dsName: `cypress-${data.dataSourceName}-restapi`,
-          method: "DELETE",
-          urlSuffix: `/api/users/${id1}`,
-          run: true,
-          expectedResponseShape: { success: true },
-        });
-      }
-    );
+    createAndRunRestAPIQuery({
+      queryName: "put_restapi_id",
+      dsName: `cypress-${data.dataSourceName}-restapi`,
+      method: "PUT",
+      headersList: [["Content-Type", "application/json"]],
+      rawBody: `{
+        "id": 1,
+        "name": "Fully Updated User",
+        "username": "updateduser",
+        "email": "updated@example.com",
+        "address": {
+          "street": "456 Updated St",
+          "city": "Updatedville",
+          "zipcode": "54321"
+        }
+      }`,
+      urlSuffix: `/users/${id1}`,
+      run: true,
+      expectedResponseShape: {
+        id: id1,
+        name: "Fully Updated User",
+        email: "updated@example.com",
+      },
+    });
+    createAndRunRestAPIQuery({
+      queryName: "patch_restapi_id",
+      dsName: `cypress-${data.dataSourceName}-restapi`,
+      method: "PATCH",
+      headersList: [["Content-Type", "application/json"]],
+      rawBody: `{
+        "email": "partially.updated@example.com"
+      }`,
+      urlSuffix: `/users/${id1}`,
+      run: true,
+      expectedResponseShape: {
+        id: id1,
+        email: "partially.updated@example.com",
+      },
+    });
+    createAndRunRestAPIQuery({
+      queryName: "get_restapi_id",
+      dsName: `cypress-${data.dataSourceName}-restapi`,
+      method: "GET",
+      urlSuffix: `/users/${id1}`,
+      run: true,
+      expectedResponseShape: {
+        id: id1,
+        email: "Sincere@april.biz",
+      },
+    });
+    createAndRunRestAPIQuery({
+      queryName: "delete_restapi_id",
+      dsName: `cypress-${data.dataSourceName}-restapi`,
+      method: "DELETE",
+      urlSuffix: `/users/${id1}`,
+      run: true,
+      expectedResponseShape: {},
+    });
     cy.apiDeleteApp(`${fake.companyName}-restAPI-CURD-App`);
     cy.apiDeleteGDS(`cypress-${data.dataSourceName}-restapi`);
   });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
index d6483fa400..19b87c6efe 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/apps/privateAndpublicApps.cy.js
@@ -5,10 +5,7 @@ import { inviteUserToWorkspace } from "Support/utils/manageUsers";
 import { setSignupStatus } from "Support/utils/manageSSO";
 import { onboardingSelectors } from "Selectors/onboarding";
 import { commonText } from "Texts/common";
-import {
-  userSignUp,
-  addNewUser,
-} from "Support/utils/onboarding";
+import { userSignUp, addNewUser } from "Support/utils/onboarding";
 import {
   setUpSlug,
   setupAppWithSlug,
@@ -16,347 +13,371 @@ import {
   onboardUserFromAppLink,
 } from "Support/utils/apps";
 
+describe(
+  "Private and Public apps",
+  {
+    retries: { runMode: 2 },
+  },
+  () => {
+    let data;
 
-describe("Private and Public apps", {
-  retries: { runMode: 2 },
-}, () => {
-  let data;
+    beforeEach(() => {
+      data = {
+        appName: `${fake.companyName} P P App`,
+        slug: `${fake.companyName} P P App`.toLowerCase().replace(/\s+/g, "-"),
+        firstName: fake.firstName,
+        email: fake.email.toLowerCase(),
+        workspaceName: fake.firstName,
+        workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
+      };
 
-  beforeEach(() => {
-    data = {
-      appName: `${fake.companyName} P P App`,
-      slug: `${fake.companyName} P P App`.toLowerCase().replace(/\s+/g, "-"),
-      firstName: fake.firstName,
-      email: fake.email.toLowerCase(),
-      workspaceName: fake.firstName,
-      workspaceSlug: fake.firstName.toLowerCase().replace(/\s+/g, "-"),
-    }
-
-    cy.defaultWorkspaceLogin();
-    cy.skipWalkthrough();
-  });
-
-  it("Verify private and public app share functionality", () => {
-    cy.apiCreateApp(data.appName);
-    cy.openApp();
-    cy.apiAddComponentToApp(data.appName, "text1");
-
-    // Check unreleased version state
-    cy.get('[data-cy="share-button-link"]>span').should("be.visible").click();
-    cy.contains("This version has not been released yet").should("be.visible");
-    cy.get(commonWidgetSelector.modalCloseButton).click();
-
-    // Release and verify share modal
-    releaseApp();
-    cy.get(commonWidgetSelector.shareAppButton).click();
-    for (const elements in commonWidgetSelector.shareModalElements) {
-      cy.get(commonWidgetSelector.shareModalElements[elements])
-        .verifyVisibleElement("have.text", commonText.shareModalElements[elements]);
-    }
-
-    // Verify share modal elements
-    const shareModalSelectors = [
-      'copyAppLinkButton',
-      'makePublicAppToggle',
-      'appLink',
-      'appNameSlugInput',
-      'modalCloseButton'
-    ];
-    shareModalSelectors.forEach(selector => {
-      cy.get(commonWidgetSelector[selector]).should("be.visible");
+      cy.defaultWorkspaceLogin();
+      cy.skipWalkthrough();
     });
 
-    // Configure and verify slug
-    cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
-    cy.get('[data-cy="app-slug-accepted-label"]')
-      .should("be.visible")
-      .and("have.text", "Slug accepted!");
+    it("Verify private and public app share functionality", () => {
+      cy.apiCreateApp(data.appName);
+      cy.openApp();
+      cy.apiAddComponentToApp(data.appName, "text1");
 
-    cy.get(commonWidgetSelector.modalCloseButton).click();
-    cy.forceClickOnCanvas();
-    cy.backToApps();
+      // Check unreleased version state
+      cy.get('[data-cy="share-button-link"]>span').should("be.visible").click();
+      cy.contains("This version has not been released yet").should(
+        "be.visible"
+      );
+      cy.get(commonWidgetSelector.modalCloseButton).click();
 
-    // Test private access
-    logout();
+      // Release and verify share modal
+      releaseApp();
+      cy.get(commonWidgetSelector.shareAppButton).click();
+      for (const elements in commonWidgetSelector.shareModalElements) {
+        cy.get(
+          commonWidgetSelector.shareModalElements[elements]
+        ).verifyVisibleElement(
+          "have.text",
+          commonText.shareModalElements[elements]
+        );
+      }
 
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      // Verify share modal elements
+      const shareModalSelectors = [
+        "copyAppLinkButton",
+        "makePublicAppToggle",
+        "appLink",
+        "appNameSlugInput",
+        "modalCloseButton",
+      ];
+      shareModalSelectors.forEach((selector) => {
+        cy.get(commonWidgetSelector[selector]).should("be.visible");
+      });
+
+      // Configure and verify slug
+      cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
+      cy.get('[data-cy="app-slug-accepted-label"]')
+        .should("be.visible")
+        .and("have.text", "Slug accepted!");
+
+      cy.get(commonWidgetSelector.modalCloseButton).click();
+      cy.forceClickOnCanvas();
+      cy.backToApps();
+
+      // Test private access
+      logout();
+
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
+        "be.visible"
+      );
+      cy.wait(2000);
+      cy.appUILogin();
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
+
+      // Test public access
+      cy.get(commonSelectors.viewerPageLogo).click();
+      cy.openApp(
+        "appSlug",
+        Cypress.env("workspaceId"),
+        Cypress.env("appId"),
+        commonWidgetSelector.draggableWidget("text1")
+      );
+      cy.get(commonWidgetSelector.shareAppButton).click();
+      cy.get(commonWidgetSelector.makePublicAppToggle).check();
+      cy.get(commonWidgetSelector.modalCloseButton).click();
+      cy.backToApps();
+
+      logout();
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
     });
 
-    cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
-    cy.wait(2000);
-    cy.appUILogin();
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+    it("Verify app private and public app visibility for the same workspace user", () => {
+      setupAppWithSlug(data.appName, data.slug);
 
+      inviteUserToWorkspace(data.firstName, data.email);
+      logout();
+      cy.visit("/");
+      cy.wait(2000);
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
+        "be.visible"
+      );
 
-    // Test public access
-    cy.get(commonSelectors.viewerPageLogo).click();
-    cy.openApp(
-      "appSlug",
-      Cypress.env("workspaceId"),
-      Cypress.env("appId"),
-      commonWidgetSelector.draggableWidget("text1")
-    );
-    cy.get(commonWidgetSelector.shareAppButton).click();
-    cy.get(commonWidgetSelector.makePublicAppToggle).check();
-    cy.get(commonWidgetSelector.modalCloseButton).click();
-    cy.backToApps();
+      // Test private access
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
 
-    logout();
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-    });
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+      cy.wait(2000);
+      cy.appUILogin(data.email, "password");
 
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
 
-  });
+      // Test with private app valid session
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
 
-  it("Verify app private and public app visibility for the same workspace user", () => {
-    setupAppWithSlug(data.appName, data.slug);
+      cy.get(commonSelectors.viewerPageLogo).click();
 
-    inviteUserToWorkspace(data.firstName, data.email);
-    logout();
-    cy.visit("/");
-    cy.wait(2000);
-    cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
+      // Test public access
+      cy.defaultWorkspaceLogin();
+      cy.wait(1000);
+      cy.apiMakeAppPublic();
+      logout();
+      cy.wait(1000);
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
+        "be.visible"
+      );
 
-    // Test private access
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
+
+      // Test with public app with valid session
+      cy.apiLogin(data.email, "password");
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
     });
 
-    cy.wait(2000);
-    cy.appUILogin(data.email, "password");
+    it("Verify app private and public app visibility for the same instance user", () => {
+      setupAppWithSlug(data.appName, data.slug);
 
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+      cy.apiLogout();
+      userSignUp(data.firstName, data.email, data.workspaceName);
+      cy.wait(1000);
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
 
-    // Test with private app valid session
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-    });
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+      cy.visit("/");
+      logout();
 
+      // Test public access
+      cy.defaultWorkspaceLogin();
+      cy.apiMakeAppPublic();
+      logout();
 
-    cy.get(commonSelectors.viewerPageLogo).click();
+      cy.wait(1000);
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
+        "be.visible"
+      );
 
-    // Test public access
-    cy.defaultWorkspaceLogin();
-    cy.wait(1000);
-    cy.apiMakeAppPublic();
-    logout();
-    cy.wait(1000);
-    cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
 
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-    });
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
-
-
-
-    // Test with public app with valid session
-    cy.apiLogin(data.email, "password");
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-    });
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
-
-
-  });
-
-  it("Verify app private and public app visibility for the same instance user", () => {
-    setupAppWithSlug(data.appName, data.slug);
-
-    cy.apiLogout();
-    userSignUp(data.firstName, data.email, data.workspaceName);
-    cy.wait(1000);
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      // Verify public app with valid session
+      cy.apiLogin(data.email, "password");
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
     });
 
-    cy.visit("/");
-    logout();
+    it("Should redirect to workspace login and handle signup flow of existing and non-existing user", () => {
+      setSignupStatus(true);
+      setupAppWithSlug(data.appName, data.slug);
 
-    // Test public access
-    cy.defaultWorkspaceLogin();
-    cy.apiMakeAppPublic();
-    logout();
+      cy.apiLogout();
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
 
-    cy.wait(1000);
-    cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
+      cy.get(commonSelectors.workspaceName).verifyVisibleElement(
+        "have.text",
+        "My workspace"
+      );
 
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-    });
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+      // Test signup flow
+      cy.intercept("POST", "/api/onboarding/signup").as("signup");
+      cy.get(commonSelectors.createAnAccountLink).click();
+      cy.wait(3000);
+      cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
+      cy.clearAndType(commonSelectors.inputFieldEmailAddress, data.email);
+      cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+      cy.get(commonSelectors.signUpButton).click();
 
+      cy.wait("@signup").then((interception) => {
+        expect(interception.response.statusCode).to.eq(201);
+      });
 
+      // Process invitation
+      onboardUserFromAppLink(data.email, data.slug);
 
-    // Verify public app with valid session
-    cy.apiLogin(data.email, "password");
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-    });
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
 
+      cy.get('[data-cy="viewer-page-logo"]').click();
+      logout();
+      cy.wait(1000);
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
+        "be.visible"
+      );
 
-  });
+      // Setup new workspace and app
+      cy.defaultWorkspaceLogin();
+      cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
+      cy.apiLogout();
+      cy.apiLogin();
+      cy.visit(`${data.workspaceSlug}`);
+      setSignupStatus(true, data.workspaceName);
 
-  it("Should redirect to workspace login and handle signup flow of existing and non-existing user", () => {
-    setSignupStatus(true);
-    setupAppWithSlug(data.appName, data.slug);
+      data.slug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
 
-    cy.apiLogout();
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      cy.createApp(data.appName);
+      cy.dragAndDropWidget("Text", 500, 500);
+      releaseApp();
+      setUpSlug(data.slug);
+      cy.forceClickOnCanvas();
+      cy.backToApps();
+
+      // Test signup flow in new workspace
+      cy.apiLogout();
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+
+      cy.get(commonSelectors.workspaceName).verifyVisibleElement(
+        "have.text",
+        data.workspaceName
+      );
+
+      cy.get(commonSelectors.createAnAccountLink).click();
+      cy.wait(3000);
+      cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
+      cy.clearAndType(commonSelectors.inputFieldEmailAddress, data.email);
+      cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+      cy.get(commonSelectors.signUpButton).click();
+      cy.wait("@signup").then((interception) => {
+        expect(interception.response.statusCode).to.eq(201);
+      });
+
+      onboardUserFromAppLink(data.email, data.slug, data.workspaceName, false);
+      cy.get(commonWidgetSelector.draggableWidget("text1")).should(
+        "be.visible"
+      );
     });
 
-    cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-      "have.text",
-      "My workspace"
-    );
+    it("Should verify restricted app access", () => {
+      data.workspaceName = fake.firstName;
+      data.workspaceSlug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
 
-    // Test signup flow
-    cy.intercept("POST", "/api/onboarding/signup").as("signup");
-    cy.get(commonSelectors.createAnAccountLink).click();
-    cy.wait(3000);
-    cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
-    cy.clearAndType(commonSelectors.inputFieldEmailAddress, data.email);
-    cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
-    cy.get(commonSelectors.signUpButton).click();
+      cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
+      cy.apiLogout();
+      cy.apiLogin();
+      cy.visit(`${data.workspaceSlug}`);
+      cy.apiDeleteGranularPermission("end-user");
+      setSignupStatus(true, data.workspaceName);
 
-    cy.wait('@signup').then((interception) => {
-      expect(interception.response.statusCode).to.eq(201);
+      setupAppWithSlug(data.appName, data.slug);
+
+      inviteUserToWorkspace(data.firstName, data.email);
+
+      // Verify restricted access
+      cy.visitSlug({
+        actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      });
+      verifyRestrictedAccess();
+      cy.get('[data-cy="back-to-home-button"]').click();
+      cy.get(commonSelectors.homePageLogo).should("be.visible");
+
+      cy.apiLogout();
     });
 
-    // Process invitation
-    onboardUserFromAppLink(data.email, data.slug);
+    it.skip("Should verify private app access for different workspace users", () => {
+      const firstName1 = fake.firstName;
+      const email1 = fake.email.toLowerCase();
+      const permissionName = fake.firstName.toLowerCase(); // Defined but not used in original
+      const urls = {
+        editor: `${Cypress.config("baseUrl")}/my-workspace/apps/${data.slug}/home`,
+        preview: `${Cypress.config("baseUrl")}/applications/${data.slug}/home?version=v1`,
+        released: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      };
 
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+      // Setup workspace and app
+      cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
+      cy.apiLogout();
+      cy.apiLogin();
+      cy.visit(`${data.workspaceSlug}`);
+      setupAppWithSlug(data.appName, data.slug);
 
+      // Invite workspace user
+      addNewUser(data.firstName, data.email);
+      cy.wait(500);
 
-    cy.get('[data-cy="viewer-page-logo"]').click();
-    logout();
-    cy.wait(1000);
-    cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should("be.visible");
+      // Verify access restrictions
+      cy.visitSlug({ actualUrl: urls.editor });
+      verifyRestrictedAccess();
+      cy.get('[data-cy="back-to-home-button"]').click();
+      cy.get(commonSelectors.homePageLogo).should("be.visible");
 
-    // Setup new workspace and app
-    cy.defaultWorkspaceLogin();
-    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-    cy.apiLogout();
-    cy.apiLogin();
-    cy.visit(`${data.workspaceSlug}`);
-    setSignupStatus(true, data.workspaceName);
+      cy.visitSlug({ actualUrl: urls.preview });
 
-    data.slug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
+      // Switch users and verify access
+      cy.apiLogout();
+      cy.apiLogin();
+      cy.apiDeleteGranularPermission("end-user");
 
-    cy.createApp(data.appName);
-    cy.dragAndDropWidget("Text", 500, 500);
-    releaseApp();
-    setUpSlug(data.slug);
-    cy.forceClickOnCanvas();
-    cy.backToApps();
+      cy.apiLogin(data.email, "password");
+      cy.visitSlug({ actualUrl: urls.editor });
+      verifyRestrictedAccess();
+      cy.get('[data-cy="back-to-home-button"]').click();
+      cy.get(commonSelectors.homePageLogo).should("be.visible");
+      cy.visitSlug({ actualUrl: urls.preview });
 
-    // Test signup flow in new workspace
-    cy.apiLogout();
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
+      cy.apiLogout();
+
+      // Test with new user
+      userSignUp(firstName1, email1, data.workspaceName);
+      cy.visitSlug({ actualUrl: urls.editor });
+      cy.visitSlug({ actualUrl: urls.preview });
+      cy.visitSlug({ actualUrl: urls.released });
     });
-
-    cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-      "have.text",
-      data.workspaceName
-    );
-
-    cy.get(commonSelectors.createAnAccountLink).click();
-    cy.wait(3000);
-    cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
-    cy.clearAndType(commonSelectors.inputFieldEmailAddress, data.email);
-    cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
-    cy.get(commonSelectors.signUpButton).click();
-    cy.wait('@signup').then((interception) => {
-      expect(interception.response.statusCode).to.eq(201);
-    });
-
-    onboardUserFromAppLink(data.email, data.slug, data.workspaceName, false);
-    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
-
-
-  });
-
-  it("Should verify restricted app access", () => {
-    data.workspaceName = fake.firstName;
-    data.workspaceSlug = fake.firstName.toLowerCase().replace(/\s+/g, "-");
-
-    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-    cy.apiLogout();
-    cy.apiLogin();
-    cy.visit(`${data.workspaceSlug}`);
-    cy.apiDeleteGranularPermission("end-user");
-    setSignupStatus(true, data.workspaceName);
-
-    setupAppWithSlug(data.appName, data.slug);
-
-    inviteUserToWorkspace(data.firstName, data.email);
-
-    // Verify restricted access
-    cy.visitSlug({
-      actualUrl: `${Cypress.config("baseUrl")}/applications/${data.slug}`,
-    });
-    verifyRestrictedAccess();
-    cy.get('[data-cy="back-to-home-button"]').click();
-    cy.get(commonSelectors.homePageLogo).should("be.visible");
-
-    cy.apiLogout();
-  });
-
-  it.skip("Should verify private app access for different workspace users", () => {
-    const firstName1 = fake.firstName;
-    const email1 = fake.email.toLowerCase();
-    const permissionName = fake.firstName.toLowerCase(); // Defined but not used in original
-    const urls = {
-      editor: `${Cypress.config("baseUrl")}/my-workspace/apps/${data.slug}/home`,
-      preview: `${Cypress.config("baseUrl")}/applications/${data.slug}/home?version=v1`,
-      released: `${Cypress.config("baseUrl")}/applications/${data.slug}`
-    };
-
-    // Setup workspace and app
-    cy.apiCreateWorkspace(data.workspaceName, data.workspaceSlug);
-    cy.apiLogout();
-    cy.apiLogin();
-    cy.visit(`${data.workspaceSlug}`);
-    setupAppWithSlug(data.appName, data.slug);
-
-    // Invite workspace user
-    addNewUser(data.firstName, data.email);
-    cy.wait(500);
-
-    // Verify access restrictions
-    cy.visitSlug({ actualUrl: urls.editor });
-    verifyRestrictedAccess();
-    cy.get('[data-cy="back-to-home-button"]').click();
-    cy.get(commonSelectors.homePageLogo).should("be.visible");
-
-    cy.visitSlug({ actualUrl: urls.preview });
-
-    // Switch users and verify access
-    cy.apiLogout();
-    cy.apiLogin();
-    cy.apiDeleteGranularPermission("end-user");
-
-    cy.apiLogin(data.email, "password");
-    cy.visitSlug({ actualUrl: urls.editor });
-    verifyRestrictedAccess();
-    cy.get('[data-cy="back-to-home-button"]').click();
-    cy.get(commonSelectors.homePageLogo).should("be.visible");
-    cy.visitSlug({ actualUrl: urls.preview });
-
-    cy.apiLogout();
-
-    // Test with new user
-    userSignUp(firstName1, email1, data.workspaceName);
-    cy.visitSlug({ actualUrl: urls.editor });
-    cy.visitSlug({ actualUrl: urls.preview });
-    cy.visitSlug({ actualUrl: urls.released });
-  });
-});
\ No newline at end of file
+  }
+);
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Login.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Login.cy.js
index 55688c9222..ad30526421 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Login.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Login.cy.js
@@ -50,9 +50,6 @@ describe("Login functionality", () => {
 
   it("Should be able to login with valid credentials", () => {
     cy.appUILogin(user.email, user.password);
-    if (envVar === "Enterprise") {
-      cy.get(".btn-close").click();
-    }
     cy.get(commonSelectors.settingsIcon).click();
     cy.get(dashboardSelector.logoutLink);
   });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Signup.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Signup.cy.js
index 40bc083798..3cc22ce9b8 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Signup.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Signup.cy.js
@@ -15,11 +15,19 @@ import {
 } from "Support/utils/selfHostSignUp";
 import { onboardingSelectors } from "Selectors/onboarding";
 import { logout } from "Support/utils/common";
+import { enableInstanceSignup } from "Support/utils/manageSSO";
 
 describe("User signup", () => {
   const data = {};
   let invitationLink = "";
 
+  before(() => {
+    cy.ifEnv("Enterprise", () => {
+      enableInstanceSignup()
+    });
+
+  });
+
   it("Verify the signup flow and UI elements", () => {
     data.fullName = fake.fullName;
     data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/UserInviteFlow.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/UserInviteFlow.cy.js
index 5cdc6c5764..9883fef40d 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/UserInviteFlow.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/UserInviteFlow.cy.js
@@ -23,6 +23,8 @@ import {
 import { groupsSelector } from "Selectors/manageGroups";
 import { groupsText } from "Texts/manageGroups";
 import { onboardingSelectors } from "Selectors/onboarding";
+import { enableInstanceSignup } from "Support/utils/manageSSO";
+
 
 let invitationToken,
   organizationToken,
@@ -36,9 +38,9 @@ const envVar = Cypress.env("environment");
 describe("user invite flow cases", () => {
   beforeEach(() => {
     cy.defaultWorkspaceLogin();
-    if (envVar === "Enterprise") {
-      cy.get(".btn-close").click();
-    }
+    cy.ifEnv("Enterprise", () => {
+      enableInstanceSignup()
+    });
   });
 
   it("Should verify the Manage users page", () => {
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/bulkUsersUpload.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/bulkUsersUpload.cy.js
index b769f09d64..32e0a6c064 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/bulkUsersUpload.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/bulkUsersUpload.cy.js
@@ -1,59 +1,126 @@
 import { commonSelectors } from "Selectors/common";
-import { usersText } from "Texts/manageUsers";
 import { usersSelector } from "Selectors/manageUsers";
 import { groupsSelector } from "Selectors/manageGroups";
 import { fake } from "Fixtures/fake";
 import * as common from "Support/utils/common";
 import { bulkUserUpload } from "Support/utils/manageUsers";
 
+// Helper to resolve correct test data based on env
+const getFile = (fileGroup) => {
+  const env = Cypress.env("environment");
+  return env === "Community" ? fileGroup.default : fileGroup.alt;
+};
+
+
 describe("Bulk User Upload", () => {
-  // Test data configuration
   const TEST_FILES = {
     MISSING_NAME: {
-      path: "cypress/fixtures/bulkUser/without_name.csv",
-      fileName: "without_name",
-      error:
-        "Missing first_name,last_name,groups information in 2 row(s);. No users were uploaded, please update and try again.",
+      default: {
+        path: "cypress/fixtures/bulkUser/missing_name.csv",
+        fileName: "missing_name",
+        error:
+          "Missing first_name,last_name,groups information in 2 row(s);. No users were uploaded, please update and try again.",
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/missing_name_ee.csv",
+        fileName: "missing_name_ee",
+        error:
+          "Missing first_name,last_name,groups,metadata,userMetadata information in 2 row(s);. No users were uploaded, please update and try again.",
+      },
     },
     MISSING_EMAIL: {
-      path: "cypress/fixtures/bulkUser/without_email.csv",
-      fileName: "without_email",
-      error:
-        "Missing email,groups information in 2 row(s);. No users were uploaded, please update and try again.",
+      default: {
+        path: "cypress/fixtures/bulkUser/missing_email.csv",
+        fileName: "missing_email",
+        error:
+          "Missing email,groups information in 2 row(s);. No users were uploaded, please update and try again.",
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/missing_email_ee.csv",
+        fileName: "missing_email_ee",
+        error:
+          "Missing first_name,last_name,groups,metadata,userMetadata information in 2 row(s);. No users were uploaded, please update and try again.",
+      },
     },
     DUPLICATE_EMAIL: {
-      path: "cypress/fixtures/bulkUser/same_email.csv",
-      fileName: "same_email",
-      error: "Duplicate email found. Please provide a unique email address.",
-      isDuplicate: true,
+      default: {
+        path: "cypress/fixtures/bulkUser/same_email.csv",
+        fileName: "same_email",
+        error: "Duplicate email found. Please provide a unique email address.",
+        isDuplicate: true,
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/same_email_ee.csv",
+        fileName: "same_email_ee",
+        error: "Duplicate email found. Please provide a unique email address.",
+        isDuplicate: true,
+      },
     },
     EMPTY_NAMES: {
-      path: "cypress/fixtures/bulkUser/empty_first_and_last_name.csv",
-      fileName: "empty_first_and_last_name",
-      error:
-        "Missing first_name,last_name,groups information in 1 row(s);. No users were uploaded, please update and try again.",
+      default: {
+        path: "cypress/fixtures/bulkUser/empty_names.csv",
+        fileName: "empty_names",
+        error:
+          "Missing first_name,last_name,groups information in 1 row(s);. No users were uploaded, please update and try again.",
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/empty_names_ee.csv",
+        fileName: "empty_names_ee",
+        error:
+          "Missing first_name,last_name,groups,metadata,userMetadata information in 1 row(s);. No users were uploaded, please update and try again.",
+      },
     },
     LIMIT_EXCEEDED: {
-      path: "cypress/fixtures/bulkUser/500_invite_users.csv",
-      fileName: "500_invite_users",
-      error: "You can only invite 250 users at a time",
+      default: {
+        path: "cypress/fixtures/bulkUser/limit_exceeded.csv",
+        fileName: "limit_exceeded",
+        error: "You can only invite 250 users at a time",
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/limit_exceeded_ee.csv",
+        fileName: "limit_exceeded_ee",
+        error: "You can only invite 250 users at a time",
+      },
     },
     MISSING_ROLE: {
-      path: "cypress/fixtures/bulkUser/without_role.csv",
-      fileName: "without_role",
-      error:
-        "Missing user_role,groups information in 2 row(s);. No users were uploaded, please update and try again.",
+      default: {
+        path: "cypress/fixtures/bulkUser/missing_role.csv",
+        fileName: "missing_role",
+        error:
+          "Missing user_role,groups information in 2 row(s);. No users were uploaded, please update and try again.",
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/missing_role_ee.csv",
+        fileName: "missing_role_ee",
+        error:
+          "Missing user_role,groups,metadata,userMetadata information in 2 row(s);. No users were uploaded, please update and try again.",
+      },
     },
     NONEXISTENT_GROUP: {
-      path: "cypress/fixtures/bulkUser/non_existing_group.csv",
-      fileName: "non_existing_group",
-      error: "2 groups doesn't exist. No users were uploaded",
+      default: {
+        path: "cypress/fixtures/bulkUser/non_existing_group.csv",
+        fileName: "non_existing_group",
+        error: "2 groups doesn't exist. No users were uploaded",
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/non_existing_group_ee.csv",
+        fileName: "non_existing_group_ee",
+        error: "2 groups doesn't exist. No users were uploaded",
+      },
     },
     VALID_USERS: {
-      path: "cypress/fixtures/bulkUser/3usersupload.csv",
-      fileName: "3usersupload",
-      testEmail: "test12@gmail.com",
-      successMessage: "3 users are being added",
+      default: {
+        path: "cypress/fixtures/bulkUser/3_users_upload.csv",
+        fileName: "3_users_upload",
+        successMessage: "3 users are being added",
+        email: "test12@gmail.com",
+      },
+      alt: {
+        path: "cypress/fixtures/bulkUser/3_users_upload_ee.csv",
+        fileName: "3_users_upload_ee",
+        successMessage: "3 users are being added",
+        email: "test12@gmail.com",
+      },
     },
   };
 
@@ -70,7 +137,6 @@ describe("Bulk User Upload", () => {
     cy.get(usersSelector.buttonAddUsers).click();
     cy.get(usersSelector.buttonUploadCsvFile).click();
 
-    // Test all error cases
     [
       TEST_FILES.MISSING_ROLE,
       TEST_FILES.MISSING_NAME,
@@ -79,7 +145,8 @@ describe("Bulk User Upload", () => {
       TEST_FILES.EMPTY_NAMES,
       TEST_FILES.NONEXISTENT_GROUP,
       TEST_FILES.LIMIT_EXCEEDED,
-    ].forEach((testCase) => {
+    ].forEach((testCaseGroup) => {
+      const testCase = getFile(testCaseGroup);
       bulkUserUpload(
         testCase.path,
         testCase.fileName,
@@ -90,32 +157,30 @@ describe("Bulk User Upload", () => {
   });
 
   it("Should successfully upload valid users", () => {
+    const file = getFile(TEST_FILES.VALID_USERS);
     cy.get(usersSelector.buttonAddUsers).click();
     cy.get(usersSelector.buttonUploadCsvFile).click();
 
-    cy.get(usersSelector.inputFieldBulkUpload).selectFile(
-      TEST_FILES.VALID_USERS.path,
-      {
-        force: true,
-      }
-    );
-    cy.get(commonSelectors.fileSelector).should(
-      "contain",
-      TEST_FILES.VALID_USERS.fileName
-    );
+    cy.get(usersSelector.inputFieldBulkUpload).selectFile(file.path, {
+      force: true,
+    });
+
+    cy.get(commonSelectors.fileSelector).should("contain", file.fileName);
     cy.get(usersSelector.buttonUploadUsers).click();
     cy.get(".go2072408551")
       .should("be.visible")
-      .and("have.text", TEST_FILES.VALID_USERS.successMessage);
-    common.searchUser("test12@gmail.com");
-    cy.contains("td", "test12@gmail.com")
+      .and("have.text", file.successMessage);
+
+    common.searchUser(file.email);
+    cy.contains("td", file.email)
       .parent()
       .within(() => {
         cy.get("td small").should("have.text", "invited");
       });
+
     common.navigateToManageGroups();
     cy.get(groupsSelector.groupLink("Admin")).click();
     cy.get(groupsSelector.usersLink).click();
-    cy.contains("test12@gmail.com").should("be.visible");
+    cy.contains(file.email).should("be.visible");
   });
 });
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/userInviteFlowEdgeCases.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/userInviteFlowEdgeCases.cy.js
index 29c521a58b..0769f2fbf3 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/userInviteFlowEdgeCases.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/userInviteFlowEdgeCases.cy.js
@@ -21,6 +21,7 @@ import {
 } from "Support/utils/common";
 
 import { onboardingSelectors } from "Selectors/onboarding";
+import { enableInstanceSignup } from "Support/utils/manageSSO";
 
 const data = {};
 const envVar = Cypress.env("environment");
@@ -28,9 +29,9 @@ const envVar = Cypress.env("environment");
 describe("inviteflow edge cases", () => {
     beforeEach(() => {
         cy.defaultWorkspaceLogin();
-        if (envVar === "Enterprise") {
-            cy.get(".btn-close").click();
-        }
+        cy.ifEnv("Enterprise", () => {
+            enableInstanceSignup();
+        });
     });
 
     it("Should verify exisiting user invite flow", () => {
@@ -69,55 +70,6 @@ describe("inviteflow edge cases", () => {
             });
     });
 
-    it("should verify the user signup after invited in a workspace", () => {
-        data.firstName = fake.firstName;
-        data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
-        data.signUpName = fake.firstName;
-        data.workspaceName = fake.companyName;
-
-        enableInstanceSignUp();
-        setSignupStatus(true);
-        navigateToManageUsers();
-        fillUserInviteForm(data.firstName, data.email);
-        cy.get(usersSelector.buttonInviteUsers).click();
-        cy.apiLogout();
-
-        cy.visit("/");
-        cy.get(commonSelectors.createAnAccountLink).click();
-        SignUpPageElements();
-        cy.wait(3000);
-        cy.clearAndType(onboardingSelectors.nameInput, data.signUpName);
-        cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
-        cy.clearAndType(
-            onboardingSelectors.loginPasswordInput,
-            commonText.password
-        );
-        cy.get(commonSelectors.signUpButton).click();
-        cy.wait(1000);
-        signUpLink(data.email);
-        if (envVar === "Enterprise") {
-            verifyOnboardingQuestions(data.workspaceName);
-            cy.wait(1000);
-            cy.get(commonSelectors.skipbutton).click();
-            cy.backToApps();
-        }
-        cy.wait(1000);
-        visitWorkspaceInvitation(data.email, "My workspace");
-        cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
-        cy.clearAndType(onboardingSelectors.loginPasswordInput, usersText.password);
-        cy.get(onboardingSelectors.signInButton).click();
-        cy.wait(3000);
-        cy.get(commonSelectors.invitedUserName).verifyVisibleElement(
-            "have.text",
-            data.signUpName
-        );
-        cy.get(commonSelectors.acceptInviteButton).click();
-        cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-            "have.text",
-            "My workspace"
-        );
-    });
-
     it("should verify the user signup with same creds after invited in a workspace", () => {
         data.firstName = fake.firstName;
         data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/externalApi/workspace/ldapOnboarding.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/externalApi/workspace/ldapOnboarding.cy.js
new file mode 100644
index 0000000000..7cc5692226
--- /dev/null
+++ b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/externalApi/workspace/ldapOnboarding.cy.js
@@ -0,0 +1,250 @@
+import { commonSelectors } from "Selectors/common";
+import { commonEeSelectors, ssoEeSelector } from "Selectors/eeCommon";
+import { ssoEeText } from "Texts/eeCommon";
+import { setSSOStatus, setSignupStatus } from "Support/utils/manageSSO";
+import { usersText } from "Texts/manageUsers";
+import { fake } from "Fixtures/fake";
+import {
+    logout,
+    navigateToManageSSO,
+    navigateToManageUsers,
+    searchUser,
+    pinInspector,
+    navigateToAppEditor,
+    navigateToManageGroups,
+} from "Support/utils/common";
+import { ssoText } from "Texts/manageSSO";
+import { enableToggle, disableToggle } from "Support/utils/platform/eeCommon";
+import { setupAndUpdateRole } from "Support/utils/manageGroups";
+
+describe("LDAP flow", () => {
+    const TEST_DATA = {
+        appName: `${fake.companyName} App`,
+        ldapUser: {
+            username: "Hubert J. Farnsworth",
+            password: "professor",
+            email: "professor@planetexpress.com",
+        },
+        ldapConfig: {
+            name: "Tooljet LDAP Auth",
+            host: Cypress.env("ldap_host"),
+            port: "10389",
+            baseDn: Cypress.env("ldap_base_dn"),
+        },
+    };
+
+    const ldapLogin = (
+        username = TEST_DATA.ldapUser.username,
+        password = TEST_DATA.ldapUser.password
+    ) => {
+        cy.get(ssoEeSelector.ldapSSOText).click();
+        cy.clearAndType(commonSelectors.inputFieldName, username);
+        cy.clearAndType(ssoEeSelector.passwordInputField, password);
+        cy.get(commonSelectors.signUpButton).click();
+    };
+
+    const toggleUserArchiveStatus = (shouldArchive = true) => {
+        navigateToManageUsers();
+        searchUser(TEST_DATA.ldapUser.email);
+        cy.get('[data-cy="user-actions-button"]').click();
+        cy.get('[data-cy="archive-button"]').click();
+
+        const expectedToast = shouldArchive
+            ? usersText.archivedToast
+            : usersText.unarchivedToast;
+        cy.verifyToastMessage(commonSelectors.toastMessage, expectedToast);
+
+        if (shouldArchive) {
+            cy.contains("td", TEST_DATA.ldapUser.email)
+                .parent()
+                .within(() => {
+                    cy.get("td small").should("have.text", usersText.archivedStatus);
+                });
+        }
+    };
+
+    beforeEach(() => {
+        cy.visit("/");
+        cy.appUILogin();
+    });
+
+    it("Verify complete LDAP flow: UI, user onboarding, inspector SSO info, and archive functionality", () => {
+        cy.intercept("GET", "api/library_apps").as("apps");
+
+        // ========== SECTION 1: LDAP Configuration and UI Verification ==========
+        setSSOStatus("My workspace", "ldap", false);
+        navigateToManageSSO();
+        cy.wait(1000);
+
+        cy.get('[data-cy="ldap-sso-card"]')
+            .verifyVisibleElement("have.text", "LDAP")
+            .click();
+
+        cy.get(ssoEeSelector.ldapToggle).should("be.visible");
+
+        for (const element in ssoEeSelector.ldapPageElements) {
+            cy.get(ssoEeSelector.ldapPageElements[element]).verifyVisibleElement(
+                "have.text",
+                ssoEeText.ldapPageElements[element]
+            );
+        }
+
+        const formElements = [
+            ssoEeSelector.statusLabel,
+            ssoEeSelector.nameInput,
+            ssoEeSelector.hostInput,
+            ssoEeSelector.portInput,
+            ssoEeSelector.baseDnInput,
+            ssoEeSelector.sslToggleInput,
+        ];
+
+        formElements.forEach((selector) => {
+            cy.get(selector).should("be.visible");
+        });
+
+        cy.get(commonSelectors.cancelButton)
+            .eq(1)
+            .verifyVisibleElement("have.text", "Cancel");
+        cy.get(commonEeSelectors.saveButton)
+            .eq(1)
+            .verifyVisibleElement("have.text", "Save changes");
+
+        enableToggle(ssoEeSelector.sslToggleInput);
+        cy.get(ssoEeSelector.ldapPageElements.sslLabel)
+            .eq(1)
+            .verifyVisibleElement("have.text", "SSL certificate");
+        cy.get(".css-1x65k0v-control").should("be.visible");
+
+        cy.clearAndType(ssoEeSelector.nameInput, TEST_DATA.ldapConfig.name);
+        cy.clearAndType(ssoEeSelector.hostInput, TEST_DATA.ldapConfig.host);
+        cy.clearAndType(ssoEeSelector.portInput, TEST_DATA.ldapConfig.port);
+        cy.clearAndType(ssoEeSelector.baseDnInput, TEST_DATA.ldapConfig.baseDn);
+
+        cy.get(ssoEeSelector.sslToggleInput).uncheck();
+        cy.get(ssoEeSelector.ldapToggle).click();
+        disableToggle(ssoEeSelector.sslToggleInput);
+
+        cy.get(commonEeSelectors.saveButton).eq(1).click();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            ssoText.toggleUpdateToast("LDAP")
+        );
+        cy.get(commonSelectors.cancelButton).eq(1).click();
+        logout();
+
+        // ========== SECTION 2: LDAP Login Page and User Onboarding ==========
+        cy.get(ssoEeSelector.ldapSSOText).verifyVisibleElement(
+            "have.text",
+            ssoEeText.ldapSSOText
+        );
+
+        cy.get(ssoEeSelector.ldapSSOText).click();
+
+        const loginPageElements = [
+            { selector: '[data-cy="key-logo"]', assertion: "be.visible" },
+            {
+                selector: ssoEeSelector.userNameInputLabel,
+                text: ssoEeText.userNameInputLabel,
+            },
+            { selector: commonSelectors.inputFieldName, assertion: "be.visible" },
+            { selector: ssoEeSelector.passwordInputLabel, text: "Password" },
+            { selector: ssoEeSelector.passwordInputField, assertion: "be.visible" },
+            { selector: commonSelectors.signUpButton, text: "Sign in" },
+        ];
+
+        loginPageElements.forEach((element) => {
+            if (element.text) {
+                cy.get(element.selector).verifyVisibleElement(
+                    "have.text",
+                    element.text
+                );
+            } else {
+                cy.get(element.selector).should(element.assertion);
+            }
+        });
+
+        // Test failed login (user doesn't exist in workspace)
+        cy.clearAndType(
+            commonSelectors.inputFieldName,
+            TEST_DATA.ldapUser.username
+        );
+        cy.clearAndType(
+            ssoEeSelector.passwordInputField,
+            TEST_DATA.ldapUser.password
+        );
+        cy.get(commonSelectors.signUpButton).click();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            "LDAP login failed - User does not exist in the workspace"
+        );
+
+        cy.defaultWorkspaceLogin();
+        setSignupStatus(true);
+        logout();
+
+        ldapLogin();
+        cy.get(commonSelectors.pageSectionHeader).verifyVisibleElement(
+            "have.text",
+            "Applications"
+        );
+        logout();
+
+        // ========== SECTION 3: Setup App and User Permissions for Inspector Test ==========
+        cy.defaultWorkspaceLogin();
+        cy.apiCreateApp(TEST_DATA.appName);
+
+        navigateToManageGroups();
+        setupAndUpdateRole("End-user", "Builder", TEST_DATA.ldapUser.email);
+        logout();
+
+        // ========== SECTION 4: Verify SSO User Info in Inspector ==========
+        ldapLogin();
+
+        cy.wait("@apps");
+        cy.wait(1000);
+
+        navigateToAppEditor(TEST_DATA.appName);
+        pinInspector();
+
+        const inspectorPath = [
+            '[data-cy="inspector-node-globals"] > .node-key',
+            '[data-cy="inspector-node-currentuser"] > .node-key',
+            '[data-cy="inspector-node-ssouserinfo"] > .node-key',
+            '[data-cy="inspector-node-mail"] > .node-key',
+        ];
+
+        inspectorPath.forEach((selector) => cy.get(selector).click());
+
+        cy.get('[data-cy="inspector-node-0"] > .mx-2').verifyVisibleElement(
+            "have.text",
+            `"${TEST_DATA.ldapUser.email}"`
+        );
+        cy.backToApps();
+        logout();
+
+        // ========== SECTION 5: Archive/Unarchive Functionality ==========
+        cy.defaultWorkspaceLogin();
+
+        // Archive user and verify status
+        toggleUserArchiveStatus(true);
+        logout();
+
+        ldapLogin();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            "LDAP login failed - User is archived in the workspace"
+        );
+
+        // Unarchive user
+        cy.go("back");
+        cy.appUILogin();
+        toggleUserArchiveStatus(false);
+        logout();
+
+        ldapLogin();
+        cy.get(commonSelectors.pageSectionHeader).verifyVisibleElement(
+            "have.text",
+            "Applications"
+        );
+    });
+});
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/externalApi/workspace/openId.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/externalApi/workspace/openId.cy.js
new file mode 100644
index 0000000000..d304d76a07
--- /dev/null
+++ b/cypress-tests/cypress/e2e/happyPath/platform/eeTestcases/externalApi/workspace/openId.cy.js
@@ -0,0 +1,239 @@
+import * as common from "Support/utils/common";
+import { ssoText } from "Texts/manageSSO";
+import {
+    inviteUser,
+    WorkspaceInvitationLink,
+} from "Support/utils/platform/eeCommon.js";
+import { commonSelectors } from "Selectors/common";
+import {
+    commonEeSelectors,
+    ssoEeSelector,
+    instanceSettingsSelector,
+} from "Selectors/eeCommon";
+import { commonEeText } from "Texts/eeCommon";
+import {
+    setSignupStatus,
+    defaultSSO,
+    deleteOrganisationSSO,
+} from "Support/utils/manageSSO";
+import { confirmInviteElements } from "Support/utils/manageUsers";
+import { usersText } from "Texts/manageUsers";
+import { usersSelector } from "Selectors/manageUsers";
+
+import { fetchAndVisitInviteLink } from "Support/utils/manageUsers";
+import { enableInstanceSignup } from "Support/utils/manageSSO";
+
+describe("Verify OIDC user onboarding", () => {
+    const envVar = Cypress.env("environment");
+
+    beforeEach(() => {
+        cy.defaultWorkspaceLogin();
+        cy.intercept("GET", "api/library_apps").as("apps");
+        cy.wait(2000);
+        defaultSSO(true);
+    });
+
+    it("Verify user onboarding using workspace OIDC", () => {
+        deleteOrganisationSSO("My workspace", ["openid"]);
+        common.navigateToManageSSO();
+        defaultSSO(false);
+        setSignupStatus(false);
+        cy.wait(1000);
+
+        cy.get(ssoEeSelector.oidc).click();
+        cy.get(ssoEeSelector.oidcToggle).click();
+        cy.clearAndType(ssoEeSelector.nameInput, "Tooljet OIDC");
+        cy.clearAndType(
+            ssoEeSelector.clientIdInput,
+            Cypress.env("SSO_OPENID_CLIENT_ID")
+        );
+        cy.clearAndType(
+            ssoEeSelector.clientSecretInput,
+            Cypress.env("SSO_OPENID_CLIENT_SECRET")
+        );
+        cy.clearAndType(
+            ssoEeSelector.WellKnownUrlInput,
+            Cypress.env("SSO_OPENID_WELL_KNOWN_URL")
+        );
+        cy.get(commonEeSelectors.saveButton).eq(1).click();
+        cy.get('[data-cy="enable-button"]').click();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            ssoText.toggleUpdateToast("OpenID")
+        );
+
+        cy.apiLogout();
+        cy.visit("/login/my-workspace");
+        cy.get(ssoEeSelector.oidcSSOText).verifyVisibleElement(
+            "have.text",
+            "Sign in with Tooljet OIDC"
+        );
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".superadmin-button").click();
+
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            "Open ID login failed - User does not exist in the workspace"
+        );
+
+        cy.apiLogin();
+        setSignupStatus(true);
+        cy.apiLogout();
+
+        cy.visit("/login/my-workspace");
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".superadmin-button").click();
+
+        common.logout();
+
+        cy.defaultWorkspaceLogin();
+        common.navigateToManageUsers();
+        common.searchUser("superadmin@tooljet.com");
+
+        cy.contains("td", "superadmin@tooljet.com")
+            .parent()
+            .within(() => {
+                cy.get("td small").should("have.text", usersText.activeStatus);
+            });
+
+        cy.apiLogout();
+        cy.visit("/my-workspace");
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".superadmin-button").click();
+    });
+
+    it("Verify invited user onboarding using instance level OIDC", () => {
+        setSignupStatus(true);
+
+        cy.ifEnv("Enterprise", () => {
+            enableInstanceSignup();
+        });
+
+        common.navigateToManageUsers();
+        inviteUser("user", "user@tooljet.com");
+        confirmInviteElements("user@tooljet.com");
+        cy.wait(2000);
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".user-button").click();
+        cy.wait(1000);
+
+        cy.get(commonSelectors.acceptInviteButton).click();
+        cy.wait("@apps");
+        cy.contains("My workspace").should("be.visible");
+        common.logout();
+
+        cy.defaultWorkspaceLogin();
+        setSignupStatus(false);
+
+        common.navigateToManageUsers();
+        cy.wait(500);
+        inviteUser("user", "userthree@tooljet.com");
+        cy.wait(2000);
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".user-four-button").click();
+
+        cy.get(commonSelectors.toastMessage)
+            .should("be.visible")
+            .and(
+                "have.text",
+                "Open ID login failed - Invalid Email: Please use the email address provided in the invitation."
+            );
+        cy.wait(500);
+        cy.defaultWorkspaceLogin();
+
+        setSignupStatus(true);
+        fetchAndVisitInviteLink("userthree@tooljet.com");
+        cy.wait(2000);
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".user-four-button").click();
+        cy.get(commonSelectors.toastMessage)
+            .should("be.visible")
+            .and(
+                "have.text",
+                "Open ID login failed - Invalid Email: Please use the email address provided in the invitation."
+            );
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".superadmin-button").click();
+        cy.get(commonSelectors.toastMessage)
+            .should("be.visible")
+            .and(
+                "have.text",
+                "Open ID login failed - Invalid Email: Please use the email address provided in the invitation."
+            );
+    });
+
+    if (envVar === "Enterprise") {
+        it("Verify user onboarding using instance level OIDC", () => {
+            enableInstanceSignup();
+            cy.apiLogout();
+
+            cy.visit("/");
+            cy.get(ssoEeSelector.oidcSSOText).realClick();
+            cy.get(".admin-button").click();
+            cy.wait(3000);
+            common.logout();
+
+            cy.defaultWorkspaceLogin();
+            cy.get(commonSelectors.settingsIcon).click();
+            cy.get(commonEeSelectors.instanceSettingIcon).click();
+            cy.clearAndType(commonSelectors.inputUserSearch, "admin@tooljet.com");
+
+            cy.get(instanceSettingsSelector.userStatus("admin")).verifyVisibleElement(
+                "have.text",
+                usersText.activeStatus
+            );
+
+            cy.apiLogout();
+            cy.visit("/");
+            cy.get(ssoEeSelector.oidcSSOText).realClick();
+            cy.get(".admin-button").click();
+        });
+    }
+
+
+    it("Verify archived user login using OIDC", () => {
+        setSignupStatus(true);
+        cy.ifEnv("Enterprise", () => {
+            enableInstanceSignup();
+        });
+        common.navigateToManageUsers();
+        cy.get(usersSelector.buttonAddUsers).click();
+        cy.get(commonSelectors.inputFieldFullName).type("user two");
+        cy.get(commonSelectors.inputFieldEmailAddress).type("usertwo@tooljet.com");
+        cy.get(usersSelector.buttonInviteUsers).click();
+        WorkspaceInvitationLink("usertwo@tooljet.com");
+
+        cy.wait(2000);
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".user-two-button").click();
+
+        cy.get(commonSelectors.acceptInviteButton).click();
+        cy.wait("@apps");
+        cy.contains("My workspace").should("be.visible");
+        common.logout();
+
+        cy.defaultWorkspaceLogin();
+        common.navigateToManageUsers();
+        common.searchUser("usertwo@tooljet.com");
+        cy.get('[data-cy="user-actions-button"]').click();
+        cy.get('[data-cy="archive-button"]').click();
+
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            usersText.archivedToast
+        );
+        cy.get(instanceSettingsSelector.userStatus("user two"), {
+            timeout: 9000,
+        }).should("have.text", usersText.archivedStatus);
+        cy.apiLogout();
+        cy.visit("/my-workspace");
+        cy.wait(2000);
+        cy.get(ssoEeSelector.oidcSSOText).realClick();
+        cy.get(".user-two-button").click();
+
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            "Open ID login failed - User is archived in the workspace"
+        );
+    });
+});
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js
index ebf671e667..0c536c8ec3 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/firstUser/firstUserOnboarding.cy.js
@@ -18,7 +18,7 @@ describe("Self host onboarding", () => {
   });
 
   it("verify elements on self host onboarding page", () => {
-    if (envVar === "Enterprise") {
+    cy.ifEnv("Enterprise", () => {
       cy.get(commonSelectors.HostBanner).should("be.visible");
       cy.get(commonSelectors.pageLogo).should("be.visible");
       cy.get('[data-cy="welcome-to-tooljet!-header"]').verifyVisibleElement(
@@ -34,7 +34,7 @@ describe("Self host onboarding", () => {
         "Set up ToolJet"
       );
       cy.get('[data-cy="set-up-tooljet-button"]').click();
-    }
+    });
 
     const commonElements = [
       { selector: commonSelectors.HostBanner },
@@ -76,20 +76,22 @@ describe("Self host onboarding", () => {
       cy.get(check.selector).verifyVisibleElement("have.text", check.text);
     });
 
-    if (envVar === "Community") {
+    cy.ifEnv("Community", () => {
       cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
         expect($el.contents().first().text().trim()).to.eq(
           // commonText.selfHostSignUpTermsHelperText
           "By signing up you are agreeing to the"
         );
       });
-    } else if (envVar === "Enterprise") {
+    });
+
+    cy.ifEnv("Enterprise", () => {
       cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
         expect($el.contents().first().text().trim()).to.eq(
           "By signing up you are agreeing to the"
         );
       });
-    }
+    });
 
     const links = [
       {
@@ -116,20 +118,15 @@ describe("Self host onboarding", () => {
     cy.get(onboardingSelectors.passwordInput).type("password");
     cy.get(commonSelectors.continueButton).click();
 
-    if (envVar === "Enterprise") {
+    cy.ifEnv("Enterprise", () => {
       bannerElementsVerification();
       onboardingStepOne();
-    }
+    });
 
     bannerElementsVerification();
     onboardingStepTwo();
 
-    // if (envVar === "Enterprise") {
-    //   bannerElementsVerification();
-    //   onboardingStepTwo();
-    // }
-
-    if (envVar === "Enterprise") {
+    cy.ifEnv("Enterprise", () => {
       bannerElementsVerification();
 
       const trialPageTexts = [
@@ -173,7 +170,7 @@ describe("Self host onboarding", () => {
       cy.get(onboardingSelectors.onPremiseLink)
         .verifyVisibleElement("have.text", "Click here")
         .and("have.attr", "href")
-        .and("equal", "https://www.tooljet.com/pricing?payment=onpremise");
+        .and("equal", "https://tooljet.ai/pricing?payment=onpremise");
 
       const planTitles = [
         {
@@ -196,66 +193,59 @@ describe("Self host onboarding", () => {
 
       const prices = [
         { selector: `${onboardingSelectors.planPrice}:eq(0)`, text: "$0" },
-        { selector: `${onboardingSelectors.planPrice}:eq(1)`, text: "$30" },
+        {
+          selector: '[data-cy="pro-plan-price"]:eq(0)',
+          text: "$79/monthper builder",
+        },
+        {
+          selector: '[data-cy="pro-plan-price"]:eq(1)',
+          text: "$199/monthper builder",
+        },
+        {
+          selector: `${onboardingSelectors.planToggleLabel}:eq(0)`,
+          text: "Yearly20% off",
+        },
+        {
+          selector: `${onboardingSelectors.planToggleLabel}:eq(1)`,
+          text: "Yearly20% off",
+        },
       ];
 
       prices.forEach((item) => {
         cy.get(item.selector).should("be.visible").and("have.text", item.text);
       });
 
-      cy.get(onboardingSelectors.planToggleInput).should("be.visible");
-      cy.get(onboardingSelectors.planToggleLabel).verifyVisibleElement(
-        "have.text",
-        "Yearly20% off"
-      );
-      cy.get(onboardingSelectors.discountDetails).verifyVisibleElement(
-        "have.text",
-        "20% off"
-      );
+      cy.get(onboardingSelectors.planToggleInput).eq(0).should("be.visible");
+      cy.get(onboardingSelectors.planToggleInput).eq(1).should("be.visible");
 
-      cy.get(onboardingSelectors.builderPrice).verifyVisibleElement(
-        "have.text",
-        "$24"
-      );
-      cy.get('[data-cy="builder-price-period"]').verifyVisibleElement(
-        "have.text",
-        onboardingText.priceMonthlyText
-      );
-      cy.get('[data-cy="builder-price-description"]').verifyVisibleElement(
-        "have.text",
-        "per builder"
-      );
-
-      cy.get(onboardingSelectors.endUserPrice).verifyVisibleElement(
-        "have.text",
-        "$8"
-      );
-      cy.get('[data-cy="enduser-price-period"]').verifyVisibleElement(
-        "have.text",
-        onboardingText.priceMonthlyText
-      );
-      cy.get('[data-cy="enduser-price-description"]').verifyVisibleElement(
-        "have.text",
-        "per end user"
-      );
-
-      cy.get(onboardingSelectors.pricingPlanToggle).uncheck({ force: true });
+      cy.get(onboardingSelectors.pricingPlanToggle)
+        .eq(0)
+        .uncheck({ force: true });
 
       cy.get(onboardingSelectors.planToggleLabel)
-        .first()
+        .eq(0)
         .verifyVisibleElement("have.text", "Monthly20% off");
       cy.get(onboardingSelectors.discountDetails)
         .should("have.css", "text-decoration")
         .and("include", "line-through");
 
-      cy.get(onboardingSelectors.builderPrice).verifyVisibleElement(
-        "have.text",
-        "$30"
-      );
-      cy.get(onboardingSelectors.endUserPrice).verifyVisibleElement(
-        "have.text",
-        "$10"
-      );
+      cy.get('[data-cy="pro-plan-price"]')
+        .eq(0)
+        .verifyVisibleElement("have.text", "$99/monthper builder");
+
+      cy.get(onboardingSelectors.pricingPlanToggle)
+        .eq(1)
+        .uncheck({ force: true });
+      cy.get(onboardingSelectors.planToggleLabel)
+        .eq(1)
+        .verifyVisibleElement("have.text", "Monthly20% off");
+      cy.get(onboardingSelectors.discountDetails)
+        .should("have.css", "text-decoration")
+        .and("include", "line-through");
+
+      cy.get('[data-cy="pro-plan-price"]')
+        .eq(1)
+        .verifyVisibleElement("have.text", "$249/monthper builder");
 
       cy.get(onboardingSelectors.enterpriseTitle).verifyVisibleElement(
         "have.text",
@@ -274,19 +264,11 @@ describe("Self host onboarding", () => {
 
       bannerElementsVerification();
       onboardingStepThree();
-    }
+    });
 
     cy.get(commonSelectors.skipbutton).click();
     cy.backToApps();
 
-    if (envVar === "Enterprise") {
-      cy.get(".btn-close").click();
-    }
-
-    if (envVar === "Enterprise") {
-      cy.get(".btn-close").click();
-    }
-
     logout();
     cy.appUILogin();
 
diff --git a/cypress-tests/cypress/fixtures/bulkUser/3_users_upload.csv b/cypress-tests/cypress/fixtures/bulkUser/3_users_upload.csv
new file mode 100644
index 0000000000..9109b69d4e
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/3_users_upload.csv
@@ -0,0 +1,4 @@
+First Name,Last Name,Email,User Role,Group
+test1,user,test1@gmail.com,Builder,
+test2,user,test3@gmail.com,End User,
+Test3,Example,test12@gmail.com,Admin,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/3_users_upload_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/3_users_upload_ee.csv
new file mode 100644
index 0000000000..5a7996a60a
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/3_users_upload_ee.csv
@@ -0,0 +1,4 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+test1,user,test1@gmail.com,Builder,,
+test2,user,test3@gmail.com,End User,,
+Test3,Example,test12@gmail.com,Admin,,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/empty_names.csv b/cypress-tests/cypress/fixtures/bulkUser/empty_names.csv
new file mode 100644
index 0000000000..56fcda708f
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/empty_names.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group
+,,test12empty@gmail.com,Admin,Admin
+Test,Example,test12empty@gmail.com,Builder,Builder
diff --git a/cypress-tests/cypress/fixtures/bulkUser/empty_names_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/empty_names_ee.csv
new file mode 100644
index 0000000000..5718fe99f2
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/empty_names_ee.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+,,test12empty@gmail.com,Admin,Admin,
+Test,Example,test12empty@gmail.com,Builder,Builder,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/limit_exceeded.csv b/cypress-tests/cypress/fixtures/bulkUser/limit_exceeded.csv
new file mode 100644
index 0000000000..23e3f2e728
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/limit_exceeded.csv
@@ -0,0 +1,252 @@
+First Name,Last Name,Email,User Role,Group
+Vijay,Yadav,vjyaav1@gmail.com,Admin,
+Vijay,Yadav,vjyaav2@gmail.com,Builder,
+Vijay,Yadav,vjyaav3@gmail.com,Builder,
+Vijay,Yadav,vjyaav4@gmail.com,End User,
+Vijay,Yadav,vjyaav5@gmail.com,End User,
+Vijay,Yadav,vjyaav6@gmail.com,End User,
+Vijay,Yadav,vjyaav7@gmail.com,End User,
+Vijay,Yadav,vjyaav8@gmail.com,End User,
+Vijay,Yadav,vjyaav9@gmail.com,End User,
+Vijay,Yadav,vjyaav10@gmail.com,End User,
+Vijay,Yadav,vjyaav11@gmail.com,End User,
+Vijay,Yadav,vjyaav12@gmail.com,End User,
+Vijay,Yadav,vjyaav13@gmail.com,End User,
+Vijay,Yadav,vjyaav14@gmail.com,End User,
+Vijay,Yadav,vjyaav15@gmail.com,End User,
+Vijay,Yadav,vjyaav16@gmail.com,End User,
+Vijay,Yadav,vjyaav17@gmail.com,End User,
+Vijay,Yadav,vjyaav18@gmail.com,End User,
+Vijay,Yadav,vjyaav19@gmail.com,End User,
+Vijay,Yadav,vjyaav20@gmail.com,End User,
+Vijay,Yadav,vjyaav21@gmail.com,End User,
+Vijay,Yadav,vjyaav22@gmail.com,End User,
+Vijay,Yadav,vjyaav23@gmail.com,End User,
+Vijay,Yadav,vjyaav24@gmail.com,End User,
+Vijay,Yadav,vjyaav25@gmail.com,End User,
+Vijay,Yadav,vjyaav26@gmail.com,End User,
+Vijay,Yadav,vjyaav27@gmail.com,End User,
+Vijay,Yadav,vjyaav28@gmail.com,End User,
+Vijay,Yadav,vjyaav29@gmail.com,End User,
+Vijay,Yadav,vjyaav30@gmail.com,End User,
+Vijay,Yadav,vjyaav31@gmail.com,End User,
+Vijay,Yadav,vjyaav32@gmail.com,End User,
+Vijay,Yadav,vjyaav33@gmail.com,End User,
+Vijay,Yadav,vjyaav34@gmail.com,End User,
+Vijay,Yadav,vjyaav35@gmail.com,End User,
+Vijay,Yadav,vjyaav36@gmail.com,End User,
+Vijay,Yadav,vjyaav37@gmail.com,End User,
+Vijay,Yadav,vjyaav38@gmail.com,End User,
+Vijay,Yadav,vjyaav39@gmail.com,End User,
+Vijay,Yadav,vjyaav40@gmail.com,End User,
+Vijay,Yadav,vjyaav41@gmail.com,End User,
+Vijay,Yadav,vjyaav42@gmail.com,End User,
+Vijay,Yadav,vjyaav43@gmail.com,End User,
+Vijay,Yadav,vjyaav44@gmail.com,End User,
+Vijay,Yadav,vjyaav45@gmail.com,End User,
+Vijay,Yadav,vjyaav46@gmail.com,End User,
+Vijay,Yadav,vjyaav47@gmail.com,End User,
+Vijay,Yadav,vjyaav48@gmail.com,End User,
+Vijay,Yadav,vjyaav49@gmail.com,End User,
+Vijay,Yadav,vjyaav50@gmail.com,End User,
+Vijay,Yadav,vjyaav51@gmail.com,End User,
+Vijay,Yadav,vjyaav52@gmail.com,End User,
+Vijay,Yadav,vjyaav53@gmail.com,End User,
+Vijay,Yadav,vjyaav54@gmail.com,End User,
+Vijay,Yadav,vjyaav55@gmail.com,End User,
+Vijay,Yadav,vjyaav56@gmail.com,End User,
+Vijay,Yadav,vjyaav57@gmail.com,End User,
+Vijay,Yadav,vjyaav58@gmail.com,End User,
+Vijay,Yadav,vjyaav59@gmail.com,End User,
+Vijay,Yadav,vjyaav60@gmail.com,End User,
+Vijay,Yadav,vjyaav61@gmail.com,End User,
+Vijay,Yadav,vjyaav62@gmail.com,End User,
+Vijay,Yadav,vjyaav63@gmail.com,End User,
+Vijay,Yadav,vjyaav64@gmail.com,End User,
+Vijay,Yadav,vjyaav65@gmail.com,End User,
+Vijay,Yadav,vjyaav66@gmail.com,End User,
+Vijay,Yadav,vjyaav67@gmail.com,End User,
+Vijay,Yadav,vjyaav68@gmail.com,End User,
+Vijay,Yadav,vjyaav69@gmail.com,End User,
+Vijay,Yadav,vjyaav70@gmail.com,End User,
+Vijay,Yadav,vjyaav71@gmail.com,End User,
+Vijay,Yadav,vjyaav72@gmail.com,End User,
+Vijay,Yadav,vjyaav73@gmail.com,End User,
+Vijay,Yadav,vjyaav74@gmail.com,End User,
+Vijay,Yadav,vjyaav75@gmail.com,End User,
+Vijay,Yadav,vjyaav76@gmail.com,End User,
+Vijay,Yadav,vjyaav77@gmail.com,End User,
+Vijay,Yadav,vjyaav78@gmail.com,End User,
+Vijay,Yadav,vjyaav79@gmail.com,End User,
+Vijay,Yadav,vjyaav80@gmail.com,End User,
+Vijay,Yadav,vjyaav81@gmail.com,End User,
+Vijay,Yadav,vjyaav82@gmail.com,End User,
+Vijay,Yadav,vjyaav83@gmail.com,End User,
+Vijay,Yadav,vjyaav84@gmail.com,End User,
+Vijay,Yadav,vjyaav85@gmail.com,End User,
+Vijay,Yadav,vjyaav86@gmail.com,End User,
+Vijay,Yadav,vjyaav87@gmail.com,End User,
+Vijay,Yadav,vjyaav88@gmail.com,End User,
+Vijay,Yadav,vjyaav89@gmail.com,End User,
+Vijay,Yadav,vjyaav90@gmail.com,End User,
+Vijay,Yadav,vjyaav91@gmail.com,End User,
+Vijay,Yadav,vjyaav92@gmail.com,End User,
+Vijay,Yadav,vjyaav93@gmail.com,End User,
+Vijay,Yadav,vjyaav94@gmail.com,End User,
+Vijay,Yadav,vjyaav95@gmail.com,End User,
+Vijay,Yadav,vjyaav96@gmail.com,End User,
+Vijay,Yadav,vjyaav97@gmail.com,End User,
+Vijay,Yadav,vjyaav98@gmail.com,End User,
+Vijay,Yadav,vjyaav99@gmail.com,End User,
+Vijay,Yadav,vjyaav100@gmail.com,End User,
+Vijay,Yadav,vjyaav101@gmail.com,End User,
+Vijay,Yadav,vjyaav102@gmail.com,End User,
+Vijay,Yadav,vjyaav103@gmail.com,End User,
+Vijay,Yadav,vjyaav104@gmail.com,End User,
+Vijay,Yadav,vjyaav105@gmail.com,End User,
+Vijay,Yadav,vjyaav106@gmail.com,End User,
+Vijay,Yadav,vjyaav107@gmail.com,End User,
+Vijay,Yadav,vjyaav108@gmail.com,End User,
+Vijay,Yadav,vjyaav109@gmail.com,End User,
+Vijay,Yadav,vjyaav110@gmail.com,End User,
+Vijay,Yadav,vjyaav111@gmail.com,End User,
+Vijay,Yadav,vjyaav112@gmail.com,End User,
+Vijay,Yadav,vjyaav113@gmail.com,End User,
+Vijay,Yadav,vjyaav114@gmail.com,End User,
+Vijay,Yadav,vjyaav115@gmail.com,End User,
+Vijay,Yadav,vjyaav116@gmail.com,End User,
+Vijay,Yadav,vjyaav117@gmail.com,End User,
+Vijay,Yadav,vjyaav118@gmail.com,End User,
+Vijay,Yadav,vjyaav119@gmail.com,End User,
+Vijay,Yadav,vjyaav120@gmail.com,End User,
+Vijay,Yadav,vjyaav121@gmail.com,End User,
+Vijay,Yadav,vjyaav122@gmail.com,End User,
+Vijay,Yadav,vjyaav123@gmail.com,End User,
+Vijay,Yadav,vjyaav124@gmail.com,End User,
+Vijay,Yadav,vjyaav125@gmail.com,End User,
+Vijay,Yadav,vjyaav126@gmail.com,End User,
+Vijay,Yadav,vjyaav127@gmail.com,End User,
+Vijay,Yadav,vjyaav128@gmail.com,End User,
+Vijay,Yadav,vjyaav129@gmail.com,End User,
+Vijay,Yadav,vjyaav130@gmail.com,End User,
+Vijay,Yadav,vjyaav131@gmail.com,End User,
+Vijay,Yadav,vjyaav132@gmail.com,End User,
+Vijay,Yadav,vjyaav133@gmail.com,End User,
+Vijay,Yadav,vjyaav134@gmail.com,End User,
+Vijay,Yadav,vjyaav135@gmail.com,End User,
+Vijay,Yadav,vjyaav136@gmail.com,End User,
+Vijay,Yadav,vjyaav137@gmail.com,End User,
+Vijay,Yadav,vjyaav138@gmail.com,End User,
+Vijay,Yadav,vjyaav139@gmail.com,End User,
+Vijay,Yadav,vjyaav140@gmail.com,End User,
+Vijay,Yadav,vjyaav141@gmail.com,End User,
+Vijay,Yadav,vjyaav142@gmail.com,End User,
+Vijay,Yadav,vjyaav143@gmail.com,End User,
+Vijay,Yadav,vjyaav144@gmail.com,End User,
+Vijay,Yadav,vjyaav145@gmail.com,End User,
+Vijay,Yadav,vjyaav146@gmail.com,End User,
+Vijay,Yadav,vjyaav147@gmail.com,End User,
+Vijay,Yadav,vjyaav148@gmail.com,End User,
+Vijay,Yadav,vjyaav149@gmail.com,End User,
+Vijay,Yadav,vjyaav150@gmail.com,End User,
+Vijay,Yadav,vjyaav151@gmail.com,End User,
+Vijay,Yadav,vjyaav152@gmail.com,End User,
+Vijay,Yadav,vjyaav153@gmail.com,End User,
+Vijay,Yadav,vjyaav154@gmail.com,End User,
+Vijay,Yadav,vjyaav155@gmail.com,End User,
+Vijay,Yadav,vjyaav156@gmail.com,End User,
+Vijay,Yadav,vjyaav157@gmail.com,End User,
+Vijay,Yadav,vjyaav158@gmail.com,End User,
+Vijay,Yadav,vjyaav159@gmail.com,End User,
+Vijay,Yadav,vjyaav160@gmail.com,End User,
+Vijay,Yadav,vjyaav161@gmail.com,End User,
+Vijay,Yadav,vjyaav162@gmail.com,End User,
+Vijay,Yadav,vjyaav163@gmail.com,End User,
+Vijay,Yadav,vjyaav164@gmail.com,End User,
+Vijay,Yadav,vjyaav165@gmail.com,End User,
+Vijay,Yadav,vjyaav166@gmail.com,End User,
+Vijay,Yadav,vjyaav167@gmail.com,End User,
+Vijay,Yadav,vjyaav168@gmail.com,End User,
+Vijay,Yadav,vjyaav169@gmail.com,End User,
+Vijay,Yadav,vjyaav170@gmail.com,End User,
+Vijay,Yadav,vjyaav171@gmail.com,End User,
+Vijay,Yadav,vjyaav172@gmail.com,End User,
+Vijay,Yadav,vjyaav173@gmail.com,End User,
+Vijay,Yadav,vjyaav174@gmail.com,End User,
+Vijay,Yadav,vjyaav175@gmail.com,End User,
+Vijay,Yadav,vjyaav176@gmail.com,End User,
+Vijay,Yadav,vjyaav177@gmail.com,End User,
+Vijay,Yadav,vjyaav178@gmail.com,End User,
+Vijay,Yadav,vjyaav179@gmail.com,End User,
+Vijay,Yadav,vjyaav180@gmail.com,End User,
+Vijay,Yadav,vjyaav181@gmail.com,End User,
+Vijay,Yadav,vjyaav182@gmail.com,End User,
+Vijay,Yadav,vjyaav183@gmail.com,End User,
+Vijay,Yadav,vjyaav184@gmail.com,End User,
+Vijay,Yadav,vjyaav185@gmail.com,End User,
+Vijay,Yadav,vjyaav186@gmail.com,End User,
+Vijay,Yadav,vjyaav187@gmail.com,End User,
+Vijay,Yadav,vjyaav188@gmail.com,End User,
+Vijay,Yadav,vjyaav189@gmail.com,End User,
+Vijay,Yadav,vjyaav190@gmail.com,End User,
+Vijay,Yadav,vjyaav191@gmail.com,End User,
+Vijay,Yadav,vjyaav192@gmail.com,End User,
+Vijay,Yadav,vjyaav193@gmail.com,End User,
+Vijay,Yadav,vjyaav194@gmail.com,End User,
+Vijay,Yadav,vjyaav195@gmail.com,End User,
+Vijay,Yadav,vjyaav196@gmail.com,End User,
+Vijay,Yadav,vjyaav197@gmail.com,End User,
+Vijay,Yadav,vjyaav198@gmail.com,End User,
+Vijay,Yadav,vjyaav199@gmail.com,End User,
+Vijay,Yadav,vjyaav200@gmail.com,End User,
+Vijay,Yadav,vjyaav201@gmail.com,End User,
+Vijay,Yadav,vjyaav202@gmail.com,End User,
+Vijay,Yadav,vjyaav203@gmail.com,End User,
+Vijay,Yadav,vjyaav204@gmail.com,End User,
+Vijay,Yadav,vjyaav205@gmail.com,End User,
+Vijay,Yadav,vjyaav206@gmail.com,End User,
+Vijay,Yadav,vjyaav207@gmail.com,End User,
+Vijay,Yadav,vjyaav208@gmail.com,End User,
+Vijay,Yadav,vjyaav209@gmail.com,End User,
+Vijay,Yadav,vjyaav210@gmail.com,End User,
+Vijay,Yadav,vjyaav211@gmail.com,End User,
+Vijay,Yadav,vjyaav212@gmail.com,End User,
+Vijay,Yadav,vjyaav213@gmail.com,End User,
+Vijay,Yadav,vjyaav214@gmail.com,End User,
+Vijay,Yadav,vjyaav215@gmail.com,End User,
+Vijay,Yadav,vjyaav216@gmail.com,End User,
+Vijay,Yadav,vjyaav217@gmail.com,End User,
+Vijay,Yadav,vjyaav218@gmail.com,End User,
+Vijay,Yadav,vjyaav219@gmail.com,End User,
+Vijay,Yadav,vjyaav220@gmail.com,End User,
+Vijay,Yadav,vjyaav221@gmail.com,End User,
+Vijay,Yadav,vjyaav222@gmail.com,End User,
+Vijay,Yadav,vjyaav223@gmail.com,End User,
+Vijay,Yadav,vjyaav224@gmail.com,End User,
+Vijay,Yadav,vjyaav225@gmail.com,End User,
+Vijay,Yadav,vjyaav226@gmail.com,End User,
+Vijay,Yadav,vjyaav227@gmail.com,End User,
+Vijay,Yadav,vjyaav228@gmail.com,End User,
+Vijay,Yadav,vjyaav229@gmail.com,End User,
+Vijay,Yadav,vjyaav230@gmail.com,End User,
+Vijay,Yadav,vjyaav231@gmail.com,End User,
+Vijay,Yadav,vjyaav232@gmail.com,End User,
+Vijay,Yadav,vjyaav233@gmail.com,End User,
+Vijay,Yadav,vjyaav234@gmail.com,End User,
+Vijay,Yadav,vjyaav235@gmail.com,End User,
+Vijay,Yadav,vjyaav236@gmail.com,End User,
+Vijay,Yadav,vjyaav237@gmail.com,End User,
+Vijay,Yadav,vjyaav238@gmail.com,End User,
+Vijay,Yadav,vjyaav239@gmail.com,End User,
+Vijay,Yadav,vjyaav240@gmail.com,End User,
+Vijay,Yadav,vjyaav241@gmail.com,End User,
+Vijay,Yadav,vjyaav242@gmail.com,End User,
+Vijay,Yadav,vjyaav243@gmail.com,End User,
+Vijay,Yadav,vjyaav244@gmail.com,End User,
+Vijay,Yadav,vjyaav245@gmail.com,End User,
+Vijay,Yadav,vjyaav246@gmail.com,End User,
+Vijay,Yadav,vjyaav247@gmail.com,End User,
+Vijay,Yadav,vjyaav248@gmail.com,End User,
+Vijay,Yadav,vjyaav249@gmail.com,End User,
+Vijay,Yadav,vjyaav250@gmail.com,End User,
+Vijay,Yadav,vjyaav251@gmail.com,End User,
\ No newline at end of file
diff --git a/cypress-tests/cypress/fixtures/bulkUser/limit_exceeded_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/limit_exceeded_ee.csv
new file mode 100644
index 0000000000..5d5de9460f
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/limit_exceeded_ee.csv
@@ -0,0 +1,252 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+Vijay,Yadav,vjyaav1@gmail.com,Admin,,
+Vijay,Yadav,vjyaav2@gmail.com,Builder,,
+Vijay,Yadav,vjyaav3@gmail.com,Builder,,
+Vijay,Yadav,vjyaav4@gmail.com,End User,,
+Vijay,Yadav,vjyaav5@gmail.com,End User,,
+Vijay,Yadav,vjyaav6@gmail.com,End User,,
+Vijay,Yadav,vjyaav7@gmail.com,End User,,
+Vijay,Yadav,vjyaav8@gmail.com,End User,,
+Vijay,Yadav,vjyaav9@gmail.com,End User,,
+Vijay,Yadav,vjyaav10@gmail.com,End User,,
+Vijay,Yadav,vjyaav11@gmail.com,End User,,
+Vijay,Yadav,vjyaav12@gmail.com,End User,,
+Vijay,Yadav,vjyaav13@gmail.com,End User,,
+Vijay,Yadav,vjyaav14@gmail.com,End User,,
+Vijay,Yadav,vjyaav15@gmail.com,End User,,
+Vijay,Yadav,vjyaav16@gmail.com,End User,,
+Vijay,Yadav,vjyaav17@gmail.com,End User,,
+Vijay,Yadav,vjyaav18@gmail.com,End User,,
+Vijay,Yadav,vjyaav19@gmail.com,End User,,
+Vijay,Yadav,vjyaav20@gmail.com,End User,,
+Vijay,Yadav,vjyaav21@gmail.com,End User,,
+Vijay,Yadav,vjyaav22@gmail.com,End User,,
+Vijay,Yadav,vjyaav23@gmail.com,End User,,
+Vijay,Yadav,vjyaav24@gmail.com,End User,,
+Vijay,Yadav,vjyaav25@gmail.com,End User,,
+Vijay,Yadav,vjyaav26@gmail.com,End User,,
+Vijay,Yadav,vjyaav27@gmail.com,End User,,
+Vijay,Yadav,vjyaav28@gmail.com,End User,,
+Vijay,Yadav,vjyaav29@gmail.com,End User,,
+Vijay,Yadav,vjyaav30@gmail.com,End User,,
+Vijay,Yadav,vjyaav31@gmail.com,End User,,
+Vijay,Yadav,vjyaav32@gmail.com,End User,,
+Vijay,Yadav,vjyaav33@gmail.com,End User,,
+Vijay,Yadav,vjyaav34@gmail.com,End User,,
+Vijay,Yadav,vjyaav35@gmail.com,End User,,
+Vijay,Yadav,vjyaav36@gmail.com,End User,,
+Vijay,Yadav,vjyaav37@gmail.com,End User,,
+Vijay,Yadav,vjyaav38@gmail.com,End User,,
+Vijay,Yadav,vjyaav39@gmail.com,End User,,
+Vijay,Yadav,vjyaav40@gmail.com,End User,,
+Vijay,Yadav,vjyaav41@gmail.com,End User,,
+Vijay,Yadav,vjyaav42@gmail.com,End User,,
+Vijay,Yadav,vjyaav43@gmail.com,End User,,
+Vijay,Yadav,vjyaav44@gmail.com,End User,,
+Vijay,Yadav,vjyaav45@gmail.com,End User,,
+Vijay,Yadav,vjyaav46@gmail.com,End User,,
+Vijay,Yadav,vjyaav47@gmail.com,End User,,
+Vijay,Yadav,vjyaav48@gmail.com,End User,,
+Vijay,Yadav,vjyaav49@gmail.com,End User,,
+Vijay,Yadav,vjyaav50@gmail.com,End User,,
+Vijay,Yadav,vjyaav51@gmail.com,End User,,
+Vijay,Yadav,vjyaav52@gmail.com,End User,,
+Vijay,Yadav,vjyaav53@gmail.com,End User,,
+Vijay,Yadav,vjyaav54@gmail.com,End User,,
+Vijay,Yadav,vjyaav55@gmail.com,End User,,
+Vijay,Yadav,vjyaav56@gmail.com,End User,,
+Vijay,Yadav,vjyaav57@gmail.com,End User,,
+Vijay,Yadav,vjyaav58@gmail.com,End User,,
+Vijay,Yadav,vjyaav59@gmail.com,End User,,
+Vijay,Yadav,vjyaav60@gmail.com,End User,,
+Vijay,Yadav,vjyaav61@gmail.com,End User,,
+Vijay,Yadav,vjyaav62@gmail.com,End User,,
+Vijay,Yadav,vjyaav63@gmail.com,End User,,
+Vijay,Yadav,vjyaav64@gmail.com,End User,,
+Vijay,Yadav,vjyaav65@gmail.com,End User,,
+Vijay,Yadav,vjyaav66@gmail.com,End User,,
+Vijay,Yadav,vjyaav67@gmail.com,End User,,
+Vijay,Yadav,vjyaav68@gmail.com,End User,,
+Vijay,Yadav,vjyaav69@gmail.com,End User,,
+Vijay,Yadav,vjyaav70@gmail.com,End User,,
+Vijay,Yadav,vjyaav71@gmail.com,End User,,
+Vijay,Yadav,vjyaav72@gmail.com,End User,,
+Vijay,Yadav,vjyaav73@gmail.com,End User,,
+Vijay,Yadav,vjyaav74@gmail.com,End User,,
+Vijay,Yadav,vjyaav75@gmail.com,End User,,
+Vijay,Yadav,vjyaav76@gmail.com,End User,,
+Vijay,Yadav,vjyaav77@gmail.com,End User,,
+Vijay,Yadav,vjyaav78@gmail.com,End User,,
+Vijay,Yadav,vjyaav79@gmail.com,End User,,
+Vijay,Yadav,vjyaav80@gmail.com,End User,,
+Vijay,Yadav,vjyaav81@gmail.com,End User,,
+Vijay,Yadav,vjyaav82@gmail.com,End User,,
+Vijay,Yadav,vjyaav83@gmail.com,End User,,
+Vijay,Yadav,vjyaav84@gmail.com,End User,,
+Vijay,Yadav,vjyaav85@gmail.com,End User,,
+Vijay,Yadav,vjyaav86@gmail.com,End User,,
+Vijay,Yadav,vjyaav87@gmail.com,End User,,
+Vijay,Yadav,vjyaav88@gmail.com,End User,,
+Vijay,Yadav,vjyaav89@gmail.com,End User,,
+Vijay,Yadav,vjyaav90@gmail.com,End User,,
+Vijay,Yadav,vjyaav91@gmail.com,End User,,
+Vijay,Yadav,vjyaav92@gmail.com,End User,,
+Vijay,Yadav,vjyaav93@gmail.com,End User,,
+Vijay,Yadav,vjyaav94@gmail.com,End User,,
+Vijay,Yadav,vjyaav95@gmail.com,End User,,
+Vijay,Yadav,vjyaav96@gmail.com,End User,,
+Vijay,Yadav,vjyaav97@gmail.com,End User,,
+Vijay,Yadav,vjyaav98@gmail.com,End User,,
+Vijay,Yadav,vjyaav99@gmail.com,End User,,
+Vijay,Yadav,vjyaav100@gmail.com,End User,,
+Vijay,Yadav,vjyaav101@gmail.com,End User,,
+Vijay,Yadav,vjyaav102@gmail.com,End User,,
+Vijay,Yadav,vjyaav103@gmail.com,End User,,
+Vijay,Yadav,vjyaav104@gmail.com,End User,,
+Vijay,Yadav,vjyaav105@gmail.com,End User,,
+Vijay,Yadav,vjyaav106@gmail.com,End User,,
+Vijay,Yadav,vjyaav107@gmail.com,End User,,
+Vijay,Yadav,vjyaav108@gmail.com,End User,,
+Vijay,Yadav,vjyaav109@gmail.com,End User,,
+Vijay,Yadav,vjyaav110@gmail.com,End User,,
+Vijay,Yadav,vjyaav111@gmail.com,End User,,
+Vijay,Yadav,vjyaav112@gmail.com,End User,,
+Vijay,Yadav,vjyaav113@gmail.com,End User,,
+Vijay,Yadav,vjyaav114@gmail.com,End User,,
+Vijay,Yadav,vjyaav115@gmail.com,End User,,
+Vijay,Yadav,vjyaav116@gmail.com,End User,,
+Vijay,Yadav,vjyaav117@gmail.com,End User,,
+Vijay,Yadav,vjyaav118@gmail.com,End User,,
+Vijay,Yadav,vjyaav119@gmail.com,End User,,
+Vijay,Yadav,vjyaav120@gmail.com,End User,,
+Vijay,Yadav,vjyaav121@gmail.com,End User,,
+Vijay,Yadav,vjyaav122@gmail.com,End User,,
+Vijay,Yadav,vjyaav123@gmail.com,End User,,
+Vijay,Yadav,vjyaav124@gmail.com,End User,,
+Vijay,Yadav,vjyaav125@gmail.com,End User,,
+Vijay,Yadav,vjyaav126@gmail.com,End User,,
+Vijay,Yadav,vjyaav127@gmail.com,End User,,
+Vijay,Yadav,vjyaav128@gmail.com,End User,,
+Vijay,Yadav,vjyaav129@gmail.com,End User,,
+Vijay,Yadav,vjyaav130@gmail.com,End User,,
+Vijay,Yadav,vjyaav131@gmail.com,End User,,
+Vijay,Yadav,vjyaav132@gmail.com,End User,,
+Vijay,Yadav,vjyaav133@gmail.com,End User,,
+Vijay,Yadav,vjyaav134@gmail.com,End User,,
+Vijay,Yadav,vjyaav135@gmail.com,End User,,
+Vijay,Yadav,vjyaav136@gmail.com,End User,,
+Vijay,Yadav,vjyaav137@gmail.com,End User,,
+Vijay,Yadav,vjyaav138@gmail.com,End User,,
+Vijay,Yadav,vjyaav139@gmail.com,End User,,
+Vijay,Yadav,vjyaav140@gmail.com,End User,,
+Vijay,Yadav,vjyaav141@gmail.com,End User,,
+Vijay,Yadav,vjyaav142@gmail.com,End User,,
+Vijay,Yadav,vjyaav143@gmail.com,End User,,
+Vijay,Yadav,vjyaav144@gmail.com,End User,,
+Vijay,Yadav,vjyaav145@gmail.com,End User,,
+Vijay,Yadav,vjyaav146@gmail.com,End User,,
+Vijay,Yadav,vjyaav147@gmail.com,End User,,
+Vijay,Yadav,vjyaav148@gmail.com,End User,,
+Vijay,Yadav,vjyaav149@gmail.com,End User,,
+Vijay,Yadav,vjyaav150@gmail.com,End User,,
+Vijay,Yadav,vjyaav151@gmail.com,End User,,
+Vijay,Yadav,vjyaav152@gmail.com,End User,,
+Vijay,Yadav,vjyaav153@gmail.com,End User,,
+Vijay,Yadav,vjyaav154@gmail.com,End User,,
+Vijay,Yadav,vjyaav155@gmail.com,End User,,
+Vijay,Yadav,vjyaav156@gmail.com,End User,,
+Vijay,Yadav,vjyaav157@gmail.com,End User,,
+Vijay,Yadav,vjyaav158@gmail.com,End User,,
+Vijay,Yadav,vjyaav159@gmail.com,End User,,
+Vijay,Yadav,vjyaav160@gmail.com,End User,,
+Vijay,Yadav,vjyaav161@gmail.com,End User,,
+Vijay,Yadav,vjyaav162@gmail.com,End User,,
+Vijay,Yadav,vjyaav163@gmail.com,End User,,
+Vijay,Yadav,vjyaav164@gmail.com,End User,,
+Vijay,Yadav,vjyaav165@gmail.com,End User,,
+Vijay,Yadav,vjyaav166@gmail.com,End User,,
+Vijay,Yadav,vjyaav167@gmail.com,End User,,
+Vijay,Yadav,vjyaav168@gmail.com,End User,,
+Vijay,Yadav,vjyaav169@gmail.com,End User,,
+Vijay,Yadav,vjyaav170@gmail.com,End User,,
+Vijay,Yadav,vjyaav171@gmail.com,End User,,
+Vijay,Yadav,vjyaav172@gmail.com,End User,,
+Vijay,Yadav,vjyaav173@gmail.com,End User,,
+Vijay,Yadav,vjyaav174@gmail.com,End User,,
+Vijay,Yadav,vjyaav175@gmail.com,End User,,
+Vijay,Yadav,vjyaav176@gmail.com,End User,,
+Vijay,Yadav,vjyaav177@gmail.com,End User,,
+Vijay,Yadav,vjyaav178@gmail.com,End User,,
+Vijay,Yadav,vjyaav179@gmail.com,End User,,
+Vijay,Yadav,vjyaav180@gmail.com,End User,,
+Vijay,Yadav,vjyaav181@gmail.com,End User,,
+Vijay,Yadav,vjyaav182@gmail.com,End User,,
+Vijay,Yadav,vjyaav183@gmail.com,End User,,
+Vijay,Yadav,vjyaav184@gmail.com,End User,,
+Vijay,Yadav,vjyaav185@gmail.com,End User,,
+Vijay,Yadav,vjyaav186@gmail.com,End User,,
+Vijay,Yadav,vjyaav187@gmail.com,End User,,
+Vijay,Yadav,vjyaav188@gmail.com,End User,,
+Vijay,Yadav,vjyaav189@gmail.com,End User,,
+Vijay,Yadav,vjyaav190@gmail.com,End User,,
+Vijay,Yadav,vjyaav191@gmail.com,End User,,
+Vijay,Yadav,vjyaav192@gmail.com,End User,,
+Vijay,Yadav,vjyaav193@gmail.com,End User,,
+Vijay,Yadav,vjyaav194@gmail.com,End User,,
+Vijay,Yadav,vjyaav195@gmail.com,End User,,
+Vijay,Yadav,vjyaav196@gmail.com,End User,,
+Vijay,Yadav,vjyaav197@gmail.com,End User,,
+Vijay,Yadav,vjyaav198@gmail.com,End User,,
+Vijay,Yadav,vjyaav199@gmail.com,End User,,
+Vijay,Yadav,vjyaav200@gmail.com,End User,,
+Vijay,Yadav,vjyaav201@gmail.com,End User,,
+Vijay,Yadav,vjyaav202@gmail.com,End User,,
+Vijay,Yadav,vjyaav203@gmail.com,End User,,
+Vijay,Yadav,vjyaav204@gmail.com,End User,,
+Vijay,Yadav,vjyaav205@gmail.com,End User,,
+Vijay,Yadav,vjyaav206@gmail.com,End User,,
+Vijay,Yadav,vjyaav207@gmail.com,End User,,
+Vijay,Yadav,vjyaav208@gmail.com,End User,,
+Vijay,Yadav,vjyaav209@gmail.com,End User,,
+Vijay,Yadav,vjyaav210@gmail.com,End User,,
+Vijay,Yadav,vjyaav211@gmail.com,End User,,
+Vijay,Yadav,vjyaav212@gmail.com,End User,,
+Vijay,Yadav,vjyaav213@gmail.com,End User,,
+Vijay,Yadav,vjyaav214@gmail.com,End User,,
+Vijay,Yadav,vjyaav215@gmail.com,End User,,
+Vijay,Yadav,vjyaav216@gmail.com,End User,,
+Vijay,Yadav,vjyaav217@gmail.com,End User,,
+Vijay,Yadav,vjyaav218@gmail.com,End User,,
+Vijay,Yadav,vjyaav219@gmail.com,End User,,
+Vijay,Yadav,vjyaav220@gmail.com,End User,,
+Vijay,Yadav,vjyaav221@gmail.com,End User,,
+Vijay,Yadav,vjyaav222@gmail.com,End User,,
+Vijay,Yadav,vjyaav223@gmail.com,End User,,
+Vijay,Yadav,vjyaav224@gmail.com,End User,,
+Vijay,Yadav,vjyaav225@gmail.com,End User,,
+Vijay,Yadav,vjyaav226@gmail.com,End User,,
+Vijay,Yadav,vjyaav227@gmail.com,End User,,
+Vijay,Yadav,vjyaav228@gmail.com,End User,,
+Vijay,Yadav,vjyaav229@gmail.com,End User,,
+Vijay,Yadav,vjyaav230@gmail.com,End User,,
+Vijay,Yadav,vjyaav231@gmail.com,End User,,
+Vijay,Yadav,vjyaav232@gmail.com,End User,,
+Vijay,Yadav,vjyaav233@gmail.com,End User,,
+Vijay,Yadav,vjyaav234@gmail.com,End User,,
+Vijay,Yadav,vjyaav235@gmail.com,End User,,
+Vijay,Yadav,vjyaav236@gmail.com,End User,,
+Vijay,Yadav,vjyaav237@gmail.com,End User,,
+Vijay,Yadav,vjyaav238@gmail.com,End User,,
+Vijay,Yadav,vjyaav239@gmail.com,End User,,
+Vijay,Yadav,vjyaav240@gmail.com,End User,,
+Vijay,Yadav,vjyaav241@gmail.com,End User,,
+Vijay,Yadav,vjyaav242@gmail.com,End User,,
+Vijay,Yadav,vjyaav243@gmail.com,End User,,
+Vijay,Yadav,vjyaav244@gmail.com,End User,,
+Vijay,Yadav,vjyaav245@gmail.com,End User,,
+Vijay,Yadav,vjyaav246@gmail.com,End User,,
+Vijay,Yadav,vjyaav247@gmail.com,End User,,
+Vijay,Yadav,vjyaav248@gmail.com,End User,,
+Vijay,Yadav,vjyaav249@gmail.com,End User,,
+Vijay,Yadav,vjyaav250@gmail.com,End User,,
+Vijay,Yadav,vjyaav251@gmail.com,End User,,
\ No newline at end of file
diff --git a/cypress-tests/cypress/fixtures/bulkUser/missing_email.csv b/cypress-tests/cypress/fixtures/bulkUser/missing_email.csv
new file mode 100644
index 0000000000..dd1b93fca2
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/missing_email.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group
+test,test,,Admin,Admin
+test,test,,Builder,Builder
diff --git a/cypress-tests/cypress/fixtures/bulkUser/missing_email_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/missing_email_ee.csv
new file mode 100644
index 0000000000..c9fa53181a
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/missing_email_ee.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+,,withoutname1@gmail.com,Admin,Admin,
+,,withoutname2@gmail.com,Builder,Builder,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/missing_name.csv b/cypress-tests/cypress/fixtures/bulkUser/missing_name.csv
new file mode 100644
index 0000000000..b4bc6d323d
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/missing_name.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group
+,,withoutname1@gmail.com,Admin,Admin
+,,withoutname2@gmail.com,Builder,Builder
diff --git a/cypress-tests/cypress/fixtures/bulkUser/missing_name_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/missing_name_ee.csv
new file mode 100644
index 0000000000..c9fa53181a
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/missing_name_ee.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+,,withoutname1@gmail.com,Admin,Admin,
+,,withoutname2@gmail.com,Builder,Builder,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/missing_role.csv b/cypress-tests/cypress/fixtures/bulkUser/missing_role.csv
new file mode 100644
index 0000000000..2330a5f7df
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/missing_role.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group
+Test,Example,test12@gmail.com,,
+Test,Example,test13@gmail.com,,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/missing_role_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/missing_role_ee.csv
new file mode 100644
index 0000000000..aec9c2b880
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/missing_role_ee.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+Test,Example,test12@gmail.com,,,
+Test,Example,test13@gmail.com,,,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/non_existing_group_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/non_existing_group_ee.csv
new file mode 100644
index 0000000000..16620eb8cc
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/non_existing_group_ee.csv
@@ -0,0 +1,3 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+test,test,demo1@gmail.com,Admin,test,
+test,test,demo2@gmail.com,Builder,abc,
diff --git a/cypress-tests/cypress/fixtures/bulkUser/same_email_ee.csv b/cypress-tests/cypress/fixtures/bulkUser/same_email_ee.csv
new file mode 100644
index 0000000000..634585c86e
--- /dev/null
+++ b/cypress-tests/cypress/fixtures/bulkUser/same_email_ee.csv
@@ -0,0 +1,4 @@
+First Name,Last Name,Email,User Role,Group,Metadata
+test,test,demo11@gmail.com,Admin,,
+test,test,demo11@gmail.com,Builder,,
+
diff --git a/cypress-tests/cypress/support/utils/manageGroups.js b/cypress-tests/cypress/support/utils/manageGroups.js
index 3f0c85d1cf..2ddd80379d 100644
--- a/cypress-tests/cypress/support/utils/manageGroups.js
+++ b/cypress-tests/cypress/support/utils/manageGroups.js
@@ -658,7 +658,7 @@ export const createGroupAddAppAndUserToGroup = (groupName, email) => {
 
       cy.request({
         method: "POST",
-        url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}/granular-permissions`,
+        url: `${Cypress.env("server_host")}/api/v2/group-permissions/${groupId}/granular-permissions/app`,
         headers: headers,
         body: {
           name: "Apps",
@@ -676,7 +676,6 @@ export const createGroupAddAppAndUserToGroup = (groupName, email) => {
             ],
           },
         },
-
       }).then((response) => {
         expect(response.status).to.equal(201);
       });
@@ -727,7 +726,7 @@ export const duplicateMultipleGroups = (groupNames) => {
     cy.get(commonSelectors.duplicateOption).click(); // Click on the duplicate option
     cy.get(commonSelectors.confirmDuplicateButton).click(); // Confirm duplication if needed
   });
-}
+};
 
 export const verifyGroupCardOptions = (groupName) => {
   cy.get(groupsSelector.groupLink(groupName)).click();
@@ -865,7 +864,7 @@ export const addUserInGroup = (groupName, email) => {
     commonSelectors.toastMessage,
     groupsText.userAddedToast
   );
-}
+};
 
 export const inviteUserBasedOnRole = (firstName, email, role = "end-user") => {
   fillUserInviteForm(firstName, email);
@@ -891,7 +890,13 @@ export const verifyBasicPermissions = (canCreate = true) => {
   );
 };
 
-export const setupWorkspaceAndInviteUser = (workspaceName, workspaceSlug, firstName, email, role = "end-user") => {
+export const setupWorkspaceAndInviteUser = (
+  workspaceName,
+  workspaceSlug,
+  firstName,
+  email,
+  role = "end-user"
+) => {
   cy.apiCreateWorkspace(workspaceName, workspaceSlug);
   cy.visit(workspaceSlug);
   cy.wait(1000);
@@ -907,7 +912,10 @@ export const verifySettingsAccess = (shouldExist = true) => {
   );
 };
 
-export const verifyUserPrivileges = (expectedButtonState, shouldHaveWorkspaceSettings) => {
+export const verifyUserPrivileges = (
+  expectedButtonState,
+  shouldHaveWorkspaceSettings
+) => {
   cy.get(commonSelectors.dashboardAppCreateButton).should(expectedButtonState);
   cy.get(commonSelectors.settingsIcon).click();
 
@@ -923,4 +931,4 @@ export const setupAndUpdateRole = (currentRole, endRole, email) => {
   updateRole(currentRole, endRole, email);
   cy.wait(1000);
   cy.apiLogout();
-};
\ No newline at end of file
+};
diff --git a/cypress-tests/cypress/support/utils/manageSSO.js b/cypress-tests/cypress/support/utils/manageSSO.js
index a736afacc8..b8e64e4f56 100644
--- a/cypress-tests/cypress/support/utils/manageSSO.js
+++ b/cypress-tests/cypress/support/utils/manageSSO.js
@@ -371,7 +371,7 @@ export const defaultSSO = (enable) => {
   });
 };
 
-export const setSignupStatus = (enable, workspaceName = 'My workspace') => {
+export const setSignupStatus = (enable, workspaceName = "My workspace") => {
   cy.task("dbConnection", {
     dbconfig: Cypress.env("app_db"),
     sql: `SELECT id FROM organizations WHERE name = '${workspaceName}'`,
@@ -429,3 +429,23 @@ export const resetDomain = () => {
     });
   });
 };
+
+export const enableInstanceSignup = (
+  allowPersonalWorkspace = true,
+  enableLoginConfig = true,
+  allowedDomains = ""
+) => {
+  const allowValue = allowPersonalWorkspace ? "true" : "false";
+  const loginConfigValue = enableLoginConfig ? "true" : "false";
+
+  const sql = `
+    UPDATE instance_settings SET value = '${allowValue}' WHERE key = 'ALLOW_PERSONAL_WORKSPACE';
+    UPDATE instance_settings SET value = '${loginConfigValue}' WHERE key = 'ENABLE_SIGNUP';
+    UPDATE instance_settings SET value = '${allowedDomains}' WHERE key = 'ALLOWED_DOMAINS';
+  `;
+
+  cy.task("dbConnection", {
+    dbconfig: Cypress.env("app_db"),
+    sql,
+  });
+};
diff --git a/cypress-tests/cypress/support/utils/platform/eeCommon.js b/cypress-tests/cypress/support/utils/platform/eeCommon.js
new file mode 100644
index 0000000000..80db62fca9
--- /dev/null
+++ b/cypress-tests/cypress/support/utils/platform/eeCommon.js
@@ -0,0 +1,591 @@
+import {
+    commonEeSelectors,
+    ssoEeSelector,
+    instanceSettingsSelector,
+    multiEnvSelector,
+    workspaceSelector,
+} from "Selectors/eeCommon";
+import { ssoEeText } from "Texts/eeCommon";
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import * as common from "Support/utils/common";
+import { groupsSelector } from "Selectors/manageGroups";
+import { groupsText } from "Texts/manageGroups";
+import { eeGroupsSelector } from "Selectors/eeCommon";
+import { eeGroupsText } from "Texts/eeCommon";
+import {
+    // verifyOnboardingQuestions,
+    // verifyCloudOnboardingQuestions,
+    fetchAndVisitInviteLink,
+} from "Support/utils/manageUsers";
+import { commonText } from "Texts/common";
+import { dashboardText } from "Texts/dashboard";
+import { usersText } from "Texts/manageUsers";
+import { usersSelector } from "Selectors/manageUsers";
+import { ssoSelector } from "Selectors/manageSSO";
+import { ssoText } from "Texts/manageSSO";
+// import { appPromote } from "Support/utils/multiEnv";
+
+export const oidcSSOPageElements = () => {
+    cy.get(ssoEeSelector.oidcToggle).click();
+    cy.get(ssoSelector.saveButton).eq(1).click();
+    cy.get('[data-cy="modal-title"]').verifyVisibleElement(
+        "have.text",
+        "Enable OpenID Connect"
+    );
+    cy.get('[data-cy="modal-close-button"]').should("be.visible");
+    cy.get('[data-cy="modal-message"]').verifyVisibleElement(
+        "have.text",
+        "Enabling OpenID Connect at the workspace level will override any OpenID Connect configurations set at the instance level."
+    );
+    cy.get('[data-cy="confirmation-text"]').verifyVisibleElement(
+        "have.text",
+        "Are you sure you want to continue?"
+    );
+    cy.get('[data-cy="cancel-button"]')
+        .eq(2)
+        .verifyVisibleElement("have.text", "Cancel");
+    cy.get('[data-cy="enable-button"]').verifyVisibleElement(
+        "have.text",
+        "Enable"
+    );
+
+    cy.get('[data-cy="cancel-button"]').eq(2).click();
+    cy.get('[data-cy="status-label"]').verifyVisibleElement(
+        "have.text",
+        ssoText.disabledLabel
+    );
+
+    cy.get(ssoEeSelector.oidcToggle).click();
+    cy.get(ssoSelector.saveButton).eq(1).click();
+    cy.get('[data-cy="enable-button"]').click();
+
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        ssoText.toggleUpdateToast("OpenID")
+    );
+
+    cy.get(ssoEeSelector.statusLabel).verifyVisibleElement(
+        "have.text",
+        ssoEeText.enabledLabel
+    );
+
+    cy.get('[data-cy="redirect-url-label"]').verifyVisibleElement(
+        "have.text",
+        ssoText.redirectUrlLabel
+    );
+    cy.get('[data-cy="redirect-url"]').should("be.visible");
+    cy.get('[data-cy="copy-icon"]').should("be.visible");
+
+    cy.get(ssoEeSelector.oidcToggle).click();
+    cy.get(ssoSelector.saveButton).eq(1).click();
+    // cy.get('[data-cy="enable-button"]').click();
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        ssoText.toggleUpdateToast("OpenID")
+    );
+    cy.get(ssoSelector.statusLabel).verifyVisibleElement(
+        "have.text",
+        ssoText.disabledLabel
+    );
+
+    cy.get(ssoEeSelector.oidcToggle).click();
+    cy.clearAndType(ssoEeSelector.nameInput, ssoEeText.testName);
+    cy.clearAndType(ssoEeSelector.clientIdInput, ssoEeText.testclientId);
+    cy.clearAndType(ssoEeSelector.clientSecretInput, ssoEeText.testclientSecret);
+    cy.clearAndType(ssoEeSelector.WellKnownUrlInput, ssoEeText.testWellknownUrl);
+    cy.get(ssoSelector.saveButton).eq(1).click();
+    cy.get('[data-cy="enable-button"]').click();
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        ssoText.toggleUpdateToast("OpenID")
+    );
+    cy.get(ssoEeSelector.nameInput).should("have.value", ssoEeText.testName);
+    cy.get(ssoEeSelector.clientIdInput).should(
+        "have.value",
+        ssoEeText.testclientId
+    );
+    cy.get(ssoEeSelector.clientSecretInput).should(
+        "have.value",
+        ssoEeText.testclientSecret
+    );
+    cy.get(ssoEeSelector.WellKnownUrlInput).should(
+        "have.value",
+        ssoEeText.testWellknownUrl
+    );
+};
+
+export const resetDsPermissions = () => {
+    common.navigateToManageGroups();
+    cy.wait(200);
+    cy.get(groupsSelector.permissionsLink).click();
+
+    cy.get(groupsSelector.appsCreateCheck).then(($el) => {
+        if ($el.is(":checked")) {
+            cy.get(groupsSelector.appsCreateCheck).uncheck();
+        }
+    });
+    cy.get(eeGroupsSelector.dsCreateCheck).then(($el) => {
+        if ($el.is(":checked")) {
+            cy.get(eeGroupsSelector.dsCreateCheck).uncheck();
+        }
+    });
+    cy.get(eeGroupsSelector.dsDeleteCheck).then(($el) => {
+        if ($el.is(":checked")) {
+            cy.get(eeGroupsSelector.dsDeleteCheck).uncheck();
+        }
+    });
+};
+
+export const deleteAssignedDatasources = () => {
+    common.navigateToManageGroups();
+    cy.get('[data-cy="datasource-link"]').click();
+    cy.get("body").then(($body) => {
+        const removeAllButtons = $body.find('[data-cy="remove-button"]');
+        if (removeAllButtons.length > 0) {
+            cy.get('[data-cy="remove-button"]').click({ multiple: true });
+        }
+    });
+};
+
+export const userSignUp = (fullName, email, workspaceName) => {
+    const verificationFunction =
+        Cypress.env("environment") === "Enterprise"
+            ? verifyOnboardingQuestions
+            : verifyCloudOnboardingQuestions;
+
+    let invitationLink = "";
+    cy.visit("/");
+    cy.wait(500);
+    cy.get(commonSelectors.createAnAccountLink).realClick();
+    cy.clearAndType(commonSelectors.nameInputField, fullName);
+    cy.clearAndType(commonSelectors.emailInputField, email);
+    cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
+    cy.get(commonSelectors.signUpButton).click();
+
+    cy.wait(500);
+    cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `select invitation_token from users where email='${email}';`,
+    }).then((resp) => {
+        invitationLink = `/invitations/${resp.rows[0].invitation_token}`;
+        cy.visit(invitationLink);
+        cy.get(commonSelectors.setUpToolJetButton).click();
+        cy.wait(4000);
+
+        verificationFunction(fullName, workspaceName);
+    });
+};
+
+export const allowPersonalWorkspace = (allow = true) => {
+    const value = allow ? "true" : "false";
+    cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `UPDATE instance_settings SET value = '${value}' WHERE key = 'ALLOW_PERSONAL_WORKSPACE';`,
+    });
+};
+
+export const addNewUserEE = (firstName, email) => {
+    common.navigateToManageUsers();
+    cy.get(usersSelector.buttonAddUsers).click();
+    cy.get(commonSelectors.inputFieldFullName).type(firstName);
+    cy.get(commonSelectors.inputFieldEmailAddress).type(email);
+
+    cy.get(usersSelector.buttonInviteUsers).click();
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        usersText.userCreatedToast
+    );
+    WorkspaceInvitationLink(email);
+    cy.clearAndType(commonSelectors.passwordInputField, usersText.password);
+    cy.get(commonSelectors.signUpButton).click();
+    cy.wait(2000);
+    cy.get(commonSelectors.acceptInviteButton).click();
+    cy.get(commonSelectors.workspaceName).verifyVisibleElement(
+        "have.text",
+        "My workspace"
+    );
+};
+
+export const inviteUser = (firstName, email) => {
+    cy.get(usersSelector.buttonAddUsers).click();
+    cy.get(commonSelectors.inputFieldFullName).type(firstName);
+    cy.get(commonSelectors.inputFieldEmailAddress).type(email);
+
+    cy.get(usersSelector.buttonInviteUsers).click();
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        usersText.userCreatedToast
+    );
+    fetchAndVisitInviteLink(email);
+};
+
+export const defaultWorkspace = () => {
+    cy.get(".org-select-container").then(($title) => {
+        if (!$title.text().includes("My workspace")) {
+            cy.get(commonSelectors.workspaceName).realClick();
+            cy.contains("My workspace").realClick();
+            cy.wait(2000);
+            defaultWorkspace();
+        }
+    });
+};
+
+export const trunOffAllowPersonalWorkspace = () => {
+    cy.get(commonSelectors.settingsIcon).click();
+    cy.get(commonEeSelectors.instanceSettingIcon).click();
+    cy.get(instanceSettingsSelector.manageInstanceSettings).click();
+    cy.get(instanceSettingsSelector.allowWorkspaceToggle)
+        .eq(0)
+        .then(($el) => {
+            if ($el.is(":checked")) {
+                cy.get(instanceSettingsSelector.allowWorkspaceToggle).eq(0).uncheck();
+                cy.get(commonEeSelectors.saveButton).click();
+                cy.verifyToastMessage(
+                    commonSelectors.toastMessage,
+                    "Instance settings have been updated"
+                );
+            }
+        });
+};
+
+export const verifySSOSignUpPageElements = () => {
+    cy.get(commonSelectors.invitePageHeader).verifyVisibleElement(
+        "have.text",
+        "Join ToolJet"
+    );
+    cy.get(commonSelectors.invitePageSubHeader).verifyVisibleElement(
+        "have.text",
+        "You are invited to ToolJet."
+    );
+    cy.get(commonSelectors.userNameInputLabel).verifyVisibleElement(
+        "have.text",
+        commonText.userNameInputLabel
+    );
+    cy.get(commonSelectors.invitedUserName).should("be.visible");
+    cy.get(commonSelectors.emailInputLabel).verifyVisibleElement(
+        "have.text",
+        commonText.emailInputLabel
+    );
+    cy.get(commonSelectors.invitedUserEmail).should("be.visible");
+    cy.get(commonSelectors.acceptInviteButton).verifyVisibleElement(
+        "have.text",
+        commonText.acceptInviteButton
+    );
+
+    cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
+        expect($el.contents().first().text().trim()).to.eq(
+            commonText.signUpTermsHelperText
+        );
+    });
+    cy.get(commonSelectors.termsOfServiceLink)
+        .verifyVisibleElement("have.text", commonText.termsOfServiceLink)
+        .and("have.attr", "href")
+        .and("equal", "https://www.tooljet.com/terms");
+    cy.get(commonSelectors.privacyPolicyLink)
+        .verifyVisibleElement("have.text", commonText.privacyPolicyLink)
+        .and("have.attr", "href")
+        .and("equal", "https://www.tooljet.com/privacy");
+};
+
+export const VerifyWorkspaceInvitePageElements = () => {
+    cy.get(commonSelectors.invitePageHeader).verifyVisibleElement(
+        "have.text",
+        commonText.invitePageHeader
+    );
+    cy.get(commonSelectors.invitePageSubHeader).verifyVisibleElement(
+        "have.text",
+        commonText.invitePageSubHeader
+    );
+    cy.verifyLabel(commonText.userNameInputLabel);
+    cy.get(commonSelectors.invitedUserName).should("be.visible");
+    cy.verifyLabel(commonText.emailInputLabel);
+    cy.get(commonSelectors.invitedUserEmail).should("be.visible");
+    cy.get(commonSelectors.acceptInviteButton).verifyVisibleElement(
+        "have.text",
+        commonText.acceptInviteButton
+    );
+
+    cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
+        expect($el.contents().first().text().trim()).to.eq(
+            commonText.signUpTermsHelperText
+        );
+    });
+    cy.get(commonSelectors.termsOfServiceLink)
+        .verifyVisibleElement("have.text", commonText.termsOfServiceLink)
+        .and("have.attr", "href")
+        .and("equal", "https://www.tooljet.com/terms");
+    cy.get(commonSelectors.privacyPolicyLink)
+        .verifyVisibleElement("have.text", commonText.privacyPolicyLink)
+        .and("have.attr", "href")
+        .and("equal", "https://www.tooljet.com/privacy");
+
+    cy.get("body").then(($el) => {
+        if ($el.text().includes("Google")) {
+            cy.get(ssoSelector.googleSSOText).verifyVisibleElement(
+                "have.text",
+                ssoText.googleSignUpText
+            );
+            cy.get(ssoSelector.gitSSOText).verifyVisibleElement(
+                "have.text",
+                ssoText.gitSignUpText
+            );
+            cy.get(commonSelectors.onboardingSeperator).should("be.visible");
+        }
+    });
+};
+
+export const WorkspaceInvitationLink = (email) => {
+    let invitationToken,
+        organizationToken,
+        workspaceId,
+        userId,
+        url = "";
+    cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `select invitation_token from users where email='${email}';`,
+    }).then((resp) => {
+        invitationToken = resp.rows[0].invitation_token;
+
+        cy.task("dbConnection", {
+            dbconfig: Cypress.env("app_db"),
+            sql: "select id from organizations where name='My workspace';",
+        }).then((resp) => {
+            workspaceId = resp.rows[0].id;
+
+            cy.task("dbConnection", {
+                dbconfig: Cypress.env("app_db"),
+                sql: `select id from users where email='${email}';`,
+            }).then((resp) => {
+                userId = resp.rows[0].id;
+
+                cy.task("dbConnection", {
+                    dbconfig: Cypress.env("app_db"),
+                    sql: `select invitation_token from organization_users where user_id='${userId}';`,
+                }).then((resp) => {
+                    organizationToken = resp.rows[0].invitation_token;
+
+                    url = `/invitations/${invitationToken}/workspaces/${organizationToken}?oid=${workspaceId}`;
+                    common.logout();
+                    cy.visit(url);
+                });
+            });
+        });
+    });
+};
+
+export const enableDefaultSSO = () => {
+    common.navigateToManageSSO();
+    cy.get("body").then(($el) => {
+        if (!$el.text().includes("Allowed domains")) {
+            cy.get(ssoSelector.generalSettingsElements.generalSettings).click();
+        }
+    });
+    cy.get(ssoSelector.allowDefaultSSOToggle).then(($el) => {
+        if (!$el.is(":checked")) {
+            cy.get(ssoSelector.allowDefaultSSOToggle).check();
+            cy.get(ssoSelector.saveButton).click();
+            cy.verifyToastMessage(commonSelectors.toastMessage, ssoText.ssoToast);
+        }
+    });
+};
+
+export const disableSSO = (ssoSelector, toggleSelector) => {
+    cy.wait(1000);
+    cy.get(ssoSelector).click();
+    cy.get(toggleSelector).then(($el) => {
+        if ($el.is(":checked")) {
+            cy.get(toggleSelector).uncheck();
+        }
+    });
+};
+
+export const AddDataSourceToGroup = (groupName, dsName) => {
+    common.navigateToManageGroups();
+    cy.get(groupsSelector.groupLink(groupName)).click();
+    cy.get(eeGroupsSelector.datasourceLink).click();
+    cy.wait(500);
+    cy.get(
+        '[data-cy="datasource-select-search"] >> .rmsc > .dropdown-container > .dropdown-heading > .dropdown-heading-value > .gray'
+    ).click();
+    cy.contains(dsName).realClick();
+
+    cy.get(eeGroupsSelector.AddDsButton).click();
+    cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        "Datasources added to the group"
+    );
+};
+
+export const enableToggle = (toggleSelector) => {
+    cy.get(toggleSelector).then(($el) => {
+        if (!$el.is(":checked")) {
+            cy.get(toggleSelector).check();
+        }
+    });
+};
+
+export const disableToggle = (toggleSelector) => {
+    cy.get(toggleSelector).then(($el) => {
+        if ($el.is(":checked")) {
+            cy.get(toggleSelector).uncheck();
+        }
+    });
+};
+
+export const verifyPromoteModalUI = (versionName, currEnv, targetEnv) => {
+    cy.get(commonEeSelectors.promoteButton)
+        .verifyVisibleElement("have.text", " Promote ")
+        .click();
+    cy.get(commonEeSelectors.modalTitle).verifyVisibleElement(
+        "have.text",
+        `Promote ${versionName}`
+    );
+    cy.get(commonSelectors.closeButton).should("be.visible");
+    cy.get(multiEnvSelector.fromLabel).verifyVisibleElement("have.text", "FROM");
+    cy.get(multiEnvSelector.toLabel).verifyVisibleElement("have.text", "TO");
+    cy.get(multiEnvSelector.currEnvName).verifyVisibleElement(
+        "have.text",
+        currEnv
+    );
+    cy.get('[data-cy="target-env-name"]').verifyVisibleElement(
+        "have.text",
+        targetEnv
+    );
+    cy.get('[data-cy="cancel-button"]').verifyVisibleElement(
+        "have.text",
+        "Cancel"
+    );
+    cy.get(commonEeSelectors.promoteButton)
+        .eq(1)
+        .verifyVisibleElement("have.text", "Promote ");
+};
+
+export const resetPassword = (email) => {
+    cy.visit("/");
+    cy.get(commonSelectors.forgotPasswordLink).click();
+    cy.clearAndType(commonSelectors.emailInputField, email);
+    cy.get(commonSelectors.resetPasswordLinkButton).click();
+
+    cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `select forgot_password_token from users where email='${email}';`,
+    }).then((resp) => {
+        const passwordResetLink = `/reset-password/${resp.rows[0].forgot_password_token}`;
+        cy.visit(passwordResetLink);
+    });
+    cy.wait(500);
+
+    cy.clearAndType(commonSelectors.newPasswordInputField, "Password");
+    cy.clearAndType(commonSelectors.confirmPasswordInputField, "Password");
+    cy.wait(4000);
+    cy.get(commonSelectors.resetPasswordButton).click();
+    cy.get(commonSelectors.backToLoginButton).click();
+};
+
+export const verifyTooltipDisabled = (selector, message) => {
+    cy.get(selector)
+        .trigger("mouseover", { force: true })
+        .then(() => {
+            cy.get(".tooltip-inner").last().should("have.text", message);
+        });
+};
+
+export const createAnAppWithSlug = (appName, slug) => {
+    cy.apiCreateApp(appName);
+    cy.openApp();
+    cy.dragAndDropWidget("Table", 250, 250);
+    appPromote("development", "release");
+    cy.get(commonWidgetSelector.shareAppButton).click();
+    cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${slug}`);
+    cy.wait(2000);
+    cy.get(commonWidgetSelector.modalCloseButton).click();
+};
+
+export const updateLicense = (key) => {
+    cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `update instance_settings set value='${key}', updated_at= NOW() where key='LICENSE_KEY';`,
+    });
+};
+
+export const openInstanceSettings = () => {
+    cy.get(commonSelectors.settingsIcon).click();
+    cy.get(commonEeSelectors.instanceSettingIcon).click();
+};
+
+export const openUserActionMenu = (email) => {
+    cy.clearAndType(commonSelectors.inputUserSearch, email);
+    cy.wait(1000);
+    cy.get('[data-cy="user-actions-button"]').eq(0).click();
+    cy.wait(2000);
+};
+
+export const archiveWorkspace = (workspaceName) => {
+    cy.get(instanceSettingsSelector.allWorkspaceTab).click();
+    cy.clearAndType(commonEeSelectors.searchBar, workspaceName);
+    cy.get(workspaceSelector.workspaceStatusChange).eq(0).click();
+    cy.get(commonEeSelectors.confirmButton).click();
+};
+
+export const passwordToggle = (enable) => {
+    cy.getCookie("tj_auth_token").then((cookie) => {
+        cy.request(
+            {
+                method: "PATCH",
+                url: "http://localhost:3000/api/organizations/configs",
+                headers: {
+                    "Tj-Workspace-Id": Cypress.env("workspaceId"),
+                    Cookie: `tj_auth_token=${cookie.value}`,
+                },
+                body: { type: "form", enabled: enable },
+            },
+            { log: false }
+        ).then((response) => {
+            expect(response.status).to.equal(200);
+        });
+    });
+};
+
+export const InstanceSSO = (personalWorkspace, enableSignup, workspaceSSO) => {
+    allowPersonalWorkspace(personalWorkspace);
+
+    cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `UPDATE instance_settings SET value = '${enableSignup}'  WHERE key = 'ENABLE_SIGNUP';UPDATE instance_settings SET value = '${workspaceSSO}' WHERE key = 'ENABLE_WORKSPACE_LOGIN_CONFIGURATION';`,
+    });
+};
+
+export const resetInstanceDomain = () => {
+    cy.getCookie("tj_auth_token").then((cookie) => {
+        cy.request(
+            {
+                method: "PATCH",
+                url: "http://localhost:3000/api/instance-login-configs",
+                headers: {
+                    "Tj-Workspace-Id": Cypress.env("workspaceId"),
+                    Cookie: `tj_auth_token=${cookie.value}`,
+                },
+                body: { allowedDomains: "" },
+            },
+            { log: false }
+        ).then((response) => {
+            expect(response.status).to.equal(200);
+        });
+    });
+};
+
+export const instanceSSOConfig = (allow = true) => {
+    const value = allow ? "true" : "false";
+
+    cy.task("dbConnection", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `UPDATE sso_configs SET enabled = ${allow} WHERE sso IN ('google', 'git', 'openid')AND organization_id IS NULL;`,
+    });
+};
+
+export const updateInstanceSettings = (key, value) => {
+    cy.task("updateSetting", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `UPDATE instance_settings SET value = ${value} WHERE key = ${key};`,
+    });
+};
diff --git a/cypress-tests/cypress/support/utils/restAPI.js b/cypress-tests/cypress/support/utils/restAPI.js
index f87c8d6f61..dd205d326d 100644
--- a/cypress-tests/cypress/support/utils/restAPI.js
+++ b/cypress-tests/cypress/support/utils/restAPI.js
@@ -122,10 +122,11 @@ export const createAndRunRestAPIQuery = ({
                 }
                 if (Array.isArray(responseData)) {
                   responseData.forEach((item) => {
-                    expect(item).to.have.any.keys("id", "name", "price");
+                    expect(item).to.have.any.keys("id", "name", "username", "email", "address");
                   });
                 }
                 if (responseData?.id) {
+                  cy.log(responseData.id)
                   cy.writeFile("cypress/fixtures/restAPI/storedId.json", {
                     id: responseData.id,
                   });
diff --git a/frontend/assets/translations/en.json b/frontend/assets/translations/en.json
index 1feaf4277d..c464a81a65 100644
--- a/frontend/assets/translations/en.json
+++ b/frontend/assets/translations/en.json
@@ -572,6 +572,7 @@
             "styles": "Styles",
             "general": "General",
             "validation": "Validation",
+            "structure": "Structure",
             "documentation": "Read documentation for {{componentMeta}}",
             "widgetNameEmptyError": "Widget name cannot be empty",
             "componentNameExistsError": "Component name already exists",
diff --git a/frontend/ee b/frontend/ee
index 9458c8d66f..9da4f77691 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit 9458c8d66f29f8334765b5757dd096139a8d53d2
+Subproject commit 9da4f776915e328120c3024e551ef6b8032f9f63
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 43b332e6ea..483cb1dfcf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -63,6 +63,7 @@
         "dotenv": "^16.0.3",
         "draft-js": "^0.11.7",
         "draft-js-export-html": "^1.4.1",
+        "draft-js-import-html": "^1.4.1",
         "driver.js": "^0.9.8",
         "emoji-mart": "^5.5.2",
         "file-loader": "^6.2.0",
@@ -105,7 +106,7 @@
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
-        "react-dropzone": "^14.2.3",
+        "react-dropzone": "^14.3.8",
         "react-highlight-words": "^0.21.0",
         "react-hot-toast": "^2.4.0",
         "react-hotkeys-hook": "^4.3.5",
@@ -16948,6 +16949,31 @@
         "immutable": "3.x.x"
       }
     },
+    "node_modules/draft-js-import-element": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/draft-js-import-element/-/draft-js-import-element-1.4.0.tgz",
+      "integrity": "sha512-WmYT5PrCm47lGL5FkH6sRO3TTAcn7qNHsD3igiPqLG/RXrqyKrqN4+wBgbcT2lhna/yfWTRtgzAbQsSJoS1Meg==",
+      "dependencies": {
+        "draft-js-utils": "^1.4.0",
+        "synthetic-dom": "^1.4.0"
+      },
+      "peerDependencies": {
+        "draft-js": ">=0.10.0",
+        "immutable": "3.x.x"
+      }
+    },
+    "node_modules/draft-js-import-html": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/draft-js-import-html/-/draft-js-import-html-1.4.1.tgz",
+      "integrity": "sha512-KOZmtgxZriCDgg5Smr3Y09TjubvXe7rHPy/2fuLSsL+aSzwUDwH/aHDA/k47U+WfpmL4qgyg4oZhqx9TYJV0tg==",
+      "dependencies": {
+        "draft-js-import-element": "^1.4.0"
+      },
+      "peerDependencies": {
+        "draft-js": ">=0.10.0",
+        "immutable": "3.x.x"
+      }
+    },
     "node_modules/draft-js-utils": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/draft-js-utils/-/draft-js-utils-1.4.1.tgz",
@@ -32645,6 +32671,11 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/synthetic-dom": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/synthetic-dom/-/synthetic-dom-1.4.0.tgz",
+      "integrity": "sha512-mHv51ZsmZ+ShT/4s5kg+MGUIhY7Ltq4v03xpN1c8T1Krb5pScsh/lzEjyhrVD0soVDbThbd2e+4dD9vnDG4rhg=="
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 41dbb51e92..4dc4be5289 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -101,7 +101,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
+    "react-dropzone": "^14.3.8",
     "react-highlight-words": "^0.21.0",
     "react-hot-toast": "^2.4.0",
     "react-hotkeys-hook": "^4.3.5",
diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx
index 7e47c82ce2..4a463d93ae 100644
--- a/frontend/src/App/App.jsx
+++ b/frontend/src/App/App.jsx
@@ -42,6 +42,7 @@ import { shallow } from 'zustand/shallow';
 import useStore from '@/AppBuilder/_stores/store';
 import { checkIfToolJetCloud } from '@/_helpers/utils';
 import { BasicPlanMigrationBanner } from '@/HomePage/BasicPlanMigrationBanner/BasicPlanMigrationBanner';
+import EmbedApp from '@/AppBuilder/EmbedApp';
 
 const AppWrapper = (props) => {
   const { isAppDarkMode } = useAppDarkMode();
@@ -144,7 +145,7 @@ class AppComponent extends React.Component {
     const pathname = this.props.location.pathname;
     if (pathname.includes('/apps/')) {
       return 'editor';
-    } else if (pathname.includes('/applications/')) {
+    } else if (pathname.includes('/applications/') || pathname.includes('/embed-apps/')) {
       return 'viewer';
     }
     return '';
@@ -404,6 +405,7 @@ class AppComponent extends React.Component {
                     </PrivateRoute>
                   }
                 />
+                <Route exact path="/embed-apps/:appId" element={<EmbedApp />} />
                 <Route
                   path="*"
                   render={() => {
diff --git a/frontend/src/AppBuilder/AppBuilder.jsx b/frontend/src/AppBuilder/AppBuilder.jsx
index 9f7a8f4e2d..fa12e0d1d9 100644
--- a/frontend/src/AppBuilder/AppBuilder.jsx
+++ b/frontend/src/AppBuilder/AppBuilder.jsx
@@ -14,6 +14,7 @@ import EditorHeader from '@/AppBuilder/Header';
 import LeftSidebar from '@/AppBuilder/LeftSidebar';
 import Popups from './Popups';
 import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
+import RightSidebarToggle from '@/AppBuilder/RightSideBar/RightSidebarToggle';
 import { shallow } from 'zustand/shallow';
 
 // const EditorHeader = lazy(() => import('@/AppBuilder/Header'));
@@ -25,6 +26,7 @@ import { shallow } from 'zustand/shallow';
 // TODO: split Loader into separate component and remove editor loading state from Editor
 export const Editor = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMode, appType = 'front-end' }) => {
   useAppData(appId, moduleId, darkMode);
+  const isRightSidebarOpen = useStore((state) => state.isRightSidebarOpen);
   const isEditorLoading = useStore((state) => state.loaderStore.modules[moduleId].isEditorLoading, shallow);
   const currentMode = useStore((state) => state.modeStore.modules[moduleId].currentMode, shallow);
   const isModuleEditor = appType === 'module';
@@ -54,9 +56,10 @@ export const Editor = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
           </Suspense>
           {window?.public_config?.ENABLE_MULTIPLAYER_EDITING === 'true' && <RealtimeCursors />}
           <DndProvider backend={HTML5Backend}>
-            <AppCanvas appId={appId} />
+            <AppCanvas moduleId={moduleId} appId={appId} switchDarkMode={switchDarkMode} darkMode={darkMode} />
             <QueryPanel darkMode={darkMode} />
-            <RightSideBar darkMode={darkMode} />
+            <RightSidebarToggle darkMode={darkMode} />
+            {isRightSidebarOpen && <RightSideBar darkMode={darkMode} />}{' '}
           </DndProvider>
           <Popups darkMode={darkMode} />
         </ModuleProvider>
diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
index 10ab1fa054..d82fb93386 100644
--- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { Container } from './Container';
 import Grid from './Grid';
 import { EditorSelecto } from './Selecto';
@@ -17,8 +17,13 @@ import useAppDarkMode from '@/_hooks/useAppDarkMode';
 import useAppCanvasMaxWidth from './useAppCanvasMaxWidth';
 import { DeleteWidgetConfirmation } from './DeleteWidgetConfirmation';
 import useSidebarMargin from './useSidebarMargin';
+import PagesSidebarNavigation from '../RightSideBar/PageSettingsTab/PageMenu/PagesSidebarNavigation';
+import { resolveReferences } from '@/_helpers/utils';
+import useRightSidebarMargin from './userRightSidebarMargin';
+import { DragGhostWidget } from './GhostWidgets';
+import AppCanvasBanner from '../../AppBuilder/Header/AppCanvasBanner';
 
-export const AppCanvas = ({ appId, isViewerSidebarPinned, isViewer = false }) => {
+export const AppCanvas = ({ appId, isViewer = false, switchDarkMode, darkMode }) => {
   const { moduleId, isModuleMode, appType } = useModuleContext();
   const canvasContainerRef = useRef();
   const handleCanvasContainerMouseUp = useStore((state) => state.handleCanvasContainerMouseUp, shallow);
@@ -41,9 +46,33 @@ export const AppCanvas = ({ appId, isViewerSidebarPinned, isViewer = false }) =>
   const setIsComponentLayoutReady = useStore((state) => state.setIsComponentLayoutReady, shallow);
   const canvasMaxWidth = useAppCanvasMaxWidth({ mode: currentMode });
   const editorMarginLeft = useSidebarMargin(canvasContainerRef);
-  const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
+  // const editorMarginRight = useRightSidebarMargin(canvasContainerRef);
+  // const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
   const isSidebarOpen = useStore((state) => state.isSidebarOpen, shallow);
   const getPageId = useStore((state) => state.getCurrentPageId, shallow);
+  const isRightSidebarOpen = useStore((state) => state.isRightSidebarOpen, shallow);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned, shallow);
+  const currentPageId = useStore((state) => state.modules[moduleId].currentPageId);
+  const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
+
+  const [isViewerSidebarPinned, setIsSidebarPinned] = useState(
+    localStorage.getItem('isPagesSidebarPinned') !== 'false'
+  );
+
+  const { globalSettings, pages, pageSettings, switchPage } = useStore(
+    (state) => ({
+      globalSettings: state.globalSettings,
+      pages: state.modules.canvas.pages,
+      pageSettings: state.pageSettings,
+      switchPage: state.switchPage,
+    }),
+    shallow
+  );
+
+  const showHeader = !globalSettings?.hideHeader;
+  const { definition: { styles = {}, properties = {} } = {} } = pageSettings ?? {};
+  const { position, disableMenu, showOnDesktop } = properties ?? {};
+  const isPagesSidebarHidden = resolveReferences(disableMenu?.value);
 
   const hideSidebar = isModuleMode || isPagesSidebarHidden || appType === 'module';
 
@@ -78,15 +107,17 @@ export const AppCanvas = ({ appId, isViewerSidebarPinned, isViewer = false }) =>
     handleResize();
 
     return () => window.removeEventListener('resize', handleResize);
-  }, [currentLayout, canvasMaxWidth, isViewerSidebarPinned, moduleId]);
+  }, [currentLayout, canvasMaxWidth, isViewerSidebarPinned, moduleId, isRightSidebarOpen]);
 
-  const styles = useMemo(() => {
+  useEffect(() => { }, [isViewerSidebarPinned]);
+
+  const canvasContainerStyles = useMemo(() => {
     const canvasBgColor =
       currentMode === 'view'
         ? computeViewerBackgroundColor(isAppDarkMode, canvasBgColor)
         : !isAppDarkMode
-        ? '#EBEBEF'
-        : '#2F3C4C';
+          ? '#EBEBEF'
+          : '#2F3C4C';
 
     if (isModuleMode) {
       return {
@@ -100,24 +131,37 @@ export const AppCanvas = ({ appId, isViewerSidebarPinned, isViewer = false }) =>
       borderLeft: currentMode === 'edit' && editorMarginLeft + 'px solid',
       height: currentMode === 'edit' ? canvasContainerHeight : '100%',
       background: canvasBgColor,
-      marginLeft:
-        isViewerSidebarPinned && !hideSidebar && currentLayout !== 'mobile' && currentMode !== 'edit'
-          ? pageSidebarStyle === 'icon'
-            ? '65px'
-            : '210px'
-          : 'auto',
+      width: currentMode === 'edit' ? `calc(100% - 96px)` : '100%',
+      alignItems: 'unset',
+      justifyContent: 'unset',
+      borderRight: currentMode === 'edit' && isRightSidebarOpen && '299' + 'px solid',
+      padding: currentMode === 'edit' && '8px',
+      paddingBottom: currentMode === 'edit' && '2px',
     };
-  }, [
-    currentMode,
-    isAppDarkMode,
-    isModuleMode,
-    editorMarginLeft,
-    canvasContainerHeight,
-    isViewerSidebarPinned,
-    hideSidebar,
-    currentLayout,
-    pageSidebarStyle,
-  ]);
+  }, [currentMode, isAppDarkMode, isModuleMode, editorMarginLeft, canvasContainerHeight, isRightSidebarOpen]);
+
+  const toggleSidebarPinned = useCallback(() => {
+    const newValue = !isViewerSidebarPinned;
+    setIsSidebarPinned(newValue);
+    localStorage.setItem('isPagesSidebarPinned', JSON.stringify(newValue));
+  }, [isViewerSidebarPinned]);
+
+  function getMinWidth() {
+    if (isModuleMode) return '100%';
+
+    const shouldAdjust = isSidebarOpen || (isRightSidebarOpen && currentMode === 'edit');
+
+    if (!shouldAdjust) return '';
+
+    let offset;
+    if (isViewerSidebarPinned) {
+      offset = position === 'side' ? '352px' : '126px';
+    } else {
+      offset = position === 'side' ? '171px' : '126px';
+    }
+
+    return `calc(100vw - ${offset})`;
+  }
 
   return (
     <div
@@ -125,50 +169,72 @@ export const AppCanvas = ({ appId, isViewerSidebarPinned, isViewer = false }) =>
       id="main-editor-canvas"
       onMouseUp={handleCanvasContainerMouseUp}
     >
-      {creationMode === 'GIT' && <FreezeVersionInfo info={'Apps imported from git repository cannot be edited'} />}
-      {creationMode !== 'GIT' && <FreezeVersionInfo hide={currentMode !== 'edit'} />}
-      <div
-        ref={canvasContainerRef}
-        className={cx(
-          'canvas-container align-items-center page-container',
-          { 'dark-theme theme-dark': isAppDarkMode, close: !isViewerSidebarPinned },
-          { 'overflow-x-auto': (currentMode === 'edit' && isSidebarOpen) || currentMode === 'view' },
-          { 'overflow-x-hidden': moduleId !== 'canvas' } // Disbling horizontal scroll for modules in view mode
-        )}
-        style={styles}
-      >
+      <AppCanvasBanner appId={appId} />
+      <div id="sidebar-page-navigation" className="areas d-flex flex-rows">
         <div
-          style={{
-            minWidth: isModuleMode ? '100%' : `calc((100vw - 300px) - 48px)`,
-          }}
-          className={`app-${appId} _tooljet-page-${getPageId()}`}
-        >
-          {currentMode === 'edit' && (
-            <AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
+          ref={canvasContainerRef}
+          className={cx(
+            'canvas-container d-flex page-container',
+            { 'dark-theme theme-dark': isAppDarkMode, close: !isViewerSidebarPinned },
+            { 'overflow-x-auto': currentMode === 'edit' },
+            { 'position-top': position === 'top' },
+            { 'overflow-x-hidden': moduleId !== 'canvas' } // Disbling horizontal scroll for modules in view mode
           )}
-          <DeleteWidgetConfirmation darkMode={isAppDarkMode} />
-          <HotkeyProvider mode={currentMode} canvasMaxWidth={canvasMaxWidth} currentLayout={currentLayout}>
-            {environmentLoadingState !== 'loading' && (
-              <div>
-                <Container
-                  id={moduleId}
-                  gridWidth={gridWidth}
-                  canvasWidth={canvasWidth}
-                  canvasHeight={canvasHeight}
-                  darkMode={isAppDarkMode}
-                  canvasMaxWidth={canvasMaxWidth}
-                  isViewerSidebarPinned={isViewerSidebarPinned}
-                  pageSidebarStyle={pageSidebarStyle}
-                  appType={appType}
-                />
-                {appType !== 'module' && <div id="component-portal" />}
-              </div>
+          style={canvasContainerStyles}
+        >
+          {showOnDesktop && (
+            <PagesSidebarNavigation
+              showHeader={showHeader}
+              isMobileDevice={currentLayout === 'mobile'}
+              pages={pages}
+              currentPageId={currentPageId ?? homePageId}
+              switchPage={switchPage}
+              height={currentMode === 'edit' ? canvasContainerHeight : '100%'}
+              switchDarkMode={switchDarkMode}
+              isSidebarPinned={isViewerSidebarPinned}
+              toggleSidebarPinned={toggleSidebarPinned}
+              darkMode={darkMode}
+            />
+          )}
+          <div
+            style={{
+              minWidth: getMinWidth(),
+              scrollbarWidth: 'none',
+              overflow: 'auto',
+              width: currentMode === 'view' ? `calc(100% - ${isViewerSidebarPinned ? '0px' : '0px'})` : '100%',
+            }}
+            className={`app-${appId} _tooljet-page-${getPageId()}`}
+          >
+            {currentMode === 'edit' && (
+              <AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
             )}
+            <DeleteWidgetConfirmation darkMode={isAppDarkMode} />
+            <HotkeyProvider mode={currentMode} canvasMaxWidth={canvasMaxWidth} currentLayout={currentLayout}>
+              {environmentLoadingState !== 'loading' && (
+                <div>
+                  <Container
+                    id="canvas"
+                    gridWidth={gridWidth}
+                    canvasWidth={canvasWidth}
+                    canvasHeight={canvasHeight}
+                    darkMode={isAppDarkMode}
+                    canvasMaxWidth={canvasMaxWidth}
+                    isViewerSidebarPinned={isViewerSidebarPinned}
+                    pageSidebarStyle={pageSidebarStyle}
+                    pagePositionType={position}
+                    appType={appType}
+                  />
+                  <DragGhostWidget />
+                  <div id="component-portal" />
+                  {appType !== 'module' && <div id="component-portal" />}
+                </div>
+              )}
 
-            {currentMode === 'view' || (currentLayout === 'mobile' && isAutoMobileLayout) ? null : (
-              <Grid currentLayout={currentLayout} gridWidth={gridWidth} />
-            )}
-          </HotkeyProvider>
+              {currentMode === 'view' || (currentLayout === 'mobile' && isAutoMobileLayout) ? null : (
+                <Grid currentLayout={currentLayout} gridWidth={gridWidth} />
+              )}
+            </HotkeyProvider>
+          </div>
         </div>
       </div>
       {currentMode === 'edit' && <EditorSelecto />}
diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index 22a410c674..f25d815159 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -4,6 +4,7 @@ import './configHandle.scss';
 import useStore from '@/AppBuilder/_stores/store';
 import { findHighestLevelofSelection } from '../Grid/gridUtils';
 import SolidIcon from '@/_ui/Icon/solidIcons/index';
+import { ToolTip } from '@/_components/ToolTip';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import { DROPPABLE_PARENTS } from '../appCanvasConstants';
 
@@ -52,7 +53,40 @@ export const ConfigHandle = ({
     );
   }, shallow);
 
+  const currentPageIndex = useStore((state) => state.modules.canvas.currentPageIndex);
+  const component = useStore((state) => state.modules.canvas.pages[currentPageIndex].components[id]);
+  const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
+  const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
+  const isRestricted = component.permissions && component.permissions.length !== 0;
+  const draggingComponentId = useStore((state) => state.draggingComponentId);
+
   let height = visibility === false ? 10 : widgetHeight;
+
+  const getTooltip = () => {
+    const permission = component.permissions?.[0];
+    if (!permission) return null;
+
+    const users = permission.groups || permission.users || [];
+    if (users.length === 0) return null;
+
+    const isSingle = permission.type === 'SINGLE';
+    const isGroup = permission.type === 'GROUP';
+
+    if (isSingle) {
+      return users.length === 1
+        ? `Access restricted to ${users[0].user.email}`
+        : `Access restricted to ${users.length} users`;
+    }
+
+    if (isGroup) {
+      return users.length === 1
+        ? `Access restricted to ${users[0].permission_group?.name || users[0].permissionGroup?.name} group`
+        : `Access restricted to ${users.length} user groups`;
+    }
+
+    return null;
+  };
+
   return (
     <div
       className={`config-handle ${customClassName}`}
@@ -78,6 +112,22 @@ export const ConfigHandle = ({
         }
       }}
     >
+      {licenseValid && isRestricted && (
+        <ToolTip message={getTooltip()} show={licenseValid && isRestricted && !draggingComponentId}>
+          <span
+            style={{
+              background:
+                visibility === false ? '#c6cad0' : componentType === 'Modal' && isModalOpen ? '#c6cad0' : '#4D72FA',
+              border: position === 'bottom' ? '1px solid white' : 'none',
+              color: visibility === false && 'var(--text-placeholder)',
+              marginRight: '4px',
+            }}
+            className="badge handle-content"
+          >
+            <SolidIcon width="12" name="lock" fill="var(--icon-on-solid)" />
+          </span>
+        </ToolTip>
+      )}
       <span
         style={{
           background:
diff --git a/frontend/src/AppBuilder/AppCanvas/Container.jsx b/frontend/src/AppBuilder/AppCanvas/Container.jsx
index 2997b84943..808a29f90c 100644
--- a/frontend/src/AppBuilder/AppCanvas/Container.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Container.jsx
@@ -10,6 +10,7 @@ import {
   addNewWidgetToTheEditor,
   computeViewerBackgroundColor,
   getSubContainerWidthAfterPadding,
+  addDefaultButtonIdToForm,
 } from './appCanvasUtils';
 import {
   CANVAS_WIDTHS,
@@ -52,6 +53,7 @@ export const Container = React.memo(
     canvasMaxWidth,
     isViewerSidebarPinned,
     pageSidebarStyle,
+    pagePositionType,
     componentType,
     appType,
   }) => {
@@ -84,18 +86,12 @@ export const Container = React.memo(
         item.canvasWidth = getContainerCanvasWidth();
       },
       drop: async ({ componentType, component }, monitor) => {
-        setShowModuleBorder(false); // Hide the module border when dropping
+        setShowModuleBorder(false);
         if (currentMode === 'view' || (appType === 'module' && componentType !== 'ModuleContainer')) return;
+
         const didDrop = monitor.didDrop();
         if (didDrop) return;
-        if (componentType === 'PDF' && !isPDFSupported()) {
-          toast.error(
-            'PDF is not supported in this version of browser. We recommend upgrading to the latest version for full support.'
-          );
-          return;
-        }
 
-        // IMPORTANT: This logic needs to be changed when we implement the module versioning
         const moduleInfo = component?.moduleId
           ? {
               moduleId: component.moduleId,
@@ -106,8 +102,10 @@ export const Container = React.memo(
             }
           : undefined;
 
+        let addedComponent;
+
         if (WIDGETS_WITH_DEFAULT_CHILDREN.includes(componentType)) {
-          const parentComponent = addNewWidgetToTheEditor(
+          let parentComponent = addNewWidgetToTheEditor(
             componentType,
             monitor,
             currentLayout,
@@ -116,10 +114,11 @@ export const Container = React.memo(
             moduleInfo
           );
           const childComponents = addChildrenWidgetsToParent(componentType, parentComponent?.id, currentLayout);
-          const newComponents = [parentComponent, ...childComponents];
-          await addComponentToCurrentPage(newComponents);
-          // setSelectedComponents([parentComponent?.id]);
-          setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+          if (componentType === 'Form') {
+            parentComponent = addDefaultButtonIdToForm(parentComponent, childComponents);
+          }
+          addedComponent = [parentComponent, ...childComponents];
+          await addComponentToCurrentPage(addedComponent);
         } else {
           const newComponent = addNewWidgetToTheEditor(
             componentType,
@@ -129,11 +128,32 @@ export const Container = React.memo(
             id,
             moduleInfo
           );
-          await addComponentToCurrentPage([newComponent]);
-          // setSelectedComponents([newComponent?.id]);
-          setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+          addedComponent = [newComponent];
+          await addComponentToCurrentPage(addedComponent);
+        }
+
+        setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+
+        const canvas = document.querySelector('.canvas-container');
+        const sidebar = document.querySelector('.editor-sidebar');
+        const droppedElem = document.getElementById(addedComponent?.[0]?.id);
+
+        if (!canvas || !sidebar || !droppedElem) return;
+
+        const droppedRect = droppedElem.getBoundingClientRect();
+        const sidebarRect = sidebar.getBoundingClientRect();
+
+        const isOverlapping = droppedRect.right > sidebarRect.left && droppedRect.left < sidebarRect.right;
+
+        if (isOverlapping) {
+          const overlap = droppedRect.right - sidebarRect.left;
+          canvas.scrollTo({
+            left: canvas.scrollLeft + overlap,
+            behavior: 'smooth',
+          });
         }
       },
+
       collect: (monitor) => ({
         isOverCurrent: monitor.isOver({ shallow: true }),
       }),
@@ -161,18 +181,27 @@ export const Container = React.memo(
     }, [canvasWidth, listViewMode, columns]);
 
     const getCanvasWidth = useCallback(() => {
-      if (
-        id === 'canvas' &&
-        !isPagesSidebarHidden &&
-        isViewerSidebarPinned &&
-        currentLayout !== 'mobile' &&
-        currentMode !== 'edit' &&
-        appType !== 'module'
-      ) {
-        return `calc(100% - ${pageSidebarStyle === 'icon' ? '65px' : '210px'})`;
-      }
+      // if (
+      //   id === 'canvas' &&
+      //   !isPagesSidebarHidden &&
+      //   isViewerSidebarPinned &&
+      //   currentLayout !== 'mobile' &&
+      //   pagePositionType == 'side' &&
+      //   appType !== 'module'
+      // ) {
+      //   return `calc(100% - ${pageSidebarStyle === 'icon' ? '85px' : '226px'})`;
+      // }
+      // if (
+      //   id === 'canvas' &&
+      //   !isPagesSidebarHidden &&
+      //   !isViewerSidebarPinned &&
+      //   currentLayout !== 'mobile' &&
+      //   pagePositionType == 'side'
+      // ) {
+      //   return `calc(100% - ${'44px'})`;
+      // }
       return '100%';
-    }, [isViewerSidebarPinned, currentLayout, id, currentMode, pageSidebarStyle]);
+    }, [id, isPagesSidebarHidden, isViewerSidebarPinned, currentLayout, pagePositionType, pageSidebarStyle]);
 
     const handleCanvasClick = useCallback(
       (e) => {
@@ -224,7 +253,7 @@ export const Container = React.memo(
               : id === 'canvas'
               ? canvasBgColor
               : '#f0f0f0',
-          width: getCanvasWidth(),
+          width: '100%',
           maxWidth: (() => {
             // For Main Canvas
             if (id === 'canvas') {
diff --git a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx
index 1061521a66..55c4802781 100644
--- a/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/GhostWidgets.jsx
@@ -1,17 +1,24 @@
 import React from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+
+export const DragGhostWidget = () => {
+  const draggingComponentId = useStore((state) => state.draggingComponentId);
+
+  if (!draggingComponentId) return null;
 
-export const DragGhostWidget = ({ isDragging }) => {
-  if (!isDragging) return '';
   return (
     <div
-      id={'moveable-drag-ghost'}
+      id="moveable-drag-ghost"
       style={{
         zIndex: 4,
         position: 'absolute',
         background: '#D9E2FC',
         opacity: '0.7',
+        pointerEvents: 'none',
+        left: 0,
+        top: 0,
       }}
-    ></div>
+    />
   );
 };
 
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css
index e1c6bb3baa..00c36d7aed 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.css
@@ -1,176 +1,207 @@
-.target, .nested-target {
-	position: absolute;
-	box-sizing: border-box;
+.target,
+.nested-target {
+  position: absolute;
+  box-sizing: border-box;
 }
 
-.target.hovered{
-    z-index: 2;
+.target.hovered {
+  z-index: 2;
 }
 
-.moveable-control-box>.moveable-control-box:not(.moveable-control-box-d-block, .moveable-dragging, .selected-component){
-	visibility: hidden !important;
-}
-.moveable-control-box>.moveable-control-box:hover, .selected-component{
-	visibility: visible !important;
-}
-.moveable-control-box>.moveable-control-box:hover, .moveable-control-box>.moveable-dragging{
-	visibility: visible !important;
-}
-.moveable-control-box.modal-moveable{
-    z-index: 3001 !important;
+.moveable-control-box
+  > .moveable-control-box:not(
+    .moveable-control-box-d-block,
+    .moveable-dragging,
+    .selected-component
+  ) {
+  visibility: hidden !important;
 }
 
+.moveable-control-box > .moveable-control-box:hover,
+.selected-component {
+  visibility: visible !important;
+}
 
-.moveable-e.moveable-control{
-	/* height: 24px !important;
+.moveable-control-box > .moveable-control-box:hover,
+.moveable-control-box > .moveable-dragging {
+  visibility: visible !important;
+}
+
+.moveable-control-box.modal-moveable {
+  z-index: 3001 !important;
+}
+
+.moveable-e.moveable-control {
+  /* height: 24px !important;
     top: -5px !important; */
-    border-radius: 2px !important;
-    border: 1px solid #3E63DD !important;
-    background: #fff !important;
-    width: 6px !important;
-    left: 4px !important;
+  border-radius: 2px !important;
+  border: 1px solid #3e63dd !important;
+  background: #fff !important;
+  width: 6px !important;
+  left: 4px !important;
 }
 
-.moveable-w.moveable-control{
-	/* height: 24px !important;
+.moveable-w.moveable-control {
+  /* height: 24px !important;
     top: -5px !important; */
-    border-radius: 2px !important;
-    border: 1px solid #3E63DD !important;
-    background: #fff !important;
-    width: 6px !important;
-    left: 4px !important;
+  border-radius: 2px !important;
+  border: 1px solid #3e63dd !important;
+  background: #fff !important;
+  width: 6px !important;
+  left: 4px !important;
 }
 
-.moveable-n.moveable-control{
-	/* height: 24px !important; */
-    top: 4px !important;
-    border-radius: 2px !important;
-    border: 1px solid #3E63DD !important;
-    background: #fff !important;
-    height: 6px !important;
-    /* left: 3px !important; */
+.moveable-horizontal-only {
+  .moveable-direction.moveable-w:not(.moveable-edge),
+  .moveable-direction.moveable-e:not(.moveable-edge) {
+    height: 20px !important;
+    width: 7.5px !important;
+    opacity: 1 !important;
+    background-color: #fff !important;
+    border-radius: 10px !important;
+  }
+
+  .moveable-direction.moveable-w:not(.moveable-edge) {
+    left: 1px !important;
+    top: -6.5px !important;
+  }
+
+  .moveable-direction.moveable-e:not(.moveable-edge) {
+    left: 1px !important;
+    top: -6.5px !important;
+  }
 }
 
-.moveable-s.moveable-control{
-	/* height: 24px !important; */
-    top: 4px !important;
-    border-radius: 2px !important;
-    border: 1px solid #3E63DD !important;
-    background: #fff !important;
-    height: 6px !important;
-    /* left: 3px !important; */
+.moveable-n.moveable-control {
+  /* height: 24px !important; */
+  top: 4px !important;
+  border-radius: 2px !important;
+  border: 1px solid #3e63dd !important;
+  background: #fff !important;
+  height: 6px !important;
+  /* left: 3px !important; */
+}
+
+.moveable-s.moveable-control {
+  /* height: 24px !important; */
+  top: 4px !important;
+  border-radius: 2px !important;
+  border: 1px solid #3e63dd !important;
+  background: #fff !important;
+  height: 6px !important;
+  /* left: 3px !important; */
 }
 
 .grid-guide-lines {
-	background: #8DA4EF !important;
+  background: #8da4ef !important;
 }
 
-.moveable-control-box:not([data-able-groupable]) .moveable-control-box:not(:hover) {
-    opacity: 0;
+.moveable-control-box:not([data-able-groupable])
+  .moveable-control-box:not(:hover) {
+  opacity: 0;
 }
 
-.dragged-movable-control-box, [data-hovered-control="true"] {
-    opacity: 1 !important;
+.dragged-movable-control-box,
+[data-hovered-control="true"] {
+  opacity: 1 !important;
 }
 
 .moveable-line.moveable-e,
 .moveable-line.moveable-w {
-    border: 5px solid #fff0;
+  border: 5px solid #fff0;
 }
 
 .moveable-line.moveable-n {
-    border-bottom: 5px solid #fff0;
+  border-bottom: 5px solid #fff0;
 }
 
 .moveable-line.moveable-s {
-    border-bottom: 5px solid #fff0;
+  border-bottom: 5px solid #fff0;
 }
 
-.moveable-control[data-rotation="0"], .moveable-control[data-rotation="90"],
-.moveable-around-control[data-rotation="0"], .moveable-around-control[data-rotation="90"] {
-    opacity: 0;
-    width: 0px !important;
-    height: 0px !important;
+.moveable-control[data-rotation="0"],
+.moveable-control[data-rotation="90"],
+.moveable-around-control[data-rotation="0"],
+.moveable-around-control[data-rotation="90"] {
+  opacity: 0;
+  width: 0px !important;
+  height: 0px !important;
 }
 
-
 .moveable-control {
-    width: 8px !important;
-    height: 8px !important;
-    border: 1px solid var(--moveable-color) !important;
-    background: #fff !important;
-    margin-top: -4px !important;
-    margin-left: -4px !important;
+  width: 8px !important;
+  height: 8px !important;
+  border: 1px solid var(--moveable-color) !important;
+  background: #fff !important;
+  margin-top: -4px !important;
+  margin-left: -4px !important;
 }
 
-.moveable-around-control{
-    height: 10px !important;
-    width: 10px !important;
+.moveable-around-control {
+  height: 10px !important;
+  width: 10px !important;
 }
 
 .moveable-around-control[data-direction*="nw"] {
-    left: -11px;
-    top: -11px;
+  left: -11px;
+  top: -11px;
 }
 
 .moveable-around-control[data-direction*="ne"] {
-    top: -11px;
+  top: -11px;
 }
 
 .moveable-around-control[data-direction*="ne"] {
-    top: -11px;
+  top: -11px;
 }
 
 .moveable-around-control[data-direction*="sw"] {
-    left: -11px;
-    top: -1px;
+  left: -11px;
+  top: -1px;
 }
 
 .moveable-draggable-dragging {
-    opacity: 1 !important;
+  opacity: 1 !important;
 }
 
 [data-off-screen="true"] {
-    display: none;
+  display: none;
 }
 
 .moveable-guideline {
-    background: #97AEFC !important;
-    opacity: 0.8;
-    z-index: 9999;
+  background: #97aefc !important;
+  opacity: 0.8;
+  z-index: 9999;
 }
 
 .moveable-guideline.moveable-horizontal {
-    height: 1px !important;
-    width: 100% !important;
-    background: #97AEFC !important;
-    left: 0 !important;
-
+  height: 1px !important;
+  width: 100% !important;
+  background: #97aefc !important;
+  left: 0 !important;
 }
 
 .moveable-guideline.moveable-vertical {
-    width: 1px !important;
-    height: 100% !important;
-    background: #97AEFC !important;
-    top: 0 !important;
-
+  width: 1px !important;
+  height: 100% !important;
+  background: #97aefc !important;
+  top: 0 !important;
 }
 
 .moveable-guideline-group {
-    z-index: 9999;
+  z-index: 9999;
 }
 
 .dragging-component-canvas {
-    outline: 1px solid var(--border-accent-strong) !important;
-    outline-offset: 0px; /* Creates space between element and outline */
-    z-index: 999 !important;
+  outline: 1px solid var(--border-accent-strong) !important;
+  outline-offset: 0px;
+  /* Creates space between element and outline */
+  z-index: 999 !important;
 }
 
-.non-dragging-component { 
-    outline: 1px dotted var(--border-accent-weak) !important;
-    outline-offset: 0px; /* Creates space between element and outline */
-    z-index: 999 !important;
+.non-dragging-component {
+  outline: 1px dotted var(--border-accent-weak) !important;
+  outline-offset: 0px;
+  /* Creates space between element and outline */
+  z-index: 999 !important;
 }
-
-
-
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index d92efe63fb..dbe9ed941d 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -24,10 +24,13 @@ import {
   handleActivateNonDraggingComponents,
   computeScrollDelta,
   computeScrollDeltaOnDrag,
+  getDraggingWidgetWidth,
+  positionDragGhostWidget,
 } from './gridUtils';
 import { dragContextBuilder, getAdjustedDropPosition } from './helpers/dragEnd';
 import useStore from '@/AppBuilder/_stores/store';
 import './Grid.css';
+import { useGroupedTargetsScrollHandler } from './hooks/useGroupedTargetsScrollHandler';
 import { DROPPABLE_PARENTS, NO_OF_GRIDS, SUBCONTAINER_WIDGETS } from '../appCanvasConstants';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 const CANVAS_BOUNDS = { left: 0, top: 0, right: 0, position: 'css' };
@@ -35,6 +38,12 @@ const RESIZABLE_CONFIG = {
   edge: ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'],
   renderDirections: ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'],
 };
+
+const HORIZONTAL_CONFIG = {
+  edge: ['e', 'w'],
+  renderDirections: ['w', 'e'],
+};
+
 export const GRID_HEIGHT = 10;
 
 export default function Grid({ gridWidth, currentLayout }) {
@@ -49,8 +58,9 @@ export default function Grid({ gridWidth, currentLayout }) {
   const setSelectedComponents = useStore((state) => state.setSelectedComponents, shallow);
   const getComponentTypeFromId = useStore((state) => state.getComponentTypeFromId, shallow);
   const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
+  const temporaryHeight = useStore((state) => state.temporaryLayouts?.[selectedComponents?.[0]]?.height, shallow);
   const isGroupHandleHoverd = useIsGroupHandleHoverd();
-
+  const checkHoveredComponentDynamicHeight = useStore((state) => state.checkHoveredComponentDynamicHeight, shallow);
   const openModalWidgetId = useOpenModalWidgetId();
   const moveableRef = useRef(null);
   const triggerCanvasUpdater = useStore((state) => state.triggerCanvasUpdater, shallow);
@@ -60,9 +70,10 @@ export default function Grid({ gridWidth, currentLayout }) {
   const canvasWidth = NO_OF_GRIDS * gridWidth;
   const getHoveredComponentForGrid = useStore((state) => state.getHoveredComponentForGrid, shallow);
   const getResolvedComponent = useStore((state) => state.getResolvedComponent, shallow);
+  const getTemporaryLayouts = useStore((state) => state.getTemporaryLayouts, shallow);
   const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight, shallow);
   const [canvasBounds, setCanvasBounds] = useState(CANVAS_BOUNDS);
-  const draggingComponentId = useStore((state) => state.draggingComponentId, shallow);
+  const draggingComponentId = useGridStore((state) => state.draggingComponentId, shallow);
   const resizingComponentId = useGridStore((state) => state.resizingComponentId, shallow);
   const [dragParentId, setDragParentId] = useState(null);
   const [elementGuidelines, setElementGuidelines] = useState([]);
@@ -73,6 +84,8 @@ export default function Grid({ gridWidth, currentLayout }) {
   const checkIfAnyWidgetVisibilityChanged = useStore((state) => state.checkIfAnyWidgetVisibilityChanged(), shallow);
   const getExposedValueOfComponent = useStore((state) => state.getExposedValueOfComponent, shallow);
   const setReorderContainerChildren = useStore((state) => state.setReorderContainerChildren, shallow);
+  const [isVerticalExpansionRestricted, setIsVerticalExpansionRestricted] = useState(false);
+  const toggleRightSidebar = useStore((state) => state.toggleRightSidebar, shallow);
 
   useEffect(() => {
     const selectedSet = new Set(selectedComponents);
@@ -121,6 +134,7 @@ export default function Grid({ gridWidth, currentLayout }) {
             top: widget?.layouts?.[currentLayout]?.top,
             width: widget?.layouts?.[currentLayout]?.width,
             parent: widget?.component?.parent,
+            componentType: widget?.component?.component,
             component: widget?.component,
           };
         })
@@ -143,24 +157,26 @@ export default function Grid({ gridWidth, currentLayout }) {
 
   const handleResizeStop = useCallback(
     (boxList) => {
-      const transformedBoxes = boxList.reduce((acc, box) => {
-        acc[box.id] = box;
-        return acc;
-      }, {});
+      const temporaryLayouts = getTemporaryLayouts();
+
       boxList.forEach(({ id, height, width, x, y, gw }) => {
         const _canvasWidth = gw ? gw * NO_OF_GRIDS : canvasWidth;
         let newWidth = Math.round((width * NO_OF_GRIDS) / _canvasWidth);
-        y = Math.round(y / GRID_HEIGHT) * GRID_HEIGHT;
+
+        // Consider temporary layout position if it exists
+        const temporaryLayout = temporaryLayouts[id];
+        y = temporaryLayout?.top ?? Math.round(y / GRID_HEIGHT) * GRID_HEIGHT;
+
         gw = gw ? gw : gridWidth;
 
-        const parent = transformedBoxes[id]?.component?.parent;
+        const parent = boxList.find((box) => box.id === id)?.component?.parent;
         if (y < 0) {
           y = 0;
         }
         if (parent) {
           const parentElem = document.getElementById(`canvas-${parent}`);
           const parentId = parent.includes('-') ? parent?.split('-').slice(0, -1).join('-') : parent;
-          const componentType = transformedBoxes.find((box) => box.id === parentId)?.component.component;
+          const componentType = boxList.find((box) => box.id === parentId)?.component.component;
           var parentHeight = parentElem?.clientHeight || height;
           if (height > parentHeight && ['Tabs', 'Listview'].includes(componentType)) {
             height = parentHeight;
@@ -253,10 +269,16 @@ export default function Grid({ gridWidth, currentLayout }) {
       }
       e.props.target.classList.add('hovered');
       e.controlBox.classList.add('moveable-control-box-d-block');
+      const isHorizontallyExpandable = checkHoveredComponentDynamicHeight();
+      if (isHorizontallyExpandable) {
+        e.controlBox.classList.add('moveable-horizontal-only');
+      }
+      setIsVerticalExpansionRestricted(!!isHorizontallyExpandable);
     },
     mouseLeave(e) {
       e.props.target.classList.remove('hovered');
       e.controlBox.classList.remove('moveable-control-box-d-block');
+      e.controlBox.classList.remove('moveable-horizonta-only');
     },
   };
 
@@ -321,6 +343,11 @@ export default function Grid({ gridWidth, currentLayout }) {
 
   const groupedTargets = [...findHighestLevelofSelection().map((component) => '.ele-' + component.id)];
 
+  useEffect(() => {
+    if (moveableRef.current) {
+      moveableRef.current.updateTarget();
+    }
+  }, [temporaryHeight]);
   useEffect(() => {
     reloadGrid();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -580,6 +607,8 @@ export default function Grid({ gridWidth, currentLayout }) {
     }
   }, [draggingComponentId, resizingComponentId, isGroupDragging, selectedComponents]);
 
+  useGroupedTargetsScrollHandler(groupedTargets, boxList, moveableRef);
+
   if (mode !== 'edit') return null;
 
   return (
@@ -598,23 +627,34 @@ export default function Grid({ gridWidth, currentLayout }) {
         origin={false}
         individualGroupable={groupedTargets.length <= 1}
         draggable={!shouldFreeze && mode !== 'view'}
-        resizable={!shouldFreeze ? RESIZABLE_CONFIG : false && mode !== 'view'}
+        resizable={
+          !shouldFreeze
+            ? isVerticalExpansionRestricted
+              ? HORIZONTAL_CONFIG
+              : RESIZABLE_CONFIG
+            : false && mode !== 'view'
+        }
         keepRatio={false}
         individualGroupableProps={individualGroupableProps}
         onResize={(e) => {
+          const temporaryLayouts = getTemporaryLayouts();
           if (resizingComponentId !== e.target.id) {
             useGridStore.getState().actions.setResizingComponentId(e.target.id);
             showGridLines();
           }
 
           const currentWidget = boxList.find(({ id }) => id === e.target.id);
+
           let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
+
+          // Show grid during resize
           if (currentWidget.component?.parent) {
             document.getElementById('canvas-' + currentWidget.component?.parent)?.classList.add('show-grid');
             setDragParentId(currentWidget.component?.parent);
           } else {
             document.getElementById('real-canvas').classList.add('show-grid');
           }
+
           handleActivateTargets(currentWidget.component?.parent);
           const currentWidth = currentWidget.width * _gridWidth;
           const diffWidth = e.width - currentWidth;
@@ -622,20 +662,30 @@ export default function Grid({ gridWidth, currentLayout }) {
           const isLeftChanged = e.direction[0] === -1;
           const isTopChanged = e.direction[1] === -1;
 
+          // Calculate positions considering temporary layouts'
           let transformX = currentWidget.left * _gridWidth;
-          let transformY = currentWidget.top;
+          let transformY = temporaryLayouts[currentWidget.id]?.top ?? currentWidget.top;
+
           if (isLeftChanged) {
-            transformX = currentWidget.left * _gridWidth - diffWidth;
+            // Left resize
+            transformX = transformX - diffWidth;
           }
           if (isTopChanged) {
-            transformY = currentWidget.top - diffHeight;
+            // Top resize
+            transformY = transformY - diffHeight;
           }
 
+          // Apply container bounds
           const elemContainer = e.target.closest('.real-canvas');
           const containerHeight = elemContainer.clientHeight;
           const containerWidth = elemContainer.clientWidth;
           const maxY = containerHeight - e.target.clientHeight;
           const maxLeft = containerWidth - e.target.clientWidth;
+
+          transformY = Math.max(0, Math.min(transformY, maxY));
+          transformX = Math.max(0, Math.min(transformX, maxLeft));
+
+          // Update element style
           const maxWidthHit = transformX < 0 || transformX >= maxLeft;
           const maxHeightHit = transformY < 0 || transformY >= maxY;
           if (!maxWidthHit || e.width < e.target.clientWidth) {
@@ -645,14 +695,8 @@ export default function Grid({ gridWidth, currentLayout }) {
             e.target.style.height = `${e.height}px`;
           }
           e.target.style.transform = `translate(${transformX}px, ${transformY}px)`;
-          // Postion ghost element exactly with respect to resizing element
-          if (document.getElementById('resize-ghost-widget')) {
-            document.getElementById(
-              'resize-ghost-widget'
-            ).style.transform = `translate(${transformX}px, ${transformY}px)`;
-            document.getElementById('resize-ghost-widget').style.width = `${e.target.clientWidth}px`;
-            document.getElementById('resize-ghost-widget').style.height = `${e.target.clientHeight}px`;
-          }
+          if (e.width > 0) e.target.style.width = `${e.width}px`;
+          if (e.height > 0) e.target.style.height = `${e.height}px`;
         }}
         onResizeStart={(e) => {
           if (
@@ -827,6 +871,7 @@ export default function Grid({ gridWidth, currentLayout }) {
           if (getHoveredComponentForGrid() !== e.target.id) {
             return false;
           }
+          toggleRightSidebar();
           newDragParentId.current = boxList.find((box) => box.id === e.target.id)?.parent;
           e?.moveable?.controlBox?.removeAttribute('data-off-screen');
 
@@ -949,6 +994,9 @@ export default function Grid({ gridWidth, currentLayout }) {
           let left = Math.round(e.translate[0] / _gridWidth) * _gridWidth;
           let top = Math.round(e.translate[1] / GRID_HEIGHT) * GRID_HEIGHT;
 
+          const draggingWidgetWidth = getDraggingWidgetWidth(_dragParentId, e.target.clientWidth);
+          e.target.style.width = `${draggingWidgetWidth}px`;
+
           // This logic is to handle the case when the dragged element is over a new canvas
           if (_dragParentId !== currentParentId) {
             left = e.translate[0];
@@ -1014,6 +1062,7 @@ export default function Grid({ gridWidth, currentLayout }) {
             } else if (parentComponent?.component?.component === 'Modal') {
               // Never update parentId for Modal
               newParentId = parentComponent?.id;
+              e.target.style.width = `${e.target.clientWidth}px`;
             }
 
             if (newParentId !== prevDragParentId.current) {
@@ -1034,12 +1083,7 @@ export default function Grid({ gridWidth, currentLayout }) {
             `translate: ${e.translate[0]} | Round: ${Math.round(e.translate[0] / gridWidth) * gridWidth} | ${gridWidth}`
           );
 
-          // Postion ghost element exactly as same at dragged element
-          if (document.getElementById(`moveable-drag-ghost`)) {
-            document.getElementById(`moveable-drag-ghost`).style.transform = `translate(${left}px, ${top}px)`;
-            document.getElementById(`moveable-drag-ghost`).style.width = `${e.target.clientWidth}px`;
-            document.getElementById(`moveable-drag-ghost`).style.height = `${e.target.clientHeight}px`;
-          }
+          positionDragGhostWidget(e.target);
         }}
         onDragGroup={(ev) => {
           const { events } = ev;
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
index f36f921be9..07a56a3c4c 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
@@ -2,6 +2,8 @@ import { useGridStore } from '@/_stores/gridStore';
 import { isEmpty } from 'lodash';
 import useStore from '@/AppBuilder/_stores/store';
 import { getTabId, getSubContainerIdWithSlots } from '../appCanvasUtils';
+import { NO_OF_GRIDS } from '../appCanvasConstants';
+
 export function correctBounds(layout, bounds) {
   layout = scaleLayouts(layout);
   const collidesWith = [];
@@ -517,3 +519,35 @@ export const computeScrollDelta = ({ source }) => {
 };
 
 export const computeScrollDeltaOnDrag = computeScrollDelta;
+
+export const getDraggingWidgetWidth = (canvasParentId, widgetWidth) => {
+  const targetCanvasWidth =
+    document.getElementById(`canvas-${canvasParentId}`)?.offsetWidth ||
+    document.getElementById('real-canvas')?.offsetWidth;
+  const gridUnitWidth = targetCanvasWidth / NO_OF_GRIDS;
+  const gridUnits = Math.round(widgetWidth / gridUnitWidth);
+  const draggingWidgetWidth = gridUnits * gridUnitWidth;
+  return draggingWidgetWidth;
+};
+
+export const positionDragGhostWidget = (draggedElement) => {
+  const ghostElement = document.getElementById('moveable-drag-ghost');
+
+  if (!ghostElement || !draggedElement) return;
+
+  const mainCanvas = document.getElementById('real-canvas');
+  if (!mainCanvas) return;
+
+  const mainCanvasRect = mainCanvas.getBoundingClientRect();
+  const draggedRect = draggedElement.getBoundingClientRect();
+
+  // Calculate position relative to main canvas
+  const relativeLeft = draggedRect.left - mainCanvasRect.left;
+  const relativeTop = draggedRect.top - mainCanvasRect.top;
+
+  // Apply the position
+  ghostElement.style.left = `${relativeLeft}px`;
+  ghostElement.style.top = `${relativeTop}px`;
+  ghostElement.style.width = `${draggedRect.width}px`;
+  ghostElement.style.height = `${draggedRect.height}px`;
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/hooks/useGroupedTargetsScrollHandler.js b/frontend/src/AppBuilder/AppCanvas/Grid/hooks/useGroupedTargetsScrollHandler.js
new file mode 100644
index 0000000000..180bb8faa6
--- /dev/null
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/hooks/useGroupedTargetsScrollHandler.js
@@ -0,0 +1,49 @@
+import { useEffect, useMemo, useCallback, useRef } from 'react';
+
+export const useGroupedTargetsScrollHandler = (groupedTargets, boxList, moveableRef) => {
+  const scrollRAF = useRef(null); // // Stores the requestAnimationFrame ID
+
+  const parentCanvasId = useMemo(() => {
+    if (!groupedTargets?.[0] || groupedTargets.length === 0) return null;
+
+    const targetId = groupedTargets[0].replace('.ele-', '');
+    const targetBox = boxList.find((box) => box.id === targetId);
+    return targetBox?.parent || null;
+  }, [groupedTargets, boxList]);
+
+  const containerId = useMemo(() => {
+    return parentCanvasId ? `canvas-${parentCanvasId}` : null;
+  }, [parentCanvasId]);
+
+  const scrollHandler = useCallback(() => {
+    if (!scrollRAF.current) {
+      scrollRAF.current = requestAnimationFrame(() => {
+        if (groupedTargets.length > 1 && moveableRef.current) {
+          moveableRef.current.updateRect();
+        }
+        scrollRAF.current = null;
+      });
+    }
+  }, [groupedTargets.length, moveableRef]);
+
+  useEffect(() => {
+    // Early return if no container ID or not enough grouped targets
+    if (!containerId || groupedTargets.length <= 1) {
+      return;
+    }
+
+    const canvasContainer = document.getElementById(containerId);
+    if (!canvasContainer) {
+      return;
+    }
+
+    canvasContainer.addEventListener('scroll', scrollHandler, { passive: true });
+
+    return () => {
+      canvasContainer.removeEventListener('scroll', scrollHandler);
+      if (scrollRAF.current) {
+        cancelAnimationFrame(scrollRAF.current);
+      }
+    };
+  }, [containerId, groupedTargets.length, scrollHandler]);
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx b/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
index 018383c61f..cf2c3471ad 100644
--- a/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
@@ -136,7 +136,7 @@ export const HotkeyProvider = ({ children, mode, currentLayout, canvasMaxWidth }
       style={{
         width: currentLayout == 'mobile' ? '450px' : '100%',
         maxWidth: canvasMaxWidth,
-        margin: '0 auto',
+        // margin: '0 auto',
         transform: 'translateZ(0)',
       }}
     >
diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
index b893c80552..0409d22d77 100644
--- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
@@ -35,6 +35,7 @@ const SHOULD_ADD_BOX_SHADOW_AND_VISIBILITY = [
   'VerticalDivider',
   'Link',
   'Form',
+  'FilePicker',
 ];
 
 const RenderWidget = ({
@@ -51,6 +52,8 @@ const RenderWidget = ({
   const { moduleId } = useModuleContext();
   const componentDefinition = useStore((state) => state.getComponentDefinition(id, moduleId), shallow);
   const getDefaultStyles = useStore((state) => state.debugger.getDefaultStyles, shallow);
+  const adjustComponentPositions = useStore((state) => state.adjustComponentPositions, shallow);
+  const componentCount = useStore((state) => state.getContainerChildrenMapping(id)?.length || 0, shallow);
   const component = componentDefinition?.component;
   const componentName = component?.name;
   const [key, setKey] = useState(Math.random());
@@ -152,6 +155,9 @@ const RenderWidget = ({
   }, []);
   if (!componentDefinition?.component) return null;
 
+  const disabledState = resolvedProperties?.disabledState;
+  const loadingState = resolvedProperties?.loadingState;
+
   return (
     <ErrorBoundary>
       <OverlayTrigger
@@ -185,7 +191,9 @@ const RenderWidget = ({
             padding: resolvedStyles?.padding == 'none' ? '0px' : `${BOX_PADDING}px`, //chart and image has a padding property other than container padding
           }}
           role={'Box'}
-          className={inCanvas ? `_tooljet-${component?.component} _tooljet-${component?.name}` : ''} //required for custom CSS
+          className={`canvas-component ${
+            inCanvas ? `_tooljet-${component?.component} _tooljet-${component?.name}` : ''
+          } ${disabledState || loadingState ? 'disabled' : ''}`} //required for custom CSS
         >
           <ComponentToRender
             id={id}
@@ -202,6 +210,8 @@ const RenderWidget = ({
             onComponentClick={onComponentClick}
             darkMode={darkMode}
             componentName={componentName}
+            adjustComponentPositions={adjustComponentPositions}
+            componentCount={componentCount}
             dataCy={`draggable-widget-${componentName}`}
           />
         </div>
diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
index 9f91c2d2c5..057781f8ec 100644
--- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
@@ -32,6 +32,7 @@ const WidgetWrapper = memo(
       (state) => state.getComponentDefinition(id, moduleId)?.layouts?.[currentLayout],
       shallow
     );
+    const temporaryLayouts = useStore((state) => state.temporaryLayouts?.[id], shallow);
     const isWidgetActive = useStore((state) => state.selectedComponents.find((sc) => sc === id) && !readOnly, shallow);
     const isDragging = useStore((state) => state.draggingComponentId === id);
     const isResizing = useGridStore((state) => state.resizingComponentId === id);
@@ -106,8 +107,8 @@ const WidgetWrapper = memo(
           {mode == 'edit' && (
             <ConfigHandle
               id={id}
-              widgetTop={newLayoutData.top}
-              widgetHeight={newLayoutData.height}
+              widgetTop={temporaryLayouts?.top ?? layoutData.top}
+              widgetHeight={temporaryLayouts?.height ?? layoutData.height}
               showHandle={isWidgetActive}
               componentType={componentType}
               visibility={visibility}
@@ -128,7 +129,6 @@ const WidgetWrapper = memo(
             onOptionsChange={onOptionsChange}
           />
         </div>
-        <DragGhostWidget isDragging={isDragging} />
         <ResizeGhostWidget isResizing={isResizing} />
       </>
     );
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvas.scss b/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
index 16b5780756..66e5d622dd 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvas.scss
@@ -2,6 +2,12 @@
     &:focus-visible{
         outline: none;
     }
+
+    &.page-container {
+        &.position-top {
+            flex-direction: column;
+        }
+    }
 }
 
 .modal-backdrop {
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
index 955880a173..9553504441 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
@@ -16,6 +16,8 @@ export const APP_HEADER_HEIGHT = 47;
 
 export const LEFT_SIDEBAR_WIDTH = 348; // exclusive of border
 
+export const RIGHT_SIDEBAR_WIDTH = 299;
+
 export const SUBCONTAINER_WIDGETS = ['Container', 'Tabs', 'Listview', 'Kanban', 'Form'];
 
 export const CONTAINER_FORM_CANVAS_PADDING = 7;
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index be875e6f9c..6b4eb6536b 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -800,3 +800,9 @@ export const getSubContainerWidthAfterPadding = (canvasWidth, componentType, com
   }
   return canvasWidth - padding;
 };
+
+export const addDefaultButtonIdToForm = (formComponent, defaultChildComponents) => {
+  const { id } = defaultChildComponents[defaultChildComponents.length - 1]; // Assuming the last child is the button
+  formComponent.component.definition.properties.buttonToSubmit = { value: id };
+  return formComponent;
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/useAppCanvasMaxWidth.jsx b/frontend/src/AppBuilder/AppCanvas/useAppCanvasMaxWidth.jsx
index e91bbb92e6..8d1308e53e 100644
--- a/frontend/src/AppBuilder/AppCanvas/useAppCanvasMaxWidth.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/useAppCanvasMaxWidth.jsx
@@ -7,12 +7,15 @@ import debounce from 'lodash/debounce';
 const useAppCanvasMaxWidth = ({ mode }) => {
   const canvasMaxWidth = useStore((state) => state.globalSettings.canvasMaxWidth, shallow);
   const canvasMaxWidthType = useStore((state) => state.globalSettings.canvasMaxWidthType, shallow);
+  const isRightSidebarOpen = useStore((state) => state.isRightSidebarOpen, shallow);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned, shallow);
   let [maxWidth, setMaxWidth] = useState(0);
 
   const getEditorCanvasWidth = useCallback(() => {
     let _maxWidth;
     const windowWidth = window.innerWidth;
-    const widthInPx = windowWidth - (CANVAS_WIDTHS.leftSideBarWidth + CANVAS_WIDTHS.rightSideBarWidth);
+    const widthInPx = windowWidth - CANVAS_WIDTHS.leftSideBarWidth;
+
     if (canvasMaxWidthType === 'px') {
       _maxWidth = +canvasMaxWidth;
     }
@@ -51,7 +54,7 @@ const useAppCanvasMaxWidth = ({ mode }) => {
         debouncedGetCanvasWidth.cancel(); // Cancel any pending debounced calls
       }
     };
-  }, [debouncedGetCanvasWidth, getEditorCanvasWidth, getViewerWidth, mode]);
+  }, [debouncedGetCanvasWidth, getEditorCanvasWidth, getViewerWidth, mode, isRightSidebarOpen, isRightSidebarPinned]);
 
   return maxWidth;
 };
diff --git a/frontend/src/AppBuilder/AppCanvas/userRightSidebarMargin.jsx b/frontend/src/AppBuilder/AppCanvas/userRightSidebarMargin.jsx
new file mode 100644
index 0000000000..9c64274034
--- /dev/null
+++ b/frontend/src/AppBuilder/AppCanvas/userRightSidebarMargin.jsx
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { isEmpty } from 'lodash';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { RIGHT_SIDEBAR_WIDTH } from './appCanvasConstants';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+
+const useRightSidebarMargin = (canvasContainerRef) => {
+  const { moduleId } = useModuleContext();
+  const [editorMarginRight, setEditorMarginRight] = useState(0);
+  const isRightSidebarOpen = useStore((state) => state.isRightSidebarOpen, shallow);
+  const mode = useStore((state) => state.modeStore.modules[moduleId].currentMode, shallow);
+
+  useEffect(() => {
+    if (mode !== 'view') setEditorMarginRight(isRightSidebarOpen ? RIGHT_SIDEBAR_WIDTH : 0);
+    else setEditorMarginRight(0);
+  }, [isRightSidebarOpen, mode]);
+
+  useEffect(() => {
+    if (!isEmpty(canvasContainerRef?.current)) {
+      canvasContainerRef.current.scrollRight += editorMarginRight;
+    }
+  }, [editorMarginRight, canvasContainerRef]);
+
+  return editorMarginRight;
+};
+
+export default useRightSidebarMargin;
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/DropdownMenu.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/DropdownMenu.jsx
new file mode 100644
index 0000000000..5abafcc49c
--- /dev/null
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/DropdownMenu.jsx
@@ -0,0 +1,179 @@
+import React, { useMemo, useState, useRef, useEffect } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import DataSourceIcon from '@/AppBuilder/QueryManager/Components/DataSourceIcon';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { LabeledDivider } from '@/AppBuilder/RightSideBar/Inspector/Components/Form/_components';
+import cx from 'classnames';
+import './styles.scss';
+
+export const DropdownMenu = (props) => {
+  const { value, onChange, forceCodeBox } = props;
+
+  const dataQueries = useStore((state) => state.dataQuery.queries.modules.canvas, shallow);
+
+  // Simple emoji/text icons instead of lucide icons
+  const sourceOptions = useMemo(
+    () => [
+      { id: 'rawJson', label: 'Raw JSON', icon: <SolidIcon name="curlybraces" /> },
+      { id: 'jsonSchema', label: 'JSON schema', icon: <SolidIcon name="curlybraces" /> },
+      // { id: 'json-schema', label: 'JSON schema' },
+    ],
+    []
+  );
+
+  const queryOptions = useMemo(() => {
+    return dataQueries.map((query) => ({
+      id: query.id,
+      value: `{{queries.${query.id}.data}}`,
+      label: query.name,
+      icon: <DataSourceIcon source={query} height={16} />,
+      type: 'query',
+    }));
+  }, [dataQueries]);
+
+  const getSelectedSource = (value) => {
+    if (!value) return null;
+    const selectedItem = sourceOptions.find((option) => option.id === value);
+    if (selectedItem) {
+      return selectedItem;
+    }
+    if (!value.startsWith('{{queries.')) {
+      return null;
+    }
+    const queryName = value.split('.')[1]?.replace('}}', '');
+    const selectedQuery = queryOptions.find((option) => option.label === queryName);
+    if (selectedQuery) {
+      return selectedQuery;
+    }
+    return null;
+  };
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedSource, setSelectedSource] = useState(() => getSelectedSource(value));
+  const dropdownRef = useRef(null);
+
+  // Handle outside clicks
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const selectSource = (source) => {
+    setSelectedSource(source);
+    setIsOpen(false);
+    if (source.id === 'rawJson' || source.id === 'jsonSchema') {
+      onChange(source.id);
+    } else if (source.type === 'query') {
+      onChange(source.value);
+      forceCodeBox();
+    }
+  };
+
+  const renderCheckIcon = ({ id }) => {
+    if (value === id) {
+      return <SolidIcon name="check" width="16" height="16" fill="#4368E3" viewBox="0 0 16 16" />;
+    } else {
+      return <div style={{ width: '16px', height: '16px' }}></div>;
+    }
+  };
+
+  return (
+    <div className="tw-w-full tw-max-w-md dropdown-menu-inspector" ref={dropdownRef}>
+      <div className="tw-relative">
+        {/* Dropdown trigger div */}
+        <button
+          onClick={toggleDropdown}
+          className={cx(
+            'tw-flex tw-items-center tw-justify-between tw-w-full tw-px-4 tw-py-2 tw-text-left tw-bg-white dropdown-menu-trigger',
+            {
+              'is-open': isOpen,
+            }
+          )}
+        >
+          <div className="tw-flex tw-items-center">
+            {selectedSource ? (
+              <>
+                <span className="tw-mr-2">{selectedSource.icon}</span>
+                <span>{selectedSource.label}</span>
+              </>
+            ) : (
+              <>
+                <span className="tw-mr-2 tw-text-gray-400">
+                  <SolidIcon name="code" width="16" height="16" fill="#CCD1D5" />
+                </span>
+                <span className="tw-text-gray-400 dropdown-menu-placeholder">Select a source</span>
+              </>
+            )}
+          </div>
+          <span className="tw-ml-2">
+            {isOpen ? (
+              <SolidIcon name="TriangleDownCenter" width={16} />
+            ) : (
+              <SolidIcon name="TriangleUpCenter" width={16} />
+            )}
+          </span>
+        </button>
+
+        {/* Dropdown menu */}
+        {isOpen && (
+          <div className="tw-absolute tw-z-10 tw-w-full tw-mt-1 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-p-2">
+            {/* Source options section */}
+            <div className="tw-py-1 dropdown-menu-items">
+              {sourceOptions.map((option) => (
+                <div
+                  key={option.id}
+                  onClick={() => selectSource(option)}
+                  className="tw-flex tw-items-center tw-w-full tw-px-4 tw-py-2 tw-text-left tw-hover:bg-gray-100"
+                >
+                  {renderCheckIcon(option)}
+                  <span className="icon-image">{option.icon}</span>
+                  <span>{option.label}</span>
+                </div>
+              ))}
+            </div>
+
+            {dataQueries.length > 0 && (
+              <>
+                {/* Divider with "From query" text */}
+                <LabeledDivider label="From query" />
+
+                {/* Query options section */}
+                <div className="tw-py-1 dropdown-menu-items">
+                  {queryOptions.map((option) => (
+                    <div
+                      key={option.id}
+                      onClick={() => selectSource(option)}
+                      className="tw-flex tw-items-center tw-w-full tw-px-4 tw-py-2 tw-text-left tw-hover:bg-gray-100"
+                    >
+                      {renderCheckIcon(option)}
+                      <span className="icon-image">{option.icon}</span>
+                      <span>{option.label}</span>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/index.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/index.jsx
new file mode 100644
index 0000000000..6c59709ee5
--- /dev/null
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/index.jsx
@@ -0,0 +1 @@
+export { DropdownMenu as default } from './DropdownMenu';
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/styles.scss b/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/styles.scss
new file mode 100644
index 0000000000..290b727e4d
--- /dev/null
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/DropdownMenu/styles.scss
@@ -0,0 +1,52 @@
+.dropdown-menu-inspector {
+    margin-top: 2px;
+    font-size: 12px;
+
+    .dropdown-menu-trigger {
+        height: 34px;
+        padding: 7px 12px;
+        align-items: center;
+        flex-shrink: 0;
+        align-self: stretch;
+        border-radius: 6px;
+        border: 1px solid var(--border-default, #CCD1D5);
+
+        &.is-open {
+            border: 2px solid var(--interactive-focus-outline, #4368E3);
+        }
+    }
+
+    .dropdown-menu-placeholder {
+        color: var(--text-placeholder, #6A727C);
+    }
+
+    .dropdown-menu-items {
+        color: var(--text-default, #1B1F24);
+
+        >div {
+            border-radius: 6px;
+
+            &:hover {
+                cursor: pointer;
+                background-color: var(--slate4);
+            }
+        }
+    }
+
+    .icon-image {
+        margin: 0px 6px;
+        width: 16px;
+        height: 16px;
+    }
+
+    .custom-line {
+        border-color: var(--border-default, #CCD1D5);
+        border-top: 0px
+    }
+
+    .separator-text {
+        color: var(--text-placeholder, #6A727C);
+        background-color: white;
+        padding: 0 6px;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/Icon.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/Icon.jsx
index 70fd50f516..62c841df67 100644
--- a/frontend/src/AppBuilder/CodeBuilder/Elements/Icon.jsx
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/Icon.jsx
@@ -7,7 +7,14 @@ import * as Icons from '@tabler/icons-react';
 import { VirtuosoGrid } from 'react-virtuoso';
 import { Visibility } from './Visibility';
 
-export const Icon = ({ value, onChange, onVisibilityChange, styleDefinition, component }) => {
+export const Icon = ({
+  value,
+  onChange,
+  onVisibilityChange,
+  styleDefinition,
+  component,
+  isVisibilityEnabled = true,
+}) => {
   const [searchText, setSearchText] = useState('');
   const [showPopOver, setPopOverVisibility] = useState(false);
   const iconList = useRef(Object.keys(Icons));
@@ -111,13 +118,15 @@ export const Icon = ({ value, onChange, onVisibilityChange, styleDefinition, com
                   >
                     {String(value)}
                   </div>
-                  <Visibility
-                    value={value}
-                    onChange={onChange}
-                    onVisibilityChange={onVisibilityChange}
-                    component={component}
-                    styleDefinition={styleDefinition}
-                  />
+                  {isVisibilityEnabled && (
+                    <Visibility
+                      value={value}
+                      onChange={onChange}
+                      onVisibilityChange={onVisibilityChange}
+                      component={component}
+                      styleDefinition={styleDefinition}
+                    />
+                  )}
                 </div>
               </OverlayTrigger>
             </div>
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/Input.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/Input.jsx
index c019e16f1a..4e9eb82455 100644
--- a/frontend/src/AppBuilder/CodeBuilder/Elements/Input.jsx
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/Input.jsx
@@ -10,6 +10,7 @@ export const Input = ({ value, onChange, cyLabel, meta }) => {
         className="tj-input-element tj-text-xsm"
         value={value}
         placeholder=""
+        key={`${String(cyLabel)}-input`}
         id="labelId"
         onChange={(e) => {
           onChange(e.target.value);
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/Number.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/Number.jsx
index 7811562e12..1127dbaf93 100644
--- a/frontend/src/AppBuilder/CodeBuilder/Elements/Number.jsx
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/Number.jsx
@@ -1,13 +1,18 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 export const Number = ({ value, onChange, cyLabel }) => {
   const [number, setNumber] = useState(value ? value : 0);
 
+  useEffect(() => {
+    setNumber(value);
+  }, [value]);
+
   return (
     <>
       <div className="field tj-app-input" style={{ padding: '0.225rem 0.35rem' }}>
         <input
           className={'inspector-field-number'}
+          key={`${String(cyLabel)}-input`}
           type="number"
           onChange={(e) => {
             setNumber(e.target.value);
diff --git a/frontend/src/AppBuilder/CodeBuilder/TypeMapping.js b/frontend/src/AppBuilder/CodeBuilder/TypeMapping.js
index a249f52676..dac7203e6c 100644
--- a/frontend/src/AppBuilder/CodeBuilder/TypeMapping.js
+++ b/frontend/src/AppBuilder/CodeBuilder/TypeMapping.js
@@ -1,3 +1,5 @@
+import { drop } from 'lodash';
+
 export const TypeMapping = {
   text: 'Text',
   string: 'Text',
@@ -20,5 +22,6 @@ export const TypeMapping = {
   visibility: 'Visibility',
   numberInput: 'NumberInput',
   tableRowHeightInput: 'TableRowHeightInput',
+  dropdownMenu: 'DropdownMenu',
   query: 'Query',
 };
diff --git a/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx b/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx
index bd5d85ad98..2814fc188e 100644
--- a/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/CodeHinter.jsx
@@ -20,7 +20,15 @@ const CODE_EDITOR_TYPE = {
   tjdbHinter: TJDBCodeEditor,
 };
 
-const CodeHinter = ({ type = 'basic', initialValue, componentName, disabled, renderCopilot, ...restProps }) => {
+const CodeHinter = ({
+  type = 'basic',
+  initialValue,
+  componentName,
+  disabled,
+  renderCopilot,
+  setCodeEditorView,
+  ...restProps
+}) => {
   const darkMode = localStorage.getItem('darkMode') === 'true';
 
   const [isOpen, setIsOpen] = React.useState(false);
@@ -71,6 +79,7 @@ const CodeHinter = ({ type = 'basic', initialValue, componentName, disabled, ren
       }}
       componentName={componentName}
       disabled={disabled}
+      setCodeEditorView={setCodeEditorView}
       {...restProps}
     />
   );
diff --git a/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx b/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx
index 99d80a6050..4d4ff7513c 100644
--- a/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx
@@ -17,6 +17,7 @@ import { Visibility } from '../CodeBuilder/Elements/Visibility';
 import { NumberInput } from '../CodeBuilder/Elements/NumberInput';
 import { Datepicker } from '../CodeBuilder/Elements/Datepicker';
 import TableRowHeightInput from '../CodeBuilder/Elements/TableRowHeightInput';
+import DropdownMenu from '../CodeBuilder/Elements/DropdownMenu';
 import { TimePicker } from '../CodeBuilder/Elements/TimePicker';
 import { Query } from '../CodeBuilder/Elements/Query';
 import { ColorSwatches } from '@/modules/Appbuilder/components';
@@ -41,6 +42,7 @@ const AllElements = {
   TableRowHeightInput,
   Datepicker,
   TimePicker,
+  DropdownMenu,
   Query,
 };
 
diff --git a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
index 325c5c8ac5..ce3c310f24 100644
--- a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
@@ -54,11 +54,15 @@ const MultiLineCodeEditor = (props) => {
     readOnly = false,
     editable = true,
     renderCopilot,
+    setCodeEditorView,
   } = props;
   const replaceIdsWithName = useStore((state) => state.replaceIdsWithName, shallow);
   const wrapperRef = useRef(null);
   const getSuggestions = useStore((state) => state.getSuggestions, shallow);
-  const getServerSideGlobalResolveSuggestions = useStore((state) => state.getServerSideGlobalResolveSuggestions, shallow);
+  const getServerSideGlobalResolveSuggestions = useStore(
+    (state) => state.getServerSideGlobalResolveSuggestions,
+    shallow
+  );
 
   const isInsideQueryPane = !!document.querySelector('.code-hinter-wrapper')?.closest('.query-details');
   const isInsideQueryManager = useMemo(
@@ -72,13 +76,48 @@ const MultiLineCodeEditor = (props) => {
 
   const currentValueRef = useRef(initialValue);
 
-  const handleChange = (val) => (currentValueRef.current = val);
-
   const [editorView, setEditorView] = React.useState(null);
 
   const [isSearchPanelOpen, setIsSearchPanelOpen] = React.useState(false);
   const { queryPanelKeybindings } = useQueryPanelKeyHooks(onChange, currentValueRef, 'multiline');
 
+  // Add state for tracking autocomplete visibility
+  const [showSuggestions, setShowSuggestions] = React.useState(true);
+  const currentLineObserverRef = useRef(null);
+  const isObserverTriggeredRef = useRef(false);
+
+  // Intersection observer to detect when current line goes out of view
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.intersectionRatio < 1) {
+          setShowSuggestions(false);
+          isObserverTriggeredRef.current = true;
+          // Close autocomplete dropdown by dispatching a selection change
+          if (editorView) {
+            editorView.dispatch({
+              selection: editorView.state.selection,
+            });
+          }
+        } else {
+          setShowSuggestions(true);
+          isObserverTriggeredRef.current = false;
+        }
+      },
+      { root: null, threshold: [1] }
+    );
+
+    currentLineObserverRef.current = observer;
+
+    return () => {
+      if (currentLineObserverRef.current) {
+        currentLineObserverRef.current.disconnect();
+      }
+    };
+  }, [editorView]);
+
+  const handleChange = (val) => (currentValueRef.current = val);
+
   const handleOnBlur = () => {
     if (!delayOnChange) return onChange(currentValueRef.current);
     setTimeout(() => {
@@ -276,6 +315,21 @@ const MultiLineCodeEditor = (props) => {
     return initialValue;
   }, [initialValue, replaceIdsWithName]);
 
+  function updateCurrentLineObserver(editorView) {
+    if (!editorView || !editorView?.view?.dom) return;
+    const cursorPos = editorView.state.selection.main.head;
+    const line = editorView.state.doc.lineAt(cursorPos);
+    const lineNumber = line.number;
+    const cmLines = editorView.view.dom.querySelectorAll('.cm-line');
+    const currentLineDiv = cmLines[lineNumber - 1] || null;
+
+    // Update intersection observer to watch the current line
+    if (currentLineObserverRef.current && currentLineDiv && !isObserverTriggeredRef.current) {
+      currentLineObserverRef.current.disconnect();
+      currentLineObserverRef.current.observe(currentLineDiv);
+    }
+  }
+
   return (
     <div
       className={`code-hinter-wrapper position-relative ${isInsideQueryPane ? 'code-editor-query-panel' : ''}`}
@@ -349,8 +403,16 @@ const MultiLineCodeEditor = (props) => {
                 indentWithTab={false}
                 readOnly={readOnly}
                 editable={editable} //for transformations in query manager
-                onCreateEditor={(view) => setEditorView(view)}
-                onUpdate={(view) => setIsSearchPanelOpen(searchPanelOpen(view.state))}
+                onCreateEditor={(view) => {
+                  setEditorView(view);
+                  if (setCodeEditorView) {
+                    setCodeEditorView(view);
+                  }
+                }}
+                onUpdate={(view) => {
+                  setIsSearchPanelOpen(searchPanelOpen(view.state));
+                  updateCurrentLineObserver(view);
+                }}
               />
             </div>
             {showPreview && (
diff --git a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx
index a24c41543f..f2b7be403a 100644
--- a/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/PreviewBox.jsx
@@ -489,7 +489,14 @@ const PreviewContainer = ({
 };
 
 const PreviewCodeBlock = ({ code, isExpectValue = false, isLargeDataset }) => {
-  let preview = code && code.trim ? code?.trim() : `${code}`;
+  let preview;
+  if (typeof code === 'string') {
+    preview = code.trim();
+  } else if (typeof code === 'symbol') {
+    preview = code.toString();
+  } else {
+    preview = String(code);
+  }
 
   const shouldTrim = preview.length > 35;
   let showJSONTree = false;
diff --git a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
index fba7322bb2..c3d0bb798c 100644
--- a/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/SingleLineCodeEditor.jsx
@@ -28,10 +28,12 @@ import CodeHinter from './CodeHinter';
 import { removeNestedDoubleCurlyBraces } from '@/_helpers/utils';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
+import { getCssVarValue } from '@/Editor/Components/utils';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import { CodeHinterContext } from '../CodeBuilder/CodeHinterContext';
 import { createReferencesLookup } from '@/_stores/utils';
 import { useQueryPanelKeyHooks } from './useQueryPanelKeyHooks';
+import Icon from '@/_ui/Icon/solidIcons/index';
 
 const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...restProps }) => {
   const { moduleId } = useModuleContext();
@@ -79,7 +81,6 @@ const SingleLineCodeEditor = ({ componentName, fieldMeta = {}, componentId, ...r
 
   const replaceIdsWithName = useStore((state) => state.replaceIdsWithName, shallow);
   let newInitialValue = initialValue;
-
   if (typeof initialValue === 'string' && (initialValue?.includes('components') || initialValue?.includes('queries'))) {
     newInitialValue = replaceIdsWithName(initialValue);
   }
@@ -209,6 +210,7 @@ const EditorInput = ({
   onInputChange,
   wrapperRef,
   showSuggestions,
+  setCodeEditorView = null, // Function to set the CodeMirror view
 }) => {
   const codeHinterContext = useContext(CodeHinterContext);
   const { suggestionList: paramHints } = createReferencesLookup(codeHinterContext, true);
@@ -216,7 +218,10 @@ const EditorInput = ({
   const getSuggestions = useStore((state) => state.getSuggestions, shallow);
   const [codeMirrorView, setCodeMirrorView] = useState(undefined);
 
-  const getServerSideGlobalResolveSuggestions = useStore((state) => state.getServerSideGlobalResolveSuggestions, shallow);
+  const getServerSideGlobalResolveSuggestions = useStore(
+    (state) => state.getServerSideGlobalResolveSuggestions,
+    shallow
+  );
 
   const { queryPanelKeybindings } = useQueryPanelKeyHooks(onBlurUpdate, currentValue, 'singleline');
 
@@ -274,7 +279,10 @@ const EditorInput = ({
   }
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const overRideFunction = React.useCallback((context) => autoCompleteExtensionConfig(context), [isInsideQueryManager, paramHints]);
+  const overRideFunction = React.useCallback(
+    (context) => autoCompleteExtensionConfig(context),
+    [isInsideQueryManager, paramHints]
+  );
 
   const autoCompleteConfig = autocompletion({
     override: [overRideFunction],
@@ -443,6 +451,9 @@ const EditorInput = ({
             <CodeMirror
               onCreateEditor={(view) => {
                 setCodeMirrorView(view);
+                if (setCodeEditorView) {
+                  setCodeEditorView(view);
+                }
               }}
               value={currentValue}
               placeholder={placeholder}
@@ -451,11 +462,11 @@ const EditorInput = ({
               extensions={
                 showSuggestions
                   ? [
-                    javascript({ jsx: lang === 'jsx' }),
-                    autoCompleteConfig,
-                    keymap.of([...customKeyMaps]),
-                    customTabKeymap,
-                  ]
+                      javascript({ jsx: lang === 'jsx' }),
+                      autoCompleteConfig,
+                      keymap.of([...customKeyMaps]),
+                      customTabKeymap,
+                    ]
                   : [javascript({ jsx: lang === 'jsx' })]
               }
               onChange={(val) => {
@@ -487,9 +498,9 @@ const EditorInput = ({
               }}
             />
           </div>
-        </ErrorBoundary >
-      </CodeHinter.Portal >
-    </div >
+        </ErrorBoundary>
+      </CodeHinter.Portal>
+    </div>
   );
 };
 
@@ -514,24 +525,49 @@ const DynamicEditorBridge = (props) => {
 
   const [forceCodeBox, setForceCodeBox] = React.useState(fxActive);
   const codeShow = paramType === 'code' || forceCodeBox;
-  const HIDDEN_CODE_HINTER_LABELS = ['Table data', 'Column data', 'Text Format'];
-  const { isFxNotRequired } = fieldMeta;
+  const HIDDEN_CODE_HINTER_LABELS = ['Table data', 'Column data', 'Text Format', 'Slider type'];
+  const { isFxNotRequired, newLine = false, section = '' } = fieldMeta;
+  const isDeprecated = section === 'deprecated';
   const { t } = useTranslation();
-  const [_, error, value] = type === 'fxEditor' ? resolveReferences(initialValue) : [];
+  const replaceIdsWithName = useStore((state) => state.replaceIdsWithName, shallow);
+  let newInitialValue = initialValue,
+    shouldResolve = true;
+
+  // This is to handle the case when the initial value is a string and contains components or queries
+  // and we need to replace the ids with names
+  // but we don't want to resolve the references as it needs to be displayed as it is
+  if (paramName === 'generateFormFrom') {
+    if (
+      typeof initialValue === 'string' &&
+      (initialValue?.includes('components') || initialValue?.includes('queries'))
+    ) {
+      newInitialValue = replaceIdsWithName(initialValue);
+      shouldResolve = false;
+    }
+  }
+  const [_, error, value] =
+    type === 'fxEditor' ? (shouldResolve ? resolveReferences(newInitialValue) : [false, '', newInitialValue]) : [];
   let cyLabel = paramLabel ? paramLabel.toLowerCase().trim().replace(/\s+/g, '-') : props.cyLabel;
 
   useEffect(() => {
     setForceCodeBox(fxActive);
   }, [component, fxActive]);
 
+  let modifiedValue = initialValue;
+  if (paramType === 'colorSwatches' && typeof initialValue === 'string' && initialValue?.includes('var(')) {
+    modifiedValue = getCssVarValue(document.documentElement, initialValue);
+  }
+
   const renderFx = () => {
     if (paramType === 'query' || !(paramLabel !== 'Type' && isFxNotRequired === undefined)) {
       return null;
     }
+
     return (
       <div
-        className={`col-auto pt-0 fx-common fx-button-container ${(isEventManagerParam || codeShow) && 'show-fx-button-container'
-          }`}
+        className={`col-auto pt-0 fx-common fx-button-container ${
+          (isEventManagerParam || codeShow) && 'show-fx-button-container'
+        }`}
       >
         <FxButton
           active={codeShow}
@@ -539,6 +575,9 @@ const DynamicEditorBridge = (props) => {
             if (codeShow) {
               setForceCodeBox(false);
               onFxPress(false);
+              if (paramType === 'colorSwatches') {
+                onChange(modifiedValue);
+              }
             } else {
               setForceCodeBox(true);
               onFxPress(true);
@@ -551,48 +590,69 @@ const DynamicEditorBridge = (props) => {
   };
 
   const fxClass = isEventManagerParam ? 'justify-content-start' : 'justify-content-end';
-  return (
-    <div className={cx({ 'codeShow-active': codeShow }, 'wrapper-div-code-editor')}>
-      <div className={cx('d-flex align-items-center justify-content-between code-flex-wrapper')}>
+
+  const renderedLabel = () => {
+    return (
+      <>
         {paramLabel !== ' ' && !HIDDEN_CODE_HINTER_LABELS.includes(paramLabel) && (
           <div className={`field ${className}`} data-cy={`${cyLabel}-widget-parameter-label`}>
             <ToolTip
               label={t(`widget.commonProperties.${camelCase(paramLabel)}`, paramLabel)}
               meta={fieldMeta}
-              labelClass={`tj-text-xsm color-slate12 ${codeShow ? 'mb-2' : 'mb-0'} ${darkMode && 'color-whitish-darkmode'
-                }`}
+              labelClass={`tj-text-xsm color-slate12 ${codeShow ? 'mb-2' : 'mb-0'} ${
+                darkMode && 'color-whitish-darkmode'
+              }`}
             />
+            {isDeprecated && (
+              <span className={'list-item-deprecated-column-type'}>
+                <Icon name={'warning'} height={14} width={14} fill="#DB4324" />
+              </span>
+            )}
           </div>
         )}
+      </>
+    );
+  };
+
+  const renderDynamicFx = () => {
+    if (codeShow) return null;
+    return (
+      <DynamicFxTypeRenderer
+        value={!error ? value : ''}
+        onChange={onChange}
+        paramName={paramName}
+        paramLabel={paramLabel}
+        paramType={paramType}
+        forceCodeBox={() => {
+          setForceCodeBox(true);
+          onFxPress(true);
+        }}
+        meta={fieldMeta}
+        cyLabel={cyLabel}
+        styleDefinition={styleDefinition}
+        component={component}
+        onVisibilityChange={onVisibilityChange}
+      />
+    );
+  };
+
+  return (
+    <div className={cx({ 'codeShow-active': codeShow }, 'wrapper-div-code-editor')}>
+      <div className={cx('d-flex align-items-center justify-content-between code-flex-wrapper')}>
+        {renderedLabel()}
         <div className={`${(paramType ?? 'code') === 'code' ? 'd-none' : ''} flex-grow-1`}>
           <div style={{ marginBottom: codeShow ? '0.5rem' : '0px' }} className={`d-flex align-items-center ${fxClass}`}>
             {renderFx()}
           </div>
         </div>
-        {!codeShow && (
-          <DynamicFxTypeRenderer
-            value={!error ? value : ''}
-            onChange={onChange}
-            paramName={paramName}
-            paramLabel={paramLabel}
-            paramType={paramType}
-            forceCodeBox={() => {
-              setForceCodeBox(true);
-              onFxPress(true);
-            }}
-            meta={fieldMeta}
-            cyLabel={cyLabel}
-            styleDefinition={styleDefinition}
-            component={component}
-            onVisibilityChange={onVisibilityChange}
-          />
-        )}
+        {!newLine && renderDynamicFx()}
       </div>
+      {newLine && renderDynamicFx()}
       {codeShow && (
         <div className={`row custom-row`} style={{ display: codeShow ? 'flex' : 'none' }}>
           <div className={`col code-hinter-col`}>
             <div className="d-flex">
-              <SingleLineCodeEditor initialValue {...props} />
+              <SingleLineCodeEditor {...props} initialValue={modifiedValue} />
             </div>
           </div>
         </div>
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index d0a328bae0..9b1e6c7023 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -660,6 +660,13 @@
     }
 }
 
+
+.code-editor-component {
+    .cm-editor {
+        min-height: 0 !important;
+    }
+}
+
 .cm-searchMatch.cm-searchMatch-selected {
     background-color: #F28F2D !important;
 }
@@ -673,4 +680,4 @@
     .cm-theme{
         height: 100% ;
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/AppBuilder/CodeEditor/utils.js b/frontend/src/AppBuilder/CodeEditor/utils.js
index 1b5fe0aafb..227a4a74e5 100644
--- a/frontend/src/AppBuilder/CodeEditor/utils.js
+++ b/frontend/src/AppBuilder/CodeEditor/utils.js
@@ -367,6 +367,7 @@ export const FxParamTypeMapping = Object.freeze({
   visibility: 'Visibility',
   numberInput: 'NumberInput',
   tableRowHeightInput: 'TableRowHeightInput',
+  dropdownMenu: 'DropdownMenu',
   query: 'Query',
 });
 
diff --git a/frontend/src/AppBuilder/EmbedApp.jsx b/frontend/src/AppBuilder/EmbedApp.jsx
new file mode 100644
index 0000000000..9c741dc78d
--- /dev/null
+++ b/frontend/src/AppBuilder/EmbedApp.jsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import useRouter from '@/_hooks/use-router';
+import config from 'config';
+import toast from 'react-hot-toast';
+
+// In-memory PAT token store
+let inMemoryPatToken = null;
+
+export function setPatToken(patToken) {
+  inMemoryPatToken = patToken;
+}
+
+export function getPatToken() {
+  if (inMemoryPatToken) return inMemoryPatToken;
+}
+
+export default function EmbedAppRedirect() {
+  const router = useRouter();
+  const { appId } = router.query;
+
+  useEffect(() => {
+    // 🔐 Ensure the page is embedded
+    if (window.self === window.top) {
+      // Not inside an iframe
+      toast.error('This page must be embedded inside a parent application.');
+      return;
+    }
+    const token = new URLSearchParams(window.location.search).get('personal-access-token');
+
+    if (!token || typeof appId !== 'string') {
+      parent?.postMessage({ type: 'TJ_EMBED_APP_LOGOUT', error: 400, message: 'Missing token or appId' }, '*');
+      return;
+    }
+
+    const initiateSession = async () => {
+      try {
+        const res = await fetch(`${config.apiUrl}/ext/users/session`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ appId, accessToken: token }),
+        });
+        if (!res.ok) {
+          if (res.status === 401 || res.status === 403) {
+            toast.error('Your pat is expired. Please refresh or contact your admin.');
+            // 🔔 Show toast if token is expired or invalid
+            parent?.postMessage(
+              {
+                type: 'TJ_EMBED_APP_LOGOUT',
+                error: res.status,
+                message: 'Your pat is expired. Please refresh or contact your admin.',
+              },
+              '*'
+            );
+          }
+          return;
+        }
+
+        const result = await res.json();
+        // ✅ Store PAT in memory
+        setPatToken(result.signedPat);
+        window.name = result.signedPat;
+        window.location.href = `applications/${appId}`;
+      } catch (error) {
+        parent?.postMessage({ type: 'TJ_EMBED_APP_LOGOUT', error: 500, message: 'Network error' }, '*');
+      }
+    };
+
+    initiateSession();
+  }, [appId]);
+
+  return <div>Loading embedded app...</div>;
+}
diff --git a/frontend/src/AppBuilder/Header/AppCanvasBanner.jsx b/frontend/src/AppBuilder/Header/AppCanvasBanner.jsx
new file mode 100644
index 0000000000..8ca86ba4b2
--- /dev/null
+++ b/frontend/src/AppBuilder/Header/AppCanvasBanner.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { withEditionSpecificComponent } from '@/modules/common/helpers/withEditionSpecificComponent';
+import useStore from '@/AppBuilder/_stores/store';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import FreezeVersionInfo from '@/AppBuilder/Header/FreezeVersionInfo';
+import { shallow } from 'zustand/shallow';
+
+const AppCanvasBanner = ({ appId = '' }) => {
+  const { moduleId } = useModuleContext();
+  const currentMode = useStore((state) => state.modeStore.modules[moduleId].currentMode, shallow);
+  const renderBanner = () => {
+    if (currentMode === 'edit') {
+      return <FreezeVersionInfo hide={false} />;
+    }
+    return null;
+  };
+  return <div>{renderBanner()}</div>;
+};
+
+export default withEditionSpecificComponent(AppCanvasBanner, 'Appbuilder');
diff --git a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
index 64208e5d27..66e62fcd8b 100644
--- a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
+++ b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx
@@ -16,15 +16,11 @@ const CreateVersionModal = ({
   canCommit,
   orgGit,
   fetchingOrgGit,
-  handleCommitOnVersionCreation = () => {},
+  handleCommitOnVersionCreation = () => { },
 }) => {
   const { moduleId } = useModuleContext();
   const [isCreatingVersion, setIsCreatingVersion] = useState(false);
   const [versionName, setVersionName] = useState('');
-  const gitSyncEnabled =
-    orgGit?.org_git?.git_https?.is_enabled ||
-    orgGit?.org_git?.git_ssh?.is_enabled ||
-    orgGit?.org_git?.git_lab?.is_enabled;
 
   const {
     createNewVersionAction,
@@ -33,6 +29,7 @@ const CreateVersionModal = ({
     appId,
     setCurrentVersionId,
     selectedVersion,
+    currentMode,
   } = useStore(
     (state) => ({
       createNewVersionAction: state.createNewVersionAction,
@@ -45,6 +42,7 @@ const CreateVersionModal = ({
       currentVersionId: state.currentVersionId,
       setCurrentVersionId: state.setCurrentVersionId,
       selectedVersion: state.selectedVersion,
+      currentMode: state.currentMode,
     }),
     shallow
   );
@@ -94,7 +92,7 @@ const CreateVersionModal = ({
         setIsCreatingVersion(false);
         setShowCreateAppVersion(false);
         appVersionService
-          .getAppVersionData(appId, newVersion.id)
+          .getAppVersionData(appId, newVersion.id, currentMode)
           .then((data) => {
             setCurrentVersionId(newVersion.id);
             handleCommitOnVersionCreation(data);
@@ -104,8 +102,8 @@ const CreateVersionModal = ({
           });
       },
       (error) => {
-        if (error?.data?.code === '23505') {
-          toast.error('Version name already exists.');
+        if (error?.data?.code === "23505") {
+          toast.error("Version name already exists.");
         } else {
           toast.error(error?.error);
         }
@@ -174,7 +172,7 @@ const CreateVersionModal = ({
             </div>
           </div>
 
-          {gitSyncEnabled && (
+          {orgGit?.org_git?.is_enabled && (
             <div className="commit-changes" style={{ marginTop: '-1rem', marginBottom: '2rem' }}>
               <div>
                 <input
diff --git a/frontend/src/AppBuilder/Header/CustomSelect.jsx b/frontend/src/AppBuilder/Header/CustomSelect.jsx
index 0ea5199b36..b29e7f4195 100644
--- a/frontend/src/AppBuilder/Header/CustomSelect.jsx
+++ b/frontend/src/AppBuilder/Header/CustomSelect.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import Select from '@/_ui/Select';
 import { components } from 'react-select';
@@ -8,18 +8,27 @@ import { ToolTip } from '@/_components/ToolTip';
 import EditWhite from '@assets/images/icons/edit-white.svg';
 import { defaultAppEnvironments, decodeEntities } from '@/_helpers/utils';
 import { CreateVersionModal } from '@/modules/Appbuilder/components';
+import useStore from '@/AppBuilder/_stores/store';
 
 // TODO: edit version modal and add version modal
 const Menu = (props) => {
   const isEditable = props.selectProps.isEditable;
+  const creationMode = props?.selectProps?.appCreationMode;
+  const allowAppEdit = useStore((state) => state.allowEditing);
+  const [isVersionCreationEnabled, setIsVersionCreationEnabled] = useState(
+    creationMode !== 'GIT' || (creationMode === 'GIT' && allowAppEdit)
+  );
+  useEffect(() => {
+    setIsVersionCreationEnabled(creationMode !== 'GIT' || (creationMode === 'GIT' && allowAppEdit));
+  }, [allowAppEdit, creationMode]);
 
   return (
     <components.Menu {...props}>
       <div>
         {isEditable && !props?.selectProps?.value?.isReleasedVersion && (
           <ToolTip
-            message="Versions created from git cannot be edited"
-            show={props?.selectProps?.appCreationMode === 'GIT'}
+            message="New versions cannot be created for non-editable apps"
+            show={!isVersionCreationEnabled}
             placement="right"
           >
             <div
@@ -27,7 +36,7 @@ const Menu = (props) => {
               style={{ padding: '8px 12px' }}
               onClick={() =>
                 !props?.selectProps?.value?.isReleasedVersion &&
-                props?.selectProps?.appCreationMode !== 'GIT' &&
+                isVersionCreationEnabled &&
                 props.selectProps.setShowEditAppVersion(true)
               }
             >
@@ -49,18 +58,18 @@ const Menu = (props) => {
         <div>{props.children}</div>
         {isEditable && (
           <ToolTip
-            message={'New versions cannot be created for git imported apps'}
-            show={props?.selectProps?.appCreationMode === 'GIT'}
+            message={'New versions cannot be created for non-editable apps'}
+            show={!isVersionCreationEnabled}
             placement="right"
           >
             <div
               className="cursor-pointer tj-text-xsm"
               style={{
                 padding: '8px 12px',
-                color: `${props?.selectProps?.appCreationMode !== 'GIT' ? '#3E63DD' : '#C1C8CD'}`,
-                cursor: `${props?.selectProps?.appCreationMode !== 'GIT' ? 'pointer' : 'none'}`,
+                color: `${isVersionCreationEnabled ? '#3E63DD' : '#C1C8CD'}`,
+                cursor: `${isVersionCreationEnabled ? 'pointer' : 'none'}`,
               }}
-              onClick={() => props?.selectProps?.appCreationMode !== 'GIT' && props?.setShowCreateAppVersion(true)}
+              onClick={() => isVersionCreationEnabled && props?.setShowCreateAppVersion(true)}
               data-cy="create-new-version-button"
             >
               <svg
@@ -76,7 +85,7 @@ const Menu = (props) => {
                   fillRule="evenodd"
                   clipRule="evenodd"
                   d="M17 11C17.4142 11 17.75 11.3358 17.75 11.75V16.25H22.25C22.6642 16.25 23 16.5858 23 17C23 17.4142 22.6642 17.75 22.25 17.75H17.75V22.25C17.75 22.6642 17.4142 23 17 23C16.5858 23 16.25 22.6642 16.25 22.25V17.75H11.75C11.3358 17.75 11 17.4142 11 17C11 16.5858 11.3358 16.25 11.75 16.25H16.25V11.75C16.25 11.3358 16.5858 11 17 11Z"
-                  fill={`${props?.selectProps?.appCreationMode !== 'GIT' ? '#3E63DD' : '#C1C8CD'}`}
+                  fill={`${isVersionCreationEnabled ? '#3E63DD' : '#C1C8CD'}`}
                 />
               </svg>
               Create new version
diff --git a/frontend/src/AppBuilder/Header/EditAppName.jsx b/frontend/src/AppBuilder/Header/EditAppName.jsx
index e9dff6074a..24b6dbbf61 100644
--- a/frontend/src/AppBuilder/Header/EditAppName.jsx
+++ b/frontend/src/AppBuilder/Header/EditAppName.jsx
@@ -149,7 +149,6 @@ function EditAppName() {
           value={name}
           maxLength={50}
           data-cy="app-name-input"
-          disabled={appCreationMode === 'GIT'}
         />
       </ToolTip>
       <InfoOrErrorBox
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/CanvasSettings.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/CanvasSettings.jsx
index 209677b747..3f0d90ccab 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/CanvasSettings.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/CanvasSettings.jsx
@@ -10,8 +10,10 @@ import { resolveReferences } from '@/_helpers/utils';
 import FxButton from '@/Editor/CodeBuilder/Elements/FxButton';
 import { useTranslation } from 'react-i18next';
 import { Confirm } from '@/Editor/Viewer/Confirm';
+import { ColorSwatches } from '@/modules/Appbuilder/components';
 import { shallow } from 'zustand/shallow';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import { getCssVarValue } from '@/Editor/Components/utils';
 
 const CanvasSettings = ({ darkMode }) => {
   const { moduleId } = useModuleContext();
@@ -117,77 +119,64 @@ const CanvasSettings = ({ darkMode }) => {
         </div>
       </div>
 
-      <div className="d-flex justify-content-between mb-3">
+      <div className="d-flex mb-3" style={{ height: '42px', gap: '20px' }}>
         <span className="pt-2" data-cy={`label-bg-canvas`}>
           {t('leftSidebar.Settings.backgroundColorOfCanvas', 'Canvas bavkground')}
         </span>
         <div className="canvas-codehinter-container">
-          {showPicker && (
-            <div>
-              <div style={coverStyles} onClick={() => setShowPicker(false)} />
-              <SketchPicker
-                data-cy={`color-picker-canvas`}
-                className="canvas-background-picker"
-                onFocus={() => setShowPicker(true)}
-                color={canvasBackgroundColor}
-                onChangeComplete={(color) => {
+          <div className={`fx-canvas `}>
+            <FxButton
+              dataCy={`canvas-bg-color`}
+              active={!forceCodeBox ? true : false}
+              onPress={async () => {
+                if (typeof canvasBackgroundColor === 'string' && canvasBackgroundColor?.includes('var(')) {
+                  const value = getCssVarValue(document.documentElement, canvasBackgroundColor);
                   const options = {
-                    canvasBackgroundColor: [color.hex, color.rgb],
-                    backgroundFxQuery: '',
+                    canvasBackgroundColor: value,
+                    backgroundFxQuery: value,
                   };
-                  globalSettingsChanged(options);
-                  resolveOthers('canvas', true, { canvasBackgroundColor: [color.hex, color.rgb] });
-                }}
-              />
-            </div>
-          )}
+                  await Promise.resolve(globalSettingsChanged(options));
+                  await Promise.resolve(resolveOthers('canvas', true, { canvasBackgroundColor: value }));
+                }
+                setForceCodeBox(!forceCodeBox);
+              }}
+            />
+          </div>
           {forceCodeBox && (
-            <div className="row mx-0 color-picker-input d-flex" onClick={() => setShowPicker(true)} style={outerStyles}>
-              <div
-                data-cy={`canvas-bg-color-picker`}
-                className="col-auto"
-                style={{
-                  float: 'right',
-                  width: '24px',
-                  height: '24px',
-                  backgroundColor: canvasBackgroundColor,
-                  borderRadius: ' 6px',
-                  border: `1px solid var(--slate7, #D7DBDF)`,
-                  boxShadow: `0px 1px 2px 0px rgba(16, 24, 40, 0.05)`,
-                }}
-              ></div>
-              <div style={{ height: '20px' }} className="col">
-                {canvasBackgroundColor}
-              </div>
-            </div>
+            <ColorSwatches
+              data-cy={`color-picker-canvas`}
+              outerWidth="155px"
+              value={canvasBackgroundColor}
+              onChange={(color) => {
+                const options = {
+                  canvasBackgroundColor: resolveReferences(color),
+                  backgroundFxQuery: color,
+                };
+                globalSettingsChanged(options);
+                resolveOthers('canvas', true, { canvasBackgroundColor: color });
+              }}
+            />
           )}
           <div className={`${!forceCodeBox && 'hinter-canvas-input'} `}>
             {!forceCodeBox && (
-              <CodeHinter
-                cyLabel={`canvas-bg-colour`}
-                initialValue={backgroundFxQuery ? backgroundFxQuery : canvasBackgroundColor}
-                lang="javascript"
-                className="canvas-hinter-wrap"
-                lineNumbers={false}
-                onChange={(color) => {
-                  const options = {
-                    canvasBackgroundColor: resolveReferences(color),
-                    backgroundFxQuery: color,
-                  };
-                  globalSettingsChanged(options);
-                  resolveOthers('canvas', true, { canvasBackgroundColor: color });
-                }}
-              />
+              <div className="canvas-hinter-wrap-container">
+                <CodeHinter
+                  cyLabel={`canvas-bg-colour`}
+                  initialValue={backgroundFxQuery ? backgroundFxQuery : canvasBackgroundColor}
+                  lang="javascript"
+                  className="canvas-hinter-wrap"
+                  lineNumbers={false}
+                  onChange={(color) => {
+                    const options = {
+                      canvasBackgroundColor: resolveReferences(color),
+                      backgroundFxQuery: color,
+                    };
+                    globalSettingsChanged(options);
+                    resolveOthers('canvas', true, { canvasBackgroundColor: color });
+                  }}
+                />
+              </div>
             )}
-            <div className={`fx-canvas `}>
-              <FxButton
-                dataCy={`canvas-bg-color`}
-                active={!forceCodeBox ? true : false}
-                onPress={() => {
-                  setForceCodeBox(!forceCodeBox);
-                }}
-              />
-            </div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
index e2b5947206..bcd90bee33 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
@@ -5,13 +5,14 @@ import cx from 'classnames';
 import { shallow } from 'zustand/shallow';
 import { DarkModeToggle } from '@/_components';
 import Popover from '@/_ui/Popover';
-import { PageMenu } from './PageMenu';
+// import { PageMenu } from './PageMenu';
 import LeftSidebarInspector from './LeftSidebarInspector/LeftSidebarInspector';
 import GlobalSettings from './GlobalSettings';
 import '../../_styles/left-sidebar.scss';
 import Debugger from './Debugger/Debugger';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import { withEditionSpecificComponent } from '@/modules/common/helpers/withEditionSpecificComponent';
+import { PageMenu } from '../RightSideBar/PageSettingsTab/PageMenu';
 
 // TODO: remove passing refs to LeftSidebarItem and use state
 // TODO: need to add datasources to the sidebar.
@@ -58,7 +59,6 @@ export const BaseLeftSidebar = ({
   const sideBarBtnRefs = useRef({});
 
   const handleSelectedSidebarItem = (item) => {
-    pinned && localStorage.setItem('selectedSidebarItem', item);
     if (item === 'debugger') resetUnreadErrorCount();
     setSelectedSidebarItem(item);
     if (item === selectedSidebarItem && !pinned) {
@@ -211,15 +211,6 @@ export const BaseLeftSidebar = ({
           tip: 'Build with AI',
           ref: setSideBarBtnRefs('tooljetai'),
         })}
-        <SidebarItem
-          selectedSidebarItem={selectedSidebarItem}
-          onClick={() => handleSelectedSidebarItem('page')}
-          darkMode={darkMode}
-          icon="page"
-          className={`left-sidebar-item left-sidebar-layout left-sidebar-page-selector`}
-          tip="Pages"
-          ref={setSideBarBtnRefs('page')}
-        />
         {renderCommonItems()}
         <SidebarItem
           icon="settings"
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
index 081737f3f5..d6b51872bb 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/Node.jsx
@@ -103,7 +103,9 @@ export const Node = (props) => {
         marginTop: level === 1 ? 4 : 0,
         marginBottom: level === 1 ? 4 : 0,
         // borderLeft: level > 1 ? '1px solid var(--slate6, #D7DBDF)' : 'none',
+        cursor: level === 1 ? 'pointer' : 'default',
       }}
+      {...(level === 1 && { onClick: () => onExpand(props) })}
     >
       {/* {!['queries', 'globals', 'variables'].includes(type) && ( */}
       <div className="node-expansion-icon">
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx b/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
deleted file mode 100644
index 3f8b3c09d3..0000000000
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItem.jsx
+++ /dev/null
@@ -1,317 +0,0 @@
-import React, { memo, useRef, useState, useCallback } from 'react';
-import cx from 'classnames';
-// import { RenameInput } from './RenameInput';
-// import { PagehandlerMenu } from './PagehandlerMenu';
-// import { EditModal } from './EditModal';
-// import { SettingsModal } from './SettingsModal';
-import { useAppVersionStore } from '@/_stores/appVersionStore';
-import SolidIcon from '@/_ui/Icon/SolidIcons';
-import EyeDisable from '@/_ui/Icon/solidIcons/EyeDisable';
-import FileRemove from '@/_ui/Icon/solidIcons/FIleRemove';
-import Home from '@/_ui/Icon/solidIcons/Home';
-import useStore from '@/AppBuilder/_stores/store';
-import _ from 'lodash';
-import { toast } from 'react-hot-toast';
-import { RenameInput } from './RenameInput';
-import IconSelector from './IconSelector';
-import { withRouter } from '@/_hoc/withRouter';
-import OverflowTooltip from '@/_components/OverflowTooltip';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
-import { shallow } from 'zustand/shallow';
-import { ToolTip } from '@/_components/ToolTip';
-
-export const PageMenuItem = withRouter(
-  memo(({ darkMode, page, navigate }) => {
-    const { moduleId } = useModuleContext();
-    const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
-    const isHomePage = page.id === homePageId;
-    const currentPageId = useStore((state) => state.modules[moduleId].currentPageId);
-    const isSelected = page.id === currentPageId;
-    const isHidden = page?.hidden ?? false;
-    const isDisabled = page?.disabled ?? false;
-    const [isHovered, setIsHovered] = useState(false);
-    const shouldFreeze = useStore((state) => state.getShouldFreeze());
-    const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
-    const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
-    const showEditingPopover = useStore((state) => state.showEditingPopover);
-    const restricted = page?.permissions && page?.permissions?.length > 0;
-    const {
-      definition: { styles, properties },
-    } = useStore((state) => state.pageSettings);
-    const setCurrentPageHandle = useStore((state) => state.setCurrentPageHandle);
-    // only update when the page is being edited
-    const editingPage = useStore(
-      (state) => state.editingPage,
-      (prev, next) => {
-        if (next?.id === page?.id) return false;
-        if (prev?.id === page?.id) return false;
-        return true;
-      }
-    );
-    const editingPageName = useStore((state) => state.showEditPageNameInput);
-    const popoverRef = useRef(null);
-
-    const openPageEditPopover = useStore((state) => state.openPageEditPopover);
-    const toggleEditPageNameInput = useStore((state) => state.toggleEditPageNameInput);
-
-    const isEditingPage = editingPage?.id === page?.id;
-    const icon = () => {
-      const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
-      if (!isDisabled && !isHidden) {
-        return <IconSelector iconColor={computedStyles?.icon?.color} iconName={iconName} pageId={page.id} />;
-      }
-      if (isDisabled || (isDisabled && isHidden)) {
-        return (
-          <FileRemove fill={computedStyles?.icon?.fill} className=" " width={16} height={16} viewBox={'0 0 16 16'} />
-        );
-      }
-      if (isHidden && !isDisabled) {
-        return <EyeDisable className="" width={16} height={16} />;
-      }
-    };
-
-    const computeStyles = useCallback(() => {
-      const baseStyles = {
-        pill: {
-          borderRadius: `${styles.pillRadius.value}px`,
-        },
-        icon: {
-          color: !styles.iconColor.isDefault && styles.iconColor.value,
-          fill: !styles.iconColor.isDefault && styles.iconColor.value,
-        },
-      };
-
-      switch (true) {
-        case isSelected: {
-          return {
-            ...baseStyles,
-            text: {
-              color: !styles.selectedTextColor.isDefault && styles.selectedTextColor.value,
-            },
-            icon: {
-              stroke: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
-              color: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
-              fill: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
-            },
-            pill: {
-              background: !styles.pillSelectedBackgroundColor.isDefault && styles.pillSelectedBackgroundColor.value,
-              ...(page.id === editingPage?.id && {
-                backgroundColor: 'var(--slate1)',
-              }),
-              ...baseStyles.pill,
-            },
-          };
-        }
-        case isHovered: {
-          return {
-            ...baseStyles,
-            pill: {
-              background: !styles.pillHoverBackgroundColor.isDefault && styles.pillHoverBackgroundColor.value,
-              ...baseStyles.pill,
-            },
-          };
-        }
-        default: {
-          return {
-            text: {
-              color: !styles.textColor.isDefault && styles.textColor.value,
-            },
-            icon: {
-              color: !styles.iconColor.isDefault && styles.iconColor.value,
-              fill: !styles.iconColor.isDefault && styles.iconColor.value,
-            },
-          };
-        }
-      }
-    }, [styles, isSelected, isHovered, page.id, editingPage?.id]);
-
-    const computedStyles = computeStyles();
-
-    const labelStyle = {
-      icon: {
-        hidden: properties.style === 'text',
-      },
-      label: {
-        hidden: properties.style === 'icon',
-      },
-    };
-
-    const switchPage = useStore((state) => state.switchPage);
-
-    const handlePageSwitch = useCallback(() => {
-      if (currentPageId === page.id) {
-        return;
-      }
-      switchPage(page.id, page.handle, [], moduleId);
-      setCurrentPageHandle(page.handle, moduleId);
-    }, [currentPageId, page.id, page.handle, switchPage, setCurrentPageHandle, moduleId]);
-
-    const handlePageMenuSettings = useCallback(
-      (event) => {
-        event.stopPropagation();
-        openPageEditPopover(page, popoverRef);
-      },
-      [popoverRef.current, page]
-    );
-
-    function getTooltip() {
-      const permission = page?.permissions?.length ? page?.permissions[0] : null;
-      if (!permission) return '';
-      const users = permission.users || [];
-      const isSingle = permission.type === 'SINGLE';
-      const isGroup = permission.type === 'GROUP';
-
-      if (users.length === 0) return null;
-
-      if (isSingle) {
-        if (users.length === 1) {
-          const email = users[0].user.email;
-          return `Access restricted to ${email}`;
-        } else {
-          return `Access restricted to ${users.length} users`;
-        }
-      }
-
-      if (isGroup) {
-        if (users.length === 1) {
-          const groupName = users[0].permissionGroup?.name ?? 'Group';
-          return `Access restricted to ${groupName} group`;
-        } else {
-          return `Access restricted to ${users.length} groups`;
-        }
-      }
-
-      return '';
-    }
-
-    return (
-      <div
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        style={{
-          width: '100%',
-        }}
-      >
-        <>
-          <div
-            onClick={handlePageSwitch}
-            className={`page-menu-item ${isSelected && 'is-selected'} ${darkMode && 'dark-theme'}`}
-            style={{
-              position: 'relative',
-              width: '100%',
-              ...computedStyles?.pill,
-            }}
-          >
-            {editingPageName && editingPage?.id === page?.id ? (
-              <>
-                {' '}
-                <div className="left">{icon()}</div>
-                <RenameInput
-                  page={page}
-                  updaterCallback={() => {
-                    toggleEditPageNameInput(false);
-                  }}
-                />
-              </>
-            ) : (
-              <>
-                {' '}
-                <div className="left" data-cy={`pages-name-${page.name.toLowerCase()}`}>
-                  {icon()}
-                  <OverflowTooltip childrenClassName="page-name" style={{ ...computedStyles?.text }}>
-                    {page.name}
-                  </OverflowTooltip>
-                  <span
-                    style={{
-                      marginLeft: '8px',
-                    }}
-                    className="color-slate09 meta-text"
-                  >
-                    {isHomePage && 'Home'}
-                    {isDisabled && 'Disabled'}
-                    {isHidden && !isDisabled && 'Hidden'}
-                  </span>
-                </div>
-                <div style={{ marginLeft: '8px', marginRight: 'auto' }}>
-                  {licenseValid && restricted && (
-                    <ToolTip message={getTooltip()}>
-                      <div>
-                        <SolidIcon width="16" name="lock" fill="var(--icon-strong)" />
-                      </div>
-                    </ToolTip>
-                  )}
-                </div>
-                <div className={cx('right', { 'handler-menu-open': showEditingPopover })}>
-                  {!shouldFreeze && (
-                    <button
-                      style={{
-                        backgroundColor: 'transparent',
-                        border: 'none',
-                        color: 'var(--color-slate12)',
-                        cursor: 'pointer',
-                        padding: '0',
-                        ...((isEditingPage || currentPageId === page?.id) && {
-                          opacity: 1,
-                        }),
-                      }}
-                      className="edit-page-overlay-toggle"
-                      onClick={handlePageMenuSettings}
-                      ref={popoverRef}
-                      id={`edit-popover-${page.id}`}
-                    >
-                      <SolidIcon width="20" dataCy={`page-menu`} name="morevertical" />
-                    </button>
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-        </>
-      </div>
-    );
-  })
-);
-
-export const AddingPageHandler = ({ darkMode }) => {
-  const toggleShowAddNewPageInput = useStore((state) => state.toggleShowAddNewPageInput);
-  const addNewPage = useStore((state) => state.addNewPage);
-  const isPageGroup = useStore((state) => state.isPageGroup);
-  const handleAddingNewPage = (pageName) => {
-    if (pageName.trim().length === 0) {
-      toast(`${isPageGroup ? 'Page group' : 'Page'} name should have at least 1 character`, {
-        icon: '⚠️',
-      });
-    } else if (pageName.trim().length > 32) {
-      toast(`${isPageGroup ? 'Page group' : 'Page'} name cannot exceed 32 characters`, {
-        icon: '⚠️',
-      });
-    } else {
-      addNewPage(pageName, _.kebabCase(pageName.toLowerCase()), isPageGroup);
-    }
-    toggleShowAddNewPageInput(false);
-  };
-
-  return (
-    <div role="button" style={{ marginTop: '2px' }}>
-      <div>
-        <input
-          type="text"
-          className={`form-control page-name-input color-slate12 ${darkMode && 'bg-transparent'}`}
-          autoFocus
-          onBlur={(event) => {
-            const name = event.target.value;
-            handleAddingNewPage(name);
-            event.stopPropagation();
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              const name = event.target.value;
-              handleAddingNewPage(name);
-              event.stopPropagation();
-            }
-          }}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss b/frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss
deleted file mode 100644
index 4510123efc..0000000000
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss
+++ /dev/null
@@ -1,291 +0,0 @@
-.PopoverContent {
-    &.page {
-        min-height: unset !important;
-    }
-}
-
-.page-handler.ghost {
-    background-color: #ECEEF0;
-    border-radius: 4px;
-    position: relative;
-    width: 100%;
-    opacity: 0.8;
-
-    &.dark-theme {
-        background-color: var(--slate4);
-    }
-}
-
-.edit-page-overlay-toggle {
-    opacity: 0;
-    transition: opacity 0.1s;
-}
-
-.menu-item-drag-handle {
-    display: none;
-}
-
-.page-menu-icon {
-    display: block;
-}
-
-.page-menu-icon.rev {
-    display: none;
-}
-
-.page-menu-icon-padding {
-    padding-left: 16px;
-}
-
-.menu-item-drag-handle {
-    display: none !important;
-}
-
-.page-group-icon-text {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 18px;
-    text-align: left;
-    color: var(--slate11);
-    position: relative;
-    top: -10px;
-    width: 194px;
-    margin-left: auto;
-}
-
-.page-handler {
-    .page-menu-item {
-        height: 32px;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        padding: 0px 8px;
-        margin-top: 2px;
-        justify-content: space-between;
-
-        &.highlight {
-            border: 2px solid #3D63DC;
-        }
-
-        &.is-selected {
-            background-color: #f0f4ff;
-
-            &.dark-theme {
-                background-color: var(--slate5);
-            }
-        }
-
-        .page-group-actions {
-            transition: 0.2s ease;
-            opacity: 0;
-            gap: 2px;
-            display: flex;
-            width: unset !important;
-            height: unset !important;
-
-            button {
-                border-radius: var(--2, 4px);
-                border: 1px solid var(--border-default, #CCD1D5);
-                background: var(--button-secondary, #FFF);
-                width: 20px;
-                height: 20px;
-                padding: 0;
-                /* Elevations/000 */
-                box-shadow: 0px 1px 0px 0px var(--_-Dropshadow-000, rgba(0, 0, 0, 0.10));
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-        }
-
-        .meta-text {
-            color: var(--slate8);
-            font-size: 12px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 18px;
-            margin-top: 3px;
-        }
-
-        button.edit-page-overlay-toggle {
-            opacity: 0;
-        }
-
-        &:hover {
-            background-color: #ECEEF0;
-
-            button.edit-page-overlay-toggle {
-                opacity: 1;
-            }
-
-            .page-group-actions {
-                opacity: 1;
-            }
-
-            &.dark-theme {
-                &:hover {
-                    background-color: var(--slate4);
-                }
-            }
-        }
-
-        .left {
-            display: flex;
-            align-items: center;
-
-            // margin-left: 15px;
-            .page-name {
-                overflow: hidden;
-                color: var(--slate12);
-                font-size: 14px;
-                font-style: normal;
-                font-weight: 400;
-                max-width: 246px;
-                margin-top: 3px;
-            }
-
-        }
-
-        .right {
-            width: 20px;
-            height: 20px;
-            justify-content: center;
-            display: flex;
-
-            svg {
-                path {
-                    fill: var(--slate12);
-                }
-            }
-
-            &:hover {
-                background: var(--slate1);
-                box-shadow: 0px 1px 1px 1px var(--slate6);
-                border-radius: 3px;
-            }
-        }
-    }
-
-    &:hover {
-        .edit-page-overlay-toggle {
-            opacity: 1;
-        }
-
-        .menu-item-drag-handle {
-            display: block;
-        }
-
-        .page-menu-icon {
-            display: none;
-        }
-
-        .page-menu-icon.no-hover {
-            display: block !important;
-        }
-
-        .page-menu-icon.rev {
-            display: block;
-        }
-
-        .page-menu-icon-padding {
-            padding-left: 0px !important;
-        }
-
-        .menu-item-drag-handle {
-            display: flex !important;
-        }
-
-    }
-}
-
-.page-group-trigger-button {
-    display: flex;
-    padding: 5px 10px;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    border-radius: 6px;
-    width: 63px;
-}
-
-.text {
-    color: var(--text-default, #1B1F24);
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 18px;
-}
-
-.page-menu-action-buttons {
-    display: inline-flex;
-    align-items: center;
-    height: 28px;
-    width: 28px;
-    padding: 7px;
-    gap: 6px;
-    border: none;
-    outline: none;
-    border-radius: 6px;
-    background: transparent;
-
-    svg path {
-        fill: #6A727C;
-    }
-
-    &:hover {
-        background: var(--button-outline-hover, rgba(136, 144, 153, 0.12));
-    }
-}
-
-
-
-.left-sidebar-header-btn.trigger {
-    border-radius: 6px;
-    border: 1px solid var(--border-weak, #E4E7EB);
-    background: var(--button-secondary, #FFF);
-    box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
-
-    &:hover {
-        border-radius: 6px;
-        border: 1px solid var(--border-default, #CCD1D5);
-        background: linear-gradient(0deg, var(--button-outline-hover, rgba(136, 144, 153, 0.12)) 0%, var(--button-outline-hover, rgba(136, 144, 153, 0.12)) 100%), var(--button-outline, #FFF);
-    }
-}
-
-#page-handler-menu-group {
-    border: none;
-    background: transparent;
-    border-radius: 10px;
-
-    &.dark-theme {
-        .popover-body {
-            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 8px 16px 0px #000000;
-        }
-    }
-
-    .popover-body {
-        width: 160px;
-        padding: 8px;
-        border-radius: 10px;
-        background: var(--background-surface-layer-01);
-        box-shadow: 0px 0px 1px 0px rgba(48, 50, 51, 0.05), 0px 8px 16px 0px rgba(48, 50, 51, 0.1);
-
-        .menu-options {
-            .option {
-                display: flex;
-                padding: 6px 8px;
-                align-items: center;
-                gap: 6px;
-                height: 30px;
-                justify-content: center;
-                align-self: stretch;
-                border-radius: 6px;
-                cursor: pointer;
-
-                &:hover {
-                    background: rgba(136, 144, 153, 0.08);
-                }
-            }
-        }
-    }
-}
diff --git a/frontend/src/AppBuilder/QueryManager/Components/DataSourcePicker.jsx b/frontend/src/AppBuilder/QueryManager/Components/DataSourcePicker.jsx
index 22d6fcca28..1c6ebe9ebd 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/DataSourcePicker.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/DataSourcePicker.jsx
@@ -93,7 +93,7 @@ function DataSourcePicker({ darkMode }) {
         <a
           data-cy="querymanager-doc-link"
           target="_blank"
-          href="https://docs.tooljet.com/docs/app-builder/query-panel"
+          href="https://docs.tooljet.ai/docs/app-builder/query-panel"
           rel="noreferrer"
         >
           documentation
diff --git a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
index af76275575..f14f1cdefb 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
@@ -280,10 +280,10 @@ export const BaseQueryManagerBody = ({ darkMode, activeTab, renderCopilot = () =
     }
     const isSampleDb = selectedDataSource?.type === DATA_SOURCE_TYPE.SAMPLE;
     const docLink = isSampleDb
-      ? 'https://docs.tooljet.com/docs/data-sources/sample-data-sources'
+      ? 'https://docs.tooljet.ai/docs/data-sources/sample-data-sources'
       : selectedDataSource?.plugin_id && selectedDataSource.plugin_id.trim() !== ''
-      ? `https://docs.tooljet.com/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource?.kind}/`
-      : `https://docs.tooljet.com/docs/data-sources/${selectedDataSource?.kind}`;
+      ? `https://docs.tooljet.ai/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource?.kind}/`
+      : `https://docs.tooljet.ai/docs/data-sources/${selectedDataSource?.kind}`;
     return (
       <>
         <div className="" ref={paramListContainerRef}>
diff --git a/frontend/src/AppBuilder/QueryManager/Components/Transformation.jsx b/frontend/src/AppBuilder/QueryManager/Components/Transformation.jsx
index e2c2ab56c8..0c39e917c3 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/Transformation.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/Transformation.jsx
@@ -70,7 +70,7 @@ const EducativeLabel = ({ darkMode }) => {
             faster. It uses OpenAI&apos;s GPT-3.5 to suggest queries based on your data.
           </p>
           <Button
-            onClick={() => window.open('https://docs.tooljet.com/docs/tooljet-copilot', '_blank')}
+            onClick={() => window.open('https://docs.tooljet.ai/docs/tooljet-copilot', '_blank')}
             darkMode={darkMode}
             size="sm"
             classNames="default-secondary-button"
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx
index a2cf74da10..d9a670f200 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/AggregateUI/index.jsx
@@ -277,7 +277,11 @@ export const AggregateFilter = ({ darkMode, operation = '' }) => {
   };
 
   const aggFxOptions = [
-    { label: 'Sum', value: 'sum', description: 'Sum of all values in this column' },
+    {
+      label: 'Sum',
+      value: 'sum',
+      description: 'Sum of all values in this column',
+    },
     {
       label: 'Count',
       value: 'count',
@@ -402,7 +406,11 @@ export const AggregateFilter = ({ darkMode, operation = '' }) => {
                     />
                   </div>
                   <div
-                    style={{ width: '32px', minWidth: '32px', borderRadius: '0 4px 4px 0' }}
+                    style={{
+                      width: '32px',
+                      minWidth: '32px',
+                      borderRadius: '0 4px 4px 0',
+                    }}
                     className="d-flex justify-content-center align-items-center border"
                     onClick={() => handleDeleteAggregate(aggregateKey)}
                   >
diff --git a/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx b/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
index 2d192ec666..91c14257ef 100644
--- a/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
+++ b/frontend/src/AppBuilder/QueryPanel/QueryCard.jsx
@@ -157,7 +157,7 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
                   <a
                     className="text-truncate"
                     data-tooltip-id="query-card-local-ds-info"
-                    href="https://docs.tooljet.com/docs/data-sources/overview/#changing-scope-of-data-sources-on-an-app-created-on-older-versions-of-tooljet"
+                    href="https://docs.tooljet.ai/docs/data-sources/overview/#changing-scope-of-data-sources-on-an-app-created-on-older-versions-of-tooljet"
                     target="_blank"
                     rel="noreferrer"
                   >
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentConfigurationTab/ComponentConfigurationTab.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentConfigurationTab/ComponentConfigurationTab.jsx
index 2f4b785b6a..46ce6485ca 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentConfigurationTab/ComponentConfigurationTab.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentConfigurationTab/ComponentConfigurationTab.jsx
@@ -4,12 +4,33 @@ import { Inspector } from '@/AppBuilder/RightSideBar/Inspector/Inspector';
 import useStore from '@/AppBuilder/_stores/store';
 import { RIGHT_SIDE_BAR_TAB } from '@/AppBuilder/RightSideBar/rightSidebarConstants';
 import { shallow } from 'zustand/shallow';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export const ComponentConfigurationTab = ({ darkMode, isModuleEditor }) => {
   const selectedComponentId = useStore((state) => state.selectedComponents?.[0], shallow);
+  const activeTab = useStore((state) => state.activeRightSideBarTab, shallow);
+  const toggleRightSidebarPin = useStore((state) => state.toggleRightSidebarPin);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
   const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab);
-  if (!selectedComponentId) {
-    return setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.COMPONENTS);
+  if (!selectedComponentId && activeTab !== RIGHT_SIDE_BAR_TAB.PAGES) {
+    // return setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.COMPONENTS);
+    return (
+      <>
+        <div className="empty-configuration-header">
+          <div className="header">Component properties</div>
+          <div className="icon-btn cursor-pointer" onClick={() => toggleRightSidebarPin()}>
+            <SolidIcon fill="var(--icon-strong)" name={isRightSidebarPinned ? 'unpin' : 'pin'} width="16" />
+          </div>
+        </div>
+        <div className="d-flex align-items-center justify-content-center no-component-selected">
+          <SolidIcon name="cursorclick" width="28" />
+          <div className="tj-text-sm font-weight-500 heading">No component selected</div>
+          <div className="tj-text-xsm sub-heading">
+            Click a component on the canvas to view and edit its properties.
+          </div>
+        </div>
+      </>
+    );
   }
   return (
     <Inspector
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentModuleTab/styles.scss b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentModuleTab/styles.scss
index 51fdce0d61..3182cb2368 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentModuleTab/styles.scss
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentModuleTab/styles.scss
@@ -4,6 +4,8 @@
     height: 36px;
     margin-bottom: 8px;
     margin-top: 16px;
+    margin-left: 16px;
+    margin-right: 16px;
 }
 
 .tj-tabs-container {
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentsManagerTab.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentsManagerTab.jsx
index 38783c3b51..7f41ec95d0 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentsManagerTab.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/ComponentsManagerTab.jsx
@@ -7,6 +7,9 @@ import Fuse from 'fuse.js';
 import { SearchBox } from '@/_components';
 import { DragLayer } from './DragLayer';
 import useStore from '@/AppBuilder/_stores/store';
+import Accordion from '@/_ui/Accordion';
+import sectionConfig from './sectionConfig';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { ModuleManager } from '@/modules/Modules/components';
 import { ComponentModuleTab } from '@/modules/Appbuilder/components';
 
@@ -28,12 +31,11 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
   const _shouldFreeze = useStore((state) => state.getShouldFreeze());
   const isAutoMobileLayout = useStore((state) => state.currentLayout === 'mobile' && state.getIsAutoMobileLayout());
   const shouldFreeze = _shouldFreeze || isAutoMobileLayout;
-
+  const toggleRightSidebarPin = useStore((state) => state.toggleRightSidebarPin);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
   const handleSearchQueryChange = useCallback(
-    debounce((e) => {
-      const { value } = e.target;
+    debounce((value) => {
       setSearchQuery(value);
-
       if (activeTab === 1) {
         filterComponents(value);
       }
@@ -78,11 +80,10 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
     );
   }
 
-  function renderList(header, items) {
+  function renderList(items) {
     if (isEmpty(items)) return null;
     return (
       <div className="component-card-group-container">
-        <span className="widget-header">{header}</span>
         <div className="component-card-group-wrapper">
           {items.map((component, i) => renderComponentCard(component, i))}
         </div>
@@ -105,6 +106,7 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
             className=" btn-sm tj-tertiary-btn mt-3"
             onClick={() => {
               setFilteredComponents([]);
+              handleSearchQueryChange('');
             }}
           >
             {t('widgetManager.clearQuery', 'clear query')}
@@ -113,62 +115,31 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
       );
     }
 
-    if (filteredComponents.length != componentList.length) {
-      return <>{renderList(undefined, filteredComponents)}</>;
-    } else {
-      const commonSection = { title: t('widgetManager.commonlyUsed', 'commonly used'), items: [] };
-      const layoutsSection = { title: t('widgetManager.layouts', 'layouts'), items: [] };
-      const formSection = { title: t('widgetManager.forms', 'forms'), items: [] };
-      const integrationSection = { title: t('widgetManager.integrations', 'integrations'), items: [] };
-      const otherSection = { title: t('widgetManager.others', 'others'), items: [] };
-      const legacySection = { title: 'Legacy', items: [] };
-
-      const commonItems = ['Table', 'Button', 'Text', 'TextInput', 'DatetimePickerV2', 'Form'];
-      const formItems = [
-        'Form',
-        'TextInput',
-        'NumberInput',
-        'PasswordInput',
-        'TextArea',
-        'EmailInput',
-        'PhoneInput',
-        'CurrencyInput',
-        'ToggleSwitchV2',
-        'DropdownV2',
-        'MultiselectV2',
-        'RichTextEditor',
-        'Checkbox',
-        'RadioButtonV2',
-        'DatetimePickerV2',
-        'DatePickerV2',
-        'TimePicker',
-        'DaterangePicker',
-        'FilePicker',
-        'StarRating',
-      ];
-      const integrationItems = ['Map'];
-      const layoutItems = ['Container', 'Listview', 'Tabs', 'ModalV2'];
-
-      filteredComponents.forEach((f) => {
-        if (commonItems.includes(f)) commonSection.items.push(f);
-        if (formItems.includes(f)) formSection.items.push(f);
-        else if (integrationItems.includes(f)) integrationSection.items.push(f);
-        else if (LEGACY_ITEMS.includes(f)) legacySection.items.push(f);
-        else if (layoutItems.includes(f)) layoutsSection.items.push(f);
-        else otherSection.items.push(f);
-      });
-
-      return (
-        <>
-          {renderList(commonSection.title, commonSection.items)}
-          {renderList(layoutsSection.title, layoutsSection.items)}
-          {renderList(formSection.title, formSection.items)}
-          {renderList(otherSection.title, otherSection.items)}
-          {renderList(integrationSection.title, integrationSection.items)}
-          {renderList(legacySection.title, legacySection.items)}
-        </>
-      );
+    if (filteredComponents.length !== componentList.length) {
+      return <>{renderList(filteredComponents)}</>;
     }
+
+    const sections = Object.entries(sectionConfig).map(([key, config]) => ({
+      title: config.title,
+      items: filteredComponents.filter((component) => config.valueSet.has(component)),
+    }));
+
+    const items = [];
+    sections.forEach((section) => {
+      if (section.items.length > 0) {
+        items.push({
+          title: section.title,
+          isOpen: true,
+          children: renderList(section.items),
+        });
+      }
+    });
+
+    return (
+      <div className="mt-3">
+        <Accordion items={items} isTitleCase={false} />
+      </div>
+    );
   }
 
   const handleChangeTab = (tab) => {
@@ -195,7 +166,7 @@ export const ComponentsManagerTab = ({ darkMode, isModuleEditor }) => {
         <SearchBox
           dataCy={`widget-search-box`}
           initialValue={''}
-          callBack={(e) => handleSearchQueryChange(e)}
+          callBack={(e) => handleSearchQueryChange(e.target.value)}
           onClearCallback={() => {
             setSearchQuery('');
             if (activeTab === 1) {
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx
index 0c6f7327af..1b765e160d 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/DragLayer.jsx
@@ -11,6 +11,11 @@ import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import { noop } from 'lodash';
 
 export const DragLayer = ({ index, component, isModuleTab = false }) => {
+  const [isRightSidebarOpen, toggleRightSidebar] = useStore(
+    (state) => [state.isRightSidebarOpen, state.toggleRightSidebar],
+    shallow
+  );
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
   const { isModuleEditor } = useModuleContext();
   const setShowModuleBorder = useStore((state) => state.setShowModuleBorder, shallow) || noop;
   const [{ isDragging }, drag, preview] = useDrag(
@@ -28,11 +33,14 @@ export const DragLayer = ({ index, component, isModuleTab = false }) => {
 
   useEffect(() => {
     if (isDragging && !isModuleEditor) {
+      if (!isRightSidebarPinned) {
+        toggleRightSidebar(!isRightSidebarOpen);
+      }
       setShowModuleBorder(true);
     } else {
       setShowModuleBorder(false);
     }
-  }, [isDragging, setShowModuleBorder, isModuleEditor]);
+  }, [isDragging, setShowModuleBorder, isModuleEditor, toggleRightSidebar]);
 
   // const size = isModuleTab
   //   ? component.module_container.layouts[currentLayout]
@@ -55,36 +63,43 @@ const CustomDragLayer = ({ size }) => {
     currentOffset: monitor.getSourceClientOffset(),
     item: monitor.getItem(),
   }));
-
+  console.log(currentOffset, 'currentOffset');
   if (!currentOffset) return null;
 
   const canvasWidth = item?.canvasWidth;
   const canvasBounds = item?.canvasRef?.getBoundingClientRect();
   const height = size.height;
 
-  const mainCanvasWidth = document.getElementById('real-canvas')?.offsetWidth || 0;
+  const appCanvasWidth = document.getElementById('real-canvas')?.offsetWidth || 0;
+
+  // Calculate width based on the app canvas's grid
+  let width = (appCanvasWidth * size.width) / NO_OF_GRIDS;
 
-  let width = (mainCanvasWidth * size.width) / NO_OF_GRIDS;
   // Calculate position relative to the current canvas (parent or child)
   const left = currentOffset.x - (canvasBounds?.left || 0);
   const top = currentOffset.y - (canvasBounds?.top || 0);
 
-  // Adjust position and width if exceeding grid bounds
-  if (width >= canvasWidth) {
+  // Ensure width doesn't exceed the current container's width
+  if (width > canvasWidth) {
     width = canvasWidth;
   }
 
+  // Snap width to grid (round to nearest grid unit)
+  const gridUnitWidth = canvasWidth / NO_OF_GRIDS;
+  const gridUnits = Math.round(width / gridUnitWidth);
+  width = gridUnits * gridUnitWidth;
+
   const [x, y] = snapToGrid(canvasWidth, left, top);
   return (
     <div
       style={{
         position: 'fixed',
         pointerEvents: 'none',
-        zIndex: 1000,
         left: canvasBounds?.left || 0,
         top: canvasBounds?.top || 0,
         height: `${height}px`,
         width: `${width}px`,
+        zIndex: -1,
       }}
     >
       <div
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/sectionConfig.js b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/sectionConfig.js
new file mode 100644
index 0000000000..e2bac17b87
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/sectionConfig.js
@@ -0,0 +1,70 @@
+const sectionConfig = {
+  commonlyUsed: {
+    title: 'Commonly used',
+    valueSet: new Set(['Table', 'Button', 'Text', 'TextInput', 'DatetimePickerV2', 'Form']),
+  },
+  buttons: {
+    title: 'Buttons',
+    valueSet: new Set(['Button', 'ButtonGroup']),
+  },
+  data: {
+    title: 'Data',
+    valueSet: new Set(['Table', 'Chart']),
+  },
+  layouts: {
+    title: 'Layouts',
+    valueSet: new Set(['Form', 'ModalV2', 'Container', 'Tabs', 'Listview', 'Kanban', 'Calendar']),
+  },
+  textInputs: {
+    title: 'Text inputs',
+    valueSet: new Set(['TextInput', 'TextArea', 'EmailInput', 'PasswordInput', 'RichTextEditor']),
+  },
+  numberInputs: {
+    title: 'Number inputs',
+    valueSet: new Set(['NumberInput', 'PhoneInput', 'CurrencyInput', 'RangeSlider', 'StarRating']),
+  },
+  selectInputs: {
+    title: 'Select inputs',
+    valueSet: new Set(['DropdownV2', 'MultiselectV2', 'ToggleSwitchV2', 'RadioButtonV2', 'Checkbox', 'TreeSelect']),
+  },
+  dateTimeInputs: {
+    title: 'Date and time inputs',
+    valueSet: new Set(['DaterangePicker', 'DatePickerV2', 'TimePicker', 'DatetimePickerV2']),
+  },
+  navigation: {
+    title: 'Navigation',
+    valueSet: new Set(['Link', 'Pagination', 'Steps']),
+  },
+  media: {
+    title: 'Media',
+    valueSet: new Set(['Icon', 'Image', 'SvgImage', 'PDF', 'Map']),
+  },
+  presentation: {
+    title: 'Presentation',
+    valueSet: new Set([
+      'Text',
+      'Tags',
+      'CircularProgressBar',
+      'Timeline',
+      'Divider',
+      'VerticalDivider',
+      'Spinner',
+      'Statistics',
+      'Timer',
+    ]),
+  },
+  custom: {
+    title: 'Custom',
+    valueSet: new Set(['CustomComponent', 'Html', 'IFrame']),
+  },
+  miscellaneous: {
+    title: 'Miscellaneous',
+    valueSet: new Set(['FilePicker', 'CodeEditor', 'ColorPicker', 'BoundedBox', 'QrScanner']),
+  },
+  legacy: {
+    title: 'Legacy',
+    valueSet: new Set(['Modal', 'Datepicker', 'RadioButton', 'ToggleSwitch', 'DropDown', 'Multiselect']),
+  },
+};
+
+export default sectionConfig;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
index 57da7ec318..f658a69275 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
@@ -27,10 +27,18 @@ const SHOW_ADDITIONAL_ACTIONS = [
   'Button',
   'RichTextEditor',
   'Image',
+  'CodeEditor',
+  'TextArea',
+  'Container',
+  'Form',
   'Divider',
   'VerticalDivider',
   'ModalV2',
+  'Tabs',
+  'RangeSlider',
   'Link',
+  'FilePicker',
+  'Listview',
 ];
 const PROPERTIES_VS_ACCORDION_TITLE = {
   Text: 'Data',
@@ -46,6 +54,8 @@ const PROPERTIES_VS_ACCORDION_TITLE = {
   Divider: 'Data',
   VerticalDivider: 'Data',
   ModalV2: 'Data',
+  Tabs: 'Data',
+  RangeSlider: 'Data',
   Link: 'Data',
 };
 
@@ -144,9 +154,12 @@ export const baseComponentProperties = (
       'DropdownV2',
       'MultiselectV2',
       'Image',
+      'RangeSlider',
       'Divider',
       'VerticalDivider',
       'Link',
+      'FilePicker',
+      'Tabs',
     ],
     Layout: [],
   };
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx
index 48d11cef50..f521f351b2 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/FilePicker.jsx
@@ -1,8 +1,114 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Accordion from '@/_ui/Accordion';
 import { renderElement } from '../Utils';
 import { baseComponentProperties } from './DefaultComponent';
 import { resolveReferences } from '@/_helpers/utils';
+import cx from 'classnames';
+import styles from '@/_ui/Select/styles';
+import useStore from '@/AppBuilder/_stores/store';
+
+import Select from '@/_ui/Select';
+import CodeHinter from '@/AppBuilder/CodeEditor';
+import FxButton from '@/AppBuilder/CodeBuilder/Elements/FxButton';
+
+const FILE_TYPE_OPTIONS = [
+  { value: '*/*', label: 'Any Files' },
+  { value: 'image/*', label: 'Image files' },
+  { value: '.pdf,.doc,.docx,.ppt,.pptx', label: 'Document files' },
+  { value: '.xls,.xlsx,.csv,.ods', label: 'Spreadsheet files' },
+  { value: 'text/*,.md,.json,.xml,.yaml', label: 'Text files' },
+  { value: 'audio/*', label: 'Audio files' },
+  { value: 'video/*', label: 'Video files' },
+  { value: '.zip,.rar,.7z,.tar,.gz', label: 'Archive/Compressed files' },
+];
+
+const FxSelect = ({ label, paramName, initialValue, darkMode, paramUpdated, options, onValueChange }) => {
+  const [isFxActive, setIsFxActive] = useState(false);
+
+  const handleFxButtonClick = () => {
+    paramUpdated({ name: paramName }, 'fxActive', !isFxActive, 'properties');
+    setIsFxActive(!isFxActive);
+  };
+
+  return (
+    <div
+      data-cy={`input-date-display-format`}
+      className="field mb-2 w-100 input-date-display-format"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="field mb-2" onClick={(e) => e.stopPropagation()}>
+        <div className="d-flex justify-content-between mb-1">
+          <label className="form-label">{label}</label>
+          <div className={cx({ 'hide-fx': !isFxActive })}>
+            <FxButton active={isFxActive} onPress={handleFxButtonClick} />
+          </div>
+        </div>
+        {isFxActive ? (
+          <CodeHinter
+            initialValue={initialValue}
+            theme={darkMode ? 'monokai' : 'default'}
+            mode="javascript"
+            lineNumbers={false}
+            onChange={onValueChange}
+          />
+        ) : (
+          <Select
+            options={options}
+            value={initialValue ?? '*/*'}
+            search={true}
+            closeOnSelect={true}
+            onChange={onValueChange}
+            fuzzySearch
+            placeholder="Select.."
+            useCustomStyles={true}
+            styles={styles(darkMode, '100%', 32, { fontSize: '12px' })}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+/** Remove minFileCount and maxFileCount validations if multiple file selection is disabled */
+const getValidations = (componentMeta, component) => {
+  const validations = Object.keys(componentMeta.validation || {});
+  const enableMultipleValue = resolveReferences(component.component.definition.properties.enableMultiple?.value ?? false);
+  const enableMultipleFxActive = component.component.definition.properties.enableMultiple?.fxActive;
+
+  if (!enableMultipleValue && !enableMultipleFxActive) {
+    return validations.filter((validation) => !['minFileCount', 'maxFileCount'].includes(validation));
+  }
+  return validations;
+};
+
+const getPropertiesBySection = (propertiesMeta) => {
+  const properties = [];
+  const additionalActions = [];
+  const dataProperties = [];
+
+  for (const [key, value] of Object.entries(propertiesMeta)) {
+    if (value?.section === 'additionalActions') {
+      additionalActions.push(key);
+    } else if (value?.accordian === 'Data') {
+      dataProperties.push(key);
+    } else {
+      properties.push(key);
+    }
+  }
+  return { properties, additionalActions, dataProperties };
+};
+
+const getConditionalAccordionItems = (component, renderCustomElement) => {
+  const parseContent = resolveReferences(component.component.definition.properties.parseContent?.value ?? false);
+  const options = ['parseContent'];
+  let renderOptions = options.map((option) => renderCustomElement(option));
+
+  const conditionalOptions = [{ name: 'parseFileType', condition: parseContent }];
+  conditionalOptions.forEach(({ name, condition }) => {
+    if (condition) renderOptions.push(renderCustomElement(name));
+  });
+  return renderOptions;
+};
 
 export const FilePicker = ({ componentMeta, darkMode, ...restProps }) => {
   const {
@@ -16,38 +122,22 @@ export const FilePicker = ({ componentMeta, darkMode, ...restProps }) => {
     allComponents,
   } = restProps;
 
-  const renderCustomElement = (param, paramType = 'properties') => {
-    return renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState);
-  };
-  const conditionalAccordionItems = (component) => {
-    const parseContent = resolveReferences(component.component.definition.properties.parseContent?.value ?? false);
-    const accordionItems = [];
-    const options = ['parseContent'];
+  const resolvedValidations = useStore((state) => state.getResolvedComponent(component.id)?.validation);
+  const fileTypeValue = resolvedValidations?.fileType;
 
-    let renderOptions = [];
+  const renderCustomElement = (param, paramType = 'properties') =>
+    renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState);
 
-    options.map((option) => renderOptions.push(renderCustomElement(option)));
+  // Debug logs
+  // console.log('component.component.definition', component.component.definition);
 
-    const conditionalOptions = [{ name: 'parseFileType', condition: parseContent }];
-
-    conditionalOptions.map(({ name, condition }) => {
-      if (condition) renderOptions.push(renderCustomElement(name));
-    });
-
-    accordionItems.push({
-      title: 'Options',
-      children: renderOptions,
-    });
-    return accordionItems;
-  };
-
-  const properties = Object.keys(componentMeta.properties);
   const events = Object.keys(componentMeta.events);
-  const validations = Object.keys(componentMeta.validation || {});
+  const validations = getValidations(componentMeta, component);
 
-  const filteredProperties = properties.filter(
-    (property) => property !== 'parseContent' && property !== 'parseFileType'
-  );
+  // console.log('validations', validations, enableMultipleValue, component.component.definition.properties.enableMultiple?.value, enableMultipleFxActive);
+
+  const { additionalActions, dataProperties } = getPropertiesBySection(componentMeta?.properties);
+  const filteredProperties = [...dataProperties];
 
   const accordionItems = baseComponentProperties(
     filteredProperties,
@@ -62,10 +152,26 @@ export const FilePicker = ({ componentMeta, darkMode, ...restProps }) => {
     apps,
     allComponents,
     validations,
-    darkMode
+    darkMode,
+    [],
+    additionalActions
   );
 
-  accordionItems.splice(1, 0, ...conditionalAccordionItems(component));
+  // Insert conditional accordion items
+  accordionItems[0].children.push(...getConditionalAccordionItems(component, renderCustomElement));
+
+  // Insert FxSelect for file type
+  accordionItems[2].children[1] = (
+    <FxSelect
+      label={'File type'}
+      paramName="fileType"
+      initialValue={fileTypeValue}
+      darkMode={darkMode}
+      paramUpdated={paramUpdated}
+      options={FILE_TYPE_OPTIONS}
+      onValueChange={(value) => paramUpdated({ name: 'fileType' }, 'value', value, 'validation')}
+    />
+  );
 
   return <Accordion items={accordionItems} />;
 };
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/Form.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/Form.jsx
new file mode 100644
index 0000000000..ee28c0ddee
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/Form.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import Accordion from '@/_ui/Accordion';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { useFormLogic } from './_hooks';
+import { processComponentMeta } from './utils/componentMetaUtils';
+import { createAccordionItems } from './config/accordionConfig';
+import { DataSection } from './_components';
+import './styles.scss';
+
+export const Form = ({
+  componentMeta,
+  darkMode,
+  layoutPropertyChanged,
+  component,
+  paramUpdated,
+  dataQueries,
+  currentState,
+  eventsChanged,
+  apps,
+  allComponents,
+  pages,
+}) => {
+  const resolveReferences = useStore((state) => state.resolveReferences, shallow);
+
+  // Use the combined form logic hook
+  const formLogic = useFormLogic(component, paramUpdated);
+
+  // Get resolved custom schema
+  const resolvedCustomSchema = resolveReferences('canvas', component.component.definition.properties.advanced.value);
+
+  // Process component metadata
+  const { tempComponentMeta, properties, additionalActions, deprecatedProperties, events, validations } =
+    processComponentMeta(componentMeta, component, allComponents, resolvedCustomSchema);
+
+  // Create render data element function
+  const renderDataElement = DataSection({
+    component,
+    componentMeta,
+    paramUpdatedInterceptor: formLogic.paramUpdatedInterceptor,
+    dataQueries,
+    currentState,
+    allComponents,
+    darkMode,
+    resolvedCustomSchema,
+    source: formLogic.source,
+    JSONData: formLogic.JSONData,
+    setCodeEditorView: formLogic.setCodeEditorView,
+    currentStatusRef: formLogic.currentStatusRef,
+    saveDataSection: formLogic.saveDataSection,
+    openModal: formLogic.openModal,
+    setParentModalState: formLogic.setOpenModal,
+    performColumnMapping: formLogic.performColumnMapping,
+    existingResolvedJsonData: formLogic.existingResolvedJsonData,
+    savedSourceValue: formLogic.savedSourceValue.current,
+    resolveReferences,
+    isLoading: formLogic.isLoading,
+  });
+
+  // Create accordion items
+  const accordionItems = createAccordionItems({
+    properties,
+    events,
+    component,
+    componentMeta: tempComponentMeta,
+    layoutPropertyChanged,
+    paramUpdated: formLogic.paramUpdatedInterceptor,
+    dataQueries,
+    currentState,
+    eventsChanged,
+    apps,
+    allComponents,
+    validations,
+    darkMode,
+    pages,
+    additionalActions,
+    deprecatedProperties,
+    renderDataElement,
+  });
+
+  return (
+    <>
+      <Accordion items={accordionItems} />
+    </>
+  );
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/ColumnMappingComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/ColumnMappingComponent.jsx
new file mode 100644
index 0000000000..0401c22d57
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/ColumnMappingComponent.jsx
@@ -0,0 +1,507 @@
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { Button } from '@/components/ui/Button/Button';
+import Checkbox from '@/components/ui/Checkbox/Index';
+import cx from 'classnames';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import Modal from 'react-bootstrap/Modal';
+import Dropdown from '@/components/ui/Dropdown/Index';
+import Input from '@/components/ui/Input/Index';
+import { getInputTypeOptions, isTrueValue, isPropertyFxControlled } from '../utils/utils';
+import { FORM_STATUS } from '../constants';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { extractAndReplaceReferencesFromString } from '@/AppBuilder/_stores/ast';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import { useColumnBuilder, useGroupedColumns, useCheckboxStates } from './hooks/useColumnMapping';
+
+// Constants for section display names
+const SECTION_DISPLAY_NAMES = {
+  existing: 'Existing',
+  isCustomField: 'Custom fields',
+  isNew: 'New',
+  isRemoved: 'Removed',
+};
+
+/**
+ * Reusable editable icon component
+ */
+const EditableIcon = ({ darkMode }) => (
+  <div className="tw-mr-2 editable-icon">
+    <SolidIcon name="editable" width="12" height="12" fill={darkMode ? '#4C5155' : '#C1C8CD'} viewBox="0 0 12 12" />
+  </div>
+);
+
+/**
+ * Modal header component
+ */
+const ModalHeader = ({ currentStatus, onClose }) => (
+  <div className="column-mapping-modal-header tw-flex tw-p-4 tw-flex-col tw-items-start tw-gap-2 tw-self-stretch tw-border-b bg-white">
+    <div className="tw-flex tw-justify-between tw-items-center tw-w-full" style={{ height: '28px' }}>
+      <h4 className="text-default tw-font-ibmplex tw-font-medium tw-leading-5 tw-m-0">
+        {currentStatus !== FORM_STATUS.GENERATE_FIELDS ? 'Manage fields' : 'Map columns'}
+      </h4>
+      <button className="tw-bg-transparent tw-border-0 tw-p-0 tw-cursor-pointer hover:tw-opacity-70" onClick={onClose}>
+        <SolidIcon name="remove" width="16" height="16" fill="#6A727C" />
+      </button>
+    </div>
+  </div>
+);
+
+/**
+ * Modal footer component
+ */
+const ModalFooter = ({ currentStatus, refreshData, handleSubmit, isSaving, allSectionsEmpty }) => (
+  <div
+    className={`tw-flex ${
+      currentStatus !== FORM_STATUS.GENERATE_FIELDS ? 'tw-justify-between' : 'tw-justify-end'
+    } tw-items-center`}
+  >
+    {currentStatus !== FORM_STATUS.GENERATE_FIELDS && (
+      <Button fill={'#ACB2B9'} leadingIcon={'arrowdirectionloop'} variant="outline" onClick={refreshData}>
+        Refresh data
+      </Button>
+    )}
+    <Button
+      variant="primary"
+      onClick={handleSubmit}
+      disabled={isSaving || allSectionsEmpty}
+      leadingIcon={currentStatus !== FORM_STATUS.GENERATE_FIELDS ? 'save' : 'plus'}
+      isLoading={isSaving}
+      loaderText={currentStatus !== FORM_STATUS.GENERATE_FIELDS ? 'Saving' : 'Generating'}
+    >
+      {currentStatus !== FORM_STATUS.GENERATE_FIELDS ? 'Save' : 'Generate form'}
+    </Button>
+  </div>
+);
+
+/**
+ * Loader component
+ */
+const LoaderComponent = () => (
+  <div style={{ width: '100%', height: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <center>
+      <Loader width="32" absolute={false} />
+    </center>
+  </div>
+);
+
+/**
+ * Disable the checkbox if the property is fx controlled and it will not be included while selectAll is called.
+ * This is to prevent users from changing the state of fx controlled properties directly.
+ * Instead, they should use the fx editor to manage these properties.
+ */
+
+const ColumnMappingRow = ({
+  column,
+  onChange,
+  onCheckboxChange,
+  index,
+  darkMode = false,
+  disabled = false,
+  sectionType,
+}) => {
+  if (!column) return null;
+
+  const inputTypeOptions = getInputTypeOptions(darkMode);
+
+  const isMandatoryFxControlled = isPropertyFxControlled(column.mandatory);
+
+  const handleLabelChange = (e) => {
+    onChange?.({
+      ...column,
+      label: e.target.value,
+    });
+  };
+
+  const handleMandatoryChange = (checked) => {
+    if (typeof column.mandatory === 'object') {
+      onChange?.({
+        ...column,
+        mandatory: {
+          ...column.mandatory,
+          value: checked,
+        },
+      });
+    } else {
+      onChange?.({
+        ...column,
+        mandatory: checked,
+      });
+    }
+  };
+
+  const handleInputTypeChange = (value) => {
+    onChange?.({
+      ...column,
+      componentType: value,
+    });
+  };
+
+  const shouldHideCheckbox = sectionType === 'isCustomField';
+
+  return (
+    <div className="tw-flex tw-items-center tw-w-full tw-py-3 tw-px-2 tw-border-b tw-border-border-lighter column-mapping-row">
+      {/* Checkbox */}
+      <div className={cx(`tw-w-6`, { 'tw-invisible': disabled || shouldHideCheckbox })}>
+        <Checkbox checked={column.selected} onCheckedChange={onCheckboxChange} />
+      </div>
+
+      {/* Column Name and Type */}
+      <div className="name-column tw-flex tw-items-center base-regular tw-justify-between">
+        {column.key ? (
+          <>
+            <span className="base-regular">{column.key}</span>
+            <span className="tw-ml-2 data-type">{column.dataType}</span>
+          </>
+        ) : (
+          <span className="no-mapped-column small-medium">No mapped columns</span>
+        )}
+      </div>
+
+      {/* Mapped To */}
+      <div
+        className={cx('arrow-column tw-flex tw-justify-center', {
+          'tw-invisible': column.key === undefined,
+        })}
+      >
+        <SolidIcon name="arrowright" width="24" height="24" fill="#CCD1D5" />
+      </div>
+
+      {/* Input Type Selector */}
+      <div className="mapped-column tw-relative hide-border">
+        <Dropdown
+          options={inputTypeOptions}
+          name={`dropdown-${index}`}
+          id={`dropdown-${index}`}
+          size="small"
+          zIndex={9999}
+          value={column.componentType || 'TextInput'}
+          leadingIcon={inputTypeOptions[column.componentType || 'TextInput'].leadingIcon}
+          onChange={handleInputTypeChange}
+          width="140px"
+          disabled={disabled}
+        />
+      </div>
+
+      {/* Input Label */}
+      <div className="type-column rows tw-flex-1 hide-border">
+        <Input
+          value={column.label}
+          onChange={handleLabelChange}
+          placeholder="Input label"
+          size="small"
+          disabled={disabled}
+        />
+      </div>
+
+      {/* Mandatory Checkbox */}
+      <div className={cx(`mandatory-column rows tw-flex tw-justify-end`, { 'tw-invisible': disabled })}>
+        <Checkbox
+          checked={isTrueValue(column.mandatory.value)}
+          onCheckedChange={handleMandatoryChange}
+          disabled={isMandatoryFxControlled} // Disable if fx controlled
+        />
+      </div>
+    </div>
+  );
+};
+
+const RenderSection = ({
+  mappedColumns = [],
+  setMappedColumns,
+  darkMode,
+  sectionType,
+  sectionDisplayName,
+  disabled = false,
+}) => {
+  const columnsArray = useMemo(() => {
+    return Array.isArray(mappedColumns) ? mappedColumns : [];
+  }, [mappedColumns]);
+
+  const checkboxStates = useCheckboxStates(columnsArray);
+
+  const { isAllSelected, isIntermediateSelected, isAllSelectedMandatory, isIntermediateMandatory } = checkboxStates;
+
+  const handleSelectAll = useCallback(
+    (checked) => {
+      if (columnsArray.length > 0) {
+        const updatedColumns = columnsArray.map((col) => ({
+          ...col,
+          selected: checked,
+        }));
+        setMappedColumns(updatedColumns);
+      }
+    },
+    [columnsArray, setMappedColumns]
+  );
+
+  const handleSelectAllMandatory = useCallback(
+    (checked) => {
+      if (columnsArray.length > 0) {
+        const updatedColumns = columnsArray.map((col) => {
+          if (isPropertyFxControlled(col.mandatory)) {
+            return col;
+          }
+
+          return {
+            ...col,
+            mandatory: {
+              ...col.mandatory,
+              value: checked,
+            },
+          };
+        });
+        setMappedColumns(updatedColumns);
+      }
+    },
+    [columnsArray, setMappedColumns]
+  );
+
+  const handleColumnSelect = useCallback(
+    (columnName, checked) => {
+      if (columnsArray.length > 0) {
+        const updatedColumns = columnsArray.map((col) => {
+          if (col.name !== columnName) {
+            return col;
+          }
+
+          return {
+            ...col,
+            selected: checked,
+          };
+        });
+        setMappedColumns(updatedColumns);
+      }
+    },
+    [columnsArray, setMappedColumns]
+  );
+
+  const handleColumnChange = useCallback(
+    (columnName, changes) => {
+      if (columnsArray.length > 0) {
+        const updatedColumns = columnsArray.map((col) => (col.name === columnName ? { ...col, ...changes } : col));
+        setMappedColumns(updatedColumns);
+      }
+    },
+    [columnsArray, setMappedColumns]
+  );
+
+  const shouldHideSelectAll = sectionType === 'isCustomField';
+
+  const renderHeader = () => {
+    return (
+      <div className="tw-flex tw-items-center tw-w-full tw-py-[10px] tw-px-2 header-row column-mapping-row">
+        <div className={cx(`tw-w-6 header-column`, { 'tw-invisible': disabled || shouldHideSelectAll })}>
+          <Checkbox
+            checked={isAllSelected || isIntermediateSelected}
+            onCheckedChange={handleSelectAll}
+            intermediate={isIntermediateSelected}
+          />
+        </div>
+        <div className="name-column header-column">
+          <span className="text-default small-medium">Column name</span>
+        </div>
+        <div className="arrow-column header-column" />
+        <div className="mapped-column header-column tw-flex">
+          <EditableIcon darkMode={darkMode} />
+          <span className="text-default small-medium">Mapped to</span>
+        </div>
+        <div className="type-column tw-flex-1 header-column tw-flex">
+          <EditableIcon darkMode={darkMode} />
+          <span className="text-default small-medium">Input label</span>
+        </div>
+        <div className="mandatory-column header-column tw-flex tw-justify-end">
+          <span className="text-default small-medium tw-mr-2">Mandatory?</span>
+          <div className={cx({ 'tw-invisible': disabled })}>
+            <Checkbox
+              checked={isAllSelectedMandatory || isIntermediateMandatory}
+              onCheckedChange={handleSelectAllMandatory}
+              intermediate={!isAllSelectedMandatory && isIntermediateMandatory}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="tw-w-full column-mapping-modal-body-content">
+      <div
+        className={cx('large-medium column-mapping-modal-title', {
+          new: sectionType === 'isNew',
+          removed: sectionType === 'isRemoved',
+          'tw-hidden': sectionDisplayName === '',
+        })}
+      >
+        {sectionDisplayName}
+      </div>
+
+      {renderHeader()}
+
+      <div>
+        {columnsArray.length > 0 ? (
+          columnsArray.map((column, index) => (
+            <ColumnMappingRow
+              key={column.name}
+              column={columnsArray.find((c) => c.name === column.name)}
+              onCheckboxChange={(checked) => handleColumnSelect(column.name, checked)}
+              onChange={(changes) => handleColumnChange(column.name, changes)}
+              index={index}
+              darkMode={darkMode}
+              disabled={disabled}
+              sectionType={sectionType}
+            />
+          ))
+        ) : (
+          <div className="tw-py-4 tw-text-center tw-text-gray-500">No {sectionDisplayName.toLowerCase()} available</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ColumnMappingComponent = ({
+  isOpen,
+  onClose,
+  darkMode = false,
+  onSubmit,
+  currentStatusRef,
+  component,
+  newResolvedJsonData,
+  existingResolvedJsonData,
+  source,
+  isDataLoading,
+}) => {
+  const { resolveReferences, getComponentDefinition, getFormFields } = useStore(
+    (state) => ({
+      resolveReferences: state.resolveReferences,
+      getComponentDefinition: state.getComponentDefinition,
+      getFormFields: state.getFormFields,
+    }),
+    shallow
+  );
+
+  const componentNameIdMapping = useStore((state) => state.modules.canvas.componentNameIdMapping, shallow);
+  const queryNameIdMapping = useStore((state) => state.modules.canvas.queryNameIdMapping, shallow);
+  const runQuery = useStore((state) => state.queryPanel.runQuery, shallow);
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [refreshedColumns, setRefreshedColumns] = useState([]);
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    setShowLoader(isDataLoading);
+  }, [isDataLoading]);
+
+  const currentStatus = currentStatusRef.current;
+
+  const columnsToUse = useColumnBuilder(
+    component,
+    currentStatus,
+    newResolvedJsonData,
+    existingResolvedJsonData,
+    refreshedColumns?.length === 0 ? newResolvedJsonData : refreshedColumns,
+    getFormFields,
+    getComponentDefinition
+  );
+
+  const { groupedColumns, sectionTypes, updateSectionColumns } = useGroupedColumns(columnsToUse, currentStatus);
+
+  const refreshData = useCallback(async () => {
+    setShowLoader(true);
+    currentStatusRef.current = FORM_STATUS.REFRESH_FIELDS;
+    const res = extractAndReplaceReferencesFromString(source.value, componentNameIdMapping, queryNameIdMapping);
+    const { allRefs, valueWithBrackets } = res;
+
+    const queryRefs = allRefs
+      .filter((ref) => ref.entityType === 'queries')
+      .filter((ref, index, self) => index === self.findIndex((r) => r.entityNameOrId === ref.entityNameOrId));
+
+    await Promise.all(
+      queryRefs.map(async (ref) => {
+        const queryId = ref.entityNameOrId;
+        await runQuery(queryId, '', false, 'edit');
+      })
+    );
+
+    const resolvedValue = resolveReferences('canvas', valueWithBrackets);
+    setRefreshedColumns(resolvedValue);
+    setShowLoader(false);
+  }, [source.value, componentNameIdMapping, queryNameIdMapping, runQuery, resolveReferences, currentStatusRef]);
+
+  const handleSubmit = useCallback(() => {
+    setIsSaving(true);
+    const flatColumns = Object.entries(groupedColumns)
+      .flatMap(([, columns]) => columns)
+      .filter((col) => !col.isCustomField);
+    const combinedColumns = flatColumns.map((column) => {
+      if (!column.selected) {
+        return {
+          ...column,
+          isRemoved: true,
+        };
+      } else return column;
+    });
+
+    onSubmit?.(combinedColumns);
+  }, [groupedColumns, onSubmit]);
+
+  // Get display name for section type
+  const getSectionDisplayName = useCallback((sectionType) => {
+    return SECTION_DISPLAY_NAMES[sectionType] || '';
+  }, []);
+
+  const allSectionsEmpty = useMemo(() => {
+    return Object.values(groupedColumns).every((sectionColumns) => {
+      return Array.isArray(sectionColumns) ? sectionColumns.every((col) => !col.selected) : true;
+    });
+  }, [groupedColumns]);
+
+  const modalBody = (
+    <>
+      <div className="tw-w-full column-mapping-modal-body-container tw-max-h-[500px] tw-overflow-y-auto tw-p-4 tw-pb-0">
+        {showLoader && <LoaderComponent />}
+
+        {!showLoader && (
+          <div>
+            {sectionTypes.map((sectionType) => {
+              return (
+                groupedColumns[sectionType]?.length > 0 && (
+                  <RenderSection
+                    key={sectionType}
+                    mappedColumns={groupedColumns[sectionType]}
+                    setMappedColumns={(updatedColumns) => updateSectionColumns(sectionType, updatedColumns)}
+                    darkMode={darkMode}
+                    sectionType={sectionType}
+                    sectionDisplayName={
+                      currentStatus !== FORM_STATUS.GENERATE_FIELDS ? getSectionDisplayName(sectionType) : ''
+                    }
+                    disabled={sectionType === 'isRemoved'}
+                  />
+                )
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className="tw-p-4 tw-border-t tw-border-border-lighter">
+        <ModalFooter
+          currentStatus={currentStatus}
+          refreshData={refreshData}
+          handleSubmit={handleSubmit}
+          isSaving={isSaving}
+          allSectionsEmpty={allSectionsEmpty}
+        />
+      </div>
+    </>
+  );
+
+  return (
+    <Modal show={isOpen} onHide={onClose} size="lg">
+      <ModalHeader currentStatus={currentStatus} onClose={onClose} />
+      <div className="column-mapping-modal-body">{modalBody}</div>
+    </Modal>
+  );
+};
+
+export default ColumnMappingComponent;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSection.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSection.jsx
new file mode 100644
index 0000000000..aca6ee612f
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSection.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { renderElement } from '../../../Utils';
+import { DataSectionWrapper } from './index';
+
+export const DataSection = ({
+  component,
+  componentMeta,
+  paramUpdatedInterceptor,
+  dataQueries,
+  currentState,
+  allComponents,
+  darkMode,
+  resolvedCustomSchema,
+  source,
+  JSONData,
+  setCodeEditorView,
+  currentStatusRef,
+  saveDataSection,
+  openModal,
+  setParentModalState,
+  performColumnMapping,
+  existingResolvedJsonData,
+  savedSourceValue,
+  resolveReferences,
+  isLoading = false,
+}) => {
+  return () => (
+    <div className={`${resolvedCustomSchema ? 'tw-pointer-events-none opacity-60' : ''}`}>
+      {componentMeta?.properties &&
+        Object.keys(componentMeta.properties).map((property) => {
+          if (componentMeta?.properties[property]?.section !== 'data') return null;
+
+          // Mutating the component definition properties to set the generateFormFrom source
+          component.component.definition.properties.generateFormFrom = source;
+          component.component.definition.properties.JSONData = JSONData;
+          const focusCodeEditor = property === 'JSONData' ? setCodeEditorView : undefined;
+
+          return renderElement(
+            component,
+            componentMeta,
+            paramUpdatedInterceptor,
+            dataQueries,
+            property,
+            'properties',
+            currentState,
+            allComponents,
+            darkMode,
+            '',
+            null,
+            focusCodeEditor
+          );
+        })}
+      {source.value !== 'jsonSchema' && (
+        <DataSectionWrapper
+          currentStatusRef={currentStatusRef}
+          source={source}
+          JSONData={JSONData}
+          component={component}
+          darkMode={darkMode}
+          saveDataSection={saveDataSection}
+          openModalFromParent={openModal}
+          setParentModalState={setParentModalState}
+          performColumnMapping={performColumnMapping}
+          newResolvedJsonData={resolveReferences('canvas', JSONData.value)}
+          existingResolvedJsonData={existingResolvedJsonData}
+          savedSourceValue={savedSourceValue}
+          isLoading={isLoading}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionUI.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionUI.jsx
new file mode 100644
index 0000000000..c557644440
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionUI.jsx
@@ -0,0 +1,201 @@
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { Button } from '@/components/ui/Button/Button';
+import { LabeledDivider, ColumnMappingComponent, FormFieldsList, FieldPopoverContent } from './index';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import { useDropdownState } from '../_hooks/useDropdownState';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { findNextElementTop, mergeFieldsWithComponentDefinition } from '../utils/utils';
+import { createNewComponentFromMeta } from '../utils/fieldOperations';
+import { FORM_STATUS, COMPONENT_LAYOUT_DETAILS } from '../constants';
+import { checkDiff } from '@/AppBuilder/Widgets/componentUtils';
+
+/* IMPORTANT - mandatory and selected (visibility) properties are objects with value and fxActive 
+               This is to support dynamic values and fx expressions in the form fields.
+               When using these properties, ensure to access the value like so: field.mandatory.value
+               or field.selected.value.
+               Rest all the fields are directly accessible as strings or booleans.
+               For example: field.label, field.name, field.value, etc.
+*/
+
+const DataSectionUI = ({
+  component,
+  darkMode = false,
+  currentStatusRef,
+  openModalFromParent = false,
+  setParentModalState,
+  performColumnMapping,
+  newResolvedJsonData,
+  existingResolvedJsonData,
+  source,
+  JSONData,
+  isLoading: isDataLoading,
+  savedSourceValue = '',
+}) => {
+  const { getChildComponents, currentLayout, getComponentDefinition, performBatchComponentOperations, saveFormFields } =
+    useStore(
+      (state) => ({
+        getChildComponents: state.getChildComponents,
+        currentLayout: state.currentLayout,
+        getComponentDefinition: state.getComponentDefinition,
+        performBatchComponentOperations: state.performBatchComponentOperations,
+        saveFormFields: state.saveFormFields,
+      }),
+      shallow
+    );
+
+  const formFields = useStore((state) => state.getFormFields(component.id), checkDiff);
+
+  const formFieldsWithComponentDefinition = useMemo(
+    () => mergeFieldsWithComponentDefinition(formFields, getComponentDefinition),
+    [formFields, getComponentDefinition]
+  );
+
+  const { handleDropdownOpen, handleDropdownClose, shouldPreventPopoverClose } = useDropdownState();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showAddFieldPopover, setShowAddFieldPopover] = useState(false);
+  const addFieldButtonRef = useRef(null);
+
+  const hideManageFields = formFields.length === 0 || savedSourceValue === 'rawJson';
+
+  useEffect(() => {
+    if (openModalFromParent && openModalFromParent !== isModalOpen) {
+      setIsModalOpen(true);
+    } else if (!openModalFromParent) setIsModalOpen(false);
+  }, [openModalFromParent, isModalOpen]);
+
+  const handleDeleteField = (field) => {
+    const updatedFields = formFields.filter((f) => f.componentId !== field.componentId);
+    let operations = {
+      updated: {},
+      added: {},
+      deleted: [field.componentId],
+    };
+    performBatchComponentOperations(operations);
+    saveFormFields(component.id, updatedFields, 'canvas');
+  };
+
+  const handleAddField = (newField) => {
+    const updatedFields = {
+      componentType: newField.componentType,
+      name: 'custom',
+      mandatory: newField.mandatory,
+      label: newField.label,
+      value: '',
+      placeholder: newField.placeholder,
+      selected: true,
+      isCustomField: true,
+    };
+    const childComponents = getChildComponents(component?.id);
+    // Get the last position of the child components
+    const nextElementsTop = findNextElementTop(childComponents, currentLayout);
+    const { added = {} } = createNewComponentFromMeta(
+      updatedFields,
+      component.id,
+      nextElementsTop + COMPONENT_LAYOUT_DETAILS.spacing
+    );
+    let operations = {
+      updated: {},
+      added: {},
+      deleted: [],
+    };
+    operations.added[added.id] = added;
+
+    performBatchComponentOperations(operations);
+    saveFormFields(component.id, [...formFields, { componentId: added.id, isCustomField: true }], 'canvas');
+    setShowAddFieldPopover(false);
+  };
+
+  const renderManageFieldsIcon = () => {
+    return (
+      <Button
+        iconOnly
+        leadingIcon="sliders"
+        variant="ghost"
+        size="small"
+        onClick={() => {
+          currentStatusRef.current = FORM_STATUS.MANAGE_FIELDS;
+          setParentModalState(true);
+          setIsModalOpen(true);
+        }}
+      />
+    );
+  };
+
+  const renderAddCustomFieldButton = () => {
+    return (
+      <OverlayTrigger
+        trigger="click"
+        placement="left"
+        show={showAddFieldPopover}
+        onToggle={(show) => {
+          if (!show && shouldPreventPopoverClose) {
+            return;
+          }
+          setShowAddFieldPopover(show);
+        }}
+        rootClose
+        overlay={
+          <Popover id="add-field-popover" className="shadow form-fields-column-popover">
+            <FieldPopoverContent
+              field={undefined}
+              onChange={handleAddField}
+              onClose={() => setShowAddFieldPopover(false)}
+              darkMode={darkMode}
+              mode="add"
+              onDropdownOpen={handleDropdownOpen}
+              onDropdownClose={handleDropdownClose}
+              shouldPreventPopoverClose={shouldPreventPopoverClose}
+            />
+          </Popover>
+        }
+      >
+        <Button ref={addFieldButtonRef} iconOnly leadingIcon="plus" variant="ghost" size="small" />
+      </OverlayTrigger>
+    );
+  };
+
+  const closeModal = useCallback(() => {
+    setIsModalOpen(false);
+    setParentModalState(false);
+  }, [setIsModalOpen]);
+
+  return (
+    <>
+      <div className="tw-flex tw-justify-between tw-items-center tw-gap-1.5">
+        <div className="tw-flex-1">
+          <LabeledDivider label="Fields" rightContentCount={hideManageFields ? 1 : 2} />
+        </div>
+        <div className="tw-flex tw-items-center">
+          {!hideManageFields && renderManageFieldsIcon()}
+          {renderAddCustomFieldButton()}
+        </div>
+      </div>
+      <FormFieldsList
+        fields={formFieldsWithComponentDefinition}
+        onDeleteField={handleDeleteField}
+        currentStatusRef={currentStatusRef}
+        onSave={performColumnMapping}
+      />
+      {isModalOpen && (
+        <ColumnMappingComponent
+          isOpen={isModalOpen}
+          onClose={closeModal}
+          darkMode={darkMode}
+          currentStatusRef={currentStatusRef}
+          onSubmit={performColumnMapping}
+          // Add new props for buildColumns
+          component={component}
+          newResolvedJsonData={newResolvedJsonData}
+          existingResolvedJsonData={existingResolvedJsonData}
+          source={source}
+          JSONData={JSONData}
+          isDataLoading={isDataLoading}
+        />
+      )}
+    </>
+  );
+};
+
+export default DataSectionUI;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionWrapper.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionWrapper.jsx
new file mode 100644
index 0000000000..f5fd9a48e8
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/DataSectionWrapper.jsx
@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { DataSectionUI } from './index';
+import { isEqual } from 'lodash';
+import { FORM_STATUS } from '../constants';
+
+const DataSectionWrapper = ({
+  source,
+  JSONData,
+  component,
+  performColumnMapping,
+  currentStatusRef,
+  savedSourceValue,
+  ...restProps
+}) => {
+  const getFormDataSectionData = useStore((state) => state.getFormDataSectionData, shallow);
+
+  useEffect(() => {
+    const existingData = getFormDataSectionData(component?.id);
+
+    const isFormGenerated = existingData && existingData.generateFormFrom && existingData.JSONData;
+    const sourceChanged = !isEqual(savedSourceValue, source?.value);
+    const JSONDataChanged = !isEqual(existingData?.JSONData?.value, JSONData?.value);
+
+    // Case: Form not generated yet
+    if (!isFormGenerated) {
+      currentStatusRef.current = FORM_STATUS.GENERATE_FIELDS;
+    }
+    // Case: Form is already generated
+    else {
+      // Source changed - need to regenerate form
+      if (sourceChanged) {
+        currentStatusRef.current = FORM_STATUS.GENERATE_FIELDS;
+      }
+      // Source is same but JSON data changed - refresh form
+      else if (JSONDataChanged) {
+        currentStatusRef.current = FORM_STATUS.REFRESH_FIELDS;
+      }
+      // No changes
+      else {
+        currentStatusRef.current = FORM_STATUS.REFRESH_FIELDS;
+      }
+    }
+  }, [source, JSONData, component?.id, getFormDataSectionData, currentStatusRef, savedSourceValue]);
+
+  // You'll need to return the actual button component here instead of null
+  return (
+    <DataSectionUI
+      component={component}
+      {...restProps}
+      currentStatusRef={currentStatusRef}
+      performColumnMapping={performColumnMapping}
+      source={source}
+      JSONData={JSONData}
+      savedSourceValue={savedSourceValue}
+    />
+  );
+};
+
+export default DataSectionWrapper;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FieldPopoverContent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FieldPopoverContent.jsx
new file mode 100644
index 0000000000..0d0bf8c215
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FieldPopoverContent.jsx
@@ -0,0 +1,233 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { isEqual } from 'lodash';
+import CodeHinter from '@/AppBuilder/CodeEditor';
+import Dropdown from '@/components/ui/Dropdown/Index';
+import Popover from 'react-bootstrap/Popover';
+import { Button } from '@/components/ui/Button/Button';
+import { getInputTypeOptions, isPropertyFxControlled, isTrueValue } from '../utils/utils';
+
+const FieldPopoverContent = ({
+  field,
+  onChange,
+  onClose,
+  darkMode = false,
+  mode = 'edit',
+  onDropdownOpen,
+  onDropdownClose,
+  setSelectedComponents,
+}) => {
+  const [localField, setLocalField] = useState(field ?? {});
+
+  useEffect(() => {
+    setLocalField({ ...field });
+  }, [field]);
+
+  // Memoize expensive computations
+  const isVisibilityFxControlled = useMemo(
+    () => (mode === 'edit' ? isPropertyFxControlled(localField.visibility) : false),
+    [mode, localField.visibility]
+  );
+
+  const isCurrentlyVisibility = useMemo(
+    () => (mode === 'edit' ? isTrueValue(localField.visibility?.value) : false),
+    [mode, localField.visibility?.value]
+  );
+
+  const inputTypeOptions = useMemo(() => getInputTypeOptions(darkMode), [darkMode]);
+
+  const handleFieldChange = useCallback((property, value) => {
+    if (property === 'mandatory' || property === 'visibility') {
+      return setLocalField((prevField) => ({
+        ...prevField,
+        [property]: { ...prevField[property], value },
+      }));
+    }
+    setLocalField((prevField) => ({ ...prevField, [property]: value }));
+  }, []);
+
+  const handleFxChange = useCallback((property, fxActive) => {
+    setLocalField((prevField) => ({
+      ...prevField,
+      [property]: { ...prevField[property], fxActive },
+    }));
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    onChange?.(localField);
+    if (mode !== 'edit') {
+      onClose?.();
+    }
+  }, [localField, onChange, onClose, mode]);
+
+  const renderPlaceholder = () => {
+    if (
+      [
+        'Checkbox',
+        'RadioButtonV2',
+        'Datepicker',
+        'DatetimePickerV2',
+        'Checkbox',
+        'ToggleSwitchV2',
+        'DatePickerV2',
+        'TimePicker',
+        'DaterangePicker',
+      ].includes(localField.componentType)
+    )
+      return null;
+    return (
+      <div>
+        <label className="tw-text-text-default base-medium">Placeholder</label>
+        <CodeHinter
+          type={'basic'}
+          initialValue={localField.placeholder || ''}
+          theme={darkMode ? 'monokai' : 'default'}
+          mode="javascript"
+          lineNumbers={false}
+          onChange={(value) => handleFieldChange('placeholder', value)}
+        />
+      </div>
+    );
+  };
+
+  const renderDefaultValue = () => {
+    if (['RadioButtonV2', 'DropdownV2', 'MultiselectV2'].includes(localField.componentType)) return null;
+
+    return (
+      <div>
+        <label className="tw-text-text-default base-medium">Default value</label>
+        <CodeHinter
+          type={'basic'}
+          initialValue={localField.value || ''}
+          theme={darkMode ? 'monokai' : 'default'}
+          mode="javascript"
+          lineNumbers={false}
+          onChange={(value) => handleFieldChange('value', value)}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <Popover.Header className="d-flex justify-content-between align-items-center tw-px-4 tw-py-2 form-field-popover-header bg-white">
+        <span className="tw-text-text-default base-medium">{mode === 'edit' ? 'Edit field' : 'New custom field'}</span>
+        <div className="tw-flex">
+          {mode === 'edit' ? (
+            <>
+              <Button
+                iconOnly
+                leadingIcon="inspect"
+                variant="ghost"
+                size="medium"
+                onClick={() => setSelectedComponents([field.componentId])}
+              />
+              <Button
+                iconOnly
+                leadingIcon={isCurrentlyVisibility ? 'eye' : 'eyedisable'}
+                variant="ghost"
+                size="medium"
+                disabled={isVisibilityFxControlled}
+                className={`${isVisibilityFxControlled ? 'tw-opacity-50' : ''}`}
+                onClick={() => {
+                  handleFieldChange('visibility', !isCurrentlyVisibility);
+                }}
+              />
+            </>
+          ) : (
+            <Button iconOnly leadingIcon="remove" variant="ghost" size="medium" onClick={onClose} />
+          )}
+        </div>
+      </Popover.Header>
+      <Popover.Body className="bg-white tw-p-4 form-field-popover-body">
+        <div className="tw-space-y-[12px]">
+          <div>
+            <Dropdown
+              options={inputTypeOptions}
+              name="field-type"
+              id="field-type"
+              size="medium"
+              zIndex={9999}
+              value={localField.componentType || 'TextInput'}
+              leadingIcon={inputTypeOptions[localField.componentType || 'TextInput'].leadingIcon}
+              onChange={(value) => {
+                handleFieldChange('componentType', value);
+              }}
+              width="100%"
+              label="Component"
+              onOpen={onDropdownOpen}
+              onClose={onDropdownClose}
+            />
+          </div>
+
+          <div>
+            <label className="tw-text-text-default base-medium">Label</label>
+            <CodeHinter
+              type={'basic'}
+              initialValue={localField.label || ''}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={'Email id'}
+              onChange={(value) => handleFieldChange('label', value)}
+            />
+          </div>
+
+          {renderPlaceholder()}
+          {renderDefaultValue()}
+
+          <div className="field mb-2">
+            <CodeHinter
+              initialValue={localField.mandatory?.value ?? false}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              type={'fxEditor'}
+              paramLabel={'Make this field mandatory'}
+              paramName={'isMandatory'}
+              fxActive={localField.mandatory?.fxActive ?? false}
+              fieldMeta={{
+                type: 'toggle',
+                displayName: 'Make editable',
+              }}
+              paramType={'toggle'}
+              onChange={(value) => handleFieldChange('mandatory', value)}
+              onFxPress={(active) => handleFxChange('mandatory', active)}
+            />
+          </div>
+          {mode === 'edit' && (
+            <div className="field m-0">
+              <CodeHinter
+                initialValue={localField.visibility?.value ?? true}
+                theme={darkMode ? 'monokai' : 'default'}
+                mode="javascript"
+                lineNumbers={false}
+                type={'fxEditor'}
+                paramLabel={'Visibility'}
+                paramName={'visible'}
+                fxActive={localField.visibility?.fxActive ?? false}
+                fieldMeta={{
+                  type: 'toggle',
+                  displayName: 'Make editable',
+                }}
+                paramType={'toggle'}
+                onChange={(value) => handleFieldChange('visibility', value)}
+                onFxPress={(active) => handleFxChange('visibility', active)}
+              />
+            </div>
+          )}
+          <Button
+            leadingIcon={mode === 'edit' ? 'save' : 'plus'}
+            variant="secondary"
+            onClick={handleSubmit}
+            className="tw-w-full tw-rounded-[6px]"
+            disabled={field && isEqual(localField, field)}
+          >
+            {mode === 'edit' ? 'Save' : 'Add Field'}
+          </Button>
+        </div>
+      </Popover.Body>
+    </>
+  );
+};
+
+export default React.memo(FieldPopoverContent);
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FormField.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FormField.jsx
new file mode 100644
index 0000000000..eadff717f9
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FormField.jsx
@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/Button/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import { FieldPopoverContent } from './index';
+import { useDropdownState } from '../_hooks/useDropdownState';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { isTrueValue, isPropertyFxControlled, getComponentIcon } from '../utils/utils';
+
+export const FormField = ({ field, onDelete, activeMenu, onMenuToggle, onSave, darkMode = false }) => {
+  const setSelectedComponents = useStore((state) => state.setSelectedComponents, shallow);
+  const [showPopover, setShowPopover] = useState(false);
+  const [fieldData, setFieldData] = useState(field);
+  const { handleDropdownOpen, handleDropdownClose, shouldPreventPopoverClose } = useDropdownState();
+
+  useEffect(() => {
+    if (activeMenu && activeMenu !== fieldData.name) {
+      setShowPopover(false);
+    }
+  }, [activeMenu, fieldData.name]);
+
+  useEffect(() => {
+    setFieldData(field);
+  }, [field]);
+
+  const handleFieldChange = (updatedField) => {
+    setFieldData(updatedField);
+    onSave([updatedField], true);
+  };
+
+  const isMandatoryFxControlled = isPropertyFxControlled(fieldData.mandatory);
+
+  const isCurrentlyMandatory = isTrueValue(fieldData.mandatory?.value);
+
+  const mainPopover = (
+    <Popover id="popover-basic" className="shadow form-fields-column-popover">
+      <FieldPopoverContent
+        field={fieldData}
+        mode="edit"
+        onClose={() => setShowPopover(false)}
+        onChange={handleFieldChange}
+        onDropdownOpen={handleDropdownOpen}
+        onDropdownClose={handleDropdownClose}
+        shouldPreventPopoverClose={shouldPreventPopoverClose}
+        setSelectedComponents={setSelectedComponents}
+      />
+    </Popover>
+  );
+
+  const menuPopover = (
+    <Popover id="menu-popover" className="shadow">
+      <Popover.Body className="tw-p-2">
+        <div className="tw-flex tw-flex-col">
+          <Button
+            variant="ghost"
+            size="default"
+            onClick={(e) => {
+              e.stopPropagation();
+              const newValue = !isCurrentlyMandatory;
+              handleFieldChange({
+                ...fieldData,
+                mandatory:
+                  typeof fieldData.mandatory === 'object'
+                    ? { ...fieldData.mandatory, value: `{{${newValue}}}` }
+                    : `{{${newValue}}}`,
+              });
+              onMenuToggle(null);
+            }}
+            disabled={isMandatoryFxControlled}
+            className={`base-regular ${isMandatoryFxControlled ? 'tw-opacity-50' : ''}`}
+            leadingIcon="asterix"
+            fill="#CCD1D5"
+          >
+            {isCurrentlyMandatory ? 'Make optional' : 'Make mandatory'}
+          </Button>
+          <Button
+            variant="ghost"
+            size="default"
+            onClick={(e) => {
+              e.stopPropagation();
+              onMenuToggle(null);
+              setSelectedComponents([field.componentId]);
+            }}
+            className="base-regular"
+            leadingIcon="inspect"
+            fill="#CCD1D5"
+          >
+            View properties and styles
+          </Button>
+          <Button
+            variant="ghost"
+            size="default"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(fieldData);
+              onMenuToggle(null);
+            }}
+            className="base-regular"
+            leadingIcon="remove"
+            fill="#CCD1D5"
+          >
+            Remove from form
+          </Button>
+        </div>
+      </Popover.Body>
+    </Popover>
+  );
+
+  return (
+    <div className="tw-relative tw-group">
+      <OverlayTrigger
+        trigger="click"
+        placement="left"
+        show={showPopover}
+        onToggle={(show) => {
+          if (!show && shouldPreventPopoverClose) {
+            return;
+          }
+          if (show) onMenuToggle(null);
+          setShowPopover(show);
+        }}
+        rootClose
+        overlay={mainPopover}
+      >
+        <div
+          className={`field-item tw-flex tw-items-center tw-justify-between tw-gap-2 hover:tw-cursor-pointer ${
+            (fieldData.name === activeMenu || showPopover) && 'selected'
+          }`}
+        >
+          <div className="tw-flex tw-items-center tw-gap-[6px] tw-flex-1" style={{ width: 'calc(100% - 100px)' }}>
+            <div className="field-icon tw-w-6 tw-h-6 tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-gray-100">
+              {getComponentIcon(fieldData.componentType, darkMode)}
+            </div>
+            <span className="field-name tw-text-sm base-regular">{fieldData.name}</span>
+          </div>
+
+          <OverlayTrigger
+            trigger="click"
+            placement="bottom-start"
+            show={activeMenu === fieldData.name}
+            onToggle={(show) => {
+              setShowPopover(false);
+              if (show) {
+                onMenuToggle(fieldData.name);
+              } else {
+                onMenuToggle(null);
+              }
+            }}
+            rootClose
+            overlay={menuPopover}
+          >
+            <Button
+              iconOnly
+              leadingIcon="morevertical"
+              variant="ghost"
+              size="default"
+              className="tw-opacity-0 group-hover:tw-opacity-100 more-btn"
+              onClick={(e) => e.stopPropagation()}
+            />
+          </OverlayTrigger>
+        </div>
+      </OverlayTrigger>
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FormFieldsList.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FormFieldsList.jsx
new file mode 100644
index 0000000000..12a8856673
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/FormFieldsList.jsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { FormField } from './index';
+
+export const FormFieldsList = ({ fields, onDeleteField, currentStatusRef, onSave }) => {
+  const [activeMenuField, setActiveMenuField] = useState(null);
+
+  if (fields.length === 0) {
+    return (
+      <span className="base-regular text-placeholder tw-block tw-p-3 tw-text-center">
+        No fields yet. Generate a form from a data source or add custom fields.
+      </span>
+    );
+  }
+
+  return (
+    <div className="tw-flex tw-flex-col" style={{ maxHeight: '400px' }}>
+      <div className="tw-flex-grow tw-overflow-y-auto tw-max-h-[calc(100%-50px)]">
+        <div className="tw-flex tw-flex-col tw-gap-1">
+          {fields.map((field) => (
+            <FormField
+              key={field.name}
+              field={field}
+              activeMenu={activeMenuField}
+              onMenuToggle={(fieldName) => {
+                currentStatusRef.current = null;
+                setActiveMenuField(fieldName);
+              }}
+              onDelete={onDeleteField}
+              onSave={onSave}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/LabeledDivider.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/LabeledDivider.jsx
new file mode 100644
index 0000000000..7e2ffb293d
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/LabeledDivider.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const LabeledDivider = ({ label, rightContentCount = 0 }) => {
+  return (
+    <div className="tw-relative tw-flex-1" style={{ paddingTop: 4, paddingBottom: 8 }}>
+      {/* Background line */}
+      <div className="tw-absolute tw-inset-0 tw-flex tw-items-center tw-w-full">
+        <div
+          className="tw-w-full"
+          style={{
+            borderTop: '1px dashed var(--border-default, #CCD1D5)',
+            height: '1px',
+          }}
+        ></div>
+      </div>
+
+      {/* Label container - centered accounting for right content */}
+      <div
+        className="tw-relative tw-flex tw-w-full"
+        style={{
+          justifyContent: 'center',
+        }}
+      >
+        <span
+          className="base-medium tw-px-3"
+          style={{
+            color: 'var(--text-placeholder, #6A727C)',
+            background: 'var(--base)',
+            transform: rightContentCount ? `translateX(${rightContentCount * 11.5}px)` : 'none', // Adjust for typical icon width + gap
+          }}
+        >
+          {label}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default LabeledDivider;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/hooks/useColumnMapping.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/hooks/useColumnMapping.js
new file mode 100644
index 0000000000..fb0aee7ca7
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/hooks/useColumnMapping.js
@@ -0,0 +1,144 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import {
+  isTrueValue,
+  isPropertyFxControlled,
+  parseDataAndBuildFields,
+  analyzeJsonDifferences,
+  mergeFieldsWithComponentDefinition,
+  mergeFormFieldsWithNewData,
+  mergeArrays,
+} from '../../utils/utils';
+import { FORM_STATUS } from '../../constants';
+import { merge } from 'lodash';
+
+// Constants for section order preference
+const SECTION_ORDER = ['isNew', 'isRemoved', 'existing', 'isCustomField'];
+
+/**
+ * Custom hook for managing column building logic
+ */
+export const useColumnBuilder = (
+  component,
+  currentStatus,
+  newResolvedJsonData,
+  existingResolvedJsonData,
+  refreshedColumns,
+  getFormFields,
+  getComponentDefinition
+) => {
+  return useMemo(() => {
+    const formFields = getFormFields(component.id);
+    const formFieldsWithComponentDefinition = mergeFieldsWithComponentDefinition(formFields, getComponentDefinition);
+
+    if (currentStatus === FORM_STATUS.MANAGE_FIELDS) {
+      const allColumnsFromJsonData = parseDataAndBuildFields(newResolvedJsonData);
+      return mergeArrays(allColumnsFromJsonData, formFieldsWithComponentDefinition);
+    } else if (currentStatus === FORM_STATUS.REFRESH_FIELDS) {
+      const jsonDifferences = analyzeJsonDifferences(refreshedColumns, existingResolvedJsonData);
+      const mergedJsonData = merge({}, existingResolvedJsonData, refreshedColumns);
+      const parsedFields = parseDataAndBuildFields(mergedJsonData, jsonDifferences);
+      const mergedFields = mergeFormFieldsWithNewData(formFieldsWithComponentDefinition, parsedFields);
+      const enhancedFieldsWithComponentDefinition = mergeFieldsWithComponentDefinition(
+        mergedFields,
+        getComponentDefinition
+      );
+      return [
+        ...enhancedFieldsWithComponentDefinition,
+        ...formFieldsWithComponentDefinition.filter((f) => f.isCustomField),
+      ];
+    }
+    return parseDataAndBuildFields(newResolvedJsonData || []);
+  }, [
+    component.id,
+    currentStatus,
+    newResolvedJsonData,
+    existingResolvedJsonData,
+    refreshedColumns,
+    getFormFields,
+    getComponentDefinition,
+  ]);
+};
+
+/**
+ * Custom hook for managing grouped columns state
+ */
+export const useGroupedColumns = (columnsToUse, currentStatus) => {
+  const [groupedColumns, setGroupedColumns] = useState({});
+  const [sectionTypes, setSectionTypes] = useState([]);
+
+  useEffect(() => {
+    const grouped = {};
+    const isGenerateFieldsMode = currentStatus === FORM_STATUS.GENERATE_FIELDS;
+    const isRefreshFormMode = currentStatus === FORM_STATUS.REFRESH_FIELDS;
+    const shouldSelectByDefault = isGenerateFieldsMode || isRefreshFormMode;
+
+    columnsToUse.forEach((col) => {
+      let sectionType = 'existing';
+
+      if (col.isNew) {
+        sectionType = 'isNew';
+      } else if (col.isRemoved) {
+        sectionType = 'isRemoved';
+      } else if (col.isCustomField) {
+        sectionType = 'isCustomField';
+      }
+
+      if (!grouped[sectionType]) {
+        grouped[sectionType] = [];
+      }
+
+      // Auto-select columns based on mode
+      if (
+        shouldSelectByDefault &&
+        sectionType !== 'isRemoved' &&
+        (isGenerateFieldsMode || (isRefreshFormMode && sectionType === 'isNew'))
+      ) {
+        grouped[sectionType].push({ ...col, selected: true });
+      } else {
+        grouped[sectionType].push(col);
+      }
+    });
+
+    const types = SECTION_ORDER.filter((type) => grouped[type] && grouped[type].length > 0);
+
+    setGroupedColumns(grouped);
+    setSectionTypes(types);
+  }, [columnsToUse, currentStatus]);
+
+  const updateSectionColumns = useCallback((sectionType, updatedColumns) => {
+    setGroupedColumns((prev) => ({
+      ...prev,
+      [sectionType]: updatedColumns,
+    }));
+  }, []);
+
+  return { groupedColumns, sectionTypes, updateSectionColumns };
+};
+
+/**
+ * Hook for checkbox state calculations
+ */
+export const useCheckboxStates = (columnsArray) => {
+  return useMemo(() => {
+    const mandatorySettableColumns = columnsArray.filter((col) => !isPropertyFxControlled(col.mandatory));
+
+    const isAllSelected = columnsArray.length > 0 ? columnsArray.every((col) => col.selected) : false;
+    const isIntermediateSelected = !isAllSelected && columnsArray.some((col) => col.selected);
+
+    const isAllSelectedMandatory =
+      mandatorySettableColumns.length > 0
+        ? mandatorySettableColumns.every((col) => isTrueValue(col.mandatory.value))
+        : false;
+
+    const isIntermediateMandatory =
+      !isAllSelectedMandatory && mandatorySettableColumns.some((col) => isTrueValue(col.mandatory.value));
+
+    return {
+      isAllSelected,
+      isIntermediateSelected,
+      isAllSelectedMandatory,
+      isIntermediateMandatory,
+      mandatorySettableColumns,
+    };
+  }, [columnsArray]);
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/index.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/index.js
new file mode 100644
index 0000000000..682f2d4533
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/index.js
@@ -0,0 +1,9 @@
+// Component exports for cleaner imports
+export { DataSection } from './DataSection';
+export { default as DataSectionWrapper } from './DataSectionWrapper';
+export { default as DataSectionUI } from './DataSectionUI';
+export { default as ColumnMappingComponent } from './ColumnMappingComponent';
+export { default as FieldPopoverContent } from './FieldPopoverContent';
+export { FormField } from './FormField';
+export { FormFieldsList } from './FormFieldsList';
+export { default as LabeledDivider } from './LabeledDivider';
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/index.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/index.js
new file mode 100644
index 0000000000..4a70ccee82
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/index.js
@@ -0,0 +1,4 @@
+export { useFormState } from './useFormState';
+export { useFormData } from './useFormData';
+export { useFormLogic } from './useFormLogic';
+export { useDropdownState } from './useDropdownState';
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useDropdownState.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useDropdownState.js
new file mode 100644
index 0000000000..4cc35aee7a
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useDropdownState.js
@@ -0,0 +1,23 @@
+import { useState, useCallback } from 'react';
+
+export const useDropdownState = () => {
+  const [dropdownState, setDropdownState] = useState('closed'); // 'closed' | 'opening' | 'open'
+
+  const handleDropdownOpen = useCallback(() => {
+    setDropdownState('open');
+  }, []);
+
+  const handleDropdownClose = useCallback(() => {
+    setDropdownState('closing');
+    setTimeout(() => setDropdownState('closed'), 100);
+  }, []);
+
+  const shouldPreventPopoverClose = dropdownState !== 'closed';
+
+  return {
+    dropdownState,
+    handleDropdownOpen,
+    handleDropdownClose,
+    shouldPreventPopoverClose,
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormData.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormData.js
new file mode 100644
index 0000000000..35e277850e
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormData.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { mergeFieldsWithComponentDefinition } from '../utils/utils';
+
+export const useFormData = (component) => {
+  const resolveReferences = useStore((state) => state.resolveReferences, shallow);
+  const getFormDataSectionData = useStore((state) => state.getFormDataSectionData, shallow);
+  const getComponentDefinition = useStore((state) => state.getComponentDefinition, shallow);
+  const formFields = useStore((state) => state.getFormFields(component.id), shallow);
+
+  // Get form data and process it
+  const existingData = getFormDataSectionData(component?.id);
+  let isFormGenerated = existingData?.generateFormFrom?.value ?? false;
+
+  // Memoized form fields with component definition
+  const formFieldsWithComponentDefinition = React.useMemo(
+    () => mergeFieldsWithComponentDefinition(formFields, getComponentDefinition),
+    [formFields, getComponentDefinition]
+  );
+
+  // Process JSON data
+  let existingResolvedJsonData = existingData?.JSONData?.value;
+  existingResolvedJsonData = resolveReferences('canvas', existingResolvedJsonData);
+
+  const newJSONValue = component.component.definition.properties['JSONData']?.value;
+  const newResolvedJsonData = resolveReferences('canvas', newJSONValue);
+
+  return {
+    existingData,
+    isFormGenerated,
+    formFieldsWithComponentDefinition,
+    existingResolvedJsonData,
+    newJSONValue,
+    newResolvedJsonData,
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormLogic.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormLogic.js
new file mode 100644
index 0000000000..1d0636d222
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormLogic.js
@@ -0,0 +1,108 @@
+import { useEffect } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { useFormState } from './useFormState';
+import { useFormData } from './useFormData';
+import { createParamUpdatedInterceptor, createColumnMappingHandler, createJSONDataBlurHandler } from '../handlers';
+
+export const useFormLogic = (component, paramUpdated) => {
+  // Store selectors
+  const resolveReferences = useStore((state) => state.resolveReferences, shallow);
+  const getFormDataSectionData = useStore((state) => state.getFormDataSectionData, shallow);
+  const saveFormDataSectionData = useStore((state) => state.saveFormDataSectionData, shallow);
+  const componentNameIdMapping = useStore((state) => state.modules.canvas.componentNameIdMapping, shallow);
+  const queryNameIdMapping = useStore((state) => state.modules.canvas.queryNameIdMapping, shallow);
+  const getChildComponents = useStore((state) => state.getChildComponents, shallow);
+  const runQuery = useStore((state) => state.queryPanel.runQuery, shallow);
+  const getExposedValueOfQuery = useStore((state) => state.getExposedValueOfQuery, shallow);
+  const currentLayout = useStore((state) => state.currentLayout, shallow);
+  const getComponentDefinition = useStore((state) => state.getComponentDefinition, shallow);
+  const performBatchComponentOperations = useStore((state) => state.performBatchComponentOperations, shallow);
+
+  // Custom hooks
+  const formState = useFormState(component);
+  const formData = useFormData(component);
+
+  // Save data section function
+  const saveDataSection = (fields) => {
+    formState.savedSourceValue.current = formState.source.value;
+    saveFormDataSectionData(
+      component?.id,
+      {
+        generateFormFrom: formState.source,
+        JSONData: formState.JSONData,
+      },
+      fields
+    );
+  };
+
+  // Create column mapping handler
+  const performColumnMapping = createColumnMappingHandler({
+    component,
+    isFormGenerated: formData.isFormGenerated,
+    currentStatusRef: formState.currentStatusRef,
+    formFields: useStore((state) => state.getFormFields(component.id), shallow),
+    formFieldsWithComponentDefinition: formData.formFieldsWithComponentDefinition,
+    getChildComponents,
+    currentLayout,
+    performBatchComponentOperations,
+    saveDataSection,
+    setOpenModal: formState.setOpenModal,
+  });
+
+  // Create JSON data blur handler
+  const handleJSONDataBlur = createJSONDataBlurHandler({
+    component,
+    currentStatusRef: formState.currentStatusRef,
+    resolveReferences,
+    getFormDataSectionData,
+    savedSourceValue: formState.savedSourceValue,
+    source: formState.source,
+    formFieldsWithComponentDefinition: formData.formFieldsWithComponentDefinition,
+    existingResolvedJsonData: formData.existingResolvedJsonData,
+    getComponentDefinition,
+    performColumnMapping,
+    saveDataSection,
+    codeEditorView: formState.codeEditorView,
+  });
+
+  // Create parameter updated interceptor
+  const paramUpdatedInterceptor = createParamUpdatedInterceptor({
+    component,
+    paramUpdated,
+    source: formState.source,
+    setSource: formState.setSource,
+    setJSONData: formState.setJSONData,
+    setOpenModal: formState.setOpenModal,
+    shouldFocusJSONDataEditor: formState.shouldFocusJSONDataEditor,
+    shouldInvokeBlurEvent: formState.shouldInvokeBlurEvent,
+    savedSourceValue: formState.savedSourceValue,
+    componentNameIdMapping,
+    queryNameIdMapping,
+    getFormDataSectionData,
+    getExposedValueOfQuery,
+    runQuery,
+    resolveReferences,
+    setLoading: formState.setLoading,
+  });
+
+  // Effect for handling JSON data blur
+  useEffect(() => {
+    if (formState.shouldInvokeBlurEvent.current) {
+      formState.shouldInvokeBlurEvent.current = false;
+      handleJSONDataBlur(formState.JSONData.value);
+    }
+  }, [formState.shouldInvokeBlurEvent, formState.JSONData, handleJSONDataBlur]);
+
+  return {
+    ...formState,
+    ...formData,
+    paramUpdatedInterceptor,
+    performColumnMapping,
+    handleJSONDataBlur,
+    saveDataSection,
+    closeModal: () => {
+      formState.setOpenModal(false);
+    },
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormState.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormState.js
new file mode 100644
index 0000000000..39104b0909
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormState.js
@@ -0,0 +1,78 @@
+import { useState, useRef, useEffect } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { INPUT_COMPONENTS_FOR_FORM } from '../constants';
+
+export const useFormState = (component) => {
+  const getChildComponents = useStore((state) => state.getChildComponents, shallow);
+  const saveFormFields = useStore((state) => state.saveFormFields, shallow);
+  const resolveReferences = useStore((state) => state.resolveReferences, shallow);
+
+  const [source, setSource] = useState({
+    value: component.component.definition.properties?.generateFormFrom?.value,
+    fxActive: component.component.definition.properties?.generateFormFrom?.fxActive,
+  });
+
+  const resolvedSource = resolveReferences(
+    'canvas',
+    component.component.definition.properties?.generateFormFrom?.value
+  );
+
+  const [JSONData, setJSONData] = useState({
+    value: resolvedSource === 'rawJson' ? component.component.definition.properties?.JSONData?.value : resolvedSource,
+  });
+
+  const [openModal, setOpenModal] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const [codeEditorView, setCodeEditorView] = useState(null);
+
+  // Refs for managing component state
+  const shouldFocusJSONDataEditor = useRef(false);
+  const currentStatusRef = useRef(null);
+  const shouldInvokeBlurEvent = useRef(false);
+  const savedSourceValue = useRef(component.component.definition.properties?.generateFormFrom?.value);
+
+  // Backfill fields if not present
+  const fields = component.component.definition.properties?.fields;
+  if (fields === undefined) {
+    const newFields = [];
+    const childComponents = getChildComponents(component.id);
+    Object.keys(childComponents).forEach((childId) => {
+      if (INPUT_COMPONENTS_FOR_FORM.includes(childComponents[childId].component.component.component)) {
+        newFields.push({
+          componentId: childId,
+          isCustomField: true,
+        });
+      }
+    });
+    saveFormFields(component.id, newFields, 'canvas');
+  }
+
+  // Focus management effect
+  useEffect(() => {
+    if (codeEditorView && shouldFocusJSONDataEditor.current) {
+      codeEditorView.focus();
+      // Add 'focused' class to the parent of codeEditorView.dom
+      if (codeEditorView.dom && codeEditorView.dom.parentNode) {
+        codeEditorView.dom.parentNode.classList.add('focused');
+      }
+    }
+  }, [codeEditorView, shouldFocusJSONDataEditor]);
+
+  return {
+    source,
+    setSource,
+    JSONData,
+    setJSONData,
+    openModal,
+    setOpenModal,
+    codeEditorView,
+    setCodeEditorView,
+    shouldFocusJSONDataEditor,
+    currentStatusRef,
+    shouldInvokeBlurEvent,
+    savedSourceValue,
+    isLoading,
+    setLoading,
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/config/accordionConfig.js
similarity index 51%
rename from frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx
rename to frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/config/accordionConfig.js
index 6b0bc05422..cb630bbcc4 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/config/accordionConfig.js
@@ -1,93 +1,10 @@
 import React from 'react';
-import Accordion from '@/_ui/Accordion';
-import { EventManager } from '../EventManager';
-import { renderElement } from '../Utils';
 // eslint-disable-next-line import/no-unresolved
 import i18next from 'i18next';
-import { deepClone } from '@/_helpers/utilities/utils.helpers';
+import { EventManager } from '../../../EventManager';
+import { renderElement } from '../../../Utils';
 
-export const Form = ({
-  componentMeta,
-  darkMode,
-  layoutPropertyChanged,
-  component,
-  paramUpdated,
-  dataQueries,
-  currentState,
-  eventsChanged,
-  apps,
-  allComponents,
-  pages,
-}) => {
-  const tempComponentMeta = deepClone(componentMeta);
-
-  let properties = [];
-  let additionalActions = [];
-  let dataProperties = [];
-
-  const events = Object.keys(componentMeta.events);
-  const validations = Object.keys(componentMeta.validation || {});
-
-  for (const [key] of Object.entries(componentMeta?.properties)) {
-    if (componentMeta?.properties[key]?.section === 'additionalActions') {
-      additionalActions.push(key);
-    } else if (componentMeta?.properties[key]?.accordian === 'Data') {
-      dataProperties.push(key);
-    } else {
-      properties.push(key);
-    }
-  }
-
-  const { id } = component;
-  const newOptions = [{ name: 'None', value: 'none' }];
-
-  Object.entries(allComponents).forEach(([componentId, _component]) => {
-    const validParent =
-      _component.component.parent === id ||
-      _component.component.parent === `${id}-footer` ||
-      _component.component.parent === `${id}-header`;
-    if (validParent && _component?.component?.component === 'Button') {
-      newOptions.push({ name: _component.component.name, value: componentId });
-    }
-  });
-
-  tempComponentMeta.properties.buttonToSubmit.options = newOptions;
-
-  // Hide header footer if custom schema is turned on
-
-  if (component.component.definition.properties.advanced.value === '{{true}}') {
-    component.component.properties.showHeader = {
-      ...component.component.properties.headerHeight,
-      isHidden: true,
-    };
-    component.component.properties.showFooter = {
-      ...component.component.properties.headerHeight,
-      isHidden: true,
-    };
-  }
-
-  const accordionItems = baseComponentProperties(
-    properties,
-    events,
-    component,
-    tempComponentMeta,
-    layoutPropertyChanged,
-    paramUpdated,
-    dataQueries,
-    currentState,
-    eventsChanged,
-    apps,
-    allComponents,
-    validations,
-    darkMode,
-    pages,
-    additionalActions
-  );
-
-  return <Accordion items={accordionItems} />;
-};
-
-export const baseComponentProperties = (
+export const createAccordionItems = ({
   properties,
   events,
   component,
@@ -102,12 +19,16 @@ export const baseComponentProperties = (
   validations,
   darkMode,
   pages,
-  additionalActions
-) => {
+  additionalActions,
+  deprecatedProperties,
+  renderDataElement,
+}) => {
   let items = [];
+
+  // Structure section
   if (properties.length > 0) {
     items.push({
-      title: `${i18next.t('widget.common.properties', 'Properties')}`,
+      title: `${i18next.t('widget.common.structure', 'Structure')}`,
       children: properties.map((property) =>
         renderElement(
           component,
@@ -124,6 +45,14 @@ export const baseComponentProperties = (
     });
   }
 
+  // Data section
+  items.push({
+    title: 'Data',
+    isOpen: true,
+    children: renderDataElement(),
+  });
+
+  // Events section
   if (events.length > 0) {
     items.push({
       title: `${i18next.t('widget.common.events', 'Events')}`,
@@ -145,6 +74,7 @@ export const baseComponentProperties = (
     });
   }
 
+  // Additional actions section
   items.push({
     title: 'Additional actions',
     isOpen: true,
@@ -163,6 +93,7 @@ export const baseComponentProperties = (
     ),
   });
 
+  // Validation section
   if (validations.length > 0) {
     items.push({
       title: `${i18next.t('widget.common.validation', 'Validation')}`,
@@ -182,6 +113,7 @@ export const baseComponentProperties = (
     });
   }
 
+  // Devices section
   items.push({
     title: `${i18next.t('widget.common.devices', 'Devices')}`,
     isOpen: true,
@@ -211,5 +143,24 @@ export const baseComponentProperties = (
     ),
   });
 
+  // Deprecated section
+  items.push({
+    title: 'Deprecated',
+    isOpen: true,
+    children: deprecatedProperties?.map((property) =>
+      renderElement(
+        component,
+        componentMeta,
+        paramUpdated,
+        dataQueries,
+        property,
+        'properties',
+        currentState,
+        allComponents,
+        darkMode
+      )
+    ),
+  });
+
   return items;
 };
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/constants.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/constants.js
new file mode 100644
index 0000000000..adb487e5a8
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/constants.js
@@ -0,0 +1,47 @@
+export const DATATYPE_TO_COMPONENT = {
+  string: 'TextInput',
+  number: 'NumberInput',
+  date: 'DatePickerV2',
+  boolean: 'Checkbox',
+  array: 'DropdownV2',
+};
+
+export const COMPONENT_WITH_OPTIONS = ['DropdownV2', 'MultiselectV2', 'RadioButtonV2'];
+
+export const INPUT_COMPONENTS_FOR_FORM = [
+  'TextInput',
+  'PasswordInput',
+  'EmailInput',
+  'PhoneInput',
+  'CurrencyInput',
+  'NumberInput',
+  'DropdownV2',
+  'MultiselectV2',
+  'RadioButtonV2',
+  'DatetimePickerV2',
+  'Checkbox',
+  'ToggleSwitchV2',
+  'DatePickerV2',
+  'TimePicker',
+  'DaterangePicker',
+  'TextArea',
+];
+
+export const JSON_DIFFERENCE = {
+  isExisting: [],
+  isNew: [],
+  isRemoved: [],
+};
+
+export const FORM_STATUS = {
+  MANAGE_FIELDS: 'manageFields',
+  GENERATE_FIELDS: 'generateFields',
+  REFRESH_FIELDS: 'refreshFields',
+};
+
+export const COMPONENT_LAYOUT_DETAILS = {
+  spacing: 40,
+  defaultWidth: 37,
+  defaultHeight: 30,
+  defaultLeft: 3,
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/columnMappingHandlers.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/columnMappingHandlers.js
new file mode 100644
index 0000000000..c561534837
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/columnMappingHandlers.js
@@ -0,0 +1,135 @@
+import { isEqual } from 'lodash';
+import { FORM_STATUS, COMPONENT_LAYOUT_DETAILS } from '../constants';
+import { findNextElementTop, cleanupFormFields } from '../utils/utils';
+import { updateFormFieldComponent } from '../utils/fieldOperations';
+
+export const createColumnMappingHandler = ({
+  component,
+  isFormGenerated,
+  currentStatusRef,
+  formFields,
+  formFieldsWithComponentDefinition,
+  getChildComponents,
+  currentLayout,
+  performBatchComponentOperations,
+  saveDataSection,
+  setOpenModal,
+}) => {
+  return (columns, isSingleUpdate = false) => {
+    const newColumns = isSingleUpdate ? formFields.filter((field) => field.componentId !== columns[0].componentId) : [];
+    let operations = {
+        updated: {},
+        added: {},
+        deleted: [],
+      },
+      componentsToBeRemoved = [];
+
+    const isFormRegeneration = isFormGenerated && currentStatusRef.current === FORM_STATUS.GENERATE_FIELDS;
+
+    if (!isSingleUpdate) {
+      if (isFormRegeneration) {
+        formFields.forEach((field) => {
+          if (!field.isCustomField) {
+            componentsToBeRemoved.push(field.componentId);
+            operations.deleted.push(field.componentId);
+          } else {
+            newColumns.push(field);
+          }
+        });
+      } else if (currentStatusRef.current === FORM_STATUS.GENERATE_FIELDS) {
+        newColumns.push(...formFields);
+      } else {
+        formFields.forEach((field) => {
+          if (field.isCustomField) {
+            newColumns.push(field);
+          }
+        });
+        columns.forEach((column) => {
+          if (column.isRemoved) {
+            componentsToBeRemoved.push(column.componentId);
+          }
+        });
+      }
+    }
+
+    const childComponents = getChildComponents(component?.id);
+    // Get the last position of the child components
+    const nextElementsTop = findNextElementTop(childComponents, currentLayout, componentsToBeRemoved);
+    // Create form field components from columns
+
+    if (columns && Array.isArray(columns) && columns.length > 0) {
+      let nextTop = nextElementsTop + COMPONENT_LAYOUT_DETAILS.spacing;
+
+      columns.forEach((column, index) => {
+        if (column.isRemoved) return operations.deleted.push(column.componentId);
+
+        if (currentStatusRef.current === FORM_STATUS.REFRESH_FIELDS) {
+          delete column.isRemoved;
+          delete column.isNew;
+          delete column.isExisting;
+          if (
+            isEqual(
+              column,
+              formFieldsWithComponentDefinition.find((field) => field.componentId === column.componentId)
+            )
+          ) {
+            return newColumns.push(column);
+          }
+        }
+
+        if (
+          currentStatusRef.current === FORM_STATUS.MANAGE_FIELDS &&
+          isEqual(
+            column,
+            formFieldsWithComponentDefinition.find((field) => field.componentId === column.componentId)
+          )
+        ) {
+          return newColumns.push(column);
+        }
+
+        const {
+          added = {},
+          updated = {},
+          deleted = false,
+        } = updateFormFieldComponent(column, {}, component.id, nextTop);
+
+        if (Object.keys(updated).length !== 0) {
+          operations.updated[column.componentId] = updated;
+          newColumns.push(column);
+        }
+        if (Object.keys(added).length !== 0) {
+          operations.added[added.id] = added;
+          if (added.component.component === 'Checkbox') {
+            nextTop = nextTop + added.layouts['desktop'].height + 10;
+          } else {
+            nextTop = nextTop + added.layouts['desktop'].height + COMPONENT_LAYOUT_DETAILS.spacing;
+          }
+
+          // Create simplified column structure with only the required fields
+          const simplifiedColumn = {
+            componentId: added.id,
+            isCustomField: column.isCustomField ?? false,
+            dataType: column.dataType,
+            key: column.key || column.name,
+          };
+
+          columns[index] = simplifiedColumn; // Replace with simplified structure
+          newColumns.push(simplifiedColumn);
+        }
+        if (deleted) {
+          operations.deleted.push(column.componentId);
+        }
+      });
+
+      if (
+        Object.keys(operations.updated).length > 0 ||
+        Object.keys(operations.added).length > 0 ||
+        operations.deleted.length > 0
+      ) {
+        performBatchComponentOperations(operations);
+        saveDataSection(cleanupFormFields(newColumns));
+      }
+      setOpenModal(false);
+    }
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/index.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/index.js
new file mode 100644
index 0000000000..ce043f77a1
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/index.js
@@ -0,0 +1,3 @@
+export { createParamUpdatedInterceptor } from './parameterHandlers';
+export { createColumnMappingHandler } from './columnMappingHandlers';
+export { createJSONDataBlurHandler } from './jsonDataHandlers';
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/jsonDataHandlers.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/jsonDataHandlers.js
new file mode 100644
index 0000000000..7c08168da4
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/jsonDataHandlers.js
@@ -0,0 +1,79 @@
+import { isEqual, merge } from 'lodash';
+import { FORM_STATUS } from '../constants';
+import {
+  parseDataAndBuildFields,
+  analyzeJsonDifferences,
+  mergeFormFieldsWithNewData,
+  mergeFieldsWithComponentDefinition,
+} from '../utils/utils';
+
+export const createJSONDataBlurHandler = ({
+  component,
+  currentStatusRef,
+  resolveReferences,
+  getFormDataSectionData,
+  savedSourceValue,
+  source,
+  formFieldsWithComponentDefinition,
+  existingResolvedJsonData,
+  getComponentDefinition,
+  performColumnMapping,
+  saveDataSection,
+  codeEditorView,
+}) => {
+  return async (newJSONValue = null) => {
+    if (codeEditorView.dom && codeEditorView.dom.parentNode) {
+      codeEditorView.dom.parentNode.classList.remove('focused');
+    }
+
+    const existingData = getFormDataSectionData(component?.id);
+    const isFormGenerated = existingData && existingData.generateFormFrom && existingData.JSONData;
+
+    // Resolve both values to compare actual data, not just string comparison
+    const resolvedNewJSONValue = resolveReferences('canvas', newJSONValue);
+    const existingResolvedValue = existingData?.JSONData?.value
+      ? resolveReferences('canvas', existingData.JSONData.value)
+      : null;
+
+    // Use deep comparison to check if there's actual content change
+    const hasDataChanged = !isEqual(resolvedNewJSONValue, existingResolvedValue);
+
+    // Only proceed if there's actual data and changes
+    if (!resolvedNewJSONValue || !newJSONValue) {
+      return;
+    }
+
+    if (!isFormGenerated) {
+      currentStatusRef.current = FORM_STATUS.GENERATE_FIELDS;
+      const columns = parseDataAndBuildFields(resolvedNewJSONValue);
+
+      if (columns && columns.length > 0) {
+        performColumnMapping(columns);
+      }
+      return;
+    }
+
+    if (hasDataChanged) {
+      const sourceChanged = !isEqual(savedSourceValue.current, source?.value);
+      currentStatusRef.current = sourceChanged ? FORM_STATUS.GENERATE_FIELDS : FORM_STATUS.REFRESH_FIELDS;
+      const jsonDifferences = analyzeJsonDifferences(
+        resolvedNewJSONValue,
+        sourceChanged ? null : existingResolvedJsonData
+      );
+
+      const mergedJsonData = merge({}, sourceChanged ? {} : existingResolvedJsonData, resolvedNewJSONValue);
+      const parsedFields = parseDataAndBuildFields(mergedJsonData, jsonDifferences);
+      const mergedFields = mergeFormFieldsWithNewData(formFieldsWithComponentDefinition, parsedFields);
+      const enhancedFieldsWithComponentDefinition = mergeFieldsWithComponentDefinition(
+        mergedFields,
+        getComponentDefinition
+      );
+
+      if (enhancedFieldsWithComponentDefinition && enhancedFieldsWithComponentDefinition.length > 0) {
+        performColumnMapping(enhancedFieldsWithComponentDefinition);
+      }
+    } else if (savedSourceValue.current === 'jsonSchema') {
+      return saveDataSection(formFieldsWithComponentDefinition);
+    }
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/parameterHandlers.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/parameterHandlers.js
new file mode 100644
index 0000000000..47747cff87
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/parameterHandlers.js
@@ -0,0 +1,104 @@
+import { extractAndReplaceReferencesFromString } from '@/AppBuilder/_stores/ast';
+import { findFirstKeyValuePairWithPath } from '../utils/utils';
+
+export const createParamUpdatedInterceptor = ({
+  component,
+  paramUpdated,
+  source,
+  setSource,
+  setJSONData,
+  setOpenModal,
+  shouldFocusJSONDataEditor,
+  shouldInvokeBlurEvent,
+  savedSourceValue,
+  componentNameIdMapping,
+  queryNameIdMapping,
+  getFormDataSectionData,
+  getExposedValueOfQuery,
+  runQuery,
+  resolveReferences,
+  setLoading,
+}) => {
+  return async (param, attr, value, paramType, ...restArgs) => {
+    // Handle generateFormFrom parameter
+    if (param?.name === 'generateFormFrom') {
+      shouldFocusJSONDataEditor.current = false;
+      if (attr === 'value') {
+        const res = extractAndReplaceReferencesFromString(value, componentNameIdMapping, queryNameIdMapping);
+        let { valueWithId: selectedQuery, allRefs, valueWithBrackets } = res;
+        const { generateFormFrom, JSONData } = getFormDataSectionData(component?.id);
+
+        if (value === generateFormFrom?.value) {
+          return setJSONData({ value: JSONData.value });
+        }
+
+        if (value === 'jsonSchema') {
+          setSource({ value: 'jsonSchema' });
+          savedSourceValue.current = 'jsonSchema';
+          return paramUpdated(param, attr, value, paramType, ...restArgs);
+        } else if (value === 'rawJson') {
+          shouldFocusJSONDataEditor.current = true;
+          setJSONData({
+            value:
+              "{{{ 'name': 'John Doe', 'age': 35, 'isActive': true, 'dob': '01-01-1990', 'hobbies': ['reading', 'gaming', 'cycling'], 'address': { 'street': '123 Main Street', 'city': 'New York' } }}}",
+          });
+          return setSource((prev) => ({ ...prev, value }));
+        } else if (value !== 'rawJson' && value !== 'jsonSchema') {
+          // Set the source value to the selected query until the query is run
+          setSource((prev) => ({ ...prev, value: selectedQuery }));
+          setLoading(true);
+
+          const queryRefs = allRefs
+            .filter((ref) => ref.entityType === 'queries')
+            .filter((ref, index, self) => index === self.findIndex((r) => r.entityNameOrId === ref.entityNameOrId));
+
+          setOpenModal(true);
+          await Promise.all(
+            queryRefs.map(async (ref) => {
+              const queryId = ref.entityNameOrId;
+              const resolvedValueofQuery = getExposedValueOfQuery(queryId, 'canvas');
+
+              const hasMetadata =
+                resolvedValueofQuery && typeof resolvedValueofQuery === 'object' && 'metadata' in resolvedValueofQuery;
+              if (!hasMetadata && queryId && runQuery) {
+                await runQuery(queryId, '', false, 'edit');
+              }
+            })
+          );
+
+          let resolvedValue;
+
+          resolvedValue = resolveReferences('canvas', valueWithBrackets);
+          setLoading(false);
+
+          if (!source?.fxActive) {
+            const transformedData = findFirstKeyValuePairWithPath(resolvedValue, selectedQuery);
+            setJSONData({ value: transformedData.value });
+            return setSource((prev) => ({ ...prev, value: transformedData.path }));
+          }
+
+          setJSONData({ value: resolvedValue });
+          setOpenModal(true);
+        }
+        setSource((prev) => ({ ...prev, value: selectedQuery }));
+      } else if (attr === 'fxActive') {
+        setSource((prev) => ({ ...prev, fxActive: value }));
+      }
+      return;
+    }
+
+    // Handle JSONData parameter
+    if (param.name === 'JSONData') {
+      if (attr === 'value') {
+        if (source.value === 'rawJson') {
+          shouldInvokeBlurEvent.current = true;
+        }
+        setJSONData({ value });
+      }
+      return;
+    }
+
+    // Default parameter update
+    paramUpdated(param, attr, value, paramType, ...restArgs);
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/index.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/index.js
new file mode 100644
index 0000000000..ccb7dede95
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/index.js
@@ -0,0 +1 @@
+export { Form as default } from './Form';
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/styles.scss b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/styles.scss
new file mode 100644
index 0000000000..3f3f9ecef0
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/styles.scss
@@ -0,0 +1,258 @@
+.form-generate-form-btn {
+    button {
+        &:disabled {
+            border: 1px solid var(--border-weak, #E4E7EB) !important;
+            box-shadow: none;
+        }
+    }
+}
+
+.column-mapping-modal-header {
+    background-color: var(--primary-white) !important;
+    border-bottom: 1px solid var(--border-medium, rgba(106, 114, 124, 0.26));
+
+}
+
+.column-mapping-modal-body {
+    background: var(--page-page-default, #F6F8FA);
+    box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 8px 16px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
+
+    .column-mapping-modal-body-content {
+        background-color: var(--primary-white) !important;
+        border-radius: 8px;
+        margin-bottom: 1rem;
+
+        &:last-child {
+            margin-bottom: 0px;
+        }
+
+        .column-mapping-modal-title {
+            padding-left: 10px;
+            padding-top: 10px;
+            color: var(--text-default, #1B1F24);
+
+            &.new {
+                color: var(--text-success, #1E823B);
+            }
+
+            &.removed {
+                color: var(--text-danger, #D92D2A);
+            }
+        }
+
+        .header-row {
+            height: 36px;
+
+            .header-column {
+                height: 16px;
+
+                span {
+                    vertical-align: top;
+                }
+
+                button[role="checkbox"] {
+                    margin-top: 0px;
+                }
+
+                .editable-icon svg {
+                    vertical-align: initial;
+                }
+            }
+
+        }
+
+        .name-column {
+            width: 230px;
+            margin-right: 6px;
+        }
+
+        .arrow-column {
+            width: 40px
+        }
+
+        .mapped-column {
+            width: 160px;
+            padding: 0px 10px;
+        }
+
+        .type-column {
+            width: 76px;
+            padding: 0px 10px;
+
+            &.rows {
+                width: 160px;
+            }
+        }
+
+        .mandatory-column {
+            width: 84px;
+            margin-left: 8px;
+
+            &.rows {
+                width: 16px;
+            }
+        }
+
+
+        .column-mapping-row {
+            height: 40px;
+            color: var(--text-default, #1B1F24);
+            border-bottom: 1px solid var(--border-weak, #E4E7EB);
+
+            span.base-regular {
+                color: var(--text-default, #1B1F24);
+            }
+
+            &:last-child {
+                border-bottom-left-radius: 6px;
+                border-bottom-right-radius: 6px;
+            }
+
+            .data-type {
+                color: var(--text-placeholder, #6A727C);
+                font-family: monospace;
+                font-size: 11px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 16px;
+            }
+
+            .hide-border {
+
+                button[role="combobox"],
+                input[type="text"] {
+                    border-color: transparent;
+                    border-radius: 6px;
+
+                    &:hover {
+                        border-color: var(--border-strong, #ACB2B9);
+                    }
+                }
+            }
+
+            .no-mapped-column {
+                border-radius: 9px;
+                background-color: var(--interactive-default);
+                height: 18px;
+                padding: 0px 6px;
+                color: var(--text-placeholder, #6A727C);
+            }
+        }
+
+    }
+}
+
+.field-item {
+    background-color: var(--interactive-default);
+    border-radius: 6px;
+    padding: 7px 8px;
+    height: 32px;
+
+    &:hover {
+        background-color: var(--interactive-hover)
+    }
+
+    &.selected {
+        background-color: var(--interactive-selected) !important;
+    }
+
+    .field-name {
+        overflow: hidden;
+        color: var(--text-default, #1B1F24);
+        text-overflow: ellipsis;
+    }
+
+    .more-btn {
+        width: 22px;
+        height: 22px;
+        padding: 4px;
+        border-radius: 4px;
+        border: 1px solid var(--border-weak, #E4E7EB);
+        background: var(--button-secondary, #FFF);
+        /* Elevations/100 */
+        box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
+    }
+}
+
+.field-icon {
+    background-color: inherit;
+    color: #6b7280;
+}
+
+.field-popover {
+    animation: popoverFade 0.2s ease-in-out;
+}
+
+@keyframes popoverFade {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#menu-popover {
+    .popover-body {
+        min-width: 200px;
+    }
+
+    button {
+        width: 100%;
+        text-align: left;
+        justify-content: flex-start !important;
+        border-radius: 6px;
+        padding: 6px 8px;
+        color: var(--text-default, #1B1F24);
+
+        &:hover {
+            background-color: var(--interactive-default);
+        }
+    }
+}
+
+.form-fields-column-popover {
+    border-radius: 8px;
+    width: 303px;
+
+    .form-field-popover-header {
+        border-bottom: 1px solid var(--border-weak, #E4E7EB);
+    }
+
+    .form-field-popover-body {
+
+        button[role="combobox"] {
+            border-radius: 6px;
+        }
+
+        label {
+            margin-bottom: 2px;
+            font-family: "IBM Plex Sans";
+        }
+    }
+
+}
+
+.refresh-data-section {
+    border-radius: 6px;
+    background: var(--background-surface-layer-02);
+    margin-top: 12px;
+
+    .neutral-light-color {
+        color: var(--neutral-light-n-900, #091E42);
+    }
+
+    .refresh-data-button {
+        width: 147px;
+        margin: 0px 24px;
+    }
+}
+
+.custom-schema-fields-section {
+    background: var(--background-warning-weak, #FAEFE7);
+    border-radius: 6px;
+    margin-top: 12px;
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/componentMetaUtils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/componentMetaUtils.js
new file mode 100644
index 0000000000..2f009b4784
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/componentMetaUtils.js
@@ -0,0 +1,66 @@
+import { deepClone } from '@/_helpers/utilities/utils.helpers';
+
+export const processComponentMeta = (componentMeta, component, allComponents, resolvedCustomSchema) => {
+  const tempComponentMeta = deepClone(componentMeta);
+
+  let properties = [];
+  let additionalActions = [];
+  let dataProperties = [];
+  let deprecatedProperties = [];
+
+  const events = Object.keys(componentMeta.events);
+  const validations = Object.keys(componentMeta.validation || {});
+
+  // Categorize properties
+  for (const [key] of Object.entries(componentMeta?.properties)) {
+    if (componentMeta?.properties[key]?.section === 'additionalActions') {
+      additionalActions.push(key);
+    } else if (componentMeta?.properties[key]?.section === 'data') {
+      dataProperties.push(key);
+    } else if (componentMeta?.properties[key]?.section === 'deprecated') {
+      deprecatedProperties.push(key);
+    } else {
+      // Skip the fields property as it is handled separately
+      if (key === 'fields') continue;
+      properties.push(key);
+    }
+  }
+
+  // Process button to submit options
+  const { id } = component;
+  const newOptions = [{ name: 'None', value: 'none' }];
+
+  Object.entries(allComponents).forEach(([componentId, _component]) => {
+    const validParent =
+      _component.component.parent === id ||
+      _component.component.parent === `${id}-footer` ||
+      _component.component.parent === `${id}-header`;
+    if (validParent && _component?.component?.component === 'Button') {
+      newOptions.push({ name: _component.component.name, value: componentId });
+    }
+  });
+
+  tempComponentMeta.properties.buttonToSubmit.options = newOptions;
+
+  // Hide header footer if custom schema is turned on
+  if (resolvedCustomSchema) {
+    component.component.properties.showHeader = {
+      ...component.component.properties.headerHeight,
+      isHidden: true,
+    };
+    component.component.properties.showFooter = {
+      ...component.component.properties.headerHeight,
+      isHidden: true,
+    };
+  }
+
+  return {
+    tempComponentMeta,
+    properties,
+    additionalActions,
+    dataProperties,
+    deprecatedProperties,
+    events,
+    validations,
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/fieldOperations.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/fieldOperations.js
new file mode 100644
index 0000000000..2cfc01ca8b
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/fieldOperations.js
@@ -0,0 +1,292 @@
+import { merge, set } from 'lodash';
+import { deepClone } from '@/_helpers/utilities/utils.helpers';
+import { v4 as uuidv4 } from 'uuid';
+import { componentTypes } from '@/AppBuilder/WidgetManager';
+import useStore from '@/AppBuilder/_stores/store';
+// eslint-disable-next-line import/no-unresolved
+import { diff } from 'deep-object-diff';
+import { ensureHandlebars, buildOptions } from './utils';
+import { COMPONENT_LAYOUT_DETAILS, COMPONENT_WITH_OPTIONS } from '../constants';
+
+export const createNewComponentFromMeta = (column, parentId, nextTop) => {
+  const currentLayout = useStore.getState().currentLayout;
+  const componentType = column.componentType || 'TextInput';
+  const fieldId = uuidv4();
+
+  const componentMeta = componentTypes.find((comp) => comp.component === componentType);
+
+  if (!componentMeta) {
+    console.error(`Component type ${componentType} not found in componentTypes`);
+    return;
+  }
+
+  const defaultHeight = componentMeta.defaultSize?.height || COMPONENT_LAYOUT_DETAILS.defaultHeight;
+
+  const componentData = deepClone(componentMeta);
+  const componentName = useStore.getState().generateUniqueComponentNameFromBaseName(column.name);
+
+  const formField = {
+    id: fieldId,
+    name: componentName,
+    component: {
+      ...componentData,
+      type: componentType,
+      name: componentName,
+      parent: parentId,
+      definition: merge({}, componentData.definition, {
+        properties: {
+          label: {
+            value: column.label,
+          },
+        },
+        styles: {
+          alignment: { value: 'top' },
+        },
+        validation: {
+          mandatory: column.mandatory,
+        },
+        others: {
+          showOnDesktop: {
+            value: currentLayout === 'desktop' ? '{{true}}' : '{{false}}',
+          },
+          showOnMobile: {
+            value: currentLayout === 'mobile' ? '{{true}}' : '{{false}}',
+          },
+        },
+      }),
+    },
+    layouts: {
+      desktop: {
+        top: nextTop,
+        left: COMPONENT_LAYOUT_DETAILS.defaultLeft,
+        width: COMPONENT_LAYOUT_DETAILS.defaultWidth,
+        height: defaultHeight,
+      },
+      mobile: {
+        top: nextTop,
+        left: COMPONENT_LAYOUT_DETAILS.defaultLeft,
+        width: COMPONENT_LAYOUT_DETAILS.defaultWidth,
+        height: defaultHeight,
+      },
+    },
+  };
+
+  setValuesBasedOnType(column, componentType, formField, false);
+
+  return {
+    deleted: false,
+    added: formField,
+    updated: {},
+  };
+};
+
+/**
+ * Updates an existing form field component with new values
+ * @param {string} componentId - ID of the component to update
+ * @param {Object} updatedField - New field values to apply
+ * @param {Object} currentField - Current field data
+ * @returns {Object} Updated component definition
+ */
+export const updateFormFieldComponent = (updatedField, currentField, parentId, nextTop = 0) => {
+  const componentId = updatedField?.componentId;
+
+  if (!componentId) {
+    // componentId is not available, create a new component
+    return createNewComponentFromMeta(updatedField, parentId, nextTop);
+  }
+
+  // Get the current component from the store
+  const componentToUpdate = useStore.getState().getComponentDefinition(componentId);
+
+  if (!componentToUpdate) {
+    console.error(`Component with ID ${componentId} not found`);
+    return null;
+  }
+
+  if (updatedField.componentType !== componentToUpdate.component.component) {
+    return handleComponentTypeChange(componentToUpdate, updatedField);
+  }
+
+  // Create a deep clone of the component to avoid reference issues
+  const updatedComponent = deepClone(componentToUpdate);
+
+  // Update label if changed
+  if (updatedField.label !== currentField.label) {
+    set(updatedComponent.component.definition.properties, 'label.value', updatedField.label);
+  }
+
+  // Update mandatory status
+  if (updatedField.mandatory !== currentField.mandatory) {
+    set(updatedComponent.component.definition.validation, 'mandatory', updatedField.mandatory);
+  }
+
+  // Update visibility status
+  if (updatedField.visibility !== currentField.visibility) {
+    set(updatedComponent.component.definition.properties, 'visibility', updatedField.visibility);
+  }
+
+  // Update component type specific properties
+  const componentType = updatedField.componentType || componentToUpdate.component.component;
+
+  setValuesBasedOnType(updatedField, componentType, updatedComponent, false);
+
+  return { updated: diff(componentToUpdate, updatedComponent) };
+};
+
+const handleComponentTypeChange = (componentToUpdate, updatedField) => {
+  const newComponentId = uuidv4();
+
+  const addOptions =
+    COMPONENT_WITH_OPTIONS.includes(updatedField.componentType) &&
+    COMPONENT_WITH_OPTIONS.includes(componentToUpdate.component.component);
+
+  const currentLayout = useStore.getState().currentLayout;
+  const nonActiveLayout = currentLayout === 'desktop' ? 'mobile' : 'desktop';
+
+  const componentMeta = componentTypes.find((comp) => comp.component === updatedField.componentType);
+
+  if (!componentMeta) {
+    console.error(`Component type ${updatedField.componentType} not found in componentTypes`);
+    return null;
+  }
+
+  const existingLayouts = componentToUpdate.layouts || {};
+
+  const componentName = useStore
+    .getState()
+    .generateUniqueComponentNameFromBaseName(updatedField.name || componentToUpdate.component.name);
+
+  const componentData = deepClone(componentMeta);
+
+  const newComponent = {
+    id: newComponentId,
+    name: componentName,
+    component: {
+      ...componentData,
+      type: updatedField.componentType,
+      name: componentName,
+      parent: componentToUpdate.component.parent,
+      definition: merge({}, componentData.definition, {
+        properties: {
+          label: {
+            value: updatedField.label || componentToUpdate.component.definition.properties.label?.value,
+          },
+          ...(addOptions && { options: componentToUpdate.component.definition.properties.options }),
+        },
+        styles: {
+          alignment: { value: 'top' },
+        },
+        validation: {
+          mandatory: updatedField.mandatory || componentToUpdate.component.definition.validation.mandatory,
+        },
+        others: {
+          showOnDesktop: componentToUpdate.component.definition.others?.showOnDesktop || { value: '{{true}}' },
+          showOnMobile: componentToUpdate.component.definition.others?.showOnMobile || { value: '{{false}}' },
+        },
+      }),
+    },
+    layouts: {
+      [currentLayout]: existingLayouts[currentLayout] || { top: 0, left: 3, width: 37, height: 30 },
+      [nonActiveLayout]: existingLayouts[nonActiveLayout] || { top: 0, left: 3, width: 37, height: 30 },
+    },
+  };
+
+  setValuesBasedOnType(updatedField, updatedField.componentType, newComponent, true);
+
+  // Return an object that indicates to:
+  // 1. Delete the old component
+  // 2. Add the new component
+  return {
+    deleted: true,
+    added: newComponent,
+    updated: {},
+  };
+};
+
+const setValuesBasedOnType = (column, componentType, formField, isTypeChange = false) => {
+  if (column.value !== undefined && column.value !== null) {
+    if (componentType === 'TextInput' || componentType === 'PasswordInput' || componentType === 'TextArea') {
+      set(formField.component.definition.properties, 'value.value', column.value);
+    }
+    if (componentType === 'NumberInput') {
+      set(formField.component.definition.properties, 'value.value', ensureHandlebars(column.value));
+    } else if (componentType === 'Checkbox' || componentType === 'DatePickerV2' || componentType === 'ToggleSwitchV2') {
+      set(formField.component.definition.properties, 'defaultValue.value', column.value);
+    } else if (
+      componentType === 'DropdownV2' ||
+      componentType === 'MultiselectV2' ||
+      componentType === 'RadioButtonV2'
+    ) {
+      if (!isTypeChange) {
+        set(formField.component.definition.properties, 'options.value', buildOptions(column.value));
+      } else if (Array.isArray(formField.component.definition.properties?.options)) {
+        set(
+          formField.component.definition.properties,
+          'options.value',
+          buildOptions(formField.component.definition.properties.options)
+        );
+      }
+    }
+  }
+
+  if (isTypeChange && componentType === 'TextArea') {
+    set(formField, 'layouts.desktop.height', 50);
+    set(formField, 'layouts.mobile.height', 50);
+  }
+
+  if (
+    column.placeholder &&
+    componentType !== 'Checkbox' &&
+    componentType !== 'DatePickerV2' &&
+    componentType !== 'ToggleSwitchV2' &&
+    componentType !== 'DaterangePicker'
+  ) {
+    set(formField.component.definition.properties, 'placeholder.value', column.placeholder);
+  }
+};
+
+/**
+ * Retrieves field data from a component definition in the store
+ * @param {string} componentId - Component ID to fetch definition for
+ * @param {Function} getComponentDefinition - Function to get component definition
+ * @returns {Object} Field data with merged component definition values
+ */
+export const getFieldDataFromComponent = (componentId, getComponentDefinition) => {
+  if (!componentId) {
+    return null;
+  }
+
+  const component = getComponentDefinition(componentId);
+  if (!component) return null;
+
+  const componentType = component.component.component;
+  const definition = component.component.definition;
+
+  // Get values from component definition
+  const label = definition.properties?.label?.value || '';
+  const name = component.component.name;
+
+  // Different components store values in different properties
+  let value;
+  if (componentType === 'Checkbox' || componentType === 'DatePickerV2') {
+    value = definition.properties?.defaultValue?.value;
+  } else {
+    value = definition.properties?.value?.value;
+  }
+
+  const mandatory = definition.validation?.mandatory;
+  const visibility = definition.properties?.visibility;
+  const selected = true;
+  const placeholder = definition.properties?.placeholder?.value || '';
+
+  return {
+    label,
+    name,
+    value,
+    mandatory,
+    visibility,
+    selected,
+    placeholder,
+    componentType,
+  };
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils.js
new file mode 100644
index 0000000000..3ac6b40a98
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils.js
@@ -0,0 +1,333 @@
+import React from 'react';
+import WidgetIcon from '@/../assets/images/icons/widgets';
+import { DATATYPE_TO_COMPONENT, JSON_DIFFERENCE, INPUT_COMPONENTS_FOR_FORM } from '../constants';
+import { startCase, omit, uniqBy } from 'lodash';
+import { getFieldDataFromComponent } from './fieldOperations';
+import { componentTypeDefinitionMap } from '@/AppBuilder/WidgetManager';
+
+export const buildOptions = (options = []) => {
+  if (Array.isArray(options))
+    return options.map((option, index) => ({
+      label: option,
+      value: index,
+      disable: { value: false },
+      visible: { value: true },
+      default: { value: false },
+    }));
+};
+
+export const ensureHandlebars = (value) => {
+  if (typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')) {
+    return value; // Already has handlebars
+  }
+  return `{{${value}}}`;
+};
+
+// Helper function to check if a value is considered "true"
+export const isTrueValue = (value) => {
+  if (value === true) return true;
+  if (typeof value === 'string') {
+    const trimmedValue = value.trim().toLowerCase();
+    // Check for "{{true}}" format or just "true"
+    return trimmedValue === '{{true}}' || trimmedValue === 'true';
+  }
+  return false;
+};
+
+export const isPropertyFxControlled = (property) => {
+  return property && typeof property === 'object' && property.fxActive === true;
+};
+
+export const isValidJSONObject = (jsonString) => {
+  try {
+    const parsed = JSON.parse(jsonString);
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed);
+  } catch (e) {
+    return false;
+  }
+};
+
+export const getDataType = (value) => {
+  if (Array.isArray(value)) return 'array';
+  if (typeof value === 'string') {
+    const date = new Date(value);
+    if (!isNaN(date.getTime())) return 'date';
+    return 'string';
+  }
+  if (typeof value === 'object' && value !== null) return 'object';
+  return typeof value;
+};
+
+export const buildFieldObject = (key, value, label, jsonDifferences) => {
+  const dataType = getDataType(value);
+
+  return {
+    key,
+    name: key,
+    label: startCase(label) || startCase(key),
+    value: dataType === 'number' || dataType === 'boolean' ? ensureHandlebars(value) : value,
+    dataType,
+    componentType: DATATYPE_TO_COMPONENT[dataType] || 'TextInput',
+    mandatory: { value: false },
+    selected: false,
+    isCustomField: false,
+    isNew: jsonDifferences.isNew.includes(key),
+    isRemoved: jsonDifferences.isRemoved.includes(key),
+    isExisting: jsonDifferences.isExisting.includes(key),
+  };
+};
+
+export const parseDataAndBuildFields = (data, jsonDifferences = JSON_DIFFERENCE) => {
+  const obj = data || {};
+  const result = [];
+
+  Object.entries(obj).forEach(([key, value]) => {
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      const nestedKeys = Object.keys(value);
+      if (nestedKeys.length === 0) {
+        return;
+      }
+
+      nestedKeys.forEach((nestedKey) => {
+        const nestedValue = value[nestedKey];
+        if (
+          typeof nestedValue === 'object' &&
+          nestedValue !== null &&
+          !Array.isArray(nestedValue) &&
+          Object.keys(nestedValue).length === 0
+        ) {
+          return;
+        }
+
+        result.push(buildFieldObject(`${key}.${nestedKey}`, nestedValue, nestedKey, jsonDifferences));
+      });
+    } else {
+      result.push(buildFieldObject(key, value, key, jsonDifferences));
+    }
+  });
+
+  return result;
+};
+
+export const findNextElementTop = (childComponents, currentLayout = 'desktop', componentsToBeIgnored = []) => {
+  const defaultTop = 0;
+
+  if (!childComponents || typeof childComponents !== 'object' || Object.keys(childComponents).length === 0) {
+    return defaultTop;
+  }
+
+  try {
+    let highestTop = -1;
+    let lastComponent = null;
+
+    Object.entries(childComponents).forEach(([componentId, component]) => {
+      if (componentsToBeIgnored.includes(componentId)) {
+        return;
+      }
+
+      const currentTop = component?.component?.layouts?.[currentLayout]?.top || 0;
+
+      if (currentTop > highestTop) {
+        highestTop = currentTop;
+        lastComponent = component;
+      }
+    });
+
+    if (
+      lastComponent &&
+      lastComponent.component &&
+      lastComponent.component.layouts &&
+      lastComponent.component.layouts[currentLayout]
+    ) {
+      const { top = 0, height = 0 } = lastComponent.component.layouts[currentLayout];
+
+      return top + height;
+    }
+
+    return defaultTop;
+  } catch (error) {
+    console.error('Error finding last element position:', error);
+    return defaultTop;
+  }
+};
+
+export const getComponentIcon = (componentType, darkMode) => {
+  if (!componentType) return null;
+
+  const component = componentTypeDefinitionMap[componentType];
+
+  const iconName = component.name.toLowerCase();
+  return <WidgetIcon name={iconName} version={component?.version} fill={darkMode ? '#3A3F42' : '#D7DBDF'} width="16" />;
+};
+
+export const getInputTypeOptions = (darkMode) => {
+  const constructOptions = (component) => {
+    return {
+      label: component.displayName,
+      value: component.component,
+      leadingIcon: (
+        <WidgetIcon
+          name={component.name.toLowerCase()}
+          version={component?.version}
+          fill={darkMode ? '#3A3F42' : '#D7DBDF'}
+          width="16"
+        />
+      ),
+    };
+  };
+
+  return INPUT_COMPONENTS_FOR_FORM.reduce((options, component) => {
+    options[component] = constructOptions(componentTypeDefinitionMap[component]);
+    return options;
+  }, {});
+};
+
+export const constructFeildForSave = (field) => {
+  const { key, value, dataType, componentType, mandatory, selected, isCustomField } = field;
+
+  return {
+    key,
+    value: dataType === 'number' || dataType === 'boolean' ? ensureHandlebars(value) : value,
+    dataType,
+    componentType,
+    mandatory: mandatory?.value || false,
+    selected: selected?.value || false,
+    isCustomField: isCustomField || false,
+  };
+};
+
+const extractKeys = (json, parentKey = '') => {
+  if (!json || typeof json !== 'object') return [];
+
+  return Object.keys(json).reduce((keys, key) => {
+    const currentKey = parentKey ? `${parentKey}.${key}` : key;
+    const value = json[key];
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      return [...keys, currentKey, ...extractKeys(value, currentKey)];
+    }
+
+    return [...keys, currentKey];
+  }, []);
+};
+
+export const analyzeJsonDifferences = (newJson, existingJson) => {
+  if (!newJson) return JSON_DIFFERENCE;
+
+  const newKeys = extractKeys(newJson);
+  const existingKeys = extractKeys(existingJson);
+
+  return {
+    isExisting: newKeys.filter((key) => existingKeys.includes(key)),
+    isNew: newKeys.filter((key) => !existingKeys.includes(key)),
+    isRemoved: existingKeys.filter((key) => !newKeys.includes(key)),
+  };
+};
+
+export const mergeFieldsWithComponentDefinition = (fields, getComponentDefinition) => {
+  return fields
+    .map((field) => {
+      if (field.componentId) {
+        const componentData = getFieldDataFromComponent(field.componentId, getComponentDefinition);
+
+        if (!componentData) {
+          return null;
+        }
+
+        return {
+          ...field,
+          label: componentData?.label || field.label || '',
+          name: componentData?.name || field.name || '',
+          value: componentData?.value || field.value || '',
+          mandatory: componentData?.mandatory || field.mandatory || false,
+          visibility: componentData?.visibility || field.visibility || false,
+          selected: componentData?.selected || field.selected || false,
+          placeholder: componentData?.placeholder || field.placeholder || '',
+          componentType: componentData?.componentType || field.componentType || 'TextInput',
+        };
+      }
+      return field;
+    })
+    .filter((field) => field !== null);
+};
+
+export const mergeFormFieldsWithNewData = (existingFields, newFields) => {
+  if (!existingFields || existingFields.length === 0) return newFields;
+
+  const existingFieldsMap = {};
+  existingFields.forEach((field) => {
+    if (field.name) {
+      existingFieldsMap[field.name] = field;
+    }
+  });
+
+  return newFields.map((newField) => {
+    if (newField.isNew || !existingFieldsMap[newField.name]) {
+      return newField;
+    }
+    return {
+      ...newField,
+      ...omit(existingFieldsMap[newField.name], ['isNew']),
+    };
+  });
+};
+
+export const cleanupFormFields = (fields) => {
+  return uniqBy(
+    fields.filter((field) => !!field.componentId),
+    'componentId'
+  ).map((field) => ({
+    componentId: field.componentId,
+    isCustomField: field.isCustomField,
+    dataType: field.dataType,
+    key: field.key,
+  }));
+};
+
+export const findFirstKeyValuePairWithPath = (data, basePath = '') => {
+  let current = data;
+  let pathSegments = [];
+
+  if (data === null || data === undefined || data?.length === 0) {
+    return {
+      value: data,
+      path: basePath,
+    };
+  }
+
+  while (Array.isArray(current) && current.length > 0) {
+    pathSegments.push('[0]');
+    current = current[0];
+  }
+
+  if (current && typeof current === 'object' && !Array.isArray(current)) {
+    // Inject path segments before the closing "}}"
+    const insertAt = basePath.lastIndexOf('}}');
+    const fullPath =
+      insertAt !== -1
+        ? basePath.slice(0, insertAt) + pathSegments.join('') + basePath.slice(insertAt)
+        : basePath + pathSegments.join('');
+
+    return {
+      value: current,
+      path: fullPath,
+    };
+  }
+
+  return {
+    value: null,
+    path: null,
+  };
+};
+
+export const mergeArrays = (arr1, arr2) => {
+  const map = new Map();
+
+  // Add all from arr1
+  arr1.forEach((item) => map.set(item.isCustomField ? item.componentId : item.key, item));
+
+  // Overwrite/add from arr2
+  arr2.forEach((item) => map.set(item.isCustomField ? item.componentId : item.key, item));
+
+  return Array.from(map.values());
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Modal.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Modal.jsx
index ed1814eb0e..b44bc860df 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Modal.jsx
@@ -43,7 +43,9 @@ export const Modal = ({ componentMeta, darkMode, ...restProps }) => {
     return accordionItems;
   };
 
-  const properties = Object.keys(componentMeta.properties);
+  const properties = Object.keys(componentMeta.properties || {}).filter(
+    (key) => componentMeta.properties[key].section !== 'additionalActions'
+  );
   const events = Object.keys(componentMeta.events);
   const validations = Object.keys(componentMeta.validation || {});
 
@@ -64,7 +66,8 @@ export const Modal = ({ componentMeta, darkMode, ...restProps }) => {
     apps,
     allComponents,
     validations,
-    darkMode
+    darkMode,
+    undefined
   );
 
   accordionItems.splice(1, 0, ...conditionalAccordionItems(component));
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/TabComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/TabComponent.jsx
new file mode 100644
index 0000000000..35fa70ae66
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/TabComponent.jsx
@@ -0,0 +1,527 @@
+import React, { useState, useEffect } from 'react';
+import Accordion from '@/_ui/Accordion';
+import { EventManager } from '../EventManager';
+import { renderElement } from '../Utils';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import List from '@/ToolJetUI/List/List';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import CodeHinter from '@/AppBuilder/CodeEditor';
+import { resolveReferences } from '@/_helpers/utils';
+import AddNewButton from '@/ToolJetUI/Buttons/AddNewButton/AddNewButton';
+import ListGroup from 'react-bootstrap/ListGroup';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import SortableList from '@/_components/SortableList';
+import Trash from '@/_ui/Icon/solidIcons/Trash';
+
+export function TabsLayout({ componentMeta, darkMode, ...restProps }) {
+  const {
+    layoutPropertyChanged,
+    component,
+    dataQueries,
+    paramUpdated,
+    currentState,
+    eventsChanged,
+    apps,
+    allComponents,
+    pages,
+  } = restProps;
+
+  const isDynamicEnabled = resolveReferences(
+    component?.component?.definition?.properties?.useDynamicOptions?.value,
+    currentState
+  );
+
+  const [tabItems, setTabItems] = useState([]);
+  const [activeColumnPopoverIndex, setActiveColumnPopoverIndex] = useState(null);
+  const [hoveredTabItemIndex, setHoveredTabItemIndex] = useState(null);
+  let properties = [];
+  let additionalActions = [];
+
+  for (const [key] of Object.entries(componentMeta?.properties)) {
+    if (componentMeta?.properties[key]?.section === 'additionalActions') {
+      additionalActions.push(key);
+    } else {
+      properties.push(key);
+    }
+  }
+
+  const constructTabItems = () => {
+    const tabItemsValue = component?.component?.definition?.properties?.tabItems?.value;
+    let tabItems = [];
+
+    if (typeof tabItemsValue === 'string') {
+      tabItems = resolveReferences(tabItemsValue, currentState);
+    } else {
+      tabItems = tabItemsValue?.map((tabItem) => tabItem);
+    }
+    return tabItems?.map((tabItem) => {
+      const newTabItem = { ...tabItem };
+
+      Object.keys(tabItem)?.forEach((key) => {
+        if (typeof tabItem[key]?.value === 'boolean') {
+          newTabItem[key]['value'] = `{{${tabItem[key]?.value}}}`;
+        }
+      });
+
+      return newTabItem;
+    });
+  };
+
+  const handleAddTabItem = () => {
+    const generateNewTabItem = () => {
+      let found = false;
+      let title = '';
+      let currentNumber = tabItems.length;
+      let id = `t${currentNumber}`;
+      while (!found) {
+        title = `Tab ${currentNumber}`;
+        if (tabItems.find((tabItem) => tabItem.title === title) === undefined) {
+          found = true;
+        }
+        currentNumber += 1;
+      }
+      return {
+        id: id,
+        title,
+        visible: { value: '{{true}}' },
+        disable: { value: '{{false}}' },
+        iconVisibility: { value: '{{false}}' },
+        icon: { value: 'IconHome2' },
+      };
+    };
+
+    let newTabItem = generateNewTabItem();
+    const updatedTabItems = [...tabItems, newTabItem];
+    setTabItems(updatedTabItems);
+    updateAllTabItemsParams(updatedTabItems);
+  };
+
+  const updateAllTabItemsParams = (tabItems) => {
+    paramUpdated({ name: 'tabItems' }, 'value', tabItems, 'properties', false);
+  };
+
+  const getItemStyle = (isDragging, draggableStyle) => ({
+    userSelect: 'none',
+    ...draggableStyle,
+  });
+
+  const handleDeleteTabItem = (index) => {
+    const updatedTabItems = tabItems.filter((tabItem, i) => i !== index);
+    setTabItems(updatedTabItems);
+    updateAllTabItemsParams(updatedTabItems);
+  };
+
+  const reorderTabItems = (startIndex, endIndex) => {
+    const result = Array.from(tabItems);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    setTabItems(result);
+    updateAllTabItemsParams(result);
+  };
+
+  const onDragEnd = ({ source, destination }) => {
+    if (!destination || source.index === destination.index) {
+      return;
+    }
+    reorderTabItems(source.index, destination.index);
+  };
+
+  const handleValueChange = (item, value, property, index) => {
+    const updatedTabItems = tabItems.map((tabItem) => {
+      if (tabItem.id === item.id) {
+        return {
+          ...tabItem,
+          [property]: value,
+        };
+      }
+      return tabItem;
+    });
+
+    setTabItems(updatedTabItems);
+    updateAllTabItemsParams(updatedTabItems);
+  };
+
+  const onChangeVisibility = (item, value, property, index) => {
+    const updatedTabItems = tabItems.map((tabItem) => {
+      if (tabItem.id === item.id) {
+        let newVisibilityValue = resolveReferences(tabItem[property]);
+        newVisibilityValue = typeof newVisibilityValue === 'boolean' ? newVisibilityValue : newVisibilityValue['value'];
+        return {
+          ...tabItem,
+          [property]: !newVisibilityValue,
+        };
+      }
+      return tabItem;
+    });
+
+    setTabItems(updatedTabItems);
+    updateAllTabItemsParams(updatedTabItems);
+  };
+
+  const onChangeIcon = (item, value, property, index) => {
+    const updatedTabItems = tabItems.map((tabItem) => {
+      if (tabItem.id === item.id) {
+        return {
+          ...tabItem,
+          [property]: value,
+          iconVisibility: { value: true },
+        };
+      }
+      return tabItem;
+    });
+
+    setTabItems(updatedTabItems);
+    updateAllTabItemsParams(updatedTabItems);
+  };
+
+  const _renderOverlay = (item, index) => {
+    return (
+      <Popover className={`${darkMode && 'dark-theme theme-dark'}`} style={{ minWidth: '248px' }}>
+        <Popover.Body>
+          <div className="field mb-3" data-cy={`input-and-label-tab-title`}>
+            <label data-cy={`label-tab-title`} className="font-weight-500 mb-1 font-size-12">
+              {'Tab Title'}
+            </label>
+            <CodeHinter
+              currentState={currentState}
+              type={'basic'}
+              initialValue={item?.title}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={'Tab Title'}
+              onChange={(value) => handleValueChange(item, value, 'title', index)}
+            />
+          </div>
+
+          <div className="field mb-3" data-cy={`input-and-label-tab-id`}>
+            <label data-cy={`label-tab-id`} className="font-weight-500 mb-1 font-size-12">
+              {'Id'}
+            </label>
+            <CodeHinter
+              currentState={currentState}
+              type={'basic'}
+              initialValue={item?.id}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={'Tab ID'}
+              onChange={(value) => handleValueChange(item, value, 'id', index)}
+            />
+          </div>
+
+          <div className="field mb-3" data-cy={`input-and-label-tab-id`}>
+            <CodeHinter
+              currentState={currentState}
+              initialValue={item?.icon?.value || ''}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              component={component}
+              type={'fxEditor'}
+              paramLabel={'Icon'}
+              paramName={'icon'}
+              onChange={(value) => {
+                onChangeIcon(item, { value }, 'icon', index);
+              }}
+              onVisibilityChange={(value) => onChangeVisibility(item, { value: true }, 'iconVisibility', index)}
+              fieldMeta={{ type: 'icon', displayName: 'Icon' }}
+              paramType={'icon'}
+            />
+          </div>
+
+          <div className="field mb-2">
+            <CodeHinter
+              currentState={currentState}
+              initialValue={item?.fieldBackgroundColor?.value}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              component={component}
+              type={'fxEditor'}
+              paramLabel={'Background'}
+              paramName={'fieldBackgroundColor'}
+              onChange={(value) => {
+                handleValueChange(item, { value }, 'fieldBackgroundColor', index);
+              }}
+              fieldMeta={{ type: 'color', displayName: 'Background' }}
+              paramType={'color'}
+            />
+          </div>
+
+          <div className="field mb-2">
+            <CodeHinter
+              currentState={currentState}
+              initialValue={item?.loading?.value}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              component={component}
+              type={'fxEditor'}
+              paramLabel={'Loading'}
+              paramName={'loading'}
+              onChange={(value) => {
+                handleValueChange(item, { value }, 'loading', index);
+              }}
+              fieldMeta={{ type: 'toggle', displayName: 'Loading' }}
+              paramType={'toggle'}
+            />
+          </div>
+
+          <div className="field mb-2" data-cy={`input-and-label-tab-visible`}>
+            <CodeHinter
+              currentState={currentState}
+              initialValue={item?.visible?.value}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              component={component}
+              type={'fxEditor'}
+              paramLabel={'Visibility'}
+              onChange={(value) => handleValueChange(item, { value }, 'visible', index)}
+              paramName={'visible'}
+              onFxPress={(active) => handleOnFxPress(active, index, 'visible')}
+              fxActive={item?.visible?.fxActive}
+              fieldMeta={{
+                type: 'toggle',
+                displayName: 'Visible',
+              }}
+              paramType={'toggle'}
+            />
+          </div>
+          <div className="field" data-cy={`input-and-label-tab-disable`}>
+            <CodeHinter
+              currentState={currentState}
+              initialValue={item?.disable?.value}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              component={component}
+              type={'fxEditor'}
+              paramLabel={'Disable'}
+              paramName={'disable'}
+              onChange={(value) => handleValueChange(item, { value }, 'disable', index)}
+              onFxPress={(active) => handleOnFxPress(active, index, 'disable')}
+              fxActive={item?.disable?.fxActive}
+              fieldMeta={{
+                type: 'toggle',
+                displayName: 'Disable',
+              }}
+              paramType={'toggle'}
+            />
+          </div>
+        </Popover.Body>
+      </Popover>
+    );
+  };
+
+  useEffect(() => {
+    setTabItems(constructTabItems());
+  }, [isDynamicEnabled, component?.id]);
+
+  const handleToggleColumnPopover = (index) => {
+    setActiveColumnPopoverIndex(index);
+  };
+
+  const _renderTabOptions = () => {
+    return (
+      <List style={{ marginBottom: '20px' }}>
+        <DragDropContext
+          onDragEnd={(result) => {
+            onDragEnd(result);
+          }}
+        >
+          <Droppable droppableId="droppable">
+            {({ innerRef, droppableProps, placeholder }) => (
+              <div className="w-100" {...droppableProps} ref={innerRef}>
+                {tabItems?.map((item, index) => {
+                  return (
+                    <Draggable key={item.title + item.id} draggableId={item.title + item.id} index={index}>
+                      {(provided, snapshot) => (
+                        <div
+                          key={index}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                          className="tabs-list"
+                        >
+                          <OverlayTrigger
+                            trigger="click"
+                            placement="left"
+                            rootClose
+                            overlay={_renderOverlay(item, index)}
+                            onToggle={(show) => {
+                              if (show) {
+                                handleToggleColumnPopover(index);
+                              } else {
+                                handleToggleColumnPopover(null);
+                              }
+                            }}
+                          >
+                            <div
+                              key={item.title}
+                              style={{
+                                marginBottom: '8px',
+                              }}
+                            >
+                              <ListGroup.Item
+                                isDraggable={true}
+                                onMouseEnter={() => setHoveredTabItemIndex(index)}
+                                onMouseLeave={() => setHoveredTabItemIndex(null)}
+                                className={activeColumnPopoverIndex === index && 'active-column-list'}
+                                {...restProps}
+                              >
+                                <div className="row">
+                                  <div className="col-auto d-flex align-items-center">
+                                    <SortableList.DragHandle show />
+                                  </div>
+                                  <div className="col text-truncate cursor-pointer" style={{ padding: '0px' }}>
+                                    {resolveReferences(item.title, currentState)}
+                                  </div>
+                                  <div className="col-auto">
+                                    {index === hoveredTabItemIndex && (
+                                      <ButtonSolid
+                                        variant="danger"
+                                        size="xs"
+                                        className={'delete-icon-btn'}
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          handleDeleteTabItem(index);
+                                        }}
+                                      >
+                                        <span className="d-flex">
+                                          <Trash fill={'var(--tomato9)'} width={12} />
+                                        </span>
+                                      </ButtonSolid>
+                                    )}
+                                  </div>
+                                </div>
+                              </ListGroup.Item>
+                            </div>
+                          </OverlayTrigger>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })}
+                {placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+        <AddNewButton onClick={handleAddTabItem} className="mt-0">
+          Add new tab
+        </AddNewButton>
+      </List>
+    );
+  };
+
+  let items = [];
+
+  if (properties.length > 0) {
+    items.push({
+      title: 'Options',
+      isOpen: true,
+      children: isDynamicEnabled ? (
+        properties?.map((property) =>
+          renderElement(
+            component,
+            componentMeta,
+            paramUpdated,
+            dataQueries,
+            property,
+            'properties',
+            currentState,
+            allComponents,
+            darkMode
+          )
+        )
+      ) : (
+        <>
+          {renderElement(
+            component,
+            componentMeta,
+            paramUpdated,
+            dataQueries,
+            'useDynamicOptions',
+            'properties',
+            currentState,
+            allComponents
+          )}
+          {_renderTabOptions()}
+        </>
+      ),
+    });
+  }
+
+  items.push({
+    title: 'Events',
+    isOpen: true,
+    children: (
+      <EventManager
+        sourceId={component?.id}
+        eventSourceType="component"
+        eventMetaDefinition={componentMeta}
+        currentState={currentState}
+        dataQueries={dataQueries}
+        components={allComponents}
+        eventsChanged={eventsChanged}
+        apps={apps}
+        darkMode={darkMode}
+        pages={pages}
+      />
+    ),
+  });
+
+  items.push({
+    title: `Additional Actions`,
+    isOpen: true,
+    children: additionalActions.map((property) => {
+      return renderElement(
+        component,
+        componentMeta,
+        paramUpdated,
+        dataQueries,
+        property,
+        'properties',
+        currentState,
+        allComponents,
+        darkMode,
+        componentMeta.properties?.[property]?.placeholder
+      );
+    }),
+  });
+
+  items.push({
+    title: 'Devices',
+    isOpen: true,
+    children: (
+      <>
+        {renderElement(
+          component,
+          componentMeta,
+          layoutPropertyChanged,
+          dataQueries,
+          'showOnDesktop',
+          'others',
+          currentState,
+          allComponents
+        )}
+        {renderElement(
+          component,
+          componentMeta,
+          layoutPropertyChanged,
+          dataQueries,
+          'showOnMobile',
+          'others',
+          currentState,
+          allComponents
+        )}
+      </>
+    ),
+  });
+
+  return <Accordion items={items} />;
+}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/ColumnPopover.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/ColumnPopover.jsx
index de1da44195..4ed1f7a026 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/ColumnPopover.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/ColumnPopover.jsx
@@ -76,7 +76,10 @@ export const ColumnPopoverContent = ({
           </div>
         </div>
       </Popover.Header>
-      <Popover.Body className={`table-column-popover ${darkMode && 'theme-dark'}`}>
+      <Popover.Body
+        className={`table-column-popover ${darkMode && 'theme-dark'}`}
+        style={{ maxHeight: '80vh', overflowY: 'auto' }}
+      >
         {activeTab === 'propertiesTab' ? (
           <PropertiesTabElements
             column={column}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
index 135f2b450b..24919970d3 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
@@ -7,11 +7,57 @@ import { ProgramaticallyHandleProperties } from '../ProgramaticallyHandlePropert
 import { OptionsList } from '../SelectOptionsList/OptionsList';
 import { ValidationProperties } from './ValidationProperties';
 import DatepickerProperties from './DatepickerProperties';
-import { Option } from '@/AppBuilder/CodeBuilder/Elements/Select';
-import DeprecatedColumnTypeMsg from './DeprecatedColumnTypeMsg';
+import DeprecatedColumnTypeMsg, {
+  DeprecatedColumnTooltip,
+  checkIfTableColumnDeprecated,
+} from './DeprecatedColumnTypeMsg';
 import CustomSelect from '@/_ui/Select';
 import defaultStyles from '@/_ui/Select/styles';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { getColumnIcon } from '../utils';
+import { components } from 'react-select';
+import Check from '@/_ui/Icon/solidIcons/Check';
+import Icon from '@/_ui/Icon/solidIcons/index';
+
+const CustomOption = (props) => {
+  const ColumnIcon = getColumnIcon(props.data.value);
+  const isDeprecated = checkIfTableColumnDeprecated(props.data.value);
+
+  return (
+    <components.Option {...props}>
+      <DeprecatedColumnTooltip columnType={props.data.value}>
+        <div className="d-flex justify-content-between align-items-center">
+          <div className="d-flex align-items-center gap-2">
+            {ColumnIcon && <ColumnIcon width="16" height="16" />}
+            <span>{props.label}</span>
+          </div>
+          <div className="d-flex align-items-center gap-2">
+            {props.isSelected && (
+              <span>
+                <Check width={'20'} fill={'#3E63DD'} />
+              </span>
+            )}
+            {isDeprecated && (
+              <span>
+                <Icon name={'warning'} height={16} width={16} fill="#DB4324" />
+              </span>
+            )}
+          </div>
+        </div>
+      </DeprecatedColumnTooltip>
+    </components.Option>
+  );
+};
+
+const CustomValueContainer = ({ data, ...props }) => {
+  const Icon = getColumnIcon(data.value);
+  return (
+    <div className="d-flex align-items-center gap-2">
+      {Icon && <Icon width="16" height="16" />}
+      <span>{data.label}</span>
+    </div>
+  );
+};
 
 export const PropertiesTabElements = ({
   column,
@@ -54,6 +100,7 @@ export const PropertiesTabElements = ({
             { label: 'Link', value: 'link' },
             { label: 'JSON', value: 'json' },
             { label: 'Markdown', value: 'markdown' },
+            { label: 'HTML', value: 'html' },
             // Following column types are deprecated
             { label: 'Default', value: 'default' },
             { label: 'Dropdown', value: 'dropdown' },
@@ -64,7 +111,11 @@ export const PropertiesTabElements = ({
             { label: 'Multiple badges', value: 'badges' },
             { label: 'Tags', value: 'tags' },
           ]}
-          components={{ DropdownIndicator, Option }}
+          components={{
+            DropdownIndicator,
+            Option: CustomOption,
+            SingleValue: CustomValueContainer,
+          }}
           onChange={(value) => {
             onColumnItemChange(index, 'columnType', value);
           }}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
index 2b91a8dd15..e1d06686d1 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
@@ -129,6 +129,7 @@ export const StylesTabElements = ({
         'number',
         'json',
         'markdown',
+        'html',
         'boolean',
         'select',
         'text',
@@ -147,7 +148,7 @@ export const StylesTabElements = ({
                 property="textColor"
                 props={column}
                 component={component}
-                paramMeta={{ type: 'color', displayName: 'Text color' }}
+                paramMeta={{ type: 'colorSwatches', displayName: 'Text color' }}
                 paramType="properties"
               />
             </div>
@@ -162,7 +163,7 @@ export const StylesTabElements = ({
               property="cellBackgroundColor"
               props={column}
               component={component}
-              paramMeta={{ type: 'color', displayName: 'Cell color' }}
+              paramMeta={{ type: 'colorSwatches', displayName: 'Cell color' }}
               paramType="properties"
             />
           </div>
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
index c3fb47d612..da6ee1d34c 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
@@ -34,6 +34,8 @@ export const ProgramaticallyHandleProperties = ({
         return props.linkColor;
       case 'useDynamicOptions':
         return props?.useDynamicOptions;
+      case 'autoAssignColors':
+        return props?.autoAssignColors;
       case 'makeDefaultOption':
         return props?.[index]?.makeDefaultOption;
       case 'textColor':
@@ -52,6 +54,10 @@ export const ProgramaticallyHandleProperties = ({
         return props?.isDateSelectionEnabled;
       case 'jsonIndentation':
         return props?.jsonIndentation;
+      case 'labelColor':
+        return props?.labelColor;
+      case 'optionColor':
+        return props?.optionColor;
       default:
         return;
     }
@@ -74,6 +80,14 @@ export const ProgramaticallyHandleProperties = ({
     if (property === 'textColor') {
       return definitionObj?.value ?? '#11181C';
     }
+    if (property === 'labelColor') {
+      // return definitionObj?.value ?? 'var(--cc-primary-text)';
+      return definitionObj?.value ?? '#1B1F24';
+    }
+    if (property === 'optionColor') {
+      // return definitionObj?.value ?? 'var(--cc-surface2-surface)';
+      return definitionObj?.value ?? '#E4E7EB';
+    }
     if (property === 'underlineColor') {
       return definitionObj?.value ?? '#4368E3';
     }
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/SelectOptionsList/OptionsList.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/SelectOptionsList/OptionsList.jsx
index 1d6860ecd1..494b2e1b55 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/SelectOptionsList/OptionsList.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/SelectOptionsList/OptionsList.jsx
@@ -9,6 +9,7 @@ import Popover from 'react-bootstrap/Popover';
 import CodeHinter from '@/AppBuilder/CodeEditor';
 import { ProgramaticallyHandleProperties } from '../ProgramaticallyHandleProperties';
 import { resolveReferences } from '@/_helpers/utils';
+import { Button as ButtonComponent } from '@/components/ui/Button/Button';
 import { unset } from 'lodash';
 export const OptionsList = ({
   column,
@@ -141,12 +142,23 @@ export const OptionsList = ({
 
       props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties', true);
     };
+
+    const handleOptionColorChange = (index, property, value) => {
+      handleSelectOption(option, optionIndex, value, index, property);
+    };
+
     return (
       <Popover
         id="popover-basic"
         className={`${darkMode && 'dark-theme'}`}
         onClick={(e) => e.stopPropagation()}
-        style={{ zIndex: 99999, minWidth: 200 }}
+        style={{
+          zIndex: 99999,
+          minWidth: 200,
+          boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
+          borderRadius: '6px',
+          border: '1px solid var(--border-default)',
+        }}
       >
         <Popover.Body>
           <div className="field mb-2 tj-app-input" onClick={(e) => e.stopPropagation()}>
@@ -167,7 +179,7 @@ export const OptionsList = ({
               }}
             />
           </div>
-          <div className="field mb-2 tj-app-input" onClick={(e) => e.stopPropagation()}>
+          <div className="field tj-app-input" onClick={(e) => e.stopPropagation()}>
             <label data-cy={`label-action-button-text`} className="form-label">
               Option value
             </label>
@@ -185,8 +197,34 @@ export const OptionsList = ({
               }}
             />
           </div>
+          <div className="field table-select-colorpicker" style={{ marginBottom: '8px', marginTop: '8px' }}>
+            <ProgramaticallyHandleProperties
+              label="Label color"
+              index={index}
+              darkMode={darkMode}
+              callbackFunction={handleOptionColorChange}
+              property="labelColor"
+              props={option}
+              component={component}
+              paramMeta={{ type: 'colorSwatches', displayName: 'Label color' }}
+              paramType="properties"
+            />
+          </div>
+          <div className="field table-select-colorpicker" style={{ marginBottom: '24px' }}>
+            <ProgramaticallyHandleProperties
+              label="Option color"
+              index={index}
+              darkMode={darkMode}
+              callbackFunction={handleOptionColorChange}
+              property="optionColor"
+              props={option}
+              component={component}
+              paramMeta={{ type: 'colorSwatches', displayName: 'Option color' }}
+              paramType="properties"
+            />
+          </div>
           <ProgramaticallyHandleProperties
-            label="Make this option as default"
+            label="Make this as default option"
             currentState={currentState}
             index={optionIndex}
             darkMode={darkMode}
@@ -220,6 +258,21 @@ export const OptionsList = ({
     title: 'Options',
     children: (
       <div className="d-flex custom-gap-7 flex-column">
+        <ProgramaticallyHandleProperties
+          label="Auto assign colors"
+          currentState={currentState}
+          index={index}
+          darkMode={darkMode}
+          callbackFunction={onColumnItemChange}
+          property="autoAssignColors"
+          props={column}
+          component={component}
+          paramMeta={{
+            type: 'toggle',
+            displayName: 'Auto assign colors',
+          }}
+          paramType="properties"
+        />
         <ProgramaticallyHandleProperties
           label="Dynamic option"
           currentState={currentState}
@@ -330,10 +383,17 @@ export const OptionsList = ({
             <div>
               {column?.options?.length === 0 && <NoListItem text={'There are no columns'} dataCy={`-columns`} />}
               <div>
-                <AddNewButton dataCy={`button-add-column`} onClick={() => createNewOption()}>
-                  {/* {this.props.t('widget.Table.addNewColumn', ' Add new column')} */}
+                <ButtonComponent
+                  leadingIcon="addrectangle"
+                  onClick={() => {
+                    createNewOption();
+                  }}
+                  variant="secondary"
+                  className="tw-w-full mt-2"
+                  width="100%"
+                >
                   Add new option
-                </AddNewButton>
+                </ButtonComponent>
               </div>
             </div>
           </List>
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
index bb6c1d94bb..3fb5760d24 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
@@ -19,6 +19,24 @@ import { ProgramaticallyHandleProperties } from './ProgramaticallyHandleProperti
 import { ColumnPopoverContent } from './ColumnManager/ColumnPopover';
 import { useAppDataStore } from '@/_stores/appDataStore';
 import { checkIfTableColumnDeprecated } from './ColumnManager/DeprecatedColumnTypeMsg';
+import {
+  TextTypeIcon,
+  DatepickerTypeIcon,
+  SelectTypeIcon,
+  MultiselectTypeIcon,
+  BooleanTypeIcon,
+  ImageTypeIcon,
+  LinkTypeIcon,
+  JSONTypeIcon,
+  MarkdownTypeIcon,
+  HTMLTypeIcon,
+  NumberTypeIcon,
+  StringTypeIcon,
+  BadgeTypeIcon,
+  TagsTypeIcon,
+  RadioTypeIcon,
+} from './_assets';
+import { getColumnIcon } from './utils';
 
 const NON_EDITABLE_COLUMNS = ['link', 'image'];
 class TableComponent extends React.Component {
@@ -633,6 +651,8 @@ class TableComponent extends React.Component {
                               return 'JSON';
                             case 'markdown':
                               return 'Markdown';
+                            case 'html':
+                              return 'HTML';
                             default:
                               capitalize(text ?? '');
                           }
@@ -677,6 +697,7 @@ class TableComponent extends React.Component {
                                         }
                                       }}
                                       darkMode={darkMode}
+                                      showIconOnHover={true}
                                       // menuActions={[
                                       //   {
                                       //     label: 'Delete',
@@ -692,6 +713,7 @@ class TableComponent extends React.Component {
                                       }`}
                                       columnType={item?.columnType}
                                       isDeprecated={checkIfTableColumnDeprecated(item?.columnType)}
+                                      Icon={getColumnIcon(item?.columnType)}
                                     />
                                   </div>
                                 </OverlayTrigger>
@@ -777,6 +799,7 @@ class TableComponent extends React.Component {
       'showBulkUpdateActions',
       'visibility',
       'disabledState',
+      'dynamicHeight',
     ];
 
     items.push({
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/BadgeTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/BadgeTypeIcon.jsx
new file mode 100644
index 0000000000..bb9c075a6e
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/BadgeTypeIcon.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const BadgeTypeIcon = ({ fill = '#ACB2B9', width = '14', className = '', viewBox = '0 0 14 14', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      d="M7.83948 0.906557C7.46867 0.257384 6.53265 0.257385 6.16184 0.906558L5.28086 2.44888L3.6146 1.83367C2.91326 1.57473 2.19623 2.1764 2.32945 2.91204L2.64597 4.65982L0.974096 5.25959C0.270394 5.51204 0.107857 6.43384 0.682777 6.91174L2.04869 8.04717L1.15349 9.58128C0.776693 10.227 1.2447 11.0376 1.99231 11.0342L3.76849 11.0259L4.06883 12.7766C4.19526 13.5134 5.07483 13.8336 5.6453 13.3504L7.00066 12.2024L8.35602 13.3504C8.9265 13.8336 9.80606 13.5134 9.93246 12.7766L10.2328 11.0259L12.009 11.0342C12.7566 11.0376 13.2246 10.227 12.8478 9.58128L11.9526 8.04717L13.3185 6.91174C13.8934 6.43384 13.7309 5.51205 13.0272 5.25959L11.3554 4.65982L11.6719 2.91204C11.8051 2.1764 11.0881 1.57473 10.3867 1.83367L8.72046 2.44888L7.83948 0.906557Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default BadgeTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/BooleanTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/BooleanTypeIcon.jsx
new file mode 100644
index 0000000000..cf6b09ec04
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/BooleanTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const BooleanTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.6673 8.00007C14.6673 5.63314 12.7486 3.71436 10.3816 3.71436H5.6197C3.25277 3.71436 1.33398 5.63314 1.33398 8.00007C1.33398 10.367 3.25277 12.2858 5.6197 12.2858H10.3816C12.7486 12.2858 14.6673 10.367 14.6673 8.00007ZM5.6197 9.90483C6.67167 9.90483 7.52446 9.05204 7.52446 8.00007C7.52446 6.9481 6.67167 6.09531 5.6197 6.09531C4.56773 6.09531 3.71494 6.9481 3.71494 8.00007C3.71494 9.05204 4.56773 9.90483 5.6197 9.90483Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default BooleanTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/DatepickerTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/DatepickerTypeIcon.jsx
new file mode 100644
index 0000000000..22bacbd1e8
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/DatepickerTypeIcon.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const DatepickerTypeIcon = ({
+  fill = '#ACB2B9',
+  width = '16',
+  className = '',
+  viewBox = '0 0 16 16',
+  style,
+  height,
+}) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.43655 2.35889C5.43655 1.79245 4.97735 1.33325 4.41091 1.33325C3.84447 1.33325 3.38527 1.79245 3.38527 2.35889V3.38453H2.87245C2.02277 3.38453 1.33398 4.07332 1.33398 4.923V13.1281C1.33398 13.9778 2.02277 14.6666 2.87245 14.6666H13.1289C13.9785 14.6666 14.6673 13.9778 14.6673 13.1281V4.923C14.6673 4.07332 13.9785 3.38453 13.1289 3.38453H12.616V2.35889C12.616 1.79245 12.1569 1.33325 11.5904 1.33325C11.0239 1.33325 10.5648 1.79245 10.5648 2.35889V3.38453H5.43655V2.35889ZM4.41091 8.25633C4.97735 8.25633 5.43655 7.79713 5.43655 7.23069C5.43655 6.66425 4.97735 6.20505 4.41091 6.20505C3.84447 6.20505 3.38527 6.66425 3.38527 7.23069C3.38527 7.79713 3.84447 8.25633 4.41091 8.25633ZM8.00065 8.25633C8.56709 8.25633 9.02629 7.79713 9.02629 7.23069C9.02629 6.66425 8.56709 6.20505 8.00065 6.20505C7.43421 6.20505 6.97501 6.66425 6.97501 7.23069C6.97501 7.79713 7.43421 8.25633 8.00065 8.25633ZM5.43655 11.3333C5.43655 11.8997 4.97735 12.3589 4.41091 12.3589C3.84447 12.3589 3.38527 11.8997 3.38527 11.3333C3.38527 10.7668 3.84447 10.3076 4.41091 10.3076C4.97735 10.3076 5.43655 10.7668 5.43655 11.3333ZM8.00065 12.3589C8.56709 12.3589 9.02629 11.8997 9.02629 11.3333C9.02629 10.7668 8.56709 10.3076 8.00065 10.3076C7.43421 10.3076 6.97501 10.7668 6.97501 11.3333C6.97501 11.8997 7.43421 12.3589 8.00065 12.3589ZM12.616 7.23069C12.616 7.79713 12.1569 8.25633 11.5904 8.25633C11.0239 8.25633 10.5648 7.79713 10.5648 7.23069C10.5648 6.66425 11.0239 6.20505 11.5904 6.20505C12.1569 6.20505 12.616 6.66425 12.616 7.23069Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default DatepickerTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/HTMLTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/HTMLTypeIcon.jsx
new file mode 100644
index 0000000000..eb134bf034
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/HTMLTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const HTMLTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.76256 3.23814V10.381H13.2387V3.23814H2.76256ZM1.33398 3.00005C1.33398 2.34256 1.86698 1.80957 2.52446 1.80957H13.4768C14.1344 1.80957 14.6673 2.34256 14.6673 3.00005V10.6191C14.6673 11.2766 14.1344 11.8096 13.4768 11.8096H9.61417L9.95502 12.762H10.8578C11.2523 12.762 11.5721 13.0818 11.5721 13.4762C11.5721 13.8707 11.2523 14.1905 10.8578 14.1905H5.14351C4.74902 14.1905 4.42922 13.8707 4.42922 13.4762C4.42922 13.0818 4.74902 12.762 5.14351 12.762H6.04619L6.38705 11.8096H2.52446C1.86698 11.8096 1.33398 11.2766 1.33398 10.6191V3.00005ZM8.94081 3.98908C9.31506 4.11384 9.51732 4.51835 9.39257 4.8926L7.96399 9.17831C7.83925 9.55255 7.43474 9.75481 7.06049 9.63007C6.68624 9.50531 6.48398 9.1008 6.60874 8.72655L8.03731 4.44084C8.16205 4.0666 8.56657 3.86434 8.94081 3.98908ZM11.0769 4.95131C10.7739 4.69877 10.3235 4.73971 10.071 5.04277C9.81842 5.34583 9.85937 5.79623 10.1624 6.04878L10.9417 6.69821L9.91676 7.57677C9.61723 7.83349 9.58255 8.28443 9.83928 8.58394C10.096 8.88347 10.5469 8.91815 10.8465 8.66142L12.5131 7.23285C12.6727 7.09602 12.764 6.89581 12.7626 6.68556C12.761 6.47531 12.667 6.27639 12.5055 6.14179L11.0769 4.95131ZM6.08455 6.04238C6.38407 5.78565 6.41876 5.33472 6.16202 5.0352C5.9053 4.73568 5.45437 4.701 5.15485 4.95772L3.48818 6.38629C3.32855 6.52312 3.23731 6.72333 3.23877 6.93358C3.24022 7.14383 3.33424 7.34275 3.49576 7.47735L4.92433 8.66783C5.22738 8.92037 5.67778 8.87943 5.93034 8.57637C6.18288 8.27332 6.14194 7.82291 5.83888 7.57037L5.05957 6.92094L6.08455 6.04238Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default HTMLTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/ImageTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/ImageTypeIcon.jsx
new file mode 100644
index 0000000000..3c38af7a5d
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/ImageTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const ImageTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.33398 3.99992C1.33398 2.52716 2.52789 1.33325 4.00065 1.33325H12.0007C13.4734 1.33325 14.6673 2.52716 14.6673 3.99992V8.29927L13.1696 7.31896C12.0133 6.5621 10.4997 6.64252 9.43012 7.51765L5.93798 10.3749C5.20615 10.9736 4.17053 11.0287 3.37937 10.5108L1.33398 9.172V3.99992ZM12.622 8.15566L14.6673 9.49444V11.9999C14.6673 13.4727 13.4734 14.6666 12.0007 14.6666H4.00065C2.52789 14.6666 1.33398 13.4727 1.33398 11.9999V10.3672L2.83171 11.3475C3.98803 12.1044 5.50162 12.0239 6.57122 11.1488L10.0634 8.29161C10.7952 7.69284 11.8308 7.63781 12.622 8.15566ZM5.66732 7.33325C6.58779 7.33325 7.33398 6.58706 7.33398 5.66659C7.33398 4.74611 6.58779 3.99992 5.66732 3.99992C4.74684 3.99992 4.00065 4.74611 4.00065 5.66659C4.00065 6.58706 4.74684 7.33325 5.66732 7.33325Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default ImageTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/JSONTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/JSONTypeIcon.jsx
new file mode 100644
index 0000000000..ede33bb51d
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/JSONTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const JSONTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.40476 2.28564C3.48428 2.28564 2.73809 3.03183 2.73809 3.95231V5.87C2.73809 6.20229 2.5992 6.51946 2.35501 6.74483L1.56383 7.47503C1.41731 7.61025 1.33398 7.80055 1.33398 7.99993C1.33398 8.19931 1.41731 8.38961 1.56383 8.52483L2.35501 9.25503C2.5992 9.4804 2.73809 9.79757 2.73809 10.1299V12.0475C2.73809 12.968 3.48428 13.7142 4.40476 13.7142H4.77226C5.16675 13.7142 5.48655 13.3944 5.48655 12.9999C5.48655 12.6055 5.16675 12.2856 4.77226 12.2856H4.40476C4.27325 12.2856 4.16666 12.1791 4.16666 12.0475V10.1299C4.16666 9.39882 3.86111 8.70103 3.32389 8.20522L3.10145 7.99993L3.32389 7.79463C3.86111 7.29883 4.16666 6.60104 4.16666 5.87V3.95231C4.16666 3.82082 4.27325 3.71422 4.40476 3.71422H4.77226C5.16675 3.71422 5.48655 3.39442 5.48655 2.99993C5.48655 2.60544 5.16675 2.28564 4.77226 2.28564H4.40476ZM11.5966 2.28564C12.517 2.28564 13.2632 3.03183 13.2632 3.95231V5.87C13.2632 6.20229 13.4021 6.51946 13.6463 6.74483L14.4375 7.47503C14.584 7.61025 14.6673 7.80055 14.6673 7.99993C14.6673 8.19931 14.584 8.38961 14.4375 8.52483L13.6463 9.25503C13.4021 9.4804 13.2632 9.79757 13.2632 10.1299V12.0475C13.2632 12.968 12.517 13.7142 11.5966 13.7142H11.229C10.8346 13.7142 10.5148 13.3944 10.5148 12.9999C10.5148 12.6055 10.8346 12.2856 11.229 12.2856H11.5966C11.7281 12.2856 11.8347 12.1791 11.8347 12.0475V10.1299C11.8347 9.39882 12.1402 8.70103 12.6774 8.20522L12.8999 7.99993L12.6774 7.79463C12.1402 7.29883 11.8347 6.60104 11.8347 5.87V3.95231C11.8347 3.82082 11.7281 3.71422 11.5966 3.71422H11.229C10.8346 3.71422 10.5148 3.39442 10.5148 2.99993C10.5148 2.60544 10.8346 2.28564 11.229 2.28564H11.5966ZM7.16732 7.99993C7.16732 8.46017 7.54041 8.83326 8.00065 8.83326C8.46089 8.83326 8.83398 8.46017 8.83398 7.99993C8.83398 7.53969 8.46089 7.1666 8.00065 7.1666C7.54041 7.1666 7.16732 7.53969 7.16732 7.99993ZM9.78637 7.99993C9.78637 8.46017 10.1595 8.83326 10.6197 8.83326C11.0799 8.83326 11.453 8.46017 11.453 7.99993C11.453 7.53969 11.0799 7.1666 10.6197 7.1666C10.1595 7.1666 9.78637 7.53969 9.78637 7.99993ZM4.54827 7.99993C4.54827 8.46017 4.92137 8.83326 5.3816 8.83326C5.84184 8.83326 6.21494 8.46017 6.21494 7.99993C6.21494 7.53969 5.84184 7.1666 5.3816 7.1666C4.92137 7.1666 4.54827 7.53969 4.54827 7.99993Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default JSONTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/LinkTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/LinkTypeIcon.jsx
new file mode 100644
index 0000000000..07033546d7
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/LinkTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const LinkTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.4022 2.59843C11.7152 0.911524 8.98021 0.911527 7.29331 2.59843L6.34092 3.55082C5.96899 3.92275 5.96899 4.52577 6.34092 4.8977C6.71285 5.26962 7.31587 5.26962 7.6878 4.8977L8.64019 3.94531C9.58323 3.00226 11.1122 3.00226 12.0552 3.94531C12.9983 4.88835 12.9983 6.41733 12.0552 7.36037L11.1028 8.31276C10.7309 8.68468 10.7309 9.28771 11.1028 9.65963C11.4748 10.0316 12.0778 10.0316 12.4498 9.65963L13.4022 8.70725C15.089 7.02034 15.089 4.28533 13.4022 2.59843ZM10.1027 5.89794C10.4747 6.26988 10.4747 6.87289 10.1027 7.24483L7.24556 10.102C6.87362 10.4739 6.27061 10.4739 5.89867 10.102C5.52675 9.73005 5.52675 9.12704 5.89867 8.7551L8.75584 5.89794C9.12777 5.52601 9.73079 5.52601 10.1027 5.89794ZM4.89843 6.34031C5.27036 6.71223 5.27036 7.31526 4.89843 7.68718L3.94604 8.63957C3.003 9.58261 3.003 11.1116 3.94604 12.0547C4.88909 12.9977 6.41806 12.9977 7.3611 12.0547L8.31349 11.1023C8.68542 10.7303 9.28844 10.7303 9.66037 11.1023C10.0323 11.4742 10.0323 12.0772 9.66037 12.4491L8.70798 13.4015C7.02108 15.0884 4.28606 15.0884 2.59916 13.4015C0.912257 11.7146 0.912258 8.9796 2.59916 7.29269L3.55155 6.34031C3.92348 5.96838 4.5265 5.96838 4.89843 6.34031Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default LinkTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/MarkdownTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/MarkdownTypeIcon.jsx
new file mode 100644
index 0000000000..2156121ca4
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/MarkdownTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const MarkdownTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.76256 3.23804C1.97358 3.23804 1.33398 3.87763 1.33398 4.66661V11.3333C1.33398 12.1222 1.97358 12.7618 2.76256 12.7618H13.2387C14.0277 12.7618 14.6673 12.1222 14.6673 11.3333V4.66661C14.6673 3.87763 14.0277 3.23804 13.2387 3.23804H2.76256ZM5.26256 9.9047V8.02215L5.28429 8.07046C5.42797 8.3898 5.74558 8.59518 6.09577 8.59518C6.4459 8.59518 6.76349 8.38984 6.90719 8.07055L6.9292 8.02166V9.9047C6.9292 10.2334 7.1957 10.4999 7.52444 10.4999C7.85317 10.4999 8.11968 10.2334 8.11968 9.9047V6.32654C8.11968 5.87003 7.74959 5.49994 7.29307 5.49994C6.96781 5.49994 6.67278 5.69069 6.5393 5.98729L6.0958 6.9727L5.65248 5.98737C5.519 5.69073 5.22397 5.49994 4.89867 5.49994C4.44216 5.49994 4.07208 5.87002 4.07208 6.32653V9.9047C4.07208 10.2334 4.33857 10.4999 4.66732 10.4999C4.99606 10.4999 5.26256 10.2334 5.26256 9.9047ZM10.9768 6.09524C10.9768 5.76649 10.7103 5.5 10.3816 5.5C10.0529 5.5 9.78637 5.76649 9.78637 6.09524V8.35706H9.42922C9.18847 8.35706 8.97142 8.50208 8.8793 8.7245C8.78717 8.94693 8.83809 9.20295 9.00833 9.37319L9.96071 10.3256C10.0723 10.4372 10.2237 10.4999 10.3816 10.4999C10.5395 10.4999 10.6909 10.4372 10.8025 10.3256L11.7548 9.37319C11.9251 9.20295 11.9761 8.94693 11.8839 8.7245C11.7918 8.50208 11.5747 8.35706 11.334 8.35706H10.9768V6.09524Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default MarkdownTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/MultiselectTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/MultiselectTypeIcon.jsx
new file mode 100644
index 0000000000..a487f5ccb5
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/MultiselectTypeIcon.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const MultiselectTypeIcon = ({
+  fill = '#ACB2B9',
+  width = '16',
+  className = '',
+  viewBox = '0 0 16 16',
+  style,
+  height,
+}) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.32825 2.53798C7.59912 2.25118 7.58621 1.79911 7.29941 1.52824C7.01261 1.25738 6.56053 1.2703 6.28967 1.55709L4.10308 3.87231L3.51158 3.26391C3.23659 2.98106 2.78438 2.9747 2.50153 3.24969C2.21868 3.52467 2.21231 3.97689 2.4873 4.25973L3.59841 5.40259C3.73415 5.54221 3.921 5.62035 4.11573 5.61894C4.31044 5.61753 4.49614 5.53668 4.62985 5.39512L7.32825 2.53798ZM7.32825 7.06179C7.59912 6.77499 7.58621 6.32291 7.29941 6.05205C7.01261 5.78118 6.56053 5.7941 6.28967 6.08089L4.10308 8.39611L3.51158 7.78771C3.23659 7.50486 2.78438 7.4985 2.50153 7.77349C2.21868 8.04847 2.21231 8.50069 2.4873 8.78354L3.59841 9.92639C3.73415 10.066 3.921 10.1442 4.11573 10.1427C4.31044 10.1413 4.49614 10.0605 4.62985 9.91893L7.32825 7.06179ZM7.29941 10.5758C7.58621 10.8467 7.59912 11.2988 7.32825 11.5856L4.62985 14.4428C4.49614 14.5843 4.31044 14.6651 4.11573 14.6666C3.921 14.668 3.73415 14.5898 3.59841 14.4502L2.4873 13.3073C2.21231 13.0245 2.21868 12.5723 2.50153 12.2973C2.78438 12.0223 3.23659 12.0287 3.51158 12.3115L4.10308 12.9199L6.28967 10.6047C6.56053 10.3179 7.01261 10.305 7.29941 10.5758ZM8.95181 3.23801C8.55733 3.23801 8.23753 3.55781 8.23753 3.9523C8.23753 4.34679 8.55733 4.66658 8.95181 4.66658H12.9994C13.3939 4.66658 13.7137 4.34679 13.7137 3.9523C13.7137 3.55781 13.3939 3.23801 12.9994 3.23801H8.95181ZM8.23753 7.99991C8.23753 7.60542 8.55733 7.28562 8.95181 7.28562H12.9994C13.3939 7.28562 13.7137 7.60542 13.7137 7.99991C13.7137 8.3944 13.3939 8.71419 12.9994 8.71419H8.95181C8.55733 8.71419 8.23753 8.3944 8.23753 7.99991ZM8.95181 11.3332C8.55733 11.3332 8.23753 11.653 8.23753 12.0475C8.23753 12.442 8.55733 12.7618 8.95181 12.7618H12.9994C13.3939 12.7618 13.7137 12.442 13.7137 12.0475C13.7137 11.653 13.3939 11.3332 12.9994 11.3332H8.95181Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default MultiselectTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/NumberTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/NumberTypeIcon.jsx
new file mode 100644
index 0000000000..edb5ed1e6f
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/NumberTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const NumberTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.7222 1.34475C12.1408 1.41755 12.4211 1.81586 12.3482 2.23441L11.8807 4.92312H13.8981C14.3229 4.92312 14.6673 5.26752 14.6673 5.69235C14.6673 6.11719 14.3229 6.46158 13.8981 6.46158H11.6131L11.078 9.53851H13.3853C13.8101 9.53851 14.1545 9.88291 14.1545 10.3077C14.1545 10.7326 13.8101 11.077 13.3853 11.077H10.8104L10.297 14.0293C10.2242 14.4478 9.82586 14.7281 9.40731 14.6553C8.98876 14.5825 8.70847 14.1842 8.78126 13.7657L9.24886 11.077H5.68221L5.16876 14.0293C5.09597 14.4478 4.69766 14.7281 4.2791 14.6553C3.86056 14.5825 3.58026 14.1842 3.65305 13.7657L4.12065 11.077H2.10322C1.67838 11.077 1.33398 10.7326 1.33398 10.3077C1.33398 9.88291 1.67838 9.53851 2.10322 9.53851H4.38821L4.92333 6.46158H2.61604C2.1912 6.46158 1.8468 6.11719 1.8468 5.69235C1.8468 5.26752 2.1912 4.92312 2.61604 4.92312H5.19089L5.70433 1.97081C5.77712 1.55226 6.17544 1.27196 6.594 1.34475C7.01254 1.41755 7.29284 1.81586 7.22005 2.23441L6.75245 4.92312H10.3191L10.8325 1.97081C10.9053 1.55226 11.3036 1.27196 11.7222 1.34475ZM6.48489 6.46158L5.94977 9.53851H9.51642L10.0515 6.46158H6.48489Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default NumberTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/RadioTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/RadioTypeIcon.jsx
new file mode 100644
index 0000000000..3cf24f146c
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/RadioTypeIcon.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const RadioTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      d="M5.83398 7.99992C5.83398 6.8033 6.80403 5.83325 8.00065 5.83325C9.19727 5.83325 10.1673 6.8033 10.1673 7.99992C10.1673 9.19654 9.19727 10.1666 8.00065 10.1666C6.80403 10.1666 5.83398 9.19654 5.83398 7.99992Z"
+      fill={fill}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.00065 14.6666C11.6825 14.6666 14.6673 11.6818 14.6673 7.99992C14.6673 4.31802 11.6825 1.33325 8.00065 1.33325C4.31875 1.33325 1.33398 4.31802 1.33398 7.99992C1.33398 11.6818 4.31875 14.6666 8.00065 14.6666ZM8.00065 4.83325C6.25175 4.83325 4.83398 6.25102 4.83398 7.99992C4.83398 9.74882 6.25175 11.1666 8.00065 11.1666C9.74955 11.1666 11.1673 9.74882 11.1673 7.99992C11.1673 6.25102 9.74955 4.83325 8.00065 4.83325Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default RadioTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/SelectTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/SelectTypeIcon.jsx
new file mode 100644
index 0000000000..c90b6a22fa
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/SelectTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const SelectTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.00065 4.66661C2.86916 4.66661 2.76256 4.77321 2.76256 4.9047V11.0952C2.76256 11.2267 2.86916 11.3333 3.00065 11.3333H8.47684V4.66661H3.00065ZM1.33398 4.9047C1.33398 3.98423 2.08018 3.23804 3.00065 3.23804H13.0007C13.9211 3.23804 14.6673 3.98423 14.6673 4.9047V11.0952C14.6673 12.0157 13.9211 12.7618 13.0007 12.7618H3.00065C2.08018 12.7618 1.33398 12.0157 1.33398 11.0952V4.9047ZM10.3816 7.04756C10.189 7.04756 10.0154 7.16358 9.94166 7.34152C9.86796 7.51947 9.9087 7.72428 10.0449 7.86047L10.9972 8.81285C11.1832 8.99882 11.4847 8.99882 11.6707 8.81285L12.6231 7.86047C12.7593 7.72428 12.8 7.51947 12.7263 7.34152C12.6526 7.16358 12.4789 7.04756 12.2864 7.04756H10.3816Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default SelectTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/StringTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/StringTypeIcon.jsx
new file mode 100644
index 0000000000..e5ded3d294
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/StringTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const StringTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.4475 9.94423L11.9364 14.1134C12.0912 14.5467 12.5681 14.7726 13.0015 14.6178C13.4349 14.463 13.6607 13.9862 13.506 13.5527L9.52622 2.40948C9.29572 1.76408 8.68439 1.33325 7.99905 1.33325C7.31372 1.33325 6.70239 1.76408 6.47189 2.40948L2.49213 13.5527C2.33734 13.9862 2.56321 14.463 2.99663 14.6178C3.43005 14.7726 3.90689 14.5467 4.06168 14.1134L5.55065 9.94423H10.4475ZM9.85224 8.27759L7.99905 3.08868L6.14587 8.27759H9.85224Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default StringTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/TagsTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/TagsTypeIcon.jsx
new file mode 100644
index 0000000000..79b39609e4
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/TagsTypeIcon.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const TagsTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.33398 11.0618V13.1027C1.33398 13.9482 2.01937 14.6336 2.86483 14.6336H10.0769C10.5001 14.6336 10.9043 14.4584 11.1938 14.1497L14.3913 10.739C14.7593 10.3465 14.7593 9.7356 14.3913 9.34303L13.8315 8.746L11.9383 10.7655C11.456 11.28 10.7822 11.5719 10.0769 11.5719H2.86483C2.29046 11.5719 1.76041 11.382 1.33398 11.0618Z"
+      fill={fill}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.86483 1.36621C2.01937 1.36621 1.33398 2.05159 1.33398 2.89706V9.02045C1.33398 9.86592 2.01937 10.5513 2.86483 10.5513H10.0769C10.5001 10.5513 10.9043 10.3762 11.1938 10.0675L14.3913 6.65676C14.7593 6.26419 14.7593 5.65332 14.3913 5.26075L11.1938 1.85005C10.9043 1.54135 10.5001 1.36621 10.0769 1.36621H2.86483Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default TagsTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/TextTypeIcon.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/TextTypeIcon.jsx
new file mode 100644
index 0000000000..95b61a03a2
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/TextTypeIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const TextTypeIcon = ({ fill = '#ACB2B9', width = '16', className = '', viewBox = '0 0 16 16', style, height }) => (
+  <svg
+    className={className}
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.66752 1.33325C5.30488 1.33325 5.87072 1.74109 6.07227 2.34573L7.2725 5.94642C7.2761 5.9565 7.27949 5.96667 7.28267 5.97693L7.96139 8.01308C8.09573 8.41611 7.87791 8.85175 7.47488 8.98608C7.07185 9.12043 6.63622 8.90262 6.50187 8.49958L5.99344 6.97428H3.34162L2.83318 8.49958C2.69884 8.90262 2.26321 9.12043 1.86017 8.98608C1.45714 8.85175 1.23932 8.41611 1.37367 8.01308L2.0513 5.98018C2.0551 5.96772 2.05921 5.95541 2.06362 5.94323L3.26278 2.34573C3.46433 1.74109 4.03018 1.33325 4.66752 1.33325ZM4.66752 2.99654L5.48062 5.43582H3.85444L4.66752 2.99654ZM9.79552 1.33325C9.37069 1.33325 9.02629 1.67765 9.02629 2.10248C9.02629 2.52731 9.37069 2.87171 9.79552 2.87171H13.8981C14.3229 2.87171 14.6673 2.52731 14.6673 2.10248C14.6673 1.67765 14.3229 1.33325 13.8981 1.33325H9.79552ZM9.79552 4.28197C9.37069 4.28197 9.02629 4.62637 9.02629 5.0512C9.02629 5.47603 9.37069 5.82043 9.79552 5.82043H13.8981C14.3229 5.82043 14.6673 5.47603 14.6673 5.0512C14.6673 4.62637 14.3229 4.28197 13.8981 4.28197H9.79552ZM9.02629 7.99992C9.02629 7.57509 9.37069 7.23069 9.79552 7.23069H13.8981C14.3229 7.23069 14.6673 7.57509 14.6673 7.99992C14.6673 8.42475 14.3229 8.76915 13.8981 8.76915H9.79552C9.37069 8.76915 9.02629 8.42475 9.02629 7.99992ZM2.10322 13.1281C1.67838 13.1281 1.33398 13.4725 1.33398 13.8974C1.33398 14.3222 1.67838 14.6666 2.10322 14.6666H13.8981C14.3229 14.6666 14.6673 14.3222 14.6673 13.8974C14.6673 13.4725 14.3229 13.1281 13.8981 13.1281H2.10322ZM1.33398 10.9486C1.33398 10.5238 1.67838 10.1794 2.10322 10.1794H13.8981C14.3229 10.1794 14.6673 10.5238 14.6673 10.9486C14.6673 11.3735 14.3229 11.7179 13.8981 11.7179H2.10322C1.67838 11.7179 1.33398 11.3735 1.33398 10.9486Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default TextTypeIcon;
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/index.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/index.js
new file mode 100644
index 0000000000..03ae127c26
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/_assets/index.js
@@ -0,0 +1,15 @@
+export { default as TextTypeIcon } from './TextTypeIcon';
+export { default as NumberTypeIcon } from './NumberTypeIcon';
+export { default as StringTypeIcon } from './StringTypeIcon';
+export { default as DatepickerTypeIcon } from './DatepickerTypeIcon';
+export { default as SelectTypeIcon } from './SelectTypeIcon';
+export { default as MultiselectTypeIcon } from './MultiselectTypeIcon';
+export { default as BooleanTypeIcon } from './BooleanTypeIcon';
+export { default as ImageTypeIcon } from './ImageTypeIcon';
+export { default as LinkTypeIcon } from './LinkTypeIcon';
+export { default as JSONTypeIcon } from './JSONTypeIcon';
+export { default as MarkdownTypeIcon } from './MarkdownTypeIcon';
+export { default as HTMLTypeIcon } from './HTMLTypeIcon';
+export { default as BadgeTypeIcon } from './BadgeTypeIcon';
+export { default as TagsTypeIcon } from './TagsTypeIcon';
+export { default as RadioTypeIcon } from './RadioTypeIcon';
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/utils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/utils.js
new file mode 100644
index 0000000000..9af3ed7f05
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/utils.js
@@ -0,0 +1,60 @@
+import {
+  TextTypeIcon,
+  DatepickerTypeIcon,
+  SelectTypeIcon,
+  MultiselectTypeIcon,
+  BooleanTypeIcon,
+  ImageTypeIcon,
+  LinkTypeIcon,
+  JSONTypeIcon,
+  MarkdownTypeIcon,
+  HTMLTypeIcon,
+  NumberTypeIcon,
+  StringTypeIcon,
+  BadgeTypeIcon,
+  TagsTypeIcon,
+  RadioTypeIcon,
+} from './_assets';
+
+export const getColumnIcon = (columnType) => {
+  switch (columnType) {
+    case 'default':
+    case 'string':
+      return StringTypeIcon;
+    case 'number':
+      return NumberTypeIcon;
+    case 'text':
+      return TextTypeIcon;
+    case 'datepicker':
+      return DatepickerTypeIcon;
+    case 'dropdown':
+    case 'select':
+      return SelectTypeIcon;
+    case 'multiselect':
+    case 'newMultiSelect':
+      return MultiselectTypeIcon;
+    case 'boolean':
+    case 'toggle':
+      return BooleanTypeIcon;
+    case 'image':
+      return ImageTypeIcon;
+    case 'link':
+      return LinkTypeIcon;
+    case 'json':
+      return JSONTypeIcon;
+    case 'markdown':
+      return MarkdownTypeIcon;
+    case 'html':
+      return HTMLTypeIcon;
+    case 'radio':
+      return RadioTypeIcon;
+    case 'badges':
+      return BadgeTypeIcon;
+    case 'badge':
+      return BadgeTypeIcon;
+    case 'tags':
+      return TagsTypeIcon;
+    default:
+      return null;
+  }
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
index f2b0ff7594..2474fd96c6 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
@@ -20,6 +20,7 @@ export const Code = ({
   placeholder,
   validationFn,
   isHidden = false,
+  setCodeEditorView,
   customMeta,
 }) => {
   const currentState = useCurrentState();
@@ -55,7 +56,7 @@ export const Code = ({
 
   if (isHidden) return null;
   return (
-    <div className={`field ${options.className}`} style={{ marginBottom: '8px' }}>
+    <div className={`field tw-mb-2 last:tw-mb-0 ${options.className ?? ''}`}>
       <CodeEditor
         type="fxEditor"
         initialValue={initialValue}
@@ -75,6 +76,7 @@ export const Code = ({
         placeholder={placeholder}
         validationFn={validationFn}
         cyLabel=""
+        setCodeEditorView={setCodeEditorView}
       />
     </div>
   );
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
index f9780915b8..2e29bd5f54 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
@@ -30,6 +30,7 @@ import { appService } from '@/_services';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
 import useStore from '@/AppBuilder/_stores/store';
 import { useEventActions, useEvents } from '@/AppBuilder/_stores/slices/eventsSlice';
+import { get } from 'lodash';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
 import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
@@ -437,8 +438,8 @@ export const EventManager = ({
     const newParams =
       params.length > 0
         ? params.map((paramOfParamList) => {
-            return paramOfParamList.handle === param.handle ? newParam : paramOfParamList;
-          })
+          return paramOfParamList.handle === param.handle ? newParam : paramOfParamList;
+        })
         : [newParam];
 
     return handlerChanged(index, 'componentSpecificActionParams', newParams);
@@ -987,51 +988,60 @@ export const EventManager = ({
                 </div>
                 {event?.componentId &&
                   event?.componentSpecificActionHandle &&
-                  (getAction(event?.componentId, event?.componentSpecificActionHandle)?.params ?? []).map((param) => (
-                    <div className="row mt-2" key={param.handle}>
-                      <div className="col-3 p-1" data-cy={`action-options-${param?.displayName}-field-label`}>
-                        {param?.displayName}
+                  (getAction(event?.componentId, event?.componentSpecificActionHandle)?.params ?? []).map((param) => {
+                    let optionsList = param.isDynamicOpiton
+                      ? get({ ...components[event?.componentId] }, param.optionsGetter, []).map((tab) => ({
+                        name: tab.title,
+                        value: tab.id,
+                      }))
+                      : param.options;
+
+                    return (
+                      <div className="row mt-2" key={param.handle}>
+                        <div className="col-3 p-1" data-cy={`action-options-${param?.displayName}-field-label`}>
+                          {param?.displayName}
+                        </div>
+
+                        {param.type === 'select' ? (
+                          <div className="col-9" data-cy="action-options-action-selection-field">
+                            <Select
+                              className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
+                              options={optionsList}
+                              value={valueForComponentSpecificActionHandle(event, param)}
+                              search={true}
+                              onChange={(value) => {
+                                onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
+                              }}
+                              placeholder={t('globals.select', 'Select') + '...'}
+                              styles={styles}
+                              useMenuPortal={false}
+                              useCustomStyles={true}
+                            />
+                          </div>
+                        ) : (
+                          <div
+                            className={`${param?.type ? '' : 'fx-container-eventmanager-code'
+                              } col-9 fx-container-eventmanager ${param.type == 'select' && 'component-action-select'}`}
+                            data-cy="action-options-text-input-field"
+                          >
+                            <CodeHinter
+                              type="fxEditor"
+                              initialValue={valueForComponentSpecificActionHandle(event, param)}
+                              onChange={(value) => {
+                                onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
+                              }}
+                              paramLabel={' '}
+                              paramType={param?.type}
+                              fieldMeta={{ options: param?.options }}
+                              cyLabel={`event-${param.displayName}`}
+                              component={component}
+                              isEventManagerParam={true}
+                            />
+                          </div>
+                        )}
                       </div>
-                      {param.type === 'select' ? (
-                        <div className="col-9" data-cy="action-options-action-selection-field">
-                          <Select
-                            className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
-                            options={param.options}
-                            value={valueForComponentSpecificActionHandle(event, param)}
-                            search={true}
-                            onChange={(value) => {
-                              onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
-                            }}
-                            placeholder={t('globals.select', 'Select') + '...'}
-                            styles={styles}
-                            useMenuPortal={false}
-                            useCustomStyles={true}
-                          />
-                        </div>
-                      ) : (
-                        <div
-                          className={`${
-                            param?.type ? '' : 'fx-container-eventmanager-code'
-                          } col-9 fx-container-eventmanager ${param.type == 'select' && 'component-action-select'}`}
-                          data-cy="action-options-text-input-field"
-                        >
-                          <CodeHinter
-                            type="fxEditor"
-                            initialValue={valueForComponentSpecificActionHandle(event, param)}
-                            onChange={(value) => {
-                              onChangeHandlerForComponentSpecificActionHandle(value, index, param, event);
-                            }}
-                            paramLabel={' '}
-                            paramType={param?.type}
-                            fieldMeta={{ options: param?.options }}
-                            cyLabel={`event-${param.displayName}`}
-                            component={component}
-                            isEventManagerParam={true}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  ))}
+                    );
+                  })}
               </>
             )}
             {event.actionId === 'toggle-app-mode' && (
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
index 40fd6c3f2f..278ec7b094 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Table } from './Components/Table/Table.jsx';
+import { TabsLayout } from './Components/TabComponent';
 import { Chart } from './Components/Chart';
-import { Form } from './Components/Form';
+import Form from './Components/Form/index.js';
 import { renderElement, renderCustomStyles } from './Utils';
 import { toast } from 'react-hot-toast';
 import { validateQueryName, convertToKebabCase, resolveReferences } from '@/_helpers/utils';
@@ -43,6 +44,9 @@ import useStore from '@/AppBuilder/_stores/store';
 import { componentTypes } from '@/AppBuilder/WidgetManager/componentTypes';
 import { copyComponents } from '@/AppBuilder/AppCanvas/appCanvasUtils.js';
 import DatetimePickerV2 from './Components/DatetimePickerV2.jsx';
+import { ToolTip } from '@/_components/ToolTip';
+import AppPermissionsModal from '@/modules/Appbuilder/components/AppPermissionsModal';
+import { appPermissionService } from '@/_services';
 import { ModuleContainerInspector, ModuleViewerInspector, ModuleEditorBanner } from '@/modules/Modules/components';
 
 const INSPECTOR_HEADER_OPTIONS = [
@@ -61,6 +65,19 @@ const INSPECTOR_HEADER_OPTIONS = [
     value: 'duplicate',
     icon: <Copy width={16} />,
   },
+  {
+    label: 'Component permission',
+    value: 'permission',
+    icon: (
+      <img
+        alt="permission-icon"
+        src="assets/images/icons/editor/left-sidebar/authorization.svg"
+        width="16"
+        height="16"
+      />
+    ),
+    trailingIcon: <SolidIcon width={16} name="enterprisecrown" className="mx-1" />,
+  },
   {
     label: 'Delete',
     value: 'delete',
@@ -81,6 +98,9 @@ const NEW_REVAMPED_COMPONENTS = [
   'ToggleSwitchV2',
   'Checkbox',
   'DatetimePickerV2',
+  'DatePickerV2',
+  'TimePicker',
+  'DaterangePicker',
   'DropdownV2',
   'MultiselectV2',
   'RadioButtonV2',
@@ -91,8 +111,11 @@ const NEW_REVAMPED_COMPONENTS = [
   'Divider',
   'VerticalDivider',
   'ModalV2',
+  'Tabs',
+  'RangeSlider',
   'Link',
   'Steps',
+  'FilePicker',
 ];
 
 export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selectedComponentId }) => {
@@ -104,6 +127,11 @@ export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selecte
   const isVersionReleased = useStore((state) => state.isVersionReleased);
   const setWidgetDeleteConfirmation = useStore((state) => state.setWidgetDeleteConfirmation);
   const setComponentToInspect = useStore((state) => state.setComponentToInspect);
+  const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
+  const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
+  const showComponentPermissionModal = useStore((state) => state.showComponentPermissionModal);
+  const toggleComponentPermissionModal = useStore((state) => state.toggleComponentPermissionModal);
+  const setComponentPermission = useStore((state) => state.setComponentPermission);
   const dataQueries = useDataQueries();
 
   const currentState = useCurrentState();
@@ -378,9 +406,14 @@ export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selecte
     if (value === 'delete') {
       setWidgetDeleteConfirmation(true);
     }
+    if (value === 'permission') {
+      if (!licenseValid) return;
+      toggleComponentPermissionModal(true);
+    }
     if (value === 'duplicate') {
       copyComponents({ isCloning: true });
     }
+    setShowHeaderActionsMenu(false);
   };
   const buildGeneralStyle = () => {
     if (!componentMeta?.definition?.generalStyles) {
@@ -446,7 +479,7 @@ export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selecte
 
   React.useEffect(() => {
     const handleClickOutside = (event) => {
-      if (showHeaderActionsMenu && event.target.closest('.list-menu') === null) {
+      if (showHeaderActionsMenu && event.target.closest('#list-menu') === null) {
         setShowHeaderActionsMenu(false);
       }
     };
@@ -458,6 +491,8 @@ export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selecte
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify({ showHeaderActionsMenu })]);
 
+  const toggleRightSidebarPin = useStore((state) => state.toggleRightSidebarPin);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
   const renderAppNameInput = () => {
     if (isModuleContainer) {
       return <ModuleEditorBanner title="Module Container" customStyles={{ height: 28, width: 150, marginTop: 3 }} />;
@@ -504,44 +539,79 @@ export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selecte
           </div>
           <div className={`col-9 p-0 ${shouldFreeze && 'disabled'}`}>{renderAppNameInput()}</div>
           {!isModuleContainer && (
-            <div className="col-2" data-cy={'component-inspector-options'}>
-              <OverlayTrigger
-                trigger={'click'}
-                placement={'bottom-end'}
-                rootClose={false}
-                show={showHeaderActionsMenu}
-                overlay={
-                  <Popover id="list-menu" className={darkMode && 'dark-theme'}>
-                    <Popover.Body bsPrefix="list-item-popover-body">
-                      {INSPECTOR_HEADER_OPTIONS.map((option) => (
-                        <div
-                          data-cy={`component-inspector-${String(option?.value).toLowerCase()}-button`}
-                          className="list-item-popover-option"
-                          key={option?.value}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleInspectorHeaderActions(option.value);
-                          }}
-                        >
-                          <div className="list-item-popover-menu-option-icon">{option.icon}</div>
-                          <div
-                            className={classNames('list-item-option-menu-label', {
-                              'color-tomato9': option.value === 'delete',
-                            })}
-                          >
-                            {option?.label}
-                          </div>
-                        </div>
-                      ))}
-                    </Popover.Body>
-                  </Popover>
-                }
-              >
-                <span className="cursor-pointer" onClick={() => setShowHeaderActionsMenu(true)}>
-                  <SolidIcon data-cy={'menu-icon'} name="morevertical" width="24" fill={'var(--slate12)'} />
-                </span>
-              </OverlayTrigger>
-            </div>
+            <>
+              <div className="col-2" data-cy={'component-inspector-options'}>
+                <OverlayTrigger
+                  trigger={'click'}
+                  placement={'bottom-end'}
+                  rootClose={false}
+                  show={showHeaderActionsMenu}
+                  overlay={
+                    <Popover id="list-menu" className={darkMode && 'dark-theme'}>
+                      <Popover.Body bsPrefix="list-item-popover-body">
+                        {INSPECTOR_HEADER_OPTIONS.map((option) => {
+                          const optionBody = (
+                            <div
+                              data-cy={`component-inspector-${String(option?.value).toLowerCase()}-button`}
+                              className="list-item-popover-option"
+                              key={option?.value}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleInspectorHeaderActions(option.value);
+                              }}
+                            >
+                              <div className="list-item-popover-menu-option-icon">{option.icon}</div>
+                              <div
+                                className={classNames('list-item-option-menu-label', {
+                                  'color-tomato9': option.value === 'delete',
+                                  'color-disabled': option.value === 'permission' && !licenseValid,
+                                })}
+                              >
+                                {option?.label}
+                              </div>
+                              {option.value === 'permission' &&
+                                !licenseValid &&
+                                option.trailingIcon &&
+                                option.trailingIcon}
+                            </div>
+                          );
+
+                          return option.value === 'permission' ? (
+                            <ToolTip
+                              key={option.value}
+                              message={'Component permissions are available only in paid plans'}
+                              placement="left"
+                              show={!licenseValid}
+                            >
+                              {optionBody}
+                            </ToolTip>
+                          ) : (
+                            optionBody
+                          );
+                        })}
+                      </Popover.Body>
+                    </Popover>
+                  }
+                >
+                  <span className="cursor-pointer" onClick={() => setShowHeaderActionsMenu(true)}>
+                    <SolidIcon data-cy={'menu-icon'} name="morevertical" width="24" fill={'var(--slate12)'} />
+                  </span>
+                </OverlayTrigger>
+              </div>
+              <AppPermissionsModal
+                modalType="component"
+                resourceId={selectedComponentId}
+                resourceName={allComponents[selectedComponentId]?.component?.name}
+                showModal={showComponentPermissionModal}
+                toggleModal={toggleComponentPermissionModal}
+                darkMode={darkMode}
+                fetchPermission={(id, appId) => appPermissionService.getComponentPermission(appId, id)}
+                createPermission={(id, appId, body) => appPermissionService.createComponentPermission(appId, id, body)}
+                updatePermission={(id, appId, body) => appPermissionService.updateComponentPermission(appId, id, body)}
+                deletePermission={(id, appId) => appPermissionService.deleteComponentPermission(appId, id)}
+                onSuccess={(data) => setComponentPermission(selectedComponentId, data)}
+              />
+            </>
           )}
         </div>
 
@@ -557,8 +627,8 @@ export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selecte
                   componentMeta.displayName === 'Toggle Switch (Legacy)'
                     ? 'Toggle (Legacy)'
                     : componentMeta.displayName === 'Toggle Switch'
-                      ? 'Toggle Switch'
-                      : componentMeta.component,
+                    ? 'Toggle Switch'
+                    : componentMeta.component,
               })}
             </small>
           </span>
@@ -577,13 +647,13 @@ const getDocsLink = (componentMeta) => {
     case 'ToggleSwitchV2':
       return 'https://docs.tooljet.io/docs/widgets/toggle-switch';
     case 'DropdownV2':
-      return 'https://docs.tooljet.com/docs/widgets/dropdown';
+      return 'https://docs.tooljet.ai/docs/widgets/dropdown';
     case 'DropDown':
-      return 'https://docs.tooljet.com/docs/widgets/dropdown';
+      return 'https://docs.tooljet.ai/docs/widgets/dropdown';
     case 'MultiselectV2':
-      return 'https://docs.tooljet.com/docs/widgets/multiselect';
+      return 'https://docs.tooljet.ai/docs/widgets/multiselect';
     case 'DaterangePicker':
-      return 'https://docs.tooljet.com/docs/widgets/date-range-picker';
+      return 'https://docs.tooljet.ai/docs/widgets/date-range-picker';
     default:
       return `https://docs.tooljet.io/docs/widgets/${convertToKebabCase(component)}`;
   }
@@ -727,6 +797,9 @@ const GetAccordion = React.memo(
       case 'Table':
         return <Table {...restProps} />;
 
+      case 'Tabs':
+        return <TabsLayout {...restProps} />;
+
       case 'Chart':
         return <Chart {...restProps} />;
 
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js
index a9b981eb1a..0e4128729c 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js
@@ -55,7 +55,9 @@ export function renderCustomStyles(
     componentConfig.component == 'RadioButtonV2' ||
     componentConfig.component == 'Button' ||
     componentConfig.component == 'Image' ||
-    componentConfig.component == 'ModalV2'
+    componentConfig.component == 'ModalV2' ||
+    componentConfig.component == 'RangeSlider' ||
+    componentConfig.component == 'FilePicker'
   ) {
     const paramTypeConfig = componentMeta[paramType] || {};
     const paramConfig = paramTypeConfig[param] || {};
@@ -131,7 +133,8 @@ export function renderElement(
   darkMode = false,
   placeholder = '',
   validationFn,
-  customMeta
+  setCodeEditorView = null,
+  customMeta = null
 ) {
   const componentConfig = component.component;
   const componentDefinition = componentConfig.definition;
@@ -144,7 +147,8 @@ export function renderElement(
     componentConfig.component == 'DropDown' ||
     componentConfig.component == 'Form' ||
     componentConfig.component == 'Listview' ||
-    componentConfig.component == 'Image'
+    componentConfig.component == 'Image' ||
+    componentConfig.component == 'RangeSlider'
   ) {
     const paramTypeConfig = componentMeta[paramType] || {};
     const paramConfig = paramTypeConfig[param] || {};
@@ -179,6 +183,7 @@ export function renderElement(
       placeholder={placeholder}
       validationFn={validationFn}
       isHidden={isHidden}
+      setCodeEditorView={setCodeEditorView}
       customMeta={customMeta}
     />
   );
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddNewPageMenu.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddNewPageMenu.jsx
new file mode 100644
index 0000000000..261ab9d0d1
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddNewPageMenu.jsx
@@ -0,0 +1,107 @@
+import React, { useRef, useState } from 'react';
+import { Overlay, Popover } from 'react-bootstrap';
+import { Button } from '@/components/ui/Button/Button';
+import useStore from '@/AppBuilder/_stores/store';
+import { AddEditPagePopup } from './AddNewPagePopup';
+import PageOptions from './PageOptions';
+import { ToolTip as LicenseTooltip } from '@/_components/ToolTip';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+
+export function AddNewPageMenu({ darkMode, isLicensed }) {
+  const newPageBtnRef = useRef(null);
+  const [showMenuPopover, setShowMenuPopover] = useState(false);
+  const setNewPagePopupConfig = useStore((state) => state.setNewPagePopupConfig);
+  const setEditingPage = useStore((state) => state.setEditingPage);
+  const newPagePopupConfig = useStore((state) => state.newPagePopupConfig);
+
+  const handleOpenPopup = (type) => {
+    setShowMenuPopover(false);
+    setNewPagePopupConfig({ type, show: true, mode: 'add' });
+  };
+
+  return (
+    <div className="page-type-buttons-container">
+      <Button
+        ref={newPageBtnRef}
+        key="new-page-btn"
+        fill="var(--icon-default)"
+        leadingIcon="plus"
+        variant="outline"
+        className="add-new-page icon-btn"
+        id="add-new-page"
+        onClick={() => {
+          setNewPagePopupConfig({ show: true, mode: 'add', type: 'default' });
+        }}
+      >
+        New page
+      </Button>
+
+      <Button
+        iconOnly
+        leadingIcon="morevertical01"
+        className="more-page-opts"
+        onClick={() => {
+          setShowMenuPopover((prev) => !prev);
+          setNewPagePopupConfig({ show: false, mode: null, type: null });
+        }}
+        variant="outline"
+      />
+
+      <Overlay
+        target={newPageBtnRef.current}
+        show={showMenuPopover}
+        placement="bottom"
+        rootClose
+        onHide={() => setShowMenuPopover(false)}
+      >
+        <Popover id="add-new-page-popover">
+          <div className="menu-options mb-0">
+            <PageOptions
+              type="url"
+              text="Add nav item with URL"
+              icon="addnavitemurl"
+              darkMode={darkMode}
+              onClick={() => handleOpenPopup('url')}
+            />
+            <PageOptions
+              type="app"
+              text="Add nav item ToolJet app"
+              icon="apps"
+              darkMode={darkMode}
+              onClick={() => handleOpenPopup('app')}
+            />
+            <div className={`d-flex ${!isLicensed && 'disabled licensed-page-option'}`}>
+              <PageOptions
+                type="group"
+                text="Add nav group"
+                icon="folder"
+                darkMode={darkMode}
+                onClick={() => handleOpenPopup('group')}
+              />
+              <LicenseTooltip
+                message={"App header can't be hidden on free plans"}
+                placement="bottom"
+                show={!isLicensed}
+              >
+                <div className="d-flex align-items-center">{!isLicensed && <SolidIcon name="enterprisecrown" />}</div>
+              </LicenseTooltip>
+            </div>
+          </div>
+        </Popover>
+      </Overlay>
+
+      <Overlay
+        target={newPageBtnRef.current}
+        show={newPagePopupConfig.show && newPagePopupConfig?.mode == 'add'}
+        placement="left-start"
+        rootClose
+        onHide={() => {
+          setNewPagePopupConfig({ show: false, mode: null, type: null });
+          setEditingPage(null);
+        }}
+      >
+        <AddEditPagePopup darkMode={darkMode} />
+      </Overlay>
+    </div>
+  );
+}
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddNewPagePopup.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddNewPagePopup.jsx
new file mode 100644
index 0000000000..277ba12bbf
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddNewPagePopup.jsx
@@ -0,0 +1,654 @@
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import cx from 'classnames';
+import { Popover } from 'react-bootstrap';
+import useStore from '@/AppBuilder/_stores/store';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { Button } from '@/_ui/LeftSidebar';
+import { Icon } from '@/AppBuilder/CodeBuilder/Elements/Icon';
+import { EventManager } from '../../Inspector/EventManager';
+import { kebabCase } from 'lodash';
+import Select from '@/_ui/Select';
+import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
+import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
+import { appService } from '@/_services';
+import { ToolTip } from '@/_components';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import CodeHinter from '@/AppBuilder/CodeEditor';
+import FxButton from '@/Editor/CodeBuilder/Elements/FxButton';
+import { resolveReferences, validateKebabCase } from '@/_helpers/utils';
+import { ToolTip as InspectorTooltip } from '../../Inspector/Elements/Components/ToolTip';
+
+const POPOVER_TITLES = {
+  add: {
+    default: 'New page',
+    app: 'New nav item with app',
+    url: 'New nav item with URL',
+    group: 'New nav group',
+  },
+  edit: {
+    default: 'Edit page',
+    app: 'Edit nav item',
+    url: 'Edit nav item',
+    group: 'Edit nav group',
+  },
+};
+
+const OPEN_APP_MODES = [
+  { label: 'New tab', value: 'new_tab' },
+  { label: 'Same tab', value: 'same_tab' },
+];
+
+const POPOVER_ACTIONS = {
+  default: 'page',
+  url: 'page',
+  app: 'page',
+  group: 'group',
+};
+
+export const AddEditPagePopup = forwardRef(({ darkMode, ...props }, ref) => {
+  const { moduleId } = useModuleContext();
+  const { show, mode, type } = useStore((state) => state.newPagePopupConfig);
+  const editingPage = useStore((state) => state.editingPage);
+  const pages = useStore((state) => state?.modules?.canvas?.pages ?? []);
+  const addNewPage = useStore((state) => state.addNewPage);
+  const updatePageName = useStore((state) => state.updatePageName);
+  const updatePageHandle = useStore((state) => state.updatePageHandle);
+  const updatePageTarget = useStore((state) => state.updatePageTarget);
+  const updatePageURL = useStore((state) => state.updatePageURL);
+  const updatePageIcon = useStore((state) => state.updatePageIcon);
+  const markAsHomePage = useStore((state) => state.markAsHomePage);
+  const clonePage = useStore((state) => state.clonePage);
+  const cloneGroup = useStore((state) => state.cloneGroup);
+  const toggleDeleteConfirmationModal = useStore((state) => state.toggleDeleteConfirmationModal);
+  const switchPage = useStore((state) => state.switchPage);
+
+  const isPageGroup = useStore((state) => state.isPageGroup);
+  const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
+  const updatePageVisibility = useStore((state) => state.updatePageVisibility);
+  const disableOrEnablePage = useStore((state) => state.disableOrEnablePage);
+  const updatePageAppId = useStore((state) => state.updatePageAppId);
+  const currentPageId = useStore((state) => state.currentPageId);
+  const setCurrentPageHandle = useStore((state) => state.setCurrentPageHandle);
+  const openPageEditPopover = useStore((state) => state.openPageEditPopover);
+  const appId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
+
+  const [page, setPage] = useState(editingPage || props?.page);
+  const [pageName, setPageName] = useState('');
+  const [handle, setHandle] = useState('');
+  const [pageURL, setPageURL] = useState('');
+  const [hasAutoSaved, setHasAutoSaved] = useState(false);
+  const [error, setError] = useState(null);
+
+  const allpages = pages.filter((p) => p.id !== page?.id);
+  const isHomePage = page?.id === homePageId;
+
+  //Nav item with app
+  const [appOptions, setAppOptions] = useState([]);
+  const [appOptionsLoading, setAppOptionsLoading] = useState(true);
+
+  useEffect(() => {
+    setError(null);
+  }, [show]);
+
+  useEffect(() => {
+    if (mode === 'add' && type === 'default' && !hasAutoSaved) {
+      const existingNames = pages.map((p) => p.name.toLowerCase());
+      let index = 1;
+      let newName = `Page ${index}`;
+      while (existingNames.includes(newName.toLowerCase())) {
+        index++;
+        newName = `Page ${index}`;
+      }
+      const pageObj = { type: 'default' };
+      addNewPage(newName, kebabCase(newName.toLowerCase()), isPageGroup, pageObj).then((data) => {
+        setPage(data);
+        setPageName(newName);
+        setHandle(data?.handle);
+      });
+
+      setHasAutoSaved(true);
+    } else if (editingPage) {
+      setPage(editingPage);
+      setPageName(editingPage.name);
+      setHandle(editingPage.handle);
+    }
+  }, [mode, hasAutoSaved, pages, editingPage, addNewPage, isPageGroup, type]);
+
+  //Nav item with URL hooks
+  useEffect(() => {
+    if (mode === 'add' && type === 'url' && !hasAutoSaved) {
+      const existingNames = pages.map((p) => p.name.toLowerCase());
+      let index = 1;
+      let newName = `URL ${index}`;
+      while (existingNames.includes(newName.toLowerCase())) {
+        index++;
+        newName = `URL ${index}`;
+      }
+      const pageObj = { type: 'url', openIn: 'new_tab', url: 'https://www.tooljet.ai' };
+      addNewPage(newName, kebabCase(newName.toLowerCase()), isPageGroup, pageObj).then((data) => {
+        setPage(data);
+        setPageName(newName);
+        setPageURL(data?.url);
+      });
+
+      setHasAutoSaved(true);
+    } else if (editingPage) {
+      setPage(editingPage);
+      setPageName(editingPage.name);
+      setPageURL(editingPage.url);
+    }
+  }, [addNewPage, appOptions, editingPage, hasAutoSaved, isPageGroup, mode, pages, type]);
+
+  //Nav item with app hooks
+  useEffect(() => {
+    const fetchApps = async (page) => {
+      const { apps } = await appService.getAll(page);
+      return apps;
+    };
+
+    // eslint-disable-next-line no-inner-declarations
+    async function getAllApps() {
+      const apps = await fetchApps(0);
+      let appsOptionsList = [];
+      apps
+        .filter((item) => item.slug !== undefined && item.id !== appId && item.current_version_id)
+        .forEach((item) => {
+          appsOptionsList.push({
+            name: item.name,
+            value: item.slug,
+          });
+        });
+      return appsOptionsList;
+    }
+
+    getAllApps()
+      .then((apps) => {
+        setAppOptions(apps);
+      })
+      .finally(() => {
+        setAppOptionsLoading(false);
+      });
+    if (mode === 'add' && type === 'app' && !hasAutoSaved) {
+      const existingNames = pages.map((p) => p.name.toLowerCase());
+      let index = 1;
+      let newName = `App ${index}`;
+      while (existingNames.includes(newName.toLowerCase())) {
+        index++;
+        newName = `App ${index}`;
+      }
+      const pageObj = { type: 'app', openIn: 'new_tab' };
+      addNewPage(newName, kebabCase(newName.toLowerCase()), isPageGroup, pageObj).then((data) => {
+        setPage(data);
+        setPageName(newName);
+      });
+
+      setHasAutoSaved(true);
+    } else if (editingPage) {
+      setPage(editingPage);
+      setPageName(editingPage.name);
+    }
+  }, [mode, hasAutoSaved, pages, editingPage, addNewPage, isPageGroup, type, appId]);
+
+  //Nav item with group
+  useEffect(() => {
+    if (mode === 'add' && type === 'group' && !hasAutoSaved) {
+      const existingNames = pages.map((p) => p.name.toLowerCase());
+      let index = 1;
+      let newName = `Group ${index}`;
+      while (existingNames.includes(newName.toLowerCase())) {
+        index++;
+        newName = `Group ${index}`;
+      }
+      const pageObj = { type: 'group', openIn: 'new_tab' };
+      addNewPage(newName, kebabCase(newName.toLowerCase()), true, pageObj).then((data) => {
+        setPage(data);
+        setPageName(newName);
+      });
+
+      setHasAutoSaved(true);
+    } else if (editingPage) {
+      setPage(editingPage);
+      setPageName(editingPage.name);
+    }
+  }, [mode, hasAutoSaved, pages, editingPage, addNewPage, isPageGroup, type, appId]);
+
+  const handlePageSwitch = useCallback(() => {
+    if (currentPageId === page.id) {
+      return;
+    }
+    switchPage(page.id, page.handle);
+    setCurrentPageHandle(page.handle);
+  }, [currentPageId, page?.id, page?.handle, switchPage, setCurrentPageHandle]);
+
+  const onChangePageHandleValue = (event) => {
+    setError(null);
+    const newHandle = event.target.value;
+
+    if (newHandle === '') setError('Page handle cannot be empty');
+    if (newHandle === handle) setError('Page handle cannot be same as the existing page handle');
+    const isValidKebabCase = validateKebabCase(newHandle);
+    if (!isValidKebabCase.isValid) {
+      setError(isValidKebabCase.error);
+    }
+    setHandle(newHandle);
+  };
+
+  const handleSave = () => {
+    if (handle === page.handle) {
+      setError(null);
+      return;
+    }
+    const { isValid, error } = validateKebabCase(handle);
+    if (!isValid) {
+      setError(error);
+      return;
+    }
+    const transformedPageHandle = kebabCase(handle);
+    updatePageHandle(page.id, transformedPageHandle);
+    setError(null);
+  };
+
+  return (
+    <Popover id="add-new-page-popup" ref={ref} {...props} className={`${darkMode && 'dark-theme'}`}>
+      <Popover.Header>
+        <div className="d-flex justify-content-between align-items-center">
+          <div className="tj-text-xsm font-weight-500 text-default">{POPOVER_TITLES?.[mode]?.[type]}</div>
+          <div className="actions-container">
+            {type !== 'group' && (
+              <>
+                <ToolTip message={'Go to page'} placement="bottom">
+                  <div onClick={handlePageSwitch} className="icon-btn">
+                    <SolidIcon name="arrowright01" />
+                  </div>
+                </ToolTip>
+              </>
+            )}
+
+            <ToolTip message={`Duplicate ${POPOVER_ACTIONS[type]}`} placement="bottom">
+              <div onClick={() => (type === 'group' ? cloneGroup(page?.id) : clonePage(page?.id))} className="icon-btn">
+                <SolidIcon name="duplicatepage" />
+              </div>
+            </ToolTip>
+
+            <ToolTip message={`Delete ${POPOVER_ACTIONS[type]}`} placement="bottom">
+              <div
+                onClick={() => {
+                  openPageEditPopover(page);
+                  toggleDeleteConfirmationModal(true);
+                }}
+                className="icon-btn"
+              >
+                <SolidIcon name="delete01" />
+              </div>
+            </ToolTip>
+          </div>
+        </div>
+      </Popover.Header>
+      <Popover.Body className={`${darkMode && 'dark-theme'}`}>
+        {type === 'default' && (
+          <>
+            <div className="pb-2">
+              <div className="col">
+                <label className="form-label font-weight-400 mb-0">Page name</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={pageName}
+                  autoFocus={true}
+                  onChange={(e) => setPageName(e.target.value)}
+                  onBlur={(e) => {
+                    pageName && pageName !== page?.name && updatePageName(page?.id, pageName);
+                  }}
+                  minLength="1"
+                />
+              </div>
+            </div>
+            <div className="pb-2">
+              <div className="col">
+                <label className="form-label font-weight-400 mb-0">Handle</label>
+                <input
+                  type="text"
+                  className={`form-control ${error ? 'is-invalid' : ''}`}
+                  onChange={(e) => onChangePageHandleValue(e)}
+                  onBlur={(e) => handleSave(e)}
+                  value={handle}
+                  minLength="1"
+                />
+                <div className="invalid-feedback" data-cy={'page-handle-invalid-feedback'}>
+                  {error}
+                </div>
+              </div>
+            </div>
+            <div className="pb-1">
+              <div className="d-flex justify-content-between align-items-center pb-2">
+                <label className="form-label font-weight-400 mb-0">Icon</label>
+                <Icon
+                  isVisibilityEnabled={false}
+                  onChange={(value) => updatePageIcon(page?.id, value)}
+                  value={page?.icon || 'IconFile'}
+                />
+              </div>
+            </div>
+            <div className="pb-2">
+              <div className=" d-flex justify-content-between align-items-center pb-2">
+                <label className="form-label font-weight-400 mb-0">Mark as home</label>
+                <label className={`form-switch`}>
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={isHomePage}
+                    onChange={() => markAsHomePage(page?.id)}
+                    disabled={isHomePage}
+                  />
+                </label>
+              </div>
+              {/* <div className=" d-flex justify-content-between align-items-center pb-2">
+                <label className="form-label font-weight-400 mb-0">Hide this page on navigation</label>
+                <label className={`form-switch`}>
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={page?.hidden}
+                    onChange={(e) => updatePageVisibility(page?.id, !page?.hidden)}
+                    disabled={isHomePage}
+                  />
+                </label>
+              </div> */}
+              <HidePageOnNavigation
+                hidden={page?.hidden}
+                page={page}
+                updatePageVisibility={updatePageVisibility}
+                darkMode={darkMode}
+                isHomePage={isHomePage}
+              />
+              <div className=" d-flex justify-content-between align-items-center pb-2">
+                <label className="form-label font-weight-400 mb-0">Disable page</label>
+                <label className={`form-switch`}>
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={page?.disabled}
+                    onChange={(e) => disableOrEnablePage(page?.id, !page.disabled)}
+                    disabled={isHomePage}
+                  />
+                </label>
+              </div>
+            </div>
+            <PageEvents page={page} allPages={pages} />
+          </>
+        )}
+        {type === 'url' && (
+          <>
+            <div className="pb-2">
+              <div className="col">
+                <label className="form-label font-weight-400 mb-0">Label</label>
+                <input
+                  type="text"
+                  onChange={(e) => setPageName(e.target.value)}
+                  className="form-control"
+                  value={pageName}
+                  autoFocus={true}
+                  onBlur={(e) => {
+                    pageName && pageName !== page?.name && updatePageName(page?.id, pageName);
+                  }}
+                  minLength="1"
+                />
+              </div>
+            </div>
+            <div className="pb-2">
+              <div className="col">
+                <label className="form-label font-weight-400 mb-0">URL</label>
+                <textarea
+                  onChange={(e) => setPageURL(e.target.value)}
+                  className="form-control"
+                  value={pageURL}
+                  onBlur={(e) => page?.url !== e.target.value && updatePageURL(page?.id, pageURL)}
+                  minLength="1"
+                />
+              </div>
+            </div>
+
+            <div className="d-flex justify-content-between align-items-center pb-2">
+              <label className="form-label font-weight-400 mb-0">Open URL in</label>
+              <div className="ms-auto position-relative app-mode-switch" style={{ paddingLeft: '0px' }}>
+                <ToggleGroup
+                  onValueChange={(value) => {
+                    updatePageTarget(page?.id, value);
+                  }}
+                  defaultValue={page?.openIn}
+                >
+                  {OPEN_APP_MODES.map((mode) => (
+                    <ToggleGroupItem key={mode.value} value={mode.value}>
+                      {mode.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+              </div>
+            </div>
+            <div className="pb-2">
+              <div className="d-flex justify-content-between align-items-center">
+                <label className="form-label font-weight-400 mb-0">Icon</label>
+                <Icon
+                  isVisibilityEnabled={false}
+                  onChange={(value) => updatePageIcon(page?.id, value)}
+                  value={page?.icon || 'IconFile'}
+                />
+              </div>
+            </div>
+            <HidePageOnNavigation
+              hidden={page?.hidden}
+              page={page}
+              updatePageVisibility={updatePageVisibility}
+              darkMode={darkMode}
+              isHomePage={isHomePage}
+            />
+          </>
+        )}
+        {type === 'app' && (
+          <>
+            <div className="pb-2">
+              <div className="col">
+                <label className="form-label font-weight-400 mb-0">Label</label>
+                <input
+                  type="text"
+                  onChange={(e) => setPageName(e.target.value)}
+                  className="form-control"
+                  value={pageName}
+                  autoFocus={true}
+                  onBlur={(e) => {
+                    pageName && pageName !== page?.name && updatePageName(page?.id, pageName);
+                  }}
+                  minLength="1"
+                />
+              </div>
+            </div>
+            <div className="pb-2">
+              <div className="col d-flex justify-content-between align-items-center">
+                <label className="form-label font-weight-400 mb-0">Select app</label>
+                <Select
+                  options={appOptions}
+                  search={true}
+                  value={page?.appId}
+                  onChange={(value) => {
+                    updatePageAppId(page?.id, value);
+                  }}
+                  isLoading={appOptionsLoading}
+                  placeholder={'Select...'}
+                  useMenuPortal={false}
+                  width={'168px'}
+                  className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
+                />
+              </div>
+            </div>
+            <div className="d-flex justify-content-between align-items-center pb-2">
+              <label className="form-label font-weight-400 mb-0">Icon</label>
+              <Icon
+                isVisibilityEnabled={false}
+                onChange={(value) => updatePageIcon(page?.id, value)}
+                value={page?.icon || 'IconFile'}
+              />
+            </div>
+            <div className="d-flex justify-content-between align-items-center pb-2">
+              <label className="form-label font-weight-400 mb-0">Open app in</label>
+              <div className="ms-auto position-relative app-mode-switch" style={{ paddingLeft: '0px' }}>
+                <ToggleGroup
+                  onValueChange={(value) => {
+                    updatePageTarget(page?.id, value);
+                  }}
+                  defaultValue={page?.openIn}
+                >
+                  {OPEN_APP_MODES.map((mode) => (
+                    <ToggleGroupItem key={mode.value} value={mode.value}>
+                      {mode.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+              </div>
+            </div>
+            <HidePageOnNavigation
+              hidden={page?.hidden}
+              page={page}
+              updatePageVisibility={updatePageVisibility}
+              darkMode={darkMode}
+              isHomePage={isHomePage}
+            />
+          </>
+        )}
+        {type === 'group' && (
+          <>
+            <div className="pb-2">
+              <div className="col">
+                <label className="form-label font-weight-400 mb-0">Label</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={pageName}
+                  autoFocus={true}
+                  onChange={(e) => setPageName(e.target.value)}
+                  onBlur={(e) => pageName && pageName !== page?.name && updatePageName(page?.id, pageName, true)}
+                  minLength="1"
+                />
+              </div>
+            </div>
+            <div className="pb-2">
+              <div className="d-flex justify-content-between align-items-center">
+                <label className="form-label font-weight-400 mb-0">Icon</label>
+                <Icon
+                  isVisibilityEnabled={false}
+                  onChange={(value) => updatePageIcon(page?.id, value)}
+                  value={page?.icon || 'IconFolder'}
+                />
+              </div>
+            </div>
+            <HidePageOnNavigation
+              hidden={page?.hidden}
+              page={page}
+              updatePageVisibility={updatePageVisibility}
+              darkMode={darkMode}
+              isHomePage={isHomePage}
+            />
+          </>
+        )}
+      </Popover.Body>
+    </Popover>
+  );
+});
+
+const PageEvents = ({ page, allPages }) => {
+  const getComponents = useStore((state) => state.getCurrentPageComponents);
+  const components = getComponents();
+  return (
+    <div className="page-events">
+      <div className="section-header pb-2">Page events</div>
+      {/* <div className="page-empty-events">
+        <SolidIcon name="nopageevents" />
+        <span className="tj-text-xsm">No events added</span>
+      </div> */}
+      <div>
+        <EventManager
+          component={{
+            component: {
+              definition: {
+                events: page?.events ?? [],
+              },
+            },
+          }}
+          sourceId={page?.id}
+          eventSourceType="page"
+          eventMetaDefinition={{ events: { onPageLoad: { displayName: 'On page load' } }, name: 'page' }}
+          components={components}
+          pages={allPages}
+          popOverCallback={(showing) => showing}
+        />
+      </div>
+    </div>
+  );
+};
+
+const HidePageOnNavigation = ({ hidden, darkMode, updatePageVisibility, page, isHomePage }) => {
+  const [forceCodeBox, setForceCodeBox] = useState(hidden?.fxActive);
+
+  return (
+    <div className={cx({ 'codeShow-active': forceCodeBox }, 'wrapper-div-code-editor pb-2')}>
+      <div className={cx('d-flex align-items-center justify-content-between')}>
+        <div className={`field`}>
+          <InspectorTooltip
+            label={`${page?.type === 'default' ? 'Hide this page on navigation' : 'Hide this item on navigation'}`}
+            labelClass={`tj-text-xsm color-slate12 ${forceCodeBox ? 'mb-2' : 'mb-0'} ${
+              darkMode && 'color-whitish-darkmode'
+            }`}
+          />
+        </div>
+        <div className={`flex-grow-1`}>
+          <div
+            style={{ marginBottom: forceCodeBox ? '0.5rem' : '0px' }}
+            className={`d-flex align-items-center justify-content-end`}
+          >
+            <div className={`col-auto pt-0 mx-1 fx-button-container ${forceCodeBox && 'show-fx-button-container'}`}>
+              <FxButton
+                active={forceCodeBox}
+                onPress={() => {
+                  if (forceCodeBox) {
+                    setForceCodeBox(false);
+                  } else {
+                    setForceCodeBox(true);
+                  }
+                }}
+              />
+            </div>
+
+            {!forceCodeBox && (
+              <div className="form-check form-switch m-0">
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  checked={resolveReferences(hidden?.value)}
+                  disabled={isHomePage}
+                  onChange={(e) =>
+                    updatePageVisibility(page?.id, {
+                      value: `{{${e.target.checked}}}`,
+                      fxActive: forceCodeBox,
+                    })
+                  }
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {forceCodeBox && (
+        <CodeHinter
+          initialValue={hidden?.value}
+          lang="javascript"
+          lineNumbers={false}
+          onChange={(value) => {
+            updatePageVisibility(page?.id, {
+              value: value,
+              fxActive: forceCodeBox,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/AddPageButton.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddPageButton.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/AddPageButton.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/AddPageButton.jsx
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/DeletePageConfirmationModal.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/DeletePageConfirmationModal.jsx
similarity index 98%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/DeletePageConfirmationModal.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/DeletePageConfirmationModal.jsx
index b1af85434c..c0a5ae0420 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/DeletePageConfirmationModal.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/DeletePageConfirmationModal.jsx
@@ -48,7 +48,7 @@ export function DeletePageConfirmationModal({ darkMode }) {
             className="delete-all-button"
           >
             <Trash width="14" fill="#69727C" />
-            <span>Delete folder and pages</span>
+            <span>Delete group and pages</span>
           </button>
           <button
             onClick={handleClose}
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/DeletePageGroupConfirmationModal.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/DeletePageGroupConfirmationModal.jsx
similarity index 96%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/DeletePageGroupConfirmationModal.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/DeletePageGroupConfirmationModal.jsx
index 7946696031..4050550351 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/DeletePageGroupConfirmationModal.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/DeletePageGroupConfirmationModal.jsx
@@ -25,7 +25,7 @@ export const DeletePageGroupConfirmationModal = ({ onConfirm, onCancel, darkMode
           className="delete-all-button"
         >
           <Trash width="14" fill="#69727C" />
-          <span>Delete folder and pages</span>
+          <span>Delete group and pages</span>
         </button>
         <button
           onClick={onCancel}
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/EditInput.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/EditInput.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/EditInput.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/EditInput.jsx
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/EditModal.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/EditModal.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/EditModal.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/EditModal.jsx
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/IconSelector.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/IconSelector.jsx
similarity index 97%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/IconSelector.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/IconSelector.jsx
index d7822605ef..1a4b898546 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/IconSelector.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/IconSelector.jsx
@@ -6,7 +6,7 @@ import * as Icons from '@tabler/icons-react';
 import { SearchBox } from '@/_components';
 import useStore from '@/AppBuilder/_stores/store';
 
-export default function IconSelector({ iconName, iconColor, pageId, disabled = false }) {
+export default function IconSelector({ iconName, iconColor, pageId, iconStyles, disabled = false }) {
   const [searchText, setSearchText] = useState('');
   const [showPopOver, setPopOverVisibility] = useState(false);
   const updatePageIcon = useStore((state) => state.updatePageIcon);
@@ -86,7 +86,7 @@ export default function IconSelector({ iconName, iconColor, pageId, disabled = f
         <div className="">
           <IconElement
             color={`${iconColor}`}
-            style={{ width: '19px', height: '19px', color: iconColor, stroke: iconColor }}
+            style={{ width: '19px', height: '19px', color: iconColor, stroke: iconColor, ...iconStyles }}
           />
         </div>
       </div>
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageGroup.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageGroup.jsx
new file mode 100644
index 0000000000..0b49618e9a
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageGroup.jsx
@@ -0,0 +1,374 @@
+/* eslint-disable import/namespace */
+import React, { useRef, useState } from 'react';
+import _ from 'lodash';
+import * as Icons from '@tabler/icons-react';
+// eslint-disable-next-line import/no-unresolved
+import FolderList from '@/_ui/FolderList/FolderList';
+import useStore from '@/AppBuilder/_stores/store';
+import OverflowTooltip from '@/_components/OverflowTooltip';
+import cx from 'classnames';
+import { buildTree } from './Tree/utilities';
+import { Overlay, Popover } from 'react-bootstrap';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { ToolTip } from '@/_components';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+
+const RenderPage = ({
+  page,
+  currentPageId,
+  switchPageWrapper,
+  labelStyle,
+  computeStyles,
+  darkMode,
+  homePageId,
+  linkRefs,
+  isSidebarPinned,
+  callback,
+  position,
+}) => {
+  const currentMode = useStore((state) => state.currentMode);
+  const isHomePage = page.id === homePageId;
+  const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
+  const IconElement = (props) => {
+    const Icon = Icons?.[iconName] ?? Icons?.['IconFileDescription'];
+
+    if (!isSidebarPinned || labelStyle?.label?.hidden) {
+      return (
+        <ToolTip message={page?.name} placement={'right'}>
+          <Icon {...props} />
+        </ToolTip>
+      );
+    }
+
+    return <Icon {...props} />;
+  };
+  return (page.hidden || page.disabled) && page?.restricted ? null : (
+    <div
+      key={page.name}
+      data-id={page.id}
+      ref={(el) => {
+        if (el) {
+          if (linkRefs?.current) {
+            linkRefs.current[page.id] = el;
+          }
+        }
+      }}
+    >
+      <FolderList
+        key={page.handle}
+        onClick={() => {
+          switchPageWrapper(page);
+          callback && position !== 'side' && callback();
+        }}
+        selectedItem={page?.id === currentPageId}
+        CustomIcon={!labelStyle?.icon?.hidden && IconElement}
+        customStyles={computeStyles}
+        darkMode={darkMode}
+      >
+        {!labelStyle?.label?.hidden && (
+          <span
+            // className={isSelected && 'tj-list-item-selected'}
+            data-cy={`pages-name-${String(page?.name).toLowerCase()}`}
+          >
+            <OverflowTooltip style={{ width: '110px', position: 'relative' }} childrenClassName={'page-name'}>
+              {page.name}
+            </OverflowTooltip>
+          </span>
+        )}
+      </FolderList>
+    </div>
+  );
+};
+
+const RenderPageGroup = ({
+  pages,
+  pageGroup,
+  currentPage,
+  labelStyle,
+  computeStyles,
+  darkMode,
+  switchPageWrapper,
+  homePageId,
+  currentPageId,
+  linkRefs,
+  isSidebarPinned,
+  position,
+}) => {
+  const currentMode = useStore((state) => state.currentMode);
+
+  const [hovered, setHovered] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const contentRef = useRef(null);
+
+  const IconElement = (props) => {
+    const Icon = Icons?.[pageGroup.icon] ?? Icons?.['IconHome2'];
+
+    if ((!isSidebarPinned && currentMode === 'view') || labelStyle?.label?.hidden) {
+      return (
+        <ToolTip message={pageGroup?.name} placement={'right'}>
+          <Icon {...props} />
+        </ToolTip>
+      );
+    }
+
+    return <Icon {...props} />;
+  };
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  if (labelStyle?.label?.hidden) {
+    return (
+      <>
+        {pages.map((page) => (
+          <RenderPage
+            key={page.handle}
+            page={page}
+            currentPageId={currentPageId}
+            switchPageWrapper={switchPageWrapper}
+            labelStyle={labelStyle}
+            computeStyles={computeStyles}
+            darkMode={darkMode}
+            homePageId={homePageId}
+            position={position}
+          />
+        ))}
+      </>
+    );
+  }
+
+  const active = currentPage?.pageGroupId === pageGroup?.id;
+
+  return (
+    <div
+      key={pageGroup.name}
+      data-id={pageGroup.id}
+      ref={(el) => linkRefs?.current && (linkRefs.current[pageGroup.id] = el)}
+      className={`accordion-item ${darkMode ? 'dark-mode' : ''}`}
+    >
+      <div
+        className={`page-group-wrapper tj-list-item ${active && !isExpanded ? 'tj-list-item-selected' : ''}`}
+        style={{
+          position: 'relative',
+        }}
+      >
+        <FolderList
+          key={pageGroup.id}
+          onClick={isSidebarPinned && handleToggle}
+          CustomIcon={!labelStyle?.icon?.hidden && IconElement}
+          customStyles={computeStyles}
+          darkMode={darkMode}
+          hovered={hovered}
+        >
+          {!labelStyle?.label?.hidden && (
+            <span data-cy={`pages-name-${String(pageGroup?.name).toLowerCase()}`}>
+              <OverflowTooltip style={{ width: '110px' }} childrenClassName={'page-name'}>
+                {pageGroup.name}
+              </OverflowTooltip>
+            </span>
+          )}
+        </FolderList>
+        <div style={{ marginRight: '12px' }}>
+          <svg
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+            onClick={handleToggle}
+            className={`page-group-collapse ${isExpanded ? 'expanded' : 'collapsed'}`}
+            width={17}
+            height={16}
+            viewBox="0 0 17 16"
+            fill="black"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.1257 4L5.27446 4C4.50266 4 4.02179 4.83721 4.41068 5.50387L7.33631 10.5192C7.72218 11.1807 8.67798 11.1807 9.06386 10.5192L11.9895 5.50387C12.3784 4.83721 11.8975 4 11.1257 4Z"
+              fill="#ACB2B9"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <div className={`accordion-body ${isExpanded ? 'show' : 'hide'}`}>
+        <div ref={contentRef} className="accordion-content">
+          {pages.map((page) => (
+            <RenderPage
+              key={page.handle}
+              page={page}
+              currentPageId={currentPageId}
+              switchPageWrapper={switchPageWrapper}
+              labelStyle={labelStyle}
+              computeStyles={computeStyles}
+              darkMode={darkMode}
+              homePageId={homePageId}
+              linkRefs={linkRefs}
+              callback={handleToggle}
+              position={position}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const RenderPageAndPageGroup = ({
+  pages,
+  labelStyle,
+  computeStyles,
+  darkMode,
+  switchPageWrapper,
+  visibleLinks,
+  overflowLinks,
+  linkRefs,
+  moreBtnRef,
+  position,
+  style,
+  isSidebarPinned,
+}) => {
+  const { moduleId } = useModuleContext();
+  // Don't render empty folders if displaying only icons
+  const visibleTree = buildTree(position === 'top' ? visibleLinks : pages, !!labelStyle?.label?.hidden);
+  const overflowTree = buildTree(overflowLinks, !!labelStyle?.label?.hidden);
+  const filteredPagesVisible = visibleTree.filter(
+    (page) => (!page?.isPageGroup || page.children?.length > 0) && !page?.restricted
+  );
+  const filteredPagesOverflow = overflowTree.filter(
+    (page) => (!page?.isPageGroup || page.children?.length > 0) && !page?.restricted
+  );
+  const currentPageId = useStore((state) => state.modules[moduleId].currentPageId);
+  const currentPage = pages.find((page) => page.id === currentPageId);
+  const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
+  const [showPopover, setShowPopover] = useState(false);
+  return (
+    <div className={cx('page-handler-wrapper viewer', { 'dark-theme': darkMode })}>
+      {/* <Accordion alwaysOpen defaultActiveKey={tree.map((page) => page.id)}> */}
+      {filteredPagesVisible.map((page, index) => {
+        if (
+          page.isPageGroup &&
+          page.children.length === 0 &&
+          labelStyle?.label?.hidden &&
+          !page.children.some((child) => child?.restricted === true)
+        ) {
+          return null;
+        }
+        if (page.children && page.isPageGroup && !page.children.some((child) => child?.restricted === true)) {
+          // if we are only displaying icons, we don't display the groups instead display separator to separate a page groups
+          const renderSeparatorTop = index !== 0 && labelStyle?.label?.hidden;
+          const renderSeparatorBottom = !filteredPagesVisible[index + 1]?.isPageGroup && labelStyle?.label?.hidden;
+          return (
+            <>
+              <RenderPageGroup
+                switchPageWrapper={switchPageWrapper}
+                homePageId={homePageId}
+                currentPageId={currentPageId}
+                key={page.id}
+                pages={page.children}
+                pageGroup={page}
+                currentPage={currentPage}
+                labelStyle={labelStyle}
+                computeStyles={computeStyles}
+                darkMode={darkMode}
+                linkRefs={linkRefs}
+                isSidebarPinned={isSidebarPinned}
+                position={position}
+              />
+            </>
+          );
+        } else if (!page.isPageGroup) {
+          return (
+            <RenderPage
+              key={page.handle}
+              page={page}
+              currentPageId={currentPageId}
+              switchPageWrapper={switchPageWrapper}
+              labelStyle={labelStyle}
+              computeStyles={computeStyles}
+              darkMode={darkMode}
+              homePageId={homePageId}
+              linkRefs={linkRefs}
+              isSidebarPinned={isSidebarPinned}
+              position={position}
+            />
+          );
+        }
+      })}
+      {filteredPagesOverflow.length > 0 && position === 'top' && (
+        <>
+          <button
+            ref={moreBtnRef}
+            onClick={() => setShowPopover(!showPopover)}
+            className="tj-list-item page-name"
+            style={{ cursor: 'pointer', fontSize: '14px', marginLeft: '0px' }}
+          >
+            <SolidIcon fill={'var(--icon-weak)'} viewBox="0 3 21 18" width="16px" name="morevertical" />
+            <div style={{ marginLeft: '6px' }}>More</div>
+          </button>
+
+          <Overlay
+            show={showPopover}
+            target={moreBtnRef.current}
+            placement="bottom-end"
+            onHide={() => setShowPopover(false)}
+            rootClose
+          >
+            <Popover id="more-nav-btns">
+              <Popover.Body>
+                {filteredPagesOverflow.map((page, index) => {
+                  if (
+                    page.isPageGroup &&
+                    page.children.length === 0 &&
+                    labelStyle?.label?.hidden &&
+                    !page.children.some((child) => child?.restricted === true)
+                  ) {
+                    return null;
+                  }
+                  if (page.children && page.isPageGroup && !page.children.some((child) => child?.restricted === true)) {
+                    // if we are only displaying icons, we don't display the groups instead display separator to separate a page groups
+                    const renderSeparatorTop = index !== 0 && labelStyle?.label?.hidden;
+                    const renderSeparatorBottom =
+                      !filteredPagesOverflow[index + 1]?.isPageGroup && labelStyle?.label?.hidden;
+                    return (
+                      <>
+                        <RenderPageGroup
+                          switchPageWrapper={switchPageWrapper}
+                          homePageId={homePageId}
+                          currentPageId={currentPageId}
+                          key={page.id}
+                          pages={page.children}
+                          pageGroup={page}
+                          currentPage={currentPage}
+                          labelStyle={labelStyle}
+                          computeStyles={computeStyles}
+                          darkMode={darkMode}
+                          linkRefs={linkRefs}
+                          isSidebarPinned={isSidebarPinned}
+                        />
+                      </>
+                    );
+                  } else if (!page.isPageGroup) {
+                    return (
+                      <RenderPage
+                        key={page.handle}
+                        page={page}
+                        currentPageId={currentPageId}
+                        switchPageWrapper={switchPageWrapper}
+                        labelStyle={labelStyle}
+                        computeStyles={computeStyles}
+                        darkMode={darkMode}
+                        homePageId={homePageId}
+                        linkRefs={linkRefs}
+                        isSidebarPinned={isSidebarPinned}
+                      />
+                    );
+                  }
+                })}
+              </Popover.Body>
+            </Popover>
+          </Overlay>
+        </>
+      )}
+      {/* </Accordion> */}
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageGroupItem.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageGroupItem.jsx
similarity index 50%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/PageGroupItem.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageGroupItem.jsx
index e339604a00..8913fb860c 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageGroupItem.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageGroupItem.jsx
@@ -1,8 +1,17 @@
-import React, { memo, useState, useMemo, useCallback } from 'react';
+import React, { memo, useState, useMemo, useCallback, useRef } from 'react';
+import cx from 'classnames';
+import * as Icons from '@tabler/icons-react';
 import useStore from '@/AppBuilder/_stores/store';
 import { RenameInput } from './RenameInput';
 import IconSelector from './IconSelector';
 import OverflowTooltip from '@/_components/OverflowTooltip';
+import PageOptions from './PageOptions';
+import { Overlay, Popover } from 'react-bootstrap';
+import { AddEditPagePopup } from './AddNewPagePopup';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { ToolTip } from '@/_components';
+import Skip from '@/_ui/Icon/solidIcons/Skip';
+import EyeDisable from '@/_ui/Icon/solidIcons/EyeDisable';
 
 const Caret = memo((props) => {
   return (
@@ -56,12 +65,22 @@ const PageGroupActions = memo(({ onRename, onDelete }) => (
 
 export const PageGroupItem = memo(({ page, index, collapsed, onCollapse, highlight, darkMode }) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [showPageOptions, toggleShowPageOptions] = useState(false);
+  const [showEditPopover, setShowEditPopover] = useState(false);
   const [renamingPageGroup, setRenamingPageGroup] = useState(false);
   const {
     definition: { styles },
   } = useStore((state) => state.pageSettings);
 
+  const moreBtnRef = useRef(null);
+  const optionsBtnRef = useRef(null);
+
   const { openPageEditPopover, toggleDeleteConfirmationModal } = useStore();
+  const setNewPagePopupConfig = useStore((state) => state.setNewPagePopupConfig);
+  const cloneGroup = useStore((state) => state.cloneGroup);
+  const setEditingPage = useStore((state) => state.setEditingPage);
+  const newPagePopupConfig = useStore((state) => state.newPagePopupConfig);
+  const editingPage = useStore((state) => state.editingPage);
   const computeStyles = useCallback(() => {
     const baseStyles = {
       pill: {
@@ -99,7 +118,17 @@ export const PageGroupItem = memo(({ page, index, collapsed, onCollapse, highlig
 
   const computedStyles = computeStyles();
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleOpenPopup = (type, page) => {
+    // openPageEditPopover(page);
+    setEditingPage(page);
+    toggleShowPageOptions(false);
+    setShowEditPopover(true);
+    setNewPagePopupConfig({ type, mode: 'edit' });
+  };
+
   const memoizedContent = useMemo(() => {
+    const isEditing = editingPage?.id === page?.id;
     const childrenCount = page?.children?.length;
     return (
       <div
@@ -108,44 +137,39 @@ export const PageGroupItem = memo(({ page, index, collapsed, onCollapse, highlig
         style={{ position: 'relative', width: '100%' }}
       >
         <div
-          className={`page-menu-item ${highlight ? 'highlight' : ''} ${darkMode ? 'dark-theme' : ''}`}
-          style={{ ...computedStyles?.pill }}
+          className={`page-menu-item page-group-item ${highlight ? 'highlight' : ''} ${darkMode ? 'dark-theme' : ''} ${
+            showPageOptions && isEditing ? 'is-selected' : ''
+          }`}
+          onClick={() => {
+            handleOpenPopup('group', page);
+          }}
+          // style={{ ...computedStyles?.pill }}
         >
           {renamingPageGroup ? (
             <>
-              <div className="left">
-                {childrenCount > 0 && (
-                  <Caret
-                    style={{
-                      transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)',
-                    }}
-                    onClick={() => onCollapse(page.id)}
-                  />
-                )}
-                <IconSelector iconColor={computedStyles?.icon?.color} iconName={page.icon} pageId={page.id} />
-              </div>
+              <div className="left"></div>
               <RenameInput page={page} updaterCallback={() => setRenamingPageGroup(false)} />
             </>
           ) : (
             <>
               {' '}
-              <div className="left">
-                {childrenCount > 0 && (
-                  <Caret
-                    style={{
-                      transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)',
-                    }}
-                    onClick={() => onCollapse(page.id)}
-                  />
-                )}
-                <IconSelector iconColor={computedStyles?.icon?.color} iconName={page.icon} pageId={page.id} />
+              <div ref={optionsBtnRef} className="left">
                 <div className="page-name">
                   <OverflowTooltip childrenClassName="page-name" style={{ ...computedStyles?.text }}>
                     {page.name}
                   </OverflowTooltip>
                 </div>
+                <span className="color-slate09 meta-text d-flex align-items-center justify-content-center">
+                  {page?.hidden && (
+                    <ToolTip message="Hidden group" placement="bottom">
+                      <div className=" d-flex align-items-center justify-content-center">
+                        <EyeDisable fill="var(--icons-default)" className="" width={16} height={16} />
+                      </div>
+                    </ToolTip>
+                  )}
+                </span>
               </div>
-              <PageGroupActions
+              {/* <PageGroupActions
                 onRename={() => {
                   setRenamingPageGroup(true);
                   openPageEditPopover(page);
@@ -154,22 +178,106 @@ export const PageGroupItem = memo(({ page, index, collapsed, onCollapse, highlig
                   openPageEditPopover(page);
                   toggleDeleteConfirmationModal(true);
                 }}
-              />
+              /> */}
+              <div>
+                <div className={cx('action-btn-wrapper', { 'options-opened': showPageOptions })}>
+                  <div
+                    ref={moreBtnRef}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      setEditingPage(page);
+                      toggleShowPageOptions(true);
+                      setNewPagePopupConfig({ show: false, mode: null, type: null });
+                      setShowEditPopover(false);
+                    }}
+                    role="button"
+                    className="icon-btn"
+                  >
+                    <SolidIcon name="morevertical01" width="12" viewBox="0 0 12 12" />
+                  </div>
+
+                  <Overlay
+                    target={moreBtnRef.current}
+                    show={showPageOptions && isEditing}
+                    placement="bottom-end"
+                    rootClose
+                    onHide={() => {
+                      setEditingPage(null);
+                      toggleShowPageOptions(false);
+                    }}
+                  >
+                    <Popover id="edit-page-popover">
+                      <div className="menu-options mb-0">
+                        <PageOptions
+                          text="Edit group details"
+                          icon="editable"
+                          darkMode={darkMode}
+                          onClick={() => handleOpenPopup('group', page)}
+                        />
+                        <PageOptions
+                          text="Duplicate group"
+                          icon="copy"
+                          darkMode={darkMode}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            toggleShowPageOptions(false);
+                            cloneGroup(page?.id);
+                          }}
+                        />
+                        <PageOptions
+                          text="Delete group"
+                          icon="trash"
+                          darkMode={darkMode}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            toggleShowPageOptions(false);
+                            openPageEditPopover(page);
+                            toggleDeleteConfirmationModal(true);
+                          }}
+                        />
+                      </div>
+                    </Popover>
+                  </Overlay>
+                  <Overlay
+                    target={optionsBtnRef.current}
+                    show={showEditPopover && newPagePopupConfig?.mode == 'edit' && isEditing}
+                    placement="left-start"
+                    rootClose
+                    onHide={() => {
+                      setNewPagePopupConfig({ show: false, mode: null, type: null });
+                      setShowEditPopover(false);
+                      setEditingPage(null);
+                      showPageOptions(false);
+                    }}
+                  >
+                    <AddEditPagePopup darkMode={darkMode} />
+                  </Overlay>
+                </div>
+              </div>
             </>
           )}
         </div>
       </div>
     );
   }, [
-    page.name,
-    (page.children || []).length,
-    page.collapsed,
-    index,
-    renamingPageGroup,
-    page.icon,
+    editingPage,
+    page,
+    showPageOptions,
     highlight,
     darkMode,
-    computeStyles,
+    renamingPageGroup,
+    computedStyles?.text,
+    showEditPopover,
+    newPagePopupConfig?.mode,
+    handleOpenPopup,
+    setEditingPage,
+    cloneGroup,
+    openPageEditPopover,
+    toggleDeleteConfirmationModal,
+    setNewPagePopupConfig,
   ]);
 
   return memoizedContent;
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageHandlerMenu.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageHandlerMenu.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/PageHandlerMenu.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageHandlerMenu.jsx
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenu.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenu.jsx
similarity index 71%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenu.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenu.jsx
index 68a54c2ca4..d4f1a5d7ef 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenu.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenu.jsx
@@ -24,7 +24,6 @@ export const PageMenu = ({ darkMode, switchPage, pinned, setPinned }) => {
   const toggleShowAddNewPageInput = useStore((state) => state.toggleShowAddNewPageInput);
   const showSearch = useStore((state) => state.showSearch);
   const handleSearch = useStore((state) => state.handleSearch);
-  const togglePageSettingMenu = useStore((state) => state.togglePageSettingMenu);
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const enableReleasedVersionPopupState = useStore((state) => state.enableReleasedVersionPopupState);
   const closePageEditPopover = useStore((state) => state.closePageEditPopover);
@@ -57,45 +56,34 @@ export const PageMenu = ({ darkMode, switchPage, pinned, setPinned }) => {
         }}
         className="card-body p-0 pb-5"
       >
-        <HeaderSection title={'Pages'} darkMode={darkMode}>
-          <HeaderSection.PanelHeader title="Pages" darkMode={darkMode}>
-            <div className="d-flex justify-content-end" style={{ gap: '4px' }}>
-              <button
-                onClick={shouldFreeze ? enableReleasedVersionPopupState : togglePageSettingMenu}
-                disabled={shouldFreeze}
-                className={`page-menu-action-buttons ${darkMode ? 'dark-theme' : ''}`}
-              >
-                <SolidIcon name="settings" width="25" />
-              </button>
-              <button
-                onClick={() => setPinned(!pinned)}
-                className={`page-menu-action-buttons ${darkMode ? 'dark-theme' : ''}`}
-              >
-                <SolidIcon name={pinned ? 'unpin01' : 'pin'} width="16" />
-              </button>
-              <PageGroupMenu
-                isLicensed={isLicensed}
-                title={'Add Page'}
-                onClick={() => (shouldFreeze ? enableReleasedVersionPopupState() : toggleShowAddNewPageInput(true))}
-                className="left-sidebar-header-btn"
-                fill={`var(--slate12)`}
-                darkMode={darkMode}
-                leftIcon="plus"
-                iconWidth="14"
-                variant="tertiary"
-                disabled={shouldFreeze}
-              ></PageGroupMenu>
-            </div>
-          </HeaderSection.PanelHeader>
-          {showSearch && (
-            <HeaderSection.SearchBoxComponent
-              onChange={handleSearch}
-              placeholder={'Search'}
-              placeholderIcon={''}
-              darkMode={darkMode}
-            />
-          )}
-        </HeaderSection>
+        <div className="d-flex justify-content-end" style={{ gap: '4px' }}>
+          <button
+            onClick={() => setPinned(!pinned)}
+            className={`page-menu-action-buttons ${darkMode ? 'dark-theme' : ''}`}
+          >
+            <SolidIcon name={pinned ? 'unpin01' : 'pin'} width="16" />
+          </button>
+          <PageGroupMenu
+            isLicensed={isLicensed}
+            title={'Add Page'}
+            onClick={() => (shouldFreeze ? enableReleasedVersionPopupState() : toggleShowAddNewPageInput(true))}
+            className="left-sidebar-header-btn"
+            fill={`var(--slate12)`}
+            darkMode={darkMode}
+            leftIcon="plus"
+            iconWidth="14"
+            variant="tertiary"
+            disabled={shouldFreeze}
+          ></PageGroupMenu>
+        </div>
+        {showSearch && (
+          <HeaderSection.SearchBoxComponent
+            onChange={handleSearch}
+            placeholder={'Search'}
+            placeholderIcon={''}
+            darkMode={darkMode}
+          />
+        )}
         <div
           className={`${darkMode && 'dark-theme'} page-selector-panel-body`}
           style={{ borderRight: !styles?.borderColor?.isDefault ? `1px solid ${styles?.borderColor?.value}` : '' }}
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuGroupItem.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuGroupItem.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuGroupItem.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuGroupItem.jsx
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItem.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItem.jsx
new file mode 100644
index 0000000000..8a2fd40605
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItem.jsx
@@ -0,0 +1,545 @@
+import React, { memo, useRef, useState, useCallback } from 'react';
+import cx from 'classnames';
+import * as Icons from '@tabler/icons-react';
+import { useAppVersionStore } from '@/_stores/appVersionStore';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import EyeDisable from '@/_ui/Icon/solidIcons/EyeDisable';
+import FileRemove from '@/_ui/Icon/solidIcons/FIleRemove';
+import Home from '@/_ui/Icon/solidIcons/Home';
+import useStore from '@/AppBuilder/_stores/store';
+import _ from 'lodash';
+import { toast } from 'react-hot-toast';
+import { RenameInput } from './RenameInput';
+import IconSelector from './IconSelector';
+import { withRouter } from '@/_hoc/withRouter';
+import OverflowTooltip from '@/_components/OverflowTooltip';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import { shallow } from 'zustand/shallow';
+import { Overlay, Popover } from 'react-bootstrap';
+import PageOptions from './PageOptions';
+import { AddEditPagePopup } from './AddNewPagePopup';
+import { ToolTip } from '@/_components';
+import Skip from '@/_ui/Icon/solidIcons/Skip';
+import { resolveReferences } from '@/_helpers/utils';
+
+export const PAGE_TYPES = {
+  default: '',
+  app: 'TJ app',
+  url: 'URL',
+};
+
+export const PageMenuItem = withRouter(
+  memo(({ darkMode, page, navigate, treeRef }) => {
+    const { moduleId } = useModuleContext();
+    const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
+    const isHomePage = page.id === homePageId;
+    const currentPageId = useStore((state) => state.modules[moduleId].currentPageId);
+    const isSelected = page.id === currentPageId;
+    const isHidden = resolveReferences(page?.hidden?.value) ?? false;
+    const isDisabled = page?.disabled ?? false;
+    const [isHovered, setIsHovered] = useState(false);
+    const shouldFreeze = useStore((state) => state.getShouldFreeze());
+    const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
+    const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
+    const showEditingPopover = useStore((state) => state.showEditingPopover);
+    const logError = useStore((state) => state.eventsSlice.logError);
+    const setNewPagePopupConfig = useStore((state) => state.setNewPagePopupConfig);
+    const setEditingPage = useStore((state) => state.setEditingPage);
+    const newPagePopupConfig = useStore((state) => state.newPagePopupConfig);
+    const toggleDeleteConfirmationModal = useStore((state) => state.toggleDeleteConfirmationModal);
+    const togglePagePermissionModal = useStore((state) => state.togglePagePermissionModal);
+    const clonePage = useStore((state) => state.clonePage);
+    const markAsHomePage = useStore((state) => state.markAsHomePage);
+    const restricted = page?.permissions && page?.permissions?.length > 0;
+    const {
+      definition: { styles, properties },
+    } = useStore((state) => state.pageSettings);
+    const setCurrentPageHandle = useStore((state) => state.setCurrentPageHandle);
+    // only update when the page is being edited
+    const editingPage = useStore((state) => state.editingPage);
+    const editingPageName = useStore((state) => state.showEditPageNameInput);
+    const [showPageOptions, toggleShowPageOptions] = useState(false);
+    const [showEditPopover, setShowEditPopover] = useState(false);
+    const popoverRef = useRef(null);
+
+    const openPageEditPopover = useStore((state) => state.openPageEditPopover);
+    const toggleEditPageNameInput = useStore((state) => state.toggleEditPageNameInput);
+
+    const optionBtnRef = useRef(null);
+    const moreBtnRef = useRef(null);
+
+    const isEditingPage = editingPage?.id === page?.id;
+    const icon = (props) => {
+      const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
+      // eslint-disable-next-line import/namespace
+      const Icon = Icons?.[iconName] ?? Icons?.['IconFileDescription'];
+
+      return (
+        <Icon {...props} style={{ width: '16px', height: '16px', color: 'var(--icons-default)', marginRight: '6px' }} />
+      );
+
+      // if (!isDisabled && !isHidden) {
+      // }
+      // if (isDisabled || (isDisabled && isHidden)) {
+      //   return (
+      //     <FileRemove fill={computedStyles?.icon?.fill} className=" " width={16} height={16} viewBox={'0 0 16 16'} />
+      //   );
+      // }
+    };
+    const computeStyles = useCallback(() => {
+      const baseStyles = {
+        pill: {
+          borderRadius: `${styles.pillRadius.value}px`,
+        },
+        icon: {
+          color: !styles.iconColor.isDefault && styles.iconColor.value,
+          fill: !styles.iconColor.isDefault && styles.iconColor.value,
+        },
+      };
+
+      switch (true) {
+        case isSelected: {
+          return {
+            ...baseStyles,
+            text: {
+              color: !styles.selectedTextColor.isDefault && styles.selectedTextColor.value,
+            },
+            icon: {
+              stroke: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
+              color: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
+              fill: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
+            },
+            pill: {
+              background: !styles.pillSelectedBackgroundColor.isDefault && styles.pillSelectedBackgroundColor.value,
+              ...(page.id === editingPage?.id && {
+                backgroundColor: 'var(--slate1)',
+              }),
+              ...baseStyles.pill,
+            },
+          };
+        }
+        case isHovered: {
+          return {
+            ...baseStyles,
+            pill: {
+              background: !styles.pillHoverBackgroundColor.isDefault && styles.pillHoverBackgroundColor.value,
+              ...baseStyles.pill,
+            },
+          };
+        }
+        default: {
+          return {
+            text: {
+              color: !styles.textColor.isDefault && styles.textColor.value,
+            },
+            icon: {
+              color: !styles.iconColor.isDefault && styles.iconColor.value,
+              fill: !styles.iconColor.isDefault && styles.iconColor.value,
+            },
+          };
+        }
+      }
+    }, [styles, isSelected, isHovered, page.id, editingPage?.id]);
+
+    const computedStyles = computeStyles();
+
+    const labelStyle = {
+      icon: {
+        hidden: properties.style === 'text',
+      },
+      label: {
+        hidden: properties.style === 'icon',
+      },
+    };
+
+    const switchPage = useStore((state) => state.switchPage);
+
+    const getAbsoluteUrl = (url) => {
+      if (!url) return '';
+
+      if (url.startsWith('http://') || url.startsWith('https://')) {
+        return url;
+      }
+      return `https://${url}`;
+    };
+
+    const handlePageSwitch = useCallback(
+      (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (page?.type === 'url') {
+          if (page?.url) {
+            const finalUrl = getAbsoluteUrl(page.url);
+            if (finalUrl) {
+              if (page.openIn === 'new_tab') {
+                window.open(finalUrl, '_blank');
+              } else {
+                window.location.href = finalUrl;
+              }
+            }
+          } else {
+            logError(
+              'Navigation',
+              'navigation',
+              { message: 'No URL provided', errorTarget: 'page' },
+              { eventType: 'page' },
+              {},
+              '',
+              page
+            );
+            return;
+          }
+          return;
+        }
+
+        if (page?.type === 'app') {
+          if (page?.appId) {
+            const baseUrl = `${window.public_config?.TOOLJET_HOST}/applications/${page.appId}`;
+            if (page.openIn === 'new_tab') {
+              window.open(baseUrl, '_blank');
+            } else {
+              window.location.href = baseUrl;
+            }
+          } else {
+            logError(
+              'Navigation',
+              'navigation',
+              { message: 'No application slug provided', errorTarget: 'page' },
+              { eventType: 'page' },
+              {},
+              '',
+              page
+            );
+            return;
+          }
+          return;
+        }
+
+        if (currentPageId === page?.id) {
+          return;
+        }
+
+        switchPage(page?.id, page?.handle, [], moduleId);
+        setCurrentPageHandle(page.handle);
+      },
+      [page, currentPageId, switchPage, moduleId, setCurrentPageHandle, logError]
+    );
+
+    const handlePageMenuSettings = useCallback(
+      (event) => {
+        event.stopPropagation();
+        openPageEditPopover(page, popoverRef);
+      },
+      [popoverRef.current, page]
+    );
+
+    const handleOpenPopup = (type, page) => {
+      // openPageEditPopover(page);
+      setEditingPage(page);
+      toggleShowPageOptions(false);
+      setShowEditPopover(true);
+      setNewPagePopupConfig({ type, mode: 'edit' });
+    };
+    function getTooltip() {
+      const permission = page?.permissions?.length ? page?.permissions[0] : null;
+      if (!permission) return '';
+      const users = permission.users || [];
+      const isSingle = permission.type === 'SINGLE';
+      const isGroup = permission.type === 'GROUP';
+
+      if (users.length === 0) return null;
+
+      if (isSingle) {
+        if (users.length === 1) {
+          const email = users[0].user.email;
+          return `Access restricted to ${email}`;
+        } else {
+          return `Access restricted to ${users.length} users`;
+        }
+      }
+
+      if (isGroup) {
+        if (users.length === 1) {
+          const groupName = users[0].permissionGroup?.name ?? 'Group';
+          return `Access restricted to ${groupName} group`;
+        } else {
+          return `Access restricted to ${users.length} groups`;
+        }
+      }
+
+      return '';
+    }
+
+    return (
+      <div
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={{
+          width: '100%',
+        }}
+      >
+        <>
+          <div
+            className={`page-menu-item ${darkMode && 'dark-theme'} ${
+              showPageOptions && isEditingPage ? 'is-selected' : ''
+            }`}
+            style={{
+              position: 'relative',
+              width: '100%',
+            }}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleOpenPopup(page?.type || 'page', page);
+            }}
+          >
+            {editingPageName && editingPage?.id === page?.id ? (
+              <>
+                {' '}
+                <div className="left">{icon()}</div>
+                <RenameInput
+                  page={page}
+                  updaterCallback={() => {
+                    toggleEditPageNameInput(false);
+                  }}
+                />
+              </>
+            ) : (
+              <>
+                {' '}
+                <div ref={optionBtnRef} className="left" data-cy={`pages-name-${page.name.toLowerCase()}`}>
+                  {icon()}
+                  <OverflowTooltip childrenClassName="page-name" style={{ ...computedStyles?.text, maxWidth: '159px' }}>
+                    {page.name}
+                  </OverflowTooltip>
+                  <span className="meta-text" style={{ marginLeft: '6px' }}>
+                    {PAGE_TYPES[page?.type]}
+                  </span>
+                  <span className="color-slate09 meta-text d-flex align-items-center justify-content-center">
+                    {isHomePage && (
+                      <ToolTip message="Home page" placement="bottom">
+                        <div className=" d-flex align-items-center justify-content-center">
+                          <Home fill="var(--icons-default)" className="" width={16} height={16} />
+                        </div>
+                      </ToolTip>
+                    )}
+
+                    {isDisabled && (
+                      <ToolTip message="Disabled page" placement="bottom">
+                        <div className=" d-flex align-items-center justify-content-center">
+                          <Skip fill="var(--icons-default)" className="" width={16} height={16} viewBox="0 0 16 16" />
+                        </div>
+                      </ToolTip>
+                    )}
+                    {isHidden && !isDisabled && (
+                      <ToolTip
+                        message={page?.type !== PAGE_TYPES.default ? 'Hidden nav item' : 'Hidden page'}
+                        placement="bottom"
+                      >
+                        <div className=" d-flex align-items-center justify-content-center">
+                          <EyeDisable fill="var(--icons-default)" className="" width={16} height={16} />
+                        </div>
+                      </ToolTip>
+                    )}
+                    <div style={{ marginRight: 'auto' }}>
+                      {licenseValid && restricted && (
+                        <ToolTip message={getTooltip()}>
+                          <div className="d-flex">
+                            <SolidIcon width="16" name="lock" fill="var(--icons-default)" />
+                          </div>
+                        </ToolTip>
+                      )}
+                    </div>
+                  </span>
+                </div>
+                <div>
+                  {!shouldFreeze && (
+                    <div
+                      className={cx('action-btn-wrapper', {
+                        'options-opened': showPageOptions && editingPage?.id == page?.id,
+                      })}
+                    >
+                      <div onClick={handlePageSwitch} className="icon-btn">
+                        <ToolTip message="Go to page" placement="bottom">
+                          <div className=" d-flex align-items-center justify-content-center">
+                            <SolidIcon name="arrowright01" fill="var(--icons-strong)" />
+                          </div>
+                        </ToolTip>
+                      </div>
+                      <div
+                        ref={moreBtnRef}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          setEditingPage(page);
+                          toggleShowPageOptions(true);
+                          setNewPagePopupConfig({ show: false, mode: null, type: null });
+                          setShowEditPopover(false);
+                        }}
+                        className="icon-btn"
+                      >
+                        <SolidIcon name="morevertical01" fill="var(--icons-strong)" width="12" viewBox="0 0 12 12" />
+                      </div>
+
+                      <Overlay
+                        target={moreBtnRef.current}
+                        show={showPageOptions && isEditingPage}
+                        placement="bottom-end"
+                        rootClose
+                        modifiers={[
+                          {
+                            name: 'preventOverflow',
+                            options: {
+                              boundary: 'viewport',
+                            },
+                          },
+                        ]}
+                        onHide={() => {
+                          setEditingPage(null);
+                          toggleShowPageOptions(false);
+                        }}
+                      >
+                        <Popover style={{ zIndex: '99999', position: 'absolute' }} id="edit-page-popover">
+                          <div className="menu-options mb-0">
+                            <PageOptions
+                              text="Edit page details"
+                              icon="editable"
+                              darkMode={darkMode}
+                              onClick={(e) => {
+                                handleOpenPopup(page?.type || 'page', page);
+                              }}
+                            />
+                            {page?.type === 'default' && (
+                              <PageOptions
+                                text="Mark home"
+                                icon="home"
+                                darkMode={darkMode}
+                                disabled={isHomePage}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                  markAsHomePage(page?.id, moduleId);
+                                }}
+                              />
+                            )}
+                            <PageOptions
+                              text="Duplicate page"
+                              icon="copy"
+                              darkMode={darkMode}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                toggleShowPageOptions(false);
+
+                                clonePage(page?.id);
+                              }}
+                            />
+                            <PageOptions
+                              text="Delete page"
+                              icon="trash"
+                              darkMode={darkMode}
+                              disabled={isHomePage}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                toggleShowPageOptions(false);
+                                openPageEditPopover(page);
+                                toggleDeleteConfirmationModal(true);
+                              }}
+                            />
+                            <PageOptions
+                              text={
+                                <ToolTip
+                                  message={'Page permissions are available only in paid plans'}
+                                  placement="right"
+                                  show={!licenseValid}
+                                >
+                                  <div className="d-flex align-items-center">
+                                    <div>Page permission</div>
+                                    {!licenseValid && <SolidIcon name="enterprisecrown" />}
+                                  </div>
+                                </ToolTip>
+                              }
+                              icon="lock"
+                              darkMode={darkMode}
+                              disabled={isHomePage}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                toggleShowPageOptions(false);
+                                togglePagePermissionModal(true);
+                              }}
+                            />
+                          </div>
+                        </Popover>
+                      </Overlay>
+
+                      <Overlay
+                        target={optionBtnRef.current}
+                        show={showEditPopover && newPagePopupConfig?.mode == 'edit' && isEditingPage}
+                        placement="left-start"
+                        rootClose
+                        onHide={() => {
+                          setEditingPage(null);
+                          setNewPagePopupConfig({ show: false, mode: null, type: null });
+                          toggleShowPageOptions(false);
+                          setShowEditPopover(false);
+                        }}
+                      >
+                        <AddEditPagePopup darkMode={darkMode} />
+                      </Overlay>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </>
+      </div>
+    );
+  })
+);
+
+export const AddingPageHandler = ({ darkMode }) => {
+  const toggleShowAddNewPageInput = useStore((state) => state.toggleShowAddNewPageInput);
+  const addNewPage = useStore((state) => state.addNewPage);
+  const isPageGroup = useStore((state) => state.isPageGroup);
+  const handleAddingNewPage = (pageName) => {
+    if (pageName.trim().length === 0) {
+      toast(`${isPageGroup ? 'Page group' : 'Page'} name should have at least 1 character`, {
+        icon: '⚠️',
+      });
+    } else if (pageName.trim().length > 32) {
+      toast(`${isPageGroup ? 'Page group' : 'Page'} name cannot exceed 32 characters`, {
+        icon: '⚠️',
+      });
+    } else {
+      addNewPage(pageName, _.kebabCase(pageName.toLowerCase()), isPageGroup);
+    }
+    toggleShowAddNewPageInput(false);
+  };
+
+  return (
+    <div role="button" style={{ marginTop: '2px' }}>
+      <div>
+        <input
+          type="text"
+          className={`form-control page-name-input color-slate12 ${darkMode && 'bg-transparent'}`}
+          autoFocus
+          onBlur={(event) => {
+            const name = event.target.value;
+            handleAddingNewPage(name);
+            event.stopPropagation();
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              const name = event.target.value;
+              handleAddingNewPage(name);
+              event.stopPropagation();
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItemGhost.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItemGhost.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/PageMenuItemGhost.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageMenuItemGhost.jsx
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageOptions.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageOptions.jsx
new file mode 100644
index 0000000000..1e8298c5a4
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PageOptions.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button } from '@/components/ui/Button/Button';
+
+const PageOptions = ({ type, text, icon, onClick, darkMode, disabled }) => {
+  return (
+    <div className="field">
+      <Button
+        disabled={disabled}
+        onClick={onClick}
+        style={{ height: '30px', fontWeight: '400' }}
+        leadingIcon={icon}
+        variant="secondary"
+      >
+        {text}
+      </Button>
+    </div>
+  );
+};
+
+export default PageOptions;
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PagePermission.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PagePermission.jsx
new file mode 100644
index 0000000000..160a941ebe
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PagePermission.jsx
@@ -0,0 +1,509 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { components } from 'react-select';
+import ModalBase from '@/_ui/Modal';
+import Select from '@/_ui/Select';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import useStore from '@/AppBuilder/_stores/store';
+import { appPermissionService } from '@/_services';
+import { ConfirmDialog } from '@/_components';
+import toast from 'react-hot-toast';
+import Spinner from '@/_ui/Spinner';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+
+const PERMISSION_TYPES = {
+  single: 'SINGLE',
+  group: 'GROUP',
+  all: 'ALL',
+};
+
+export default function PagePermission({ darkMode }) {
+  const { moduleId } = useModuleContext();
+  const showPagePermissionModal = useStore((state) => state.showPagePermissionModal);
+  const togglePagePermissionModal = useStore((state) => state.togglePagePermissionModal);
+  const editingPage = useStore((state) => state.editingPage);
+  const appId = useStore((state) => state.appStore.modules[moduleId].app.appId);
+  const selectedUserGroups = useStore((state) => state.selectedUserGroups);
+  const setSelectedUserGroups = useStore((state) => state.setSelectedUserGroups);
+  const selectedUsers = useStore((state) => state.selectedUsers);
+  const setSelectedUsers = useStore((state) => state.setSelectedUsers);
+  const pagePermission = useStore((state) => state.pagePermission);
+  const setPagePermission = useStore((state) => state.setPagePermission);
+  const updatePageWithPermissions = useStore((state) => state.updatePageWithPermissions);
+
+  const [pagePermissionType, setPagePermissionType] = useState('all');
+  const [showUserGroupSelect, toggleUserGroupSelect] = useState(false);
+  const [showUsersSelect, toggleUsersSelect] = useState(false);
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isPermissionsLoading, setPermissionsLoading] = useState(true);
+  const [initialSelectedGroups, setInitialSelectedGroups] = useState([]);
+  const [initialSelectedUsers, setInitialSelectedUsers] = useState([]);
+  const [initalPagePermissionType, setInitialPagePermissionType] = useState('all');
+
+  useEffect(() => {
+    if (!showPagePermissionModal) return;
+    const fetchPagePermission = () => {
+      appPermissionService.getPagePermission(appId, editingPage?.id).then((data) => {
+        if (data) {
+          if (data[0] && data[0]?.type === PERMISSION_TYPES.group) {
+            const groups =
+              data[0]?.groups?.map((user) => ({
+                label: user?.permissionGroup?.name,
+                value: user?.permissionGroup?.id,
+                count: user?.permissionGroup?.count,
+              })) ?? [];
+            setPagePermissionType(data[0]?.type?.toLowerCase());
+            setInitialPagePermissionType(data[0]?.type?.toLowerCase());
+            setPagePermission(data);
+            toggleUserGroupSelect(true);
+            setInitialSelectedGroups(groups);
+            data?.length && setSelectedUserGroups(groups);
+          } else if (data[0] && data[0]?.type === PERMISSION_TYPES.single) {
+            const users =
+              data[0]?.users?.map(({ user }) => {
+                const firstName = user.firstName || '';
+                const lastName = user.lastName || '';
+                return {
+                  value: user.id,
+                  label: `${firstName} ${lastName}`.trim(),
+                  email: user.email,
+                  initials: `${firstName[0] || ''}${lastName[0] || ''}`.toUpperCase(),
+                };
+              }) ?? [];
+            setPagePermissionType(data[0]?.type?.toLowerCase());
+            setInitialPagePermissionType(data[0]?.type?.toLowerCase());
+            setPagePermission(data);
+            toggleUsersSelect(true);
+            setInitialSelectedUsers(users);
+            data?.length && setSelectedUsers(users);
+          }
+        }
+        setPermissionsLoading(false);
+      });
+    };
+    fetchPagePermission();
+  }, [showPagePermissionModal]);
+
+  const isSelectionUnchanged = useMemo(() => {
+    if (pagePermissionType === 'group') {
+      if (!selectedUserGroups.length) return true;
+      const current = selectedUserGroups
+        .map((g) => g.value)
+        .sort()
+        .join(',');
+      const initial = initialSelectedGroups
+        .map((g) => g.value)
+        .sort()
+        .join(',');
+      return current === initial;
+    } else if (pagePermissionType === 'single') {
+      if (!selectedUsers.length) return true;
+      const current = selectedUsers
+        .map((u) => u.value)
+        .sort()
+        .join(',');
+      const initial = initialSelectedUsers
+        .map((u) => u.value)
+        .sort()
+        .join(',');
+      return current === initial;
+    } else {
+      if (!pagePermission?.length) {
+        return true;
+      } else {
+        return initalPagePermissionType == pagePermissionType;
+      }
+    }
+  }, [
+    pagePermissionType,
+    selectedUserGroups,
+    initialSelectedGroups,
+    selectedUsers,
+    initialSelectedUsers,
+    initalPagePermissionType,
+  ]);
+
+  const permissionTypeOptions = useMemo(
+    () => [
+      {
+        label: 'All users with access to the app',
+        value: 'all',
+        icon: 'globe',
+      },
+      {
+        label: 'Users',
+        value: 'single',
+        icon: 'user',
+      },
+      {
+        label: 'User groups',
+        value: 'group',
+        icon: 'usergroup',
+      },
+    ],
+    []
+  );
+  const handlePermissionTypeChange = (value) => {
+    switch (value) {
+      case 'group': {
+        toggleUserGroupSelect(true);
+        toggleUsersSelect(false);
+        setPagePermissionType('group');
+        break;
+      }
+      case 'single': {
+        toggleUsersSelect(true);
+        toggleUserGroupSelect(false);
+        setPagePermissionType('single');
+        break;
+      }
+      case 'all': {
+        toggleUsersSelect(false);
+        toggleUserGroupSelect(false);
+        setPagePermissionType('all');
+      }
+    }
+  };
+
+  const handlePagePermissionModalClose = () => {
+    togglePagePermissionModal(false);
+    toggleUserGroupSelect(false);
+    toggleUsersSelect(false);
+    setPagePermissionType('all');
+    setPagePermission(null);
+    setSelectedUsers([]);
+    setSelectedUserGroups([]);
+    setInitialSelectedGroups([]);
+    setInitialSelectedUsers([]);
+  };
+
+  const createPagePermission = () => {
+    const body = {
+      pageId: editingPage?.id,
+      type: PERMISSION_TYPES[pagePermissionType],
+      ...(pagePermissionType === 'group'
+        ? { groups: selectedUserGroups.map((group) => group?.value) }
+        : { users: selectedUsers.map((user) => user?.value) }),
+    };
+    setIsLoading(true);
+    appPermissionService
+      .createPagePermission(appId, editingPage?.id, body)
+      .then((data) => {
+        toast.success('Permission successfully created!', {
+          className: 'text-nowrap w-auto mw-100',
+        });
+        updatePageWithPermissions(editingPage?.id, data);
+      })
+      .catch(() => {
+        toast.error('Permission could not be created. Please try again!', {
+          className: 'text-nowrap w-auto mw-100',
+        });
+      })
+      .finally(() => {
+        setIsLoading(false);
+        handlePagePermissionModalClose();
+      });
+  };
+
+  const updatePagePermission = () => {
+    const body = {
+      pageId: editingPage?.id,
+      type: PERMISSION_TYPES[pagePermissionType],
+      ...(pagePermissionType === 'group'
+        ? { groups: selectedUserGroups.map((group) => group?.value) }
+        : { users: selectedUsers.map((user) => user?.value) }),
+    };
+    setIsLoading(true);
+    appPermissionService
+      .updatePagePermission(appId, editingPage?.id, body)
+      .then((data) => {
+        toast.success('Permission successfully updated!', {
+          className: 'text-nowrap w-auto mw-100',
+        });
+        updatePageWithPermissions(editingPage?.id, data);
+      })
+      .catch(() => {
+        toast.error('Permission could not be updated. Please try again!', {
+          className: 'text-nowrap w-auto mw-100',
+        });
+      })
+      .finally(() => {
+        setIsLoading(false);
+        handlePagePermissionModalClose();
+      });
+  };
+
+  const deletePagePermission = () => {
+    setIsLoading(true);
+    appPermissionService
+      .deletePagePermission(appId, editingPage?.id)
+      .then((data) => {
+        toast.success('Permission successfully deleted!', {
+          className: 'text-nowrap w-auto mw-100',
+        });
+        updatePageWithPermissions(editingPage?.id, []);
+      })
+      .catch(() => {
+        toast.error('Permission could not be deleted. Please try again!', {
+          className: 'text-nowrap w-auto mw-100',
+        });
+        setShowConfirmDelete(false);
+        togglePagePermissionModal(true);
+      })
+      .finally(() => {
+        setIsLoading(false);
+        setShowConfirmDelete(false);
+      });
+  };
+
+  const renderPermissionTypeOptions = ({ label, icon }) => {
+    return (
+      <div className="row permission-type-select" style={{ padding: '0px 8px' }}>
+        <div className="col-auto">
+          <SolidIcon width="20" name={icon} />
+        </div>
+        <div className="col">
+          <span>{label}</span>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <ModalBase
+        title={
+          <div className="my-3">
+            <span className="tj-text-md font-weight-500">Page permission</span>
+          </div>
+        }
+        handleConfirm={!pagePermission ? createPagePermission : updatePagePermission}
+        show={showPagePermissionModal}
+        isLoading={isLoading}
+        handleClose={handlePagePermissionModalClose}
+        confirmBtnProps={{
+          title: pagePermission
+            ? 'Save changes'
+            : pagePermissionType === 'all'
+            ? 'Default permission'
+            : 'Create permission',
+          disabled: isPermissionsLoading || isSelectionUnchanged,
+          tooltipMessage: '',
+          leftIcon: pagePermission && 'save',
+          className: 'action-btn-page-permission',
+        }}
+        darkMode={darkMode}
+        className="page-permissions-modal"
+      >
+        <div className="page-permission">
+          {isPermissionsLoading ? (
+            <div className="spinner-center">
+              <Spinner />
+            </div>
+          ) : (
+            <>
+              <div className="info-container">
+                <div className="col-md-1 info-btn">
+                  <SolidIcon name="informationcircle" fill="#3E63DD" />
+                </div>
+                <div className="col-md-11">
+                  <div className="message">
+                    <p style={{ lineHeight: '18px' }}>
+                      Only selected users will be allowed to access this page. Read docs to know more.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <label className="form-label">Type</label>
+              <Select
+                options={permissionTypeOptions}
+                value={pagePermissionType}
+                width={'100%'}
+                customOption={renderPermissionTypeOptions}
+                useMenuPortal={false}
+                onChange={handlePermissionTypeChange}
+              />
+              {showUserGroupSelect && <UserGroupSelect />}
+              {showUsersSelect && <UserSelect />}
+            </>
+          )}
+        </div>
+      </ModalBase>
+      {showConfirmDelete && (
+        <ConfirmDialog
+          title={'Delete page permission'}
+          show={showConfirmDelete}
+          message={
+            'Deleting the permission will allow all users with access to the app to view this page. Are you sure you want to continue?'
+          }
+          confirmButtonLoading={isLoading}
+          onConfirm={() => deletePagePermission()}
+          onCancel={() => setShowConfirmDelete(false)}
+          confirmButtonText={'Delete'}
+          darkMode={darkMode}
+          confirmButtonIcon={'trash'}
+          confirmButtonIconWidth="20"
+          confirmButtonIconFill={'var(--slate3)'}
+        />
+      )}
+    </>
+  );
+}
+
+const UserGroupSelect = () => {
+  const { moduleId } = useModuleContext();
+  const appId = useStore((state) => state.appStore.modules[moduleId].app.appId);
+  const selectedUserGroups = useStore((state) => state.selectedUserGroups);
+  const setSelectedUserGroups = useStore((state) => state.setSelectedUserGroups);
+  const [userGroups, setUserGroups] = useState([]);
+  useEffect(() => {
+    const fetchUserGroups = () => {
+      appPermissionService.getUsers(appId, 'user-groups').then((data) => {
+        if (data?.length) {
+          const groups = [];
+          data.map((group) => {
+            groups.push({ value: group.id, label: group.name, count: group.count });
+          });
+          setUserGroups(groups);
+        }
+      });
+    };
+    fetchUserGroups();
+  }, []);
+
+  const CustomOption = (props) => {
+    const { data, isFocused, isSelected } = props;
+
+    return (
+      <components.Option {...props}>
+        <div className={`user-select-option ${isFocused ? 'focused' : ''}`}>
+          <input
+            style={{ width: '1.2rem', height: '1.2rem', borderRadius: '6px !important' }}
+            type={'checkbox'}
+            className="form-check-input"
+            checked={isSelected}
+          />
+          <div className="group-info">
+            <div className="name">{data.label}</div>
+            <div className="count">{data.count} users</div>
+          </div>
+        </div>
+      </components.Option>
+    );
+  };
+
+  return (
+    <div>
+      <label className="form-label mt-3">User groups</label>
+      <Select
+        isMulti={true}
+        options={userGroups}
+        value={selectedUserGroups}
+        width={'100%'}
+        closeMenuOnSelect={false}
+        components={{ Option: CustomOption, MenuList: CustomMenuList }}
+        useMenuPortal={false}
+        hideSelectedOptions={false}
+        onChange={(groups) => setSelectedUserGroups(groups)}
+        info="Only user groups with access to this application can be selected"
+      />
+    </div>
+  );
+};
+
+const UserSelect = () => {
+  const { moduleId } = useModuleContext();
+  const appId = useStore((state) => state.appStore.modules[moduleId].app.appId);
+  const editingPage = useStore((state) => state.editingPage);
+  const selectedUsers = useStore((state) => state.selectedUsers);
+  const setSelectedUsers = useStore((state) => state.setSelectedUsers);
+  const [users, setUsers] = useState([]);
+  useEffect(() => {
+    const fetchUsers = () => {
+      appPermissionService.getUsers(appId, 'users').then((data) => {
+        if (data?.length) {
+          const users = [];
+          data.map((user) => {
+            const firstName = user.firstName || '';
+            const lastName = user.lastName || '';
+            users.push({
+              value: user.id,
+              label: `${firstName} ${lastName}`.trim(),
+              email: user.email,
+              initials: `${firstName[0] || ''}${lastName[0] || ''}`.toUpperCase(),
+            });
+          });
+          setUsers(users);
+        }
+      });
+    };
+    fetchUsers();
+  }, []);
+
+  const CustomOption = (props) => {
+    const { data, isFocused, isSelected } = props;
+    return (
+      <components.Option {...props}>
+        <div className={`user-select-option ${isFocused ? 'focused' : ''}`}>
+          <input
+            style={{ width: '1.2rem', height: '1.2rem', borderRadius: '6px !important' }}
+            type={'checkbox'}
+            className="form-check-input"
+            checked={isSelected}
+          />
+          <div className="avatar">{data.initials}</div>
+          <div className="user-info">
+            <div className="name">{data.label}</div>
+            <div className="email">{data.email}</div>
+          </div>
+        </div>
+      </components.Option>
+    );
+  };
+
+  const selectStyles = {
+    option: (base) => ({
+      ...base,
+      padding: '8px 0px',
+    }),
+  };
+  return (
+    <div>
+      <label className="form-label mt-3">Users</label>
+      <Select
+        isMulti={true}
+        options={users}
+        value={selectedUsers}
+        width={'100%'}
+        useMenuPortal={false}
+        closeMenuOnSelect={false}
+        components={{ Option: CustomOption, MenuList: CustomMenuList }}
+        styles={selectStyles}
+        hideSelectedOptions={false}
+        info="Only user with access to this application can be selected"
+        onChange={(users) => {
+          setSelectedUsers(users);
+        }}
+      />
+    </div>
+  );
+};
+
+const CustomMenuList = (props) => {
+  const { info } = props.selectProps;
+  return (
+    <components.MenuList {...props}>
+      <div className="info-container" style={{ marginLeft: '12px', marginRight: '12px', marginTop: '8px' }}>
+        <div className="col-md-1 info-btn">
+          <SolidIcon name="informationcircle" fill="#3E63DD" />
+        </div>
+        <div className="col-md-11">
+          <div className="message">
+            <p style={{ lineHeight: '18px' }}>{info}</p>
+          </div>
+        </div>
+      </div>
+      {props.children}
+    </components.MenuList>
+  );
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PagesSidebarNavigation.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PagesSidebarNavigation.jsx
new file mode 100644
index 0000000000..fd75cf1687
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/PagesSidebarNavigation.jsx
@@ -0,0 +1,426 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import _ from 'lodash';
+import cx from 'classnames';
+import * as Icons from '@tabler/icons-react';
+// eslint-disable-next-line import/no-unresolved
+import FolderList from '@/_ui/FolderList/FolderList';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import useStore from '@/AppBuilder/_stores/store';
+import { APP_HEADER_HEIGHT } from '../../../AppCanvas/appCanvasConstants';
+import OverflowTooltip from '@/_components/OverflowTooltip';
+import AppLogo from '@/_components/AppLogo';
+import { DarkModeToggle, ToolTip } from '@/_components';
+import { RenderPageAndPageGroup } from './PageGroup';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import toast from 'react-hot-toast';
+import { shallow } from 'zustand/shallow';
+import { resolveReferences } from '@/_helpers/utils';
+// import useSidebarMargin from './useSidebarMargin';
+
+export const PagesSidebarNavigation = ({
+  isMobileDevice,
+  pages,
+  currentPageId,
+  switchPage,
+  darkMode,
+  showHeader,
+  isSidebarPinned,
+  toggleSidebarPinned,
+  height,
+  switchDarkMode,
+}) => {
+  const { moduleId } = useModuleContext();
+  const { definition: { styles = {}, properties = {} } = {} } = useStore((state) => state.pageSettings) || {};
+  const selectedVersionName = useStore((state) => state.selectedVersion?.name);
+  const currentMode = useStore((state) => state.currentMode);
+  const selectedEnvironmentName = useStore((state) => state.selectedEnvironment?.name);
+  const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
+  const license = useStore((state) => state.license);
+  const setCurrentPageHandle = useStore((state) => state.setCurrentPageHandle);
+  const appName = useStore((state) => state.appStore.modules[moduleId].app.appName);
+  const isSidebarOpen = useStore((state) => state.isSidebarOpen);
+  const isRightSidebarOpen = useStore((state) => state.isRightSidebarOpen, shallow);
+
+  const navRef = useRef(null);
+  const moreRef = useRef(null);
+  const linkRefs = useRef({});
+  const observer = useRef(null);
+  const measurementContainerRef = useRef(null);
+
+  const [overflowLinks, setOverflowLinks] = useState([]);
+  const [visibleLinks, setVisibleLinks] = useState(pages);
+  const [showPopover, setShowPopover] = useState(false);
+
+  const { disableMenu, hideHeader, position, style, collapsable, name, hideLogo } = properties ?? {};
+
+  const calculateOverflow = useCallback(() => {
+    if (!navRef.current || !measurementContainerRef.current || pages.length === 0) {
+      return;
+    }
+
+    const containerWidth = navRef.current.offsetWidth;
+    let currentWidth = 0;
+    const tempVisible = [];
+    const tempOverflow = [];
+
+    const measuredNavItems = Array.from(measurementContainerRef.current.children);
+    const MORE_BUTTON_WIDTH_ESTIMATE = 250;
+
+    for (let i = 0; i < pages.length; i++) {
+      const link = pages[i];
+      const correspondingMeasuredElement = measuredNavItems.find((item) => item.dataset.id === String(link.id));
+
+      if (!correspondingMeasuredElement) {
+        continue;
+      }
+
+      const itemWidth = correspondingMeasuredElement.offsetWidth;
+
+      const spaceNeededForMoreButton = i < pages.length - 1 || tempOverflow.length > 0 ? MORE_BUTTON_WIDTH_ESTIMATE : 0;
+
+      if (currentWidth + itemWidth <= containerWidth - spaceNeededForMoreButton) {
+        tempVisible.push(link);
+        currentWidth += itemWidth;
+      } else {
+        tempOverflow.push(link);
+      }
+    }
+
+    if (tempOverflow.length > 0 && currentWidth + MORE_BUTTON_WIDTH_ESTIMATE > containerWidth) {
+      if (tempVisible.length > 0) {
+        const lastVisible = tempVisible.pop();
+        tempOverflow.unshift(lastVisible);
+        currentWidth -= lastVisible.offsetWidth;
+      }
+    }
+
+    setVisibleLinks(tempVisible);
+    setOverflowLinks(tempOverflow);
+  }, [pages, position, style]);
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      requestAnimationFrame(() => {
+        calculateOverflow();
+      });
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [pages, calculateOverflow, position]);
+
+  if (isMobileDevice) {
+    return null;
+  }
+  const computeStyles = (isSelected, isHovered) => {
+    const baseStyles = {
+      pill: {
+        borderRadius: `${styles.pillRadius.value}px`,
+      },
+      icon: {
+        color: !styles.iconColor.isDefault && styles.iconColor.value,
+        fill: !styles.iconColor.isDefault && styles.iconColor.value,
+      },
+    };
+
+    switch (true) {
+      case isSelected: {
+        return {
+          ...baseStyles,
+          text: {
+            color: !styles.selectedTextColor.isDefault && styles.selectedTextColor.value,
+          },
+          icon: {
+            stroke: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
+            color: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
+            fill: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
+          },
+          pill: {
+            background: !styles.pillSelectedBackgroundColor.isDefault && styles.pillSelectedBackgroundColor.value,
+            ...baseStyles.pill,
+          },
+        };
+      }
+      case isHovered: {
+        return {
+          ...baseStyles,
+          pill: {
+            background: !styles.pillHoverBackgroundColor.isDefault && styles.pillHoverBackgroundColor.value,
+            ...baseStyles.pill,
+          },
+        };
+      }
+      default: {
+        return {
+          text: {
+            color: !styles.textColor.isDefault && styles.textColor.value,
+          },
+          icon: {
+            color: !styles.iconColor.isDefault && styles.iconColor.value,
+            fill: !styles.iconColor.isDefault && styles.iconColor.value,
+          },
+        };
+      }
+    }
+  };
+
+  const labelStyle = {
+    icon: {
+      hidden: properties?.style === 'text',
+    },
+    label: {
+      hidden:
+        properties?.style === 'icon' || (style === 'texticon' && !isSidebarPinned && properties?.position != 'top'),
+    },
+  };
+
+  const getAbsoluteUrl = (url) => {
+    if (!url) return '';
+
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      return url;
+    }
+    return `https://${url}`;
+  };
+
+  const switchPageWrapper = (page) => {
+    if (page?.type === 'url') {
+      if (page?.url) {
+        const finalUrl = getAbsoluteUrl(page.url);
+        if (finalUrl) {
+          if (page.openIn === 'new_tab') {
+            window.open(finalUrl, '_blank');
+          } else {
+            window.location.href = finalUrl;
+          }
+        }
+      } else {
+        toast.error('No URL provied');
+        return;
+      }
+      return;
+    }
+
+    if (page?.type === 'app') {
+      if (page?.appId) {
+        const baseUrl = `${window.public_config?.TOOLJET_HOST}/applications/${page.appId}`;
+        if (page.openIn === 'new_tab') {
+          window.open(baseUrl, '_blank');
+        } else {
+          window.location.href = baseUrl;
+        }
+      } else {
+        toast.error('No app selected');
+        return;
+      }
+      return;
+    }
+
+    if (currentPageId === page?.id) {
+      return;
+    }
+    const queryParams = {
+      version: selectedVersionName,
+      env: selectedEnvironmentName,
+    };
+    switchPage(
+      page?.id,
+      pages.find((p) => page.id === p?.id)?.handle,
+      currentMode === 'view' ? Object.entries(queryParams) : []
+    );
+    currentMode !== 'view' && setCurrentPageHandle(page.handle);
+  };
+
+  const switchToHomePage = () => {
+    const page = pages.find((p) => p.id === homePageId);
+
+    const queryParams = {
+      version: selectedVersionName,
+      env: selectedEnvironmentName,
+    };
+
+    switchPage(
+      page?.id,
+      pages.find((p) => page.id === p?.id)?.handle,
+      currentMode === 'view' ? Object.entries(queryParams) : []
+    );
+  };
+
+  const isLicensed =
+    !_.get(license, 'featureAccess.licenseStatus.isExpired', true) &&
+    _.get(license, 'featureAccess.licenseStatus.isLicenseValid', false);
+
+  const isPinnedWithLabel = isSidebarPinned && !labelStyle?.label?.hidden;
+  const isUnpinnedInEdit = !isSidebarPinned && currentMode !== 'view';
+  const isTopPositioned = position === 'top';
+  const labelHidden = labelStyle?.label?.hidden;
+  const sidebarCollapsed = !isSidebarPinned;
+  const isEditing = currentMode === 'edit';
+  const headerHidden = isLicensed ? hideHeader : false;
+  const isPagesSidebarHidden = resolveReferences(disableMenu?.value);
+
+  return (
+    <div>
+      <button
+        ref={measurementContainerRef}
+        style={{
+          position: 'absolute',
+          top: '-9999px',
+          left: '-9999px',
+          visibility: 'hidden',
+          whiteSpace: 'nowrap',
+          display: 'flex',
+          padding: '0px 0px',
+          className: 'tj-list-item page-name',
+        }}
+      >
+        {pages
+          // .filter((p) => !p.pageGroupId || p.isPageGroup)
+          .map((link) => (
+            <div
+              style={{ padding: `0px ${style === 'texticon' ? '22px' : '10px'}` }}
+              key={`measure-${link.id}`}
+              data-id={link.id}
+            >
+              {link?.name}
+            </div>
+          ))}
+      </button>
+      <div
+        ref={navRef}
+        className={cx('navigation-area', {
+          close: !isSidebarPinned && properties?.collapsable && style !== 'text' && position === 'side',
+          // 'sidebar-overlay': !isSidebarPinned && properties?.collapsable,
+          'icon-only': style === 'icon' || (style === 'texticon' && !isSidebarPinned && position === 'side'),
+          'position-top': position === 'top',
+          'text-only': style === 'text',
+          'right-sidebar-open': isRightSidebarOpen && position === 'top',
+          'left-sidebar-open': isSidebarOpen && position === 'top',
+        })}
+        style={{
+          width: 226,
+          position: 'sticky',
+          // height: `calc(100% - ${showHeader ? APP_HEADER_HEIGHT : 0}px)`,
+          // height,
+          height: '100%',
+          // top: showHeader ? '47px' : '0px',
+          top: '4px',
+          bottom: '0px',
+          background: !styles?.backgroundColor?.isDefault && styles?.backgroundColor?.value,
+          border: `${styles?.pillRadius?.value}px`,
+          borderRight: !styles?.borderColor?.isDefault ? `1px solid ${styles?.borderColor?.value}` : '',
+          borderTop: !styles?.borderColor?.isDefault ? `1px solid ${styles?.borderColor?.value}` : '',
+          overflow: 'scroll',
+          boxShadow: 'var(--elevation-100-box-shadow)',
+          scrollbarWidth: 'none',
+          // ...(position === 'side' && isSidebarOpen ? { marginLeft: isSidebarPinned ? '574px' : '392px' } : {}),
+        }}
+      >
+        <div className="position-relative">
+          <div
+            style={{
+              marginRight: headerHidden && position == 'top' && '0px',
+            }}
+            className="app-name"
+          >
+            {!hideLogo && (
+              <div onClick={switchToHomePage} className="cursor-pointer">
+                <AppLogo isLoadingFromHeader={false} />
+              </div>
+            )}
+            {!headerHidden && ((isPinnedWithLabel && !labelHidden) || position === 'top') && (
+              <span>{name?.trim() ? name : appName}</span>
+            )}
+            {collapsable && !isTopPositioned && style == 'texticon' && position === 'side' && (
+              <div onClick={toggleSidebarPinned} className="icon-btn collapse-icon ">
+                <SolidIcon
+                  className="cursor-pointer"
+                  fill="var(--icon-strong)"
+                  width="14px"
+                  name={isSidebarPinned ? 'remove03' : 'menu'}
+                />
+              </div>
+            )}
+          </div>
+          {isLicensed && !isPagesSidebarHidden ? (
+            <RenderPageAndPageGroup
+              switchPageWrapper={switchPageWrapper}
+              pages={pages}
+              labelStyle={labelStyle}
+              computeStyles={computeStyles}
+              darkMode={darkMode}
+              switchPage={switchPage}
+              linkRefs={linkRefs}
+              visibleLinks={visibleLinks}
+              overflowLinks={overflowLinks}
+              moreBtnRef={moreRef}
+              navRef={navRef}
+              position={position}
+              isSidebarPinned={isSidebarPinned}
+            />
+          ) : (
+            !isPagesSidebarHidden && (
+              <div className={cx('page-handler-wrapper', { 'dark-theme': darkMode })}>
+                {pages.map((page) => {
+                  const isHomePage = page.id === homePageId;
+                  const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
+                  const IconElement = (props) => {
+                    // eslint-disable-next-line import/namespace
+                    const Icon = Icons?.[iconName] ?? Icons?.['IconFileDescription'];
+
+                    if (!isSidebarPinned || labelStyle?.label?.hidden) {
+                      return (
+                        <ToolTip message={page?.name} placement={'right'}>
+                          <Icon {...props} />
+                        </ToolTip>
+                      );
+                    }
+
+                    return <Icon {...props} />;
+                  };
+                  return page.hidden || page.disabled || page?.restricted ? null : (
+                    <FolderList
+                      key={page.handle}
+                      onClick={() => switchPageWrapper(page)}
+                      selectedItem={page?.id === currentPageId}
+                      CustomIcon={!labelStyle?.icon?.hidden && IconElement}
+                      customStyles={computeStyles}
+                      darkMode={darkMode}
+                    >
+                      {!labelStyle?.label?.hidden && (
+                        <span data-cy={`pages-name-${String(page?.name).toLowerCase()}`}>
+                          <OverflowTooltip
+                            style={{ width: '110px', position: 'relative' }}
+                            childrenClassName={'page-name'}
+                          >
+                            {page.name}
+                          </OverflowTooltip>
+                        </span>
+                      )}
+                    </FolderList>
+                  );
+                })}
+              </div>
+            )
+          )}
+        </div>
+        <div className="d-flex align-items-center page-dark-mode-btn-wrapper">
+          <DarkModeToggle
+            toggleForCanvas={true}
+            switchDarkMode={switchDarkMode}
+            darkMode={darkMode}
+            tooltipPlacement="right"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PagesSidebarNavigation;
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/RenameInput.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/RenameInput.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/RenameInput.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/RenameInput.jsx
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/SettingsModal.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/SettingsModal.jsx
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/SettingsModal.jsx
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/SettingsModal.jsx
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/SortableTree.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/SortableTree.js
similarity index 99%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/SortableTree.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/SortableTree.js
index 0406f518cd..c84d0f041d 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/SortableTree.js
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/SortableTree.js
@@ -50,7 +50,7 @@ const dropAnimationConfig = {
   },
 };
 
-export function SortableTree({ collapsible, indicator = false, indentationWidth = 15, darkMode }) {
+export function SortableTree({ collapsible, indicator = false, indentationWidth = 15, darkMode, treeRef }) {
   const reorderPages = useStore((state) => state.reorderPages);
   const debouncedReorderPages = _.debounce(reorderPages, 500);
 
@@ -157,6 +157,7 @@ export function SortableTree({ collapsible, indicator = false, indentationWidth
           return (
             <SortableTreeItem
               key={id}
+              treeRef={treeRef}
               overId={overId}
               pageGroupToHighlight={pageGroupToHighlight}
               disabledBorder={false}
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/SortableTreeItem.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/SortableTreeItem.js
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/SortableTreeItem.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/SortableTreeItem.js
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/TreeItem.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/TreeItem.js
similarity index 89%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/TreeItem.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/TreeItem.js
index 26dbaf1186..6f71dbefa6 100644
--- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/TreeItem.js
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/TreeItem.js
@@ -59,13 +59,13 @@ export const TreeItem = forwardRef(
             ...style,
             width: '100%',
             ...(value?.pageGroupId && {
-              borderLeft: '1px solid var(--slate7)',
-              padding: '0 0 0 6px',
+              borderLeft: '1px dashed var(--icon-weak)',
+              padding: '0 0 0 15px',
             }),
           }}
         >
           {!value?.isPageGroup ? (
-            <PageMenuItem darkMode={darkMode} page={value} />
+            <PageMenuItem darkMode={darkMode} page={value} treeRef={props?.treeRef} />
           ) : (
             <PageGroupItem
               darkMode={darkMode}
@@ -73,6 +73,7 @@ export const TreeItem = forwardRef(
               collapsed={collapsed}
               onCollapse={onCollapse}
               page={value}
+              treeRef={props?.treeRef}
             />
           )}
         </div>
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/TreeItem.module.css b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/TreeItem.module.css
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/TreeItem.module.css
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/TreeItem.module.css
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/index.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/index.js
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/TreeItem/index.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/TreeItem/index.js
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/index.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/index.js
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/components/index.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/components/index.js
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/keyboardCoordinates.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/keyboardCoordinates.js
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/keyboardCoordinates.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/keyboardCoordinates.js
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/utilities.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/utilities.js
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/Tree/utilities.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/Tree/utilities.js
diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/index.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/index.js
similarity index 100%
rename from frontend/src/AppBuilder/LeftSidebar/PageMenu/index.js
rename to frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/index.js
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/style.scss b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/style.scss
new file mode 100644
index 0000000000..218af45cf0
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageMenu/style.scss
@@ -0,0 +1,495 @@
+.PopoverContent {
+    &.page {
+        min-height: unset !important;
+    }
+}
+
+.page-handler.ghost{
+    background-color: #ECEEF0;
+    border-radius: 4px;
+    position: relative;
+    width: 100%;
+    opacity: 0.8;
+    &.dark-theme{
+        background-color: var(--slate4);
+    }
+}
+
+.edit-page-overlay-toggle {
+    opacity: 0;
+    transition: opacity 0.1s;
+}
+
+.menu-item-drag-handle {
+    display: none;
+}
+
+.page-menu-icon {
+    display: block;
+}
+
+.page-menu-icon.rev {
+    display: none;
+}
+
+.page-menu-icon-padding {
+    padding-left: 16px;
+}
+
+.menu-item-drag-handle {
+    display: none !important;
+}
+
+.page-group-icon-text{
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: left;
+    color: var(--slate11);
+    position: relative;
+    top: -10px;
+    width: 194px;
+    margin-left: auto;
+}
+
+.page-handler {
+    .page-menu-item{
+        height:32px;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        padding: 7px 8px;
+        margin-top: 2px;
+        justify-content: space-between;
+        background-color: var(--interactive-default);
+        &.highlight {
+            border: 2px solid #3D63DC;
+        }
+
+        &.is-selected {
+            background-color: var(--interactive-selected) !important; 
+        }
+
+        &:hover {
+            background-color: var(--interactive-default);
+        }
+
+        &.page-group-item {
+            background-color: unset;
+            &:hover {
+                background-color: var(--interactive-default);
+            }
+            &:active {
+                background-color: var(--interactive-selected);
+            }
+        }
+        .page-group-actions {
+            transition: 0.2s ease;
+            opacity: 0;
+            gap: 2px;
+            display: flex;
+            width: unset !important;
+            height: unset !important;
+            button {
+                border-radius: var(--2, 4px);
+                border: 1px solid var(--border-default, #CCD1D5);
+                background: var(--button-secondary, #FFF);
+                width: 20px;
+                height: 20px;
+                padding: 0;
+                /* Elevations/000 */
+                box-shadow: 0px 1px 0px 0px var(--_-Dropshadow-000, rgba(0, 0, 0, 0.10));
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+        .meta-text{
+            color: var(--text-placeholder);
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 18px;
+            margin-left: 8px;
+            gap: 6px;
+        }
+        button.edit-page-overlay-toggle{
+            opacity: 0;
+        }
+        &:hover{
+            background-color: var(--interactive-hover);
+            button.edit-page-overlay-toggle{
+                opacity: 1;
+            }
+            .page-group-actions {
+                opacity: 1;
+            }
+            &.dark-theme {
+                &:hover {
+                    background-color: var(--slate4);
+                }
+            }
+        }
+        .left{
+            // margin-left: 15px;
+            display: flex;
+            align-items: center;
+            .page-name{
+                overflow: hidden;
+                color: var(--slate12);
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                max-width: 246px;
+            }
+        }
+
+        // .right {
+        //     width: 20px;
+        //     height: 20px;
+        //     justify-content: center;
+        //     display: flex;
+
+        //     svg {
+        //         path {
+        //             fill: var(--slate12);
+        //         }
+        //     }
+
+        //     &:hover {
+        //         background: var(--slate1);
+        //         box-shadow: 0px 1px 1px 1px var(--slate6);
+        //         border-radius: 3px;
+        //     }
+        // }
+    }
+    &:hover {
+        .edit-page-overlay-toggle {
+            opacity: 1;
+        }
+
+        .menu-item-drag-handle {
+            display: block;
+        }
+
+        .page-menu-icon {
+            display: none;
+        }
+
+        .page-menu-icon.no-hover {
+            display: block !important;
+        }
+
+        .page-menu-icon.rev {
+            display: block;
+        }
+
+        .page-menu-icon-padding {
+            padding-left: 0px !important;
+        }
+
+        .menu-item-drag-handle {
+            display: flex !important;
+        }
+
+    }
+}
+
+.page-group-trigger-button {
+    display: flex;
+    padding: 5px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    border-radius: 6px;
+    width: 63px;
+}
+
+.text {
+    color: var(--text-default, #1B1F24);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+}
+
+.page-menu-action-buttons{
+    display: inline-flex;
+    align-items: center;
+    height: 28px;
+    width: 28px;
+    padding: 7px;
+    gap: 6px;
+    border: none;
+    outline: none;
+    border-radius: 6px;
+    background: transparent;
+    svg path{
+        fill: #6A727C;
+    }
+   &:hover{
+    background: var(--button-outline-hover, rgba(136, 144, 153, 0.12));
+   }
+}
+
+
+
+.left-sidebar-header-btn.trigger {
+    border-radius: 6px;
+    border: 1px solid var(--border-weak, #E4E7EB);
+    background: var(--button-secondary, #FFF);
+    box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
+    &:hover{
+        border-radius: 6px;
+        border: 1px solid var(--border-default, #CCD1D5);
+        background: linear-gradient(0deg, var(--button-outline-hover, rgba(136, 144, 153, 0.12)) 0%, var(--button-outline-hover, rgba(136, 144, 153, 0.12)) 100%), var(--button-outline, #FFF);
+    }
+}
+
+#page-handler-menu-group {
+    border: none;
+    background: transparent;
+    border-radius: 10px;
+    &.dark-theme {
+        .popover-body {
+            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 8px 16px 0px #000000;
+        }
+    }
+    .popover-body {
+        width: 160px;
+        padding: 8px;
+        border-radius: 10px;
+        background: var(--background-surface-layer-01);
+        box-shadow: 0px 0px 1px 0px rgba(48, 50, 51, 0.05), 0px 8px 16px 0px rgba(48, 50, 51, 0.1);
+       
+        .menu-options {
+            .option {
+                display: flex;
+                padding: 6px 8px;
+                align-items: center;
+                gap: 6px;
+                height: 30px;
+                justify-content: center;
+                align-self: stretch;
+                border-radius: 6px;
+                cursor: pointer;
+                &:hover{
+                    background: rgba(136, 144, 153, 0.08);
+                }
+            }
+        }
+    }
+}
+
+.page-permission {
+    .info-container {
+        display: flex;
+        width: auto;
+        height: auto;
+        padding: 10px 12px 8px 12px;
+        border: 1px solid var(--slate5);
+        background: var(--slate2);
+        border-radius: 6px 6px 6px 6px;
+        margin-bottom: 13px;
+        margin-top: 0px;
+    }
+
+    .permission-type-select {
+        align-items: center;
+    
+        .col-auto {
+            padding-right: 0px;
+        }
+    }
+}
+
+.page-permissions-modal {
+    #header-actions {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .react-select__option {
+        padding: 8px 0px;
+        
+        input {
+            margin-right: 10px;
+        }
+    }
+
+    .react-select__menu-list {
+        overflow-y: unset !important;
+    }
+
+    .user-select-option {
+        display: flex;
+        align-items: center;
+        padding: 8px 12px;
+        cursor: pointer;
+      
+        &.focused {
+          background-color: #f3f4f6; // Tailwind's gray-100 vibe
+        }
+      
+        .avatar {
+          background-color: var(--slate5); // light gray
+          color: var(--slate12); // dark text
+          font-weight: 500;
+          font-size: 16px;
+          width: 36px;
+          height: 36px;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 12px;
+          flex-shrink: 0;
+        }
+      
+        .user-info {
+          display: flex;
+          flex-direction: column;
+      
+          .name {
+            font-weight: 500;
+            font-size: 14px;
+            color: var(--slate12);
+          }
+      
+          .email {
+            font-size: 12px;
+            color: var(--slate10);
+          }
+        }
+
+        .group-info {
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+            align-items: center;
+        
+            .name {
+              font-weight: 400;
+              font-size: 14px;
+              color: var(--slate12);
+            }
+        
+            .count {
+              font-size: 12px;
+              color: var(--slate9);
+            }
+          }
+      }
+}
+
+.page-permission {
+    .spinner-center {
+        min-height: 250px;
+    }
+}
+
+#add-new-page-popover, #edit-page-popover {
+    margin-left: 40px;
+    padding: 8px;    
+    button {
+        border: 0px;
+        padding: 8px;
+        width: 100%;
+        display: flex;
+        box-shadow: none;
+        justify-content: flex-start;
+        &:hover {
+            background-color: var(--interactive-default);
+        };
+        svg {
+            path {
+                fill: var(--icon-weak);
+            }
+        }
+    }
+
+    .licensed-page-option {
+        button {
+            pointer-events: none;
+            &:hover {
+                background-color: unset !important;
+            }
+        }
+    }
+}
+
+#add-new-page-popup {
+    max-width: 300px;
+    width: 271px;
+
+    .popover-header {
+        background-color: unset !important;
+        border-bottom: 1px solid var(--border-weak);
+    }
+
+    .actions-container {
+        display: flex;
+        svg {
+            width: 18px;
+            path {
+                fill: var(--icons-strong)
+            }
+        }
+    }
+
+    .form-label {
+        color: var(--text-default);
+    }
+
+    .form-control {
+        border-radius: 6px;
+        color: var(--text-black);
+        font-weight: 400;
+        font-size: 12px;
+
+        &:active {
+            border-color: var(--border-accent-weak);
+        }
+
+        &:focus {
+            box-shadow: none !important;
+        }
+    }
+
+    .page-events {
+        .page-empty-events {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 8px;
+            color: var(--text-placeholder);
+        }
+
+        button {
+            font-size: 12px;
+        }
+    }
+}
+
+.section-header {
+    color: var(--text-placeholder);
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 12px;
+
+    .title {
+        margin: 0px 6px;
+    }
+
+    &:before, &:after {
+        content: "";
+        flex: 1;
+        border-bottom: 1px dashed var(--border-default);
+    }
+.modal-base .modal-footer .action-btn-page-permission svg path {
+    fill: var(--indigo1) !important;
+}
+}
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageSettings.jsx b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageSettings.jsx
index 1084847d5c..d2491c1220 100644
--- a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageSettings.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/PageSettings.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import useStore from '@/AppBuilder/_stores/store';
 import ArrowLeft from '@/_ui/Icon/solidIcons/ArrowLeft';
@@ -7,7 +7,7 @@ import Tab from '@/ToolJetUI/Tabs/Tab';
 import CollapsableToggle from './CollapsableToggle';
 import { pageConfig } from './pageConfig';
 import Accordion from '@/_ui/Accordion';
-import { Color } from '@/Editor/CodeBuilder/Elements/Color';
+import { ColorSwatches } from '@/modules/Appbuilder/components';
 import { NumberInput } from '@/Editor/CodeBuilder/Elements/NumberInput';
 import LabelStyleToggle from './LabelStyleToggle';
 import FxButton from '@/Editor/CodeBuilder/Elements/FxButton';
@@ -15,16 +15,43 @@ import CodeHinter from '@/AppBuilder/CodeEditor';
 import { resolveReferences } from '@/_helpers/utils';
 import { ToolTip } from '../Inspector/Elements/Components/ToolTip';
 import OverflowTooltip from '@/_components/OverflowTooltip';
+import { RIGHT_SIDE_BAR_TAB } from '../rightSidebarConstants';
+import { SortableTree } from './PageMenu/Tree/SortableTree';
+import SortableList from '@/_components/SortableList';
+import { PageMenuItem } from './PageMenu/PageMenuItem';
+import { get } from 'lodash';
+import { Button } from '@/components/ui/Button/Button';
+import { AddNewPageMenu } from './PageMenu/AddNewPageMenu';
+import { AddNewPagePopup } from './PageMenu/AddNewPagePopup';
+import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
+import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
+import Select from '@/_ui/Select';
+import { DeletePageConfirmationModal } from './PageMenu/DeletePageConfirmationModal';
+import EditAppName from '@/AppBuilder/Header/EditAppName';
+import { ToolTip as LicenseTooltip } from '@/_components/ToolTip';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import PagePermission from './PageMenu/PagePermission';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import { shallow } from 'zustand/shallow';
 
 export const PageSettings = () => {
   const pageSettings = useStore((state) => state.pageSettings);
   const pageSettingChanged = useStore((state) => state.pageSettingChanged);
-  const togglePageSettingMenu = useStore((state) => state.togglePageSettingMenu);
+  const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab);
   const { definition: { properties = {} } = {} } = pageSettings ?? {};
   const [forceCodeBox, setForceCodeBox] = useState(properties?.disableMenu?.fxActive);
   const darkMode = localStorage.getItem('darkMode') === 'true';
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const isVersionReleased = useStore((state) => state.isVersionReleased);
+  const switchPage = useStore((state) => state.switchPage);
+  const toggleRightSidebarPin = useStore((state) => state.toggleRightSidebarPin);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
+  const treeRef = useRef(null);
+
+  const license = useStore((state) => state.license);
+  const isLicensed =
+    !get(license, 'featureAccess.licenseStatus.isExpired', true) &&
+    get(license, 'featureAccess.licenseStatus.isLicenseValid', false);
 
   const pagesMeta = useMemo(() => JSON.parse(JSON.stringify(pageConfig)), []);
 
@@ -50,8 +77,8 @@ export const PageSettings = () => {
               {style.displayName}
             </OverflowTooltip>
           </div>
-          {style.type === 'color' && (
-            <Color
+          {style.type === 'colorSwatches' && (
+            <ColorSwatches
               onReset={handleReset}
               value={currentStyles[name]?.value}
               onChange={(value) => handleStyleChange(name, value, false)}
@@ -70,27 +97,84 @@ export const PageSettings = () => {
     [handleStyleChange, pageSettings, darkMode]
   );
 
+  const pagesAndMenuItems = [
+    {
+      title: 'Pages and menu',
+      children: [
+        isLicensed ? (
+          <>
+            <PagePermission darkMode={darkMode} />
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }} ref={treeRef}>
+              <SortableTree darkMode={darkMode} collapsible indicator={true} treeRef={treeRef} />
+            </div>
+          </>
+        ) : (
+          <SortableList
+            Element={PageMenuItem}
+            darkMode={darkMode}
+            switchPage={switchPage}
+            treeRef={treeRef}
+            classNames="page-handler"
+          />
+        ),
+        <AddNewPageMenu isLicensed={isLicensed} key="new-page" darkMode={darkMode} />,
+      ],
+    },
+  ];
+
+  const appHeaderMenuItems = [
+    {
+      title: 'Header and navigation',
+      children: [
+        <AppHeaderMenu
+          pageSettings={pageSettings}
+          pageSettingChanged={pageSettingChanged}
+          key="header-and-navigation"
+          darkMode={darkMode}
+          licenseValid={isLicensed}
+        />,
+        <NavigationMenu
+          pageSettings={pageSettings}
+          pageSettingChanged={pageSettingChanged}
+          key="navigation-menu"
+          darkMode={darkMode}
+        />,
+      ],
+    },
+  ];
+
+  const devices = [
+    {
+      title: 'Devices',
+      children: [
+        <Devices
+          pageSettings={pageSettings}
+          pageSettingChanged={pageSettingChanged}
+          key="devices"
+          darkMode={darkMode}
+        />,
+      ],
+    },
+  ];
+
   return (
     <div className="inspector pages-settings">
       <div>
-        <div className="row inspector-component-title-input-holder">
-          <div className="col-1" onClick={togglePageSettingMenu}>
-            <span
-              data-cy={`inspector-close-icon`}
-              className="cursor-pointer d-flex align-items-center "
-              style={{ height: '28px', width: '28px' }}
-            >
-              <ArrowLeft fill={'var(--slate12)'} width={'14'} />
-            </span>
+        <div className="row inspector-component-title-input-holder d-flex align-items-center">
+          <div className={`col-9 p-0 mx-2 ${isVersionReleased && 'disabled'}`}>Pages and navigation</div>
+          <div className="d-flex">
+            <div className="icon-btn cursor-pointer" onClick={() => toggleRightSidebarPin()}>
+              <SolidIcon fill="var(--icon-strong)" name={isRightSidebarPinned ? 'unpin' : 'pin'} width="16" />
+            </div>
           </div>
-          <div className={`col-9 p-0 mx-2 ${isVersionReleased && 'disabled'}`}>Page menu</div>
         </div>
         <div>
           <Tabs defaultActiveKey={'properties'} id="page-settings">
-            <Tab eventKey="properties" title="Properties">
-              <div style={{ padding: '12px 16px' }} className={cx({ disabled: isVersionReleased || shouldFreeze })}>
+            <Tab className="page-selector-panel-body" eventKey="properties" title="Properties">
+              <div className={cx({ disabled: isVersionReleased || shouldFreeze })}>
                 <div className="tj-text-xsm color-slate12 ">
-                  <CollapsableToggle pageSettingChanged={pageSettingChanged} settings={pageSettings} />
+                  {/* <CollapsableToggle pageSettingChanged={pageSettingChanged} settings={pageSettings} />
                   <LabelStyleToggle pageSettingChanged={pageSettingChanged} settings={pageSettings} />
                   <div className={cx({ 'codeShow-active': forceCodeBox }, 'wrapper-div-code-editor')}>
                     <div className={cx('d-flex align-items-center justify-content-between')}>
@@ -165,7 +249,10 @@ export const PageSettings = () => {
                         }}
                       />
                     )}
-                  </div>
+                  </div> */}
+                  <Accordion className="pages-and-groups-list" items={pagesAndMenuItems} />
+                  <Accordion items={appHeaderMenuItems} />
+                  <Accordion items={devices} />
                 </div>
               </div>
             </Tab>
@@ -177,6 +264,7 @@ export const PageSettings = () => {
               </div>
             </Tab>
           </Tabs>
+          <DeletePageConfirmationModal darkMode={darkMode} />
         </div>
       </div>
     </div>
@@ -211,3 +299,227 @@ const RenderStyles = React.memo(({ pagesMeta, renderCustomStyles }) => {
     return <Accordion key={style} items={items} />;
   });
 });
+
+const AppHeaderMenu = ({ darkMode, pageSettings, pageSettingChanged, licenseValid }) => {
+  const { moduleId } = useModuleContext();
+  const [appName] = useStore((state) => [state.appStore.modules[moduleId].app.appName], shallow);
+
+  const { definition: { properties = {} } = {} } = pageSettings ?? {};
+  const { hideHeader, name, hideLogo } = properties ?? {};
+  const [_name, _setName] = useState(name?.trim() ? name : appName);
+
+  return (
+    <>
+      <div className="section-header pb-2">
+        <div className="title">App header</div>
+      </div>
+      <div className=" d-flex justify-content-between align-items-center pb-2">
+        <label style={{ gap: '6px' }} className="form-label font-weight-400 mb-0 d-flex">
+          Show app header
+          <LicenseTooltip message={"App header can't be hidden on free plans"} placement="bottom" show={!licenseValid}>
+            <div className="d-flex align-items-center">{!licenseValid && <SolidIcon name="enterprisecrown" />}</div>
+          </LicenseTooltip>
+        </label>
+        <label className={`form-switch`}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            checked={licenseValid ? !hideHeader : true}
+            disabled={!licenseValid}
+            onChange={(e) => {
+              pageSettingChanged({ hideHeader: !e.target.checked }, 'properties');
+            }}
+          />
+        </label>
+      </div>
+      <div className=" d-flex justify-content-between align-items-center pb-2">
+        <label style={{ gap: '6px' }} className="form-label font-weight-400 mb-0 d-flex">
+          Show logo
+        </label>
+        <label className={`form-switch`}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            checked={!hideLogo}
+            onChange={(e) => {
+              pageSettingChanged({ hideLogo: !e.target.checked }, 'properties');
+            }}
+          />
+        </label>
+      </div>
+      <div className="pb-2">
+        <div className="col pb-1">
+          <label className="form-label font-weight-400 mb-0">Title</label>
+          <input
+            type="text"
+            onBlur={(e) => {
+              pageSettingChanged({ name: e.target.value }, 'properties');
+            }}
+            onChange={(e) => _setName(e.target.value)}
+            className="form-control"
+            value={_name}
+            minLength="1"
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+const NavigationMenu = ({ darkMode, pageSettings, pageSettingChanged }) => {
+  const { definition: { properties = {} } = {} } = pageSettings ?? {};
+  const { disableMenu, position, style, collapsable } = properties ?? {};
+  const resolvedDisableMenu = resolveReferences(disableMenu?.value);
+
+  const POSTIONS = [
+    { label: 'Top', value: 'top' },
+    { label: 'Side', value: 'side' },
+  ];
+
+  const COLLAPSABLE_TOGGLES = [
+    { label: 'True', value: 'true' },
+    { label: 'False', value: 'false' },
+  ];
+
+  const styleOptions = [
+    { label: 'Text and icon', value: 'texticon' },
+    ...(position == 'side' || position == 'top' ? [{ label: 'Text only', value: 'text' }] : []),
+    ...(position !== 'top' ? [{ label: 'Icon only', value: 'icon' }] : []),
+  ];
+
+  function stringToBoolean(str) {
+    return str.toLowerCase() === 'true';
+  }
+
+  return (
+    <>
+      <div className="section-header pb-2">
+        <div className="title">Navigation menu</div>
+      </div>
+      <div className=" d-flex justify-content-between align-items-center pb-2">
+        <label className="form-label font-weight-400 mb-0">Show navigation menu</label>
+        <label className={`form-switch`}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            checked={!resolvedDisableMenu}
+            onChange={(e) => {
+              pageSettingChanged(
+                {
+                  disableMenu: {
+                    value: `{{${!e.target.checked}}}`,
+                    fxActive: false,
+                  },
+                },
+                'properties'
+              );
+            }}
+          />
+        </label>
+      </div>
+      {!resolvedDisableMenu && (
+        <>
+          <div className="d-flex justify-content-between align-items-center pb-2">
+            <label className="form-label font-weight-400 mb-0">Position</label>
+            <div className="ms-auto position-relative app-mode-switch" style={{ paddingLeft: '0px' }}>
+              <ToggleGroup
+                onValueChange={(value) => {
+                  if (position?.toString() === 'side' && style === 'icon') {
+                    pageSettingChanged({ style: 'texticon' }, 'properties');
+                  }
+                  pageSettingChanged({ position: value }, 'properties');
+                }}
+                defaultValue={position?.toString()}
+              >
+                {POSTIONS.map((mode) => (
+                  <ToggleGroupItem key={mode.value} value={mode.value}>
+                    {mode.label}
+                  </ToggleGroupItem>
+                ))}
+              </ToggleGroup>
+            </div>
+          </div>
+          <div className="pb-2">
+            <div className="col d-flex justify-content-between align-items-center">
+              <label className="form-label font-weight-400 mb-0">Style</label>
+              <Select
+                options={styleOptions}
+                search={true}
+                value={style}
+                onChange={(value) => {
+                  pageSettingChanged({ style: value }, 'properties');
+                }}
+                placeholder={'Select...'}
+                useMenuPortal={false}
+                width={'142px'}
+                className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
+              />
+            </div>
+          </div>
+          {position == 'side' && style !== 'text' && style !== 'icon' && (
+            <div className="d-flex justify-content-between align-items-center pb-2">
+              <label className="form-label font-weight-400 mb-0">Collapsable</label>
+              <div className="ms-auto position-relative app-mode-switch" style={{ paddingLeft: '0px' }}>
+                <ToggleGroup
+                  onValueChange={(value) => {
+                    // if (position === 'side' && value == 'false') {
+                    //   pageSettingChanged({ style: 'texticon' }, 'properties');
+                    // }
+                    pageSettingChanged({ collapsable: stringToBoolean(value) }, 'properties');
+                  }}
+                  defaultValue={collapsable?.toString()}
+                >
+                  {COLLAPSABLE_TOGGLES.map((mode) => (
+                    <ToggleGroupItem key={mode.value} value={mode.value}>
+                      {mode.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+const Devices = ({ darkMode, pageSettingChanged, pageSettings }) => {
+  const { definition: { properties = {} } = {} } = pageSettings ?? {};
+  const { showOnDesktop, showOnMobile } = properties ?? {};
+  const [_showOnDesktop, _setShowOnDesktop] = useState(showOnDesktop);
+  const [_showOnMobile, _setShowOnMobile] = useState(showOnMobile);
+
+  return (
+    <>
+      <div className=" d-flex justify-content-between align-items-center pb-2">
+        <label className="form-label font-weight-400 mb-0">Show on desktop</label>
+        <label className={`form-switch`}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            checked={showOnDesktop}
+            onChange={(e) => {
+              _setShowOnDesktop(e.target.checked);
+              pageSettingChanged({ showOnDesktop: e.target.checked }, 'properties');
+            }}
+          />
+        </label>
+      </div>
+      <div className=" d-flex justify-content-between align-items-center pb-2">
+        <label className="form-label font-weight-400 mb-0">Show on mobile</label>
+        <label className={`form-switch`}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            checked={showOnMobile}
+            onChange={(e) => {
+              _setShowOnMobile(e.target.checked);
+              pageSettingChanged({ showOnMobile: e.target.checked }, 'properties');
+            }}
+          />
+        </label>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/pageConfig.js b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/pageConfig.js
index bcfbca5ce3..26639a64b2 100644
--- a/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/pageConfig.js
+++ b/frontend/src/AppBuilder/RightSideBar/PageSettingsTab/pageConfig.js
@@ -2,41 +2,47 @@ export const pageConfig = {
   properties: {
     collapsable: true,
     style: 'texticon',
+    hideHeader: false,
+    position: 'top',
+    name: '',
+    hideLogo: false,
     disableMenu: {
       value: `{{false}}`,
       fxActive: false,
     },
+    showOnDesktop: true,
+    showOnMobile: true,
   },
   styles: {
     textColor: {
       accordion: 'itemList',
       displayName: 'Default text',
-      type: 'color',
+      type: 'colorSwatches',
     },
     iconColor: {
       accordion: 'itemList',
       displayName: 'Default icon',
-      type: 'color',
+      type: 'colorSwatches',
     },
     selectedTextColor: {
       accordion: 'itemList',
       displayName: 'Selected text',
-      type: 'color',
+      type: 'colorSwatches',
     },
     selectedIconColor: {
       accordion: 'itemList',
       displayName: 'Selected icon',
-      type: 'color',
+      type: 'colorSwatches',
     },
     pillHoverBackgroundColor: {
       accordion: 'itemList',
       displayName: 'Pill hover background',
-      type: 'color',
+      type: 'colorSwatches',
     },
     pillSelectedBackgroundColor: {
       accordion: 'itemList',
       displayName: 'Pill selected background',
-      type: 'color',
+      type: 'colorSwatches',
     },
     pillRadius: {
       accordion: 'itemList',
@@ -46,42 +52,48 @@ export const pageConfig = {
     backgroundColor: {
       accordion: 'container',
       displayName: 'Background',
-      type: 'color',
+      type: 'colorSwatches',
     },
     borderColor: {
       accordion: 'container',
       displayName: 'Border',
-      type: 'color',
+      type: 'colorSwatches',
     },
   },
   definition: {
     properties: {
       collapsable: true,
       style: 'texticon',
+      hideHeader: false,
+      position: 'top',
+      name: '',
+      hideLogo: false,
       disableMenu: {
         value: '{{false}}',
         fxActive: false,
       },
+      showOnDesktop: true,
+      showOnMobile: true,
     },
     styles: {
       textColor: {
-        value: '#6A727C',
+        value: 'var(--cc-placeholder-text)',
         isDefault: true,
       },
       iconColor: {
-        value: '#6A727C',
+        value: 'var(--cc-default-icon)',
         isDefault: true,
       },
       selectedTextColor: {
-        value: '#4368E3',
+        value: 'var(--cc-primary-text)',
         isDefault: true,
       },
       selectedIconColor: {
-        value: '#4368E3',
+        value: 'var(--cc-primary-brand)',
         isDefault: true,
       },
       pillHoverBackgroundColor: {
-        value: '#ECEEF0',
+        value: 'var(--cc-surface2-surface)',
         isDefault: true,
       },
       pillSelectedBackgroundColor: {
@@ -92,11 +104,11 @@ export const pageConfig = {
         value: '6',
       },
       backgroundColor: {
-        value: '#FFFFFF',
+        value: 'var(--cc-surface1-surface)',
         isDefault: true,
       },
       borderColor: {
-        value: '#DFE3E6',
+        value: 'var(--cc-default-border)',
         isDefault: true,
       },
     },
diff --git a/frontend/src/AppBuilder/RightSideBar/RightSideBar.jsx b/frontend/src/AppBuilder/RightSideBar/RightSideBar.jsx
index 3322b9e143..cec562ac13 100644
--- a/frontend/src/AppBuilder/RightSideBar/RightSideBar.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/RightSideBar.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import useStore from '@/AppBuilder/_stores/store';
 import { ComponentConfigurationTab } from './ComponentConfigurationTab';
 import ComponentsManagerTab from './ComponentManagerTab';
@@ -9,16 +9,42 @@ import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 export const RightSideBar = ({ darkMode }) => {
   const { isModuleEditor } = useModuleContext();
   const activeTab = useStore((state) => state.activeRightSideBarTab);
-  const pageSettingSelected = useStore((state) => state.pageSettingSelected);
+  const isRightSidebarOpen = useStore((state) => state.isRightSidebarOpen);
+  const setRightSidebarOpen = useStore((state) => state.setRightSidebarOpen);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
+  const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab);
+
+  const sidebarRef = useRef(null);
+
+  // useEffect(() => {
+  //   const rigthSidebarMenu = document.querySelector('.right-sidebar-toggle');
+  //   function handleClickOutside(event) {
+  //     if (
+  //       sidebarRef.current &&
+  //       !sidebarRef.current.contains(event.target) &&
+  //       !rigthSidebarMenu.contains(event.target) &&
+  //       !isRightSidebarPinned
+  //     ) {
+  //       setRightSidebarOpen(false);
+  //       setActiveRightSideBarTab(null);
+  //     }
+  //   }
+
+  //   document.addEventListener('mousedown', handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener('mousedown', handleClickOutside);
+  //   };
+  // }, [isRightSidebarPinned, setActiveRightSideBarTab, setRightSidebarOpen]);
+
+  if (!isRightSidebarOpen) return null;
 
   return (
-    <div className="sub-section">
+    <div ref={sidebarRef} className="sub-section">
       <div className={cx('editor-sidebar', { 'dark-theme theme-dark': darkMode })}>
         <div className={cx({ 'dark-theme theme-dark': darkMode })} style={{ position: 'relative', height: '100%' }}>
-          {pageSettingSelected && <PageSettings />}
-          {activeTab === 'components' ? (
-            <ComponentsManagerTab darkMode={darkMode} isModuleEditor={isModuleEditor} />
-          ) : (
+          {activeTab === 'pages' && <PageSettings />}
+          {activeTab === 'components' && <ComponentsManagerTab darkMode={darkMode} isModuleEditor={isModuleEditor} />}
+          {activeTab === 'configuration' && (
             <ComponentConfigurationTab darkMode={darkMode} isModuleEditor={isModuleEditor} />
           )}
         </div>
diff --git a/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
new file mode 100644
index 0000000000..76d9347160
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/RightSidebarToggle.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import cx from 'classnames';
+import Tooltip from 'react-bootstrap/Tooltip';
+import './rightSidebarToggle.scss';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { RIGHT_SIDE_BAR_TAB } from '@/AppBuilder/RightSideBar/rightSidebarConstants';
+import { SidebarItem } from './SidebarItem';
+
+const RightSidebarToggle = ({ darkMode = false }) => {
+  const [isRightSidebarOpen, setRightSidebarOpen] = useStore(
+    (state) => [state.isRightSidebarOpen, state.setRightSidebarOpen],
+    shallow
+  );
+  const setActiveRightSideBarTab = useStore((state) => state.setActiveRightSideBarTab);
+  const activeRightSideBarTab = useStore((state) => state.activeRightSideBarTab);
+  const isRightSidebarPinned = useStore((state) => state.isRightSidebarPinned);
+  const handleToggle = (item) => {
+    setActiveRightSideBarTab(item);
+    if (item === activeRightSideBarTab && !isRightSidebarPinned) {
+      setActiveRightSideBarTab('');
+      return setRightSidebarOpen(false);
+    }
+    if (!isRightSidebarOpen) setRightSidebarOpen(true);
+  };
+
+  return (
+    <div
+      className={cx(' right-sidebar-toggle left-sidebar', { 'dark-theme theme-dark': darkMode })}
+      data-cy="left-sidebar-inspector"
+    >
+      <SidebarItem
+        selectedSidebarItem={activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.COMPONENTS}
+        onClick={() => {
+          handleToggle(RIGHT_SIDE_BAR_TAB.COMPONENTS);
+        }}
+        darkMode={darkMode}
+        icon="plus"
+        className={`left-sidebar-item left-sidebar-layout left-sidebar-inspector`}
+        tip="Components"
+      />
+      <SidebarItem
+        selectedSidebarItem={activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.CONFIGURATION}
+        onClick={() => {
+          handleToggle(RIGHT_SIDE_BAR_TAB.CONFIGURATION);
+        }}
+        darkMode={darkMode}
+        icon="inspect"
+        className={`left-sidebar-item left-sidebar-layout left-sidebar-inspector`}
+        tip="Component properties"
+      />
+      <SidebarItem
+        selectedSidebarItem={activeRightSideBarTab === RIGHT_SIDE_BAR_TAB.PAGES}
+        onClick={() => {
+          handleToggle(RIGHT_SIDE_BAR_TAB.PAGES);
+        }}
+        darkMode={darkMode}
+        icon="file01"
+        className={`left-sidebar-item left-sidebar-layout left-sidebar-inspector`}
+        tip="Page settings"
+      />
+    </div>
+  );
+};
+
+export default RightSidebarToggle;
diff --git a/frontend/src/AppBuilder/RightSideBar/SidebarItem.jsx b/frontend/src/AppBuilder/RightSideBar/SidebarItem.jsx
new file mode 100644
index 0000000000..ce7c6dca86
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/SidebarItem.jsx
@@ -0,0 +1,23 @@
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import React, { forwardRef } from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+import { useTranslation } from 'react-i18next';
+
+// TODO: remove refs and related dependancies
+export const SidebarItem = forwardRef(
+  ({ tip = '', selectedSidebarItem, className, icon, iconFill = 'var(--slate8)', text, onClick, ...rest }, ref) => {
+    const { t } = useTranslation();
+    let displayIcon = icon;
+    return (
+      <div {...rest} className={className} onClick={onClick && onClick} ref={ref}>
+        {icon && (
+          <div className={`sidebar-svg-icon  position-relative ${selectedSidebarItem && 'sidebar-item'}`}>
+            <SolidIcon name={displayIcon} width={20} fill={selectedSidebarItem ? '#3E63DD' : iconFill} />
+          </div>
+        )}
+        <p>{text && t(`leftSidebar.${text}.text`, text)}</p>
+      </div>
+    );
+  }
+);
diff --git a/frontend/src/AppBuilder/RightSideBar/rightSidebarConstants.js b/frontend/src/AppBuilder/RightSideBar/rightSidebarConstants.js
index f261a37815..719588a7fd 100644
--- a/frontend/src/AppBuilder/RightSideBar/rightSidebarConstants.js
+++ b/frontend/src/AppBuilder/RightSideBar/rightSidebarConstants.js
@@ -1,4 +1,5 @@
 export const RIGHT_SIDE_BAR_TAB = {
   COMPONENTS: 'components',
   CONFIGURATION: 'configuration',
+  PAGES: 'pages',
 };
diff --git a/frontend/src/AppBuilder/RightSideBar/rightSidebarToggle.scss b/frontend/src/AppBuilder/RightSideBar/rightSidebarToggle.scss
new file mode 100644
index 0000000000..0b71fc3660
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/rightSidebarToggle.scss
@@ -0,0 +1,17 @@
+.right-sidebar-toggle {
+    position: fixed;
+    right: 0 !important;
+    overflow: hidden;
+    left: unset !important;
+    border-right: 1px solid var(--slate5);
+    margin-top: 0px !important;
+    width: 48px !important;
+    flex: 1 1 auto;
+    top: 48px;
+    border-left: 1px solid var(--slate5);
+    background-color: var(--base);
+    background-clip: border-box;
+    height: 100vh;
+    z-index: 1;
+    
+}
diff --git a/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx b/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
index bd6a41f553..8a6ec488b1 100644
--- a/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
@@ -72,12 +72,8 @@ const DesktopHeader = ({
     );
   }
   return (
-    <Header
-      styles={{
-        height: '46px',
-      }}
-    >
-      {_renderAppNameAndLogo()}
+    <Header>
+      {/* {_renderAppNameAndLogo()} */}
       {!isReleasedVersionId && (
         <PreviewSettings
           isMobileLayout={false}
@@ -86,11 +82,11 @@ const DesktopHeader = ({
           darkMode={darkMode}
         />
       )}
-      {showDarkModeToggle && (
+      {/* {showDarkModeToggle && (
         <div className="d-flex align-items-center">
           <DarkModeToggle switchDarkMode={changeToDarkMode} darkMode={darkMode} />
         </div>
-      )}
+      )} */}
     </Header>
   );
 };
diff --git a/frontend/src/AppBuilder/Viewer/Header.jsx b/frontend/src/AppBuilder/Viewer/Header.jsx
index f17799fe98..aee8e71cfe 100644
--- a/frontend/src/AppBuilder/Viewer/Header.jsx
+++ b/frontend/src/AppBuilder/Viewer/Header.jsx
@@ -5,13 +5,13 @@ const Header = ({ children, className, styles = {}, showNavbarClass = true }) =>
   return (
     <div
       style={{
-        minHeight: '47px',
+        minHeight: '32px',
         ...styles,
       }}
       className={`header ${className}`}
     >
-      <header className={classNames({ 'navbar navbar-expand-md': showNavbarClass })}>
-        <div className="container-xl header-container position-relative">{children}</div>
+      <header className={classNames('p-0', { 'navbar navbar-expand-md': showNavbarClass })}>
+        <div className="container-xl py-3 px-2 header-container position-relative">{children}</div>
       </header>
     </div>
   );
diff --git a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
index 947398eb13..100b4572b1 100644
--- a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
@@ -11,6 +11,7 @@ import PreviewSettings from './PreviewSettings';
 import MobileNavigationMenu from './MobileNavigationMenu';
 import useStore from '@/AppBuilder/_stores/store';
 import AppLogo from '@/_components/AppLogo';
+import { resolveReferences } from '@/_helpers/utils';
 
 const MobileHeader = ({
   showHeader,
@@ -31,6 +32,10 @@ const MobileHeader = ({
   );
   const editingVersion = useStore((state) => state.editingVersion);
   const showDarkModeToggle = useStore((state) => state.globalSettings.appMode === 'auto');
+  const pageSettings = useStore((state) => state.pageSettings);
+  const { definition: { properties = {} } = {} } = pageSettings ?? {};
+  const { disableMenu, showOnMobile } = properties ?? {};
+  const resolvedDisableMenu = resolveReferences(disableMenu?.value);
 
   // Fetch the version parameter from the query string
   const searchParams = new URLSearchParams(window.location.search);
@@ -38,10 +43,10 @@ const MobileHeader = ({
 
   const _renderAppNameAndLogo = () => (
     <div
-      className={classNames('d-flex', 'align-items-center')}
+      className={classNames('d-flex', 'align-items-center', 'justify-content-center')}
       style={{ visibility: showHeader || isReleasedVersionId ? 'visible' : 'hidden' }}
     >
-      <h1 className="navbar-brand d-none-navbar-horizontal pe-0">
+      <h1 className="navbar-brand d-none-navbar-horizontal p-0">
         <Link
           data-cy="viewer-page-logo"
           onClick={() => {
@@ -51,12 +56,6 @@ const MobileHeader = ({
           <AppLogo isLoadingFromHeader={false} viewer={true} />
         </Link>
       </h1>
-      <div className="navbar-seperator" style={{ margin: '0px 1.375rem' }}></div>
-      {appName && (
-        <div className="d-flex align-items-center app-title">
-          <span>{appName}</span>
-        </div>
-      )}
     </div>
   );
 
@@ -69,6 +68,7 @@ const MobileHeader = ({
       changeToDarkMode={changeToDarkMode}
       showHeader={showHeader}
       showDarkModeToggle={showDarkModeToggle}
+      appName={appName}
     />
   );
 
@@ -96,7 +96,7 @@ const MobileHeader = ({
   };
 
   if (!showHeader && isReleasedVersionId) {
-    return <>{showViewerNavigation ? _renderMobileNavigationMenu() : _renderDarkModeBtn()}</>;
+    return <>{showViewerNavigation && showOnMobile ? _renderMobileNavigationMenu() : _renderDarkModeBtn()}</>;
   }
 
   if (!showHeader && !isReleasedVersionId) {
@@ -112,7 +112,7 @@ const MobileHeader = ({
           showNavbarClass={false}
         >
           {showViewerNavigation && _renderMobileNavigationMenu()}
-          {!isEmpty(editingVersion) && _renderPreviewSettings()}
+          {/* {!isEmpty(editingVersion) && _renderPreviewSettings()} */}
           {!showViewerNavigation && _renderDarkModeBtn()}
         </Header>
       </>
@@ -120,18 +120,23 @@ const MobileHeader = ({
   }
 
   return (
-    <Header
-      styles={{
-        height: '46px',
-      }}
-    >
-      <div className="d-flex">
-        <span style={{}}>{_renderAppNameAndLogo()}</span>
-        {_renderMobileNavigationMenu()}
-      </div>
-      {!isReleasedVersionId && !isEmpty(editingVersion) && _renderPreviewSettings()}
-      {!showViewerNavigation && _renderDarkModeBtn({ styles: { top: '2px' } })}
-    </Header>
+    <div>
+      <Header className={'preview-settings-mobile'} styles={{ height: '44px' }}>
+        {!isReleasedVersionId && !isEmpty(editingVersion) && _renderPreviewSettings()}
+      </Header>
+      <Header
+        styles={{
+          height: '46px',
+        }}
+        className={'mobile-nav-container'}
+      >
+        <div className="d-flex w-100">
+          {!resolvedDisableMenu && showOnMobile && _renderMobileNavigationMenu()}
+          <span style={{ flexGrow: 1, width: '100%' }}>{_renderAppNameAndLogo()}</span>
+        </div>
+        {/* {!showViewerNavigation && _renderDarkModeBtn({ styles: { top: '2px' } })} */}
+      </Header>
+    </div>
   );
 };
 
diff --git a/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx b/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx
index 0862634c77..ca910f5186 100644
--- a/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx
@@ -6,8 +6,12 @@ import { DarkModeToggle } from '@/_components/DarkModeToggle';
 import Header from './Header';
 import Cross from '@/_ui/Icon/solidIcons/Cross';
 import useStore from '@/AppBuilder/_stores/store';
-import { buildTree } from '../LeftSidebar/PageMenu/Tree/utilities';
+import { buildTree } from '../RightSideBar/PageSettingsTab/PageMenu/Tree/utilities';
 import * as Icons from '@tabler/icons-react';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { redirectToDashboard } from '@/_helpers/routes';
+import AppLogo from '@/_components/AppLogo';
+import { Link } from 'react-router-dom';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 
 const RenderGroup = ({ pages, pageGroup, currentPage, darkMode, handlepageSwitch, currentPageId, icon }) => {
@@ -33,7 +37,7 @@ const RenderGroup = ({ pages, pageGroup, currentPage, darkMode, handlepageSwitch
           <div className={`card mb-1`}>
             <div className="card-body">
               <IconElement />
-              <span style={{ color: 'var(--slate12)' }}>{_.truncate(pageGroup?.name, { length: 22 })}</span>
+              <span>{_.truncate(pageGroup?.name, { length: 22 })}</span>
               <svg
                 className={`page-group-collapse ${isExpanded ? 'expanded' : 'collapsed'}`}
                 width={17}
@@ -66,7 +70,7 @@ const RenderGroup = ({ pages, pageGroup, currentPage, darkMode, handlepageSwitch
                   <div className={`card mb-1  ${page?.id === currentPageId ? 'active' : ''}`}>
                     <div className="card-body">
                       <IconElement />
-                      <span style={{ color: 'var(--slate12)' }}>{_.truncate(page?.name, { length: 22 })}</span>
+                      <span>{_.truncate(page?.name, { length: 22 })}</span>
                     </div>
                   </div>
                 </div>
@@ -108,12 +112,12 @@ const RenderPageGroups = ({ pages, handlepageSwitch, darkMode, currentPageId, cu
               <div
                 key={page.handle}
                 onClick={() => handlepageSwitch(page?.id)}
-                className={`viewer-page-handler mb-2 cursor-pointer ${darkMode && 'dark'}`}
+                className={`viewer-page-handler cursor-pointer ${darkMode && 'dark'}`}
               >
-                <div className={`card mb-1  ${page?.id === currentPageId ? 'active' : ''}`}>
+                <div className={`card ${page?.id === currentPageId ? 'active' : ''}`}>
                   <div className="card-body">
                     <IconElement />
-                    <span style={{ color: 'var(--slate12)' }}>{_.truncate(page?.name, { length: 22 })}</span>
+                    <span>{_.truncate(page?.name, { length: 22 })}</span>
                   </div>
                 </div>
               </div>
@@ -125,7 +129,15 @@ const RenderPageGroups = ({ pages, handlepageSwitch, darkMode, currentPageId, cu
   );
 };
 
-const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, changeToDarkMode, showDarkModeToggle }) => {
+const MobileNavigationMenu = ({
+  pages,
+  switchPage,
+  currentPageId,
+  darkMode,
+  changeToDarkMode,
+  showDarkModeToggle,
+  appName,
+}) => {
   const { moduleId } = useModuleContext();
   const selectedVersionName = useStore((state) => state.selectedVersion?.name);
   const selectedEnvironmentName = useStore((state) => state.selectedEnvironment?.name);
@@ -141,13 +153,6 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
     switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams), moduleId);
   };
   var styles = {
-    bmBurgerButton: {
-      position: 'absolute',
-      width: '16px',
-      height: '16px',
-      top: '13px',
-      right: '1rem',
-    },
     bmBurgerBars: {
       background: 'var(--slate12)',
     },
@@ -162,11 +167,11 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
       height: '100%',
       width: 'calc(100% - 20%)',
       top: 0,
-      right: 0,
+      left: 0,
     },
     bmMenu: {
       background: darkMode ? '#202B37' : '#fff',
-      padding: '0',
+      padding: '16px 8px',
     },
     bmMorphShape: {
       fill: '#373a47',
@@ -185,6 +190,7 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
     },
     bmOverlay: {
       background: 'rgba(0, 0, 0, 0.3)',
+      top: '0px',
     },
   };
 
@@ -195,6 +201,9 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
     _.get(license, 'featureAccess.licenseStatus.isLicenseValid', false);
   const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
 
+  const { definition: { properties = {} } = {} } = useStore((state) => state.pageSettings) || {};
+  const { name, hideLogo, hideHeader } = properties ?? {};
+
   return (
     <>
       <MobileMenu
@@ -203,18 +212,42 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
         pageWrapId={'page-wrap'}
         outerContainerId={'outer-container'}
         onStateChange={(state) => setHamburgerMenuOpen(state.isOpen)}
-        right
+        customBurgerIcon={
+          <div className="icon-btn">
+            <SolidIcon fill="var(--icon-strong)" name="menu" />
+          </div>
+        }
+        right={false}
       >
         <div className="pt-0">
-          <Header className={'mobile-header'}>
-            <div className="py-2 row w-100">
-              <div className="col">
-                <span style={{ color: 'var(--slate12)' }}>Menu</span>
-              </div>
-              <div onClick={() => setHamburgerMenuOpen(false)} className="col-1 cursor-pointer">
-                <Cross fill={'var(--slate12)'} />
+          <Header styles={{ paddingBottom: '24px' }} className={'mobile-header'}>
+            <div onClick={() => setHamburgerMenuOpen(false)} className="cursor-pointer">
+              <div className="icon-btn">
+                <SolidIcon name="remove03" />
               </div>
             </div>
+            <div className="d-flex flex-grow-1 justify-content-center">
+              <h1 className="navbar-brand d-none-navbar-horizontal p-0">
+                <Link
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                  }}
+                  data-cy="viewer-page-logo"
+                  onClick={() => {
+                    redirectToDashboard();
+                  }}
+                >
+                  {!hideLogo && <AppLogo isLoadingFromHeader={false} viewer={true} />}
+                  {!hideHeader && (
+                    <div className="d-flex align-items-center app-title">
+                      <span>{name?.trim() ? name : appName}</span>
+                    </div>
+                  )}
+                </Link>
+              </h1>
+            </div>
           </Header>
 
           <div className="w-100">
@@ -237,12 +270,12 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
                     <div
                       key={page.handle}
                       onClick={() => handlepageSwitch(page?.id)}
-                      className={`viewer-page-handler mb-2 cursor-pointer ${darkMode && 'dark'}`}
+                      className={`viewer-page-handler cursor-pointer ${darkMode && 'dark'}`}
                     >
-                      <div className={`card mb-1  ${page?.id === currentPageId ? 'active' : ''}`}>
+                      <div className={`card  ${page?.id === currentPageId ? 'active' : ''}`}>
                         <div className="card-body">
-                          <IconElement />
-                          <span style={{ color: 'var(--slate12)' }}>{_.truncate(page?.name, { length: 22 })}</span>
+                          <IconElement style={{ width: '16px', height: '16px' }} />
+                          <span>{_.truncate(page?.name, { length: 22 })}</span>
                         </div>
                       </div>
                     </div>
@@ -254,16 +287,12 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan
         </div>
         {showDarkModeToggle && (
           <div>
-            <hr className="m-0 mb-3" />
             <div className="d-flex justify-content-center">
-              <div
-                className={`d-flex align-items-center justify-content-center`}
-                style={{ border: '1px solid var(--slate7)', width: 'calc(100% - 20px)' }}
-              >
+              <div className={`d-flex align-items-center justify-content-center`}>
                 <DarkModeToggle
                   switchDarkMode={changeToDarkMode}
                   darkMode={darkMode}
-                  showText={true}
+                  showText={false}
                   tooltipPlacement={'top'}
                 />
               </div>
diff --git a/frontend/src/AppBuilder/Viewer/PageGroup.jsx b/frontend/src/AppBuilder/Viewer/PageGroup.jsx
deleted file mode 100644
index 9948651c43..0000000000
--- a/frontend/src/AppBuilder/Viewer/PageGroup.jsx
+++ /dev/null
@@ -1,219 +0,0 @@
-/* eslint-disable import/namespace */
-import React, { useRef, useState } from 'react';
-import _ from 'lodash';
-import * as Icons from '@tabler/icons-react';
-// eslint-disable-next-line import/no-unresolved
-import FolderList from '@/_ui/FolderList/FolderList';
-import useStore from '@/AppBuilder/_stores/store';
-import { buildTree } from '../LeftSidebar/PageMenu/Tree/utilities';
-import OverflowTooltip from '@/_components/OverflowTooltip';
-import cx from 'classnames';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
-
-const RenderPage = ({ page, currentPageId, switchPageWrapper, labelStyle, computeStyles, darkMode, homePageId }) => {
-  const isHomePage = page.id === homePageId;
-  const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
-  const IconElement = Icons?.[iconName] ?? Icons?.['IconFileDescription'];
-  return (page.hidden || page.disabled) && page?.restricted ? null : (
-    <FolderList
-      key={page.handle}
-      onClick={() => switchPageWrapper(page?.id)}
-      selectedItem={page?.id === currentPageId}
-      CustomIcon={!labelStyle?.icon?.hidden && IconElement}
-      customStyles={computeStyles}
-      darkMode={darkMode}
-    >
-      {!labelStyle?.label?.hidden && (
-        <span data-cy={`pages-name-${String(page?.name).toLowerCase()}`}>
-          <OverflowTooltip style={{ width: '110px' }} childrenClassName={'mx-2 page-name'}>
-            {page.name}
-          </OverflowTooltip>
-        </span>
-      )}
-    </FolderList>
-  );
-};
-
-const RenderPageGroup = ({
-  pages,
-  pageGroup,
-  currentPage,
-  labelStyle,
-  computeStyles,
-  darkMode,
-  switchPageWrapper,
-  homePageId,
-  currentPageId,
-}) => {
-  const [hovered, setHovered] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(true);
-  const contentRef = useRef(null);
-
-  const IconElement = Icons?.[pageGroup.icon] ?? Icons?.['IconHome2'];
-
-  const handleToggle = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  if (labelStyle?.label?.hidden) {
-    return (
-      <>
-        {pages.map((page) => (
-          <RenderPage
-            key={page.handle}
-            page={page}
-            currentPageId={currentPageId}
-            switchPageWrapper={switchPageWrapper}
-            labelStyle={labelStyle}
-            computeStyles={computeStyles}
-            darkMode={darkMode}
-            homePageId={homePageId}
-          />
-        ))}
-      </>
-    );
-  }
-
-  const active = currentPage.pageGroupId === pageGroup.id;
-
-  return (
-    <div className={`accordion-item ${darkMode ? 'dark-mode' : ''}`}>
-      <div
-        className={`page-group-wrapper ${active ? 'active' : ''}`}
-        style={{
-          position: 'relative',
-        }}
-      >
-        <svg
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
-          onClick={handleToggle}
-          className={`page-group-collapse ${isExpanded ? 'expanded' : 'collapsed'}`}
-          width={17}
-          height={16}
-          viewBox="0 0 17 16"
-          fill="black"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.1257 4L5.27446 4C4.50266 4 4.02179 4.83721 4.41068 5.50387L7.33631 10.5192C7.72218 11.1807 8.67798 11.1807 9.06386 10.5192L11.9895 5.50387C12.3784 4.83721 11.8975 4 11.1257 4Z"
-            fill="#ACB2B9"
-          />
-        </svg>
-        <FolderList
-          key={pageGroup.id}
-          onClick={handleToggle}
-          CustomIcon={!labelStyle?.icon?.hidden && IconElement}
-          customStyles={computeStyles}
-          darkMode={darkMode}
-          hovered={hovered}
-        >
-          {!labelStyle?.label?.hidden && (
-            <span data-cy={`pages-name-${String(pageGroup?.name).toLowerCase()}`}>
-              <OverflowTooltip style={{ width: '110px' }} childrenClassName={'mx-2 page-name'}>
-                {pageGroup.name}
-              </OverflowTooltip>
-            </span>
-          )}
-        </FolderList>
-      </div>
-
-      <div className={`accordion-body ${isExpanded ? 'show' : 'hide'}`}>
-        <div ref={contentRef} className="accordion-content">
-          {pages.map((page) => (
-            <RenderPage
-              key={page.handle}
-              page={page}
-              currentPageId={currentPageId}
-              switchPageWrapper={switchPageWrapper}
-              labelStyle={labelStyle}
-              computeStyles={computeStyles}
-              darkMode={darkMode}
-              homePageId={homePageId}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const RenderPageAndPageGroup = ({ pages, labelStyle, computeStyles, darkMode, switchPageWrapper }) => {
-  // Don't render empty folders if displaying only icons
-  const { moduleId } = useModuleContext();
-  const tree = buildTree(pages, !!labelStyle?.label?.hidden);
-  const filteredPages = tree.filter((page) => (!page?.isPageGroup || page.children?.length > 0) && !page?.restricted);
-  const currentPageId = useStore((state) => state.currentPageId);
-  const currentPage = pages.find((page) => page.id === currentPageId);
-  const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
-  return (
-    <div className={cx('page-handler-wrapper viewer', { 'dark-theme': darkMode })}>
-      {/* <Accordion alwaysOpen defaultActiveKey={tree.map((page) => page.id)}> */}
-      {filteredPages.map((page, index) => {
-        if (
-          page.isPageGroup &&
-          page.children.length === 0 &&
-          labelStyle?.label?.hidden &&
-          !page.children.some((child) => child?.restricted === true)
-        ) {
-          return null;
-        }
-        if (page.children && page.isPageGroup && !page.children.some((child) => child?.restricted === true)) {
-          // if we are only displaying icons, we don't display the groups instead display separator to separate a page groups
-          const renderSeparatorTop = index !== 0 && labelStyle?.label?.hidden;
-          const renderSeparatorBottom = !filteredPages[index + 1]?.isPageGroup && labelStyle?.label?.hidden;
-          return (
-            <>
-              {renderSeparatorTop && (
-                <div
-                  style={{
-                    margin: '10px 0',
-                    width: '100%',
-                    borderTop: '1px solid var(--slate7)',
-                  }}
-                  className="separator-line"
-                ></div>
-              )}
-              <RenderPageGroup
-                switchPageWrapper={switchPageWrapper}
-                homePageId={homePageId}
-                currentPageId={currentPageId}
-                key={page.id}
-                pages={page.children}
-                pageGroup={page}
-                currentPage={currentPage}
-                labelStyle={labelStyle}
-                computeStyles={computeStyles}
-                darkMode={darkMode}
-              />
-              {renderSeparatorBottom && (
-                <div
-                  style={{
-                    margin: '10px 0',
-                    width: '100%',
-                    borderBottom: '1px solid var(--slate7)',
-                  }}
-                  className="separator-line"
-                ></div>
-              )}
-            </>
-          );
-        } else if (!page.isPageGroup) {
-          return (
-            <RenderPage
-              key={page.handle}
-              page={page}
-              currentPageId={currentPageId}
-              switchPageWrapper={switchPageWrapper}
-              labelStyle={labelStyle}
-              computeStyles={computeStyles}
-              darkMode={darkMode}
-              homePageId={homePageId}
-            />
-          );
-        }
-      })}
-      {/* </Accordion> */}
-    </div>
-  );
-};
diff --git a/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx b/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx
index e914a9bee4..cc1fd83430 100644
--- a/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx
+++ b/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx
@@ -71,7 +71,7 @@ const PreviewSettings = ({ isMobileLayout, showHeader, darkMode }) => {
                 onClick={props.onClick}
                 data-cy="preview-settings"
               >
-                <Icon name="settings" height={12} width={12} fill="#889099" />
+                <Icon name="settings" height={12} width={12} fill="var(--icon-weak)" />
               </span>
             </div>
           )}
@@ -125,7 +125,7 @@ const PreviewSettings = ({ isMobileLayout, showHeader, darkMode }) => {
       </span>
       <OverlayTrigger rootClose trigger="click" placement="bottom" overlay={renderOverlay()}>
         <span style={{ marginLeft: '12px', cursor: 'pointer' }} data-cy="preview-settings">
-          <Icon name="settings" height={12} width={12} fill="#889099" />
+          <Icon name="settings" height={12} width={12} fill="var(--icon-weak)" />
         </span>
       </OverlayTrigger>
     </div>
diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx
index 2995858f1a..a9b8cdc856 100644
--- a/frontend/src/AppBuilder/Viewer/Viewer.jsx
+++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx
@@ -11,11 +11,12 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import AppCanvas from '@/AppBuilder/AppCanvas';
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
-import ViewerSidebarNavigation from './ViewerSidebarNavigation';
 import { shallow } from 'zustand/shallow';
 import Popups from '../Popups';
 import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
+import { getPatToken, setPatToken } from '@/AppBuilder/EmbedApp';
 import Spinner from '@/_ui/Spinner';
+import toast from 'react-hot-toast';
 
 export const Viewer = ({
   id: appId,
@@ -48,6 +49,7 @@ export const Viewer = ({
     isMaintenanceOn,
     setIsViewer,
     toggleCurrentLayout,
+    isReleasedVersionId,
   } = useStore(
     (state) => ({
       isEditorLoading: state.loaderStore.modules[moduleId].isEditorLoading,
@@ -68,6 +70,7 @@ export const Viewer = ({
       isMaintenanceOn: state.appStore.modules[moduleId].app.isMaintenanceOn,
       setIsViewer: state.setIsViewer,
       toggleCurrentLayout: state.toggleCurrentLayout,
+      isReleasedVersionId: state?.releasedVersionId == state.currentVersionId || state.isVersionReleased,
     }),
     shallow
   );
@@ -100,6 +103,9 @@ export const Viewer = ({
     localStorage.setItem('isPagesSidebarPinned', JSON.stringify(newValue));
   }, [isSidebarPinned]);
 
+  const { definition: { properties = {} } = {} } = pageSettings ?? {};
+  const { position, hideHeader } = properties ?? {};
+
   const canvasRef = useRef(null);
   const isLoading = false;
   const isMobilePreviewMode = selectedVersion?.id && currentLayout === 'mobile';
@@ -115,6 +121,17 @@ export const Viewer = ({
     console.log('setAppVersionCurrentEnvironment', environment);
   }, []);
 
+  useEffect(() => {
+    if (window.name && !getPatToken()) {
+      try {
+        const patToken = window.name;
+        setPatToken(patToken); // restore it in memory
+      } catch (e) {
+        console.error('Invalid PAT in window.name');
+      }
+    }
+  }, []);
+
   useEffect(() => {
     updateCanvasHeight(currentPageComponents, moduleId);
   }, [currentPageComponents, moduleId, updateCanvasHeight]);
@@ -193,7 +210,12 @@ export const Viewer = ({
         <ErrorBoundary>
           <Suspense fallback={<div>Loading...</div>}>
             <div
-              className={cx('viewer wrapper', { 'mobile-layout': currentLayout, 'theme-dark dark-theme': darkMode })}
+              className={cx('viewer wrapper', {
+                'mobile-layout': currentLayout,
+                'theme-dark dark-theme': darkMode,
+                'offset-top-bar-navigation': !isReleasedVersionId,
+                'mobile-view': currentLayout === 'mobile',
+              })}
             >
               <DndProvider backend={HTML5Backend}>
                 <ModuleProvider moduleId={moduleId} isModuleMode={moduleMode} appType={appType} isModuleEditor={false}>
@@ -207,8 +229,8 @@ export const Viewer = ({
                         }}
                       >
                         <div className={`areas d-flex flex-rows app-${appId}`}>
-                          {currentLayout !== 'mobile' && !hideSidebar && !moduleMode && (
-                            <ViewerSidebarNavigation
+                          {/* {currentLayout !== 'mobile' && !isPagesSidebarHidden && (
+                            <PagesSidebarNavigation
                               showHeader={showHeader}
                               isMobileDevice={currentLayout === 'mobile'}
                               pages={pages}
@@ -218,7 +240,7 @@ export const Viewer = ({
                               toggleSidebarPinned={toggleSidebarPinned}
                               switchPage={switchPage}
                             />
-                          )}
+                          )} */}
 
                           <div
                             className={cx('flex-grow-1 d-flex justify-content-center canvas-box', {
@@ -227,21 +249,26 @@ export const Viewer = ({
                             })}
                             style={{
                               backgroundColor: isMobilePreviewMode ? '#ACB2B9' : 'unset',
-                              marginLeft: hideSidebar || currentLayout === 'mobile' ? 'auto' : '210px',
+                              marginLeft:
+                                isPagesSidebarHidden || currentLayout === 'mobile'
+                                  ? 'auto'
+                                  : position === 'top'
+                                  ? '0px'
+                                  : '226px',
                             }}
                           >
                             <div
                               className="canvas-area"
                               ref={canvasRef}
                               style={{
-                                width: isMobilePreviewMode ? '450px' : currentCanvasWidth,
-                                maxWidth: isMobilePreviewMode ? '450px' : computeCanvasMaxWidth(),
+                                width: isMobilePreviewMode ? '390px' : currentCanvasWidth,
+                                maxWidth: isMobilePreviewMode ? '390px' : computeCanvasMaxWidth(),
                                 margin: 0,
                                 padding: 0,
                                 position: 'relative',
                               }}
                             >
-                              {currentLayout === 'mobile' && isMobilePreviewMode && !moduleMode && (
+                              {currentLayout === 'mobile' && isMobilePreviewMode && (
                                 <MobileHeader
                                   showHeader={showHeader && isAppLoaded}
                                   appName={appName}
@@ -255,10 +282,14 @@ export const Viewer = ({
                                 />
                               )}
                               <AppCanvas
+                                moduleId={moduleId}
                                 isViewerSidebarPinned={isSidebarPinned}
-                                isViewer={true}
+                                toggleSidebarPinned={toggleSidebarPinned}
                                 appId={appId}
                                 appType={appType}
+                                isViewer={true}
+                                switchDarkMode={changeToDarkMode}
+                                darkMode={darkMode}
                               />
                             </div>
                             {isMobilePreviewMode && <div className="hide-drawer-transition" style={{ right: 0 }}></div>}
@@ -270,11 +301,11 @@ export const Viewer = ({
                   </div>
                 </ModuleProvider>
               </DndProvider>
-            </div >
-          </Suspense >
+            </div>
+          </Suspense>
           <Popups darkMode={darkMode} />
-        </ErrorBoundary >
-      </div >
+        </ErrorBoundary>
+      </div>
     );
   }
 };
diff --git a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx b/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx
deleted file mode 100644
index 6a64c6766b..0000000000
--- a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import cx from 'classnames';
-import * as Icons from '@tabler/icons-react';
-// eslint-disable-next-line import/no-unresolved
-import FolderList from '@/_ui/FolderList/FolderList';
-import { ButtonSolid } from '@/_ui/AppButton/AppButton';
-import useStore from '@/AppBuilder/_stores/store';
-import { APP_HEADER_HEIGHT } from '../AppCanvas/appCanvasConstants';
-import OverflowTooltip from '@/_components/OverflowTooltip';
-import { RenderPageAndPageGroup } from './PageGroup';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
-
-export const ViewerSidebarNavigation = ({
-  isMobileDevice,
-  pages,
-  currentPageId,
-  switchPage,
-  darkMode,
-  showHeader,
-  isSidebarPinned,
-  toggleSidebarPinned,
-}) => {
-  const { moduleId } = useModuleContext();
-  const { definition: { styles = {}, properties = {} } = {} } = useStore((state) => state.pageSettings) || {};
-  const selectedVersionName = useStore((state) => state.selectedVersion?.name);
-  const selectedEnvironmentName = useStore((state) => state.selectedEnvironment?.name);
-  const homePageId = useStore((state) => state.appStore.modules[moduleId].app.homePageId);
-  const license = useStore((state) => state.license);
-
-  if (isMobileDevice) {
-    return null;
-  }
-  const computeStyles = (isSelected, isHovered) => {
-    const baseStyles = {
-      pill: {
-        borderRadius: `${styles.pillRadius.value}px`,
-      },
-      icon: {
-        color: !styles.iconColor.isDefault && styles.iconColor.value,
-        fill: !styles.iconColor.isDefault && styles.iconColor.value,
-      },
-    };
-
-    switch (true) {
-      case isSelected: {
-        return {
-          ...baseStyles,
-          text: {
-            color: !styles.selectedTextColor.isDefault && styles.selectedTextColor.value,
-          },
-          icon: {
-            stroke: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
-            color: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
-            fill: !styles.selectedIconColor.isDefault && styles.selectedIconColor.value,
-          },
-          pill: {
-            background: !styles.pillSelectedBackgroundColor.isDefault && styles.pillSelectedBackgroundColor.value,
-            ...baseStyles.pill,
-          },
-        };
-      }
-      case isHovered: {
-        return {
-          ...baseStyles,
-          pill: {
-            background: !styles.pillHoverBackgroundColor.isDefault && styles.pillHoverBackgroundColor.value,
-            ...baseStyles.pill,
-          },
-        };
-      }
-      default: {
-        return {
-          text: {
-            color: !styles.textColor.isDefault && styles.textColor.value,
-          },
-          icon: {
-            color: !styles.iconColor.isDefault && styles.iconColor.value,
-            fill: !styles.iconColor.isDefault && styles.iconColor.value,
-          },
-        };
-      }
-    }
-  };
-
-  const labelStyle = {
-    icon: {
-      hidden: properties?.style === 'text',
-    },
-    label: {
-      hidden: properties?.style === 'icon',
-    },
-  };
-
-  const switchPageWrapper = (pageId) => {
-    const queryParams = {
-      version: selectedVersionName,
-      env: selectedEnvironmentName,
-    };
-    switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams), moduleId);
-  };
-
-  const isLicensed =
-    !_.get(license, 'featureAccess.licenseStatus.isExpired', true) &&
-    _.get(license, 'featureAccess.licenseStatus.isLicenseValid', false);
-
-  return (
-    <div
-      className={cx('navigation-area', {
-        close: !isSidebarPinned && properties?.collapsable,
-        'sidebar-overlay': !isSidebarPinned && properties?.collapsable,
-        'icon-only': labelStyle?.label?.hidden,
-      })}
-      style={{
-        width: 200,
-        position: 'fixed',
-        height: `calc(100% - ${showHeader ? APP_HEADER_HEIGHT : 0}px)`,
-        top: showHeader ? '47px' : '0px',
-        bottom: '0px',
-        background: !styles?.backgroundColor?.isDefault && styles?.backgroundColor?.value,
-        border: `${styles?.pillRadius?.value}px`,
-        borderRight: !styles?.borderColor?.isDefault ? `1px solid ${styles?.borderColor?.value}` : '',
-      }}
-    >
-      <div className="position-relative" style={{ height: '100%' }}>
-        <ButtonSolid
-          onClick={() => {
-            toggleSidebarPinned();
-          }}
-          as="a"
-          variant="tertiary"
-          className={cx('left-sidebar-header-btn pin', { 'd-none': !properties?.collapsable })}
-          fill={`var(--slate12)`}
-          darkMode={darkMode}
-          leftIcon={isSidebarPinned ? 'unpin01' : 'pin'}
-          iconWidth="18"
-        ></ButtonSolid>
-        {isLicensed ? (
-          <RenderPageAndPageGroup
-            switchPageWrapper={switchPageWrapper}
-            pages={pages}
-            labelStyle={labelStyle}
-            computeStyles={computeStyles}
-            darkMode={darkMode}
-            switchPage={switchPage}
-          />
-        ) : (
-          <div className={cx('page-handler-wrapper', { 'dark-theme': darkMode })}>
-            {pages.map((page) => {
-              const isHomePage = page.id === homePageId;
-              const iconName = isHomePage && !page.icon ? 'IconHome2' : page.icon;
-              // eslint-disable-next-line import/namespace
-              const IconElement = Icons?.[iconName] ?? Icons?.['IconFileDescription'];
-              return page.hidden || page.disabled || page?.restricted ? null : (
-                <FolderList
-                  key={page.handle}
-                  onClick={() => switchPageWrapper(page?.id)}
-                  selectedItem={page?.id === currentPageId}
-                  CustomIcon={!labelStyle?.icon?.hidden && IconElement}
-                  customStyles={computeStyles}
-                  darkMode={darkMode}
-                >
-                  {!labelStyle?.label?.hidden && (
-                    <span data-cy={`pages-name-${String(page?.name).toLowerCase()}`}>
-                      <OverflowTooltip style={{ width: '110px' }} childrenClassName={'mx-2 page-name'}>
-                        {page.name}
-                      </OverflowTooltip>
-                    </span>
-                  )}
-                </FolderList>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ViewerSidebarNavigation;
diff --git a/frontend/src/AppBuilder/Viewer/viewer.scss b/frontend/src/AppBuilder/Viewer/viewer.scss
index 5f70a4a19f..30d01411db 100644
--- a/frontend/src/AppBuilder/Viewer/viewer.scss
+++ b/frontend/src/AppBuilder/Viewer/viewer.scss
@@ -52,9 +52,17 @@
 .released-version-no-header-mbl-preview {
   position: absolute;
   left: 50%;
-  border-radius: 100px;
   padding : 2px 8px;
+  background-color: unset !important;
   z-index: 1000;
+
+  .preview-chip {
+    color: var(--text-on-solid) !important;
+  }
+  .preview-settings {
+    margin-left: 6px;
+    padding: 4px;
+  }
 }
 
 .preview-settings-overlay {
@@ -121,11 +129,6 @@
   z-index: 1201;
 }
 
-.bm-menu-wrap,
-.bm-overlay {
-  right: calc(50vw - 225px) !important;
-  width: calc(450px - 68px) !important;
-}
 
 .powered-with-tj {
   cursor: pointer;
@@ -160,6 +163,39 @@
       width: 100%;
     }
 
+    &.mobile-view {
+      .navbar, .header {
+        height: 60px !important;
+        max-height: 60px !important;
+      }
+      .header {
+        box-shadow: var(--elevation-100-box-shadow);
+      }
+      .preview-settings-mobile {
+        height: 44px !important;
+        header {
+          height: 44px !important;
+
+          .header-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: unset !important;
+            padding: 0px !important;
+            
+            .released-version-no-header-mbl-preview {
+              position: unset !important;
+            }
+          }
+        }
+      }
+
+      .mobile-nav-container {
+        .header-container {
+          background-color: unset !important;
+        }
+      }
+    }
 
     .canvas-container::-webkit-scrollbar {
       // width: 0;
@@ -178,8 +214,6 @@
 
 #page-settings-tabpane-styles {
   .accordion-item {
-    margin-bottom: 10px;
-    border-radius: 5px;
     overflow: hidden;
   }
 
@@ -187,7 +221,6 @@
     width: 100%;
     text-align: left;
     border: none;
-    padding: 10px 15px;
     font-size: 16px;
     cursor: pointer;
     display: flex;
@@ -197,11 +230,10 @@
 }
 
 .page-group-collapse{
-  bottom: 7px;
-  right: 12px;
-  position: absolute;
+  // right: 12px;
+  // position: absolute;
   display: block !important;
   &.expanded{
-    transform: rotate(60deg);
+    transform: rotate(0deg) !important;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js
index 21c68480ea..00ad0ab573 100644
--- a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js
+++ b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js
@@ -66,68 +66,95 @@ import {
 } from '../widgets';
 
 export const widgets = [
-  tableConfig,
+  // Buttons
   buttonConfig,
+  buttonGroupConfig,
+
+  //Data
+  tableConfig,
   chartConfig,
-  modalConfig,
-  modalV2Config,
+
+  // Layouts
   formConfig,
+  modalV2Config,
+  containerConfig,
+  tabsConfig,
+  listviewConfig,
+  calendarConfig,
+  kanbanConfig,
+
+  //Text inputs
   textinputConfig,
-  numberinputConfig,
-  passinputConfig,
   emailinputConfig,
+  passinputConfig,
+  textareaConfig,
+  richtextareaConfig,
+
+  //Number inputs
+  numberinputConfig,
   phoneinputConfig,
   currencyinputConfig,
-  datepickerConfig,
-  datetimePickerV2Config,
+  rangeSliderConfig,
+  starratingConfig,
+
+  //Select inputs
+  dropdownV2Config,
+  multiselectV2Config,
+  checkboxConfig,
+  toggleSwitchV2Config,
+  radiobuttonV2Config,
+  treeSelectConfig,
+
+  //Date and time inputs
   datePickerV2Config,
   timePickerConfig,
-  checkboxConfig,
-  radiobuttonConfig,
-  radiobuttonV2Config,
-  toggleswitchConfig,
-  toggleSwitchV2Config,
-  textareaConfig,
+  datetimePickerV2Config,
   daterangepickerConfig,
-  textConfig,
-  imageConfig,
-  containerConfig,
-  dropdownConfig,
-  dropdownV2Config,
-  multiselectConfig,
-  multiselectV2Config,
-  richtextareaConfig,
-  mapConfig,
-  qrscannerConfig,
-  starratingConfig,
-  dividerConfig,
-  filepickerConfig,
-  calendarConfig,
-  iframeConfig,
-  codeEditorConfig,
-  tabsConfig,
-  timerConfig,
-  listviewConfig,
-  tagsConfig,
-  paginationConfig,
-  circularProgressbarConfig,
-  spinnerConfig,
-  statisticsConfig,
-  rangeSliderConfig,
-  timelineConfig,
-  svgImageConfig,
-  htmlConfig,
-  verticalDividerConfig,
-  customComponentConfig,
-  buttonGroupConfig,
-  pdfConfig,
-  stepsConfig,
-  kanbanConfig,
-  colorPickerConfig,
-  treeSelectConfig,
+
+  //Navigation
   linkConfig,
+  stepsConfig,
+  paginationConfig,
+
+  //Media
   iconConfig,
+  imageConfig,
+  svgImageConfig,
+  pdfConfig,
+  mapConfig,
+
+  //Presentation
+  textConfig,
+  tagsConfig,
+  circularProgressbarConfig,
+  dividerConfig,
+  verticalDividerConfig,
+  statisticsConfig,
+  timelineConfig,
+  timerConfig,
+  spinnerConfig,
+
+  //Custom
+  customComponentConfig,
+  htmlConfig,
+  iframeConfig,
+
+  //Miscellaneous
+  filepickerConfig,
+  codeEditorConfig,
+  colorPickerConfig,
   boundedBoxConfig,
+  qrscannerConfig,
+
+  //Legacy
+  modalConfig,
+  datepickerConfig,
+  radiobuttonConfig,
+  toggleswitchConfig,
+  dropdownConfig,
+  multiselectConfig,
+
+  //Module
   moduleContainerConfig,
   moduleViewerConfig,
 ];
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/button.js b/frontend/src/AppBuilder/WidgetManager/widgets/button.js
index d5b6a58214..b945b737ed 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/button.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/button.js
@@ -219,11 +219,11 @@ export const buttonConfig = {
     events: [],
     styles: {
       textColor: { value: '#FFFFFF' },
-      borderColor: { value: 'var(--primary-brand)' },
-      loaderColor: { value: '#FFFFFF' },
+      borderColor: { value: 'var(--cc-primary-brand)' },
+      loaderColor: { value: 'var(--cc-surface1-surface)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: 'var(--primary-brand)' },
-      iconColor: { value: '#FFFFFF' },
+      backgroundColor: { value: 'var(--cc-primary-brand)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
index 24690ebfca..72f675df97 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@@ -120,7 +120,7 @@ export const buttonGroupConfig = {
       displayName: 'Selected background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     alignment: {
@@ -169,14 +169,14 @@ export const buttonGroupConfig = {
     },
     events: [],
     styles: {
-      backgroundColor: { value: '' },
-      textColor: { value: '' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      textColor: { value: 'var(--cc-primary-text)' },
       visibility: { value: '{{true}}' },
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
       padding: { value: 'default' },
-      selectedBackgroundColor: { value: 'var(--primary-brand)' },
+      selectedBackgroundColor: { value: 'var(--cc-primary-brand)' },
       alignment: { value: 'left' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
index 81dbd2547a..66b5b21e98 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
@@ -45,7 +45,7 @@ export const chartConfig = {
         schema: {
           type: 'string',
         },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     showAxes: {
@@ -136,7 +136,7 @@ export const chartConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background color',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
     },
     padding: {
       type: 'code',
@@ -192,7 +192,7 @@ export const chartConfig = {
     },
     properties: {
       title: { value: 'This title can be changed' },
-      markerColor: { value: 'var(--primary-brand)' },
+      markerColor: { value: 'var(--cc-primary-brand)' },
       showAxes: { value: '{{true}}' },
       showGridLines: { value: '{{true}}' },
       plotFromJson: { value: '{{false}}' },
@@ -228,7 +228,7 @@ export const chartConfig = {
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       padding: { value: '50' },
       borderRadius: { value: '{{4}}' },
       visibility: { value: '{{true}}' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js b/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js
index ca4e740885..bff6b026d8 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js
@@ -196,11 +196,11 @@ export const checkboxConfig = {
     events: [],
     styles: {
       disabledState: { value: '{{false}}' },
-      textColor: { value: '#1B1F24' },
-      checkboxColor: { value: 'var(--primary-brand)' },
-      uncheckedColor: { value: '#E4E7EB' },
-      borderColor: { value: '#CCD1D5' },
-      handleColor: { value: '#FFFFFF' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      checkboxColor: { value: 'var(--cc-primary-brand)' },
+      uncheckedColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
       alignment: { value: 'right' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js b/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js
index 2babc27a12..ee30a2c2a4 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js
@@ -33,10 +33,10 @@ export const circularProgressbarConfig = {
   styles: {
     color: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
+      displayName: 'Color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     textColor: {
@@ -44,7 +44,7 @@ export const circularProgressbarConfig = {
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     textSize: {
@@ -104,8 +104,8 @@ export const circularProgressbarConfig = {
     },
     events: [],
     styles: {
-      color: { value: 'var(--primary-brand)' },
-      textColor: { value: '' },
+      color: { value: 'var(--cc-primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
       textSize: { value: '{{16}}' },
       strokeWidth: { value: '{{8}}' },
       counterClockwise: { value: '{{false}}' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js b/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js
index eb76891af0..45386c8a33 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/codeEditor.js
@@ -20,6 +20,15 @@ export const codeEditorConfig = {
         defaultValue: true,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     mode: {
       type: 'code',
       displayName: 'Mode',
@@ -80,6 +89,7 @@ export const codeEditorConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      dynamicHeight: { value: '{{false}}' },
       enableLineNumber: { value: '{{true}}' },
       mode: { value: 'javascript' },
       placeholder: { value: '' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js
index 6255f81202..10ade7bd76 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js
@@ -4,7 +4,7 @@ export const colorPickerConfig = {
   description: 'Choose colors from a palette',
   component: 'ColorPicker',
   properties: {
-    defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
+    defaultColor: { type: 'color', displayName: 'Default color' },
   },
   defaultSize: {
     width: 9,
@@ -14,9 +14,7 @@ export const colorPickerConfig = {
     {
       displayName: 'Set Color',
       handle: 'setColor',
-      params: [
-        { handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
-      ],
+      params: [{ handle: 'color', displayName: 'Color', defaultValue: '#ffffff', type: 'color' }],
     },
   ],
   others: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/container.js b/frontend/src/AppBuilder/WidgetManager/widgets/container.js
index 2bff0d84c5..545d772829 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/container.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/container.js
@@ -21,6 +21,15 @@ export const containerConfig = {
         defaultValue: false,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     visibility: {
       type: 'toggle',
       displayName: 'Visibility',
@@ -61,12 +70,13 @@ export const containerConfig = {
       displayName: 'ContainerText',
       properties: ['text'],
       accessorKey: 'text',
-      styles: ['fontWeight', 'textSize', 'textColor'],
+      styles: ['fontWeight', 'textSize', 'textColor', 'boxShadow'],
       defaultValue: {
         text: 'Container title',
         fontWeight: 'bold',
         textSize: 16,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
+        boxShadow: '0px 0px 0px 0px #00000090',
       },
     },
   ],
@@ -77,7 +87,7 @@ export const containerConfig = {
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
       accordian: 'container',
     },
@@ -86,7 +96,7 @@ export const containerConfig = {
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ddd',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
       accordian: 'header',
     },
@@ -95,19 +105,19 @@ export const containerConfig = {
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-default-border)',
       },
       accordian: 'container',
     },
     borderRadius: {
       type: 'numberInput',
-      displayName: 'Border',
+      displayName: 'Border radius',
       validation: {
         schema: {
           type: 'union',
           schemas: [{ type: 'string' }, { type: 'number' }],
         },
-        defaultValue: 4,
+        defaultValue: 6,
       },
       accordian: 'container',
     },
@@ -150,15 +160,16 @@ export const containerConfig = {
       loadingState: { value: `{{false}}` },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      dynamicHeight: { value: '{{false}}' },
       headerHeight: { value: `{{80}}` },
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
-      headerBackgroundColor: { value: '#fff' },
-      borderRadius: { value: '4' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderRadius: { value: '6' },
       headerHeight: { value: '{{80}}' },
-      borderColor: { value: '#fff' },
+      borderColor: { value: 'var(--cc-default-border)' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js
index 64a8f2df57..efd53844f9 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/currencyinput.js
@@ -88,9 +88,9 @@ export const currencyinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -140,33 +140,33 @@ export const currencyinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -177,9 +177,9 @@ export const currencyinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -284,17 +284,17 @@ export const currencyinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/customComponent.js b/frontend/src/AppBuilder/WidgetManager/widgets/customComponent.js
index cc1dae2b3e..2677b71c25 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/customComponent.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/customComponent.js
@@ -37,9 +37,9 @@ export const customComponentConfig = {
         value: `{{{ title: 'Hi! There', buttonText: 'Update Title'}}}`,
       },
       code: {
-        value: `import React from 'https://cdn.skypack.dev/react';
-  import ReactDOM from 'https://cdn.skypack.dev/react-dom';
-  import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
+        value: `import React from 'https://esm.sh/react@17.0.2';
+  import ReactDOM from 'https://esm.sh/react-dom@17.0.2';
+  import { Button, Container } from 'https://esm.sh/@material-ui/core@4.12.4?deps=react@17.0.2';
   const MyCustomComponent = ({data, updateData, runQuery}) => (
     <Container>
         <h1>{data.title}</h1>
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js
index ea56598d2e..46a3c794c7 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js
@@ -170,8 +170,8 @@ export const datePickerV2Config = {
   styles: {
     labelColor: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -222,31 +222,31 @@ export const datePickerV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -262,7 +262,7 @@ export const datePickerV2Config = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -334,23 +334,23 @@ export const datePickerV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       alignment: { value: 'side' },
       direction: { value: 'left' },
       labelWidth: { value: '20' },
       auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       icon: { value: 'IconCalendarEvent' },
       iconVisibility: { value: true },
       iconDirection: { value: 'left' },
       fieldBorderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js
index 2fcd5bfb42..72fe4a52a8 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js
@@ -200,8 +200,8 @@ export const daterangepickerConfig = {
   styles: {
     labelColor: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -252,31 +252,31 @@ export const daterangepickerConfig = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -292,7 +292,7 @@ export const daterangepickerConfig = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -365,23 +365,23 @@ export const daterangepickerConfig = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       alignment: { value: 'side' },
       direction: { value: 'left' },
       labelWidth: { value: '20' },
       auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       icon: { value: 'IconCalendarMonth' },
       iconVisibility: { value: true },
       iconDirection: { value: 'left' },
       borderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js
index 658cc31c01..a737486e3b 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js
@@ -215,8 +215,8 @@ export const datetimePickerV2Config = {
   styles: {
     labelColor: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -267,31 +267,31 @@ export const datetimePickerV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -307,7 +307,7 @@ export const datetimePickerV2Config = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -385,23 +385,23 @@ export const datetimePickerV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       alignment: { value: 'side' },
       direction: { value: 'left' },
       labelWidth: { value: '20' },
       auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       icon: { value: 'IconCalendarTime' },
       iconVisibility: { value: true },
       iconDirection: { value: 'left' },
       fieldBorderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js
index 33b64d9f56..378ca06a02 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/divider.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/divider.js
@@ -65,11 +65,11 @@ export const dividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-default-border)',
       },
       accordian: 'Divider',
     },
@@ -100,7 +100,7 @@ export const dividerConfig = {
       isFxNotRequired: true,
     },
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Label Color',
       validation: {
         schema: { type: 'string' },
@@ -146,10 +146,10 @@ export const dividerConfig = {
     },
     events: [],
     styles: {
-      dividerColor: { value: '#CCD1D5' },
+      dividerColor: { value: 'var(--cc-default-border)' },
       labelAlignment: { value: 'center' },
       dividerStyle: { value: 'solid' },
-      labelColor: { value: '#6A727C' },
+      labelColor: { value: 'var(--cc-placeholder-text)' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js
index b8b090af24..d4424e23fb 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js
@@ -134,7 +134,7 @@ export const dropdownConfig = {
         schema: {
           type: 'string',
         },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     disabledState: {
@@ -200,6 +200,7 @@ export const dropdownConfig = {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       justifyContent: { value: 'left' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
index d7534b25a8..473985efbe 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
@@ -127,7 +127,7 @@ export const dropdownV2Config = {
     labelColor: {
       type: 'colorSwatches',
       displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -179,31 +179,31 @@ export const dropdownV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -335,14 +335,14 @@ export const dropdownV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       labelWidth: { value: '33' },
       auto: { value: '{{true}}' },
       fieldBorderRadius: { value: '6' },
-      selectedTextColor: { value: '#1B1F24' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      errTextColor: { value: '#D72D39' },
-      fieldBackgroundColor: { value: '#fff' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
       direction: { value: 'left' },
       alignment: { value: 'side' },
       padding: { value: 'default' },
@@ -350,7 +350,7 @@ export const dropdownV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js
index 825340616f..25f83722ba 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js
@@ -80,9 +80,9 @@ export const emailinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -132,33 +132,33 @@ export const emailinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -169,9 +169,9 @@ export const emailinputConfig = {
       visibility: true,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -271,17 +271,17 @@ export const emailinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CCD1D5' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js
index 8df492daa5..0854d156cf 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/filepicker.js
@@ -16,86 +16,72 @@ export const filepickerConfig = {
       handle: 'clearFiles',
       displayName: 'Clear Files',
     },
+    {
+      handle: 'setFileName',
+      displayName: 'Set File Name',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set Visibility',
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set Loading',
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set Disable',
+    },
   ],
   properties: {
-    instructionText: {
+    label: {
       type: 'code',
-      displayName: 'Instruction text',
+      displayName: 'Label',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'Instruction text',
+        defaultValue: 'Label',
       },
+      accordian: 'Data',
+    },
+    instructionText: {
+      type: 'code',
+      displayName: 'Placeholder',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'Drag and drop files or click here to upload',
+      },
+      accordian: 'Data',
     },
     enableDropzone: {
-      type: 'code',
+      type: 'toggle',
       displayName: 'Use drop zone',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    enablePicker: {
-      type: 'code',
-      displayName: 'Use file picker',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    enableMultiple: {
-      type: 'code',
-      displayName: 'Pick multiple files',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      accordian: 'Data',
     },
-    maxFileCount: {
-      type: 'code',
-      displayName: 'Max file count',
+    enablePicker: {
+      type: 'toggle',
+      displayName: 'Use file picker',
       validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 2,
+        schema: { type: 'boolean' },
+        defaultValue: false,
       },
+      accordian: 'Data',
     },
-    fileType: {
-      type: 'code',
-      displayName: 'Accept file types',
+    enableMultiple: {
+      type: 'toggle',
+      displayName: 'Allow picking multiple files',
       validation: {
-        schema: {
-          type: 'string',
-        },
-        defaultValue: 'image/*',
-      },
-    },
-    maxSize: {
-      type: 'code',
-      displayName: 'Max size limit (Bytes)',
-      validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 1048576,
-      },
-    },
-    minSize: {
-      type: 'code',
-      displayName: 'Min size limit (Bytes)',
-      validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 50,
+        schema: { type: 'boolean' },
+        defaultValue: false,
       },
+      accordian: 'Data',
     },
     parseContent: {
       type: 'toggle',
-      displayName: 'Parse content',
+      displayName: 'Enable parsing',
       validation: {
         schema: {
           type: 'boolean',
@@ -122,26 +108,52 @@ export const filepickerConfig = {
         defaultValue: 'auto-detect',
       },
     },
-  },
-  events: {
-    onFileSelected: { displayName: 'On File Selected' },
-    onFileLoaded: { displayName: 'On File Loaded' },
-    onFileDeselected: { displayName: 'On File Deselected' },
-  },
-  styles: {
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Show loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
     visibility: {
       type: 'toggle',
       displayName: 'Visibility',
+      section: 'additionalActions',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
+        schema: { type: 'boolean' },
         defaultValue: true,
       },
     },
     disabledState: {
       type: 'toggle',
       displayName: 'Disable',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '',
+      },
+    },
+  },
+  events: {
+    onFileSelected: { displayName: 'On File Selected' },
+    onFileLoaded: { displayName: 'On File Loaded' },
+    onFileDeselected: { displayName: 'On File Deselected' },
+  },
+  validation: {
+    enableValidation: {
+      type: 'toggle',
+      displayName: 'Make this field mandatory',
       validation: {
         schema: {
           type: 'boolean',
@@ -149,21 +161,120 @@ export const filepickerConfig = {
         defaultValue: false,
       },
     },
-    borderRadius: {
+    fileType: {
       type: 'code',
-      displayName: 'Border radius',
+      displayName: 'Accept file types',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'image/*',
+      },
+    },
+    minSize: {
+      type: 'code',
+      displayName: 'Min size limit (Bytes)',
       validation: {
         schema: {
           type: 'union',
           schemas: [{ type: 'string' }, { type: 'number' }],
         },
-        defaultValue: 4,
+        defaultValue: 50,
+      },
+    },
+    maxSize: {
+      type: 'code',
+      displayName: 'Max size limit (Bytes)',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 1048576,
+      },
+    },
+    minFileCount: {
+      type: 'code',
+      displayName: 'Min file count',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 2,
+      },
+    },
+    maxFileCount: {
+      type: 'code',
+      displayName: 'Max file count',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 2,
       },
     },
   },
+  styles: {
+    dropzoneTitleColor: {
+      type: 'colorSwatches',
+      displayName: 'Title',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    dropzoneActiveColor: {
+      type: 'colorSwatches',
+      displayName: 'Active color',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    dropzoneErrorColor: {
+      type: 'colorSwatches',
+      displayName: 'Error color',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    containerBackgroundColor: {
+      type: 'colorSwatches',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'Container',
+    },
+    containerBorder: {
+      type: 'colorSwatches',
+      displayName: 'Border',
+      validation: { schema: { type: 'string' }, defaultValue: 'transparent' },
+      accordian: 'Container',
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border Radius',
+      validation: { schema: { type: 'number' }, defaultValue: 6 },
+      accordian: 'Container',
+    },
+    containerBoxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box shadow',
+      validation: { schema: { type: 'string' }, defaultValue: '0px 1px 3px rgba(0,0,0,0.1)' },
+      accordian: 'Container',
+    },
+    containerPadding: {
+      type: 'numberInput',
+      displayName: 'Padding',
+      validation: { schema: { type: 'string' }, defaultValue: 16 },
+      accordian: 'Container',
+    },
+  },
   exposedVariables: {
-    file: [{ name: '', content: '', dataURL: '', type: '', parsedData: '' }],
+    file: [{ name: '', content: '', dataURL: '', type: '', parsedValue: null }],
     isParsing: false,
+    isValid: true,
+    fileSize: 0,
+    isMandatory: false,
+    isLoading: false,
+    isVisible: true,
+    isDisabled: false,
   },
   definition: {
     others: {
@@ -171,22 +282,44 @@ export const filepickerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      label: { value: 'Upload files' },
       instructionText: { value: 'Drag and drop files here or click to select files' },
       enableDropzone: { value: '{{true}}' },
       enablePicker: { value: '{{true}}' },
-      maxFileCount: { value: '{{2}}' },
       enableMultiple: { value: '{{false}}' },
-      fileType: { value: '{{"image/*"}}' },
-      maxSize: { value: '{{1048576}}' },
-      minSize: { value: '{{50}}' },
       parseContent: { value: '{{false}}' },
       parseFileType: { value: 'auto-detect' },
+      loadingState: { value: '{{false}}' },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
-      borderRadius: { value: '{{4}}' },
+      borderRadius: { value: '{{6}}' },
+      dropzoneTitleColor: { value: 'var(--cc-primary-text)' },
+      dropzoneActiveColor: { value: 'var(--cc-primary-brand)' },
+      dropzoneErrorColor: { value: 'var(--cc-error-systemStatus)' },
+      containerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      containerBorder: { value: 'var(--cc-default-border)' },
+      containerBoxShadow: { value: '0px 1px 3px rgba(0,0,0,0.1)' },
+      containerPadding: { value: '16px' },
+    },
+    validation: {
+      enableValidation: { value: '{{false}}' },
+      fileType: { value: '{{}}' },
+      minSize: { value: '{{50}}' },
+      maxSize: { value: '{{51200000}}' },
+      minFileCount: { value: '{{0}}' },
+      maxFileCount: { value: '{{2}}' },
+    },
+    validation: {
+      enableValidation: { value: '{{false}}' },
+      fileType: { value: '{{}}' },
+      minSize: { value: '{{50}}' },
+      maxSize: { value: '{{51200000}}' },
+      minFileCount: { value: '{{0}}' },
+      maxFileCount: { value: '{{2}}' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/form.js b/frontend/src/AppBuilder/WidgetManager/widgets/form.js
index 7c558a73e8..bd337fa2e6 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/form.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/form.js
@@ -3,7 +3,7 @@ export const formConfig = {
   displayName: 'Form',
   description: 'Wrapper for multiple components',
   defaultSize: {
-    width: 13,
+    width: 15,
     height: 450,
   },
   defaultChildren: [
@@ -17,12 +17,13 @@ export const formConfig = {
       },
       properties: ['text'],
       accessorKey: 'text',
-      styles: ['fontWeight', 'textSize', 'textColor'],
+      styles: ['fontWeight', 'textSize', 'textColor', 'boxShadow'],
       defaultValue: {
         text: 'Form title',
         textSize: 16,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
         fontWeight: 'bold',
+        boxShadow: '0px 0px 0px 0px #00000090',
       },
     },
     {
@@ -40,46 +41,6 @@ export const formConfig = {
         padding: 'none',
       },
     },
-    {
-      componentName: 'TextInput',
-      layout: {
-        top: 20,
-        left: 1,
-        height: 40,
-        width: 41,
-      },
-      properties: ['placeholder', 'label'],
-      styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
-      defaultValue: {
-        placeholder: 'Enter your name',
-        label: 'Name',
-        width: '{{60}}',
-        direction: 'left',
-        alignment: 'side',
-        auto: '{{false}}',
-        padding: 'default',
-      },
-    },
-    {
-      componentName: 'NumberInput',
-      layout: {
-        top: 80,
-        left: 1,
-        height: 40,
-        width: 41,
-      },
-      properties: ['placeholder', 'label'],
-      styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
-      defaultValue: {
-        placeholder: 'Age',
-        label: 'Age',
-        width: '{{60}}',
-        direction: 'left',
-        alignment: 'side',
-        auto: '{{false}}',
-        padding: 'default',
-      },
-    },
   ],
   component: 'Form',
   others: {
@@ -87,9 +48,11 @@ export const formConfig = {
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    showHeader: { type: 'toggle', displayName: 'Header' },
+    showFooter: { type: 'toggle', displayName: 'Footer' },
     buttonToSubmit: {
       type: 'select',
-      displayName: 'Button to submit form',
+      displayName: 'Submit button',
       options: [{ name: 'None', value: 'none' }],
       validation: {
         schema: { type: 'string' },
@@ -100,6 +63,65 @@ export const formConfig = {
         value: false,
       },
     },
+    generateFormFrom: {
+      type: 'dropdownMenu',
+      displayName: 'Generate form from',
+      options: [
+        { name: 'Raw JSON', value: 'rawJson' },
+        { name: 'JSON schema', value: 'jsonSchema' },
+      ],
+      section: 'data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'object' }] } },
+      newLine: true,
+    },
+    JSONData: {
+      type: 'code',
+      displayName: '',
+      conditionallyRender: {
+        key: 'generateFormFrom',
+        value: 'rawJson',
+      },
+      section: 'data',
+      showLabel: false,
+      validation: {
+        schema: { type: 'object' },
+      },
+    },
+    newJsonSchema: {
+      type: 'code',
+      displayName: '',
+      conditionallyRender: {
+        key: 'generateFormFrom',
+        value: 'jsonSchema',
+      },
+      section: 'data',
+      showLabel: false,
+      validation: {
+        schema: { type: 'object' },
+      },
+    },
+    fields: {
+      type: 'array',
+      displayName: 'Table Columns',
+    },
+    validateOnSubmit: {
+      type: 'toggle',
+      displayName: 'Validate all fields on submission',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    resetOnSubmit: {
+      type: 'toggle',
+      displayName: 'Reset form on submission',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -109,20 +131,29 @@ export const formConfig = {
         defaultValue: false,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     advanced: {
       type: 'toggle',
       displayName: ' Use custom schema',
+      section: 'deprecated',
     },
     JSONSchema: {
       type: 'code',
       displayName: 'JSON Schema',
+      section: 'deprecated',
       conditionallyRender: {
         key: 'advanced',
         value: true,
       },
     },
-    showHeader: { type: 'toggle', displayName: 'Header' },
-    showFooter: { type: 'toggle', displayName: 'Footer' },
     headerHeight: {
       type: 'numberInput',
       displayName: 'Header height',
@@ -173,19 +204,19 @@ export const formConfig = {
   },
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     footerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Footer background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     backgroundColor: {
@@ -254,25 +285,39 @@ export const formConfig = {
     },
     properties: {
       loadingState: { value: '{{false}}' },
+      dynamicHeight: { value: '{{false}}' },
       advanced: { value: '{{false}}' },
       JSONSchema: {
         value:
           "{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
       },
+      newJsonSchema: {
+        value:
+          "{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
+      },
       showHeader: { value: '{{true}}' },
       showFooter: { value: '{{true}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       headerHeight: { value: 60 },
       footerHeight: { value: 60 },
+      validateOnSubmit: { value: '{{true}}' },
+      resetOnSubmit: { value: '{{true}}' },
+      generateFormFrom: '',
+      fields: {
+        value: [],
+      },
+      JSONData: {
+        value: undefined,
+      },
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      footerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       borderRadius: { value: '0' },
-      borderColor: { value: '#fff' },
-      headerBackgroundColor: { value: '#fff' },
-      footerBackgroundColor: { value: '#fff' },
+      borderColor: { value: 'var(--cc-default-border)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/image.js b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
index ca74e31d12..ead4078270 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/image.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
@@ -157,7 +157,7 @@ export const imageConfig = {
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
       accordian: 'Container',
     },
@@ -258,7 +258,7 @@ export const imageConfig = {
     styles: {
       imageFit: { value: 'contain' },
       imageShape: { value: 'none' },
-      backgroundColor: { value: '#FFFFFF' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       borderColor: { value: '' },
       borderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js b/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js
index cd39d0bd7b..f86b76d881 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/kanban.js
@@ -22,7 +22,7 @@ export const kanbanConfig = {
         text: '{{cardData.title}}',
         fontWeight: 'bold',
         textSize: 16,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
       },
     },
     {
@@ -38,7 +38,7 @@ export const kanbanConfig = {
       defaultValue: {
         text: '{{cardData.description}}',
         textSize: 14,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
       },
     },
   ],
@@ -157,7 +157,7 @@ export const kanbanConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
-      accentColor: { value: 'var(--primary-brand)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/link.js b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
index 16d5f13368..ba50ae50a4 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
@@ -78,7 +78,7 @@ export const linkConfig = {
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--cc-primary-brand)',
       },
       accordian: 'Link text',
     },
@@ -216,7 +216,7 @@ export const linkConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#4368E3' },
+      textColor: { value: 'var(--cc-primary-brand)' },
       textSize: { value: '{{14}}' },
       underline: { value: 'on-hover' },
       verticalAlignment: { value: 'center' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
index c3ebdcfa19..4ca2bd0e52 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/listview.js
@@ -61,6 +61,15 @@ export const listviewConfig = {
         defaultValue: "[{text: 'Sample text 1'}]",
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     mode: {
       type: 'select',
       displayName: 'Mode',
@@ -132,15 +141,15 @@ export const listviewConfig = {
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     borderColor: {
       type: 'colorSwatches',
-      displayName: 'Border color',
+      displayName: 'Border',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#dadcde',
+        defaultValue: 'var(--cc-default-border)',
       },
     },
     visibility: {
@@ -189,6 +198,7 @@ export const listviewConfig = {
       rowHeight: {
         value: '100',
       },
+      dynamicHeight: { value: '{{false}}' },
       visible: { value: '{{true}}' },
       showBorder: { value: '{{true}}' },
       rowsPerPage: { value: '{{10}}' },
@@ -196,8 +206,8 @@ export const listviewConfig = {
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
-      borderColor: { value: '#dadcde' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       borderRadius: { value: '{{4}}' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
index 3443c73c9b..90182b6494 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
@@ -85,7 +85,7 @@ export const modalConfig = {
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     headerTextColor: {
@@ -93,7 +93,7 @@ export const modalConfig = {
       displayName: 'Header title color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     bodyBackgroundColor: {
@@ -101,7 +101,7 @@ export const modalConfig = {
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     disabledState: {
@@ -170,12 +170,12 @@ export const modalConfig = {
     },
     events: [],
     styles: {
-      headerBackgroundColor: { value: '#ffffffff' },
-      headerTextColor: { value: '#000000' },
-      bodyBackgroundColor: { value: '#ffffffff' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      headerTextColor: { value: 'var(--cc-primary-text)' },
+      bodyBackgroundColor: { value: 'var(--cc-surface1-surface)' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
+      triggerButtonBackgroundColor: { value: 'var(--cc-primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js
index 2318a986f8..a9c95ce2e4 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js
@@ -116,7 +116,7 @@ export const modalV2Config = {
       defaultValue: {
         text: 'Modal title',
         textSize: 20,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
       },
     },
     {
@@ -129,11 +129,30 @@ export const modalV2Config = {
       },
       displayName: 'ModalFooterCancel',
       properties: ['text'],
-      styles: ['type', 'borderColor', 'padding'],
+      styles: [
+        'textColor',
+        'loaderColor',
+        'iconColor',
+        'borderRadius',
+        'iconVisibility',
+        'direction',
+        'icon',
+        'type',
+        'borderColor',
+        'padding',
+      ],
       defaultValue: {
+        textColor: '#000000',
+        loaderColor: 'var(--cc-surface1-surface)',
+        icon: 'IconAlignBoxBottomLeft',
         text: 'Button1',
         type: 'outline',
         borderColor: '#CCD1D5',
+        iconColor: 'var(--cc-default-icon)',
+        borderRadius: 6,
+        iconVisibility: false,
+        direction: 'left',
+        padding: 'default',
       },
     },
     {
@@ -154,31 +173,31 @@ export const modalV2Config = {
   ],
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     footerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Footer background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     bodyBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     triggerButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button background color',
       validation: {
         schema: { type: 'string' },
@@ -186,7 +205,7 @@ export const modalV2Config = {
       },
     },
     triggerButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button text color',
       validation: {
         schema: { type: 'string' },
@@ -255,10 +274,10 @@ export const modalV2Config = {
     },
     events: [],
     styles: {
-      headerBackgroundColor: { value: '#ffffffff' },
-      footerBackgroundColor: { value: '#ffffffff' },
-      bodyBackgroundColor: { value: '#ffffffff' },
-      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      footerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      bodyBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      triggerButtonBackgroundColor: { value: 'var(--cc-primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
index c9d89045aa..161f7bba83 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
@@ -197,7 +197,7 @@ export const multiselectV2Config = {
     labelColor: {
       type: 'colorSwatches',
       displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -250,32 +250,32 @@ export const multiselectV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
 
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -384,14 +384,14 @@ export const multiselectV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       labelWidth: { value: '33' },
       auto: { value: '{{true}}' },
       fieldBorderRadius: { value: '6' },
-      selectedTextColor: { value: '#1B1F24' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      errTextColor: { value: '#D72D39' },
-      fieldBackgroundColor: { value: '#fff' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
       direction: { value: 'left' },
       alignment: { value: 'side' },
       padding: { value: 'default' },
@@ -399,7 +399,7 @@ export const multiselectV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: 'var(--primary-brand)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js
index cba9c04cd1..261fad96e8 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js
@@ -74,7 +74,7 @@ export const numberinputConfig = {
     color: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -126,31 +126,31 @@ export const numberinputConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -163,7 +163,7 @@ export const numberinputConfig = {
     iconColor: {
       type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -277,13 +277,13 @@ export const numberinputConfig = {
     events: [],
     styles: {
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: 'var(--primary-brand)' },
-      errTextColor: { value: '#D72D39' },
-      textColor: { value: '#1B1F24' },
-      color: { value: '#1B1F24' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      color: { value: 'var(--cc-primary-text)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js
index fad0d00735..839bb01732 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js
@@ -86,7 +86,7 @@ export const passinputConfig = {
     color: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -138,31 +138,31 @@ export const passinputConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
-      accordian: 'field',
-    },
-    accentColor: {
-      type: 'colorSwatches',
-      displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
+      accordian: 'field',
+    },
+    accentColor: {
+      type: 'colorSwatches',
+      displayName: 'Accent',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -175,7 +175,7 @@ export const passinputConfig = {
     iconColor: {
       type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -276,16 +276,16 @@ export const passinputConfig = {
     events: [],
     styles: {
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: 'var(--primary-brand)' },
-      errTextColor: { value: '#D72D39' },
-      textColor: { value: '#1B1F24' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js
index 83e35ffc68..617d72738f 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js
@@ -85,9 +85,9 @@ export const phoneinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -137,33 +137,33 @@ export const phoneinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     borderRadius: {
@@ -270,16 +270,16 @@ export const phoneinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js
index 62a084d75a..3ae1fb5e65 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js
@@ -279,16 +279,16 @@ export const radiobuttonV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#11181C' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       direction: { value: 'left' },
       alignment: { value: 'side' },
       auto: { value: '{{false}}' },
       labelWidth: { value: '20' },
-      borderColor: { value: '#FFFFFF' },
-      switchOffBackgroundColor: { value: '#FFFFFF' },
-      switchOnBackgroundColor: { value: '#4368E3' },
-      handleColor: { value: '#FFFFFF' },
-      optionsTextColor: { value: '#11181C' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      switchOffBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      switchOnBackgroundColor: { value: 'var(--cc-primary-brand)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
+      optionsTextColor: { value: 'var(--cc-primary-text)' },
       padding: { value: 'default' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js b/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js
index 66d055ca5e..cb8f086b19 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js
@@ -57,7 +57,7 @@ export const radiobuttonConfig = {
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     activeColor: {
@@ -65,7 +65,7 @@ export const radiobuttonConfig = {
       displayName: 'Active color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     visibility: {
@@ -112,8 +112,8 @@ export const radiobuttonConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '' },
-      activeColor: { value: 'var(--primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      activeColor: { value: 'var(--cc-primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js b/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js
index 186ae7fbc7..00531a9a90 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js
@@ -12,9 +12,25 @@ export const rangeSliderConfig = {
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    enableTwoHandle: {
+      type: 'switch',
+      displayName: 'Slider type',
+      options: [
+        { displayName: 'Slider', value: 'slider' },
+        { displayName: 'Range slider', value: 'rangeSlider' },
+      ],
+      isFxNotRequired: true,
+      defaultValue: { value: 'slider' },
+      fullWidth: true,
+    },
+    label: {
+      type: 'code',
+      displayName: 'Label',
+      validation: { schema: { type: 'string' }, defaultValue: 'Label' },
+    },
     min: {
       type: 'number',
-      displayName: 'Min',
+      displayName: 'Min value',
       validation: {
         schema: { type: 'number' },
         defaultValue: 0,
@@ -22,67 +38,216 @@ export const rangeSliderConfig = {
     },
     max: {
       type: 'number',
-      displayName: 'Max',
+      displayName: 'Max value',
       validation: {
         schema: { type: 'number' },
         defaultValue: 100,
       },
     },
     value: {
-      type: 'code',
-      displayName: 'Value',
+      type: 'number',
+      displayName: 'Default value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'slider',
+      },
+
       validation: {
         schema: {
-          type: 'union',
-          schemas: [{ type: 'array', element: { type: 'number' } }, { type: 'number' }],
+          schema: { type: 'number' },
+          defaultValue: 50,
         },
-        defaultValue: 50,
       },
     },
-    enableTwoHandle: {
+    startValue: {
+      type: 'number',
+      displayName: 'Default start value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'rangeSlider',
+      },
+
+      validation: {
+        schema: {
+          schema: { type: 'number' },
+          defaultValue: 50,
+        },
+      },
+    },
+    endValue: {
+      type: 'number',
+      displayName: 'Default end value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'rangeSlider',
+      },
+
+      validation: {
+        schema: {
+          schema: { type: 'number' },
+          defaultValue: 80,
+        },
+      },
+    },
+    stepSize: {
+      type: 'number',
+      displayName: 'Step size',
+      validation: {
+        schema: { type: 'number' },
+        defaultValue: 1,
+      },
+    },
+    schema: {
+      type: 'code',
+      displayName: 'Set marks',
+    },
+    loadingState: {
       type: 'toggle',
-      displayName: 'Two handles',
+      displayName: 'Show loading state',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
     },
   },
   events: {
     onChange: { displayName: 'On change' },
   },
   styles: {
+    color: {
+      type: 'colorSwatches',
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'label',
+    },
+    alignment: {
+      type: 'switch',
+      displayName: 'Alignment',
+      validation: { schema: { type: 'string' }, defaultValue: 'side' },
+      options: [
+        { displayName: 'Side', value: 'side' },
+        { displayName: 'Top', value: 'top' },
+      ],
+      accordian: 'label',
+    },
+    direction: {
+      type: 'switch',
+      displayName: '',
+      validation: { schema: { type: 'string' }, defaultValue: 'left' },
+      showLabel: false,
+      isIcon: true,
+      options: [
+        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+      ],
+      accordian: 'label',
+      isFxNotRequired: true,
+    },
+    width: {
+      type: 'slider',
+      displayName: 'Width',
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    auto: {
+      type: 'checkbox',
+      displayName: 'auto',
+      showLabel: false,
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
     lineColor: {
       type: 'colorSwatches',
-      displayName: 'Line color',
+      displayName: 'Track',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
-      },
-    },
-    handleColor: {
-      type: 'colorSwatches',
-      displayName: 'Handle color',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: '#E4E7EB',
       },
+      accordian: 'slider',
     },
     trackColor: {
       type: 'colorSwatches',
-      displayName: 'Track color',
+      displayName: 'Accent',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
       },
+      accordian: 'slider',
     },
-    visibility: {
-      type: 'code',
-      displayName: 'Visibility',
+    handleColor: {
+      type: 'colorSwatches',
+      displayName: 'Handle',
       validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
+        schema: { type: 'string' },
+        defaultValue: '#FFFFFF',
       },
+      accordian: 'slider',
+    },
+    handleBorderColor: {
+      type: 'colorSwatches',
+      displayName: 'Handle border',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ACB2B9',
+      },
+      accordian: 'slider',
+    },
+    markerLabel: {
+      type: 'colorSwatches',
+      displayName: 'Marker label',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'slider',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
+      isFxNotRequired: true,
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'container',
     },
     padding: {
       type: 'switch',
@@ -100,13 +265,52 @@ export const rangeSliderConfig = {
   },
   exposedVariables: {
     value: null,
+    label: 'Label',
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
   },
+  actions: [
+    {
+      handle: 'setValue',
+      displayName: 'Set value',
+      params: [{ handle: 'num1', displayName: 'Value', defaultValue: 'New value' }],
+    },
+    {
+      handle: 'setRangeValue',
+      displayName: 'Set range value',
+      params: [
+        { handle: 'num1', displayName: 'Min value' },
+        { handle: 'num2', displayName: 'Max value' },
+      ],
+    },
+    {
+      handle: 'reset',
+      displayName: 'Reset',
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
   definition: {
     others: {
       showOnDesktop: { value: true },
       showOnMobile: { value: false },
     },
     properties: {
+      label: { value: 'Label' },
       min: {
         value: '{{0}}',
       },
@@ -116,13 +320,37 @@ export const rangeSliderConfig = {
       value: {
         value: '{{50}}',
       },
-      enableTwoHandle: { value: false },
+      startValue: {
+        value: '{{50}}',
+      },
+      endValue: {
+        value: '{{80}}',
+      },
+      enableTwoHandle: { value: 'slider' },
+      stepSize: {
+        value: '{{1}}',
+      },
+      schema: {
+        value: "{{[\t{label: '25%',value: 25},{label: '50%',value: 50},{label: '75%',value: 75}\t]}}",
+      },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      loadingState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      lineColor: { value: '' },
-      handleColor: { value: '' },
-      trackColor: { value: 'var(--primary-brand)' },
+      lineColor: { value: 'var(--cc-surface3-surface)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
+      handleBorderColor: { value: 'var(--cc-default-border)' },
+      trackColor: { value: 'var(--cc-primary-brand)' },
+      markerLabel: { value: 'var(--cc-primary-text)' },
+      direction: { value: 'left' },
+      width: { value: '{{33}}' },
+      alignment: { value: 'side' },
+      color: { value: 'var(--cc-primary-text)' },
+      auto: { value: '{{true}}' },
+      padding: { value: 'default' },
       visibility: { value: '{{true}}' },
       padding: { value: 'default' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/richtextarea.js b/frontend/src/AppBuilder/WidgetManager/widgets/richtextarea.js
index c964d53d6b..8580f2b56a 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/richtextarea.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/richtextarea.js
@@ -37,6 +37,15 @@ export const richtextareaConfig = {
       },
       section: 'additionalActions',
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
   },
   events: {},
   styles: {
@@ -95,6 +104,7 @@ export const richtextareaConfig = {
       placeholder: { value: 'Placeholder text' },
       defaultValue: { value: '' },
       loadingState: { value: `{{false}}` },
+      dynamicHeight: { value: '{{false}}' },
     },
     events: [],
     styles: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js b/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js
index c38bfdc468..c2e91199f0 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/spinner.js
@@ -27,7 +27,7 @@ export const spinnerConfig = {
       displayName: 'Colour',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     size: {
@@ -54,7 +54,7 @@ export const spinnerConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       size: { value: 'sm' },
-      colour: { value: 'var(--primary-brand)' },
+      colour: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js b/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js
index fd2dce59d9..333feba8bc 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/starrating.js
@@ -70,7 +70,7 @@ export const starratingConfig = {
       displayName: 'Label color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     visibility: {
@@ -122,7 +122,7 @@ export const starratingConfig = {
     events: [],
     styles: {
       textColor: { value: '#ffb400' },
-      labelColor: { value: '' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       padding: { value: 'default' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js b/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js
index ecf1f70aed..dbe58f7cfe 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/statistics.js
@@ -57,22 +57,22 @@ export const statisticsConfig = {
     primaryLabelColour: {
       type: 'colorSwatches',
       displayName: 'Primary label colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
     },
     primaryTextColour: {
       type: 'colorSwatches',
       displayName: 'Primary text  colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#000000' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
     },
     secondaryLabelColour: {
       type: 'colorSwatches',
       displayName: 'Secondary label colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-placeholder-text)' },
     },
     secondaryTextColour: {
       type: 'colorSwatches',
       displayName: 'Secondary text colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-success-systemStatus)' },
     },
     visibility: {
       type: 'toggle',
@@ -95,10 +95,10 @@ export const statisticsConfig = {
     },
     events: [],
     styles: {
-      primaryLabelColour: { value: '#8092AB' },
-      primaryTextColour: { value: '#000000' },
-      secondaryLabelColour: { value: '#8092AB' },
-      secondaryTextColour: { value: '#36AF8B' },
+      primaryLabelColour: { value: 'var(--cc-primary-text)' },
+      primaryTextColour: { value: 'var(--cc-primary-text)' },
+      secondaryLabelColour: { value: 'var(--cc-placeholder-text)' },
+      secondaryTextColour: { value: 'var(--cc-success-systemStatus)' },
       visibility: { value: '{{true}}' },
     },
   },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
index 9e71a89f90..a87311a7e2 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
@@ -74,7 +74,6 @@ export const stepsConfig = {
         defaultValue: 1,
       },
     },
-
   },
   defaultSize: {
     width: 22,
@@ -170,7 +169,7 @@ export const stepsConfig = {
       displayName: 'Completed accent',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
       accordian: 'steps',
     },
@@ -240,11 +239,11 @@ export const stepsConfig = {
       // color: { value: '' },
       // textColor: { value: '' },
       padding: { value: 'default' },
-      incompletedAccent: { value: '#E4E7EB' },
-      incompletedLabel: { value: '#1B1F24' },
-      completedAccent: { value: 'var(--primary-brand)' },
-      completedLabel: { value: '#1B1F24' },
-      currentStepLabel: { value: '#1B1F24' },
+      incompletedAccent: { value: 'var(--cc-surface3-surface)' },
+      incompletedLabel: { value: 'var(--cc-primary-text)' },
+      completedAccent: { value: 'var(--cc-primary-brand)' },
+      completedLabel: { value: 'var(--cc-primary-text)' },
+      currentStepLabel: { value: 'var(--cc-primary-text)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/table.js b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
index facb62f7d4..7e7d0a7610 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/table.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
@@ -269,6 +269,15 @@ export const tableConfig = {
         schema: { type: 'boolean' },
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
   },
   others: {
     showOnDesktop: { type: 'toggle', displayName: 'Show on desktop ' },
@@ -292,22 +301,19 @@ export const tableConfig = {
     onTableDataDownload: { displayName: 'Download data' },
   },
   styles: {
-    textColor: {
+    columnTitleColor: {
       type: 'colorSwatches',
-      displayName: 'Text Color',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#000',
-      },
-      accordian: 'Data',
+      displayName: 'Column title',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-placeholder-text)' },
+      accordian: 'Column Header',
     },
     columnHeaderWrap: {
       type: 'switch',
-      displayName: 'Column header',
+      displayName: 'Overflow',
       validation: { schema: { type: 'string' } },
-      accordian: 'Data',
+      accordian: 'Column Header',
       options: [
-        { displayName: 'Fixed', value: 'fixed' },
+        { displayName: 'None', value: 'fixed' },
         { displayName: 'Wrap', value: 'wrap' },
       ],
     },
@@ -315,12 +321,27 @@ export const tableConfig = {
       type: 'switch',
       displayName: 'Header casing',
       validation: { schema: { type: 'string' } },
-      accordian: 'Data',
+      accordian: 'Column Header',
       options: [
-        { displayName: 'AA', value: 'uppercase' },
         { displayName: 'As typed', value: 'none' },
+        { displayName: 'AA', value: 'uppercase' },
       ],
     },
+    columnBackgroundColor: {
+      type: 'colorSwatches',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface2-surface)' },
+      accordian: 'Column Header',
+    },
+    textColor: {
+      type: 'colorSwatches',
+      displayName: 'Text',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-primary-text)',
+      },
+      accordian: 'Data',
+    },
     tableType: {
       type: 'select',
       displayName: 'Row style',
@@ -373,6 +394,7 @@ export const tableConfig = {
     },
     maxRowHeightValue: {
       type: 'tableRowHeightInput',
+      isFxNotRequired: true,
       showLabel: false,
       validation: {
         schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
@@ -391,11 +413,17 @@ export const tableConfig = {
     },
     actionButtonRadius: {
       type: 'numberInput',
-      displayName: 'Button radius',
+      displayName: 'Action button radius',
       validation: {
         schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'boolean' }] },
       },
-      accordian: 'Action button',
+      accordian: 'Data',
+    },
+    containerBackgroundColor: {
+      type: 'colorSwatches',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
+      accordian: 'Container',
     },
     borderRadius: {
       type: 'numberInput',
@@ -516,7 +544,7 @@ export const tableConfig = {
       loadingState: { value: '{{false}}' },
       data: {
         value:
-          "{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', mobile_number: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', mobile_number: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', mobile_number: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', mobile_number: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', mobile_number: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', mobile_number: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', mobile_number: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', mobile_number: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', mobile_number: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', mobile_number: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
+          "{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', phone: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', phone: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', phone: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', phone: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', phone: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', phone: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', phone: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', phone: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', phone: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', phone: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}",
       },
       useDynamicColumn: { value: '{{false}}' },
       columnData: {
@@ -663,15 +691,20 @@ export const tableConfig = {
       allowSelection: { value: '{{true}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      dynamicHeight: { value: `{{false}}` },
     },
     events: [],
     styles: {
-      textColor: { value: '#000' },
+      columnTitleColor: { value: 'var(--cc-placeholder-text)' },
+      columnBackgroundColor: { value: 'var(--cc-surface2-surface)' },
+      containerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      textColor: { value: 'var(--cc-primary-text)' },
       columnHeaderWrap: { value: 'fixed' },
       headerCasing: { value: 'uppercase' },
       actionButtonRadius: { value: '0' },
       cellSize: { value: 'regular' },
-      borderRadius: { value: '8' },
+      borderRadius: { value: '6' },
+      borderColor: { value: 'var(--cc-default-border)' },
       tableType: { value: 'table-classic' },
       maxRowHeight: { value: 'auto' },
       maxRowHeightValue: { value: '{{0}}' }, // Setting it here as 0 since TableRowHeightInput component will set the value
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js b/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js
index a9c10bebaf..70754e85d9 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/tabs.js
@@ -6,52 +6,47 @@ export const tabsConfig = {
     width: 30,
     height: 300,
   },
-  defaultChildren: [
-    {
-      componentName: 'Image',
-      layout: {
-        top: 60,
-        left: 17,
-        height: 100,
-        width: 7,
-      },
-      tab: 0,
-      properties: ['source'],
-      defaultValue: {
-        source: 'https://uploads-ssl.webflow.com/6266634263b9179f76b2236e/62666392f32677b5cb2fb84b_logo.svg',
-      },
-    },
-    {
-      componentName: 'Text',
-      layout: {
-        top: 100,
-        left: 5,
-        height: 50,
-        width: 34,
-      },
-      tab: 1,
-      properties: ['text'],
-      defaultValue: {
-        text: 'Open-source low-code framework to build & deploy internal tools within minutes.',
-      },
-    },
-    {
-      componentName: 'Table',
-      layout: {
-        top: 0,
-        left: 1,
-        width: 41,
-        height: 250,
-      },
-      tab: 2,
-    },
-  ],
   component: 'Tabs',
   others: {
     showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    useDynamicOptions: {
+      type: 'toggle',
+      displayName: 'Dynamic options',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
     tabs: {
       type: 'code',
       displayName: 'Tabs',
@@ -89,6 +84,7 @@ export const tabsConfig = {
     hideTabs: {
       type: 'toggle',
       displayName: 'Hide tabs',
+      section: 'additionalActions',
       validation: {
         schema: {
           type: 'boolean',
@@ -99,6 +95,7 @@ export const tabsConfig = {
     renderOnlyActiveTab: {
       type: 'toggle',
       displayName: 'Render only active tab',
+      section: 'additionalActions',
       validation: {
         schema: {
           type: 'boolean',
@@ -106,37 +103,106 @@ export const tabsConfig = {
         defaultValue: false,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: '' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
+    },
   },
   events: { onTabSwitch: { displayName: 'On tab switch' } },
   styles: {
-    highlightColor: {
+    headerBackground: {
       type: 'colorSwatches',
-      displayName: 'Highlight color',
+      displayName: 'Header background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
+      accordian: 'Tabs',
     },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
+    divider: {
+      type: 'colorSwatches',
+      displayName: 'Divider',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
-        defaultValue: false,
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-default-border)',
       },
+      accordian: 'Tabs',
     },
-    disabledState: {
-      type: 'toggle',
-      displayName: 'Disable',
+    unselectedText: {
+      type: 'colorSwatches',
+      displayName: 'Unselected text',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
-        defaultValue: false,
+        schema: { type: 'string' },
+        defaultValue: '#375FCF',
       },
+      accordian: 'Tabs',
     },
+    selectedText: {
+      type: 'colorSwatches',
+      displayName: 'Selected text',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-primary-text)',
+      },
+      accordian: 'Tabs',
+    },
+    hoverBackground: {
+      type: 'colorSwatches',
+      displayName: 'Hover Background',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'Tabs',
+    },
+    unselectedIcon: {
+      type: 'colorSwatches',
+      displayName: 'Unselected Icon',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'Tabs',
+    },
+    selectedIcon: {
+      type: 'colorSwatches',
+      displayName: 'Selected Icon',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'Tabs',
+    },
+    accent: {
+      type: 'colorSwatches',
+      displayName: 'Accent',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-primary-brand)',
+      },
+      accordian: 'Tabs',
+    },
+    // highlightColor: {
+    //   type: 'colorSwatches',
+    //   displayName: 'Highlight color',
+    //   validation: {
+    //     schema: { type: 'string' },
+    //     defaultValue: '#375FCF',
+    //   },
+    //   accordian: 'Tabs',
+    // },
     tabWidth: {
       type: 'select',
       displayName: 'Tab width',
@@ -144,6 +210,54 @@ export const tabsConfig = {
         { name: 'Auto', value: 'auto' },
         { name: 'Equally split', value: 'split' },
       ],
+      accordian: 'Tabs',
+    },
+    transition: {
+      type: 'select',
+      displayName: 'Transition',
+      options: [
+        { name: 'Slide', value: 'slide' },
+        { name: 'None', value: 'none' },
+      ],
+      accordian: 'Tabs',
+    },
+    border: {
+      type: 'colorSwatches',
+      displayName: 'Border',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#375FCF',
+      },
+      accordian: 'Container',
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border radius',
+      validation: {
+        validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
+        defaultValue: false,
+      },
+      accordian: 'Container',
+    },
+    boxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box shadow',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
+      accordian: 'Container',
+      conditionallyRender: {
+        key: 'type',
+        value: 'primary',
+      },
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: { schema: { type: 'string' } },
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'Container',
     },
   },
   actions: [
@@ -157,28 +271,153 @@ export const tabsConfig = {
         },
       ],
     },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setTabDisable',
+      displayName: 'Set Tab disable',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
+    {
+      handle: 'setTabLoading',
+      displayName: 'Set Tab Loading',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
+    {
+      handle: 'setTabVisibility',
+      displayName: 'Set Tab visibility',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
   ],
-  exposedVariables: { currentTab: '' },
+  exposedVariables: {
+    currentTab: '',
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      dynamicHeight: { value: '{{false}}' },
+      useDynamicOptions: { value: '{{false}}' },
       tabs: {
         value:
           "{{[ \n\t\t{ title: 'Home', id: '0' }, \n\t\t{ title: 'Profile', id: '1' }, \n\t\t{ title: 'Settings', id: '2' } \n ]}}",
       },
+      tabItems: {
+        value: [
+          {
+            id: 't0',
+            title: 'Tab 1',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+          {
+            id: 't1',
+            title: 'Tab 2',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+          {
+            id: 't2',
+            title: 'Tab 3',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+        ],
+      },
       defaultTab: { value: '0' },
       hideTabs: { value: false },
       renderOnlyActiveTab: { value: false },
+      loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      highlightColor: { value: 'var(--primary-brand)' },
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
+      headerBackground: { value: 'var(--cc-surface1-surface)' },
+      divider: { value: 'var(--cc-default-border)' },
+      unselectedText: { value: 'var(--cc-placeholder-text)' },
+      selectedText: { value: 'var(--cc-primary-text)' },
+      highlightColor: { value: 'var(--cc-primary-brand)' },
+      hoverBackground: { value: '#1B1F24' },
+      unselectedIcon: { value: 'var(--cc-default-icon)' },
+      selectedIcon: { value: 'var(--cc-default-icon)' },
+      accent: { value: 'var(--cc-primary-brand)' },
       tabWidth: { value: 'auto' },
+      transition: { value: 'slide' },
+      borderRadius: { value: '{{6}}' },
+      border: { value: 'var(--cc-default-border)' },
+      boxShadow: { value: '0px 0px 0px 0px #121212' },
+      padding: { value: 'default' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/text.js b/frontend/src/AppBuilder/WidgetManager/widgets/text.js
index 8ed1edffd1..af9b637b32 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/text.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/text.js
@@ -29,6 +29,15 @@ export const textConfig = {
       },
       showLabel: false,
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Show loading state',
@@ -267,6 +276,7 @@ export const textConfig = {
     },
     properties: {
       textFormat: { value: 'html' },
+      dynamicHeight: { value: '{{false}}' },
       text: { value: `Hello {{globals.currentUser.firstName}}👋` },
       loadingState: { value: `{{false}}` },
       disabledState: { value: '{{false}}' },
@@ -275,7 +285,7 @@ export const textConfig = {
     events: [],
     styles: {
       backgroundColor: { value: '#fff00000' },
-      textColor: { value: '#000000' },
+      textColor: { value: 'var(--cc-primary-text)' },
       textSize: { value: '{{14}}' },
       textAlign: { value: 'left' },
       fontWeight: { value: 'normal' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/textarea.js b/frontend/src/AppBuilder/WidgetManager/widgets/textarea.js
index d0e0364334..ea5cf0d3ed 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/textarea.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/textarea.js
@@ -17,6 +17,15 @@ export const textareaConfig = {
       displayName: 'Label',
       validation: { schema: { type: 'string' }, defaultValue: 'Label' },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     placeholder: {
       type: 'code',
       displayName: 'Placeholder',
@@ -80,9 +89,9 @@ export const textareaConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -132,33 +141,33 @@ export const textareaConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -169,9 +178,9 @@ export const textareaConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -274,6 +283,7 @@ export const textareaConfig = {
       value: { value: '' },
       label: { value: 'Label' },
       placeholder: { value: 'Enter your input' },
+      dynamicHeight: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },
@@ -281,17 +291,17 @@ export const textareaConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js
index e259ecddd0..4da69a7e77 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/textinput.js
@@ -82,7 +82,7 @@ export const textinputConfig = {
     color: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -134,31 +134,31 @@ export const textinputConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -171,7 +171,7 @@ export const textinputConfig = {
     iconColor: {
       type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -281,17 +281,17 @@ export const textinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: 'var(--primary-brand)' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js b/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js
index 63776f0b99..212f8bc480 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/timeline.js
@@ -48,7 +48,7 @@ export const timelineConfig = {
     properties: {
       data: {
         value:
-          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}",
+          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--cc-primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--cc-primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--cc-primary-brand)'} \n] }}",
       },
       hideDate: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js b/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js
index a5a1fb6b06..9b23523249 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js
@@ -166,7 +166,7 @@ export const timePickerConfig = {
     labelColor: {
       type: 'colorSwatches',
       displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -217,31 +217,31 @@ export const timePickerConfig = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -257,7 +257,7 @@ export const timePickerConfig = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -331,23 +331,23 @@ export const timePickerConfig = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       alignment: { value: 'side' },
       direction: { value: 'left' },
       labelWidth: { value: '20' },
       auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       icon: { value: 'IconClock' },
       iconVisibility: { value: true },
       iconDirection: { value: 'left' },
       fieldBorderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js
index bd646a47f3..4aa6c10c58 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js
@@ -74,8 +74,8 @@ export const toggleswitchConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '' },
-      toggleSwitchColor: { value: 'var(--primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      toggleSwitchColor: { value: 'var(--cc-primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js
index 4b31bc8f0c..aec87dc17c 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js
@@ -194,11 +194,11 @@ export const toggleSwitchV2Config = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility
-      uncheckedColor: { value: '#E4E7EB' },
-      borderColor: { value: '#E4E7EB' },
-      handleColor: { value: '#FFFFFF' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      toggleSwitchColor: { value: 'var(--cc-primary-brand)' }, //keeping same key for backward comopatibility
+      uncheckedColor: { value: 'var(--cc-surface3-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
       alignment: { value: 'right' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js b/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js
index 898f0b3ed0..68e16b107c 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js
@@ -70,8 +70,8 @@ export const treeSelectConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '' },
-      checkboxColor: { value: 'var(--primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      checkboxColor: { value: 'var(--cc-primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js
index df426c7b5f..a75d0528e2 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js
@@ -36,7 +36,7 @@ export const verticalDividerConfig = {
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-default-border)',
       },
       accordian: 'Divider',
     },
@@ -90,7 +90,7 @@ export const verticalDividerConfig = {
     },
     events: [],
     styles: {
-      dividerColor: { value: '#CCD1D5' },
+      dividerColor: { value: 'var(--cc-default-border)' },
       dividerStyle: { value: 'solid' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx b/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx
index 74ce215737..f49f9268c9 100644
--- a/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx
@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import Label from '@/_ui/Label';
 import Loader from '@/ToolJetUI/Loader/Loader';
 import * as Icons from '@tabler/icons-react';
+import { getModifiedColor } from '@/Editor/Components/utils';
 const tinycolor = require('tinycolor2');
 
 const RenderInput = forwardRef((props, ref) => {
@@ -78,7 +79,7 @@ export const BaseInput = ({
       : disable || loading
       ? '1px solid var(--borders-disabled-on-white)'
       : 'var(--borders-default)',
-    '--tblr-input-border-color-darker': tinycolor(borderColor).darken(24).toString(),
+    '--tblr-input-border-color-darker': getModifiedColor(borderColor, 24),
     backgroundColor:
       backgroundColor != '#fff'
         ? backgroundColor
@@ -211,7 +212,7 @@ export const BaseInput = ({
           onBlur={handleBlur}
           onFocus={handleFocus}
           onKeyUp={handleKeyUp}
-          disabled={disable || loading}
+          // disabled={disable || loading}
           placeholder={placeholder}
           style={finalStyles}
           {...additionalInputProps}
diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index 07492d4415..61775f5919 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -3,6 +3,7 @@ import { Container as ContainerComponent } from '@/AppBuilder/AppCanvas/Containe
 import Spinner from '@/_ui/Spinner';
 import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
 import { shallow } from 'zustand/shallow';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 import {
   CONTAINER_FORM_CANVAS_PADDING,
   SUBCONTAINER_CANVAS_BORDER_WIDTH,
@@ -21,6 +22,9 @@ export const Container = ({
   width,
   setExposedVariables,
   setExposedVariable,
+  adjustComponentPositions,
+  currentLayout,
+  componentCount = 0,
 }) => {
   const { isDisabled, isVisible, isLoading } = useExposeState(
     properties.loadingState,
@@ -30,6 +34,18 @@ export const Container = ({
     setExposedVariable
   );
 
+  const { dynamicHeight } = properties;
+
+  useDynamicHeight({
+    dynamicHeight: properties.dynamicHeight,
+    id,
+    height,
+    adjustComponentPositions,
+    currentLayout,
+    isContainer: true,
+    componentCount,
+  });
+
   const isWidgetInContainerDragging = useStore(
     (state) => state.containerChildrenMapping?.[id]?.includes(state?.draggingComponentId),
     shallow
@@ -62,7 +78,7 @@ export const Container = ({
     backgroundColor: contentBgColor.backgroundColor,
     borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
     border: `${SUBCONTAINER_CANVAS_BORDER_WIDTH}px solid ${borderColor}`,
-    height,
+    height: dynamicHeight ? '100%' : height,
     display: isVisible ? 'flex' : 'none',
     flexDirection: 'column',
     position: 'relative',
@@ -113,7 +129,7 @@ export const Container = ({
               componentType="Container"
             />
           )}
-          <div style={containerContentStyles}>
+          <div style={containerContentStyles} className={`${properties.dynamicHeight && `dynamic-${id}`}`}>
             <ContainerComponent
               id={id}
               styles={{
@@ -121,7 +137,7 @@ export const Container = ({
                 // Prevent the scroll when dragging a widget inside the container or moving out of the container
                 overflow: isWidgetInContainerDragging ? 'hidden' : 'hidden auto',
               }}
-              canvasHeight={height}
+              canvasHeight={dynamicHeight ? '100%' : height}
               canvasWidth={width}
               darkMode={darkMode}
               componentType="Container"
diff --git a/frontend/src/AppBuilder/Widgets/Container/container.scss b/frontend/src/AppBuilder/Widgets/Container/container.scss
index 323f5e8c9a..a4582bd50e 100644
--- a/frontend/src/AppBuilder/Widgets/Container/container.scss
+++ b/frontend/src/AppBuilder/Widgets/Container/container.scss
@@ -4,10 +4,10 @@
       content: '';
       position: absolute;
       bottom: 0;
-      left: -7px;
-      right: -7px;
+      left: 0px;
+      right: 0px;
       height: 1px;
-      background-color: var(--border-weak);
+      background-color: var(--cc-default-border);
     }
   }
   
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/Date/BaseDateComponent.jsx b/frontend/src/AppBuilder/Widgets/Date/BaseDateComponent.jsx
index 654fbea963..30b303abec 100644
--- a/frontend/src/AppBuilder/Widgets/Date/BaseDateComponent.jsx
+++ b/frontend/src/AppBuilder/Widgets/Date/BaseDateComponent.jsx
@@ -7,6 +7,7 @@ import Label from '@/_ui/Label';
 import DatePickerComponent from 'react-datepicker';
 import CustomDatePickerHeader from './CustomDatePickerHeader';
 import { flip, offset } from '@floating-ui/dom';
+import { getModifiedColor } from '@/Editor/Components/utils';
 
 const tinycolor = require('tinycolor2');
 
@@ -59,7 +60,7 @@ export const BaseDateComponent = ({
       : disable || loading
       ? '1px solid var(--borders-disabled-on-white)'
       : 'var(--borders-default)',
-    '--tblr-input-border-color-darker': tinycolor(fieldBorderColor).darken(24).toString(),
+    '--tblr-input-border-color-darker': getModifiedColor(fieldBorderColor, 24),
     borderRadius: `${fieldBorderRadius || borderRadius}px`,
     color: !['#1B1F24', '#000', '#000000ff'].includes(selectedTextColor)
       ? selectedTextColor
diff --git a/frontend/src/AppBuilder/Widgets/Date/CustomDatePickerHeader.jsx b/frontend/src/AppBuilder/Widgets/Date/CustomDatePickerHeader.jsx
index 9201c609f7..ae8bb90182 100644
--- a/frontend/src/AppBuilder/Widgets/Date/CustomDatePickerHeader.jsx
+++ b/frontend/src/AppBuilder/Widgets/Date/CustomDatePickerHeader.jsx
@@ -5,6 +5,7 @@ import { components } from 'react-select';
 import CheckMark from '@/_ui/Icon/bulkIcons/CheckMark';
 import moment from 'moment';
 import { range } from 'lodash';
+import { getModifiedColor } from '@/Editor/Components/utils';
 
 const CustomDatePickerHeader = (props) => {
   const {
@@ -43,6 +44,9 @@ const CustomDatePickerHeader = (props) => {
 
   const years = range(1900, 2101);
 
+  const menuHoverColor = getModifiedColor('var(--cc-surface1-surface)', 'hover');
+  const menuActiveColor = getModifiedColor('var(--cc-surface1-surface)', 'active');
+
   const customSelectStyles = {
     control: (provided) => ({
       ...provided,
@@ -82,6 +86,7 @@ const CustomDatePickerHeader = (props) => {
       width: '150px',
       borderRadius: '8px',
       top: 'auto',
+      backgroundColor: 'var(--cc-surface1-surface) !important',
     }),
     menuList: (provided) => ({
       ...provided,
@@ -90,14 +95,10 @@ const CustomDatePickerHeader = (props) => {
       overflowY: 'auto', // Enable scrolling if needed
       scrollbarWidth: 'none', // Hide scrollbar for Firefox
       borderRadius: '8px',
+      backgroundColor: 'var(--cc-surface1-surface) !important',
     }),
     option: (provided, state) => ({
       ...provided,
-      backgroundColor: state.isFocused
-        ? '#f0f0f0' // Hover color
-        : state.isSelected
-        ? '#e6e6e6' // Selected background color
-        : 'white',
       color: state.isSelected ? '#333' : 'black', // Adjust text color for selected state
       paddingLeft: '20px',
       position: 'relative',
@@ -117,7 +118,7 @@ const CustomDatePickerHeader = (props) => {
           }}
         >
           {isSelected && (
-            <CheckMark fill="transparent" fillIcon={'var(--primary-brand)'} className="datepicker-select-check" />
+            <CheckMark fill="transparent" fillIcon={'var(--cc-primary-brand)'} className="datepicker-select-check" />
           )}
           <span style={{ marginLeft: '10px', color: darkMode ? '#fff' : '#000' }}>{data.label}</span>
         </div>
@@ -133,6 +134,8 @@ const CustomDatePickerHeader = (props) => {
           marginTop: 10,
           display: 'flex',
           justifyContent: 'center',
+          '--cc-date-dropdown-hover': menuHoverColor,
+          '--cc-date-dropdown-active': menuActiveColor,
         }}
       >
         {!(datepickerSelectionType === 'range' && customHeaderCount === 1) && (
@@ -145,7 +148,7 @@ const CustomDatePickerHeader = (props) => {
             }}
             disabled={datepickerMode === 'date' ? prevMonthButtonDisabled : prevYearButtonDisabled}
           >
-            <SolidIcon name="cheveronleft" width="12" />
+            <SolidIcon name="cheveronleft" width="12" fill={'var(--cc-default-icon)'} />
           </button>
         )}
         <div style={{ marginRight: '8px' }}>
@@ -207,7 +210,7 @@ const CustomDatePickerHeader = (props) => {
             }}
             disabled={datepickerMode === 'date' ? nextMonthButtonDisabled : nextYearButtonDisabled}
           >
-            <SolidIcon name="cheveronright" width="12" />
+            <SolidIcon name="cheveronright" width="12" fill={'var(--cc-default-icon)'} />
           </button>
         )}
       </div>
diff --git a/frontend/src/AppBuilder/Widgets/Date/DatepickerInput.jsx b/frontend/src/AppBuilder/Widgets/Date/DatepickerInput.jsx
index d9a13400a1..a5d77d7367 100644
--- a/frontend/src/AppBuilder/Widgets/Date/DatepickerInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/Date/DatepickerInput.jsx
@@ -59,7 +59,7 @@ export const DatepickerInput = forwardRef(
               }
             }
           }}
-          disabled={disable || loading}
+          // disabled={disable || loading}
         />
         <span className="cell-icon-display">
           <IconElement style={iconStyles} width="16" className="table-column-datepicker-input-icon" />
diff --git a/frontend/src/AppBuilder/Widgets/Date/DaterangePicker.jsx b/frontend/src/AppBuilder/Widgets/Date/DaterangePicker.jsx
index ceb7504b60..f3bc2bf942 100644
--- a/frontend/src/AppBuilder/Widgets/Date/DaterangePicker.jsx
+++ b/frontend/src/AppBuilder/Widgets/Date/DaterangePicker.jsx
@@ -4,6 +4,7 @@ import { BaseDateComponent } from './BaseDateComponent';
 import moment from 'moment-timezone';
 import cx from 'classnames';
 import { isDateRangeValid, isDateValid } from './utils';
+import './styles.scss';
 
 export const DaterangePicker = ({
   height,
diff --git a/frontend/src/AppBuilder/Widgets/Date/TimepickerInput.jsx b/frontend/src/AppBuilder/Widgets/Date/TimepickerInput.jsx
index aa5be134d1..18ed4ea59a 100644
--- a/frontend/src/AppBuilder/Widgets/Date/TimepickerInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/Date/TimepickerInput.jsx
@@ -45,7 +45,7 @@ const TimepickerInput = ({ currentTimestamp, isTwentyFourHourMode, darkMode, onT
   };
 
   return (
-    <div className={cx('custom-time-input ', { 'dark-time-input': darkMode })}>
+    <div className={cx('custom-time-input ')}>
       <div className={cx('d-flex')}>
         {headers.map((header) => (
           <span key={header} className={cx('time-header')}>
diff --git a/frontend/src/AppBuilder/Widgets/Date/styles.scss b/frontend/src/AppBuilder/Widgets/Date/styles.scss
new file mode 100644
index 0000000000..e7f127e8c0
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/Date/styles.scss
@@ -0,0 +1,40 @@
+.tj-daterange-widget {
+    .react-datepicker {
+        .react-datepicker__header {
+            background-color: var(--cc-surface1-surface);
+        }
+    }
+}
+
+.tj-table-datepicker .react-datepicker__day--keyboard-selected {
+    background-color: var(--cc-surface1-surface) !important;
+}
+
+.react-datepicker__day:not([aria-disabled=true]):hover {
+    border-radius: 0.3rem;
+    background-color: var(--cc-surface1-surface) !important;
+    filter: brightness(0.92);
+}
+
+.react-datepicker__day--keyboard-selected {
+    background-color: var(--cc-surface1-surface) !important;
+}
+
+.daterangepicker-header {
+    .react-select__menu .react-select__menu-list {
+        background-color: var(--cc-surface1-surface) !important;
+    }
+
+    .react-select__menu .react-select__menu-list .react-select__option {
+        background-color: var(--cc-surface1-surface) !important;
+    }
+
+    .react-select__menu .react-select__menu-list .react-select__option:hover {
+        background-color: var(--cc-date-dropdown-hover) !important;
+    }
+
+    .react-select__menu .react-select__menu-list .react-select__option:active {
+        background-color: var(--cc-date-dropdown-active) !important;
+    }
+
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/Components/ErrorMessage.jsx b/frontend/src/AppBuilder/Widgets/FilePicker/Components/ErrorMessage.jsx
new file mode 100644
index 0000000000..229b7a5f51
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/Components/ErrorMessage.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Information from '@/_ui/Icon/solidIcons/Information';
+
+const ErrorMessage = ({ message }) => {
+  return (
+    <div className="file-picker-error-message">
+      <span className="error-icon">
+        <Information fill="var(--status-error-strong)" width="16" />
+      </span>
+      <span className="error-text">{message}</span>
+    </div>
+  );
+};
+
+ErrorMessage.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
+export default ErrorMessage; 
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/Components/FileList.jsx b/frontend/src/AppBuilder/Widgets/FilePicker/Components/FileList.jsx
new file mode 100644
index 0000000000..64f83df3c5
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/Components/FileList.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FileListItem from './FileListItem';
+import { formatFileSize } from '@/_helpers/utils';
+
+const FileList = ({ files, onRemoveFile, errors = {}, uploadingStatus = {} }) => {
+  // TODO: Need to get file size formatting function, e.g., from @/_helpers/utils
+  // const formatFileSize = (bytes) => { ... }; // Placeholder
+
+  return (
+    <div className="file-list-container">
+      {files.map((file, index) => {
+        // Extract file extension for display if needed
+        const fileExtension = file.name.split('.').pop();
+        // Determine error state for this specific file
+        const fileError = errors[file.name] || null; // Example: Assuming errors object is keyed by file name
+        // Determine uploading state for this specific file
+        const isUploading = uploadingStatus[file.name] === 'uploading'; // Example: Assuming status object
+        const isUploaded = uploadingStatus[file.name] === 'uploaded'; // Example: Assuming status object
+
+        return (
+          <FileListItem
+            key={file.name + index} // Using name + index for key, consider a more stable unique ID if available
+            fileName={file.name}
+            // Assuming file size is available, might need adjustment based on actual file object structure
+            fileSize={formatFileSize(file.size || 0)} // Use formatted size, handle missing size
+            fileType={`.${fileExtension}`} // Displaying extension as file type
+            onDelete={() => onRemoveFile(index)} // Pass index or file identifier to remove function
+            onClick={() => {
+              /* Handle click if needed */
+            }}
+            error={fileError}
+            isUploading={isUploading}
+            isUploaded={isUploaded}
+            // Pass other necessary props based on FileListItem implementation
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+FileList.propTypes = {
+  files: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      size: PropTypes.number, // Size might not always be present initially
+      type: PropTypes.string,
+      // Include other expected file properties if needed
+    })
+  ).isRequired,
+  onRemoveFile: PropTypes.func.isRequired,
+  errors: PropTypes.object, // Shape depends on how errors are structured
+  uploadingStatus: PropTypes.object, // Shape depends on how status is structured
+};
+
+export default FileList; 
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/Components/FileListItem.jsx b/frontend/src/AppBuilder/Widgets/FilePicker/Components/FileListItem.jsx
new file mode 100644
index 0000000000..f499f59437
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/Components/FileListItem.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import Trash from '@/_ui/Icon/solidIcons/Trash';
+import '../style.scss';
+
+const FileListItem = ({ fileName, fileSize, fileType, onDelete, onClick, error, isUploading, isUploaded }) => {
+  const itemClasses = clsx('file-list-item', {
+    error: !!error,
+    uploading: isUploading,
+  });
+
+  return (
+    <div className={itemClasses} onClick={onClick}>
+      <div className="file-details">
+        <span className="file-name" title={fileName}>
+          {fileName}
+        </span>
+        <span className="file-meta">
+          {fileType} {fileSize}
+        </span>
+      </div>
+
+      {!isUploading && (
+        <ButtonSolid
+          className="delete-button"
+          variant="tertiary"
+          size="xs"
+          onClick={(event) => {
+            event.stopPropagation();
+            onDelete();
+          }}
+        >
+          <Trash width={12} fill="var(--icon-strong)" />
+        </ButtonSolid>
+      )}
+    </div>
+  );
+};
+
+FileListItem.propTypes = {
+  fileName: PropTypes.string.isRequired,
+  fileSize: PropTypes.string.isRequired,
+  fileType: PropTypes.string.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  error: PropTypes.string,
+  isUploading: PropTypes.bool,
+  isUploaded: PropTypes.bool,
+};
+
+FileListItem.defaultProps = {
+  error: null,
+  isUploading: false,
+  isUploaded: false,
+};
+
+export default FileListItem;
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/Components/UploadArea.jsx b/frontend/src/AppBuilder/Widgets/FilePicker/Components/UploadArea.jsx
new file mode 100644
index 0000000000..033ffef65c
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/Components/UploadArea.jsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import ErrorMessage from './ErrorMessage';
+import { formatFileSize } from '@/_helpers/utils';
+
+// Renamed from DropzoneArea
+const UploadArea = ({
+  getRootProps,
+  getInputProps,
+  isDragActive,
+  isDragAccept,
+  isDragReject,
+  isDisabled,
+  isFocused,
+  uiErrorMessage,
+  onFocus,
+  onBlur,
+  borderRadius,
+  height,
+  instructionText,
+  minSize,
+  maxSize,
+  maxCount,
+  fileTypeCategory,
+  selectedFilesLength,
+}) => {
+  // --- Refactored Conditions for Readability ---
+  const canShowInstructionText = !isDragActive && selectedFilesLength < maxCount;
+  const showGenericDropMessage = isDragActive && !isDragAccept && !isDragReject;
+  const showAcceptDropMessage = isDragActive && isDragAccept;
+  const showRejectDropMessage = isDragActive && isDragReject;
+  const showDisabledMessage = isDisabled && selectedFilesLength >= maxCount;
+  const hasUiError = uiErrorMessage && uiErrorMessage.trim() !== '.';
+  // --- End Refactored Conditions ---
+
+  const dropzoneClasses = [
+    'file-picker-dropzone',
+    isDragActive ? 'is-dragging' : '',
+    isDragAccept ? 'is-accepting' : '',
+    isDragReject ? 'is-rejecting' : '',
+    isFocused ? 'is-focused' : '',
+    isDisabled ? 'is-disabled' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      {...getRootProps({ className: dropzoneClasses })}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={isDisabled ? -1 : 0}
+      style={{ borderRadius: `${borderRadius}px`, height }}
+    >
+      <input {...getInputProps()} />
+
+      {hasUiError && (
+        <div className="ui-error-message-container">
+          <ErrorMessage message={uiErrorMessage} />
+        </div>
+      )}
+
+      {!hasUiError && (
+        <>
+          {canShowInstructionText && <p className="dropzone-instruction">{instructionText}</p>}
+
+          {showGenericDropMessage && <p className="dropzone-message">Drop the files here ...</p>}
+          {showAcceptDropMessage && (
+            <p className="dropzone-message">
+              <SolidIcon name="pageUpload" width="25px" height="25px" fill="var(--primary-brand)" />
+              Drop file to start uploading
+            </p>
+          )}
+          {showRejectDropMessage && <p className="dropzone-message">Cannot upload these files</p>}
+          {showDisabledMessage && <p className="dropzone-message">Maximum files uploaded</p>}
+        </>
+      )}
+    </div>
+  );
+};
+
+UploadArea.propTypes = {
+  getRootProps: PropTypes.func.isRequired,
+  getInputProps: PropTypes.func.isRequired,
+  isDragActive: PropTypes.bool.isRequired,
+  isDragAccept: PropTypes.bool.isRequired,
+  isDragReject: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  isFocused: PropTypes.bool.isRequired,
+  instructionText: PropTypes.string.isRequired,
+  uiErrorMessage: PropTypes.string,
+  onFocus: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+  borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  boxShadow: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minSize: PropTypes.number,
+  maxSize: PropTypes.number,
+  maxCount: PropTypes.number,
+  fileTypeCategory: PropTypes.string,
+};
+
+UploadArea.defaultProps = {
+  borderRadius: 6,
+  boxShadow: '',
+  height: '100%',
+  uiErrorMessage: '.',
+  minSize: 0,
+  maxSize: Number.POSITIVE_INFINITY,
+  maxCount: Number.POSITIVE_INFINITY,
+  fileTypeCategory: '*/*',
+};
+
+export default UploadArea;
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/Components/ValidationBar.jsx b/frontend/src/AppBuilder/Widgets/FilePicker/Components/ValidationBar.jsx
new file mode 100644
index 0000000000..25b04b3115
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/Components/ValidationBar.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { formatFileSize } from '@/_helpers/utils'; // Import the utility
+
+const ValidationBar = ({
+  minSize,
+  maxSize,
+  selectedFileCount,
+  minFileCount, // Added minFileCount prop
+  maxFileCount,
+  enableMultiple,
+}) => {
+  const showSizeValidation = minSize > 0 || (maxSize > 0 && maxSize < Infinity); // Check if size limits are meaningful
+  // Show count validation if multiple files are enabled OR if a minimum is set (even for single file upload)
+  const showCountValidation = enableMultiple || minFileCount > 0;
+
+  // Don't render if no validation info is relevant
+  if (!showSizeValidation && !showCountValidation) {
+    return null;
+  }
+
+  // Helper to construct count text
+  const getCountText = () => {
+    if (!showCountValidation) return null;
+
+    const maxCountText = maxFileCount > 0 ? `${maxFileCount}` : 'any';
+
+    if (minFileCount > 0 && maxFileCount > 0 && minFileCount !== maxFileCount) {
+      // Min and Max count differ
+      return `${selectedFileCount} (${minFileCount}-${maxCountText} files)`;
+    } else if (minFileCount > 0 && (maxFileCount <= 0 || minFileCount === maxFileCount)) {
+      // Only Min count (or min equals max)
+      return `${selectedFileCount} (Min ${minFileCount} file${minFileCount !== 1 ? 's' : ''})`;
+    } else if (maxFileCount > 0) {
+      // Only Max count (standard case)
+      return `${selectedFileCount}/${maxCountText}`;
+    }
+    return null; // Should not happen if showCountValidation is true
+  };
+
+  const countText = getCountText();
+
+  return (
+    <div className="validation-bar">
+      {/* Size Validation Info */}
+      {showSizeValidation && (
+        <span className="validation-info size-info">
+          {minSize > 0 && maxSize < Infinity
+            ? `${formatFileSize(minSize)} to ${formatFileSize(maxSize)}` // Min and Max
+            : maxSize < Infinity && maxSize > 0
+            ? `Up to ${formatFileSize(maxSize)}` // Only Max
+            : `Min ${formatFileSize(minSize)}`}
+        </span>
+      )}
+
+      {countText && <span className="validation-info count-info">{countText}</span>}
+    </div>
+  );
+};
+
+ValidationBar.propTypes = {
+  minSize: PropTypes.number,
+  maxSize: PropTypes.number,
+  selectedFileCount: PropTypes.number.isRequired,
+  minFileCount: PropTypes.number, // Added prop type
+  maxFileCount: PropTypes.number,
+  enableMultiple: PropTypes.bool,
+};
+
+ValidationBar.defaultProps = {
+  minSize: 0,
+  maxSize: Infinity, // Use Infinity for no practical upper limit
+  minFileCount: 0, // Default min count
+  maxFileCount: 0, // Default to 0 if not multiple or specified
+  enableMultiple: false,
+};
+
+export default ValidationBar;
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/FilePicker.jsx b/frontend/src/AppBuilder/Widgets/FilePicker/FilePicker.jsx
new file mode 100644
index 0000000000..d480cb9ac4
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/FilePicker.jsx
@@ -0,0 +1,269 @@
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { formatFileSize } from '@/_helpers/utils';
+
+import FileList from './Components/FileList';
+import UploadArea from './Components/UploadArea';
+import ValidationBar from './Components/ValidationBar';
+import ErrorMessage from './Components/ErrorMessage';
+import './style.scss';
+import { useFilePicker } from './hooks/useFilePicker';
+import Loader from '@/ToolJetUI/Loader/Loader';
+import { getModifiedColor } from '@/Editor/Components/utils';
+
+const FilePicker = (props) => {
+  const {
+    id,
+    width,
+    height,
+    component,
+    fireEvent,
+    onComponentOptionChanged,
+    darkMode,
+    styles,
+    properties,
+    validation,
+    setExposedVariable,
+    setExposedVariables,
+    dataCy,
+  } = props;
+
+  const numericWidgetHeight = Number.parseFloat(String(height).replace('px', '')) || 0; // Default to 0 if parsing fails
+  const isSmallWidget = numericWidgetHeight < 200;
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    selectedFiles,
+    fileErrors,
+    uploadingStatus,
+    isParsing,
+    handleRemoveFile,
+    labelText,
+    instructionText,
+    disablePicker,
+    disabledState,
+    isVisible,
+    isLoading,
+    isMandatory,
+    minFileCount,
+    maxFileCount,
+    dropzoneRejections,
+    uiErrorMessage,
+    containerBackgroundColor,
+    borderRadius,
+    containerBorder,
+    containerBoxShadow,
+    containerPadding,
+    dropzoneTitleColor,
+    dropzoneActiveColor,
+    dropzoneErrorColor,
+  } = useFilePicker({ ...props, setExposedVariable, setExposedVariables });
+
+  const rootRef = useRef(null);
+
+  useEffect(() => {
+    if (!rootRef.current) return;
+    if (dropzoneActiveColor) {
+      rootRef.current.style.setProperty('--file-picker-primary-brand', dropzoneActiveColor);
+    }
+    if (dropzoneErrorColor) {
+      rootRef.current.style.setProperty('--file-picker-error-strong', dropzoneErrorColor);
+    }
+    if (dropzoneTitleColor) {
+      rootRef.current.style.setProperty('--file-picker-text-primary', dropzoneTitleColor);
+    }
+    if (borderRadius !== undefined) {
+      rootRef.current.style.setProperty(
+        '--file-picker-border-radius',
+        typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius
+      );
+    }
+    if (containerBackgroundColor) {
+      rootRef.current.style.setProperty('--file-picker-background-color', containerBackgroundColor);
+    }
+    if (containerBorder) {
+      rootRef.current.style.setProperty('--file-picker-border', containerBorder);
+    }
+    if (containerBoxShadow) {
+      rootRef.current.style.setProperty('--file-picker-box-shadow', containerBoxShadow);
+    }
+    if (containerPadding !== undefined) {
+      rootRef.current.style.setProperty(
+        '--file-picker-padding',
+        typeof containerPadding === 'number' ? `${containerPadding}px` : containerPadding
+      );
+    }
+
+  }, [
+    dropzoneActiveColor,
+    dropzoneErrorColor,
+    dropzoneTitleColor,
+    borderRadius,
+    containerBackgroundColor,
+    containerBorder,
+    containerBoxShadow,
+    containerPadding,
+    darkMode,
+  ]);
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  const dynamicDropzoneStyle = useMemo(
+    () => ({
+      display: isVisible ? 'flex' : 'none',
+      backgroundColor: 'var(--cc-surface1-surface)',
+      color: darkMode ? '#c3c9d2' : '#5e6571',
+      height: `${numericWidgetHeight}px`,
+      overflowY: isSmallWidget ? 'auto' : 'visible',
+      opacity: disabledState ? 0.5 : 1,
+    }),
+    [darkMode, numericWidgetHeight, isVisible, isSmallWidget, disabledState]
+  );
+
+  if (rootRef?.current) {
+    rootRef.current.style.setProperty(
+      '--file-picker-delete-button-hover-bg',
+      getModifiedColor('var(--cc-surface1-surface)', 'hover')
+    );
+  }
+
+  const dropzoneClasses = clsx('file-picker-dropzone', {
+    'is-dragging': isDragActive,
+    'is-accepting': isDragAccept,
+    'is-rejecting': isDragReject,
+    'is-disabled': disabledState || disablePicker,
+    'is-focused': isFocused,
+  });
+
+  const widgetVisibility = styles?.visibility ?? true;
+  if (!widgetVisibility) {
+    return null;
+  }
+
+  const handleFocus = () => {
+    if (!disabledState) {
+      setIsFocused(true);
+    }
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  const rootProps = getRootProps({ className: dropzoneClasses });
+  const inputProps = getInputProps();
+
+  const augmentedInputProps = {
+    ...inputProps,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+  };
+
+  const { enableMultiple } = properties;
+  const { minSize, maxSize, fileType } = validation;
+
+  // const filePaneClasses = clsx(
+  //   'file-picker-files-pane',
+  //   isSmallWidget
+  //     ? 'h-auto overflow-y-visible'
+  //     : selectedFiles.length > 4
+  //       ? 'overflow-y-auto max-h-[38.2%] min-h-[180px]'
+  //       : 'h-auto overflow-y-auto'
+  // );
+
+  const filePaneClasses = clsx(
+    'file-picker-files-pane tw-p-2 tw-pt-0'
+  );
+
+  const topSectionClasses = clsx('tw-flex tw-flex-col tw-shrink-0 tw-grow tw-p-4', {
+    'tw-flex-grow': selectedFiles.length === 0,
+  });
+
+  return (
+    <div ref={rootRef} className="file-picker-widget-wrapper files-pane-scrollable" style={{ ...dynamicDropzoneStyle }} data-cy={dataCy}>
+      {isLoading ? (
+        <div className="p-2 tw-flex tw-items-center tw-justify-center h-full">
+          <Loader width={16} />
+        </div>
+      ) : (
+        <>
+          <div className={topSectionClasses}>
+            <h3 className="file-picker-title" style={{ color: 'var(--file-picker-text-primary)' }}>
+              {labelText || 'Upload files'}
+            </h3>
+            <ValidationBar
+              minSize={minSize}
+              maxSize={maxSize}
+              selectedFileCount={selectedFiles.length}
+              minFileCount={minFileCount}
+              maxFileCount={maxFileCount}
+              enableMultiple={enableMultiple}
+            />
+            <UploadArea
+              getRootProps={getRootProps}
+              getInputProps={getInputProps}
+              isDragActive={isDragActive}
+              isDragAccept={isDragAccept}
+              isDragReject={isDragReject}
+              isDisabled={disabledState || disablePicker}
+              instructionText={instructionText}
+              isFocused={isFocused}
+              dropzoneRejections={dropzoneRejections}
+              minSize={minSize}
+              maxSize={maxSize}
+              maxCount={maxFileCount}
+              fileTypeCategory={fileType}
+              uiErrorMessage={uiErrorMessage}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              borderRadius={borderRadius}
+              height={height}
+              selectedFilesLength={selectedFiles.length}
+            />
+          </div>
+          {selectedFiles.length > 0 && (
+            <div className={filePaneClasses}>
+              <FileList
+                files={selectedFiles}
+                onRemoveFile={handleRemoveFile}
+                errors={fileErrors}
+                uploadingStatus={uploadingStatus}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+FilePicker.propTypes = {
+  id: PropTypes.string.isRequired,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  component: PropTypes.object,
+  fireEvent: PropTypes.func,
+  onComponentOptionChanged: PropTypes.func,
+  darkMode: PropTypes.bool,
+  styles: PropTypes.object,
+  properties: PropTypes.object,
+  setExposedVariable: PropTypes.func,
+  setExposedVariables: PropTypes.func,
+  dataCy: PropTypes.string,
+};
+
+FilePicker.defaultProps = {
+  width: '100%',
+  darkMode: false,
+  styles: {},
+  properties: {},
+  fireEvent: () => { },
+  setExposedVariable: () => { },
+  setExposedVariables: () => { },
+};
+
+export default FilePicker;
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/helpers/fileProcessing.js b/frontend/src/AppBuilder/Widgets/FilePicker/helpers/fileProcessing.js
new file mode 100644
index 0000000000..64ae5cacac
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/helpers/fileProcessing.js
@@ -0,0 +1,142 @@
+import * as XLSX from 'xlsx/xlsx.mjs';
+import { toast } from 'react-hot-toast';
+import JSON5 from 'json5'; // Import JSON5 for more lenient parsing
+
+// Define constants for processing file types
+// (Consider moving these to a shared constants file if used elsewhere)
+export const PARSE_FILE_TYPES = {
+  CSV: 'text/csv',
+  XLS: 'application/vnd.ms-excel',
+  XLSX: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  JSON: 'application/json', // Added JSON MIME type
+};
+
+// Helper functions for processing file content
+export const processCSV = (str, delimiter = ',') => {
+  try {
+    const wb = XLSX.read(str, { type: 'string', raw: true });
+    const wsname = wb.SheetNames[0];
+    const ws = wb.Sheets[wsname];
+    return XLSX.utils.sheet_to_json(ws, { delimiter, defval: '' });
+  } catch (error) {
+    console.error('Error processing CSV:', error);
+    toast.error('Failed to parse CSV file.');
+    return null;
+  }
+};
+
+export const processXls = (base64Str) => {
+  try {
+    const wb = XLSX.read(base64Str, { type: 'base64' });
+    const result = {};
+    // Iterate over all sheet names
+    wb.SheetNames.forEach((sheetName) => {
+      const ws = wb.Sheets[sheetName];
+      // Convert sheet to JSON array
+      const data = XLSX.utils.sheet_to_json(ws, { defval: '' }); // Use defval for empty cells
+      result[sheetName] = data; // Assign array to sheet name key
+    });
+    return result; // Return object with sheet names as keys
+  } catch (error) {
+    console.error('Error processing XLS/XLSX:', error);
+    toast.error('Failed to parse Excel file.');
+    return null;
+  }
+};
+
+// Added function to parse JSON content
+export const processJson = (str) => {
+  try {
+    // Use JSON5 for more flexibility (comments, trailing commas, etc.)
+    return JSON5.parse(str);
+  } catch (error) {
+    console.error('Error processing JSON:', error);
+    toast.error(`Failed to parse JSON file: ${error.message}`);
+    return null;
+  }
+};
+
+export const processFileContent = (fileType, fileContent) => {
+  switch (fileType) {
+    case PARSE_FILE_TYPES.CSV:
+      return processCSV(fileContent.readFileAsText);
+    case PARSE_FILE_TYPES.XLS:
+    case PARSE_FILE_TYPES.XLSX:
+      return processXls(fileContent.readFileAsDataURL); // Assuming this contains base64
+    case PARSE_FILE_TYPES.JSON:
+      return processJson(fileContent.readFileAsText); // Added JSON processing case
+    default:
+      console.warn(`Unsupported file type for parsing: ${fileType}`);
+      return null;
+  }
+};
+
+//? handle bad data in csv parser (e.g. empty cells) OR errors
+const DEPRECATED_handleErrors = (data) => {
+  const badData = data.filter((row) => {
+    return Object.values(row).some((value) => value === '');
+  });
+
+  const errors = data.filter((row) => {
+    return Object.values(row).some((value) => value === 'ERROR');
+  });
+
+  return [badData, errors];
+};
+
+const DEPRECATED_processCSV = (str, delimiter = ',') => {
+  try {
+    const wb = XLSX.read(str, { type: 'string', raw: true });
+    const wsname = wb.SheetNames[0];
+    const ws = wb.Sheets[wsname];
+    const data = XLSX.utils.sheet_to_json(ws, { delimiter, defval: '' });
+    return data;
+  } catch (error) {
+    console.log(error);
+    DEPRECATED_handleErrors(error);
+  }
+};
+
+const DEPRECATED_processXls = (str) => {
+  try {
+    const wb = XLSX.read(str, { type: 'base64' });
+    const wsname = wb.SheetNames[0];
+    const ws = wb.Sheets[wsname];
+    /* Convert array of arrays */
+    const data = XLSX.utils.sheet_to_json(ws);
+    return data;
+  } catch (error) {
+    console.log(error);
+    DEPRECATED_handleErrors(error);
+  }
+};
+
+export const DEPRECATED_processFileContent = (fileType, fileContent) => {
+  switch (fileType) {
+    case 'text/csv':
+      return DEPRECATED_processCSV(fileContent.readFileAsText);
+    case 'application/vnd.ms-excel':
+    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      return DEPRECATED_processXls(fileContent.readFileAsDataURL);
+
+    default:
+      break;
+  }
+};
+
+export const detectParserFile = (file) => {
+  return Object.values(PARSE_FILE_TYPES).includes(file.type);
+};
+
+export const parseFileContentEnabled = (file, autoDetect = false, parseFileType) => {
+  // const fileExtensionType = file.type.split('/')[1]; // Simplified extraction - not strictly needed here
+
+  if (autoDetect) {
+    return detectParserFile(file);
+  } else {
+    // Map friendly name (like 'csv') to mime type if necessary
+    // Assumes parseFileType is like 'CSV', 'XLS', etc.
+    const targetMimeType = PARSE_FILE_TYPES[parseFileType?.toUpperCase()];
+    return targetMimeType ? file.type === targetMimeType : false;
+  }
+}; 
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js b/frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js
new file mode 100644
index 0000000000..5344cee09c
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/hooks/useFilePicker.js
@@ -0,0 +1,596 @@
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { toast } from 'react-hot-toast';
+import { formatFileSize } from '@/_helpers/utils';
+import { processFileContent, DEPRECATED_processFileContent, parseFileContentEnabled } from '../helpers/fileProcessing';
+import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
+
+export const useFilePicker = ({
+  validation,
+  properties,
+  styles,
+  fireEvent,
+  setExposedVariable,
+  setExposedVariables,
+  darkMode,
+  height,
+  id, // id might be needed for events
+  component, // component might be needed for events
+}) => {
+  const isInitialRender = useRef(true);
+
+  // --- Resolved Properties ---
+  const instructionText = properties?.instructionText ?? 'Drag and drop files here or click to select files';
+  const enableDropzone = properties?.enableDropzone ?? true;
+  const enablePicker = properties?.enablePicker ?? true;
+  const enableMultiple = properties?.enableMultiple ?? false;
+  const parseContent = properties.parseContent ?? false;
+  const fileTypeFromExtension = properties.parseFileType ?? 'auto-detect';
+  const labelText = properties.label ?? '';
+
+  const initialLoading = properties.loadingState ?? false;
+  const initialVisible = properties.visibility ?? true;
+  const initialDisabled = properties.disabledState ?? false;
+
+  const maxFileCount = validation?.maxFileCount ?? 2;
+  const fileTypeCategory = validation?.fileType ?? '*/*';
+  const maxSize = validation?.maxSize ?? 51200000;
+  const minSize = validation?.minSize ?? 50;
+  const minFileCount = validation?.minFileCount ?? 0;
+  const isMandatory = validation?.enableValidation ?? false;
+
+  // --- Resolved Styles ---
+  const containerBackgroundColor = styles?.containerBackgroundColor ?? 'var(--color-surface-1)';
+  const containerBorder = styles?.containerBorder ?? 'transparent';
+  const containerBoxShadow = styles?.containerBoxShadow ?? 'none';
+  const containerPadding = styles?.containerPadding ?? 16;
+  const borderRadius = styles?.borderRadius ?? 8;
+
+  const dropzoneTitleColor = styles?.dropzoneTitleColor ?? 'var(--text-primary';
+  const dropzoneActiveColor = styles?.dropzoneActiveColor ?? 'var(--primary-brand)';
+  const dropzoneErrorColor = styles?.dropzoneErrorColor ?? 'var(--status-error-strong)';
+  // --- Use useExposeState Hook ---
+  const { isDisabled, isVisible, isLoading } = useExposeState(
+    initialLoading,
+    initialVisible,
+    initialDisabled,
+    setExposedVariables,
+    setExposedVariable
+  );
+
+  // --- State ---
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const [fileErrors, setFileErrors] = useState({});
+  const [uploadingStatus, setUploadingStatus] = useState({});
+  const [isParsing, setIsParsing] = useState(false);
+  const [disablePicker, setDisablePicker] = useState(false);
+  const [isMinCountMet, setIsMinCountMet] = useState(true);
+  const [isMandatoryMet, setIsMandatoryMet] = useState(!isMandatory);
+  const [isValid, setIsValid] = useState(!isMandatory);
+  const [dropzoneRejections, setDropzoneRejections] = useState([]);
+  const [uiErrorMessage, setUiErrorMessage] = useState('');
+  const [isTouched, setIsTouched] = useState(false);
+
+  // Calculate total file size
+  const totalFileSize = useMemo(() => {
+    return selectedFiles.reduce((sum, file) => sum + (file.size || 0), 0);
+  }, [selectedFiles]);
+
+  // --- File Handling Logic ---
+  const getFileData = useCallback((file, method = 'readAsText') => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (event) => resolve(event.target.result);
+      reader.onerror = (error) => {
+        console.error('FileReader Error:', error);
+        if (error.name === 'NotReadableError') {
+          toast.error(error.message);
+        }
+        reject(error);
+      };
+      if (method === 'readAsDataURL') {
+        reader.readAsDataURL(file);
+      } else {
+        reader.readAsText(file);
+      }
+    });
+  }, []);
+
+  const fileReader = useCallback(
+    async (file) => {
+      try {
+        const readFileAsText = await getFileData(file, 'readAsText');
+        const readFileAsDataURLResult = await getFileData(file, 'readAsDataURL');
+        const base64Data = readFileAsDataURLResult.split(',')[1];
+
+        const shouldProcessFileParsing =
+          parseContent && parseFileContentEnabled(file, fileTypeFromExtension === 'auto-detect', fileTypeFromExtension);
+
+        let parsedValue = null;
+        let parsedData = null;
+        if (shouldProcessFileParsing) {
+          const contentForParsing = {
+            readFileAsText: readFileAsText,
+            readFileAsDataURL: base64Data,
+          };
+          parsedValue = processFileContent(file.type, contentForParsing);
+          parsedData = DEPRECATED_processFileContent(file.type, contentForParsing);
+        }
+
+        return {
+          lastModified: file.lastModified,
+          lastModifiedDate: file.lastModifiedDate,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          webkitRelativePath: file.webkitRelativePath,
+          content: readFileAsText,
+          base64Data: base64Data,
+          parsedValue: parsedValue,
+          parsedData: parsedData,
+        };
+      } catch (error) {
+        console.error(`Error reading file ${file.name}:`, error);
+        // Update status/errors directly here or ensure it's handled by caller
+        setUploadingStatus((prev) => ({ ...prev, [file.name]: 'error' }));
+        setFileErrors((prev) => ({
+          ...prev,
+          [file.name]: error.message || 'Failed to read file',
+        }));
+        throw error; // Re-throw for Promise.allSettled
+      }
+    },
+    [getFileData, parseContent, fileTypeFromExtension]
+  );
+
+  // --- Dropzone Setup ---
+  const onDropRejected = useCallback(
+    (rejectedFiles) => {
+      // For UI display, decide on one message
+      if (rejectedFiles.length === 1) {
+        const { file, errors } = rejectedFiles[0];
+        const error = errors[0];
+        let specificMessage = error.message;
+        // Generate specific message (similar to existing logic but for a single error)
+        switch (error.code) {
+          case 'file-invalid-type':
+            specificMessage = `The file "${file.name}" has an unsupported file type.`;
+            if (fileTypeCategory && fileTypeCategory !== '*/*') {
+              specificMessage += ` Please upload files of type: ${fileTypeCategory}.`;
+            }
+            break;
+          case 'file-too-small':
+            specificMessage = `The file "${file.name}" (${formatFileSize(
+              file.size
+            )}) is smaller than the minimum allowed size of ${formatFileSize(minSize)}.`;
+            break;
+          case 'file-too-large':
+            specificMessage = `The file "${file.name}" (${formatFileSize(
+              file.size
+            )}) exceeds the maximum allowed size of ${formatFileSize(maxSize)}.`;
+            break;
+          case 'too-many-files':
+            specificMessage = `You can select a maximum of ${maxFileCount} files.`;
+            break;
+          case 'duplicate-file':
+            specificMessage = `The file "${file.name}" has already been selected.`;
+            break;
+          default:
+            specificMessage =
+              error.message && typeof error.message === 'string' && error.message.trim() !== ''
+                ? error.message
+                : `An issue occurred with file "${file.name}".`;
+            break;
+        }
+        setUiErrorMessage(specificMessage);
+        toast.error(specificMessage); // Toast the specific error
+      } else if (rejectedFiles.length > 1) {
+        const genericMessage = 'Multiple files have errors. Please check the requirements.';
+        setUiErrorMessage(genericMessage);
+        // Toast individual errors if desired, or one generic toast
+        for (const { file, errors } of rejectedFiles) {
+          // Simplified toast for multiple errors, could be more detailed
+          toast.error(`Error with ${file.name}: ${errors[0].message}`);
+        }
+      }
+      // dropzoneRejections state can be kept raw for other potential uses or removed if only for this UI message
+      setDropzoneRejections(rejectedFiles); // Keep raw rejections for potential debugging or detailed listing elsewhere
+
+      // Clear setUiErrorMessage afgter 5 seconds
+      setTimeout(() => {
+        clearErrorStates();
+      }, 10000);
+    },
+    [fileTypeCategory, minSize, maxSize, maxFileCount]
+  );
+
+  // Custom validator
+  const validateFile = useCallback(
+    (file) => {
+      // Check 1: Duplicate file
+      if (selectedFiles.some((existingFile) => existingFile.name === file.name && existingFile.size === file.size)) {
+        return {
+          code: 'duplicate-file',
+          message: `The file "${file.name}" has already been selected.`,
+        };
+      }
+
+      // Check 2: If single file mode and a file is already selected
+      if (!enableMultiple && selectedFiles.length >= 1) {
+        return {
+          code: 'max-files-exceeded',
+          message: 'Only one file can be uploaded.',
+        };
+      }
+
+      // Check 3: If multiple file mode and max file count is already reached
+      if (enableMultiple && selectedFiles.length >= maxFileCount) {
+        return {
+          code: 'max-files-exceeded',
+          message: `You can only upload up to ${maxFileCount} files.`,
+        };
+      }
+
+      return null; // File passes custom validation
+    },
+    [selectedFiles, enableMultiple, maxFileCount]
+  );
+
+  const onDrop = useCallback(
+    async (acceptedDropFiles) => {
+      // Fire 'onFileSelected' event before processing
+      fireEvent?.('onFileSelected');
+      setIsTouched(true); // Set touched state
+
+      const currentFileNames = selectedFiles.map((f) => f.name);
+      const newFilesToAdd = acceptedDropFiles.filter((f) => !currentFileNames.includes(f.name));
+
+      if (parseContent) {
+        setIsParsing(true);
+        setExposedVariable?.('isParsing', true);
+      }
+
+      const processPromises = newFilesToAdd.map((file) => {
+        setUploadingStatus((prev) => ({ ...prev, [file.name]: 'uploading' }));
+        return fileReader(file);
+      });
+
+      const results = await Promise.allSettled(processPromises);
+
+      const successfullyProcessedFiles = [];
+      const currentErrors = { ...fileErrors }; // Use a local copy for this drop operation
+      const currentStatuses = { ...uploadingStatus };
+
+      results.forEach((result, index) => {
+        const fileName = newFilesToAdd[index].name;
+        if (result.status === 'fulfilled') {
+          successfullyProcessedFiles.push(result.value);
+          currentStatuses[fileName] = 'uploaded';
+          if (currentErrors[fileName]) delete currentErrors[fileName]; // Clear previous error
+        } else {
+          const errorMsg = result.reason?.message || 'Failed to process file';
+          currentErrors[fileName] = errorMsg;
+          currentStatuses[fileName] = 'error';
+          toast.error(`Error processing ${fileName}: ${errorMsg}`);
+        }
+      });
+
+      setSelectedFiles((prevFiles) => {
+        const updatedFiles = enableMultiple
+          ? [...prevFiles, ...successfullyProcessedFiles]
+          : [...successfullyProcessedFiles];
+        return enableMultiple ? updatedFiles.slice(0, maxFileCount) : updatedFiles;
+      });
+
+      setFileErrors(currentErrors); // Update state with errors from this drop
+      setUploadingStatus(currentStatuses); // Update state with statuses from this drop
+
+      if (parseContent) {
+        setIsParsing(false);
+        setExposedVariable?.('isParsing', false);
+      }
+
+      // Fire 'onFileLoaded' event after processing
+      if (fireEvent && successfullyProcessedFiles.length > 0) {
+        fireEvent?.('onFileLoaded', { files: successfullyProcessedFiles });
+      }
+
+      // Clear dropzone rejections when new files are accepted
+      if (acceptedDropFiles.length > 0) {
+        setDropzoneRejections([]);
+      }
+    },
+    [
+      selectedFiles,
+      parseContent,
+      fireEvent,
+      setExposedVariable,
+      fileReader,
+      enableMultiple,
+      maxFileCount,
+      fileErrors,
+      uploadingStatus,
+    ]
+  );
+
+  // Calculate the accept prop based on the category
+  const acceptProp = useMemo(() => {
+    const pattern = fileTypeCategory;
+    if (!pattern) {
+      return null; // Accept all if pattern is null/undefined or category not found
+    }
+    // Convert comma-separated string to the object format react-dropzone expects
+    return pattern.split(',').reduce((acc, type) => {
+      const trimmedType = type.trim();
+      if (trimmedType) acc[trimmedType] = [];
+      return acc;
+    }, {});
+  }, [fileTypeCategory]);
+
+  // Reusable function to clear error states
+  const clearErrorStates = useCallback(() => {
+    setUiErrorMessage('');
+    setDropzoneRejections([]);
+    setFileErrors({});
+    setUploadingStatus({});
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
+    accept: acceptProp, // Use the calculated accept prop
+    noClick: !enablePicker || disablePicker,
+    noDrag: !enableDropzone || disablePicker,
+    noKeyboard: true,
+    maxSize: maxSize,
+    minSize: minSize,
+    multiple: enableMultiple,
+    disabled: isDisabled || disablePicker,
+    onDropRejected: onDropRejected,
+    validator: validateFile,
+    onDrop: onDrop,
+    onDropAccepted: (acceptedFiles) => {
+      // After files are accepted, check if minFileCount is met
+      if (selectedFiles.length + acceptedFiles.length < minFileCount) {
+        setUiErrorMessage(`Please select at least ${minFileCount} file${minFileCount > 1 ? 's' : ''}.`);
+        setTimeout(() => {
+          clearErrorStates();
+        }, 5000);
+      } else {
+        setUiErrorMessage('');
+      }
+    },
+    onFileDialogOpen: () => {
+      clearErrorStates();
+      setTimeout(() => {
+        setIsTouched(true); // Set touched state
+      }, 2000);
+    },
+  });
+
+  // Function to remove a file
+  const handleRemoveFile = useCallback(
+    (indexToRemove) => {
+      const fileToRemove = selectedFiles[indexToRemove];
+      if (!fileToRemove) return;
+
+      setSelectedFiles((prevFiles) => prevFiles.filter((_, index) => index !== indexToRemove));
+
+      setFileErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[fileToRemove.name];
+        return newErrors;
+      });
+      setUploadingStatus((prev) => {
+        const newStatus = { ...prev };
+        delete newStatus[fileToRemove.name];
+        return newStatus;
+      });
+
+      fireEvent?.('onFileDeselected', { file: fileToRemove });
+    },
+    [selectedFiles, fireEvent]
+  );
+
+  // --- Exposed Actions ---
+  const clearFiles = useCallback(() => {
+    setSelectedFiles([]);
+    setFileErrors({});
+    setUploadingStatus({});
+  }, []);
+
+  const setFileName = useCallback(
+    (indexOrUpdates, newNameIfSingle) => {
+      setSelectedFiles((currentFiles) => {
+        const updateMap = {}; // Changed from let to const
+        if (Array.isArray(indexOrUpdates)) {
+          // Batch update: [{index: number, newFileName: string}]
+          for (const update of indexOrUpdates) {
+            if (typeof update.index === 'number' && typeof update.newFileName === 'string') {
+              updateMap[update.index] = update.newFileName.trim();
+            }
+          }
+        } else if (typeof indexOrUpdates === 'number' && typeof newNameIfSingle === 'string') {
+          // Single update: (index: number, newFileName: string)
+          const index = indexOrUpdates;
+          const newFileName = newNameIfSingle.trim();
+          if (newFileName !== '') {
+            updateMap[index] = newFileName;
+          }
+        }
+
+        if (Object.keys(updateMap).length === 0) return currentFiles; // No valid updates
+
+        return currentFiles.map((file, index) => {
+          if (Object.prototype.hasOwnProperty.call(updateMap, index)) {
+            const newNameBase = updateMap[index];
+            const currentNameParts = file.name.split('.');
+            const extension = currentNameParts.length > 1 ? currentNameParts.pop() : null;
+            const finalNewName = extension ? `${newNameBase}.${extension}` : newNameBase;
+            // Ensure name doesn't become empty if base is empty and no extension
+            if (finalNewName === '' || finalNewName === '.') return file;
+            return { ...file, name: finalNewName };
+          }
+          return file;
+        });
+      });
+    },
+    [] // No dependencies needed
+  );
+
+  // --- Effects ---
+  useEffect(() => {
+    const newIsMandatoryMet = !isMandatory || selectedFiles.length > 0;
+    setIsMandatoryMet(newIsMandatoryMet);
+
+    const newIsMinCountMet = selectedFiles.length >= minFileCount || !enableMultiple;
+    setIsMinCountMet(newIsMinCountMet);
+
+    const newIsValid = newIsMandatoryMet && newIsMinCountMet;
+    setIsValid(newIsValid);
+
+    // Update exposed validation status
+    setExposedVariable?.('isValid', newIsValid);
+
+    if (isMandatory && selectedFiles.length === 0 && isTouched && !isDragActive) {
+      setUiErrorMessage('This field is mandatory. Please select a file.');
+    } else if (
+      uiErrorMessage === 'This field is mandatory. Please select a file.' &&
+      (selectedFiles.length > 0 || !isMandatory || !isTouched || isDragActive)
+    ) {
+      setUiErrorMessage('');
+    }
+  }, [
+    selectedFiles.length,
+    isMandatory,
+    isTouched,
+    uiErrorMessage,
+    isDragActive,
+    setUiErrorMessage,
+    minFileCount,
+    enableMultiple,
+    setExposedVariable,
+  ]);
+
+  useEffect(() => {
+    // Update exposed variables
+    if (!isInitialRender.current) {
+      const minMet = selectedFiles.length >= minFileCount;
+      const mandatoryMet = !isMandatory || selectedFiles.length > 0;
+      const currentIsValid = minMet && mandatoryMet;
+
+      setIsMinCountMet(minMet);
+      setIsMandatoryMet(mandatoryMet);
+      setIsValid(currentIsValid);
+
+      // useExposeState handles: isLoading, isVisible, isDisabled, setVisibility, setLoading, setDisable
+      // We manually expose widget-specific items:
+      setExposedVariables?.({
+        clearFiles: clearFiles,
+        setFileName: setFileName,
+      });
+      setExposedVariable?.('files', selectedFiles); // Contains parsedValue
+      setExposedVariable?.('file', selectedFiles); // Contains parsedValue
+      setExposedVariable?.('isParsing', isParsing);
+      setExposedVariable?.('isMandatory', isMandatory);
+      setExposedVariable?.('isValid', currentIsValid);
+      setExposedVariable?.('fileSize', totalFileSize);
+      setExposedVariable?.('uiErrorMessage', uiErrorMessage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    selectedFiles,
+    isParsing,
+    minFileCount,
+    isMandatory,
+    totalFileSize,
+    clearFiles,
+    setFileName,
+    setExposedVariables,
+    setExposedVariable,
+    uiErrorMessage,
+    dropzoneRejections,
+  ]); // Multi-line dependencies
+
+  useEffect(() => {
+    // Initial setup only
+    const initialIsValid = !isMandatory; // Calculate initial validity here
+    // useExposeState handles initial exposure of common vars/setters
+    // We manually expose widget-specific items initially:
+    setExposedVariables?.({
+      clearFiles: clearFiles,
+      setFileName: setFileName,
+    });
+    setExposedVariable?.('files', []);
+    setExposedVariable?.('file', []);
+    setExposedVariable?.('isParsing', false);
+    setExposedVariable?.('isMandatory', isMandatory);
+    setExposedVariable?.('isValid', initialIsValid);
+    setExposedVariable?.('fileSize', 0);
+    setExposedVariable?.('uiErrorMessage', '');
+
+    setIsMandatoryMet(!isMandatory);
+    setIsValid(initialIsValid); // Set initial state using the calculated value
+    isInitialRender.current = false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMandatory, clearFiles, setFileName, setExposedVariables, setExposedVariable]); // Multi-line dependencies
+
+  useEffect(() => {
+    // Update internal disablePicker based on isDisabled from useExposeState and other logic
+    const shouldDisable =
+      isDisabled || // Use isDisabled from hook
+      (enableMultiple && selectedFiles.length >= maxFileCount) ||
+      (!enableMultiple && selectedFiles.length >= 1);
+    setDisablePicker(shouldDisable);
+    // Use isDisabled from useExposeState for dropzone disabled prop
+  }, [selectedFiles.length, maxFileCount, enableMultiple, isDisabled]);
+
+  useEffect(() => {
+    // Clear UI error message when isDisabled state changes
+    setUiErrorMessage('');
+  }, [isDisabled, setUiErrorMessage]);
+
+  // --- Styles for Dropzone ---
+  // Moved style calculation to component as it depends on drag states from useDropzone return
+
+  return {
+    isVisible,
+    isLoading,
+    // Dropzone props
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    // File state
+    selectedFiles,
+    fileErrors,
+    uploadingStatus,
+    dropzoneRejections,
+    isParsing,
+    // Actions
+    handleRemoveFile,
+    // Calculated state/props for component
+    labelText,
+    instructionText,
+    disablePicker, // Needed for styling/cursor
+    disabledState: isDisabled, // Return isDisabled from useExposeState
+    borderRadius, // Needed for styling
+    containerBackgroundColor,
+    containerBorder,
+    containerBoxShadow,
+    containerPadding,
+    dropzoneTitleColor,
+    dropzoneActiveColor,
+    dropzoneErrorColor,
+    height, // Needed for styling
+    minSize,
+    maxSize,
+    isMandatory,
+    minFileCount,
+    maxFileCount,
+    isMinCountMet,
+    isMandatoryMet,
+    clearFiles, // Return actions if needed internally (currently not)
+    setFileName, // Return actions if needed internally (currently not)
+    uiErrorMessage, // Return new state
+  };
+};
diff --git a/frontend/src/AppBuilder/Widgets/FilePicker/style.scss b/frontend/src/AppBuilder/Widgets/FilePicker/style.scss
new file mode 100644
index 0000000000..63c9ac1a78
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/FilePicker/style.scss
@@ -0,0 +1,291 @@
+:root {
+  --file-picker-primary-brand: var(--primary-brand);
+  --file-picker-error-strong: var(--status-error-strong);
+  --file-picker-text-primary: var(--text-primary);
+  --file-picker-border-radius: 6px;
+  --file-picker-background-color: var(--color-surface-1);
+  --file-picker-border: transparent;
+  --file-picker-box-shadow: none;
+  --file-picker-padding: 16px;
+}
+
+// File List Item
+.file-list-item {
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  border-radius: 8px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: var(--surfaces-surface-01);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  color: var(--cc-primary-text);
+
+  &:hover {
+    background: var(--surfaces-surface-02);
+
+    .delete-button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &.error {
+    .file-error-message {
+      color: var(--status-error-strong);
+    }
+  }
+
+  &.uploading {
+    opacity: 0.7;
+  }
+
+  .file-details {
+    display: flex;
+    align-items: end;
+    gap: 4px;
+    flex-grow: 1;
+    overflow: hidden;
+
+    .file-name {
+      font-weight: 500;
+      color: var(--file-picker-text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .file-meta {
+      color: var(--cc-placeholder-text);
+      font-size: 11px;
+      white-space: nowrap;
+    }
+  }
+
+  .delete-button {
+    width: 20px;
+    flex-shrink: 0;
+    padding: 0;
+    opacity: 0;
+    visibility: hidden;
+    background-color: var(--cc-surface1-surface);
+    border-color: var(--cc-default-border);
+
+    &:hover {
+      background-color: var(--file-picker-delete-button-hover-bg) !important;
+    }
+  }
+}
+
+// File Picker Dropzone
+.file-picker-dropzone {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--file-picker-padding);
+  border: 1px dashed var(--cc-default-border);
+  outline: none;
+  border-radius: var(--file-picker-border-radius);
+  transition-property: border-color, background-color, box-shadow, color;
+  transition-duration: 0.18s;
+  transition-timing-function: ease-in-out;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 52px;
+  cursor: pointer;
+  margin-top: 0.5rem;
+
+  &:hover {
+    border-color: var(--cc-primary-brand);
+    color: var(--cc-primary-text);
+    border-width: 2px;
+  }
+
+  &:focus,
+  &:active {
+    border-color: var(--cc-primary-brand);
+    color: var(--cc-primary-text);
+  }
+
+  &.is-dragging {
+    border-color: var(--cc-primary-brand);
+    border-width: 2px;
+  }
+
+  &.is-accepting {
+    border-color: var(--cc-primary-brand);
+    border-width: 2px;
+  }
+
+  &.is-rejecting {
+    border-color: var(--status-error-strong);
+  }
+
+  &.is-focused {
+    // border-style: solid;
+    // border-color: var(--primary-accent-strong);
+    box-shadow: 0 0 0 2px var(--surfaces-surface-01),
+      0 0 0 4px var(--interactive-overlays-focus-outline);
+  }
+
+  &.is-disabled {
+    background-color: var(--cc-surface2-surface);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .dropzone {
+
+    &-instruction,
+    &-message {
+      text-align: center;
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    &-instruction-link {
+      color: var(--cc-primary-brand);
+      font-weight: 500;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// Validation Bar
+.validation-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--text-placeholder);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: 0;
+
+  .validation-info {
+    color: var(--cc-placeholder-text);
+  }
+
+  .validation-separator {
+    margin: 0 8px;
+    color: var(--borders-default);
+  }
+}
+
+// File Picker Widget
+.file-picker {
+  &-title {
+    color: var(--cc-primary-text);
+    text-align: left;
+    width: 100%;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0;
+    margin: 0;
+  }
+
+  &-widget-wrapper {
+    // padding: var(--file-picker-padding);
+    display: flex;
+    flex-direction: column;
+    // gap: 12px;
+    background-color: var(--file-picker-background-color);
+    border-radius: var(--file-picker-border-radius);
+    border: var(--file-picker-border);
+    box-shadow: var(--file-picker-box-shadow);
+  }
+
+  &-files-pane {
+    margin: 0;
+    min-height: 0;
+    padding: 0 0.75rem;
+    padding-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+
+    &:only-child {
+      height: auto;
+    }
+  }
+}
+
+.file-list-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+  height: auto;
+}
+
+// Error Message
+.file-picker-error-message {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 0;
+  color: var(--status-error-strong);
+
+  .error-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--status-error-strong);
+  }
+
+  .error-text {
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--status-error-strong);
+  }
+}
+
+.files-pane-scrollable {
+  overflow-y: auto;
+
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  height: 100%;
+  overflow: hidden auto;
+
+  /* Hide scrollbar by default */
+  &::-webkit-scrollbar {
+    width: 6px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  /* Show scrollbar only on hover */
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background-color: #6a727c4d;
+      border-radius: 3px;
+    }
+  }
+
+  &:hover {
+    scrollbar-color: #6a727c4d transparent;
+  }
+}
+
+.files-pane-auto-height {
+  height: auto;
+  overflow-y: visible;
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index f0a1156a45..a8da234352 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -5,6 +5,8 @@ import _, { debounce, omit } from 'lodash';
 import { generateUIComponents, getBodyHeight } from './FormUtils';
 import { useMounted } from '@/_hooks/use-mount';
 import { onComponentClick, removeFunctionObjects } from '@/_helpers/appUtils';
+import { useAppInfo } from '@/_stores/appDataStore';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
 import RenderSchema from './RenderSchema';
 import useStore from '@/AppBuilder/_stores/store';
@@ -16,10 +18,14 @@ import {
 } from '@/AppBuilder/AppCanvas/appCanvasConstants';
 import { HorizontalSlot } from './Components/HorizontalSlot';
 import { useActiveSlot } from '@/AppBuilder/_hooks/useActiveSlot';
+// eslint-disable-next-line import/no-unresolved
+import { diff } from 'deep-object-diff';
+import { checkDiff } from '@/AppBuilder/Widgets/componentUtils';
+import Spinner from '@/_ui/Spinner';
 
 import './form.scss';
 
-export const Form = function Form(props) {
+const FormComponent = (props) => {
   const {
     id,
     component,
@@ -33,20 +39,34 @@ export const Form = function Form(props) {
     properties,
     resetComponent = () => {},
     dataCy,
+    adjustComponentPositions,
+    currentLayout,
+    componentCount,
     onComponentClick,
   } = props;
-  const childComponents = useStore((state) => state.getChildComponents(id), shallow);
+  const childComponents = useStore((state) => state.getChildComponents(id), checkDiff);
+  const isJSONSchema = useStore((state) => state.isJsonSchemaInGenerateFormFrom(id), shallow);
+
   const { borderRadius, borderColor, boxShadow, footerBackgroundColor, headerBackgroundColor } = styles;
+
   const {
     buttonToSubmit,
-    advanced,
-    JSONSchema,
+    advanced: _deprecatedAdvanced,
+    JSONSchema: _deprecatedJSONSchema,
     showHeader = false,
     showFooter = false,
     headerHeight = 80,
     footerHeight = 80,
     canvasHeight,
+    validateOnSubmit = true,
+    resetOnSubmit = true,
+    newJsonSchema,
+    dynamicHeight,
   } = properties;
+
+  const advanced = _deprecatedAdvanced || isJSONSchema;
+  const JSONSchema = _deprecatedAdvanced ? _deprecatedJSONSchema : newJsonSchema;
+
   const { isDisabled, isVisible, isLoading } = useExposeState(
     properties.loadingState,
     properties.visibility,
@@ -64,7 +84,7 @@ export const Form = function Form(props) {
     backgroundColor,
     borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
     border: `${SUBCONTAINER_CANVAS_BORDER_WIDTH}px solid ${borderColor}`,
-    height,
+    height: dynamicHeight ? '100%' : height,
     display: isVisible ? 'flex' : 'none',
     position: 'relative',
     boxShadow,
@@ -75,13 +95,46 @@ export const Form = function Form(props) {
   const formContent = {
     overflow: 'hidden auto',
     display: 'flex',
-    height: '100%',
+    height: canHeight || '100%',
     paddingTop: `${CONTAINER_FORM_CANVAS_PADDING}px`,
     paddingBottom: showFooter ? '3px' : '7px',
     paddingLeft: `${CONTAINER_FORM_CANVAS_PADDING}px`,
     paddingRight: `${CONTAINER_FORM_CANVAS_PADDING}px`,
   };
 
+  const headerMaxHeight = parseInt(height, 10) - parseInt(footerHeight, 10) - 100 - 10;
+  const footerMaxHeight = parseInt(height, 10) - parseInt(headerHeight, 10) - 100 - 10;
+
+  const formFooter = {
+    flexShrink: 0,
+    paddingTop: '3px',
+    paddingBottom: '7px',
+    paddingLeft: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+    paddingRight: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+    maxHeight: `${footerMaxHeight}px`,
+    backgroundColor:
+      ['#fff', '#ffffffff'].includes(footerBackgroundColor) && darkMode ? '#1F2837' : footerBackgroundColor,
+  };
+  const formHeader = {
+    flexShrink: 0,
+    paddingBottom: '3px',
+    paddingTop: '7px',
+    paddingLeft: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+    paddingRight: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+    maxHeight: `${headerMaxHeight}px`,
+    backgroundColor:
+      ['#fff', '#ffffffff'].includes(headerBackgroundColor) && darkMode ? '#1F2837' : headerBackgroundColor,
+  };
+  useDynamicHeight({
+    dynamicHeight,
+    id,
+    height,
+    adjustComponentPositions,
+    currentLayout,
+    isContainer: true,
+    componentCount,
+  });
+
   const parentRef = useRef(null);
   const childDataRef = useRef({});
 
@@ -96,17 +149,18 @@ export const Form = function Form(props) {
         resetComponent();
       },
       submitForm: async function () {
-        if (isValid) {
-          fireEvent('onSubmit').then(() => resetComponent());
-        } else {
-          fireEvent('onInvalid');
+        if (validateOnSubmit) {
+          if (!isValid) {
+            return fireEvent('onInvalid');
+          }
         }
+        fireEvent('onSubmit').then(() => resetOnSubmit && resetComponent());
       },
     };
 
     setExposedVariables(exposedVariables);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [resetOnSubmit, validateOnSubmit]);
 
   const extractData = (data) => {
     const result = {};
@@ -151,10 +205,13 @@ export const Form = function Form(props) {
   useEffect(() => {
     let formattedChildData = {};
     let childValidation = true;
+    let formData = {}; // New object to store form data
+
     if (!childComponents) {
       const exposedVariables = {
         data: formattedChildData,
         isValid: childValidation,
+        formData, // Expose formData
         ...(!advanced && { children: formattedChildData }),
       };
 
@@ -169,21 +226,39 @@ export const Form = function Form(props) {
       Object.keys(childComponents ?? {}).forEach((childId) => {
         if (childrenData?.[childId]?.name) {
           const componentName = childComponents?.[childId]?.component?.component?.name;
+          const componentValue = (() => {
+            const childData = childrenData[childId];
+            if (!childData) return null; // Default to null if childData is undefined
+
+            if (childData.hasOwnProperty('value')) return childData.value;
+            if (childData.hasOwnProperty('values')) return childData.values;
+            if (childData.hasOwnProperty('file')) return childData.file;
+            if (childData.hasOwnProperty('selectedDateRange')) return childData.selectedDateRange;
+
+            return null; // Default to null if no matching key is found
+          })();
+
+          if (componentValue !== null) {
+            formData[componentName] = componentValue; // Populate formData
+          }
           formattedChildData[componentName] = { ...omit(childrenData[childId], 'name'), id: childId };
           childValidation = childValidation && (childrenData[childId]?.isValid ?? true);
         }
       });
     }
+
     formattedChildData = Object.fromEntries(
-      // eslint-disable-next-line no-unused-vars
-      Object.entries(formattedChildData).map(([key, { formKey, ...rest }]) => [key, rest]) // removing formkey from final exposed data
+      Object.entries(formattedChildData).map(([key, { formKey, ...rest }]) => [key, rest]) // removing formKey from final exposed data
     );
+
     const formattedChildDataClone = deepClone(formattedChildData);
     const exposedVariables = {
       ...(!advanced && { children: formattedChildDataClone }),
       data: removeFunctionObjects(formattedChildData),
       isValid: childValidation,
+      formData, // Expose formData
     };
+
     setExposedVariables(exposedVariables);
     setValidation(childValidation);
   }, [childrenData, advanced]);
@@ -192,19 +267,22 @@ export const Form = function Form(props) {
     document.addEventListener('submitForm', handleFormSubmission);
     return () => document.removeEventListener('submitForm', handleFormSubmission);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [buttonToSubmit, isValid, advanced, JSON.stringify(uiComponents)]);
+  }, [buttonToSubmit, isValid, advanced, JSON.stringify(uiComponents), resetOnSubmit, validateOnSubmit]);
 
   const handleSubmit = (event) => {
     event.preventDefault();
   };
   const fireSubmissionEvent = () => {
-    if (isValid) {
-      fireEvent('onSubmit').then(() => {
-        debounce(() => resetComponent(), 100)();
-      });
-    } else {
-      fireEvent('onInvalid');
+    if (validateOnSubmit) {
+      if (!isValid) {
+        return fireEvent('onInvalid');
+      }
     }
+    fireEvent('onSubmit').then(() => {
+      if (resetOnSubmit) {
+        debounce(() => resetComponent(), 100)();
+      }
+    });
   };
 
   const handleFormSubmission = ({ detail: { buttonComponentId } }) => {
@@ -293,28 +371,6 @@ export const Form = function Form(props) {
     const roundedHeight = Math.round(maxHeight / 10) * 10;
     setCanHeight(`${roundedHeight}px`);
   }, [computedFormBodyHeight, canvasHeight]);
-  const headerMaxHeight = parseInt(height, 10) - parseInt(footerHeight, 10) - 100 - 10;
-  const footerMaxHeight = parseInt(height, 10) - parseInt(headerHeight, 10) - 100 - 10;
-  const formFooter = {
-    flexShrink: 0,
-    paddingTop: '3px',
-    paddingBottom: '7px',
-    paddingLeft: `${CONTAINER_FORM_CANVAS_PADDING}px`,
-    paddingRight: `${CONTAINER_FORM_CANVAS_PADDING}px`,
-    maxHeight: `${footerMaxHeight}px`,
-    backgroundColor:
-      ['#fff', '#ffffffff'].includes(footerBackgroundColor) && darkMode ? '#1F2837' : footerBackgroundColor,
-  };
-  const formHeader = {
-    flexShrink: 0,
-    paddingBottom: '3px',
-    paddingTop: '7px',
-    paddingLeft: `${CONTAINER_FORM_CANVAS_PADDING}px`,
-    paddingRight: `${CONTAINER_FORM_CANVAS_PADDING}px`,
-    maxHeight: `${headerMaxHeight}px`,
-    backgroundColor:
-      ['#fff', '#ffffffff'].includes(headerBackgroundColor) && darkMode ? '#1F2837' : headerBackgroundColor,
-  };
 
   return (
     <form
@@ -343,16 +399,20 @@ export const Form = function Form(props) {
           componentType="Form"
         />
       )}
-
-      <div className="jet-form-body sub-container-overflow-wrap" style={formContent}>
+      <div
+        className={`jet-form-body sub-container-overflow-wrap hide-scrollbar show-scrollbar-on-hover ${
+          properties.dynamicHeight && `dynamic-${id}`
+        }`}
+        style={formContent}
+      >
         {isLoading ? (
           <div className="p-2 tw-flex tw-items-center tw-justify-center" style={{ margin: '0px auto' }}>
-            <div className="spinner-border" role="status"></div>
+            <Spinner />
           </div>
         ) : (
-          <fieldset disabled={isDisabled} style={{ width: '100%' }}>
+          <fieldset disabled={isDisabled} style={{ width: '100%', height: '100%' }}>
             {!advanced && (
-              <div className={'json-form-wrapper-disabled'} style={{ width: '100%', height: canHeight || '100%' }}>
+              <div className={'json-form-wrapper-disabled'} style={{ width: '100%', height: '100%' }}>
                 <SubContainer
                   id={id}
                   canvasHeight={parseInt(computedFormBodyHeight, 10)}
@@ -361,7 +421,8 @@ export const Form = function Form(props) {
                   onOptionsChange={onOptionsChange}
                   styles={{
                     backgroundColor: computedStyles.backgroundColor,
-                    height: canHeight,
+                    overflow: 'hidden auto',
+                    height: '100%',
                   }}
                   darkMode={darkMode}
                   componentType="Form"
@@ -422,3 +483,21 @@ export const Form = function Form(props) {
     </form>
   );
 };
+
+// Avoid rendering the Form component if there are no changes in properties or
+// changes are only in `generateFormFrom` as it is not required to re-render
+export const Form = React.memo(FormComponent, (prevProps, nextProps) => {
+  const diffInProps = diff(prevProps, nextProps) ?? {};
+
+  if (Object.keys(diffInProps).length === 0) return true; // No changes detected, no need to re-render
+  if (Object.keys(diffInProps).length === 1) {
+    if (
+      diffInProps['properties'] &&
+      diffInProps['properties']['generateFormFrom'] &&
+      diffInProps['properties']['generateFormFrom'] !== 'jsonSchema'
+    ) {
+      return true; // No changes detected in childrenData, no need to re-render
+    }
+  }
+  return false; // Changes detected, re-render the component
+});
diff --git a/frontend/src/AppBuilder/Widgets/Form/form.scss b/frontend/src/AppBuilder/Widgets/Form/form.scss
index 1e1776bef5..2d4d396209 100644
--- a/frontend/src/AppBuilder/Widgets/Form/form.scss
+++ b/frontend/src/AppBuilder/Widgets/Form/form.scss
@@ -6,6 +6,7 @@
 
 .wj-form-header {
   position: relative;
+
   &::after {
     content: "";
     position: absolute;
@@ -13,12 +14,13 @@
     left: -2px;
     right: -2px;
     height: 1px;
-    background-color: var(--border-weak);
+    background-color: var(--cc-default-border);
   }
 }
 
 .wj-form-footer {
   position: relative;
+
   &::after {
     content: "";
     position: absolute;
@@ -26,7 +28,7 @@
     left: -2px;
     right: -2px;
     height: 1px;
-    background-color: var(--border-weak);
+    background-color: var(--cc-default-border);
   }
 }
 
@@ -48,7 +50,8 @@
 .resizable-slot {
   position: relative;
   height: auto;
-  box-shadow: 0 0 0 1px transparent; /* Acts as a border */
+  box-shadow: 0 0 0 1px transparent;
+  /* Acts as a border */
   transition: box-shadow 0.15s ease-in-out;
   max-height: 100%;
 
@@ -67,8 +70,10 @@
   .resize-handle {
     position: absolute;
     bottom: -4px;
-    left: 50%; /* Center horizontally */
-    transform: translateX(-50%); /* Ensure proper centering */
+    left: 50%;
+    /* Center horizontally */
+    transform: translateX(-50%);
+    /* Ensure proper centering */
     width: 24px;
     height: 8px;
     border-radius: 4px;
@@ -85,8 +90,7 @@
   }
 }
 
-.only-bottom {
-}
+.only-bottom {}
 
 .jet-form-header {
   min-height: 10px;
@@ -114,7 +118,34 @@
     left: -3px;
     right: -3px;
   }
+
   .jet-form-body fieldset {
     padding: 20px;
   }
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Show scrollbar on hover for Chrome, Safari and Opera */
+.show-scrollbar-on-hover:hover::-webkit-scrollbar {
+  display: block;
+  width: 6px;
+}
+
+/* Scrollbar styling when visible on hover */
+.show-scrollbar-on-hover:hover::-webkit-scrollbar-track {
+  background: #e7eaef;
+  border-radius: 4px;
+}
+
+.show-scrollbar-on-hover:hover::-webkit-scrollbar-thumb {
+  background: #a0a6ae;
+  border-radius: 4px;
+}
+
+.show-scrollbar-on-hover:hover::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/Kanban/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/Kanban/Components/Modal.jsx
index 0acefe2053..35f09a222b 100644
--- a/frontend/src/AppBuilder/Widgets/Kanban/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/Kanban/Components/Modal.jsx
@@ -6,6 +6,7 @@ import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
+import './modal.scss';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 
 export const Modal = function Modal({ darkMode, showModal, setShowModal, kanbanProps, lastSelectedCard }) {
@@ -48,7 +49,7 @@ export const Modal = function Modal({ darkMode, showModal, setShowModal, kanbanP
   return (
     <BootstrapModal
       show={showModal}
-      contentClassName="modal-component"
+      contentClassName="modal-component kanban-modal"
       container={document.getElementsByClassName('real-canvas')[0]}
       size={'lg'}
       keyboard={true}
diff --git a/frontend/src/AppBuilder/Widgets/Kanban/Components/modal.scss b/frontend/src/AppBuilder/Widgets/Kanban/Components/modal.scss
new file mode 100644
index 0000000000..137f80659b
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/Kanban/Components/modal.scss
@@ -0,0 +1,6 @@
+.kanban-modal {
+    .container-fluid {
+        background-color: var(--cc-surface1-surface) ;
+    }
+
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/Listview.jsx b/frontend/src/AppBuilder/Widgets/Listview.jsx
index e08735eb2c..359ad3d65f 100644
--- a/frontend/src/AppBuilder/Widgets/Listview.jsx
+++ b/frontend/src/AppBuilder/Widgets/Listview.jsx
@@ -9,6 +9,7 @@ import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { diff } from 'deep-object-diff';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 
 export const Listview = function Listview({
@@ -19,6 +20,8 @@ export const Listview = function Listview({
   styles,
   fireEvent,
   setExposedVariables,
+  adjustComponentPositions,
+  currentLayout,
   darkMode,
   dataCy,
 }) {
@@ -40,6 +43,7 @@ export const Listview = function Listview({
     enablePagination = false,
     mode = 'list',
     columns = 1,
+    dynamicHeight,
   } = { ...fallbackProperties, ...properties };
   const { visibility, disabledState, borderRadius, boxShadow } = { ...fallbackStyles, ...styles };
   const backgroundColor =
@@ -51,7 +55,7 @@ export const Listview = function Listview({
     backgroundColor,
     border: '1px solid',
     borderColor,
-    height: enablePagination ? height - 54 : height,
+    height: dynamicHeight ? '100%' : enablePagination ? height - 54 : height,
     display: visibility ? 'flex' : 'none',
     borderRadius: borderRadius ?? 0,
     boxShadow,
@@ -69,7 +73,18 @@ export const Listview = function Listview({
   const [selectedRowIndex, setSelectedRowIndex] = useState(undefined);
   const [positiveColumns, setPositiveColumns] = useState(columns);
   const parentRef = useRef(null);
+
   const [childrenData, setChildrenData] = useState({});
+
+  useDynamicHeight({
+    dynamicHeight: dynamicHeight,
+    id: id,
+    height,
+    value: data,
+    adjustComponentPositions,
+    currentLayout,
+    width,
+  });
   const onOptionChange = useCallback(
     (optionName, value, componentId, index) => {
       setChildrenData((prevData) => {
@@ -249,8 +264,13 @@ export const Listview = function Listview({
       <div className={`w-100 m-0 ${enablePagination && 'pagination-margin-bottom-last-child'}`}>
         {filteredData.map((listItem, index) => (
           <div
-            className={`list-item ${mode == 'list' && 'w-100'}  ${showBorder && mode == 'list' ? 'border-bottom' : ''}`}
-            style={{ position: 'relative', height: `${rowHeight}px`, width: `${100 / positiveColumns}%` }}
+            className={`list-item ${mode == 'list' && 'w-100'}`}
+            style={{
+              position: 'relative',
+              height: `${rowHeight}px`,
+              width: `${100 / positiveColumns}%`,
+              ...(showBorder && mode == 'list' && { borderBottom: `1px solid var(--cc-default-border)` }),
+            }}
             key={index}
             // data-cy={`${String(component.name).toLowerCase()}-row-${index}`}
             onClickCapture={(event) => {
diff --git a/frontend/src/AppBuilder/Widgets/Modal.jsx b/frontend/src/AppBuilder/Widgets/Modal.jsx
index d3c8e15a9e..e5ee7715dc 100644
--- a/frontend/src/AppBuilder/Widgets/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/Modal.jsx
@@ -220,7 +220,7 @@ export const Modal = function Modal({
       display: visibility ? '' : 'none',
       '--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(),
       boxShadow,
-      borderColor: 'var(--primary-brand)',
+      borderColor: 'var(--cc-primary-brand)',
     },
   };
 
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js
index 47822c6519..cec957f4bc 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js
@@ -43,6 +43,7 @@ export function createModalStyles({
       display: isVisible ? '' : 'none',
       '--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(),
       boxShadow,
+      borderColor: triggerButtonBackgroundColor
     },
   };
 }
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/style.scss b/frontend/src/AppBuilder/Widgets/ModalV2/style.scss
index cdedff8b39..32c1b71d8e 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/style.scss
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/style.scss
@@ -60,7 +60,7 @@
   .modal-footer {
     position: relative;
     padding: 0;
-    border-top: 1px solid var(--border-weak);
+    border-top: 1px solid var(--cc-default-border);
     overflow-x: hidden;
     width: 100%;
 
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/Table.jsx b/frontend/src/AppBuilder/Widgets/NewTable/Table.jsx
index 7615f9f585..07cbe4c2cd 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/Table.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/Table.jsx
@@ -9,10 +9,24 @@ import useTableStore from './_stores/tableStore';
 import TableContainer from './_components/TableContainer';
 import { transformTableData } from './_utils/transformTableData';
 import { usePrevious } from '@dnd-kit/utilities';
+import { getColorModeFromLuminance, getCssVarValue, getModifiedColor } from '@/Editor/Components/utils';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 
 export const Table = memo(
-  ({ id, componentName, width, height, properties, styles, darkMode, fireEvent, setExposedVariables }) => {
+  ({
+    id,
+    componentName,
+    width,
+    height,
+    properties,
+    styles,
+    darkMode,
+    fireEvent,
+    setExposedVariables,
+    adjustComponentPositions,
+    currentLayout,
+  }) => {
     const { moduleId } = useModuleContext();
     // get table store functions
     const initializeComponent = useTableStore((state) => state.initializeComponent, shallow);
@@ -23,7 +37,8 @@ export const Table = memo(
     const setTableStyles = useTableStore((state) => state.setTableStyles, shallow);
     const setColumnDetails = useTableStore((state) => state.setColumnDetails, shallow);
     const transformations = useTableStore((state) => state.getColumnTransformations(id), shallow);
-
+    const selectedTheme = useStore((state) => state.globalSettings.theme, shallow);
+    console.log('selectedTheme', selectedTheme);
     // get table properties
     const visibility = useTableStore((state) => state.getTableProperties(id)?.visibility, shallow);
     const disabledState = useTableStore((state) => state.getTableProperties(id)?.disabledState, shallow);
@@ -32,9 +47,19 @@ export const Table = memo(
     // get table styles
     const boxShadow = useTableStore((state) => state.getTableStyles(id)?.boxShadow, shallow);
     const borderColor = useTableStore((state) => state.getTableStyles(id)?.borderColor, shallow);
-
+    const containerBackgroundColor = useTableStore(
+      (state) => state.getTableStyles(id)?.containerBackgroundColor,
+      shallow
+    );
     // get resolved value for transformations from app builder store
     const getResolvedValue = useStore((state) => state.getResolvedValue);
+    const themeChanged = useStore((state) => state.themeChanged);
+
+    const colorMode = getColorModeFromLuminance(containerBackgroundColor);
+    const iconColor = getCssVarValue(document.documentElement, `var(--cc-default-icon-${colorMode})`);
+    const textColor = getCssVarValue(document.documentElement, `var(--cc-placeholder-text-${colorMode})`);
+    const hoverColor = getModifiedColor(containerBackgroundColor, 'hover');
+    const activeColor = getModifiedColor(containerBackgroundColor, 'active');
 
     const {
       columns,
@@ -116,17 +141,34 @@ export const Table = memo(
       return transformTableData(restOfProperties.data, transformations, getResolvedValue);
     }, [getResolvedValue, restOfProperties.data, transformations]);
 
+    useDynamicHeight({
+      dynamicHeight: properties.dynamicHeight,
+      id: id,
+      height,
+      value: JSON.stringify(tableData),
+      adjustComponentPositions,
+      currentLayout,
+      width,
+    });
+
     return (
       <div
         data-cy={`draggable-widget-${componentName}`}
         data-disabled={disabledState}
         className={`card jet-table table-component ${darkMode ? 'dark-theme' : 'light-theme'}`}
         style={{
-          height: `${height}px`,
+          height: properties.dynamicHeight ? 'auto' : `${height}px`,
           display: visibility === 'none' ? 'none' : '',
           borderRadius: Number.parseFloat(borderRadius),
           boxShadow,
           borderColor,
+          backgroundColor: containerBackgroundColor,
+          '--cc-table-record-text-color': textColor,
+          '--cc-table-action-icon-color': iconColor,
+          '--cc-table-footer-action-hover': hoverColor,
+          '--cc-table-row-hover': hoverColor,
+          '--cc-table-row-active': activeColor,
+          '--cc-table-scroll-bar-color': activeColor, 
         }}
       >
         <TableContainer
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/CustomSelect.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/CustomSelect.jsx
index c3f4195a1a..ecee007e75 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/CustomSelect.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/CustomSelect.jsx
@@ -9,15 +9,39 @@ import { isArray } from 'lodash';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 import useTextColor from '../DataTypes/_hooks/useTextColor';
+import '../styles.scss';
 
 const { MenuList } = components;
 
+const COLORS = [
+  '#40474D33',
+  '#CE276133',
+  '#6745E233',
+  '#2576CE33',
+  '#1A9C6D33',
+  '#69AF2033',
+  '#F3571733',
+  '#EB2E3933',
+  '#A438C033',
+  '#405DE633',
+  '#1E8FA333',
+  '#34A94733',
+  '#F1911933',
+];
+
 const CustomMenuList = ({ optionsLoadingState, children, selectProps, inputRef, ...props }) => {
   const { onInputChange, inputValue, onMenuInputFocus } = selectProps;
 
   return (
-    <div className="table-select-custom-menu-list" onClick={(e) => e.stopPropagation()}>
-      <div className="table-select-column-type-search-box-wrapper">
+    <div
+      className="table-select-custom-menu-list"
+      onClick={(e) => e.stopPropagation()}
+      style={{ backgroundColor: 'var(--cc-surface1-surface)' }}
+    >
+      <div
+        className="table-select-column-type-search-box-wrapper"
+        style={{ backgroundColor: 'var(--cc-surface1-surface)' }}
+      >
         {!inputValue && (
           <span>
             <SolidIcon name="search" width="14" />
@@ -40,7 +64,7 @@ const CustomMenuList = ({ optionsLoadingState, children, selectProps, inputRef,
           spellCheck="false"
         />
       </div>
-      <MenuList {...props} selectProps={selectProps}>
+      <MenuList {...props} selectProps={selectProps} style={{ backgroundColor: 'var(--cc-surface1-surface)' }}>
         {optionsLoadingState ? (
           <div className="text-center py-4">
             <div className="spinner-border text-primary" role="status">
@@ -55,18 +79,39 @@ const CustomMenuList = ({ optionsLoadingState, children, selectProps, inputRef,
   );
 };
 
-const CustomOption = ({ innerRef, innerProps, children, isSelected, ...props }) => (
-  <div ref={innerRef} {...innerProps} className="option-wrapper d-flex">
-    {props.selectProps.isMulti ? (
-      <Checkbox label="" isChecked={isSelected} onChange={(e) => e.stopPropagation()} key="" value={children} />
-    ) : (
-      <div style={{ visibility: isSelected ? 'visible' : 'hidden' }}>
+const CustomOption = ({ innerRef, innerProps, children, isSelected, ...props }) => {
+  const { label, value, data } = props;
+  const { optionColors } = props.selectProps;
+
+  return (
+    <div
+      ref={innerRef}
+      {...innerProps}
+      className="option-wrapper d-flex"
+      style={{ backgroundColor: 'var(--cc-surface1-surface)' }}
+    >
+      {props.selectProps.isMulti ? (
         <Checkbox label="" isChecked={isSelected} onChange={(e) => e.stopPropagation()} key="" value={children} />
+      ) : (
+        <div style={{ visibility: isSelected ? 'visible' : 'hidden' }}>
+          <Checkbox label="" isChecked={isSelected} onChange={(e) => e.stopPropagation()} key="" value={children} />
+        </div>
+      )}
+      <div
+        className="table-select-menu-pill"
+        style={{
+          background: optionColors?.[value] || 'var(--surfaces-surface-03)',
+          color: data?.labelColor || 'var(--text-primary)',
+          padding: '2px 6px',
+          borderRadius: '6px',
+          fontSize: '12px',
+        }}
+      >
+        {label}
       </div>
-    )}
-    {children}
-  </div>
-);
+    </div>
+  );
+};
 
 const MultiValueRemove = ({ innerProps }) => <div {...innerProps} />;
 
@@ -83,7 +128,7 @@ const CustomMultiValueContainer = ({ children }) => (
 );
 
 const DropdownIndicator = ({ selectProps }) => (
-  <div className="cell-icon-display">
+  <div className="cell-icon-display" style={{ alignSelf: 'center' }}>
     <SolidIcon
       name={selectProps.menuIsOpen ? 'arrowUpTriangle' : 'arrowDownTriangle'}
       width="16"
@@ -137,10 +182,18 @@ export const CustomSelectColumn = ({
   isEditable,
   column,
   isNewRow,
+  autoAssignColors = false,
   id,
 }) => {
-  const validateWidget = useStore((state) => state.validateWidget, shallow);
+  const optionColors = useMemo(() => {
+    return options.reduce((acc, option, index) => {
+      acc[option.value] =
+        option.optionColor || (autoAssignColors ? COLORS[index % COLORS.length] : 'var(--surfaces-surface-03)');
+      return acc;
+    }, {});
+  }, [options, autoAssignColors]);
 
+  const validateWidget = useStore((state) => state.validateWidget, shallow);
   const [isFocused, setIsFocused] = useState(false);
   const containerRef = useRef(null);
   const inputRef = useRef(null);
@@ -182,14 +235,17 @@ export const CustomSelectColumn = ({
           display: 'inline-block',
           marginRight: '4px',
         }),
-        multiValueLabel: (provided) => ({
-          ...provided,
-          padding: '2px 6px',
-          background: 'var(--surfaces-surface-03)',
-          borderRadius: '6px',
-          color: cellTextColor || 'var(--text-primary)',
-          fontSize: '12px',
-        }),
+        multiValueLabel: (provided, state) => {
+          const option = state.data;
+          return {
+            ...provided,
+            padding: '2px 6px',
+            background: optionColors?.[option.value] || 'var(--surfaces-surface-03)',
+            borderRadius: '6px',
+            color: option?.labelColor || cellTextColor || 'var(--text-primary)',
+            fontSize: '12px',
+          };
+        },
       }),
       valueContainer: (provided) => ({
         ...provided,
@@ -204,21 +260,26 @@ export const CustomSelectColumn = ({
       }),
       menuList: (base) => ({
         ...base,
-        backgroundColor: 'var(--surfaces-surface-01)',
+        backgroundColor: 'var(--cc-surface1-surface)',
         color: 'var(--text-primary)',
         cursor: 'pointer',
         overflow: 'auto',
+        borderRadius: '8px',
+        boxShadow: 'var(--elevation-400-box-shadow)',
       }),
-      singleValue: (provided) => ({
-        ...provided,
-        padding: '2px 6px',
-        background: 'var(--surfaces-surface-03)',
-        borderRadius: '6px',
-        color: cellTextColor || 'var(--text-primary)',
-        fontSize: '12px',
-      }),
+      singleValue: (provided, state) => {
+        const option = state.data;
+        return {
+          ...provided,
+          padding: '2px 6px',
+          background: optionColors?.[option.value] || 'var(--surfaces-surface-03)',
+          borderRadius: '6px',
+          color: option?.labelColor || cellTextColor || 'var(--text-primary)',
+          fontSize: '12px',
+        };
+      },
     }),
-    [darkMode, isMulti, horizontalAlignment, cellTextColor]
+    [darkMode, isMulti, horizontalAlignment, cellTextColor, autoAssignColors]
   );
 
   const defaultValue = useMemo(
@@ -309,6 +370,7 @@ export const CustomSelectColumn = ({
             darkMode={darkMode}
             menuIsOpen={isFocused || undefined}
             isFocused={isFocused || undefined}
+            optionColors={optionColors}
           />
         </div>
         <div
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/HTML.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/HTML.jsx
new file mode 100644
index 0000000000..054ec72c11
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/HTML.jsx
@@ -0,0 +1,172 @@
+import React, { useState, useEffect, useRef } from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import { determineJustifyContentValue } from '@/_helpers/utils';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+import useTableStore from '../../_stores/tableStore';
+import { getMaxHeight } from '../../_utils/helper';
+import { shallow } from 'zustand/shallow';
+import DOMPurify from 'dompurify';
+
+export const HTMLColumn = ({
+  id,
+  isEditable,
+  darkMode,
+  handleCellValueChange,
+  textColor,
+  cellValue,
+  column,
+  containerWidth,
+  cell,
+  horizontalAlignment,
+  cellSize,
+}) => {
+  const ref = useRef(null);
+  const cellTextColor = useTextColor(id, textColor);
+  const isMaxRowHeightAuto = useTableStore((state) => state.getTableStyles(id)?.isMaxRowHeightAuto, shallow);
+  const maxRowHeightValue = useTableStore((state) => state.getTableStyles(id)?.maxRowHeightValue, shallow);
+  const [hovered, setHovered] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const cellStyles = {
+    color: cellTextColor ?? 'inherit',
+  };
+
+  const getCellValue = (value) => {
+    let transformedValue = value;
+    if (typeof value !== 'string') {
+      try {
+        transformedValue = String(value);
+      } catch (e) {
+        transformedValue = '';
+      }
+    }
+    return DOMPurify.sanitize(transformedValue.trim());
+  };
+
+  useEffect(() => {
+    if (!isEditable && isEditing) {
+      setIsEditing(false);
+    }
+  }, [isEditable]);
+
+  const getOverlay = () => {
+    return (
+      <div
+        className={`overlay-cell-table ${darkMode && 'dark-theme'}`}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        style={{ color: 'var(--cc-primary-text)' }}
+      >
+        <span
+          style={{
+            width: `${containerWidth}px`,
+            whiteSpace: 'pre-wrap',
+          }}
+          className="html-cell"
+          dangerouslySetInnerHTML={{ __html: getCellValue(cellValue) }}
+        />
+      </div>
+    );
+  };
+
+  const renderEditable = () => {
+    const onChange = (e) => {
+      if (cellValue !== e.target.textContent) {
+        const value = e.target.textContent;
+        handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        contentEditable={'true'}
+        className={`h-100 text-container long-text-input d-flex${
+          darkMode ? ' textarea-dark-theme' : ''
+        } justify-content-${determineJustifyContentValue(horizontalAlignment)}`}
+        style={{
+          color: cellTextColor ? cellTextColor : 'inherit',
+          outline: 'none',
+          border: 'none',
+          background: 'inherit',
+          position: 'relative',
+          height: '100%',
+          flexDirection: 'column',
+        }}
+        readOnly={!isEditable}
+        onBlur={(e) => {
+          setIsEditing(false);
+          onChange(e);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            ref.current.blur();
+            onChange(e);
+          }
+        }}
+        onFocus={(e) => {
+          setIsEditing(true);
+          e.stopPropagation();
+        }}
+      >
+        {isEditing ? (
+          cellValue
+        ) : (
+          <span className="html-cell" dangerouslySetInnerHTML={{ __html: getCellValue(cellValue) }} />
+        )}
+      </div>
+    );
+  };
+
+  const _showOverlay =
+    ref?.current &&
+    (ref?.current?.clientWidth < ref?.current?.children[0]?.offsetWidth ||
+      ref?.current?.clientHeight < ref?.current?.children[0]?.offsetHeight);
+
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={_showOverlay ? getOverlay() : <div></div>}
+      trigger={_showOverlay && ['hover', 'focus']}
+      rootClose={true}
+      show={_showOverlay && hovered && !isEditing}
+    >
+      {!isEditable ? (
+        <div
+          className={`d-flex align-items-center h-100 w-100 justify-content-${determineJustifyContentValue(
+            horizontalAlignment
+          )}`}
+          style={cellStyles}
+          onMouseMove={() => {
+            if (!hovered) setHovered(true);
+          }}
+          onMouseLeave={() => {
+            setHovered(false);
+          }}
+          ref={ref}
+        >
+          <span
+            style={{
+              maxHeight: getMaxHeight(isMaxRowHeightAuto, maxRowHeightValue, cellSize),
+              whiteSpace: 'pre-wrap',
+            }}
+            className="html-cell"
+            dangerouslySetInnerHTML={{ __html: getCellValue(cellValue) }}
+          />
+        </div>
+      ) : (
+        <div className="h-100 d-flex flex-column justify-content-center position-relative">
+          <div
+            onMouseMove={() => {
+              if (!hovered) setHovered(true);
+            }}
+            onMouseLeave={() => setHovered(false)}
+            className={`${isEditing ? 'h-100 content-editing' : ''} h-100`}
+          >
+            {renderEditable()}
+          </div>
+        </div>
+      )}
+    </OverlayTrigger>
+  );
+};
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js
index ee2fb701a0..c0f7ab8f92 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js
@@ -14,3 +14,4 @@ export { CustomDropdownColumn } from './CustomDropdown';
 export { TextColumn } from './Text';
 export { JsonColumn } from './JSON';
 export { MarkdownColumn } from './Markdown';
+export { HTMLColumn } from './HTML';
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
index 9fb6fe7cba..7394a69227 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/Footer.jsx
@@ -31,6 +31,10 @@ export const Footer = memo(
     const isFooterVisible = useTableStore((state) => state.getFooterVisibility(id), shallow);
     const loadingState = useTableStore((state) => state.getLoadingState(id), shallow);
     const editedRows = useTableStore((state) => state.getAllEditedRows(id), shallow);
+    const containerBackgroundColor = useTableStore(
+      (state) => state.getTableStyles(id)?.containerBackgroundColor,
+      shallow
+    );
 
     const enablePagination = useTableStore((state) => state.getTableProperties(id)?.enablePagination, shallow);
     const showBulkUpdateActions = useTableStore(
@@ -70,9 +74,12 @@ export const Footer = memo(
     return (
       <>
         <div
-          className={`card-footer d-flex align-items-center jet-table-footer justify-content-center ${
+          className={`card-footer d-flex align-items-center jet-table-footer table-component-footer justify-content-center ${
             darkMode && 'dark-theme'
           }`}
+          style={{
+            backgroundColor: containerBackgroundColor,
+          }}
         >
           <div className={`table-footer row gx-0 d-flex align-items-center h-100`}>
             <div className="col d-flex justify-content-start custom-gap-4">
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ControlButtons.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ControlButtons.jsx
index d91b84da40..8185e73095 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ControlButtons.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/ControlButtons.jsx
@@ -30,7 +30,7 @@ export const ControlButtons = memo(
               minWidth: '32px',
             }}
             leftIcon={icon}
-            fill={`var(--icons-default)`}
+            fill={`var(--cc-table-action-icon-color)`}
             iconWidth="16"
             size="md"
             data-tooltip-id={tooltipId}
@@ -161,7 +161,7 @@ export const ControlButtons = memo(
             <Tooltip id="tooltip-for-add-new-row" className="tooltip" />
             <ButtonSolid
               variant="ghostBlack"
-              fill={`var(--icons-default)`}
+              fill={`var(--cc-table-action-icon-color)`}
               className={'tj-text-xsm'}
               customStyles={{ minWidth: '32px' }}
               leftIcon="plus"
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationButton.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationButton.jsx
index 4d8902cad7..d67ed3ca63 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationButton.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationButton.jsx
@@ -10,7 +10,7 @@ export const PaginationButton = memo(({ onClick, disabled, icon, dataCy }) => {
         cursor: disabled ? 'not-allowed' : 'pointer',
       }}
       leftIcon={icon}
-      fill={`var(--icons-default)`}
+      fill={`var(--cc-default-icon)`}
       iconWidth="14"
       size="md"
       onClick={onClick}
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
index 67f1b34718..fa316fd4bc 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/Pagination/PaginationInput.jsx
@@ -37,7 +37,10 @@ export const PaginationInput = memo(({ pageIndex, serverSidePagination, pageCoun
               }
             }}
           />
-          <span className="font-weight-500 total-page-number" style={{ width: 'max-content' }}>
+          <span
+            className="font-weight-500 total-page-number"
+            style={{ width: 'max-content', color: 'var(--cc-primary-text)' }}
+          >
             of {pageCount || 1}
           </span>
         </>
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/RowCount.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/RowCount.jsx
index fad96e5933..9ade79b955 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/RowCount.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Footer/_components/RowCount.jsx
@@ -8,7 +8,11 @@ export const RowCount = memo(({ dataLength, id }) => {
   const totalRecords = useTableStore((state) => state.getTableProperties(id)?.totalRecords, shallow);
 
   return (
-    <span data-cy={`footer-number-of-records`} className="font-weight-500" style={{ color: 'var(--text-placeholder)' }}>
+    <span
+      data-cy={`footer-number-of-records`}
+      className="font-weight-500"
+      style={{ color: 'var(--cc-table-record-text-color)' }}
+    >
       {clientSidePagination && !serverSidePagination && `${dataLength} Records`}
       {serverSidePagination && totalRecords ? `${totalRecords} Records` : ''}
     </span>
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/Header.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/Header.jsx
index 1331889870..a3127b9099 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/Header.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/Header/Header.jsx
@@ -51,11 +51,11 @@ export const Header = memo(
         <div className="position-relative">
           <Tooltip id="tooltip-for-filter-data" className="tooltip" />
           <ButtonSolid
-            variant="tertiary"
+            variant="ghostBlack"
             customStyles={{ minWidth: '32px' }}
             className={`tj-text-xsm ${showFilter && 'always-active-btn'}`}
             leftIcon="filter"
-            fill={`var(--icons-default)`}
+            fill={`var(--cc-table-action-icon-color)`}
             iconWidth="16"
             onClick={(e) => {
               if (showFilter) {
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/TableData.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/TableData.jsx
index aa9cd74a87..00c23919b5 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/TableData.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/TableData.jsx
@@ -29,6 +29,10 @@ export const TableData = ({
   const cellHeight = useTableStore((state) => state.getTableStyles(id)?.cellHeight, shallow);
   const maxRowHeightValue = useTableStore((state) => state.getTableStyles(id)?.maxRowHeightValue, shallow);
   const contentWrap = useTableStore((state) => state.getTableStyles(id)?.contentWrap, shallow);
+  const containerBackgroundColor = useTableStore(
+    (state) => state.getTableStyles(id)?.containerBackgroundColor,
+    shallow
+  );
 
   const allowSelection = useTableStore((state) => state.getTableProperties(id)?.allowSelection, shallow);
   const highlightSelectedRow = useTableStore((state) => state.getTableProperties(id)?.highlightSelectedRow, shallow);
@@ -62,7 +66,7 @@ export const TableData = ({
       styles.height = `${calculatedCellHeight}px`;
     }
     return styles;
-  }, [cellHeight, contentWrap, isMaxRowHeightAuto, maxRowHeightValue]);
+  }, [cellHeight, contentWrap, isMaxRowHeightAuto, maxRowHeightValue, containerBackgroundColor]);
 
   // Setup virtualizer
   const rowVirtualizer = useVirtualizer({
@@ -111,9 +115,11 @@ export const TableData = ({
   }
 
   return (
-    <div className={`table-responsive jet-data-table`} style={{ maxHeight: '100%' }} ref={tableBodyRef}>
+    <div className={`table-responsive jet-data-table`} style={{ maxHeight: '100%', position: 'relative' }} ref={tableBodyRef}>
       <table className={`table ${rowStyle} ${darkMode && 'table-dark'}`}>
-        {renderTableHeader()}
+        <thead style={{ position: 'sticky', top: 0, zIndex: 1, backgroundColor: containerBackgroundColor }}>
+          {renderTableHeader()}
+        </thead>
         <tbody
           style={{
             position: 'relative',
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableHeader.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableHeader.jsx
index 67240c5887..38dafe2bb5 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableHeader.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableHeader.jsx
@@ -10,6 +10,7 @@ import { CSS } from '@dnd-kit/utilities';
 import useStore from '@/AppBuilder/_stores/store';
 import { determineJustifyContentValue } from '@/_helpers/utils';
 import { shallow } from 'zustand/shallow';
+import { getModifiedColor } from '@/Editor/Components/utils';
 
 const DraggableHeader = ({ header, darkMode, id }) => {
   const { attributes, listeners, setNodeRef, transform, isDragging, setActivatorNodeRef } = useSortable({
@@ -18,6 +19,8 @@ const DraggableHeader = ({ header, darkMode, id }) => {
 
   const columnHeaderWrap = useTableStore((state) => state.getTableStyles(id)?.columnHeaderWrap, shallow);
   const headerCasing = useTableStore((state) => state.getTableStyles(id)?.headerCasing, shallow);
+  const columnTitleColor = useTableStore((state) => state.getTableStyles(id)?.columnTitleColor, shallow);
+  const columnBackgroundColor = useTableStore((state) => state.getTableStyles(id)?.columnBackgroundColor, shallow);
 
   const getResolvedValue = useStore.getState().getResolvedValue;
 
@@ -32,6 +35,10 @@ const DraggableHeader = ({ header, darkMode, id }) => {
     whiteSpace: 'nowrap',
     width: header.column.getSize(),
     zIndex: isDragging ? 1 : 0,
+    backgroundColor: columnBackgroundColor,
+    color: columnTitleColor,
+    '--cc-table-header-hover': getModifiedColor(columnBackgroundColor, 'hover'),
+    '--cc-table-header-active': getModifiedColor(columnBackgroundColor, 'active'),
   };
 
   return (
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/styles.scss b/frontend/src/AppBuilder/Widgets/NewTable/_components/styles.scss
new file mode 100644
index 0000000000..bfe0e653a8
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/styles.scss
@@ -0,0 +1,8 @@
+
+.react-select__menu {
+    .table-select-custom-menu-list {
+        .table-select-column-type-search-box-wrapper, .react-select__menu-list   {
+            background-color: var(--cc-surface1-surface) !important;
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js b/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js
index f6b8b8cb09..96655c4023 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js
@@ -109,6 +109,9 @@ export const createInitSlice = (set, get) => ({
           maxRowHeightValue = 80,
           columnHeaderWrap = 'fixed',
           headerCasing = 'uppercase',
+          containerBackgroundColor = '#fff',
+          columnTitleColor = '#6A727C',
+          columnBackgroundColor = '#F6F8FA',
         } = styles;
 
         state.components[id].styles.borderRadius = Number.parseFloat(borderRadius);
@@ -123,6 +126,9 @@ export const createInitSlice = (set, get) => ({
         state.components[id].styles.maxRowHeightValue = maxRowHeightValue;
         state.components[id].styles.columnHeaderWrap = columnHeaderWrap;
         state.components[id].styles.headerCasing = headerCasing;
+        state.components[id].styles.containerBackgroundColor = containerBackgroundColor;
+        state.components[id].styles.columnTitleColor = columnTitleColor;
+        state.components[id].styles.columnBackgroundColor = columnBackgroundColor;
       },
       false,
       { type: 'setStyles', payload: { id, styles } }
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js b/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
index 817493a4d7..882b47d686 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js
@@ -20,6 +20,7 @@ import {
   TextColumn,
   JsonColumn,
   MarkdownColumn,
+  HTMLColumn,
 } from '../_components/DataTypes';
 import useTableStore from '../_stores/tableStore';
 
@@ -76,12 +77,15 @@ export default function generateColumnsData({
             options?.map((option) => ({
               label: option.label,
               value: option.value,
+              optionColor: option.optionColor,
+              labelColor: option.labelColor,
             })) ?? [];
         }
       }
 
       const isEditable = getResolvedValue(column.isEditable);
       const isVisible = getResolvedValue(column.columnVisibility) ?? true;
+      const autoAssignColors = getResolvedValue(column.autoAssignColors) ?? false;
 
       if (!isVisible) return null;
 
@@ -221,6 +225,7 @@ export default function generateColumnsData({
                       ? true
                       : false
                   }
+                  autoAssignColors={autoAssignColors}
                   isEditable={isEditable}
                   isMulti={columnType === 'newMultiSelect'}
                   className="select-search table-select-search"
@@ -356,6 +361,22 @@ export default function generateColumnsData({
                 />
               );
             }
+            case 'html': {
+              return (
+                <HTMLColumn
+                  isEditable={isEditable}
+                  darkMode={darkMode}
+                  handleCellValueChange={handleCellValueChange}
+                  horizontalAlignment={column?.horizontalAlignment}
+                  textColor={getResolvedValue(column.textColor, { cellValue, rowData })}
+                  cellValue={cellValue}
+                  column={column}
+                  containerWidth={columnSize}
+                  cell={cell}
+                  id={id}
+                />
+              );
+            }
 
             default:
               return cellValue || '';
diff --git a/frontend/src/AppBuilder/Widgets/NumberInput.jsx b/frontend/src/AppBuilder/Widgets/NumberInput.jsx
index f40288acd9..ccf2c5a19b 100644
--- a/frontend/src/AppBuilder/Widgets/NumberInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/NumberInput.jsx
@@ -96,14 +96,8 @@ export const NumberInput = (props) => {
                 ? '21px'
                 : '1px',
             right: '1px',
-            borderLeft:
-              inputLogic.disable || inputLogic.loading
-                ? '1px solid var(--borders-weak-disabled)'
-                : '1px solid var(--borders-default)',
-            borderBottom:
-              inputLogic.disable || inputLogic.loading
-                ? '1px solid var(--borders-weak-disabled)'
-                : '.5px solid var(--borders-default)',
+            borderLeft: '1px solid var(--cc-default-border)',
+            borderBottom: '.5px solid var(--cc-default-border)',
             borderTopRightRadius: props.styles.borderRadius - 1,
             backgroundColor: 'transparent',
           }}
@@ -125,14 +119,8 @@ export const NumberInput = (props) => {
             position: 'absolute',
             right: '1px',
             bottom: '1px',
-            borderLeft:
-              inputLogic.disable || inputLogic.loading
-                ? '1px solid var(--borders-weak-disabled)'
-                : '1px solid var(--borders-default)',
-            borderTop:
-              inputLogic.disable || inputLogic.loading
-                ? '1px solid var(--borders-weak-disabled)'
-                : '.5px solid var(--borders-default)',
+            borderLeft: '1px solid var(--cc-default-border)',
+            borderTop: '.5px solid var(--cc-default-border)',
             borderBottomRightRadius: props.styles.borderRadius - 1,
             backgroundColor: 'transparent',
           }}
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx
index 5f4d1a6efc..6f46cbdbca 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CountrySelect.jsx
@@ -78,11 +78,11 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
       borderRadius: '0px 0px 8px 8px',
       display: 'flex',
       flexDirection: 'column',
-      backgroundColor: 'var(--surfaces-surface-01)',
+      backgroundColor: 'var(--cc-surface1-surface)',
     }),
     option: (provided, state) => ({
       ...provided,
-      backgroundColor: state.isSelected ? '#4368E31A' : 'var(--surfaces-surface-01)',
+      backgroundColor: state.isSelected ? '#4368E31A' : 'var(--cc-surface1-surface)',
       ...(state.isSelected && { borderRadius: '8px' }),
       '&:hover': {
         backgroundColor: 'var(--interactive-overlays-fill-hover)',
@@ -123,9 +123,9 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
               : () => (
                   <div style={{ position: 'relative', display: 'flex', left: '-2px' }}>
                     {menuIsOpen ? (
-                      <SolidIcon name="TriangleDownCenter" width="16" height="16" />
+                      <SolidIcon name="TriangleDownCenter" fill="var(--cc-default-icon)" width="16" height="16" />
                     ) : (
-                      <SolidIcon name="TriangleUpCenter" width="16" height="16" />
+                      <SolidIcon name="TriangleUpCenter" fill="var(--cc-default-icon)" width="16" height="16" />
                     )}
                   </div>
                 ),
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
index 786299fc3a..74e03fd1f3 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CurrencyInput.jsx
@@ -5,6 +5,7 @@ import Loader from '@/ToolJetUI/Loader/Loader';
 import Label from '@/_ui/Label';
 import { CountrySelect } from './CountrySelect';
 import { CurrencyMap } from './constants';
+import { getModifiedColor } from '@/Editor/Components/utils';
 const tinycolor = require('tinycolor2');
 
 export const CurrencyInput = (props) => {
@@ -93,7 +94,7 @@ export const CurrencyInput = (props) => {
       : disabledState
       ? '1px solid var(--borders-disabled-on-white)'
       : 'var(--borders-default)',
-    '--tblr-input-border-color-darker': tinycolor(borderColor).darken(24).toString(),
+    '--tblr-input-border-color-darker': getModifiedColor(borderColor, 24),
     backgroundColor:
       backgroundColor != '#fff'
         ? backgroundColor
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomMenuList.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomMenuList.jsx
index cff9f4fd9f..bc94ca2779 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomMenuList.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomMenuList.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { components } from 'react-select';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import cx from 'classnames';
+import './styles.scss';
 
 export const CustomMenuList = (props) => {
   const { children, selectProps } = props;
@@ -17,7 +18,7 @@ export const CustomMenuList = (props) => {
     >
       <div className="dropdown-multiselect-widget-search-box-wrapper">
         <span>
-          <SolidIcon name="search01" width="14" />
+          <SolidIcon name="search01" fill="var(--cc-default-icon)" width="14" />
         </span>
         <input
           autoCorrect="off"
@@ -25,7 +26,7 @@ export const CustomMenuList = (props) => {
           spellCheck="false"
           type="text"
           placeholder="Search"
-          className="dropdown-multiselect-widget-search-box"
+          className="dropdown-multiselect-widget-search-box currency-select-search-box"
           value={inputValue}
           onChange={(e) => {
             onInputChange(e.currentTarget.value, {
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomOption.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomOption.jsx
index a8dff94bed..bf1f17d97f 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomOption.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomOption.jsx
@@ -19,7 +19,7 @@ export const CustomOption = (props) => {
     fontSize: '12px',
     lineHeight: '18px',
     fontWeight: '400',
-    color: darkMode ? '#fff' : '#1B1F24',
+    color: 'var(--cc-primary-text)',
     width: '100%',
   };
   const FlagIcon = flags[optionValue];
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
index 6cea56d47c..50a888eec9 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/CustomValueContainer.jsx
@@ -27,7 +27,7 @@ export const CustomValueContainer = ({ getValue, ...props }) => {
         >
           <>
             <FlagIcon style={{ height: '16px' }} />{' '}
-            <span style={{ marginLeft: '6px' }}>
+            <span style={{ marginLeft: '6px', color: 'var(--cc-primary-text)' }}>
               {isCurrencyInput ? ` ${CurrencyMap?.[country]?.prefix}` : ` +${countryCode}`}
             </span>
           </>
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx b/frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx
index 70fd463f94..8a02e215fa 100644
--- a/frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/PhoneInput.jsx
@@ -9,6 +9,7 @@ import { useInput } from '../BaseComponents/hooks/useInput';
 import Loader from '@/ToolJetUI/Loader/Loader';
 import Label from '@/_ui/Label';
 import { CountrySelect } from './CountrySelect';
+import { getModifiedColor } from '@/Editor/Components/utils';
 
 const tinycolor = require('tinycolor2');
 
@@ -149,7 +150,7 @@ export const PhoneInput = (props) => {
       : disabledState
       ? '1px solid var(--borders-disabled-on-white)'
       : 'var(--borders-default)',
-    '--tblr-input-border-color-darker': tinycolor(borderColor).darken(24).toString(),
+    '--tblr-input-border-color-darker': getModifiedColor(borderColor, 24),
     backgroundColor:
       backgroundColor != '#fff'
         ? backgroundColor
diff --git a/frontend/src/AppBuilder/Widgets/PhoneCurrency/styles.scss b/frontend/src/AppBuilder/Widgets/PhoneCurrency/styles.scss
new file mode 100644
index 0000000000..50f1da6ba1
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/PhoneCurrency/styles.scss
@@ -0,0 +1,3 @@
+.currency-select-search-box::placeholder {
+  color: var(--cc-placeholder-text) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/TabNavItem.jsx b/frontend/src/AppBuilder/Widgets/TabNavItem.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx b/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
index e53096dff6..2c80c3933a 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
@@ -79,7 +79,7 @@ export const Pagination = function Pagination({
               cursor: pageIndex === 1 ? 'not-allowed' : 'pointer',
             }}
             leftIcon="cheveronleftdouble"
-            fill={`var(--icons-default)`}
+            fill={`var(--cc-default-icon)`}
             iconWidth="14"
             size="md"
             disabled={pageIndex === 1}
@@ -104,7 +104,7 @@ export const Pagination = function Pagination({
             cursor: pageIndex === 1 || !enablePrevButton ? 'not-allowed' : 'pointer',
           }}
           leftIcon="cheveronleft"
-          fill={`var(--icons-default)`}
+          fill={`var(--cc-default-icon)`}
           iconWidth="14"
           size="md"
           disabled={pageIndex === 1 || !enablePrevButton}
@@ -156,7 +156,7 @@ export const Pagination = function Pagination({
             cursor: (!autoCanNextPage && !serverSide) || !enableNextButton ? 'not-allowed' : 'pointer',
           }}
           leftIcon="cheveronright"
-          fill={`var(--icons-default)`}
+          fill={`var(--cc-default-icon)`}
           iconWidth="14"
           size="md"
           disabled={(!autoCanNextPage && !serverSide) || !enableNextButton}
@@ -181,7 +181,7 @@ export const Pagination = function Pagination({
               cursor: !autoCanNextPage && !serverSide ? 'not-allowed' : 'pointer',
             }}
             leftIcon="cheveronrightdouble"
-            fill={`var(--icons-default)`}
+            fill={`var(--cc-default-icon)`}
             iconWidth="14"
             size="md"
             onClick={(event) => {
diff --git a/frontend/src/AppBuilder/Widgets/Table/Table.jsx b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
index 5921fd0e34..409032bab6 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Table.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
@@ -49,6 +49,7 @@ import { EmptyState } from './Components/EmptyState';
 import { LoadingState } from './Components/LoadingState';
 // eslint-disable-next-line import/no-unresolved
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 
 // utilityForNestedNewRow function is used to construct nested object while adding or updating new row when '.' is present in column key for adding new row
@@ -85,6 +86,8 @@ export const Table = React.memo(
     properties,
     variablesExposedForPreview,
     exposeToCodeHinter,
+    adjustComponentPositions,
+    currentLayout,
     // events,
     // setProperty,
   }) => {
@@ -141,6 +144,7 @@ export const Table = React.memo(
     const preSelectRow = useRef(false);
     const initialPageCountRef = useRef(null);
     const allAppEvents = useEvents();
+    const wrapperRef = useRef(null);
     // const { events: allAppEvents } = useAppInfo();
     const tableEvents = allAppEvents.filter((event) => event.target === 'component' && event.sourceId === id);
     const onEvent = useStore((state) => state.eventsSlice.onEvent);
@@ -148,7 +152,6 @@ export const Table = React.memo(
     const tableColumnEvents = allAppEvents.filter((event) => event.target === 'table_column' && event.sourceId === id);
     const tableActionEvents = allAppEvents.filter((event) => event.target === 'table_action' && event.sourceId === id);
     const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-
     const { t } = useTranslation();
 
     const [tableDetails, dispatch] = useReducer(reducer, initialState());
@@ -908,6 +911,16 @@ export const Table = React.memo(
       }
     }, [state.columnResizing.isResizingColumn]);
 
+    useDynamicHeight({
+      dynamicHeight: properties.dynamicHeight,
+      id: id,
+      height,
+      value: JSON.stringify(tableData),
+      adjustComponentPositions,
+      currentLayout,
+      width,
+    });
+
     const [paginationInternalPageIndex, setPaginationInternalPageIndex] = useState(pageIndex ?? 1);
     const [rowDetails, setRowDetails] = useState();
 
@@ -1050,9 +1063,10 @@ export const Table = React.memo(
         data-cy={`draggable-widget-${String(component?.component?.name).toLowerCase()}`}
         data-disabled={parsedDisabledState}
         className={`card jet-table table-component ${darkMode ? 'dark-theme' : 'light-theme'}`}
+        ref={wrapperRef}
         style={{
           width: `100%`,
-          height: `${height}px`,
+          height: properties.dynamicHeight ? 'auto' : `${height}px`,
           display: parsedWidgetVisibility ? '' : 'none',
           overflow: 'hidden',
           borderRadius: Number.parseFloat(borderRadius),
diff --git a/frontend/src/AppBuilder/Widgets/Table/datepicker.scss b/frontend/src/AppBuilder/Widgets/Table/datepicker.scss
index 1aa7e267d5..2fca1a3040 100644
--- a/frontend/src/AppBuilder/Widgets/Table/datepicker.scss
+++ b/frontend/src/AppBuilder/Widgets/Table/datepicker.scss
@@ -78,7 +78,7 @@
         align-items: center;
         justify-content: center;
         padding: 4px;
-        background-color: var(--surfaces-surface-01) !important;
+        background-color: var(--cc-surface1-surface) !important;
     }
 
     .react-datepicker__navigation-icon--previous {
@@ -130,7 +130,7 @@
 
     .react-datepicker__day--selected {
         border-radius: 8px;
-        background-color: var(--primary-brand) !important;
+        background-color: var(--cc-primary-brand) !important;
         color: var(--surfaces-surface-01) !important
     }
 
@@ -152,7 +152,7 @@
     }
 
     .react-datepicker__day--today {
-        border: 1px solid var(--primary-brand);
+        border: 1px solid var(--cc-primary-brand);
         border-radius: 8px;
         background-color: var(--surfaces-surface-01);
     }
diff --git a/frontend/src/AppBuilder/Widgets/Tabs.jsx b/frontend/src/AppBuilder/Widgets/Tabs.jsx
index dc3a55dcd2..1682d06a7c 100644
--- a/frontend/src/AppBuilder/Widgets/Tabs.jsx
+++ b/frontend/src/AppBuilder/Widgets/Tabs.jsx
@@ -1,8 +1,50 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, memo } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { resolveWidgetFieldValue, isExpectedDataType } from '@/_helpers/utils';
 import useStore from '@/AppBuilder/_stores/store';
+import Spinner from '@/_ui/Spinner';
+import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import * as Icons from '@tabler/icons-react';
+import { set } from 'lodash';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+import OverflowTooltip from '@/_components/OverflowTooltip';
 import { TAB_CANVAS_PADDING } from '@/AppBuilder/AppCanvas/appCanvasConstants';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
+import { shallow } from 'zustand/shallow';
+const tinycolor = require('tinycolor2');
+
+const TabsNavShimmer = ({ divider, headerBackground }) => {
+  return (
+    <div
+      className="d-flex px-3 gap-4"
+      style={{
+        borderBottom: `0.5px solid ${divider}`,
+        height: '60.41px',
+        backgroundColor: headerBackground,
+        alignItems: 'center',
+      }}
+    >
+      {Array(3)
+        .fill(0)
+        .map((ind) => (
+          <div
+            key={ind}
+            style={{
+              width: '68px',
+              height: '20px',
+              backgroundColor: '#88909914',
+              borderRadius: '6px',
+              marginTop: '8px ',
+              marginBottom: '8px',
+            }}
+          ></div>
+        ))}
+    </div>
+  );
+};
+
 export const Tabs = function Tabs({
   id,
   component,
@@ -12,6 +54,8 @@ export const Tabs = function Tabs({
   removeComponent,
   setExposedVariable,
   setExposedVariables,
+  adjustComponentPositions,
+  currentLayout,
   fireEvent,
   styles,
   darkMode,
@@ -19,7 +63,14 @@ export const Tabs = function Tabs({
   properties,
 }) {
   const { tabWidth, boxShadow } = styles;
-  const { defaultTab, hideTabs, renderOnlyActiveTab } = properties;
+  const { isDisabled, isVisible, isLoading } = useExposeState(
+    properties.loadingState,
+    properties.visibility,
+    properties.disabledState,
+    setExposedVariables,
+    setExposedVariable
+  );
+  const { defaultTab, hideTabs, renderOnlyActiveTab, useDynamicOptions, dynamicHeight } = properties;
   const setSelectedComponents = useStore((state) => state.setSelectedComponents);
 
   const widgetVisibility = styles?.visibility ?? true;
@@ -27,24 +78,44 @@ export const Tabs = function Tabs({
   // config for tabs. Includes title
   const tabs = isExpectedDataType(properties.tabs, 'array');
   let parsedTabs = tabs;
-  parsedTabs = resolveWidgetFieldValue(parsedTabs);
-  // const hideTabs = component.definition.properties?.hideTabs?.value ?? false;
+  if (!useDynamicOptions) {
+    parsedTabs = properties.tabItems;
+  } else {
+    parsedTabs = resolveWidgetFieldValue(parsedTabs);
+  }
 
-  //* renderOnlyActiveTab - TRUE (renders only the content of the active tab)
-  //* renderOnlyActiveTab - FALSE (renders all the content irrespective of the active tab to persist value from other tabs)
-  // const renderOnlyActiveTab = component.definition.properties?.renderOnlyActiveTab?.value ?? false;
-
-  // set index as id if id is not provided
-  parsedTabs = parsedTabs.map((parsedTab, index) => ({ ...parsedTab, id: parsedTab.id ? parsedTab.id : index }));
-
-  // Highlight color - for active tab text and border
+  parsedTabs = parsedTabs
+    ?.filter((tab) => tab.visible !== false)
+    ?.map((parsedTab, index) => ({
+      ...parsedTab,
+      id: parsedTab.id ? parsedTab.id : index,
+    }));
   const highlightColor = styles?.highlightColor ?? '#f44336';
   let parsedHighlightColor = highlightColor;
   parsedHighlightColor = resolveWidgetFieldValue(highlightColor);
 
+  const headerBackground = styles?.headerBackground ?? '#fff';
+  const unselectedText = styles?.unselectedText ?? '#6A727C';
+  const selectedText = styles?.selectedText ?? '#fff';
+  const hoverBackground = styles?.hoverBackground ?? '#F1F3F4';
+  const unselectedIcon = styles?.unselectedIcon ?? '#6A727C';
+  const selectedIcon = styles?.selectedIcon ?? '#fff';
+  const accent = styles?.accent ?? '#3c92dc';
+  const divider = styles?.divider ?? '#CCD1D5';
+  const borderRadius = styles?.borderRadius ?? '0px';
+
+  const border = styles?.border === '#CCD1D5' ? false : styles?.border;
+  const padding = styles?.padding ?? 'none';
+  const transition = styles?.transition ?? 'none';
+
   // Default tab
   let parsedDefaultTab = defaultTab;
 
+  const defaultTabExists = parsedTabs?.some((tab) => tab.id === parsedDefaultTab);
+  if (!defaultTabExists && parsedTabs.length > 0) {
+    parsedDefaultTab = parsedTabs[0].id;
+  }
+
   const parsedDisabledState =
     typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState) : disabledState;
 
@@ -62,34 +133,42 @@ export const Tabs = function Tabs({
 
   const parentRef = useRef(null);
   const [currentTab, setCurrentTab] = useState(parsedDefaultTab);
+  const componentCount = useStore(
+    (state) => state.getContainerChildrenMapping(`${id}-${currentTab}`)?.length || 0,
+    shallow
+  );
+  const [tabItems, setTabItems] = useState(parsedTabs);
+  const tabItemsRef = useRef(tabItems);
   const [bgColor, setBgColor] = useState('#fff');
 
+  useDynamicHeight({
+    dynamicHeight,
+    id,
+    height,
+    adjustComponentPositions,
+    currentLayout,
+    isContainer: true,
+    value: currentTab,
+    componentCount,
+  });
+
   useEffect(() => {
     setCurrentTab(parsedDefaultTab);
   }, [parsedDefaultTab]);
 
+  useEffect(() => {
+    if (JSON.stringify(tabItemsRef.current) !== JSON.stringify(parsedTabs)) {
+      setTabItems(parsedTabs);
+      tabItemsRef.current = parsedTabs;
+    }
+  }, [parsedTabs]);
+
   useEffect(() => {
     const currentTabData = parsedTabs.filter((tab) => tab.id == currentTab);
     setBgColor(currentTabData[0]?.backgroundColor ? currentTabData[0]?.backgroundColor : darkMode ? '#324156' : '#fff');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTab, darkMode]);
 
-  function computeTabDisplay(componentId, id) {
-    let tabVisibility = 'none';
-    if (id != currentTab) {
-      return tabVisibility;
-    }
-
-    const tabElement = document.getElementById(`${componentId}-${id}`);
-    if (tabElement) {
-      if (window.getComputedStyle(tabElement).visibility === 'none') {
-        return 'none';
-      }
-    }
-
-    return id == currentTab ? 'block' : 'none';
-  }
-
   useEffect(() => {
     const exposedVariables = {
       setTab: async function (id) {
@@ -100,6 +179,37 @@ export const Tabs = function Tabs({
           setSelectedComponents([]);
         }
       },
+      setTabDisable: async function (id, value) {
+        setTabItems((prevTabItems) => {
+          return prevTabItems.map((tab) => {
+            if (tab.id == id) {
+              return { ...tab, disable: value };
+            }
+            return tab;
+          });
+        });
+        setSelectedComponents([]);
+      },
+      setTabLoading: async function (id, value) {
+        setTabItems((prevTabItems) => {
+          return prevTabItems.map((tab) => {
+            if (tab.id == id) {
+              return { ...tab, loading: value };
+            }
+            return tab;
+          });
+        });
+      },
+      setTabVisibility: async function (id, value) {
+        setTabItems((prevTabItems) => {
+          return prevTabItems.map((tab) => {
+            if (tab.id == id) {
+              return { ...tab, visible: value };
+            }
+            return tab;
+          });
+        });
+      },
       currentTab: currentTab,
     };
     setExposedVariables(exposedVariables);
@@ -107,110 +217,381 @@ export const Tabs = function Tabs({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setCurrentTab, currentTab]);
 
-  const renderTabContent = (id, tab) => {
-    return (
-      <div
-        className={`tab-pane active`}
-        style={{
-          display: computeTabDisplay(id, tab.id),
-          height: parsedHideTabs ? height : height - 41,
-          position: 'absolute',
-          top: parsedHideTabs ? '0px' : '41px',
-          width: '100%',
-          padding: TAB_CANVAS_PADDING,
-        }}
-      >
-        <SubContainer
-          id={`${id}-${tab.id}`}
-          canvasHeight={'200'}
-          canvasWidth={width}
-          allowContainerSelect={true}
-          styles={{ backgroundColor: bgColor }}
-          darkMode={darkMode}
-          componentType="Tabs"
-        />
-      </div>
-    );
+  const containerRef = useRef(null);
+  const tabsRef = React.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const [canScroll, setCanScroll] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [hoveredTabId, setHoveredTabId] = useState(null);
+
+  const checkScroll = () => {
+    if (tabsRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = tabsRef.current;
+      setCanScroll(scrollLeft > 0 || scrollLeft + clientWidth < scrollWidth);
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft + clientWidth < scrollWidth);
+    }
   };
 
+  const scrollTabs = (direction) => {
+    if (tabsRef.current) {
+      const scrollAmount = tabsRef.current.clientWidth / 2;
+      tabsRef.current.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth',
+      });
+    }
+    checkScroll();
+  };
+
+  useEffect(() => {
+    checkScroll();
+    const onScroll = () => checkScroll();
+    const currentTabsRef = tabsRef.current;
+    if (currentTabsRef) {
+      currentTabsRef.addEventListener('scroll', onScroll);
+    }
+
+    return () => {
+      if (currentTabsRef) {
+        currentTabsRef.removeEventListener('scroll', onScroll);
+      }
+    };
+  }, [tabsRef.current, tabWidth, tabItems]);
+
+  useEffect(() => {
+    checkScroll();
+    const resizeObserver = new ResizeObserver(() => {
+      checkScroll();
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+    };
+  }, []);
+
   function shouldRenderTabContent(tab) {
     if (parsedRenderOnlyActiveTab) {
       return tab.id == currentTab;
     }
-    return true; // Render by default if no specific conditions are met
+    return true;
   }
 
-  const equalSplitWidth = 100 / tabs?.length || 1;
+  const findTabIndex = (tabId) => {
+    return tabItems.findIndex((tab) => tab.id === tabId);
+  };
+
+  const handleMouseEnter = (id) => {
+    setHoveredTabId(id);
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  function getTabIcon(tab) {
+    const iconName = tab?.icon;
+    // eslint-disable-next-line import/namespace
+    const IconElement = Icons[iconName] == undefined ? Icons['IconHome2'] : Icons[iconName];
+
+    return tab?.iconVisibility ? (
+      <IconElement
+        color={`${currentTab == tab?.id ? selectedIcon : unselectedIcon}`}
+        style={{
+          width: '20px',
+          height: '20px',
+          marginBottom: '3px',
+          ...(currentTab == tab.id ? { color: selectedIcon } : { color: unselectedIcon }),
+        }}
+        stroke={1.5}
+      />
+    ) : null;
+  }
+
+  const equalSplitWidth = 100 / tabItems?.length || 1;
+  const someTabsVisible = tabItems?.filter((tab) => tab?.visible !== false);
   return (
     <div
-      data-disabled={parsedDisabledState}
+      data-disabled={isDisabled}
       className="card tabs-component"
       style={{
-        height,
-        display: parsedWidgetVisibility ? 'flex' : 'none',
-        backgroundColor: bgColor,
+        height: dynamicHeight ? '100%' : padding === 'default' ? height : height + 4,
+        display: isVisible ? 'flex' : 'none',
+        backgroundColor: darkMode ? '#324156' : '#fff',
         boxShadow,
+        borderRadius: `${borderRadius}px`,
+        overflow: 'hidden',
+        ...(border ? { border: `1px solid ${border}` } : { border: 'none' }),
       }}
       data-cy={dataCy}
+      ref={containerRef}
     >
-      <ul
-        className="nav nav-tabs"
-        data-bs-toggle="tabs"
-        style={{
-          zIndex: 1,
-          display: parsedHideTabs && 'none',
-          backgroundColor: darkMode ? '#324156' : '#fff',
-          margin: '-1px',
-        }}
-      >
-        {parsedTabs.map((tab) => (
-          <li
-            className="nav-item"
-            style={{ opacity: tab?.disabled && '0.5', width: tabWidth == 'split' && equalSplitWidth + '%' }}
-            onClick={() => {
-              if (currentTab == tab.id) return;
-
-              !tab?.disabled && setCurrentTab(tab.id);
-              !tab?.disabled && setExposedVariable('currentTab', tab.id);
-              fireEvent('onTabSwitch');
-            }}
-            key={tab.id}
-          >
-            <a
-              className={`nav-link ${currentTab == tab.id ? 'active' : ''}`}
-              style={{
-                color: currentTab == tab.id && parsedHighlightColor,
-                borderBottom: currentTab == tab.id && `1px solid ${parsedHighlightColor}`,
-                overflowWrap: 'anywhere',
-                ...(tabWidth == 'split' ? { minWidth: 'auto' } : { minWidth: '100px' }),
-              }}
-              ref={(el) => {
-                if (el && currentTab == tab.id) {
-                  el.style.setProperty('color', parsedHighlightColor, 'important');
-                }
-              }}
-            >
-              {tab.title}
-            </a>
-          </li>
-        ))}
-      </ul>
-      {parsedTabs.map((tab) => (
+      {isLoading ? (
+        <TabsNavShimmer divider={divider} headerBackground={headerBackground} />
+      ) : (
         <div
-          className="tab-content"
-          ref={(newCurrent) => {
-            if (currentTab == tab.id) {
-              parentRef.current = newCurrent;
-            }
+          style={{
+            borderBottom: someTabsVisible?.length > 0 && `0.5px solid ${divider}`,
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            backgroundColor: headerBackground,
+            height: '50px',
           }}
-          id={`${id}-${tab.id}`}
-          key={tab.id}
         >
-          {shouldRenderTabContent(tab) && renderTabContent(id, tab)}
+          {canScroll && (
+            <div
+              className="px-2"
+              onClick={() => scrollTabs('left')}
+              style={{ cursor: canScrollLeft ? 'pointer' : 'default' }}
+            >
+              <SolidIcon fill={canScrollLeft ? '#6A727C' : '#C1C8CD'} name={'cheveronleft'} />
+            </div>
+          )}
+          {/* this started change */}
+          <ul
+            ref={tabsRef}
+            className="nav"
+            data-bs-toggle="tabs"
+            style={{
+              zIndex: 1,
+              display: parsedHideTabs ? 'none' : 'flex',
+              backgroundColor: headerBackground,
+              overflowX: 'auto',
+              whiteSpace: 'nowrap',
+              flexWrap: 'nowrap',
+              scrollbarWidth: 'none',
+              msOverflowStyle: 'none',
+              scrollBehavior: 'smooth',
+              flexGrow: 1,
+              paddingLeft: '10px',
+              paddingRight: '10px',
+              height: '100%',
+            }}
+          >
+            {tabItems
+              ?.filter((tab) => tab?.visible !== false)
+              ?.map((tab) => (
+                <li
+                  className={`nav-item ${currentTab == tab.id ? 'active' : ''}`}
+                  style={{
+                    opacity: tab?.disable && '0.5',
+                    width: tabWidth == 'split' && equalSplitWidth + '%',
+                    borderBottom: currentTab === tab.id && !tab?.disable ? `2px solid ${accent}` : ' #CCD1D5',
+                    backgroundColor: headerBackground,
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    fontWeight: 'bold',
+                    paddingTop: '.5rem',
+                    paddingBottom: '.5rem',
+                    cursor: tab?.disable ? 'not-allowed' : 'pointer',
+                    ...(tabWidth == 'split' ? { minWidth: 'auto' } : {}), // Remove minWidth for tabWidth != 'split'
+                  }}
+                  onClick={() => {
+                    if (currentTab == tab.id) return;
+                    if (tab?.disable) return;
 
-          {/* {tab.id == currentTab && <SubContainer id={`${id}-${tab.id}`} canvasHeight={'200'} canvasWidth={width} />} */}
+                    !tab?.disabled && setCurrentTab(tab.id);
+                    !tab?.disabled && setExposedVariable('currentTab', tab.id);
+                    fireEvent('onTabSwitch');
+                  }}
+                  onMouseEnter={() => handleMouseEnter(tab?.id)}
+                  onMouseLeave={handleMouseLeave}
+                  ref={(el) => {
+                    if (el && currentTab == tab.id) {
+                      el.style.setProperty('color', parsedHighlightColor, 'important');
+                    }
+                  }}
+                  key={tab.id}
+                >
+                  <div
+                    data-disabled={tab?.disable}
+                    style={{
+                      textAlign: 'center',
+                      fontWeight: '500',
+                      background:
+                        isHovered && hoveredTabId == tab.id
+                          ? tinycolor(hoverBackground).setAlpha(0.08).toString()
+                          : 'transparent',
+                      borderRadius: '6px',
+                      paddingLeft: '1rem',
+                      paddingRight: '1rem',
+                      ...(currentTab == tab.id ? { color: selectedText } : { color: unselectedText }),
+                      display: 'flex',
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      gap: '4px',
+                      height: '28px',
+                      paddingTop: '4px',
+                      paddingBottom: '4px',
+                    }}
+                  >
+                    {tabWidth === 'split' ? (
+                      <>
+                        <a style={{ marginRight: '4px' }}>{getTabIcon(tab)}</a>
+                        <OverflowTooltip boxWidth={width}>
+                          <>{tab.title}</>
+                        </OverflowTooltip>
+                      </>
+                    ) : (
+                      <span>
+                        <a style={{ marginRight: '4px' }}>{getTabIcon(tab)}</a>
+                        {tab.title}
+                      </span>
+                    )}
+                  </div>
+                </li>
+              ))}
+          </ul>
+          {/* this ended change */}
+          {canScroll && (
+            <div
+              className="px-2"
+              onClick={() => scrollTabs('right')}
+              style={{ cursor: canScrollRight ? 'pointer' : 'default' }}
+            >
+              <SolidIcon fill={canScrollRight ? '#6A727C' : '#C1C8CD'} name="cheveronright" width="25" height="25" />
+            </div>
+          )}
         </div>
-      ))}
+      )}
+      {isLoading ? (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <Spinner />
+        </div>
+      ) : (
+        <div
+          style={{
+            overflow: 'hidden',
+            width: '100%',
+            height: dynamicHeight ? '100%' : parsedHideTabs ? height : height - 41,
+            position: 'relative',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              width: `${tabItems.length * 100}%`,
+              transform: `translateX(-${findTabIndex(currentTab) * (100 / tabItems.length)}%)`,
+              transition: 'transform 0.3s ease-in-out',
+              height: '100%',
+            }}
+          >
+            {tabItems.map((tab) => (
+              <div
+                key={tab.id}
+                style={{
+                  width: `${100 / tabItems.length}%`,
+                  flexShrink: 0,
+                  height: '100%',
+                }}
+              >
+                <TabContent
+                  id={id}
+                  tab={tab}
+                  height={height}
+                  width={width}
+                  parsedHideTabs={parsedHideTabs}
+                  bgColor={bgColor}
+                  darkMode={darkMode}
+                  dynamicHeight={dynamicHeight}
+                  currentTab={currentTab}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
+
+const areEqual = (prevProps, nextProps) => {
+  const allKeys = new Set([...Object.keys(prevProps), ...Object.keys(nextProps)]);
+  let hasChanges = false;
+
+  for (let key of allKeys) {
+    if (prevProps[key] !== nextProps[key]) {
+      console.log(`[TabContent] Prop changed: ${key}`, {
+        from: prevProps[key],
+        to: nextProps[key],
+      });
+      hasChanges = true;
+    }
+  }
+
+  return !hasChanges;
+};
+
+const TabContent = memo(function TabContent({
+  id,
+  tab,
+  height,
+  width,
+  parsedHideTabs,
+  bgColor,
+  darkMode,
+  dynamicHeight,
+  currentTab,
+}) {
+  const loading = tab?.loading;
+  const disable = tab?.disable;
+  const visible = tab?.visible;
+
+  const fieldBackgroundColor = tab?.fieldBackgroundColor;
+  if (visible === false) return null;
+
+  return (
+    <div
+      data-disabled={disable}
+      activetab={currentTab}
+      className={`tab-pane active ${dynamicHeight && currentTab === tab.id && `dynamic-${id}`}`}
+      style={{
+        display: disable ? 'none' : 'block',
+        height: dynamicHeight ? '100%' : parsedHideTabs ? height : height - 41,
+        position: 'relative',
+        top: '0px',
+        width: '100%',
+      }}
+    >
+      {loading ? (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <Spinner />
+        </div>
+      ) : (
+        <SubContainer
+          id={`${id}-${tab.id}`}
+          canvasHeight={dynamicHeight ? '100%' : '200'}
+          canvasWidth={width}
+          allowContainerSelect={true}
+          styles={{ overflow: 'hidden auto', backgroundColor: disable ? '#ffffff' : fieldBackgroundColor || bgColor }}
+          darkMode={darkMode}
+        />
+      )}
+    </div>
+  );
+},
+areEqual);
diff --git a/frontend/src/AppBuilder/Widgets/TextArea.jsx b/frontend/src/AppBuilder/Widgets/TextArea.jsx
index 79a3125965..d692da8b85 100644
--- a/frontend/src/AppBuilder/Widgets/TextArea.jsx
+++ b/frontend/src/AppBuilder/Widgets/TextArea.jsx
@@ -1,9 +1,35 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BaseInput } from './BaseComponents/BaseInput';
 import { useInput } from './BaseComponents/hooks/useInput';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 
 export const TextArea = (props) => {
   const inputLogic = useInput(props);
+  const { properties, height, width, id, adjustComponentPositions, currentLayout } = props;
+  const { inputRef, value } = inputLogic;
+
+  const resizeTextArea = () => {
+    if (!inputRef.current || !properties.dynamicHeight) {
+      inputRef.current.style.height = `${height}px`;
+      return;
+    }
+    inputRef.current.style.height = 'auto';
+    inputRef.current.style.height = `${inputRef.current.scrollHeight + 20}px`;
+  };
+
+  useEffect(() => {
+    resizeTextArea();
+  }, [width, height, properties.dynamicHeight, value]);
+
+  useDynamicHeight({
+    dynamicHeight: properties.dynamicHeight,
+    id,
+    height,
+    value,
+    adjustComponentPositions,
+    currentLayout,
+    width,
+  });
 
   return <BaseInput {...props} {...inputLogic} inputType="textarea" />;
 };
diff --git a/frontend/src/AppBuilder/Widgets/componentUtils.js b/frontend/src/AppBuilder/Widgets/componentUtils.js
new file mode 100644
index 0000000000..cbafb3bb86
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/componentUtils.js
@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-unresolved
+import { diff } from 'deep-object-diff';
+
+export const checkDiff = (prev, next) => {
+  if (!prev || !next) return prev === next;
+
+  const diffResult = diff(prev, next);
+  // Return true if there are no changes (prevents re-render)
+  return !diffResult || Object.keys(diffResult).length === 0;
+};
diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js
index c8281d79e6..75cc1a6e93 100644
--- a/frontend/src/AppBuilder/_hooks/useAppData.js
+++ b/frontend/src/AppBuilder/_hooks/useAppData.js
@@ -131,7 +131,8 @@ const useAppData = (
   const deleteModuleDefinition = useStore((state) => state?.deleteModuleDefinition ?? noop);
 
   const themeAccess = useThemeAccess();
-
+  const themeChanged = useStore((state) => state.themeChanged);
+  const detectThemeChange = useStore((state) => state.detectThemeChange);
   const setConversation = useStore((state) => state.ai?.setConversation);
   const setDocsConversation = useStore((state) => state.ai?.setDocsConversation);
   const setConversationZeroState = useStore((state) => state.ai?.setConversationZeroState);
@@ -143,6 +144,7 @@ const useAppData = (
   const slug = moduleMode ? '' : pathParams?.slug;
   const licenseStatus = useStore((state) => state.isLicenseValid());
 
+
   const match = useMatch('/applications/:slug/:pageHandle');
 
   const location = useRouter().location;
@@ -252,7 +254,7 @@ const useAppData = (
         appDataPromise = appService.fetchAppBySlug(slug);
       } else {
         appDataPromise = isPreviewForVersion
-          ? appVersionService.getAppVersionData(appId, versionId)
+          ? appVersionService.getAppVersionData(appId, versionId, mode)
           : appService.fetchApp(appId);
       }
     }
@@ -549,14 +551,29 @@ const useAppData = (
   }, [app.appName, isReleasedVersionId, licenseStatus, mode, moduleId]);
 
   useEffect(() => {
-    if (!themeAccess) return;
     const root = document.documentElement;
-    const brandColors = selectedTheme?.definition?.brand?.colors || {};
-    Object.keys(brandColors).forEach((colorType) => {
-      const color = brandColors[colorType][darkMode ? 'dark' : 'light'];
-      root.style.setProperty(`--${colorType}-brand`, `${color}`);
+    const themeObj = !themeAccess ? baseTheme?.definition : selectedTheme?.definition || {};
+    Object.keys(themeObj).forEach((category) => {
+      const categoryObj = themeObj[category];
+      Object.keys(categoryObj).forEach((property) => {
+        const propertyObj = categoryObj[property];
+        Object.keys(propertyObj).forEach((type) => {
+          const color = propertyObj[type][darkMode ? 'dark' : 'light'];
+          root.style.setProperty(`--cc-${camelCase(type)}-${camelCase(category)}`, `${color}`);
+          if (type === 'placeholder' && category === 'text') {
+            root.style.setProperty(`--cc-default-icon`, `${color}`);
+          }
+          if (category === 'text' && type === 'placeholder') {
+            root.style.setProperty(`--cc-default-icon-light`, `${propertyObj[type]['light']}`);
+            root.style.setProperty(`--cc-default-icon-dark`, `${propertyObj[type]['dark']}`);
+            root.style.setProperty(`--cc-placeholder-text-light`, `${propertyObj[type]['light']}`);
+            root.style.setProperty(`--cc-placeholder-text-dark`, `${propertyObj[type]['dark']}`);
+          }
+        });
+      });
     });
-  }, [darkMode, selectedTheme, themeAccess]);
+    detectThemeChange();
+  }, [darkMode, selectedTheme, !!themeAccess]);
 
   useEffect(() => {
     if (moduleMode) return;
@@ -572,7 +589,7 @@ const useAppData = (
       if (isEnvChanged) {
         setEnvironmentLoadingState('loading');
       }
-      appVersionService.getAppVersionData(appId, selectedVersion?.id).then(async (appData) => {
+      appVersionService.getAppVersionData(appId, selectedVersion?.id, mode).then(async (appData) => {
         cleanUpStore(false);
         const { should_freeze_editor } = appData;
         setIsEditorFreezed(should_freeze_editor);
diff --git a/frontend/src/AppBuilder/_stores/slices/appSlice.js b/frontend/src/AppBuilder/_stores/slices/appSlice.js
index 0d1160d49b..19fe8d2e9c 100644
--- a/frontend/src/AppBuilder/_stores/slices/appSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/appSlice.js
@@ -16,6 +16,7 @@ const initialState = {
   pageSwitchInProgress: false,
   isTJDarkMode: localStorage.getItem('darkMode') === 'true',
   isViewer: false,
+  themeChanged: false,
   isComponentLayoutReady: false,
   appPermission: {
     selectedUsers: [],
@@ -44,6 +45,7 @@ export const createAppSlice = (set, get) => ({
       'initializeAppSlice'
     );
   },
+  detectThemeChange: () => set((state) => ({ themeChanged: !state.themeChanged })),
   setIsViewer: (isViewer, moduleId = 'canvas') =>
     set(
       (state) => {
@@ -92,10 +94,12 @@ export const createAppSlice = (set, get) => ({
       false,
       'setCanvasHeight'
     ),
+
   updateCanvasBottomHeight: (components, moduleId = 'canvas') => {
-    const { currentLayout, getCurrentMode, setCanvasHeight } = get();
+    const { currentLayout, getCurrentMode, setCanvasHeight, temporaryLayouts } = get();
     const currentMode = getCurrentMode(moduleId);
-    const maxHeight = Object.values(components).reduce((max, component) => {
+
+    const maxPermanentHeight = Object.values(components).reduce((max, component) => {
       const layout = component?.layouts?.[currentLayout];
       if (!layout) {
         return max;
@@ -103,6 +107,14 @@ export const createAppSlice = (set, get) => ({
       const sum = layout.top + layout.height;
       return Math.max(max, sum);
     }, 0);
+
+    const temporaryLayoutsMaxHeight = Object.values(temporaryLayouts).reduce((max, layout) => {
+      const sum = layout.top + layout.height;
+      return Math.max(max, sum);
+    }, 0);
+
+    const maxHeight = Math.max(maxPermanentHeight, temporaryLayoutsMaxHeight);
+
     const bottomPadding = currentMode === 'view' ? 100 : 300;
     const frameHeight = currentMode === 'view' ? 45 : 85;
     setCanvasHeight(`max(100vh - ${frameHeight}px, ${maxHeight + bottomPadding}px)`, moduleId);
diff --git a/frontend/src/AppBuilder/_stores/slices/codeHinterSlice.js b/frontend/src/AppBuilder/_stores/slices/codeHinterSlice.js
index 60d4a88afd..bc9888976f 100644
--- a/frontend/src/AppBuilder/_stores/slices/codeHinterSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/codeHinterSlice.js
@@ -45,10 +45,6 @@ export const createCodeHinterSlice = (set, get) => ({
       hints?.appHints?.forEach((appHint) => {
         if (appHint?.hint?.startsWith('globals.currentUser')) {
           const key = appHint?.hint?.replace('globals.currentUser', 'globals.server.currentUser');
-          console.log({
-            hint: key,
-            type: appHint?.type,
-          });
           serverHints.push({
             hint: key,
             type: appHint?.type,
diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index 9075dbede2..f28d333df8 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -25,6 +25,7 @@ import { RESTRICTED_WIDGETS_CONFIG } from '@/AppBuilder/WidgetManager/configs/re
 import moment from 'moment';
 import { getDateTimeFormat } from '@/AppBuilder/Widgets/Table/Datepicker';
 import { findHighestLevelofSelection } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
+import { INPUT_COMPONENTS_FOR_FORM } from '@/AppBuilder/RightSideBar/Inspector/Components/Form/constants';
 
 // TODO: page id to index mapping to be created and used across the state for current page access
 const initialState = {
@@ -46,6 +47,7 @@ const initialState = {
   showWidgetDeleteConfirmation: false,
   focusedParentId: null,
   modalsOpenOnCanvas: [],
+  showComponentPermissionModal: false,
 };
 
 export const createComponentsSlice = (set, get) => ({
@@ -823,7 +825,7 @@ export const createComponentsSlice = (set, get) => ({
   addComponentToCurrentPage: (
     componentDefinitions,
     moduleId = 'canvas',
-    { skipUndoRedo = false, saveAfterAction = true } = {}
+    { skipUndoRedo = false, saveAfterAction = true, skipFormUpdate = false } = {}
   ) => {
     const {
       saveComponentChanges,
@@ -833,6 +835,8 @@ export const createComponentsSlice = (set, get) => ({
       canAddToParent,
       getComponentNameFromId,
       deleteComponentNameIdMapping,
+      checkIfParentIsFormAndAddField,
+      buildComponentDefinition,
       getCurrentPageId,
     } = get();
     const currentPageId = getCurrentPageId(moduleId);
@@ -847,34 +851,7 @@ export const createComponentsSlice = (set, get) => ({
       ) {
         return false;
       }
-      const newComponents = componentDefinitions.reduce((acc, componentDefinition) => {
-        const currentComponents = {
-          ...getCurrentPageComponents(moduleId),
-          ...Object.fromEntries(acc.map((component) => [component.id, component])),
-        };
-        const componentName =
-          componentDefinition.name || computeComponentName(componentDefinition.component.component, currentComponents);
-        const newComponent = {
-          id: componentDefinition.id,
-          name: componentName,
-          component: {
-            component: componentDefinition.component.component,
-            definition: {
-              general: componentDefinition.component.definition?.general,
-              generalStyles: componentDefinition.component.definition?.generalStyles,
-              others: componentDefinition.component.definition?.others,
-              properties: componentDefinition.component.definition?.properties,
-              styles: componentDefinition.component.definition?.styles,
-              validation: componentDefinition.component.definition?.validation,
-            },
-            name: componentName,
-            parent: componentDefinition.component.parent,
-          },
-          layouts: componentDefinition.layouts,
-        };
-
-        return [...acc, newComponent];
-      }, []);
+      const newComponents = buildComponentDefinition(componentDefinitions, moduleId);
 
       const diff = newComponents.reduce((acc, newComponent) => {
         acc[newComponent.id] = {
@@ -895,6 +872,8 @@ export const createComponentsSlice = (set, get) => ({
         }
         updateComponentDependencyGraph(moduleId, newComponent);
         const parentId = newComponent.component.parent || 'canvas';
+        // Check if parent is a Form and add the component to form fields if needed
+        !skipFormUpdate && checkIfParentIsFormAndAddField(newComponent.id, newComponent, parentId, moduleId);
         set(
           withUndoRedo((state) => {
             if (!state.containerChildrenMapping[parentId]) {
@@ -910,8 +889,11 @@ export const createComponentsSlice = (set, get) => ({
           'addComponentToCurrentPage'
         );
       });
-      const selectedComponents = findHighestLevelofSelection(newComponents);
-      get().setSelectedComponents(selectedComponents.map((component) => component.id));
+
+      if (!skipFormUpdate) {
+        const selectedComponents = findHighestLevelofSelection(newComponents);
+        get().setSelectedComponents(selectedComponents.map((component) => component.id));
+      }
 
       if (saveAfterAction) {
         saveComponentChanges(diff, 'components', 'create', moduleId)
@@ -924,13 +906,14 @@ export const createComponentsSlice = (set, get) => ({
           });
         get().multiplayer.broadcastUpdates(newComponents, 'components', 'create');
       }
+      if (skipFormUpdate) resolve(diff);
     });
   },
 
   deleteComponents: (
     selected,
     moduleId = 'canvas',
-    { skipUndoRedo = false, saveAfterAction = true, isCut = false } = {}
+    { skipUndoRedo = false, saveAfterAction = true, isCut = false, skipFormUpdate = false } = {}
   ) => {
     const {
       saveComponentChanges,
@@ -938,7 +921,12 @@ export const createComponentsSlice = (set, get) => ({
       withUndoRedo,
       selectedComponents,
       deleteComponentNameIdMapping,
+      getResolvedComponent,
       removeNode,
+      checkIfParentIsFormAndDeleteField,
+      deleteTemporaryLayouts,
+      currentLayout,
+      adjustComponentPositions,
       getCurrentPageId,
       checkIfComponentIsModule,
       clearModuleFromStore,
@@ -946,42 +934,57 @@ export const createComponentsSlice = (set, get) => ({
     const currentPageId = getCurrentPageId(moduleId);
     const appEvents = get().eventsSlice.getModuleEvents(moduleId);
     const componentNames = [];
+    const componentIds = [];
+    const childParentMapping = {};
     const _selectedComponents = selected?.length ? selected : selectedComponents;
     if (!_selectedComponents.length) return;
+
+    const toDeleteComponents = [];
+    const toDeleteEvents = [];
+    const allComponents = getCurrentPageComponents(moduleId);
+
+    const findAllChildComponents = (componentId) => {
+      if (!toDeleteComponents.includes(componentId)) {
+        toDeleteComponents.push(componentId);
+
+        // Find the children of this component
+        const children = getAllChildComponents(allComponents, componentId).map((child) => child.id);
+        if (children.length > 0) {
+          // Recursively find children of children
+          children.forEach((child) => {
+            findAllChildComponents(child);
+          });
+        }
+      }
+    };
+
+    _selectedComponents.forEach((componentId) => {
+      !skipFormUpdate && checkIfParentIsFormAndDeleteField(componentId, moduleId);
+      findAllChildComponents(componentId);
+    });
+
+    toDeleteComponents.forEach((componentId) => {
+      const isDynamicHeightEnabled = getResolvedComponent(componentId)?.properties?.dynamicHeight;
+      if (isDynamicHeightEnabled) {
+        adjustComponentPositions(componentId, currentLayout, true);
+      }
+    });
+
     set(
       withUndoRedo((state) => {
-        const toDeleteComponents = [];
-        const toDeleteEvents = [];
-        const allComponents = getCurrentPageComponents(moduleId);
-
-        const findAllChildComponents = (componentId) => {
-          if (!toDeleteComponents.includes(componentId)) {
-            toDeleteComponents.push(componentId);
-
-            // Find the children of this component
-            const children = getAllChildComponents(allComponents, componentId).map((child) => child.id);
-            if (children.length > 0) {
-              // Recursively find children of children
-              children.forEach((child) => {
-                findAllChildComponents(child);
-              });
-            }
-          }
-        };
-
-        _selectedComponents.forEach((componentId) => {
-          findAllChildComponents(componentId);
-        });
-
         const page = state.modules?.[moduleId]?.pages.find((page) => page.id === currentPageId);
         const resolvedComponents = state.resolvedStore.modules?.[moduleId]?.components;
         const componentsExposedValues = state.resolvedStore.modules?.[moduleId]?.exposedValues.components;
-
         toDeleteComponents.forEach((id) => {
           // Remove from containerChildrenMapping
           Object.keys(state.containerChildrenMapping).forEach((containerId) => {
             state.containerChildrenMapping[containerId] = state.containerChildrenMapping[containerId].filter(
-              (componentId) => componentId !== id
+              (componentId) => {
+                if (componentId === id) {
+                  childParentMapping[id] = containerId;
+                }
+                return componentId !== id;
+              }
             );
           });
 
@@ -999,12 +1002,13 @@ export const createComponentsSlice = (set, get) => ({
             );
           }
           componentNames.push(page.components[id]?.component?.name);
+          componentIds.push(id);
           const eventsToRemove = appEvents.filter((event) => event.sourceId === id).map((event) => event.id);
           toDeleteEvents.push(...eventsToRemove);
           delete page.components[id]; // Remove the component from the page
           delete resolvedComponents[id]; // Remove the component from the resolved store
           delete componentsExposedValues[id]; // Remove the component from the exposed values
-          state.selectedComponents = []; // Empty the selected components
+          if (!skipFormUpdate) state.selectedComponents = []; // Empty the selected components
           removeNode(`components.${id}`, moduleId);
           state.showWidgetDeleteConfirmation = false; // Set it to false always
         });
@@ -1038,9 +1042,16 @@ export const createComponentsSlice = (set, get) => ({
       false,
       'deleteComponents'
     );
+
     componentNames.forEach((componentName) => {
       deleteComponentNameIdMapping(componentName, moduleId);
     });
+    componentIds.forEach((componentId) => {
+      if (childParentMapping[componentId]) {
+        adjustComponentPositions(childParentMapping[componentId], currentLayout, false, true);
+      }
+      deleteTemporaryLayouts(componentId);
+    });
   },
 
   pasteComponents: async (components, moduleId = 'canvas') => {
@@ -1085,14 +1096,19 @@ export const createComponentsSlice = (set, get) => ({
       withUndoRedo,
       getComponentTypeFromId,
       setResolvedComponent,
+      getResolvedComponent,
+      adjustComponentPositions,
       getComponentDefinition,
       currentLayout,
       checkValueAndResolve,
+      checkParentAndUpdateFormFields,
+      deleteTemporaryLayouts,
       getCurrentPageIndex,
     } = get();
     const currentPageIndex = getCurrentPageIndex(moduleId);
     let hasParentChanged = false;
     let oldParentId;
+    updateParent && checkParentAndUpdateFormFields(componentLayouts, newParentId, moduleId);
     set(
       withUndoRedo((state) => {
         const page = state.modules[moduleId].pages[currentPageIndex];
@@ -1135,6 +1151,7 @@ export const createComponentsSlice = (set, get) => ({
                 state.containerChildrenMapping[moduleId].push(componentId);
               }
             }
+
             // ============ Parent update logic ends ============
           });
         }
@@ -1148,6 +1165,22 @@ export const createComponentsSlice = (set, get) => ({
       const oldParentComponentType = getComponentTypeFromId(oldParentId, moduleId);
       const { component } = getComponentDefinition(componentId, moduleId);
 
+      // Adjust component positions
+
+      //If new parent is dynamic, adjust the parent positions
+      const isParentDynamic = getResolvedComponent(newParentId)?.properties?.dynamicHeight;
+      if (isParentDynamic) {
+        adjustComponentPositions(newParentId, currentLayout, false, true);
+      }
+
+      // If the parent is changed, adjust the old parent positions
+      if (oldParentId !== newParentId) {
+        const isParentDynamic = getResolvedComponent(oldParentId)?.properties?.dynamicHeight;
+        if (isParentDynamic) {
+          adjustComponentPositions(oldParentId, currentLayout, false, true);
+        }
+      }
+
       if (
         newParentComponentType === 'Listview' ||
         newParentComponentType === 'Kanban' ||
@@ -1198,12 +1231,37 @@ export const createComponentsSlice = (set, get) => ({
       return acc;
     }, {});
 
+    Object.keys(componentLayouts).forEach((componentId) => {
+      deleteTemporaryLayouts(componentId);
+    });
+
     if (saveAfterAction) {
       saveComponentChanges(diff, 'components/layout', 'update', moduleId);
       get().multiplayer.broadcastUpdates(diff, 'components/layout', 'update');
     }
   },
 
+  saveComponentPropertyChanges: (componentId, property, value, paramType, attr, moduleId = 'canvas') => {
+    const { getCurrentPageIndex, getCurrentMode, saveComponentChanges } = get();
+    const currentPageIndex = getCurrentPageIndex(moduleId);
+    const currentMode = getCurrentMode(moduleId);
+    const oldComponent = get().modules[moduleId].pages[currentPageIndex].components[componentId].component;
+    const { events, exposedVariables, ...filteredDefinition } = oldComponent.definition || {};
+
+    const diff = {
+      [componentId]: {
+        component: {
+          ...oldComponent,
+          definition: filteredDefinition,
+        },
+      },
+    };
+
+    if (currentMode !== 'view') saveComponentChanges(diff, 'components', 'update');
+
+    get().multiplayer.broadcastUpdates({ componentId, property, value, paramType, attr }, 'components', 'update');
+  },
+
   setComponentProperty: (
     componentId,
     property,
@@ -1226,6 +1284,7 @@ export const createComponentsSlice = (set, get) => ({
       checkValueAndResolve,
       getResolvedComponent,
       setResolvedComponent,
+      saveComponentPropertyChanges,
       getCurrentMode,
     } = get();
     const currentPageIndex = getCurrentPageIndex(moduleId);
@@ -1260,23 +1319,8 @@ export const createComponentsSlice = (set, get) => ({
         'setComponentProperty'
       );
 
-      const oldComponent = get().modules[moduleId].pages[currentPageIndex].components[componentId].component;
-      const { events, exposedVariables, ...filteredDefinition } = oldComponent.definition || {};
-
-      const diff = {
-        [componentId]: {
-          component: {
-            ...oldComponent,
-            definition: filteredDefinition,
-          },
-        },
-      };
-
       if (saveAfterAction) {
-        const currentMode = getCurrentMode(moduleId);
-        if (currentMode !== 'view') saveComponentChanges(diff, 'components', 'update', moduleId);
-
-        get().multiplayer.broadcastUpdates({ componentId, property, value, paramType, attr }, 'components', 'update');
+        saveComponentPropertyChanges(componentId, property, updatedValue, paramType, attr, moduleId);
       }
       return;
     }
@@ -1312,23 +1356,8 @@ export const createComponentsSlice = (set, get) => ({
       );
     }
 
-    const oldComponent = get().modules[moduleId].pages[currentPageIndex].components[componentId].component;
-    const { events, exposedVariables, ...filteredDefinition } = oldComponent.definition || {};
-
-    const diff = {
-      [componentId]: {
-        component: {
-          ...oldComponent,
-          definition: filteredDefinition,
-        },
-      },
-    };
-
     if (saveAfterAction) {
-      const currentMode = getCurrentMode(moduleId);
-      if (currentMode !== 'view') saveComponentChanges(diff, 'components', 'update', moduleId);
-
-      get().multiplayer.broadcastUpdates({ componentId, property, value, paramType, attr }, 'components', 'update');
+      saveComponentPropertyChanges(componentId, property, updatedValue, paramType, attr, moduleId);
     }
 
     if (attr !== 'value' || skipResolve) return;
@@ -1438,12 +1467,12 @@ export const createComponentsSlice = (set, get) => ({
     }
   },
   setSelectedComponents: (components) => {
-    get().togglePageSettingMenu(false);
     set(
       (state) => {
         state.selectedComponents = components;
         if (components.length === 1) {
           state.activeRightSideBarTab = RIGHT_SIDE_BAR_TAB.CONFIGURATION;
+          state.isRightSidebarOpen = true;
         }
       },
       false,
@@ -1511,7 +1540,13 @@ export const createComponentsSlice = (set, get) => ({
   },
 
   handleCanvasContainerMouseUp: (e) => {
-    const { selectedComponents, clearSelectedComponents, setActiveRightSideBarTab } = get();
+    const {
+      selectedComponents,
+      clearSelectedComponents,
+      setActiveRightSideBarTab,
+      setRightSidebarOpen,
+      isRightSidebarPinned,
+    } = get();
     const selectedText = window.getSelection().toString();
     const isClickedOnSubcontainer =
       e.target.getAttribute('component-id') !== null && e.target.getAttribute('component-id') !== 'canvas';
@@ -1523,6 +1558,9 @@ export const createComponentsSlice = (set, get) => ({
     ) {
       clearSelectedComponents();
       setActiveRightSideBarTab(RIGHT_SIDE_BAR_TAB.COMPONENTS);
+      // if (!isRightSidebarPinned) {
+      //   setRightSidebarOpen(false);
+      // }
     }
   },
 
@@ -1907,24 +1945,7 @@ export const createComponentsSlice = (set, get) => ({
     const label = componentDefinition?.component?.definition?.properties?.label;
     const getAllExposedValues = get().getAllExposedValues;
     // Early return for non input components
-    if (
-      ![
-        'TextInput',
-        'PasswordInput',
-        'EmailInput',
-        'PhoneInput',
-        'CurrencyInput',
-        'NumberInput',
-        'DropdownV2',
-        'MultiselectV2',
-        'RadioButtonV2',
-        'DatetimePickerV2',
-        'DaterangePicker',
-        'DatePickerV2',
-        'TimePicker',
-        'TextArea',
-      ].includes(componentType)
-    ) {
+    if (!INPUT_COMPONENTS_FOR_FORM.includes(componentType)) {
       return layoutData?.height;
     }
     const { alignment = { value: null }, width = { value: null }, auto = { value: null } } = stylesDefinition ?? {};
@@ -1979,14 +2000,89 @@ export const createComponentsSlice = (set, get) => ({
 
     const childComponents = getAllChildComponents(allComponents, componentId);
     const maxHeight = Object.values(childComponents).reduce((max, component) => {
+      // Added this logic to handle the top alignment for the component
+      const top = component?.component?.definition?.styles?.alignment?.value === 'top' ? 20 : 0;
       const layout = component?.layouts?.[currentLayout];
       if (!layout) {
         return max;
       }
-      const sum = layout.top + layout.height;
+      const sum = layout.top + layout.height + top;
       return Math.max(max, sum);
     }, 0);
 
     setComponentProperty(componentId, `canvasHeight`, maxHeight, 'properties', 'value', false);
   },
+
+  /**
+   * Generates a unique component name from the base name by appending a number if necessary.
+   * @param {string} baseName - The base name for the component
+   * @returns {string} Unique component name
+   */
+  generateUniqueComponentNameFromBaseName: (baseName, moduleId = 'canvas') => {
+    const { getComponentNameIdMapping } = get();
+    const componentNameIdMapping = getComponentNameIdMapping(moduleId);
+
+    let uniqueName = baseName;
+    let counter = 1;
+
+    while (Object.keys(componentNameIdMapping).includes(uniqueName)) {
+      uniqueName = `${baseName}${counter}`;
+      counter++;
+    }
+
+    return uniqueName;
+  },
+  buildComponentDefinition: (componentDefinitions, moduleId = 'canvas') => {
+    const { getCurrentPageComponents } = get();
+    return componentDefinitions.reduce((acc, componentDefinition) => {
+      const currentComponents = {
+        ...getCurrentPageComponents(moduleId),
+        ...Object.fromEntries(acc.map((component) => [component.id, component])),
+      };
+
+      const componentName =
+        componentDefinition.name || computeComponentName(componentDefinition.component.component, currentComponents);
+      const newComponent = {
+        id: componentDefinition.id,
+        name: componentName,
+        component: {
+          component: componentDefinition.component.component,
+          definition: {
+            general: componentDefinition.component.definition?.general,
+            generalStyles: componentDefinition.component.definition?.generalStyles,
+            others: componentDefinition.component.definition?.others,
+            properties: componentDefinition.component.definition?.properties,
+            styles: componentDefinition.component.definition?.styles,
+            validation: componentDefinition.component.definition?.validation,
+          },
+          name: componentName,
+          parent: componentDefinition.component.parent,
+        },
+        layouts: componentDefinition.layouts,
+      };
+
+      return [...acc, newComponent];
+    }, []);
+  },
+  toggleComponentPermissionModal: (show) => {
+    set((state) => {
+      state.showComponentPermissionModal = show;
+    });
+  },
+  setComponentPermission: (componentId, data) => {
+    const { modules } = get();
+    const currentPageIndex = modules.canvas.currentPageIndex;
+    const component = modules.canvas.pages[currentPageIndex]?.components?.[componentId];
+
+    if (component) {
+      const updatedComponent = {
+        ...component,
+        permissions: data.length === 0 || data.length === undefined ? [] : [data[0]],
+      };
+
+      set((state) => {
+        state.modules.canvas.pages[currentPageIndex].components[componentId] = updatedComponent;
+      });
+    }
+  },
 });
diff --git a/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js b/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js
index 1077a22608..457ca56370 100644
--- a/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js
@@ -196,7 +196,7 @@ export const createEnvironmentsAndVersionsSlice = (set, get) => ({
   },
   changeEditorVersionAction: async (appId, versionId, onSuccess, onFailure) => {
     try {
-      const data = await appVersionService.getAppVersionData(appId, versionId);
+      const data = await appVersionService.getAppVersionData(appId, versionId, get().currentMode);
       const selectedVersion = {
         id: data.editing_version.id,
         name: data.editing_version.name,
diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index a210c98f1b..dfea9c4455 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -406,11 +406,11 @@ export const createEventsSlice = (set, get) => ({
         await get().eventsSlice.executeAction(event, mode, customVariables, moduleId);
       }
     },
-    logError(errorType, errorKind, error, eventObj = '', options = {}, logLevel = 'error') {
+    logError(errorType, errorKind, error, eventObj = '', options = {}, logLevel = 'error', page) {
       const { event = eventObj } = eventObj;
       const pages = get().modules.canvas.pages;
       const currentPageId = get().getCurrentPageId('canvas');
-      const currentPage = pages.find((page) => page.id === currentPageId);
+      const currentPage = page ? page : pages.find((page) => page.id === currentPageId);
       const componentIdMapping = get().modules['canvas'].componentNameIdMapping;
       const componentName = Object.keys(componentIdMapping).find(
         (key) => componentIdMapping[key] === eventObj?.sourceId
@@ -442,7 +442,9 @@ export const createEventsSlice = (set, get) => ({
 
         const headerMap = {
           component: `[Page ${pageName}] [Component ${componentName}] [Event ${event?.eventId}] [Action ${event.actionId}]`,
-          page: `[Page ${pageName}] [Event ${event.eventId}] [Action ${event.actionId}]`,
+          page: `[Page ${pageName}] ${event.eventId ? `[Event ${event.eventId}]` : ''} ${
+            event.actionId ? `[Action ${event.actionId}]` : ''
+          }`,
           query: `[Query ${getQueryName()}] [Event ${event.eventId}] [Action ${event.actionId}]`,
           customLog: `${event.key}`,
         };
diff --git a/frontend/src/AppBuilder/_stores/slices/formComponentSlice.js b/frontend/src/AppBuilder/_stores/slices/formComponentSlice.js
new file mode 100644
index 0000000000..f1f2f91fa5
--- /dev/null
+++ b/frontend/src/AppBuilder/_stores/slices/formComponentSlice.js
@@ -0,0 +1,383 @@
+import { deepClone } from '@/_helpers/utilities/utils.helpers';
+import { cleanupFormFields } from '@/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils';
+import { set as lodashSet } from 'lodash';
+import { INPUT_COMPONENTS_FOR_FORM } from '@/AppBuilder/RightSideBar/Inspector/Components/Form/constants';
+
+const initialState = {};
+
+export const createFormComponentSlice = (set, get) => ({
+  ...initialState,
+
+  isJsonSchemaInGenerateFormFrom: (componentId, moduleId = 'canvas') => {
+    const { getComponentDefinition } = get();
+    const componentDefinition = getComponentDefinition(componentId, moduleId);
+    if (!componentDefinition) return false;
+    const { generateFormFrom } = componentDefinition.component.definition.properties || {};
+    return generateFormFrom?.value === 'jsonSchema';
+  },
+  getFormDataSectionData: (componentId, moduleId = 'canvas') => {
+    const { getComponentDefinition } = get();
+    const componentDefinition = getComponentDefinition(componentId, moduleId);
+    if (!componentDefinition) return null;
+    const { generateFormFrom = null, JSONData = null } = componentDefinition.component.definition.properties || {};
+    return { generateFormFrom, JSONData };
+  },
+  saveFormDataSectionData: (componentId, data, fields, moduleId = 'canvas') => {
+    const { getComponentDefinition, updateContainerAutoHeight, getCurrentPageIndex, saveComponentPropertyChanges } =
+      get();
+    const componentDefinition = getComponentDefinition(componentId, moduleId);
+    if (!componentDefinition) return;
+
+    const currentPageIndex = getCurrentPageIndex(moduleId);
+    set(
+      (state) => {
+        const pageComponent = state.modules[moduleId].pages[currentPageIndex].components[componentId].component;
+        lodashSet(pageComponent, ['definition', 'properties', 'generateFormFrom'], data.generateFormFrom);
+        lodashSet(pageComponent, ['definition', 'properties', 'JSONData'], data.JSONData);
+        lodashSet(pageComponent, ['definition', 'properties', 'fields', 'value'], cleanupFormFields(fields));
+      },
+      false,
+      'saveFormDataSectionData'
+    );
+
+    updateContainerAutoHeight(componentId);
+
+    saveComponentPropertyChanges(
+      componentId,
+      'generateFormFrom',
+      data.generateFormFrom,
+      'properties',
+      'value',
+      moduleId
+    );
+  },
+  getFormFields: (componentId, moduleId = 'canvas') => {
+    const { getComponentDefinition } = get();
+    const componentDefinition = getComponentDefinition(componentId, moduleId);
+    if (!componentDefinition) return [];
+    return componentDefinition?.component?.definition?.properties?.fields?.value || [];
+  },
+  saveFormFields: (componentId, fields, moduleId = 'canvas') => {
+    if (!componentId) return;
+
+    const { getComponentDefinition, getCurrentPageIndex, saveComponentPropertyChanges } = get();
+    const componentDefinition = getComponentDefinition(componentId, moduleId);
+    if (!componentDefinition) return;
+
+    const currentPageIndex = getCurrentPageIndex(moduleId);
+    set(
+      (state) => {
+        const pageComponent = state.modules[moduleId].pages[currentPageIndex].components[componentId].component;
+        lodashSet(pageComponent, ['definition', 'properties', 'fields', 'value'], cleanupFormFields(fields));
+      },
+      false,
+      'saveFormFields'
+    );
+
+    saveComponentPropertyChanges(componentId, 'fields', fields, 'properties', 'value', moduleId);
+  },
+
+  // Check if the parent component is a Form and delete the form fields if it has the componentId
+  checkIfParentIsFormAndDeleteField: (componentId, moduleId = 'canvas', skipSettingProperty = false) => {
+    const { getParentComponentType, getComponentDefinition, saveFormFields, getFormFields } = get();
+    const componentDefinition = getComponentDefinition(componentId, moduleId);
+    const parentId = componentDefinition?.component?.parent;
+    if (!parentId) return;
+
+    if (getParentComponentType(parentId, moduleId) === 'Form') {
+      if (skipSettingProperty) {
+        return componentId;
+      }
+      const fields = getFormFields(parentId, moduleId);
+
+      const updatedFields = fields.filter((field) => field.componentId !== componentId);
+
+      saveFormFields(parentId, updatedFields, moduleId);
+    }
+  },
+  // Check if the parent component is a Form and add the form fields
+  checkIfParentIsFormAndAddField: (
+    componentId,
+    component,
+    parentId,
+    moduleId = 'canvas',
+    skipSettingProperty = false
+  ) => {
+    const { getParentComponentType, getFormFields, saveFormFields } = get();
+    if (!parentId) return;
+    const componentType = component?.component?.component;
+
+    if (!INPUT_COMPONENTS_FOR_FORM.includes(componentType)) return;
+
+    if (getParentComponentType(parentId, moduleId) === 'Form') {
+      const newField = {
+        componentId,
+        isCustomField: true,
+        dataType: undefined,
+        key: undefined,
+      };
+
+      if (skipSettingProperty) {
+        return newField;
+      }
+      const fields = getFormFields(parentId, moduleId);
+      saveFormFields(parentId, [...fields, newField], moduleId);
+    }
+  },
+
+  // Logic is written considering that the component from different parent cannot be moved together
+  checkParentAndUpdateFormFields: (componentLayouts, newParentId, moduleId = 'canvas') => {
+    const {
+      getParentComponentType,
+      getComponentDefinition,
+      checkIfParentIsFormAndAddField,
+      checkIfParentIsFormAndDeleteField,
+      saveFormFields,
+    } = get();
+
+    const newParentType = getParentComponentType(newParentId, moduleId);
+    const firstComponentId = Object.keys(componentLayouts)[0];
+
+    const firstComponentDefinition = getComponentDefinition(firstComponentId, moduleId);
+    const currentParentId = firstComponentDefinition?.component?.parent;
+    const existingParentDefinition = currentParentId ? getComponentDefinition(currentParentId, moduleId) : null;
+    const currentParentType = existingParentDefinition?.component?.component;
+
+    /* There are three scenarios:
+      1. If both newParentId and currentParentId are same, then return
+      2. If newParentId is a Form, then add the fields to the form
+      3. If currentParentId is a Form, then remove the fields from the form
+    */
+
+    // Case 1: If both newParentId and currentParentId are same, then return
+    if (newParentId === currentParentId) return;
+    // Return if neither newParentId nor currentParentId is a Form
+    if (newParentType !== 'Form' && currentParentType !== 'Form') return;
+
+    const addedFields = [],
+      removedComponentIds = [];
+
+    Object.keys(componentLayouts).forEach((componentId) => {
+      const componentDefinition = getComponentDefinition(componentId, moduleId);
+      // Case 2: If newParentId is a Form, then add the fields to the form
+      const newField = checkIfParentIsFormAndAddField(componentId, componentDefinition, newParentId, moduleId, true);
+      if (newField) {
+        addedFields.push(newField);
+      }
+      // Case 3: If currentParentId is a Form, then remove the fields from the form
+      const deletedField = checkIfParentIsFormAndDeleteField(componentId, moduleId, true);
+      if (deletedField) {
+        removedComponentIds.push(deletedField);
+      }
+    });
+
+    const fields = existingParentDefinition?.component?.definition?.properties?.fields?.value || [];
+    const updatedFields = fields.filter((field) => !removedComponentIds.includes(field.componentId));
+    const newParentComponentDefinition = getComponentDefinition(newParentId, moduleId);
+    const newParentFields = newParentComponentDefinition?.component?.definition?.properties?.fields?.value || [];
+    saveFormFields(newParentId, [...newParentFields, ...addedFields], moduleId);
+    saveFormFields(currentParentId, updatedFields, moduleId);
+  },
+  setComponentPropertyByComponentIds: (
+    componentDiffs,
+    moduleId = 'canvas',
+    { skipUndoRedo = false, saveAfterAction = true } = {}
+  ) => {
+    const {
+      addToDependencyGraph,
+      setResolvedComponent,
+      currentMode,
+      saveComponentChanges,
+      withUndoRedo,
+      getCurrentPageIndex,
+      getResolvedComponent,
+      getComponentDefinition,
+    } = get();
+
+    let diff = {};
+    const currentPageIndex = getCurrentPageIndex(moduleId);
+
+    // Process resolved values for each component diff before state update
+    Object.entries(componentDiffs).forEach(([componentId, componentDiff]) => {
+      // Get existing component definition for backend saving
+      const currentComponent = getComponentDefinition(componentId);
+      if (!currentComponent) return;
+
+      // Get existing resolved values to merge with new ones
+      const existingResolvedValues = getResolvedComponent(componentId) || {};
+
+      // Process only the diff through dependency graph
+      const resolvedDiffValues = addToDependencyGraph(moduleId, componentId, componentDiff.component);
+
+      // Merge the resolved diff values with existing resolved values
+      const mergedResolvedValues = deepClone(existingResolvedValues);
+
+      // Merge at each property type level (properties, styles, validation, etc.)
+      ['properties', 'general', 'generalStyles', 'others', 'styles', 'validation'].forEach((propType) => {
+        if (resolvedDiffValues[propType]) {
+          mergedResolvedValues[propType] = {
+            ...(mergedResolvedValues[propType] || {}),
+            ...resolvedDiffValues[propType],
+          };
+        }
+      });
+
+      // Update the resolved component in store with merged values
+      setResolvedComponent(componentId, mergedResolvedValues, moduleId);
+
+      // Prepare diff for backend saving by merging with current component
+      const { events, exposedVariables, ...filteredDefinition } = currentComponent.component.definition || {};
+
+      // Prepare diff for backend saving
+      diff[componentId] = {
+        component: {
+          ...currentComponent.component,
+          ...componentDiff.component,
+          definition: {
+            ...filteredDefinition,
+            // If the componentDiff has definition, merge it with the filtered definition
+            ...(componentDiff.component?.definition || {}),
+          },
+        },
+      };
+    });
+
+    // Update all component state changes in a single batch with one undo/redo operation
+    set(
+      withUndoRedo((state) => {
+        // Process all components in one batch
+        Object.entries(componentDiffs).forEach(([componentId, componentDiff]) => {
+          if (state.modules[moduleId]?.pages?.[currentPageIndex]?.components?.[componentId]) {
+            // Merge component changes into state
+            const pageComponent = state.modules[moduleId].pages[currentPageIndex].components[componentId];
+
+            // Handle component definition updates
+            if (componentDiff.component?.definition) {
+              for (const [defType, defValues] of Object.entries(componentDiff.component.definition)) {
+                if (!pageComponent.component.definition[defType]) {
+                  pageComponent.component.definition[defType] = {};
+                }
+                // Correctly merge the new values from diff into the existing definition
+                pageComponent.component.definition[defType] = {
+                  ...pageComponent.component.definition[defType],
+                  ...defValues,
+                };
+              }
+            }
+          }
+        });
+      }),
+      skipUndoRedo,
+      'setComponentPropertiesByDiff'
+    );
+
+    // Save changes to backend if needed
+    if (currentMode !== 'view' && Object.keys(diff).length > 0 && saveAfterAction) {
+      saveComponentChanges(diff, 'components', 'update');
+    }
+
+    // Broadcast updates for multiplayer
+    get().multiplayer.broadcastUpdates({ componentDiffs }, 'components', 'update');
+    return diff;
+  },
+
+  /**
+   * Performs batch operations on components (create, update, delete)
+   * @param {Object} operations - Object containing the operations to perform
+   * @param {Object} operations.added - Components to create { [componentId]: componentDefinition }
+   * @param {Object} operations.updated - Components to update { [componentId]: componentDiff }
+   * @param {Array} operations.deleted - Array of component IDs to delete
+   * @param {string} moduleId - Module ID (default: 'canvas')
+   * @param {Object} options - Additional options { skipUndoRedo, saveAfterAction }
+   * @returns {Promise} - Promise that resolves when all operations are complete
+   */
+  performBatchComponentOperations: async (operations = {}, moduleId = 'canvas', options = {}) => {
+    const {
+      currentPageId,
+      addComponentToCurrentPage,
+      setComponentPropertyByComponentIds,
+      deleteComponents,
+      saveComponentChanges,
+      buildComponentDefinition,
+    } = get();
+
+    const { skipUndoRedo = false, saveAfterAction = true } = options;
+    let upatedDiff = {};
+
+    // Process create operations
+    const handleCreate = async () => {
+      if (!operations.added || Object.keys(operations.added).length === 0) return {};
+
+      // Convert create operations format to match addComponentToCurrentPage expectations
+      const componentsToCreate = Object.entries(operations.added).map(([id, component]) => ({
+        id,
+        name: component.name,
+        component: component.component,
+        layouts: component.layouts,
+      }));
+
+      // Use existing addComponentToCurrentPage but with saveAfterAction=false
+      // We'll save all changes together at the end
+      return addComponentToCurrentPage(componentsToCreate, moduleId, {
+        skipUndoRedo: false,
+        saveAfterAction: false,
+        skipFormUpdate: true,
+      });
+    };
+
+    // Process update operations
+    const handleUpdate = () => {
+      if (!operations.updated || Object.keys(operations.updated).length === 0) return;
+
+      // Use existing setComponentPropertyByComponentIds function
+      upatedDiff = setComponentPropertyByComponentIds(operations.updated, moduleId, {
+        skipUndoRedo: false,
+        saveAfterAction: false, // We'll save all changes together at the end
+      });
+    };
+
+    // Process delete operations
+    const handleDelete = () => {
+      if (!operations.deleted || operations.deleted.length === 0) return;
+
+      // Use existing deleteComponents function but with saveAfterAction=false
+      deleteComponents(operations.deleted, moduleId, {
+        skipUndoRedo: false,
+        saveAfterAction: false,
+        isCut: false,
+        skipFormUpdate: true, // Skip form updates to avoid conflicts
+      });
+    };
+
+    try {
+      // Process the operations in the correct order: delete -> update -> create -> replace
+      // This avoids potential conflicts
+      handleDelete();
+      handleUpdate();
+      const diff = await handleCreate();
+
+      // Save all changes together if requested
+      if (saveAfterAction) {
+        let combinedDiff = {
+          create: {
+            diff: diff,
+            pageId: currentPageId,
+          },
+          update: {
+            diff: upatedDiff || {},
+          },
+          delete: {
+            diff: operations.deleted || [],
+          },
+        };
+
+        saveComponentChanges(combinedDiff, 'components/batch', 'update');
+
+        // Broadcast updates for multiplayer
+        get().multiplayer.broadcastUpdates({ operations }, 'components', 'update');
+      }
+    } catch (error) {
+      console.error('Error performing batch component operations:', error);
+    }
+  },
+});
diff --git a/frontend/src/AppBuilder/_stores/slices/gitSyncSlice.js b/frontend/src/AppBuilder/_stores/slices/gitSyncSlice.js
index 1512fa051e..203946207b 100644
--- a/frontend/src/AppBuilder/_stores/slices/gitSyncSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/gitSyncSlice.js
@@ -1,13 +1,14 @@
 import useStore from '@/AppBuilder/_stores/store';
-
+import { gitSyncService } from '@/_services';
+import { useAppDataStore } from '@/_stores/appDataStore';
 const initialState = {
   showGitSyncModal: false,
+  allowEditing: false,
+  appLoading: false,
 };
-
 export const createGitSyncSlice = (set, get) => ({
   ...initialState,
-  toggleGitSyncModal: () => {
-    const creationMode = useStore.getState()?.app.creationMode;
+  toggleGitSyncModal: (creationMode) => {
     const featureAccess = useStore.getState()?.license?.featureAccess;
     const selectedEnvironment = useStore.getState()?.selectedEnvironment;
     const isEditorFreezed = useStore.getState()?.isEditorFreezed;
@@ -16,4 +17,22 @@ export const createGitSyncSlice = (set, get) => ({
       ? set((state) => ({ showGitSyncModal: !state.showGitSyncModal }), false, 'toggleGitSyncModal')
       : () => {};
   },
+  fetchAppGit: async (currentOrganizationId, currentAppVersionId) => {
+    set((state) => ({ appLoading: true }), false, 'setAppLoading');
+
+    try {
+      const data = await gitSyncService.getAppGitConfigs(currentOrganizationId, currentAppVersionId);
+      const allowEditing = data?.app_git?.allow_editing ?? false;
+
+      set((state) => ({ allowEditing }), false, 'setAllowEditing');
+      return allowEditing;
+    } catch (error) {
+      console.error('Failed to fetch app git configs:', error);
+      // Set allowEditing to false on error
+      set((state) => ({ allowEditing: false }), false, 'setAllowEditing');
+      return false;
+    } finally {
+      set((state) => ({ appLoading: false }), false, 'setAppLoading');
+    }
+  },
 });
diff --git a/frontend/src/AppBuilder/_stores/slices/gridSlice.js b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
index 8b2f61bd9a..9c4d0e1203 100644
--- a/frontend/src/AppBuilder/_stores/slices/gridSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
@@ -1,5 +1,6 @@
 import { NO_OF_GRIDS } from '@/AppBuilder/AppCanvas/appCanvasConstants';
 import { debounce } from 'lodash';
+import { isProperNumber } from '../utils';
 
 const initialState = {
   hoveredComponentForGrid: '',
@@ -7,6 +8,7 @@ const initialState = {
   triggerCanvasUpdater: false,
   lastCanvasIdClick: '',
   lastCanvasClickPosition: null,
+  temporaryLayouts: {},
   draggingComponentId: null,
   reorderContainerChildren: {
     containerId: null,
@@ -19,6 +21,12 @@ export const createGridSlice = (set, get) => ({
   setHoveredComponentForGrid: (id) =>
     set(() => ({ hoveredComponentForGrid: id }), false, { type: 'setHoveredComponentForGrid', id }),
   getHoveredComponentForGrid: () => get().hoveredComponentForGrid,
+  checkHoveredComponentDynamicHeight: () => {
+    const { hoveredComponentForGrid, getResolvedComponent } = get();
+    const resolvedProperties = getResolvedComponent(hoveredComponentForGrid, null)?.properties;
+    const { dynamicHeight } = resolvedProperties;
+    return dynamicHeight;
+  },
   setHoveredComponentBoundaryId: (id) =>
     set(() => ({ hoveredComponentBoundaryId: id }), false, { type: 'setHoveredComponentBoundaryId', id }),
   toggleCanvasUpdater: () =>
@@ -77,6 +85,369 @@ export const createGridSlice = (set, get) => ({
   setLastCanvasClickPosition: (position) => {
     set({ lastCanvasClickPosition: position });
   },
+  setTemporaryLayouts: (layouts) => set((state) => ({ temporaryLayouts: { ...state.temporaryLayouts, ...layouts } })),
+  getTemporaryLayouts: () => get().temporaryLayouts,
+  clearTemporaryLayouts: () => set(() => ({ temporaryLayouts: {} })),
+  deleteTemporaryLayouts: (componentId) => {
+    const { temporaryLayouts } = get();
+    const newLayouts = { ...temporaryLayouts };
+    delete newLayouts[componentId];
+    set(() => ({ temporaryLayouts: newLayouts }));
+  },
+  deleteContainerTemporaryLayouts: (containerId) => {
+    const { deleteTemporaryLayouts, getCurrentPageComponents, currentLayout = 'desktop' } = get();
+    deleteTemporaryLayouts(containerId);
+    const currentPageComponents = getCurrentPageComponents();
+    const height = currentPageComponents?.[containerId].layouts[currentLayout].height;
+    const element = document.querySelector(`.ele-${containerId}`);
+    if (element) {
+      element.style.height = `${height}px`;
+    }
+  },
+
+  adjustComponentPositions: (componentId, currentLayout = 'desktop', shouldReset = false, isContainer = false) => {
+    const {
+      getResolvedValue,
+      getCurrentPageComponents,
+      setTemporaryLayouts,
+      toggleCanvasUpdater,
+      temporaryLayouts,
+      deleteContainerTemporaryLayouts,
+      adjustComponentPositions,
+      getResolvedComponent,
+      getComponentTypeFromId,
+    } = get();
+
+    try {
+      // Getting all the components on the current page
+      const currentPageComponents = getCurrentPageComponents();
+
+      // If the component is a container, we need to calculate the height of the container
+      let maxHeight = 0;
+
+      if (isContainer) {
+        const componentType = getComponentTypeFromId(componentId);
+
+        const element = document.querySelector(`.dynamic-${componentId}`);
+        if (!element) {
+          deleteContainerTemporaryLayouts(componentId);
+          return;
+        }
+        let modifiedComponentId = componentId;
+        if (componentType === 'Tabs') {
+          const activeTab = element?.getAttribute('activetab');
+          modifiedComponentId = `${componentId}-${activeTab}`;
+        }
+        const componentLayouts = get()
+          .getContainerChildrenMapping(modifiedComponentId)
+          .reduce((acc, id) => {
+            const component = currentPageComponents[id];
+            if (!component) return acc;
+            return {
+              ...acc,
+              [id]: component.layouts[currentLayout],
+            };
+          }, {});
+
+        const filteredTemporaryLayouts = Object.keys(componentLayouts).reduce((acc, id) => {
+          return {
+            ...acc,
+            ...(temporaryLayouts[id] && { [id]: temporaryLayouts[id] }),
+          };
+        }, {});
+
+        const mergedLayouts = { ...componentLayouts, ...filteredTemporaryLayouts };
+
+        // Calculate the maximum height of the container
+        const currentMax = Object.values(mergedLayouts).reduce((max, layout) => {
+          if (!layout) {
+            return max;
+          }
+          const sum = layout.top + layout.height;
+          return Math.max(max, sum);
+        }, 300);
+
+        let extraHeight = 0;
+
+        if (componentType === 'Container') {
+          const { properties = {}, styles = {} } = getResolvedComponent(modifiedComponentId) || {};
+          const { showHeader } = properties;
+          const { headerHeight } = styles;
+          if (showHeader && isProperNumber(headerHeight)) {
+            extraHeight += headerHeight;
+          }
+        } else if (componentType === 'Form') {
+          const { properties = {}, styles = {} } = getResolvedComponent(modifiedComponentId) || {};
+          const { showHeader, showFooter, headerHeight, footerHeight } = properties;
+          if (showHeader && isProperNumber(headerHeight)) {
+            extraHeight += headerHeight;
+          }
+          if (showFooter && isProperNumber(footerHeight)) {
+            extraHeight += footerHeight;
+          }
+        } else if (componentType === 'Tabs') {
+          extraHeight = 20;
+        }
+        maxHeight = currentMax + 50 + extraHeight;
+      }
+
+      const boxList = Object.keys(currentPageComponents)
+        .map((key) => {
+          const widget = currentPageComponents[key];
+          return {
+            id: key,
+            ...widget,
+            height: widget?.layouts?.[currentLayout]?.height,
+            left: widget?.layouts?.[currentLayout]?.left,
+            top: widget?.layouts?.[currentLayout]?.top,
+            width: widget?.layouts?.[currentLayout]?.width,
+            parent: widget?.component?.parent,
+            component: widget?.component,
+          };
+        })
+        .filter((box) =>
+          getResolvedValue(
+            box?.component?.definition?.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value
+          )
+        );
+
+      const changedComponent = boxList.find((box) => box.id === componentId);
+      if (!changedComponent) return;
+
+      const componentElement = document.querySelector(`.ele-${componentId}`);
+      if (!componentElement) return;
+
+      // Get the actual new height from the DOM
+      const newHeight = shouldReset ? 0 : isContainer ? maxHeight : componentElement.offsetHeight;
+      const oldHeight = temporaryLayouts?.[componentId]?.height ?? changedComponent.layouts[currentLayout].height;
+      const dynamicHeightDifference = newHeight - oldHeight;
+
+      if (dynamicHeightDifference === 0 && !isContainer) return;
+
+      // Update the changed component's height in layouts
+      const updatedLayouts = {
+        [componentId]: {
+          ...changedComponent.layouts[currentLayout],
+          ...temporaryLayouts?.[componentId],
+          height: newHeight,
+        },
+      };
+
+      // Calculate the new top, bottom, left, right of the changed component
+      const changedCompLeft = changedComponent.layouts[currentLayout].left;
+      const changedCompWidth = changedComponent.layouts[currentLayout].width;
+      const changedCompRight = changedCompLeft + changedCompWidth;
+      const changedCompTop = temporaryLayouts?.[componentId]?.top ?? changedComponent.layouts[currentLayout].top;
+      const changedCompBottom = changedCompTop + newHeight;
+
+      //Fetch all the components that are below the changed component
+      const componentsToAdjust = boxList.filter((box) => {
+        if (box.id === componentId) return false;
+        const sameParent = box.component?.parent === changedComponent.component?.parent;
+        const isBelow =
+          (temporaryLayouts?.[box.id]?.top ?? box.layouts[currentLayout].top) + box.layouts[currentLayout].height >=
+          changedCompTop;
+        return sameParent && isBelow;
+      });
+
+      let realDiff = 0;
+      let minimumDist = Infinity;
+
+      const isHorizontallyOverlapping = (element1Left, element1Right, element2Left, element2Right) => {
+        return (
+          (element1Left <= element2Left && element1Right >= element2Right) || // Completely contains
+          (element1Left >= element2Left && element1Right <= element2Right) || // Completely contained
+          (element1Left <= element2Left && element1Right >= element2Left) || // Left edge overlaps
+          (element1Left <= element2Right && element1Right >= element2Right) // Right edge overlaps
+        );
+      };
+
+      //Find the distance by which to move the components up or down
+      for (let component of componentsToAdjust) {
+        const compLeft = component.layouts[currentLayout].left;
+        const compWidth = component.layouts[currentLayout].width;
+        const compRight = compLeft + compWidth;
+        const hasHorizontalOverlap = isHorizontallyOverlapping(compLeft, compRight, changedCompLeft, changedCompRight);
+        const currentDist =
+          (temporaryLayouts?.[component.id]?.top ?? component.layouts[currentLayout].top) - changedCompTop;
+
+        const isInitialTopAboveChangedBottom =
+          (temporaryLayouts?.[component.id]?.top ?? component.layouts[currentLayout].top) < changedCompTop + oldHeight;
+
+        if (hasHorizontalOverlap && currentDist < minimumDist && !isInitialTopAboveChangedBottom) {
+          const difference =
+            changedCompBottom - (temporaryLayouts?.[component.id]?.top ?? component.layouts[currentLayout].top);
+          realDiff = Math.ceil(difference / 10) * 10;
+          minimumDist = currentDist;
+        }
+      }
+
+      let currentLeft = changedCompLeft;
+      let currentRight = changedCompRight;
+      let currentBottom = changedCompBottom;
+
+      if (realDiff > 0) {
+        const componentsToAdjustSorted = componentsToAdjust.sort(
+          (a, b) =>
+            (temporaryLayouts?.[a.id]?.top ?? a.layouts[currentLayout].top) -
+            (temporaryLayouts?.[b.id]?.top ?? b.layouts[currentLayout].top)
+        );
+
+        for (let component of componentsToAdjustSorted) {
+          const element = document.querySelector(`.ele-${component.id}`);
+          if (!element) continue;
+          const compLeft = component.layouts[currentLayout].left;
+          const compWidth = component.layouts[currentLayout].width;
+          const compRight = compLeft + compWidth;
+          const hasHorizontalOverlap = isHorizontallyOverlapping(compLeft, compRight, currentLeft, currentRight);
+          if (hasHorizontalOverlap) {
+            const newTop = (temporaryLayouts?.[component.id]?.top ?? component.layouts[currentLayout].top) + realDiff;
+            const currentTransform = window.getComputedStyle(element).transform;
+
+            const matrix = new DOMMatrix(currentTransform);
+            const currentX = matrix.m41;
+            element.style.transform = `translate(${currentX}px, ${newTop}px)`;
+
+            updatedLayouts[component.id] = {
+              ...component.layouts[currentLayout],
+              ...temporaryLayouts?.[component.id],
+              top: newTop,
+            };
+            const newBottom =
+              newTop + (temporaryLayouts?.[component.id]?.height ?? component.layouts[currentLayout].height);
+            if (newBottom > currentBottom) {
+              currentBottom = newBottom;
+            }
+            if (compLeft < currentLeft) {
+              currentLeft = compLeft;
+            }
+            if (compRight > currentRight) {
+              currentRight = compRight;
+            }
+          }
+        }
+      } else if (dynamicHeightDifference < 0 && realDiff < 0) {
+        const componentsToAdjustSorted = componentsToAdjust.sort((a, b) => {
+          const aBottom =
+            (temporaryLayouts?.[a.id]?.top ?? a.layouts[currentLayout].top) +
+            (temporaryLayouts?.[a.id]?.height ?? a.layouts[currentLayout].height);
+          const bBottom =
+            (temporaryLayouts?.[b.id]?.top ?? b.layouts[currentLayout].top) +
+            (temporaryLayouts?.[b.id]?.height ?? b.layouts[currentLayout].height);
+          return aBottom - bBottom;
+        });
+        const tempTopMap = {};
+        componentsToAdjustSorted.forEach((component, index) => {
+          const element = document.querySelector(`.ele-${component.id}`);
+          if (!element) return;
+          const compLeft = component.layouts[currentLayout].left;
+          const compWidth = component.layouts[currentLayout].width;
+          const compRight = compLeft + compWidth;
+          const hasHorizontalOverlap = isHorizontallyOverlapping(compLeft, compRight, currentLeft, currentRight);
+
+          const componentInitialTop = component.layouts[currentLayout].top;
+          const componentInitialBottom = componentInitialTop + component.layouts[currentLayout].height;
+
+          if (hasHorizontalOverlap) {
+            let newTop =
+              (temporaryLayouts?.[component.id]?.top ?? component.layouts[currentLayout].top) + dynamicHeightDifference;
+
+            //Situations to accomodate the case when there is a component above the current component
+            if (index > 0) {
+              let prevIndex = index - 1;
+              while (prevIndex >= 0) {
+                const currentComponentLeft = component.layouts[currentLayout].left;
+                const currentComponentRight = currentComponentLeft + component.layouts[currentLayout].width;
+                const prevComponent = componentsToAdjustSorted[prevIndex];
+                const prevTop =
+                  tempTopMap?.[prevComponent.id] ??
+                  temporaryLayouts?.[prevComponent.id]?.top ??
+                  prevComponent.layouts[currentLayout].top;
+                const prevBottom =
+                  prevTop +
+                  (temporaryLayouts?.[prevComponent.id]?.height ?? prevComponent.layouts[currentLayout].height);
+                if (newTop >= prevBottom) {
+                  break;
+                } else {
+                  const prevCompLeft = prevComponent.layouts[currentLayout].left;
+                  const prevCompWidth = prevComponent.layouts[currentLayout].width;
+                  const prevCompRight = prevCompLeft + prevCompWidth;
+                  const prevCompInitialTop = prevComponent.layouts[currentLayout].top;
+                  const prevCompInitialBottom = prevCompInitialTop + prevComponent.layouts[currentLayout].height;
+
+                  const hasHorizontalOverlap = isHorizontallyOverlapping(
+                    prevCompLeft,
+                    prevCompRight,
+                    currentComponentLeft,
+                    currentComponentRight
+                  );
+
+                  const hasInitialVerticalOverlap =
+                    (componentInitialTop < prevCompInitialBottom && componentInitialBottom > prevCompInitialTop) || //  Bottom of the current component is above the top of the previous component
+                    (componentInitialTop > prevCompInitialTop && componentInitialBottom < prevCompInitialBottom) || // Current component is completely inside the previous component
+                    (componentInitialTop < prevCompInitialTop && componentInitialBottom > prevCompInitialTop) || // Top of the current component is below the bottom of the previous component
+                    (componentInitialTop < prevCompInitialBottom && componentInitialBottom > prevCompInitialBottom); // Bottom of the current component is below the bottom of the previous component
+
+                  if (hasHorizontalOverlap && !hasInitialVerticalOverlap) {
+                    newTop = prevBottom;
+                    break;
+                  }
+                }
+                prevIndex--;
+              }
+            }
+
+            if (component.layouts[currentLayout].top > newTop) {
+              newTop = component.layouts[currentLayout].top;
+            }
+            tempTopMap[component.id] = newTop;
+            const currentTransform = window.getComputedStyle(element).transform;
+            const matrix = new DOMMatrix(currentTransform);
+            const currentX = matrix.m41;
+            element.style.transform = `translate(${currentX}px, ${newTop}px)`;
+
+            updatedLayouts[component.id] = {
+              ...component.layouts[currentLayout],
+              ...temporaryLayouts?.[component.id],
+              top: newTop,
+            };
+
+            const newBottom =
+              newTop + (temporaryLayouts?.[component.id]?.height ?? component.layouts[currentLayout].height);
+            if (newBottom < currentBottom) {
+              currentBottom = newBottom;
+            }
+            if (compLeft < currentLeft) {
+              currentLeft = compLeft;
+            }
+            if (compRight > currentRight) {
+              currentRight = compRight;
+            }
+          }
+        });
+      }
+
+      if (shouldReset) {
+        setTemporaryLayouts(updatedLayouts);
+      } else {
+        if (isContainer) {
+          const element = document.querySelector(`.ele-${componentId}`);
+          element.style.height = `${newHeight}px`;
+        }
+        setTemporaryLayouts(updatedLayouts);
+      }
+
+      toggleCanvasUpdater();
+      if (changedComponent.component?.parent) {
+        adjustComponentPositions(changedComponent.component?.parent?.slice(0, 36), currentLayout, shouldReset, true);
+      }
+      return updatedLayouts;
+    } catch (error) {
+      console.error('Error adjusting component positions:', error);
+      return null;
+    }
+  },
+
   checkIfAnyWidgetVisibilityChanged: () => {
     // This is required to reload the grid if visibility is turned off using CSA
     const { getExposedValueOfComponent, getCurrentPageComponents } = get();
diff --git a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
index 8a3989a05b..7c9812df6e 100644
--- a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
@@ -8,9 +8,9 @@ const storedSelectedSidebarItem = !storedIsSidebarPinned
   : 'page';
 
 const initialState = {
-  isLeftSideBarPinned: storedIsSidebarPinned,
-  selectedSidebarItem: storedIsSidebarPinned ? storedSelectedSidebarItem : null,
-  isSidebarOpen: storedIsSidebarPinned,
+  isLeftSideBarPinned: false,
+  selectedSidebarItem: null,
+  isSidebarOpen: false,
   pathToBeInspected: null,
 };
 
diff --git a/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js b/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js
index 8c67ab9825..d895328fc6 100644
--- a/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/pageMenuSlice.js
@@ -74,6 +74,9 @@ export const createPageMenuSlice = (set, get) => {
   });
 
   const updatePageIcon = createPageUpdateCommand(['icon']);
+  const updatePageURL = createPageUpdateCommand(['url']);
+  const updatePageTarget = createPageUpdateCommand(['openIn']);
+  const updatePageAppId = createPageUpdateCommand(['appId']);
 
   const updatePageGroupName = createPageUpdateCommand(['name'], (state) => {});
 
@@ -97,19 +100,25 @@ export const createPageMenuSlice = (set, get) => {
     showSearch: false,
     pageSearchResults: null,
     isPageGroup: false,
-    pageSettingSelected: false,
     pageSettings: {},
     showPagePermissionModal: false,
+    permissionPage: null,
+    selectedUserGroups: [],
+    selectedUsers: [],
+    pagePermission: null,
+    newPagePopupConfig: {
+      show: false,
+      type: null,
+    },
+    navRef: null,
+    moreNavBtnRef: null,
+    linkRefs: null,
 
     toggleSearch: (show) =>
       set((state) => {
         state.showSearch = show;
         if (!show) state.pageSearchResults = null;
       }),
-    togglePageSettingMenu: (val) =>
-      set((state) => {
-        state.pageSettingSelected = typeof val === 'boolean' ? val : !state.pageSettingSelected;
-      }),
     openPageEditPopover: (page, ref) =>
       set((state) => {
         state.editingPage = page;
@@ -118,7 +127,13 @@ export const createPageMenuSlice = (set, get) => {
           state.showEditingPopover = true;
         }
       }),
-
+    setNewPagePopupConfig: (config) =>
+      set((state) => {
+        state.newPagePopupConfig = {
+          ...state.newPagePopupConfig,
+          ...config,
+        };
+      }),
     closePageEditPopover: () =>
       set((state) => {
         state.showEditingPopover = false;
@@ -163,6 +178,7 @@ export const createPageMenuSlice = (set, get) => {
     // page actions
     updatePageVisibility: (pageId, value) => updatePageVisibility(pageId, [value])(set, get),
     disableOrEnablePage: (pageId, value) => disableOrEnablePage(pageId, [value])(set, get),
+    updatePageAppId: (pageId, value) => updatePageAppId(pageId, [value])(set, get),
     updatePageName: (pageId, value) => {
       const page = get().modules.canvas.pages.find((p) => p.id === pageId);
       const pages = get().modules.canvas.pages;
@@ -182,6 +198,8 @@ export const createPageMenuSlice = (set, get) => {
       }
       updatePageName(pageId, [value])(set, get);
     },
+    updatePageURL: (pageId, value) => updatePageURL(pageId, [value])(set, get),
+    updatePageTarget: (pageId, value) => updatePageTarget(pageId, [value])(set, get),
     updatePageIcon: (pageId, value) => updatePageIcon(pageId, [value])(set, get),
     updatePageHandle: (pageId, value) => {
       const pageWithSameHandle = get().modules.canvas.pages.some((page) => page.handle === value);
@@ -203,7 +221,7 @@ export const createPageMenuSlice = (set, get) => {
       const newPages = data?.pages;
       const newEvents = data?.events;
       const pageAdded = newPages.find((p) => !pages.some((p2) => p2.id === p.id));
-      if (pageAdded) {
+      if (Object.keys(pageAdded).length) {
         const currentComponents = buildComponentMetaDefinition(JSON.parse(JSON.stringify(pageAdded?.components)));
 
         pageAdded.components = currentComponents;
@@ -214,6 +232,29 @@ export const createPageMenuSlice = (set, get) => {
         get().switchPage(pageAdded.id, pageAdded.handle);
       }
     },
+    cloneGroup: async (pageId) => {
+      const { getAppId, currentVersionId } = get();
+      const appId = getAppId('canvas');
+      const pages = get().modules.canvas.pages;
+      const data = await appVersionService.cloneGroup(appId, currentVersionId, pageId);
+      const newPages = data?.pages;
+      const newEvents = data?.events;
+      const pageIdsBefore = new Set(pages.map((p) => p.id));
+      const addedPages = newPages.filter((p) => !pageIdsBefore.has(p.id));
+
+      if (addedPages.length) {
+        const processedPages = addedPages.map((page) => {
+          const cloned = JSON.parse(JSON.stringify(page));
+          const currentComponents = cloned?.components ? buildComponentMetaDefinition(cloned.components) : undefined;
+          return { ...cloned, components: currentComponents };
+        });
+
+        set((state) => {
+          state.modules.canvas.pages.push(...processedPages);
+          state.eventsSlice.module.canvas.events = newEvents;
+        });
+      }
+    },
     deletePage: async (pageId) => {
       const { getAppId, getHomePageId, currentVersionId } = get();
       const appId = getAppId('canvas');
@@ -339,7 +380,7 @@ export const createPageMenuSlice = (set, get) => {
       await savePageChanges(appId, currentVersionId, currentPageId, diff, 'update', 'pages/reorder');
     },
 
-    addNewPage: async (name, handle, isPageGroup = false) => {
+    addNewPage: async (name, handle, isPageGroup = false, pageObj) => {
       const pages = get().modules.canvas.pages;
       const pageWithSameName = pages.some((page) => page.name === name && !page.isPageGroup);
       const pageGroupWithSameName = pages.some((page) => page.name === name && page.isPageGroup);
@@ -368,6 +409,7 @@ export const createPageMenuSlice = (set, get) => {
         handle: newHandle,
         components: {},
         index: pages.length + 1,
+        ...pageObj,
         isPageGroup,
         ...(isPageGroup
           ? {
@@ -377,11 +419,13 @@ export const createPageMenuSlice = (set, get) => {
       };
       set((state) => {
         state.modules.canvas.pages.push(pageObject);
+        state.editingPage = pageObject;
       });
       const { getAppId, currentVersionId } = get();
       const appId = getAppId('canvas');
       await savePageChanges(appId, currentVersionId, '', pageObject, 'create', 'pages');
-      if (!isPageGroup) get().switchPage(newPageId, newHandle);
+      if (!isPageGroup && pageObj?.type === 'default') get().switchPage(newPageId, newHandle);
+      return pageObject;
     },
 
     handleSearch: (value) => {
diff --git a/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js b/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js
index 3b6877b726..f5a3448549 100644
--- a/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/resolvedSlice.js
@@ -442,6 +442,9 @@ export const createResolvedSlice = (set, get) => ({
       return {};
     }
   },
+  getExposedValueOfQuery: (queryId, moduleId = 'canvas') => {
+    return get().resolvedStore.modules[moduleId].exposedValues.queries[queryId] || {};
+  },
   getAllExposedValues: (moduleId = 'canvas') => {
     return get().resolvedStore.modules[moduleId].exposedValues;
   },
@@ -471,11 +474,11 @@ export const createResolvedSlice = (set, get) => ({
     const canvasBgColor = get().globalSettings.backgroundFxQuery
       ? get().resolvedStore.modules[moduleId].others.canvasBackgroundColor || globalSettingsBackgroundColor
       : globalSettingsBackgroundColor;
-    const canvasBackgroundColor = canvasBgColor ? canvasBgColor : '#edeff5';
+    const canvasBackgroundColor = canvasBgColor ? canvasBgColor : 'var(--cc-appBackground-surface)';
     if (['#2f3c4c', '#edeff5'].includes(canvasBackgroundColor)) {
       return darkMode ? '#2f3c4c' : '#edeff5';
     }
-    return canvasBgColor;
+    return canvasBackgroundColor;
   },
 
   getSecrets: (moduleId = 'canvas') => {
diff --git a/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js b/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js
index ed66fe1f82..027c29ca70 100644
--- a/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/rightSideBarSlice.js
@@ -1,10 +1,15 @@
 import { RIGHT_SIDE_BAR_TAB } from '@/AppBuilder/RightSideBar/rightSidebarConstants';
 
 const initialState = {
-  activeRightSideBarTab: RIGHT_SIDE_BAR_TAB.COMPONENTS,
+  activeRightSideBarTab: null,
+  isRightSidebarOpen: false,
+  isRightSidebarPinned: false,
 };
 
 export const createRightSideBarSlice = (set) => ({
   ...initialState,
   setActiveRightSideBarTab: (tab) => set(() => ({ activeRightSideBarTab: tab }), false, 'setActiveRightSideBarTab'),
+  toggleRightSidebar: () => set((state) => ({ isRightSidebarOpen: !state.isRightSidebarOpen })),
+  setRightSidebarOpen: (open) => set(() => ({ isRightSidebarOpen: open })),
+  toggleRightSidebarPin: () => set((state) => ({ isRightSidebarPinned: !state.isRightSidebarPinned })),
 });
diff --git a/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js b/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js
index 901baed1f3..c6aecdfd2c 100644
--- a/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/undoRedoSlice.js
@@ -55,6 +55,8 @@ export const createUndoRedoSlice = (set, get) => {
       let updateParent = false;
       let componenetPropertiesToUpdate = {};
 
+      const hasMoreThanOnePatchWithPropertyUpdate = patches.filter((patch) => patch.op === 'propertyUpdate').length > 1;
+
       patches?.map((patch) => {
         const { op, componentId, value } = patch;
         if (op === 'delete') {
@@ -76,13 +78,27 @@ export const createUndoRedoSlice = (set, get) => {
         }
 
         if (op === 'propertyUpdate') {
-          componenetPropertiesToUpdate = {
-            componentId,
-            property: value.property,
-            value: value.value,
-            paramType: value.paramType,
-            attr: value.attr,
-          };
+          if (hasMoreThanOnePatchWithPropertyUpdate)
+            get().setComponentProperty(
+              componentId,
+              value.property,
+              value.value,
+              value.paramType,
+              value.attr,
+              undefined,
+              undefined,
+              {
+                skipUndoRedo: true,
+              }
+            );
+          else
+            componenetPropertiesToUpdate = {
+              componentId,
+              property: value.property,
+              value: value.value,
+              paramType: value.paramType,
+              attr: value.attr,
+            };
         }
       });
 
diff --git a/frontend/src/AppBuilder/_stores/store.js b/frontend/src/AppBuilder/_stores/store.js
index f7b83e9704..02d97051e6 100644
--- a/frontend/src/AppBuilder/_stores/store.js
+++ b/frontend/src/AppBuilder/_stores/store.js
@@ -28,6 +28,7 @@ import { createDebuggerSlice } from './slices/debuggerSlice';
 import { createGitSyncSlice } from './slices/gitSyncSlice';
 import { createAiSlice } from './slices/aiSlice';
 import { createWhiteLabellingSlice } from './slices/whiteLabellingSlice';
+import { createFormComponentSlice } from './slices/formComponentSlice';
 import { createInspectorSlice } from './slices/inspectorSlice';
 import { createModuleSlice } from './slices/moduleSlice';
 
@@ -62,6 +63,7 @@ export default create(
       ...createGitSyncSlice(...state),
       ...createAiSlice(...state),
       ...createWhiteLabellingSlice(...state),
+      ...createFormComponentSlice(...state),
       ...createInspectorSlice(...state),
       ...createModuleSlice(...state),
     })),
diff --git a/frontend/src/AppBuilder/_stores/utils.js b/frontend/src/AppBuilder/_stores/utils.js
index 2589c341d6..40602b65be 100644
--- a/frontend/src/AppBuilder/_stores/utils.js
+++ b/frontend/src/AppBuilder/_stores/utils.js
@@ -683,6 +683,15 @@ export function convertAllKeysToSnakeCase(o) {
 //   return { suggestionList, hintsMap, resolvedRefs };
 // }
 
+export const isProperNumber = (str) => {
+  try {
+    const num = Number(str);
+    return !isNaN(num) && isFinite(num);
+  } catch (e) {
+    return false;
+  }
+};
+
 export const hasArrayNotation = (property) => {
   // Regular expression to match array notation pattern
   const arrayPattern = /\[\d+\]/;
@@ -718,9 +727,84 @@ export const baseTheme = {
   definition: {
     brand: {
       colors: {
-        primary: { light: '#4368E3', dark: '#4A6DD9' },
-        secondary: { light: '#6A727C', dark: '#CFD3D8' },
-        tertiary: { light: '#1E823B', dark: '#318344' },
+        primary: {
+          light: '#4368E3',
+          dark: '#4A6DD9',
+        },
+        secondary: {
+          light: '#6A727C',
+          dark: '#CFD3D8',
+        },
+        tertiary: {
+          light: '#1E823B',
+          dark: '#318344',
+        },
+      },
+    },
+    text: {
+      font: 'IBM Plex Sans',
+      colors: {
+        primary: {
+          light: '#1B1F24',
+          dark: '#CFD3D8',
+        },
+        placeholder: {
+          light: '#6A727C',
+          dark: '#858C94',
+        },
+      },
+    },
+    border: {
+      radius: {
+        default: 6,
+        small: 0,
+        large: 0,
+      },
+      colors: {
+        default: {
+          light: '#CCD1D5',
+          dark: '#3C434B',
+        },
+        weak: {
+          light: '#E4E7EB',
+          dark: '#EEF0F1',
+        }
+      },
+    },
+    systemStatus: {
+      colors: {
+        success: {
+          light: '#1E823B',
+          dark: '#318344',
+        },
+        error: {
+          light: '#D72D39',
+          dark: '#D03F43',
+        },
+        warning: {
+          light: '#BF4F03',
+          dark: '#BA5722',
+        },
+      },
+    },
+    surface: {
+      colors: {
+        appBackground: {
+          light: '#F6F6F6',
+          dark: '#121518',
+        },
+        surface1: {
+          light: '#FFFFFF',
+          dark: '#1E2226',
+        },
+        surface2: {
+          light: '#F6F8FA',
+          dark: '#2B3036',
+        },
+        surface3: {
+          light: '#E4E7EB',
+          dark: '#3C434B',
+        },
       },
     },
   },
diff --git a/frontend/src/Editor/Components/Button.jsx b/frontend/src/Editor/Components/Button.jsx
index c0d4716edd..2d463f47e8 100644
--- a/frontend/src/Editor/Components/Button.jsx
+++ b/frontend/src/Editor/Components/Button.jsx
@@ -4,6 +4,8 @@ const tinycolor = require('tinycolor2');
 import * as Icons from '@tabler/icons-react';
 import Loader from '@/ToolJetUI/Loader/Loader';
 
+import { getModifiedColor } from './utils';
+
 export const Button = function Button(props) {
   const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable, setExposedVariables } = props;
   const {
@@ -60,14 +62,14 @@ export const Button = function Button(props) {
     borderColor === '#4368E3' ? (type === 'primary' ? '#4368E3' : 'var(--borders-strong)') : borderColor;
 
   const computedTextColor =
-    '#FFFFFF' === textColor ? (type === 'primary' ? 'var(--text-on-solid)' : 'var(--text-primary)') : textColor;
+    '#FFFFFF' === textColor ? (type === 'primary' ? 'var(--text-on-solid)' : 'var(--cc-primary-text)') : textColor;
   const computedLoaderColor =
-    '#FFFFFF' === loaderColor ? (type === 'primary' ? loaderColor : 'var(--primary-brand)') : loaderColor;
+    '#FFFFFF' === loaderColor ? (type === 'primary' ? loaderColor : 'var(--cc-primary-brand)') : loaderColor;
 
   const computedBgColor =
     '#4368E3' === backgroundColor
       ? type === 'primary'
-        ? 'var(--primary-brand)'
+        ? 'var(--cc-primary-brand)'
         : 'transparent'
       : type === 'primary'
       ? backgroundColor
@@ -79,8 +81,8 @@ export const Button = function Button(props) {
     width: '100%',
     borderRadius: `${borderRadius}px`,
     height: height == 36 ? (padding == 'default' ? '36px' : '40px') : padding == 'default' ? height : height + 4,
-    '--tblr-btn-color-darker': tinycolor(computedBgColor).darken(8).toString(),
-    '--tblr-btn-color-clicked': tinycolor(computedBgColor).darken(15).toString(),
+    '--tblr-btn-color-darker': getModifiedColor(computedBgColor, 'hover'),
+    '--tblr-btn-color-clicked': getModifiedColor(computedBgColor, 'active'),
     '--loader-color': tinycolor(computedLoaderColor ?? 'var(--icons-on-solid)').toString(),
     borderColor: computedBorderColor,
     boxShadow: type == 'primary' && boxShadow,
@@ -164,11 +166,6 @@ export const Button = function Button(props) {
     }
   }, [hovered]);
 
-  const hasCustomBackground = computedBgColor?.charAt() === '#';
-  if (hasCustomBackground) {
-    computedStyles['--tblr-btn-color-darker'] = tinycolor(computedBgColor).darken(8).toString();
-    computedStyles['--tblr-btn-color-clicked'] = tinycolor(computedBgColor).darken(15).toString();
-  }
   const handleClick = () => {
     if (!disable && !loading) {
       const event1 = new CustomEvent('submitForm', { detail: { buttonComponentId: id } });
@@ -186,11 +183,7 @@ export const Button = function Button(props) {
       disabled={disable || loading}
     >
       <button
-        className={cx('overflow-hidden', {
-          'btn-custom': hasCustomBackground,
-          'jet-button ': type == 'primary',
-          'jet-outline-button ': type == 'outline',
-        })}
+        className={cx('overflow-hidden jet-btn')}
         style={computedStyles}
         onClick={handleClick}
         data-cy={dataCy}
diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index d9080679b4..54a6114674 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -6,6 +6,9 @@ import { isStringValidJson } from '@/_helpers/utils';
 const Plot = createPlotlyComponent(Plotly);
 import { isEqual } from 'lodash';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { getCssVarValue } from './utils';
 
 var tinycolor = require('tinycolor2');
 
@@ -22,6 +25,8 @@ export const Chart = function Chart({
 }) {
   const isInitialRender = useRef(true);
   const [loadingState, setLoadingState] = useState(false);
+  const themeChanged = useStore((state) => state.themeChanged);
+
 
   const getColor = (color) => {
     if (tinycolor(color).getBrightness() > 128) return '#000';
@@ -32,6 +37,13 @@ export const Chart = function Chart({
   const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson, showAxes, barmode } =
     properties;
 
+  const modifiedBackgroundColor = getCssVarValue(document.documentElement, backgroundColor);
+  const modifiedMarkerColor = getCssVarValue(document.documentElement, markerColor);
+  const modifiedGridLines = getCssVarValue(document.documentElement, 'var(--cc-weak-border)');
+  const modifiedTextColor = getCssVarValue(document.documentElement, 'var(--cc-primary-text)');
+  const modifiedAxisColor = getCssVarValue(document.documentElement, 'var(--cc-default-border)');
+  console.log('modifiedAxisColor', modifiedAxisColor);
+
   useEffect(() => {
     const loadingStateProperty = properties.loadingState;
     if (loadingStateProperty != undefined) {
@@ -65,11 +77,11 @@ export const Chart = function Chart({
 
   const chartLayout = isDescriptionJson ? JSON.parse(jsonData).layout ?? {} : {};
 
-  const updatedBgColor = ['#fff', '#ffffff'].includes(backgroundColor)
+  const updatedBgColor = ['#fff', '#ffffff'].includes(modifiedBackgroundColor)
     ? darkMode
       ? '#1f2936'
       : '#fff'
-    : backgroundColor;
+    : modifiedBackgroundColor;
   const fontColor = getColor(updatedBgColor);
 
   const chartTitle = plotFromJson ? chartLayout?.title ?? title : title;
@@ -100,7 +112,7 @@ export const Chart = function Chart({
     title: {
       text: chartTitle,
       font: {
-        color: fontColor,
+        color: modifiedTextColor,
       },
     },
     showlegend: chartLayout.showlegend ?? false,
@@ -117,6 +129,16 @@ export const Chart = function Chart({
       color: fontColor,
       automargin: true,
       visible: showAxes,
+      gridcolor: modifiedGridLines,
+      linecolor: modifiedAxisColor,
+      title: {
+        font: {
+          color: modifiedTextColor,
+        },
+      },
+      tickfont: {
+        color: modifiedTextColor,
+      },
       ...chartLayout.xaxis,
     },
     yaxis: {
@@ -125,6 +147,16 @@ export const Chart = function Chart({
       color: fontColor,
       automargin: true,
       visible: showAxes,
+      gridcolor: modifiedGridLines,
+      linecolor: modifiedAxisColor,
+      title: {
+        font: {
+          color: modifiedTextColor,
+        },
+      },
+      tickfont: {
+        color: modifiedTextColor,
+      },
       ...chartLayout.yaxis,
     },
     margin: {
@@ -168,7 +200,7 @@ export const Chart = function Chart({
           type: chartType || 'line',
           x: rawData.map((item) => item['x']),
           y: rawData.map((item) => item['y']),
-          marker: { color: markerColor },
+          marker: { color: modifiedMarkerColor },
         },
       ];
     }
@@ -179,7 +211,7 @@ export const Chart = function Chart({
   const memoizedChartData = useMemo(
     () => computeChartData(data, dataString),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [data, dataString, chartType, markerColor]
+    [data, dataString, chartType, modifiedMarkerColor]
   );
 
   const handleClick = useCallback((data) => {
diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx
index f64986c6a4..58ea858542 100644
--- a/frontend/src/Editor/Components/Checkbox.jsx
+++ b/frontend/src/Editor/Components/Checkbox.jsx
@@ -248,7 +248,9 @@ export const Checkbox = ({
               width={width - 20}
             >
               {label}
-              {isMandatory && !checked && <span style={{ color: '#DB4324', marginLeft: '1px' }}>{'*'}</span>}
+              {isMandatory && !checked && (
+                <span style={{ color: 'var(--cc-error-systemStatus)', marginLeft: '1px' }}>{'*'}</span>
+              )}
             </OverflowTooltip>
           </>
         )}
@@ -257,7 +259,7 @@ export const Checkbox = ({
         <div
           data-cy={`${String(componentName).toLowerCase()}-invalid-feedback`}
           style={{
-            color: 'var(--status-error-strong)',
+            color: 'var(--cc-error-systemStatus)',
             fontSize: '11px',
             fontWeight: '400',
             lineHeight: '16px',
diff --git a/frontend/src/Editor/Components/CodeEditor.jsx b/frontend/src/Editor/Components/CodeEditor.jsx
index 8a3490c1c8..5ff98862f6 100644
--- a/frontend/src/Editor/Components/CodeEditor.jsx
+++ b/frontend/src/Editor/Components/CodeEditor.jsx
@@ -8,6 +8,7 @@ import { python } from '@codemirror/lang-python';
 import { sql } from '@codemirror/lang-sql';
 import { sass } from '@codemirror/lang-sass';
 import { debounce } from 'lodash';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 
 const langSupport = Object.freeze({
   javascript: javascript(),
@@ -17,18 +18,40 @@ const langSupport = Object.freeze({
   css: sass(),
 });
 
-export const CodeEditor = ({ id, height, darkMode, properties, styles, setExposedVariable, dataCy }) => {
-  const { enableLineNumber, mode, placeholder } = properties;
+export const CodeEditor = ({
+  id,
+  height,
+  darkMode,
+  properties,
+  styles,
+  setExposedVariable,
+  dataCy,
+  adjustComponentPositions,
+  currentLayout,
+  width,
+}) => {
+  const { enableLineNumber, mode, placeholder, dynamicHeight } = properties;
   const { visibility, disabledState } = styles;
+  const [forceDynamicHeightUpdate, setForceDynamicHeightUpdate] = useState(false);
   const [value, setValue] = useState('');
 
+  useDynamicHeight({
+    dynamicHeight,
+    id,
+    height,
+    value: forceDynamicHeightUpdate,
+    adjustComponentPositions,
+    currentLayout,
+    width,
+  });
+
   const codeChanged = debounce((code) => {
     setExposedVariable('value', code);
     setValue(code);
   }, 500);
 
   const editorStyles = {
-    height: height,
+    height: dynamicHeight ? 'auto' : height,
     display: !visibility ? 'none' : 'block',
   };
 
@@ -48,8 +71,8 @@ export const CodeEditor = ({ id, height, darkMode, properties, styles, setExpose
   const langExtention = langSupport?.[mode?.toLowerCase()];
 
   const editorHeight = React.useMemo(() => {
-    return height || 'auto';
-  }, [height]);
+    return dynamicHeight ? 'auto' : height || 'auto';
+  }, [height, dynamicHeight]);
 
   useEffect(() => {
     const _setValue = (value) => {
@@ -66,10 +89,11 @@ export const CodeEditor = ({ id, height, darkMode, properties, styles, setExpose
       <div
         className={`code-hinter codehinter-default-input code-editor-widget`}
         style={{
-          height: height || 'auto',
-          minHeight: height - 1,
-          // maxHeight: '320px',
-          overflow: 'auto',
+          height: dynamicHeight ? 'auto' : height || 'auto',
+          ...(dynamicHeight
+            ? { minHeight: '0', maxHeight: '100%' }
+            : { minHeight: height - 1, maxHeight: '320px', overflow: 'auto' }),
+
           borderRadius: `${styles.borderRadius}px`,
           boxShadow: styles.boxShadow,
         }}
@@ -78,17 +102,20 @@ export const CodeEditor = ({ id, height, darkMode, properties, styles, setExpose
           value={value}
           placeholder={placeholder}
           height={'100%'}
-          minHeight={editorHeight}
-          maxHeight="100%"
+          minHeight={dynamicHeight ? 'none' : editorHeight}
+          maxHeight={dynamicHeight ? 'none' : editorHeight}
           width="100%"
           theme={theme}
-          extensions={langExtention ? [langExtention] : undefined}
-          onChange={codeChanged}
+          extensions={[langExtention]}
+          onChange={() => {
+            codeChanged();
+            setForceDynamicHeightUpdate(!forceDynamicHeightUpdate);
+          }}
           basicSetup={setupConfig}
           style={{
-            overflowY: 'auto',
+            ...(dynamicHeight ? {} : { overflowY: 'auto' }),
           }}
-          className={`codehinter-multi-line-input`}
+          className={`codehinter-multi-line-input code-editor-component`}
           indentWithTab={true}
         />
       </div>
diff --git a/frontend/src/Editor/Components/ColorPicker.jsx b/frontend/src/Editor/Components/ColorPicker.jsx
index fb5be51f5e..56119df8fd 100644
--- a/frontend/src/Editor/Components/ColorPicker.jsx
+++ b/frontend/src/Editor/Components/ColorPicker.jsx
@@ -155,14 +155,12 @@ export const ColorPicker = function ({
     positin: 'relative',
   };
   const baseStyle = visibility
-    ? darkMode
-      ? { ...style, color: '#ffffff', backgroundColor: '#1F2936' }
-      : { ...style, color: 'inherit' }
+    ? { ...style, color: 'var(--cc-primary-text)', backgroundColor: 'var(--cc-surface1-surface)' }
     : { display: 'none' };
 
   return (
     <div className="h-100">
-      <div style={{ baseStyle, boxShadow, height: '100%' }} className="form-control" data-cy={dataCy}>
+      <div style={{ ...baseStyle, boxShadow, height: '100%' }} className="form-control" data-cy={dataCy}>
         <div
           className="d-flex h-100 justify-content-between align-items-center"
           onClick={() => setShowColorPicker(true)}
diff --git a/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx b/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx
index 4d4b7a2e48..296c8ffebe 100644
--- a/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx
+++ b/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx
@@ -12,6 +12,7 @@ export const CustomComponent = (props) => {
   const { code, data } = properties;
   const [customProps, setCustomProps] = useState(data);
   const iFrameRef = useRef(null);
+  const messageEventListenerRef = useRef(null);
 
   const customPropRef = useRef(data);
 
@@ -35,7 +36,7 @@ export const CustomComponent = (props) => {
   }, [code]);
 
   useEffect(() => {
-    window.addEventListener('message', (e) => {
+    messageEventListenerRef.current = (e) => {
       try {
         if (e.data.from === 'customComponent' && e.data.componentId === id) {
           if (e.data.message === 'UPDATE_DATA') {
@@ -53,9 +54,33 @@ export const CustomComponent = (props) => {
       } catch (err) {
         console.log(err);
       }
-    });
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    window.addEventListener('message', messageEventListenerRef.current);
+
+    // Cleanup function to remove event listener and cleanup iframe
+    return () => {
+      if (messageEventListenerRef.current) {
+        window.removeEventListener('message', messageEventListenerRef.current);
+        messageEventListenerRef.current = null;
+      }
+
+      // Send cleanup message to iframe
+      if (iFrameRef.current?.contentWindow) {
+        try {
+          iFrameRef.current.contentWindow.postMessage(
+            {
+              message: 'CLEANUP',
+              componentId: id,
+            },
+            '*'
+          );
+        } catch (err) {
+          console.log('Error during iframe cleanup:', err);
+        }
+      }
+    };
+  }, [id, onEvent]);
 
   const sendMessageToIframe = ({ message }) => {
     if (!iFrameRef.current) return;
diff --git a/frontend/src/Editor/Components/CustomComponent/iframe.html b/frontend/src/Editor/Components/CustomComponent/iframe.html
index 8fde6928b5..5b1f1fd7f1 100644
--- a/frontend/src/Editor/Components/CustomComponent/iframe.html
+++ b/frontend/src/Editor/Components/CustomComponent/iframe.html
@@ -8,6 +8,8 @@
         <script data-required="true">
             let callbackFn = () => {};
             let props = {};
+            let messageEventListener = null;
+            let loadEventListener = null;
             window.Tooljet = {
                 componentId: window.frameElement.getAttribute('data-id'),
                 subscribe: fn => {
@@ -28,6 +30,16 @@
                     updatedObj: obj,
                     componentId: window.Tooljet.componentId
                 }, "*"),
+                cleanup: () => {
+                    if (messageEventListener) {
+                        window.removeEventListener('message', messageEventListener);
+                        messageEventListener = null;
+                    }
+                    if (loadEventListener) {
+                        window.removeEventListener('load', loadEventListener);
+                        loadEventListener = null;
+                    }
+                },
                 init: () => {
                     window.parent.postMessage({
                         from: 'customComponent',
@@ -35,7 +47,7 @@
                         componentId: window.Tooljet.componentId,
                     }, "*");
             
-                    window.addEventListener('message', (e) => {
+                    messageEventListener = (e) => {
                         if(e.data.message === 'CODE_UPDATED' || e.data.message === 'INIT_RESPONSE'){
                             const tags = document.getElementsByTagName("script");
                             for(let i = 0; i < tags.length; i++){
@@ -56,13 +68,25 @@
                         } else if(e.data.message === 'DATA_UPDATED'){
                             props = e.data.data;
                             callbackFn(e.data.data)
+                        } else if(e.data.message === 'CLEANUP' && e.data.componentId === window.Tooljet.componentId) {
+                            // Cleanup React components
+                            const root = document.body;
+                            if (root._reactRootContainer) {
+                                ReactDOM.unmountComponentAtNode(root);
+                            }
+                            // Call the cleanup function
+                            window.Tooljet.cleanup();
                         }
-                    });
+                    };
+                    window.addEventListener('message', messageEventListener);
                 }
             }
-            window.addEventListener('load', function() {
+
+            loadEventListener = function() {
                 window.Tooljet.init();
-            })
+            };
+            
+            window.addEventListener('load', loadEventListener);
         </script>
         <script type="text/babel" data-required="true"> window.Tooljet.connectComponent = WrappedComponent => {
             class ConnectedComponent extends React.Component {
diff --git a/frontend/src/Editor/Components/Datepicker.jsx b/frontend/src/Editor/Components/Datepicker.jsx
index 8524564a9f..862ee5389a 100644
--- a/frontend/src/Editor/Components/Datepicker.jsx
+++ b/frontend/src/Editor/Components/Datepicker.jsx
@@ -97,7 +97,7 @@ export const Datepicker = function Datepicker({
   return (
     <div
       data-disabled={disabledState}
-      className={`datepicker-widget ${darkMode && 'theme-dark'}`}
+      className={`legacy-datepicker-widget datepicker-widget ${darkMode && 'theme-dark'}`}
       data-cy={dataCy}
       style={{
         height,
diff --git a/frontend/src/Editor/Components/DraftEditor.jsx b/frontend/src/Editor/Components/DraftEditor.jsx
index 6734f3c865..157b2cb2ca 100644
--- a/frontend/src/Editor/Components/DraftEditor.jsx
+++ b/frontend/src/Editor/Components/DraftEditor.jsx
@@ -88,7 +88,7 @@ const BlockStyleControls = (props) => {
         <button className="dropdownbtn px-2" type="button">
           Heading
         </button>
-        <div className="dropdown-content bg-white">
+        <div className="dropdown-content" style={{ backgroundColor: 'var(--cc-surface1-surface)' }}>
           {HEADINGS.map((type) => (
             <a className="dropitem m-0 p-0" key={type.label}>
               <StyleButton
@@ -285,7 +285,12 @@ class DraftEditor extends React.Component {
           <BlockStyleControls editorState={editorState} onToggle={this.toggleBlockType} />
           <InlineStyleControls editorState={editorState} onToggle={this.toggleInlineStyle} />
         </div>
-        <div className={className} ref={this.editorContainerRef} onClick={this.focus}>
+        <div
+          className={className}
+          ref={this.editorContainerRef}
+          style={{ height: this.props.dynamicHeight ? 'auto' : `${this.props.height - 60}px` }}
+          onClick={this.focus}
+        >
           <Editor
             blockStyleFn={getBlockStyle}
             customStyleMap={styleMap}
diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index b98be4e57d..282fefca3f 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -4,6 +4,8 @@ import Select, { components } from 'react-select';
 import TriangleDownArrow from '@/_ui/Icon/bulkIcons/TriangleDownArrow';
 import TriangleUpArrow from '@/_ui/Icon/bulkIcons/TriangleUpArrow';
 
+import { getModifiedColor } from './utils';
+
 export const DropDown = function DropDown({
   height,
   validate,
@@ -194,17 +196,22 @@ export const DropDown = function DropDown({
   const customStyles = {
     control: (provided, state) => ({
       ...provided,
-      background: darkMode ? 'rgb(31,40,55)' : 'white',
+      background: 'var(--cc-surface1-surface)',
       minHeight: height,
       height: height,
       boxShadow: state.isFocused ? boxShadow : boxShadow,
       borderRadius: Number.parseFloat(borderRadius),
+      ':focus-within': {
+        borderColor: 'var(--cc-primary-brand)',
+      },
+      border: '1px solid var(--cc-default-border)',
     }),
     valueContainer: (provided, _state) => ({
       ...provided,
       height: height,
       padding: '0 6px',
       justifyContent,
+      color: 'var(--cc-primary-text)',
     }),
 
     singleValue: (provided, _state) => ({
@@ -225,21 +232,37 @@ export const DropDown = function DropDown({
       height: height,
     }),
     option: (provided, state) => {
+      const hoverBgColorValue = getModifiedColor('var(--cc-primary-brand)', 'hover');
+
       const styles = darkMode
         ? {
-            color: state.isDisabled ? '#88909698' : 'white',
-            backgroundColor: state.value === currentValue ? '#3650AF' : 'rgb(31,40,55)',
+            color: 'white',
+            backgroundColor: state.value === currentValue ? 'var(--cc-primary-brand)' : 'var(--cc-surface1-surface)',
             ':hover': {
-              backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#1F2E64' : '#323C4B',
+              backgroundColor: state.isDisabled
+                ? 'transparent'
+                : state.value === currentValue
+                ? hoverBgColorValue
+                : getModifiedColor(
+                    state.value === currentValue ? 'var(--cc-primary-brand)' : 'var(--cc-surface1-surface)',
+                    'hover'
+                  ),
             },
             maxWidth: 'auto',
             minWidth: 'max-content',
           }
         : {
-            backgroundColor: state.value === currentValue ? 'var(--primary-brand)' : 'white',
-            color: state.isDisabled ? '#88909694' : state.value === currentValue ? 'white' : 'black',
+            backgroundColor: state.value === currentValue ? 'var(--cc-primary-brand)' : 'var(--cc-surface1-surface)',
+            color: state.value === currentValue ? 'white' : 'var(--cc-primary-text)',
             ':hover': {
-              backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#3650AF' : '#d8dce9',
+              backgroundColor: state.isDisabled
+                ? 'transparent'
+                : state.value === currentValue
+                ? hoverBgColorValue
+                : getModifiedColor(
+                    state.value === currentValue ? 'var(--cc-primary-brand)' : 'var(--cc-surface1-surface)',
+                    'hover'
+                  ),
             },
             maxWidth: 'auto',
             minWidth: 'max-content',
@@ -256,7 +279,7 @@ export const DropDown = function DropDown({
     },
     menu: (provided, _state) => ({
       ...provided,
-      backgroundColor: darkMode ? 'rgb(31,40,55)' : 'white',
+      backgroundColor: 'var(--cc-surface1-surface)',
     }),
   };
 
@@ -272,7 +295,10 @@ export const DropDown = function DropDown({
         data-cy={dataCy}
       >
         <div className="col-auto my-auto">
-          <label style={{ marginRight: label !== '' ? '1rem' : '0.001rem' }} className="form-label py-0 my-0">
+          <label
+            style={{ marginRight: label !== '' ? '1rem' : '0.001rem', color: 'var(--cc-primary-text)' }}
+            className="form-label py-0 my-0"
+          >
             {label}
           </label>
         </div>
diff --git a/frontend/src/Editor/Components/DropdownV2/CustomOption.jsx b/frontend/src/Editor/Components/DropdownV2/CustomOption.jsx
index d3e85030d6..0c7b926c08 100644
--- a/frontend/src/Editor/Components/DropdownV2/CustomOption.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/CustomOption.jsx
@@ -20,10 +20,10 @@ const CustomOption = (props) => {
       <div className="cursor-pointer">
         {props.isSelected && (
           <span style={{ maxHeight: '20px', marginRight: '8px', marginLeft: '-28px' }}>
-            <CheckMark width={'20'} fill={'var(--primary-brand)'} />
+            <CheckMark width={'20'} fill={'var(--cc-primary-brand)'} />
           </span>
         )}
-        <span style={{ color: props.isDisabled ? '#889096' : 'unset', wordBreak: 'break-all' }}>
+        <span style={{ color: 'unset', wordBreak: 'break-all' }}>
           {highlightText(props.label?.toString(), props.selectProps.inputValue)}
         </span>
       </div>
diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
index 7bbf665839..f84dc3d4a8 100644
--- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
@@ -366,8 +366,8 @@ export const DropdownV2 = ({
         selectedTextColor !== '#1B1F24'
           ? selectedTextColor
           : isDropdownDisabled || isDropdownLoading
-            ? 'var(--text-disabled)'
-            : 'var(--text-primary)',
+          ? 'var(--text-disabled)'
+          : 'var(--text-primary)',
       maxWidth:
         ref?.current?.offsetWidth -
         (iconVisibility ? INDICATOR_CONTAINER_WIDTH + ICON_WIDTH : INDICATOR_CONTAINER_WIDTH),
@@ -403,13 +403,8 @@ export const DropdownV2 = ({
     }),
     option: (provided, _state) => ({
       ...provided,
-      backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--surfaces-surface-01)',
-      color:
-        selectedTextColor !== '#1B1F24'
-          ? selectedTextColor
-          : isDropdownDisabled || isDropdownLoading
-            ? 'var(--text-disabled)'
-            : 'var(--text-primary)',
+      backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--cc-surface1-surface)',
+      color: selectedTextColor !== '#1B1F24' ? selectedTextColor : 'var(--cc-primary-text)',
       borderRadius: _state.isFocused && '8px',
       padding: '8px 6px 8px 38px',
       '&:hover': {
@@ -428,7 +423,7 @@ export const DropdownV2 = ({
       flexDirection: 'column',
       gap: '4px !important',
       overflowY: 'auto',
-      backgroundColor: 'var(--surfaces-surface-01)',
+      backgroundColor: 'var(--cc-surface1-surface)',
     }),
     menu: (provided) => ({
       ...provided,
@@ -445,8 +440,8 @@ export const DropdownV2 = ({
         data-cy={`label-${String(componentName).toLowerCase()} `}
         className={cx('dropdown-widget', 'd-flex', {
           [alignment === 'top' &&
-            ((labelWidth != 0 && label?.length != 0) ||
-              (labelAutoWidth && labelWidth == 0 && label && label?.length != 0))
+          ((labelWidth != 0 && label?.length != 0) ||
+            (labelAutoWidth && labelWidth == 0 && label && label?.length != 0))
             ? 'flex-column'
             : 'align-items-center']: true,
           'flex-row-reverse': direction === 'right' && alignment === 'side',
diff --git a/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss b/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss
index 779f2c2420..b7b406e7b5 100644
--- a/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss
+++ b/frontend/src/Editor/Components/DropdownV2/dropdownV2.scss
@@ -2,6 +2,6 @@
     overflow-y: auto;
     position: relative;
     padding: 0 0 5px;
-    background-color: var(--surfaces-surface-01) !important;
+    background-color: var(--cc-surface1-surface) !important;
     border-radius: 0 0 8px 8px;
 }
\ No newline at end of file
diff --git a/frontend/src/Editor/Components/DropdownV2/utils.js b/frontend/src/Editor/Components/DropdownV2/utils.js
index 814b7b341a..4cdffe3889 100644
--- a/frontend/src/Editor/Components/DropdownV2/utils.js
+++ b/frontend/src/Editor/Components/DropdownV2/utils.js
@@ -4,7 +4,7 @@ export const getInputFocusedColor = ({ accentColor }) => {
   if (accentColor !== '#4368E3') {
     return accentColor;
   }
-  return 'var(--primary-accent-strong)';
+  return 'var(--cc-primary-brand)';
 };
 
 export const getInputBorderColor = ({
@@ -17,7 +17,7 @@ export const getInputBorderColor = ({
   userInteracted,
 }) => {
   if (userInteracted && !isValid) {
-    return 'var(--status-error-strong)';
+    return 'var(--cc-error-systemStatus)';
   }
 
   if (isFocused) {
@@ -28,27 +28,23 @@ export const getInputBorderColor = ({
     return fieldBorderColor;
   }
 
-  if (isLoading || isDisabled) {
-    return '1px solid var(--borders-disabled-on-white)';
-  }
-
-  return 'var(--borders-default)';
+  return 'var(--cc-default-border)';
 };
 
-export const getInputBackgroundColor = ({ fieldBackgroundColor, darkMode, isLoading, isDisabled }) => {
-  if (!['#ffffff', '#ffffffff', '#fff'].includes(fieldBackgroundColor)) {
+export const getInputBackgroundColor = ({ fieldBackgroundColor }) => {
+  if (!['#ffffff', '#ffffffff', '#fff', 'var(--cc-surface1-surface)'].includes(fieldBackgroundColor)) {
     return fieldBackgroundColor;
   }
 
-  if (isLoading || isDisabled) {
-    if (darkMode) {
-      return 'var(--surfaces-app-bg-default)';
-    } else {
-      return 'var(--surfaces-surface-03)';
-    }
-  }
+  // if (isLoading || isDisabled) {
+  //   if (darkMode) {
+  //     return 'var(--cc-appBackground-surface)';
+  //   } else {
+  //     return 'var(--cc-surface3-surface)';
+  //   }
+  // }
 
-  return 'var(--surfaces-surface-01)';
+  return 'var(--cc-surface1-surface)';
 };
 
 export const highlightText = (text = '', highlight) => {
diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx
index 29b127ec7c..91509451f1 100644
--- a/frontend/src/Editor/Components/FilePicker.jsx
+++ b/frontend/src/Editor/Components/FilePicker.jsx
@@ -1,476 +1,33 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-// eslint-disable-next-line import/no-unresolved
-import { useDropzone } from 'react-dropzone';
-import { toast } from 'react-hot-toast';
-// eslint-disable-next-line import/no-unresolved
-import * as XLSX from 'xlsx/xlsx.mjs';
+import React from 'react';
+import PropTypes from 'prop-types';
+// Import the new FilePicker component from AppBuilder
+import FilePickerComponent from '@/AppBuilder/Widgets/FilePicker/FilePicker';
 
-import { useAppInfo } from '@/_stores/appDataStore';
-import useStore from '@/AppBuilder/_stores/store';
-
-export const FilePicker = ({
-  id,
-  width,
-  height,
-  component,
-  fireEvent,
-  onComponentOptionChanged,
-  darkMode,
-  styles,
-  properties,
-  setExposedVariable,
-  setExposedVariables,
-  dataCy,
-}) => {
-  //* resolved properties d
-  const isInitialRender = useRef(true);
-  const instructionText = properties?.instructionText ?? 'Drag and drop files here or click to select files';
-  const enableDropzone = properties?.enableDropzone ?? true;
-  const enablePicker = properties?.enablePicker ?? true;
-  const maxFileCount = properties?.maxFileCount ?? 2;
-  const enableMultiple = properties?.enableMultiple ?? false;
-  const fileType = properties?.fileType ?? 'image/*';
-  const maxSize = properties?.maxSize ?? 1048576;
-  const minSize = properties?.minSize ?? 0;
-  const parseContent = properties.parseContent;
-  const fileTypeFromExtension = properties.parseFileType ?? 'auto-detect';
-  //* resolved styles
-  const widgetVisibility = styles?.visibility ?? true;
-  const disabledState = styles?.disabledState ?? false;
-
-  const { events: allAppEvents } = useAppInfo();
-
-  const filePickerEvents = allAppEvents.filter((event) => event.target === 'component' && event.sourceId === id);
-  console.log(filePickerEvents);
-
-  const bgThemeColor = darkMode ? '#232E3C' : '#fff';
-
-  const baseStyle = {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '20px',
-    borderWidth: 1.5,
-    borderRadius: `${styles.borderRadius}px`,
-    borderColor: '#42536A',
-    borderStyle: 'dashed',
-    color: '#bdbdbd',
-    outline: 'none',
-    transition: 'border .24s ease-in-out',
-    display: widgetVisibility ? 'flex' : 'none',
-    height,
-    backgroundColor: !disabledState && bgThemeColor,
-    boxShadow: styles.boxShadow,
-  };
-
-  const activeStyle = {
-    borderColor: '#2196f3',
-  };
-
-  const acceptStyle = {
-    borderColor: '#00e676',
-  };
-
-  const rejectStyle = {
-    borderColor: '#ff1744',
-  };
-
-  const [disablePicker, setDisablePicker] = React.useState(false);
-
-  const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, acceptedFiles, fileRejections } =
-    useDropzone({
-      accept: { parsedFileType: [fileType] },
-      noClick: !enablePicker || disablePicker,
-      noDrag: !enableDropzone || disablePicker,
-      noKeyboard: true,
-      maxFiles: maxFileCount,
-      minSize: minSize,
-      maxSize: maxSize,
-      multiple: enableMultiple,
-      disabled: disablePicker,
-      validator: validateFileExists,
-      onDropRejected: () => (selectedFiles.length > 0 ? setShowSelectedFiles(true) : setShowSelectedFiles(false)),
-      onFileDialogCancel: () => (selectedFiles.length > 0 ? setShowSelectedFiles(true) : setShowSelectedFiles(false)),
-    });
-
-  const style = useMemo(
-    () => ({
-      ...baseStyle,
-      ...(isDragActive && enableDropzone ? activeStyle : {}),
-      ...(isDragAccept && enableDropzone ? acceptStyle : {}),
-      ...(isDragReject && enableDropzone ? rejectStyle : {}),
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [baseStyle, isDragActive, isDragAccept, acceptStyle, isDragReject]
-  );
-
-  const [accepted, setAccepted] = React.useState(false);
-  const [showSelectedFiles, setShowSelectedFiles] = React.useState(false);
-  const [selectedFiles, setSelectedFiles] = React.useState([]);
-
-  //* custom validator
-  function validateFileExists(_file) {
-    const selectedFilesCount = selectedFiles.length;
-
-    if (selectedFilesCount === maxFileCount) {
-      return {
-        code: 'max_file_count_reached',
-        message: `Max file count reached`,
-      };
-    }
-
-    return null;
-  }
-
-  useEffect(() => {
-    if (disabledState) setDisablePicker(true);
-    else if (selectedFiles.length === maxFileCount && enableMultiple) {
-      setDisablePicker(true);
-    } else {
-      setDisablePicker(false);
-    }
-  }, [selectedFiles.length, disabledState, maxFileCount, enableMultiple]);
-
-  /**
-   * *getFileData()
-   * @param {*} file
-   * @param {*} method: readAsDataURL, readAsText
-   */
-  const getFileData = (file = {}, method = 'readAsText') => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = (result) => {
-        resolve([result, reader]);
-      };
-      reader[method](file);
-      reader.onerror = (error) => {
-        reject(error);
-        if (error.name == 'NotReadableError') {
-          toast.error(error.message);
-        }
-      };
-    }).then((result) => {
-      if (method === 'readAsDataURL') {
-        return result[0].srcElement.result.split(',')[1];
-      }
-      return result[0].srcElement.result;
-    });
-  };
-
-  const fileReader = async (file) => {
-    // * readAsText
-    const readFileAsText = await getFileData(file);
-
-    // * readAsDataURL
-    const readFileAsDataURL = await getFileData(file, 'readAsDataURL');
-    const autoDetectFileType = fileTypeFromExtension === 'auto-detect';
-
-    // * parse file content
-    const shouldProcessFileParsing = parseContent
-      ? await parseFileContent(file, autoDetectFileType, fileTypeFromExtension)
-      : false;
-
-    return {
-      name: file.name,
-      type: file.type,
-      content: readFileAsText,
-      dataURL: readFileAsDataURL, // TODO: Fix dataURL to have correct format
-      base64Data: readFileAsDataURL,
-      parsedData: shouldProcessFileParsing
-        ? await processFileContent(file.type, { readFileAsDataURL, readFileAsText })
-        : null,
-      filePath: file.path,
-    };
-  };
-
-  const handleFileRejection = (fileRejections) => {
-    const uniqueFileRejecetd = fileRejections.reduce((acc, rejectedFile) => {
-      if (!acc.includes(rejectedFile.errors[0].message)) {
-        acc.push(handleFileSizeErorrs(rejectedFile.file.size, rejectedFile.errors[0]));
-      }
-      return acc;
-    }, []);
-    if (selectedFiles.length > 0) {
-      setShowSelectedFiles(true);
-    }
-    uniqueFileRejecetd.map((rejectedMessag) => toast.error(rejectedMessag));
-  };
-
-  //** checks error codes for max and min size  */
-  const handleFileSizeErorrs = (rejectedFileSize, errorObj) => {
-    const { message, code } = errorObj;
-
-    const errorType = Object.freeze({
-      MIN_SIZE: 'file-too-small',
-      MAX_SIZE: 'file-too-large',
-    });
-
-    const fileSize = formatFileSize(rejectedFileSize);
-
-    if (code === errorType.MIN_SIZE) {
-      return `File size ${fileSize} is too small. Minimum size is ${formatFileSize(minSize)}`;
-    }
-    if (code === errorType.MAX_SIZE) {
-      return `File size ${fileSize} is too large. Maximum size is ${formatFileSize(maxSize)}`;
-    }
-
-    return message;
-  };
-
-  useEffect(() => {
-    if (isInitialRender.current) return;
-    if (acceptedFiles.length === 0 && selectedFiles.length === 0) {
-      setExposedVariable('file', []);
-      // onComponentOptionChanged(component, 'file', [], id);
-    }
-
-    if (acceptedFiles.length !== 0 && fireEvent) {
-      const fileData = enableMultiple ? [...selectedFiles] : [];
-      if (parseContent) {
-        setExposedVariable('isParsing', true);
-        // onComponentOptionChanged(component, 'isParsing', true, id);
-      }
-      acceptedFiles.map((acceptedFile) => {
-        const acceptedFileData = fileReader(acceptedFile);
-        acceptedFileData.then((data) => {
-          if (fileData.length < maxFileCount) {
-            fileData.push(data);
-          }
-        });
-      });
-
-      fireEvent('onFileSelected', id, 'canvas', { component })
-        .then(() => {
-          setAccepted(true);
-          // eslint-disable-next-line no-unused-vars
-          return new Promise(function (resolve, reject) {
-            setTimeout(() => {
-              setShowSelectedFiles(true);
-              setAccepted(false);
-              setExposedVariable('isParsing', false);
-              // onComponentOptionChanged(component, 'isParsing', false, id);
-              resolve();
-            }, 600);
-          });
-        })
-        .then(() => fireEvent('onFileLoaded', id, 'canvas', { component }))
-        .then(() => {
-          setSelectedFiles(fileData);
-          setExposedVariable('file', fileData);
-          // onComponentOptionChanged(component, 'file', fileData, id);
-        });
-    }
-
-    if (fileRejections.length > 0) {
-      handleFileRejection(fileRejections);
-    }
-
-    return () => {
-      if (selectedFiles.length === 0) {
-        setShowSelectedFiles(false);
-      }
-      setAccepted(false);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [acceptedFiles.length, fileRejections.length]);
-
-  const clearSelectedFiles = (index) => {
-    setSelectedFiles((prevState) => {
-      const copy = JSON.parse(JSON.stringify(prevState));
-      copy.splice(index, 1);
-      return copy;
-    });
-    fireEvent('onFileDeselected', id);
-  };
-
-  useEffect(() => {
-    isInitialRender.current = false;
-    if (selectedFiles.length === 0) {
-      setShowSelectedFiles(false);
-    }
-    setExposedVariable('file', selectedFiles);
-    // onComponentOptionChanged(component, 'file', selectedFiles, id);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedFiles]);
-
-  useEffect(() => {
-    const exposedVariables = {
-      clearFiles: async function () {
-        setSelectedFiles([]);
-      },
-      file: [],
-    };
-    setExposedVariables(exposedVariables);
-    setShowSelectedFiles(false);
-    isInitialRender.current = false;
-  }, []);
-
-  return (
-    <section>
-      <div className="container" {...getRootProps({ style, className: 'dropzone' })} data-cy={dataCy}>
-        <input {...getInputProps()} />
-        <FilePicker.Signifiers
-          signifier={accepted}
-          feedback={null}
-          cls="spinner-border text-azure p-0 spinner-border-filepicker"
-        />
-
-        {showSelectedFiles && !accepted ? (
-          <FilePicker.AcceptedFiles width={width - 10} height={height}>
-            {selectedFiles.map((acceptedFile, index) => (
-              <>
-                <div key={index} className="col-10">
-                  <FilePicker.Signifiers
-                    signifier={selectedFiles.length > 0}
-                    feedback={acceptedFile.name}
-                    cls={`${darkMode ? 'text-light' : 'text-secondary'} d-flex justify-content-start file-list mb-2`}
-                  />
-                </div>
-                <div className="col-2 mt-0">
-                  <button
-                    className="btn badge bg-azure-lt"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      clearSelectedFiles(index);
-                    }}
-                  >
-                    <img src="assets/images/icons/trash.svg" width="12" height="12" className="mx-1" />
-                  </button>
-                </div>
-              </>
-            ))}
-          </FilePicker.AcceptedFiles>
-        ) : (
-          <FilePicker.Signifiers
-            signifier={!isDragAccept && !accepted & !isDragReject}
-            feedback={instructionText}
-            cls={`${darkMode ? 'text-light' : 'text-dark'} mt-3`}
-          />
-        )}
-
-        <FilePicker.Signifiers
-          signifier={isDragAccept && !(selectedFiles.length === maxFileCount)}
-          feedback={'All files will be accepted'}
-          cls="text-lime mt-3"
-        />
-        <FilePicker.Signifiers
-          signifier={isDragAccept && selectedFiles.length === maxFileCount}
-          feedback={'Max file reached!'}
-          cls="text-red mt-3"
-        />
-
-        <FilePicker.Signifiers signifier={isDragReject} feedback={'Files will be rejected!'} cls="text-red mt-3" />
-      </div>
-    </section>
-  );
+// This component now acts as a wrapper, passing props to the new implementation
+export const FilePicker = (props) => {
+  return <FilePickerComponent {...props} />;
 };
 
-FilePicker.Signifiers = ({ signifier, feedback, cls }) => {
-  if (signifier) {
-    return <>{feedback === null ? <center className={cls}></center> : <p className={cls}>{feedback}</p>}</>;
-  }
-
-  return null;
+// Keep PropTypes for the wrapper if needed, or simplify if they match the inner component
+FilePicker.propTypes = {
+  id: PropTypes.string.isRequired,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  component: PropTypes.object,
+  fireEvent: PropTypes.func,
+  onComponentOptionChanged: PropTypes.func,
+  darkMode: PropTypes.bool,
+  styles: PropTypes.object,
+  properties: PropTypes.object,
+  setExposedVariable: PropTypes.func,
+  setExposedVariables: PropTypes.func,
+  dataCy: PropTypes.string,
 };
 
-FilePicker.AcceptedFiles = ({ children, width, height }) => {
-  const styles = {
-    color: '#bdbdbd',
-    outline: 'none',
-    padding: '5px',
-    overflowX: 'hidden',
-    overflowY: 'auto',
-    scrollbarWidth: 'none',
-    width,
-    height,
-  };
-  return (
-    <aside style={styles}>
-      <span className="text-info">Files</span>
-      <div className="row accepted-files">{children}</div>
-    </aside>
-  );
-};
+// Optional: Default props for the wrapper if needed
+// FilePicker.defaultProps = { ... };
 
-const processCSV = (str, delimiter = ',') => {
-  try {
-    const wb = XLSX.read(str, { type: 'string', raw: true });
-    const wsname = wb.SheetNames[0];
-    const ws = wb.Sheets[wsname];
-    const data = XLSX.utils.sheet_to_json(ws, { delimiter, defval: '' });
-    return data;
-  } catch (error) {
-    console.log(error);
-    handleErrors(error);
-  }
-};
-
-const processXls = (str) => {
-  try {
-    const wb = XLSX.read(str, { type: 'base64' });
-    const wsname = wb.SheetNames[0];
-    const ws = wb.Sheets[wsname];
-    /* Convert array of arrays */
-    const data = XLSX.utils.sheet_to_json(ws);
-    return data;
-  } catch (error) {
-    console.log(error);
-    handleErrors(error);
-  }
-};
-
-const processFileContent = (fileType, fileContent) => {
-  switch (fileType) {
-    case 'text/csv':
-      return processCSV(fileContent.readFileAsText);
-    case 'application/vnd.ms-excel':
-    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-      return processXls(fileContent.readFileAsDataURL);
-
-    default:
-      break;
-  }
-};
-
-const parseFileContent = (file, autoDetect = false, parseFileType) => {
-  const fileType = file.type.split('/')[1];
-
-  if (autoDetect) {
-    return detectParserFile(file);
-  } else {
-    return fileType === parseFileType;
-  }
-};
-
-const detectParserFile = (file) => {
-  return (
-    file.type === 'text/csv' ||
-    file.type === 'application/vnd.ms-excel' ||
-    file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-  );
-};
-
-//? handle bad data in csv parser (e.g. empty cells) OR errors
-const handleErrors = (data) => {
-  const badData = data.filter((row) => {
-    return Object.values(row).some((value) => value === '');
-  });
-
-  const errors = data.filter((row) => {
-    return Object.values(row).some((value) => value === 'ERROR');
-  });
-
-  return [badData, errors];
-};
-
-function formatFileSize(bytes) {
-  if (bytes === 0) return '0 bytes';
-  var k = 1000,
-    dm = 2,
-    sizes = ['Bytes', 'KB', 'MB'],
-    i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
+/* 
+  All the original logic (hooks, state, helper functions, effects, rendering)
+  has been moved to frontend/src/AppBuilder/Widgets/FilePicker/FilePicker.jsx
+*/
diff --git a/frontend/src/Editor/Components/Multiselect.jsx b/frontend/src/Editor/Components/Multiselect.jsx
index b31957dfbc..844fd6e7bd 100644
--- a/frontend/src/Editor/Components/Multiselect.jsx
+++ b/frontend/src/Editor/Components/Multiselect.jsx
@@ -1,13 +1,15 @@
 import _ from 'lodash';
 import React, { useState, useEffect } from 'react';
+import { FormCheck } from 'react-bootstrap';
 import { MultiSelect } from 'react-multi-select-component';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import TriangleDownArrow from '@/_ui/Icon/bulkIcons/TriangleDownArrow';
 import TriangleUpArrow from '@/_ui/Icon/bulkIcons/TriangleUpArrow';
+import './multiselect.scss';
 
 const ItemRenderer = ({ checked, option, onClick, disabled }) => (
   <div className={`item-renderer ${disabled && 'disabled'}`}>
-    <input type="checkbox" onClick={onClick} checked={checked} tabIndex={-1} disabled={disabled} />
+    <FormCheck checked={checked} disabled={disabled} tabIndex={-1} onClick={onClick} />
     <span>{option.label}</span>
   </div>
 );
@@ -163,14 +165,22 @@ export const Multiselect = function Multiselect({
     >
       <div className="col-auto my-auto d-flex align-items-center">
         <label
-          style={{ marginRight: label ? '1rem' : '', marginBottom: 0 }}
-          className={`form-label py-1 ${darkMode ? 'text-light' : 'text-secondary'}`}
+          style={{ marginRight: label ? '1rem' : '', marginBottom: 0, color: 'var(--cc-primary-text)' }}
+          className={`form-label py-1`}
           data-cy={`multiselect-label-${componentName?.toLowerCase()}`}
         >
           {label}
         </label>
       </div>
-      <div className="col px-0 h-100" style={{ borderRadius: parseInt(borderRadius), boxShadow }}>
+      <div
+        className="col px-0 h-100"
+        style={{
+          borderRadius: parseInt(borderRadius),
+          boxShadow,
+          backgroundColor: 'var(--cc-surface1-surface)',
+          color: 'var(--cc-primary-text)',
+        }}
+      >
         <MultiSelect
           hasSelectAll={showAllOption ?? false}
           options={selectOptions}
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index 78b7c79552..02aebf6e6c 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -390,12 +390,7 @@ export const MultiselectV2 = ({
       padding: '0 10px',
       display: 'flex',
       gap: '0.13rem',
-      color:
-        selectedTextColor !== '#1B1F24'
-          ? selectedTextColor
-          : isMultiSelectLoading || isMultiSelectDisabled
-          ? 'var(--text-disabled)'
-          : 'var(--text-primary)',
+      color: selectedTextColor !== '#1B1F24' ? selectedTextColor : 'var(--cc-primary-text)',
     }),
 
     input: (provided, _state) => ({
@@ -426,14 +421,8 @@ export const MultiselectV2 = ({
     }),
     option: (provided, _state) => ({
       ...provided,
-      backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--surfaces-surface-01)',
-      color: _state.isDisabled
-        ? 'var(_--text-disbled)'
-        : selectedTextColor !== '#1B1F24'
-        ? selectedTextColor
-        : isMultiSelectDisabled || isMultiSelectLoading
-        ? 'var(--text-disabled)'
-        : 'var(--text-primary)',
+      backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--cc-surface1-surface)',
+      color: selectedTextColor !== '#1B1F24' ? selectedTextColor : 'var(--cc-primary-text)',
       borderRadius: _state.isFocused && '8px',
       padding: '8px 6px 8px 12px',
       '&:hover': {
@@ -450,7 +439,7 @@ export const MultiselectV2 = ({
       flexDirection: 'column',
       gap: '4px !important',
       overflowY: 'auto',
-      backgroundColor: 'var(--surfaces-surface-01)',
+      backgroundColor: 'var(--cc-surface1-surface)',
     }),
     menu: (provided) => ({
       ...provided,
diff --git a/frontend/src/Editor/Components/PDF.jsx b/frontend/src/Editor/Components/PDF.jsx
index 3ea02dbe32..b962a2f9db 100644
--- a/frontend/src/Editor/Components/PDF.jsx
+++ b/frontend/src/Editor/Components/PDF.jsx
@@ -79,7 +79,7 @@ export const PDF = React.memo(({ styles, properties, width, height, componentNam
 
   // styles for download icon
   const downloadIconOuterWrapperStyles = {
-    backgroundColor: 'white',
+    backgroundColor: 'var(--cc-surface1-surface)',
     borderRadius: '4px',
     height: '36px',
     padding: '0.5rem',
@@ -193,7 +193,8 @@ export const PDF = React.memo(({ styles, properties, width, height, componentNam
           <div
             className={`d-flex ${
               pageControls ? 'justify-content-between' : 'justify-content-end'
-            } py-3 px-3 align-items-baseline bg-white border-top border-light`}
+            } py-3 px-3 align-items-baseline border-top border-light`}
+            style={{ backgroundColor: 'var(--cc-surface1-surface)', color: 'var(--cc-primary-text)' }}
           >
             {pageControls && (
               <>
@@ -203,6 +204,7 @@ export const PDF = React.memo(({ styles, properties, width, height, componentNam
                     onClick={() => updatePage(-1)}
                     type="button"
                     aria-label="Previous page"
+                    style={{ backgroundColor: 'var(--cc-surface1-surface)' }}
                   >
                     ‹
                   </button>
@@ -214,6 +216,7 @@ export const PDF = React.memo(({ styles, properties, width, height, componentNam
                     onClick={() => updatePage(1)}
                     type="button"
                     aria-label="Next page"
+                    style={{ backgroundColor: 'var(--cc-surface1-surface)' }}
                   >
                     ›
                   </button>
@@ -232,7 +235,9 @@ export const PDF = React.memo(({ styles, properties, width, height, componentNam
                   style={downloadIconImgStyle}
                   className="mx-1"
                 />
-                <span className="mx-1">Download PDF</span>
+                <span className="mx-1" style={{ color: 'var(--cc-primary-text)' }}>
+                  Download PDF
+                </span>
               </div>
             )}
           </div>
diff --git a/frontend/src/Editor/Components/Pagination.jsx b/frontend/src/Editor/Components/Pagination.jsx
index b2b052def9..b3b021d97c 100644
--- a/frontend/src/Editor/Components/Pagination.jsx
+++ b/frontend/src/Editor/Components/Pagination.jsx
@@ -212,7 +212,11 @@ const Operator = ({ operator, currentPage, totalPages, handleOnClick, darkMode }
   return (
     <React.Fragment>
       <li className={`page-item ${getDisableCls(operator, currentPage, totalPages)}`}>
-        <a style={{ cursor: 'pointer' }} className={`page-link ${darkMode && 'text-light'}`} onClick={handleOnClick}>
+        <a
+          style={{ cursor: 'pointer' }}
+          className={`page-link arrow-icon ${darkMode && 'text-light'}`}
+          onClick={handleOnClick}
+        >
           {getOperator(operator)}
         </a>
       </li>
diff --git a/frontend/src/Editor/Components/RadioButton.jsx b/frontend/src/Editor/Components/RadioButton.jsx
index 360efab4af..4a776f7bfe 100644
--- a/frontend/src/Editor/Components/RadioButton.jsx
+++ b/frontend/src/Editor/Components/RadioButton.jsx
@@ -64,7 +64,7 @@ export const RadioButton = function RadioButton({
             <input
               style={{
                 marginTop: '1px',
-                backgroundColor: checkedValue === option.value ? `${activeColor}` : 'white',
+                backgroundColor: checkedValue === option.value ? `${activeColor}` : 'var(--cc-surface1-surface)',
               }}
               className="form-check-input"
               checked={checkedValue === option.value}
diff --git a/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx b/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
index 866565252e..d9d6661ba6 100644
--- a/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
+++ b/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
@@ -281,7 +281,7 @@ export const RadioButtonV2 = ({
       <div
         className={`${isValid ? 'd-none' : visibility ? 'd-flex' : 'd-none'}`}
         style={{
-          color: 'var(--status-error-strong)',
+          color: 'var(--cc-error-systemStatus)',
           justifyContent: direction === 'right' ? 'flex-start' : 'flex-end',
           fontSize: '11px',
           fontWeight: '400',
diff --git a/frontend/src/Editor/Components/RangeSlider.jsx b/frontend/src/Editor/Components/RangeSlider.jsx
index ee94602d6c..b0e20ff1e4 100644
--- a/frontend/src/Editor/Components/RangeSlider.jsx
+++ b/frontend/src/Editor/Components/RangeSlider.jsx
@@ -1,106 +1,301 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Slider from 'rc-slider';
 import 'rc-slider/assets/index.css';
-
-export const RangeSlider = function RangeSlider({ height, properties, styles, setExposedVariable, fireEvent, dataCy }) {
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Spinner from '@/_ui/Spinner';
+export const RangeSlider = ({
+  height,
+  properties,
+  styles,
+  setExposedVariable,
+  setExposedVariables,
+  fireEvent,
+  dataCy,
+}) => {
   const isInitialRender = useRef(true);
-  const { value, min, max, enableTwoHandle } = properties;
-  const { trackColor, handleColor, lineColor, visibility, boxShadow } = styles;
+  const labelRef = useRef(null);
+  const { value, min, max, enableTwoHandle, label, schema, endValue, startValue } = properties;
+
+  const {
+    trackColor,
+    handleColor,
+    lineColor,
+    boxShadow,
+    alignment = 'side',
+    direction = 'left',
+    width = 0,
+    auto = false,
+    color = '#000',
+    markerLabel,
+    handleBorderColor,
+  } = styles;
+
   const sliderRef = useRef(null);
-  const [sliderValue, setSliderValue] = useState(0);
-  const [rangeValue, setRangeValue] = useState([0, 100]);
+
+  const [defaultSliderValue, setDefaultSliderValue] = useState(value);
+  const [defaultRangeValue, setDefaultRangeValue] = useState([startValue, endValue]);
+  const [labelWidth, setLabelWidth] = useState(auto ? 'auto' : width);
+  // <- HAVE COMMENTED THIS VARIABLE FOR YOUR REFERENCE ->
+  const [visibility, setVisibility] = useState(properties.visibility);
+  const [disabled, setDisabled] = useState(properties?.disabledState);
+  const [loading, setLoading] = useState(properties?.loadingState);
+
+  const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
+  const _width = auto ? 'auto' : `${(width / 100) * 70}%`;
 
   const toArray = (data) => (Array.isArray(data) ? data : [data, max]);
   const singleHandleValue = !enableTwoHandle ? (Array.isArray(value) ? value[0] : value) : 50;
   const twoHandlesArray = enableTwoHandle ? toArray(value) : [0, 100];
 
-  const computedStyles = {
-    height,
-    display: visibility ? 'flex' : 'none',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '0px 2px',
-    boxShadow,
-  };
-
   useEffect(() => {
-    if (isInitialRender.current) return;
-    setSliderValue(singleHandleValue);
-    setExposedVariable('value', singleHandleValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [singleHandleValue]);
-
-  useEffect(() => {
-    if (isInitialRender.current) return;
-    setRangeValue(twoHandlesArray);
-    setExposedVariable('value', twoHandlesArray);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(twoHandlesArray)]);
-
-  useEffect(() => {
-    setExposedVariable('value', enableTwoHandle ? twoHandlesArray : singleHandleValue);
-    if (isInitialRender.current) {
-      enableTwoHandle ? setRangeValue(twoHandlesArray) : setSliderValue(singleHandleValue);
+    if (auto) {
+      setLabelWidth('auto');
+    } else {
+      setLabelWidth(width > 0 ? `${width}%` : '33%');
     }
+  }, [auto, width]);
+
+  useEffect(() => {
+    const exposedVariables = {
+      setValue: async function (value) {
+        setDefaultSliderValue(value);
+        setExposedVariable('value', value);
+        fireEvent('onChange');
+      },
+      setRangeValue: async function (num1, num2) {
+        setDefaultRangeValue([num1, num2]);
+        setExposedVariable('value', [num1, num2]);
+        fireEvent('onChange');
+      },
+      setVisibility: async function (value) {
+        setVisibility(value);
+        setExposedVariable('isVisible', value);
+      },
+      setDisable: async function (value) {
+        setDisabled(value);
+        setExposedVariable('isDisabled', value);
+      },
+      setLoading: async function (value) {
+        setLoading(value);
+        setExposedVariable('isLoading', value);
+      },
+    };
+    setExposedVariables(exposedVariables);
     isInitialRender.current = false;
+  }, []);
+
+  useEffect(() => {
+    setExposedVariable('reset', () => {
+      if (enableTwoHandle === 'slider') {
+        setDefaultSliderValue(value ?? min);
+        setExposedVariable('value', value ?? min);
+      } else {
+        const start = startValue ?? min;
+        const end = endValue ?? max;
+        setExposedVariable('value', [start, end]);
+        setDefaultRangeValue([start, end]);
+      }
+    });
+  }, [min, max, startValue, endValue]);
+
+  useEffect(() => {
+    disabled !== properties.disabledState && setDisabled(properties.disabledState);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enableTwoHandle]);
+  }, [properties.disabledState]);
+
+  useEffect(() => {
+    visibility !== properties.visibility && setVisibility(properties.visibility);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties.visibility]);
+
+  useEffect(() => {
+    loading !== properties.loadingState && setLoading(properties.loadingState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties.loadingState]);
+
+  useEffect(() => {
+    if (isInitialRender.current) return;
+    if (enableTwoHandle === 'slider') {
+      setDefaultSliderValue(value);
+    } else {
+      const start = startValue ?? min;
+      const end = endValue ?? max;
+
+      setDefaultRangeValue([start, end]);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, enableTwoHandle, startValue, endValue]);
 
   const onSliderChange = (value) => {
     setExposedVariable('value', value);
-    setSliderValue(value);
+    setDefaultSliderValue(value);
   };
 
   const onRangeChange = (value) => {
     setExposedVariable('value', value);
-    setRangeValue(value);
+    setDefaultRangeValue(value);
   };
 
   const rangeStyles = {
-    handleStyle: toArray(sliderValue).map(() => {
-      return {
-        backgroundColor: handleColor,
-        borderColor: handleColor,
-      };
-    }),
-    trackStyle: toArray(sliderValue).map(() => {
-      return { backgroundColor: trackColor };
-    }),
-    railStyle: { backgroundColor: lineColor },
+    handleStyle: toArray(defaultRangeValue).map(() => ({
+      backgroundColor: `${handleColor}`,
+      borderColor: handleColor,
+      border: `1px solid ${handleBorderColor}`,
+      height: 16,
+      width: 16,
+      opacity: 1,
+    })),
+    trackStyle: toArray(defaultRangeValue).map(() => ({
+      backgroundColor: trackColor,
+      height: 8,
+    })),
+    railStyle: { backgroundColor: lineColor, height: 8 },
+    dotStyle: {
+      width: 4,
+      height: 4,
+      backgroundColor: '#ffffff',
+      borderColor: '#ffffff',
+    },
+    activeDotStyle: {
+      backgroundColor: '#ffffff',
+      borderColor: '#ffffff',
+    },
   };
 
+  const Label = ({ label, color, defaultAlignment, direction }) => {
+    if (!label) return null;
+
+    return (
+      <div
+        ref={labelRef}
+        style={{
+          color,
+          width: _width,
+          marginRight: defaultAlignment === 'side' && direction === 'left' ? '4px' : '0px',
+          marginLeft: defaultAlignment === 'side' && direction === 'right' ? '4px' : '0px',
+          marginBottom: defaultAlignment === 'top' ? '4px' : '0px',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          textAlign: direction === 'right' ? 'right' : 'left',
+          minWidth: defaultAlignment === 'side' ? '40px' : 'auto',
+          maxWidth: defaultAlignment === 'side' ? '50%' : '100%',
+          lineHeight: '1.2',
+          fontSize: '12px',
+          fontWeight: '500',
+        }}
+      >
+        {label}
+      </div>
+    );
+  };
+
+  const containerStyle = {
+    display: visibility ? 'flex' : 'none',
+    flexDirection: defaultAlignment === 'top' ? 'column' : 'row',
+    alignItems: defaultAlignment === 'top' ? (direction === 'right' ? 'flex-end' : 'flex-start') : 'center',
+    justifyContent: 'flex-start',
+    padding: '0px',
+    boxShadow,
+    width: '100%',
+    height: defaultAlignment === 'top' ? 'auto' : height,
+    gap: '0px',
+    ...(defaultAlignment === 'side' && direction === 'right' && { flexDirection: 'row-reverse' }),
+    ...(disabled && {
+      pointerEvents: 'none',
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    }),
+    visibility: visibility ? 'visible' : 'hidden',
+  };
+
+  const sliderContainerStyle = {
+    width: '100%',
+    paddingRight: '12px',
+    visibility: visibility ? 'visible' : 'hidden',
+  };
   return (
-    <div style={computedStyles} className="range-slider" data-cy={dataCy}>
-      {enableTwoHandle ? (
-        <Slider
-          range
-          min={min}
-          max={max}
-          defaultValue={toArray(rangeValue)}
-          onChange={onRangeChange}
-          onAfterChange={() => fireEvent('onChange')}
-          value={toArray(rangeValue)}
-          ref={sliderRef}
-          trackStyle={rangeStyles.trackStyle}
-          railStyle={rangeStyles.railStyle}
-          handleStyle={rangeStyles.handleStyle}
-        />
-      ) : (
-        <Slider
-          min={min}
-          max={max}
-          defaultValue={sliderValue}
-          value={sliderValue}
-          ref={sliderRef}
-          onChange={onSliderChange}
-          onAfterChange={() => fireEvent('onChange')}
-          trackStyle={{ backgroundColor: trackColor }}
-          railStyle={{ backgroundColor: lineColor }}
-          handleStyle={{
-            backgroundColor: handleColor,
-            borderColor: handleColor,
+    <div style={containerStyle} className="range-slider" data-cy={dataCy}>
+      {loading ? (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+            width: '100%',
           }}
-        />
+        >
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          <Label label={label} color={color} defaultAlignment={defaultAlignment} direction={direction} />
+
+          <div style={sliderContainerStyle}>
+            {enableTwoHandle !== 'slider' ? (
+              <Slider
+                range
+                min={min}
+                max={max}
+                defaultValue={defaultRangeValue}
+                onChange={onRangeChange}
+                onAfterChange={() => fireEvent('onChange')}
+                value={defaultRangeValue}
+                ref={sliderRef}
+                trackStyle={rangeStyles.trackStyle}
+                railStyle={rangeStyles.railStyle}
+                handleStyle={rangeStyles.handleStyle}
+                dotStyle={rangeStyles.dotStyle}
+                activeDotStyle={rangeStyles.activeDotStyle}
+                marks={schema.reduce((acc, item) => {
+                  acc[item.value] = {
+                    style: { color: markerLabel },
+                    label: item.label.replace('%', ''),
+                  };
+                  return acc;
+                }, {})}
+                handleRender={(node, handleProps) => {
+                  return (
+                    <OverlayTrigger placement="top" overlay={<Tooltip>{handleProps.value}</Tooltip>}>
+                      {node}
+                    </OverlayTrigger>
+                  );
+                }}
+              />
+            ) : (
+              <Slider
+                min={min}
+                max={max}
+                defaultValue={defaultSliderValue}
+                value={defaultSliderValue}
+                ref={sliderRef}
+                onChange={onSliderChange}
+                onAfterChange={() => fireEvent('onChange')}
+                trackStyle={rangeStyles.trackStyle}
+                railStyle={rangeStyles.railStyle}
+                handleStyle={rangeStyles.handleStyle}
+                dotStyle={rangeStyles.dotStyle}
+                activeDotStyle={rangeStyles.activeDotStyle}
+                marks={schema.reduce((acc, item) => {
+                  acc[item.value] = {
+                    style: { color: markerLabel },
+                    label: item.label.replace('%', ''),
+                  };
+                  return acc;
+                }, {})}
+                handleRender={(node, handleProps) => {
+                  return (
+                    <OverlayTrigger placement="top" overlay={<Tooltip>{handleProps.value}</Tooltip>}>
+                      {node}
+                    </OverlayTrigger>
+                  );
+                }}
+              />
+            )}
+          </div>
+        </>
       )}
     </div>
   );
diff --git a/frontend/src/Editor/Components/RichTextEditor.jsx b/frontend/src/Editor/Components/RichTextEditor.jsx
index 2a591afba0..1450fc1fae 100644
--- a/frontend/src/Editor/Components/RichTextEditor.jsx
+++ b/frontend/src/Editor/Components/RichTextEditor.jsx
@@ -2,8 +2,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import 'draft-js/dist/Draft.css';
 import { DraftEditor } from './DraftEditor';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 
 export const RichTextEditor = function RichTextEditor({
+  id,
   width,
   height,
   properties,
@@ -11,11 +13,25 @@ export const RichTextEditor = function RichTextEditor({
   setExposedVariable,
   setExposedVariables,
   dataCy,
+  adjustComponentPositions,
+  currentLayout,
 }) {
   const isInitialRender = useRef(true);
   const { visibility, disabledState, boxShadow } = styles;
   const placeholder = properties.placeholder;
   const defaultValue = properties?.defaultValue ?? '';
+  const dynamicHeight = properties.dynamicHeight ?? false;
+  const [currentValue, setCurrentValue] = useState(defaultValue);
+
+  useDynamicHeight({
+    dynamicHeight,
+    id: id,
+    height,
+    value: currentValue,
+    adjustComponentPositions,
+    currentLayout,
+    width,
+  });
 
   const [isDisabled, setIsDisabled] = useState(disabledState);
   const [isVisible, setIsVisible] = useState(visibility);
@@ -44,18 +60,19 @@ export const RichTextEditor = function RichTextEditor({
 
   function handleChange(html) {
     setExposedVariable('value', html);
+    setCurrentValue(html);
   }
 
   return (
     <div
       data-disabled={isDisabled}
-      style={{ height: `${height}px`, display: isVisible ? '' : 'none', boxShadow }}
+      style={{ height: dynamicHeight ? 'auto' : `${height}px`, display: isVisible ? '' : 'none', boxShadow }}
       data-cy={dataCy}
     >
       <DraftEditor
         isInitialRender={isInitialRender}
         handleChange={handleChange}
-        height={height}
+        height={dynamicHeight ? 'auto' : height}
         width={width}
         placeholder={placeholder}
         defaultValue={defaultValue}
@@ -67,6 +84,7 @@ export const RichTextEditor = function RichTextEditor({
         setIsDisabled={setIsDisabled}
         setIsVisible={setIsVisible}
         setIsLoading={setIsLoading}
+        dynamicHeight={dynamicHeight}
       ></DraftEditor>
     </div>
   );
diff --git a/frontend/src/Editor/Components/Statistics.jsx b/frontend/src/Editor/Components/Statistics.jsx
index 0de530333c..bf86baecd9 100644
--- a/frontend/src/Editor/Components/Statistics.jsx
+++ b/frontend/src/Editor/Components/Statistics.jsx
@@ -15,7 +15,7 @@ export const Statistics = function Statistics({ width, height, properties, style
 
   const baseStyle = {
     borderRadius: 4,
-    backgroundColor: darkMode ? '#47505D' : '#ffffff',
+    backgroundColor: 'var(--cc-surface1-surface)',
     alignItems: 'center',
     flexDirection: 'column',
     margin: '0px auto',
diff --git a/frontend/src/Editor/Components/Table/datepicker.scss b/frontend/src/Editor/Components/Table/datepicker.scss
index 8d83a8e676..bc85741be0 100644
--- a/frontend/src/Editor/Components/Table/datepicker.scss
+++ b/frontend/src/Editor/Components/Table/datepicker.scss
@@ -56,7 +56,7 @@
 // Changes for react date picker in table
 .tj-table-datepicker {
     .react-datepicker__header {
-        background-color: var(--surfaces-surface-01);
+        background-color: var(--cc-surface1-surface);
         padding: 6px 0px;
         border: none;
     }
@@ -78,7 +78,7 @@
         align-items: center;
         justify-content: center;
         padding: 4px;
-        background-color: var(--surfaces-surface-01) !important;
+        background-color: var(--cc-surface1-surface) !important;
     }
 
     .react-datepicker__navigation-icon--previous {
@@ -130,7 +130,7 @@
 
     .react-datepicker__day--selected {
         border-radius: 8px;
-        background-color: var(--primary-brand) !important;
+        background-color: var(--cc-primary-brand) !important;
         color: var(--surfaces-surface-01) !important
     }
 
@@ -152,7 +152,7 @@
     }
 
     .react-datepicker__day--today {
-        border: 1px solid var(--primary-brand);
+        border: 1px solid var(--cc-primary-brand);
         border-radius: 8px;
         background-color: var(--surfaces-surface-01);
     }
diff --git a/frontend/src/Editor/Components/Text.jsx b/frontend/src/Editor/Components/Text.jsx
index 577bef4893..89f9abfee8 100644
--- a/frontend/src/Editor/Components/Text.jsx
+++ b/frontend/src/Editor/Components/Text.jsx
@@ -4,6 +4,7 @@ import DOMPurify from 'dompurify';
 import Markdown from 'react-markdown';
 import './text.scss';
 import Loader from '@/ToolJetUI/Loader/Loader';
+import { useDynamicHeight } from '@/_hooks/useDynamicHeight';
 
 const VERTICAL_ALIGNMENT_VS_CSS_VALUE = {
   top: 'flex-start',
@@ -14,7 +15,9 @@ const VERTICAL_ALIGNMENT_VS_CSS_VALUE = {
 let count = 0;
 
 export const Text = function Text({
+  id,
   height,
+  width,
   properties,
   fireEvent,
   styles,
@@ -22,6 +25,8 @@ export const Text = function Text({
   setExposedVariable,
   setExposedVariables,
   dataCy,
+  adjustComponentPositions,
+  currentLayout,
 }) {
   let {
     textSize,
@@ -44,13 +49,14 @@ export const Text = function Text({
     isScrollRequired,
   } = styles;
   const isInitialRender = useRef(true);
-  const { loadingState, textFormat, disabledState } = properties;
+  const { loadingState, textFormat, disabledState, dynamicHeight } = properties;
   const [text, setText] = useState(() => computeText());
   const [visibility, setVisibility] = useState(properties.visibility);
   const [isLoading, setLoading] = useState(loadingState);
   const [isDisabled, setIsDisabled] = useState(disabledState);
   const color = ['#000', '#000000'].includes(textColor) ? (darkMode ? '#fff' : '#000') : textColor;
   count = count + 1;
+  // const prevDynamicHeight = useRef(dynamicHeight);
   useEffect(() => {
     if (visibility !== properties.visibility) setVisibility(properties.visibility);
     if (isLoading !== loadingState) setLoading(loadingState);
@@ -59,6 +65,8 @@ export const Text = function Text({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [properties.visibility, loadingState, disabledState]);
 
+  useDynamicHeight({ dynamicHeight, id, height, value: text, adjustComponentPositions, currentLayout, width });
+
   useEffect(() => {
     if (isInitialRender.current) return;
     const text = computeText();
@@ -127,7 +135,7 @@ export const Text = function Text({
   };
 
   const computedStyles = {
-    height: `${height}px`,
+    height: dynamicHeight ? 'auto' : `${height}px`,
     backgroundColor: darkMode && ['#edeff5'].includes(backgroundColor) ? '#2f3c4c' : backgroundColor,
     color,
     display: visibility ? 'flex' : 'none',
@@ -150,12 +158,14 @@ export const Text = function Text({
   const commonStyles = {
     width: '100%',
     height: '100%',
-    overflowY: isScrollRequired == 'enabled' ? 'auto' : 'hidden',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: VERTICAL_ALIGNMENT_VS_CSS_VALUE[verticalAlignment],
     textAlign,
-    overflowX: isScrollRequired === 'disabled' && 'hidden',
+    ...(!dynamicHeight && {
+      overflowX: isScrollRequired === 'disabled' && 'hidden',
+      overflowY: isScrollRequired == 'enabled' ? 'auto' : 'hidden',
+    }),
   };
 
   const commonScrollStyle = {
diff --git a/frontend/src/Editor/Components/Timeline.jsx b/frontend/src/Editor/Components/Timeline.jsx
index 474d0321d5..18562a6008 100644
--- a/frontend/src/Editor/Components/Timeline.jsx
+++ b/frontend/src/Editor/Components/Timeline.jsx
@@ -10,7 +10,14 @@ export const Timeline = function Timeline({ height, darkMode, properties, styles
   return (
     <div
       className="card"
-      style={{ display: visibility ? '' : 'none', height, overflow: 'auto', overflowWrap: 'normal', boxShadow }}
+      style={{
+        display: visibility ? '' : 'none',
+        height,
+        overflow: 'auto',
+        overflowWrap: 'normal',
+        boxShadow,
+        backgroundColor: 'var(--cc-surface1-surface)',
+      }}
       data-cy={dataCy}
     >
       <div className="card-body">
diff --git a/frontend/src/Editor/Components/Timer.jsx b/frontend/src/Editor/Components/Timer.jsx
index d40dfcac40..12eda907fe 100644
--- a/frontend/src/Editor/Components/Timer.jsx
+++ b/frontend/src/Editor/Components/Timer.jsx
@@ -151,7 +151,12 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
   return (
     <div
       className="card"
-      style={{ height, display: styles.visibility ? '' : 'none', boxShadow: styles.boxShadow }}
+      style={{
+        height,
+        display: styles.visibility ? '' : 'none',
+        boxShadow: styles.boxShadow,
+        backgroundColor: 'var(--cc-surface1-surface)',
+      }}
       data-cy={dataCy}
     >
       <div className="timer-wrapper">
@@ -186,7 +191,11 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
               Resume
             </a>
           )}
-          <a className={`btn${styles.disabledState ? ' disabled' : ''}`} onClick={onReset}>
+          <a
+            className={`btn${styles.disabledState ? ' disabled' : ''}`}
+            style={{ color: 'var(--cc-primary-text)' }}
+            onClick={onReset}
+          >
             Reset
           </a>
         </div>
diff --git a/frontend/src/Editor/Components/Toggle.jsx b/frontend/src/Editor/Components/Toggle.jsx
index feb397278d..24d88bcd35 100644
--- a/frontend/src/Editor/Components/Toggle.jsx
+++ b/frontend/src/Editor/Components/Toggle.jsx
@@ -7,7 +7,7 @@ class Switch extends React.Component {
       <label className="form-switch form-check-inline">
         <input
           style={{
-            backgroundColor: on ? `${color}` : 'white',
+            backgroundColor: on ? `${color}` : 'var(--cc-surface1-surface)',
             marginTop: '0px',
           }}
           disabled={disabledState}
diff --git a/frontend/src/Editor/Components/ToggleV2.jsx b/frontend/src/Editor/Components/ToggleV2.jsx
index ea7b2170b7..9e2fae9476 100644
--- a/frontend/src/Editor/Components/ToggleV2.jsx
+++ b/frontend/src/Editor/Components/ToggleV2.jsx
@@ -264,7 +264,9 @@ export const ToggleSwitchV2 = ({
             width={width - 20}
           >
             {label}
-            {isMandatory && !on && <span style={{ color: '#DB4324', marginLeft: '1px' }}>{'*'}</span>}
+            {isMandatory && !on && (
+              <span style={{ color: 'var(--cc-error-systemStatus)', marginLeft: '1px' }}>{'*'}</span>
+            )}
           </OverflowTooltip>
 
           <Switch
@@ -298,7 +300,7 @@ export const ToggleSwitchV2 = ({
         <div
           data-cy={`${String(componentName).toLowerCase()}-invalid-feedback`}
           style={{
-            color: 'var(--status-error-strong)',
+            color: 'var(--cc-error-systemStatus)',
             fontSize: '11px',
             fontWeight: '400',
             lineHeight: '16px',
diff --git a/frontend/src/Editor/Components/datepicker.scss b/frontend/src/Editor/Components/datepicker.scss
index 89f0d1a888..6a246c1a12 100644
--- a/frontend/src/Editor/Components/datepicker.scss
+++ b/frontend/src/Editor/Components/datepicker.scss
@@ -9,6 +9,31 @@
     background-color: var(--surfaces-surface-01) !important
   }
 
+  .react-datepicker__day:not([aria-disabled=true]):hover,
+  .react-datepicker__month-text:not([aria-disabled=true]):hover,
+  .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
+  .react-datepicker__year-text:not([aria-disabled=true]):hover {
+    border-radius: 0.3rem;
+    background-color: var(--cc-surface1-surface);
+    filter: brightness(0.92);
+  }
+
+  .react-datepicker__day--selected:not([aria-disabled=true]):hover {
+    border-radius: 0.3rem;
+    background-color: var(--cc-primary-brand);
+    filter: brightness(0.92);
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: var(--cc-surface1-surface);
+  }
+
+  .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover {
+    border-radius: 0.3rem;
+    background-color: var(--cc-surface1-surface);
+    filter: brightness(0.92);
+  }
+
 }
 
   // .dark-theme {
diff --git a/frontend/src/Editor/Components/multiselect.scss b/frontend/src/Editor/Components/multiselect.scss
new file mode 100644
index 0000000000..03806b0472
--- /dev/null
+++ b/frontend/src/Editor/Components/multiselect.scss
@@ -0,0 +1,43 @@
+.multiselect-box {
+    .select-item:hover {
+        filter: brightness(0.92);
+        background-color: var(--cc-surface1-surface);
+    }
+}
+
+.dropdown-multiselect-widget-custom-menu-list {
+    .dropdown-multiselect-widget-custom-menu-list-body {
+        input[type="checkbox"] {
+            position: relative;
+            appearance: none;
+            -webkit-appearance: none;
+            border: 1px solid var(--borders-default);
+            border-radius: 3px;
+            background-color: var(--cc-surface1-surface);
+            cursor: pointer;
+            
+            &:checked {
+              background-color: var(--cc-primary-brand);
+              border-color: var(--cc-primary-brand);
+              
+              &:after {
+                content: '';
+                position: absolute;
+                left: 4px;
+                top: 1px;
+                width: 5px;
+                height: 9px;
+                border: solid white;
+                border-width: 0 2px 2px 0;
+                transform: rotate(45deg);
+              }
+            }
+            
+            &:not(:checked) {
+              background-color: var(--cc-surface1-surface);
+              border-color: var(--borders-default);
+            }
+          }
+    }
+
+}
diff --git a/frontend/src/Editor/Components/utils.js b/frontend/src/Editor/Components/utils.js
new file mode 100644
index 0000000000..11894590ed
--- /dev/null
+++ b/frontend/src/Editor/Components/utils.js
@@ -0,0 +1,47 @@
+import tinycolor from 'tinycolor2';
+
+function extractCssVarName(cssVarExpression) {
+  // Ex: var(--cc-primary-brand) -> --primary-brand
+  const match = cssVarExpression.match(/var\(\s*(--[^,\s)]+)\s*(?:,[^)]+)?\)/);
+  return match ? match[1] : null;
+}
+
+export const getCssVarValue = (element, cssVarExpression) => {
+  if (!element) return null;
+
+  const cssVariableName = extractCssVarName(cssVarExpression);
+  const cssVariableValue = element.style?.getPropertyValue(cssVariableName)?.trim();
+
+  return cssVariableValue ?? null;
+};
+
+export const getColorModeFromLuminance = (color, element = document.documentElement) => {
+  // If color is a CSS variable, get its value
+  const colorValue = color?.startsWith('var(') ? getCssVarValue(element, color) : color;
+  // Use tinycolor to get the luminance
+  const colorObj = tinycolor(colorValue);
+  const luminance = colorObj.getLuminance();
+  // Return 'dark' for light backgrounds and 'light' for dark backgrounds
+  // Using 0.5 as the threshold (standard practice)
+  return luminance > 0.5 ? 'dark' : 'light';
+};
+
+const defaultModificationAmountMappingByState = {
+  hover: 8,
+  active: 15,
+};
+
+export function getModifiedColor(color, stateOrModificationAmount, options = { element: document.documentElement }) {
+  // color: Can be value directly like #000000 or rgb or hsl or var(--cc-primary-brand)
+  // stateOrModificationAmount: Any value from defaultModificationAmountMappingByState or a number between 0 to 100 (defaultValue 0)
+  // options: For now you can pass the element from which you will grab the CSS Variable Expression Value, you can extend as per need
+
+  const modificationAmount =
+    typeof stateOrModificationAmount === 'number'
+      ? stateOrModificationAmount
+      : defaultModificationAmountMappingByState[stateOrModificationAmount] ?? 0;
+
+  const colorValue = color?.startsWith('var(') ? getCssVarValue(options?.element, color) : color;
+
+  return tinycolor(colorValue).darken(modificationAmount).toString();
+}
diff --git a/frontend/src/Editor/Inspector/Elements/Code.jsx b/frontend/src/Editor/Inspector/Elements/Code.jsx
index 4fc388424b..db7f5c6945 100644
--- a/frontend/src/Editor/Inspector/Elements/Code.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Code.jsx
@@ -43,7 +43,7 @@ export const Code = ({
   }
 
   return (
-    <div className={`field ${options.className}`} style={{ marginBottom: '8px' }}>
+    <div className={`field tw-mb-2 last:tw-mb-0 ${options.className ?? ''}`}>
       <CodeEditor
         type="fxEditor"
         initialValue={initialValue}
diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index 6595499e55..dbbd87a8d9 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -555,13 +555,13 @@ const getDocsLink = (componentMeta) => {
     case 'ToggleSwitchV2':
       return 'https://docs.tooljet.io/docs/widgets/toggle-switch';
     case 'DropdownV2':
-      return 'https://docs.tooljet.com/docs/widgets/dropdown';
+      return 'https://docs.tooljet.ai/docs/widgets/dropdown';
     case 'DropDown':
-      return 'https://docs.tooljet.com/docs/widgets/dropdown';
+      return 'https://docs.tooljet.ai/docs/widgets/dropdown';
     case 'MultiselectV2':
-      return 'https://docs.tooljet.com/docs/widgets/multiselect';
+      return 'https://docs.tooljet.ai/docs/widgets/multiselect';
     case 'DaterangePicker':
-      return 'https://docs.tooljet.com/docs/widgets/date-range-picker';
+      return 'https://docs.tooljet.ai/docs/widgets/date-range-picker';
     default:
       return `https://docs.tooljet.io/docs/widgets/${convertToKebabCase(component)}`;
   }
diff --git a/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx b/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
index 46dd0ceb4b..11a9dd6d52 100644
--- a/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
+++ b/frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx
@@ -63,7 +63,7 @@ function DataSourcePicker({ dataSources, sampleDataSource, staticDataSources, da
         <a
           data-cy="querymanager-doc-link"
           target="_blank"
-          href="https://docs.tooljet.com/docs/app-builder/query-panel"
+          href="https://docs.tooljet.ai/docs/app-builder/query-panel"
           rel="noreferrer"
         >
           documentation
diff --git a/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx b/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
index a81342cbd1..574cfae41a 100644
--- a/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
+++ b/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
@@ -338,10 +338,10 @@ export const QueryManagerBody = ({ darkMode, options, allComponents, apps, appDe
     }
     const isSampleDb = selectedDataSource?.type === DATA_SOURCE_TYPE.SAMPLE;
     const docLink = isSampleDb
-      ? 'https://docs.tooljet.com/docs/data-sources/sample-data-sources'
+      ? 'https://docs.tooljet.ai/docs/data-sources/sample-data-sources'
       : selectedDataSource?.pluginId && selectedDataSource.pluginId.trim() !== ''
-      ? `https://docs.tooljet.com/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource?.kind}/`
-      : `https://docs.tooljet.com/docs/data-sources/${selectedDataSource?.kind}`;
+      ? `https://docs.tooljet.ai/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource?.kind}/`
+      : `https://docs.tooljet.ai/docs/data-sources/${selectedDataSource?.kind}`;
     const selectedDataSourceName =
       dataSourcesKinds.find((dsk) => dsk.kind === selectedDataSource.kind)?.name || selectedDataSource.kind;
     return (
diff --git a/frontend/src/Editor/QueryManager/Components/Transformation.jsx b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
index f106ac06db..54ea247a6c 100644
--- a/frontend/src/Editor/QueryManager/Components/Transformation.jsx
+++ b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
@@ -68,7 +68,7 @@ const EducativeLabel = ({ darkMode }) => {
             faster. It uses OpenAI&apos;s GPT-3.5 to suggest queries based on your data.
           </p>
           <Button
-            onClick={() => window.open('https://docs.tooljet.com/docs/tooljet-copilot', '_blank')}
+            onClick={() => window.open('https://docs.tooljet.ai/docs/tooljet-copilot', '_blank')}
             darkMode={darkMode}
             size="sm"
             classNames="default-secondary-button"
diff --git a/frontend/src/Editor/QueryPanel/QueryCard.jsx b/frontend/src/Editor/QueryPanel/QueryCard.jsx
index 19bb209c52..df9227ffb1 100644
--- a/frontend/src/Editor/QueryPanel/QueryCard.jsx
+++ b/frontend/src/Editor/QueryPanel/QueryCard.jsx
@@ -120,7 +120,7 @@ export const QueryCard = ({ dataQuery, darkMode = false, editorRef, appId, local
                   <a
                     className="text-truncate"
                     data-tooltip-id="query-card-local-ds-info"
-                    href="https://docs.tooljet.com/docs/data-sources/overview/#changing-scope-of-data-sources-on-an-app-created-on-older-versions-of-tooljet"
+                    href="https://docs.tooljet.ai/docs/data-sources/overview/#changing-scope-of-data-sources-on-an-app-created-on-older-versions-of-tooljet"
                     target="_blank"
                     rel="noreferrer"
                   >
diff --git a/frontend/src/Editor/Viewer/viewer.scss b/frontend/src/Editor/Viewer/viewer.scss
index 5498d1ada4..c84875178b 100644
--- a/frontend/src/Editor/Viewer/viewer.scss
+++ b/frontend/src/Editor/Viewer/viewer.scss
@@ -29,9 +29,17 @@
 .released-version-no-header-mbl-preview {
   position: absolute;
   left: 50%;
-  border-radius: 100px;
   padding : 2px 8px;
+  background-color: unset !important;
   z-index: 1000;
+
+  .preview-chip {
+    color: var(--text-on-solid);
+  }
+  .preview-settings {
+    margin-left: 6px;
+    padding: 4px;
+  }
 }
 
 .preview-settings-overlay {
@@ -83,11 +91,6 @@
   z-index: 1201;
 }
 
-.bm-menu-wrap,
-.bm-overlay {
-  right: calc(50vw - 225px) !important;
-  width: calc(450px - 68px) !important;
-}
 
 .powered-with-tj {
   cursor: pointer;
diff --git a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
index 6b011fd082..473985efbe 100644
--- a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
@@ -125,9 +125,9 @@ export const dropdownV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -177,33 +177,33 @@ export const dropdownV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -214,7 +214,7 @@ export const dropdownV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {
@@ -335,14 +335,14 @@ export const dropdownV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       labelWidth: { value: '33' },
       auto: { value: '{{true}}' },
       fieldBorderRadius: { value: '6' },
-      selectedTextColor: { value: '#1B1F24' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      errTextColor: { value: '#D72D39' },
-      fieldBackgroundColor: { value: '#fff' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
       direction: { value: 'left' },
       alignment: { value: 'side' },
       padding: { value: 'default' },
@@ -350,7 +350,7 @@ export const dropdownV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/frontend/src/Editor/WidgetManager/configs/filepicker.js b/frontend/src/Editor/WidgetManager/configs/filepicker.js
index 8df492daa5..0854d156cf 100644
--- a/frontend/src/Editor/WidgetManager/configs/filepicker.js
+++ b/frontend/src/Editor/WidgetManager/configs/filepicker.js
@@ -16,86 +16,72 @@ export const filepickerConfig = {
       handle: 'clearFiles',
       displayName: 'Clear Files',
     },
+    {
+      handle: 'setFileName',
+      displayName: 'Set File Name',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set Visibility',
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set Loading',
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set Disable',
+    },
   ],
   properties: {
-    instructionText: {
+    label: {
       type: 'code',
-      displayName: 'Instruction text',
+      displayName: 'Label',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'Instruction text',
+        defaultValue: 'Label',
       },
+      accordian: 'Data',
+    },
+    instructionText: {
+      type: 'code',
+      displayName: 'Placeholder',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'Drag and drop files or click here to upload',
+      },
+      accordian: 'Data',
     },
     enableDropzone: {
-      type: 'code',
+      type: 'toggle',
       displayName: 'Use drop zone',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    enablePicker: {
-      type: 'code',
-      displayName: 'Use file picker',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    enableMultiple: {
-      type: 'code',
-      displayName: 'Pick multiple files',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      accordian: 'Data',
     },
-    maxFileCount: {
-      type: 'code',
-      displayName: 'Max file count',
+    enablePicker: {
+      type: 'toggle',
+      displayName: 'Use file picker',
       validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 2,
+        schema: { type: 'boolean' },
+        defaultValue: false,
       },
+      accordian: 'Data',
     },
-    fileType: {
-      type: 'code',
-      displayName: 'Accept file types',
+    enableMultiple: {
+      type: 'toggle',
+      displayName: 'Allow picking multiple files',
       validation: {
-        schema: {
-          type: 'string',
-        },
-        defaultValue: 'image/*',
-      },
-    },
-    maxSize: {
-      type: 'code',
-      displayName: 'Max size limit (Bytes)',
-      validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 1048576,
-      },
-    },
-    minSize: {
-      type: 'code',
-      displayName: 'Min size limit (Bytes)',
-      validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 50,
+        schema: { type: 'boolean' },
+        defaultValue: false,
       },
+      accordian: 'Data',
     },
     parseContent: {
       type: 'toggle',
-      displayName: 'Parse content',
+      displayName: 'Enable parsing',
       validation: {
         schema: {
           type: 'boolean',
@@ -122,26 +108,52 @@ export const filepickerConfig = {
         defaultValue: 'auto-detect',
       },
     },
-  },
-  events: {
-    onFileSelected: { displayName: 'On File Selected' },
-    onFileLoaded: { displayName: 'On File Loaded' },
-    onFileDeselected: { displayName: 'On File Deselected' },
-  },
-  styles: {
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Show loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
     visibility: {
       type: 'toggle',
       displayName: 'Visibility',
+      section: 'additionalActions',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
+        schema: { type: 'boolean' },
         defaultValue: true,
       },
     },
     disabledState: {
       type: 'toggle',
       displayName: 'Disable',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '',
+      },
+    },
+  },
+  events: {
+    onFileSelected: { displayName: 'On File Selected' },
+    onFileLoaded: { displayName: 'On File Loaded' },
+    onFileDeselected: { displayName: 'On File Deselected' },
+  },
+  validation: {
+    enableValidation: {
+      type: 'toggle',
+      displayName: 'Make this field mandatory',
       validation: {
         schema: {
           type: 'boolean',
@@ -149,21 +161,120 @@ export const filepickerConfig = {
         defaultValue: false,
       },
     },
-    borderRadius: {
+    fileType: {
       type: 'code',
-      displayName: 'Border radius',
+      displayName: 'Accept file types',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'image/*',
+      },
+    },
+    minSize: {
+      type: 'code',
+      displayName: 'Min size limit (Bytes)',
       validation: {
         schema: {
           type: 'union',
           schemas: [{ type: 'string' }, { type: 'number' }],
         },
-        defaultValue: 4,
+        defaultValue: 50,
+      },
+    },
+    maxSize: {
+      type: 'code',
+      displayName: 'Max size limit (Bytes)',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 1048576,
+      },
+    },
+    minFileCount: {
+      type: 'code',
+      displayName: 'Min file count',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 2,
+      },
+    },
+    maxFileCount: {
+      type: 'code',
+      displayName: 'Max file count',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 2,
       },
     },
   },
+  styles: {
+    dropzoneTitleColor: {
+      type: 'colorSwatches',
+      displayName: 'Title',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    dropzoneActiveColor: {
+      type: 'colorSwatches',
+      displayName: 'Active color',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    dropzoneErrorColor: {
+      type: 'colorSwatches',
+      displayName: 'Error color',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    containerBackgroundColor: {
+      type: 'colorSwatches',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'Container',
+    },
+    containerBorder: {
+      type: 'colorSwatches',
+      displayName: 'Border',
+      validation: { schema: { type: 'string' }, defaultValue: 'transparent' },
+      accordian: 'Container',
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border Radius',
+      validation: { schema: { type: 'number' }, defaultValue: 6 },
+      accordian: 'Container',
+    },
+    containerBoxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box shadow',
+      validation: { schema: { type: 'string' }, defaultValue: '0px 1px 3px rgba(0,0,0,0.1)' },
+      accordian: 'Container',
+    },
+    containerPadding: {
+      type: 'numberInput',
+      displayName: 'Padding',
+      validation: { schema: { type: 'string' }, defaultValue: 16 },
+      accordian: 'Container',
+    },
+  },
   exposedVariables: {
-    file: [{ name: '', content: '', dataURL: '', type: '', parsedData: '' }],
+    file: [{ name: '', content: '', dataURL: '', type: '', parsedValue: null }],
     isParsing: false,
+    isValid: true,
+    fileSize: 0,
+    isMandatory: false,
+    isLoading: false,
+    isVisible: true,
+    isDisabled: false,
   },
   definition: {
     others: {
@@ -171,22 +282,44 @@ export const filepickerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      label: { value: 'Upload files' },
       instructionText: { value: 'Drag and drop files here or click to select files' },
       enableDropzone: { value: '{{true}}' },
       enablePicker: { value: '{{true}}' },
-      maxFileCount: { value: '{{2}}' },
       enableMultiple: { value: '{{false}}' },
-      fileType: { value: '{{"image/*"}}' },
-      maxSize: { value: '{{1048576}}' },
-      minSize: { value: '{{50}}' },
       parseContent: { value: '{{false}}' },
       parseFileType: { value: 'auto-detect' },
+      loadingState: { value: '{{false}}' },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
-      borderRadius: { value: '{{4}}' },
+      borderRadius: { value: '{{6}}' },
+      dropzoneTitleColor: { value: 'var(--cc-primary-text)' },
+      dropzoneActiveColor: { value: 'var(--cc-primary-brand)' },
+      dropzoneErrorColor: { value: 'var(--cc-error-systemStatus)' },
+      containerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      containerBorder: { value: 'var(--cc-default-border)' },
+      containerBoxShadow: { value: '0px 1px 3px rgba(0,0,0,0.1)' },
+      containerPadding: { value: '16px' },
+    },
+    validation: {
+      enableValidation: { value: '{{false}}' },
+      fileType: { value: '{{}}' },
+      minSize: { value: '{{50}}' },
+      maxSize: { value: '{{51200000}}' },
+      minFileCount: { value: '{{0}}' },
+      maxFileCount: { value: '{{2}}' },
+    },
+    validation: {
+      enableValidation: { value: '{{false}}' },
+      fileType: { value: '{{}}' },
+      minSize: { value: '{{50}}' },
+      maxSize: { value: '{{51200000}}' },
+      minFileCount: { value: '{{0}}' },
+      maxFileCount: { value: '{{2}}' },
     },
   },
 };
diff --git a/frontend/src/Editor/WidgetManager/configs/modalV2.js b/frontend/src/Editor/WidgetManager/configs/modalV2.js
index 2318a986f8..630810326f 100644
--- a/frontend/src/Editor/WidgetManager/configs/modalV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/modalV2.js
@@ -154,7 +154,7 @@ export const modalV2Config = {
   ],
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
@@ -162,7 +162,7 @@ export const modalV2Config = {
       },
     },
     footerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Footer background color',
       validation: {
         schema: { type: 'string' },
@@ -170,7 +170,7 @@ export const modalV2Config = {
       },
     },
     bodyBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
@@ -178,7 +178,7 @@ export const modalV2Config = {
       },
     },
     triggerButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button background color',
       validation: {
         schema: { type: 'string' },
@@ -186,7 +186,7 @@ export const modalV2Config = {
       },
     },
     triggerButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button text color',
       validation: {
         schema: { type: 'string' },
@@ -258,7 +258,7 @@ export const modalV2Config = {
       headerBackgroundColor: { value: '#ffffffff' },
       footerBackgroundColor: { value: '#ffffffff' },
       bodyBackgroundColor: { value: '#ffffffff' },
-      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonBackgroundColor: { value: 'var(--cc-primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },
diff --git a/frontend/src/Editor/WidgetManager/configs/radioButtonV2.js b/frontend/src/Editor/WidgetManager/configs/radioButtonV2.js
index 2ff6ca6c7c..aba2e47d81 100644
--- a/frontend/src/Editor/WidgetManager/configs/radioButtonV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/radioButtonV2.js
@@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
       isFxNotRequired: true,
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
@@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     switchOnBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked background',
       validation: {
         schema: { type: 'string' },
@@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     switchOffBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked background',
       validation: {
         schema: { type: 'string' },
@@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     optionsTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: {
         schema: { type: 'string' },
@@ -286,7 +286,7 @@ export const radiobuttonV2Config = {
       labelWidth: { value: '20' },
       borderColor: { value: '#FFFFFF' },
       switchOffBackgroundColor: { value: '#FFFFFF' },
-      switchOnBackgroundColor: { value: '#4368E3' },
+      switchOnBackgroundColor: { value: 'var(--cc-primary-brand)' },
       handleColor: { value: '#FFFFFF' },
       optionsTextColor: { value: '#11181C' },
       padding: { value: 'default' },
diff --git a/frontend/src/Editor/WidgetManager/configs/rangeslider.js b/frontend/src/Editor/WidgetManager/configs/rangeslider.js
index 541ed95209..369fb7caf4 100644
--- a/frontend/src/Editor/WidgetManager/configs/rangeslider.js
+++ b/frontend/src/Editor/WidgetManager/configs/rangeslider.js
@@ -12,9 +12,25 @@ export const rangeSliderConfig = {
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    enableTwoHandle: {
+      type: 'switch',
+      displayName: 'Slider type',
+      options: [
+        { displayName: 'Slider', value: 'slider' },
+        { displayName: 'Range slider', value: 'rangeSlider' },
+      ],
+      isFxNotRequired: true,
+      defaultValue: { value: 'slider' },
+      fullWidth: true,
+    },
+    label: {
+      type: 'code',
+      displayName: 'Label',
+      validation: { schema: { type: 'string' }, defaultValue: 'Label' },
+    },
     min: {
       type: 'number',
-      displayName: 'Min',
+      displayName: 'Min value',
       validation: {
         schema: { type: 'number' },
         defaultValue: 0,
@@ -22,67 +38,216 @@ export const rangeSliderConfig = {
     },
     max: {
       type: 'number',
-      displayName: 'Max',
+      displayName: 'Max value',
       validation: {
         schema: { type: 'number' },
         defaultValue: 100,
       },
     },
     value: {
-      type: 'code',
-      displayName: 'Value',
+      type: 'number',
+      displayName: 'Default value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'slider',
+      },
+
       validation: {
         schema: {
-          type: 'union',
-          schemas: [{ type: 'array', element: { type: 'number' } }, { type: 'number' }],
+          schema: { type: 'number' },
+          defaultValue: 50,
         },
-        defaultValue: 50,
       },
     },
-    enableTwoHandle: {
+    startValue: {
+      type: 'number',
+      displayName: 'Default start value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'rangeSlider',
+      },
+
+      validation: {
+        schema: {
+          schema: { type: 'number' },
+          defaultValue: 50,
+        },
+      },
+    },
+    endValue: {
+      type: 'number',
+      displayName: 'Default end value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'rangeSlider',
+      },
+
+      validation: {
+        schema: {
+          schema: { type: 'number' },
+          defaultValue: 80,
+        },
+      },
+    },
+    stepSize: {
+      type: 'number',
+      displayName: 'Step size',
+      validation: {
+        schema: { type: 'number' },
+        defaultValue: 1,
+      },
+    },
+    schema: {
+      type: 'code',
+      displayName: 'Set marks',
+    },
+    loadingState: {
       type: 'toggle',
-      displayName: 'Two handles',
+      displayName: 'Show loading state',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
     },
   },
   events: {
     onChange: { displayName: 'On change' },
   },
   styles: {
-    lineColor: {
-      type: 'color',
-      displayName: 'Line color',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#375FCF',
-      },
+    color: {
+      type: 'colorSwatches',
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'label',
     },
-    handleColor: {
-      type: 'color',
-      displayName: 'Handle color',
+    alignment: {
+      type: 'switch',
+      displayName: 'Alignment',
+      validation: { schema: { type: 'string' }, defaultValue: 'side' },
+      options: [
+        { displayName: 'Side', value: 'side' },
+        { displayName: 'Top', value: 'top' },
+      ],
+      accordian: 'label',
+    },
+    direction: {
+      type: 'switch',
+      displayName: '',
+      validation: { schema: { type: 'string' }, defaultValue: 'left' },
+      showLabel: false,
+      isIcon: true,
+      options: [
+        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+      ],
+      accordian: 'label',
+      isFxNotRequired: true,
+    },
+    width: {
+      type: 'slider',
+      displayName: 'Width',
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    auto: {
+      type: 'checkbox',
+      displayName: 'auto',
+      showLabel: false,
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    lineColor: {
+      type: 'colorSwatches',
+      displayName: 'Track',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: '#E4E7EB',
       },
+      accordian: 'slider',
     },
     trackColor: {
-      type: 'color',
-      displayName: 'Track color',
+      type: 'colorSwatches',
+      displayName: 'Accent',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
       },
+      accordian: 'slider',
     },
-    visibility: {
-      type: 'code',
-      displayName: 'Visibility',
+    handleColor: {
+      type: 'colorSwatches',
+      displayName: 'Handle',
       validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
+        schema: { type: 'string' },
+        defaultValue: '#FFFFFF',
       },
+      accordian: 'slider',
+    },
+    handleBorderColor: {
+      type: 'colorSwatches',
+      displayName: 'Handle border',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ACB2B9',
+      },
+      accordian: 'slider',
+    },
+    markerLabel: {
+      type: 'colorSwatches',
+      displayName: 'Marker label',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'slider',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
+      isFxNotRequired: true,
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'container',
     },
     padding: {
       type: 'switch',
@@ -100,13 +265,52 @@ export const rangeSliderConfig = {
   },
   exposedVariables: {
     value: null,
+    label: 'Label',
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
   },
+  actions: [
+    {
+      handle: 'setValue',
+      displayName: 'Set value',
+      params: [{ handle: 'num1', displayName: 'Value', defaultValue: 'New value' }],
+    },
+    {
+      handle: 'setRangeValue',
+      displayName: 'Set range value',
+      params: [
+        { handle: 'num1', displayName: 'Min value' },
+        { handle: 'num2', displayName: 'Max value' },
+      ],
+    },
+    {
+      handle: 'reset',
+      displayName: 'Reset',
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
   definition: {
     others: {
       showOnDesktop: { value: true },
       showOnMobile: { value: false },
     },
     properties: {
+      label: { value: 'Label' },
       min: {
         value: '{{0}}',
       },
@@ -116,13 +320,37 @@ export const rangeSliderConfig = {
       value: {
         value: '{{50}}',
       },
-      enableTwoHandle: { value: false },
+      startValue: {
+        value: '{{50}}',
+      },
+      endValue: {
+        value: '{{80}}',
+      },
+      enableTwoHandle: { value: 'slider' },
+      stepSize: {
+        value: '{{1}}',
+      },
+      schema: {
+        value: "{{[\t{label: '25%',value: 25},{label: '50%',value: 50},{label: '75%',value: 75}\t]}}",
+      },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      loadingState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      lineColor: { value: '' },
-      handleColor: { value: '' },
-      trackColor: { value: '' },
+      lineColor: { value: '#E4E7EB' },
+      handleColor: { value: '#FFFFFF' },
+      handleBorderColor: { value: '#ACB2B9' },
+      trackColor: { value: 'var(--primary-brand)' },
+      markerLabel: { value: '#1B1F24' },
+      direction: { value: 'left' },
+      width: { value: '{{33}}' },
+      alignment: { value: 'side' },
+      color: { value: '#1B1F24' },
+      auto: { value: '{{true}}' },
+      padding: { value: 'default' },
       visibility: { value: '{{true}}' },
       padding: { value: 'default' },
     },
diff --git a/frontend/src/Editor/WidgetManager/configs/tabs.js b/frontend/src/Editor/WidgetManager/configs/tabs.js
index 0ed1e2a320..57fcbc90a1 100644
--- a/frontend/src/Editor/WidgetManager/configs/tabs.js
+++ b/frontend/src/Editor/WidgetManager/configs/tabs.js
@@ -6,52 +6,47 @@ export const tabsConfig = {
     width: 30,
     height: 300,
   },
-  defaultChildren: [
-    {
-      componentName: 'Image',
-      layout: {
-        top: 60,
-        left: 17,
-        height: 100,
-        width: 7,
-      },
-      tab: 0,
-      properties: ['source'],
-      defaultValue: {
-        source: 'https://uploads-ssl.webflow.com/6266634263b9179f76b2236e/62666392f32677b5cb2fb84b_logo.svg',
-      },
-    },
-    {
-      componentName: 'Text',
-      layout: {
-        top: 100,
-        left: 5,
-        height: 50,
-        width: 34,
-      },
-      tab: 1,
-      properties: ['text'],
-      defaultValue: {
-        text: 'Open-source low-code framework to build & deploy internal tools within minutes.',
-      },
-    },
-    {
-      componentName: 'Table',
-      layout: {
-        top: 0,
-        left: 1,
-        width: 41,
-        height: 250,
-      },
-      tab: 2,
-    },
-  ],
   component: 'Tabs',
   others: {
     showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    useDynamicOptions: {
+      type: 'toggle',
+      displayName: 'Dynamic options',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
     tabs: {
       type: 'code',
       displayName: 'Tabs',
@@ -89,6 +84,7 @@ export const tabsConfig = {
     hideTabs: {
       type: 'toggle',
       displayName: 'Hide tabs',
+      section: 'additionalActions',
       validation: {
         schema: {
           type: 'boolean',
@@ -99,6 +95,7 @@ export const tabsConfig = {
     renderOnlyActiveTab: {
       type: 'toggle',
       displayName: 'Render only active tab',
+      section: 'additionalActions',
       validation: {
         schema: {
           type: 'boolean',
@@ -106,37 +103,97 @@ export const tabsConfig = {
         defaultValue: false,
       },
     },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: '' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
+    },
   },
   events: { onTabSwitch: { displayName: 'On tab switch' } },
   styles: {
-    highlightColor: {
+    headerBackground: {
       type: 'color',
-      displayName: 'Highlight color',
+      displayName: 'Header background',
       validation: {
         schema: { type: 'string' },
         defaultValue: '#375FCF',
       },
+      accordian: 'Tabs',
     },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
+    divider: {
+      type: 'color',
+      displayName: 'Divider',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
-        defaultValue: false,
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
       },
+      accordian: 'Tabs',
     },
-    disabledState: {
-      type: 'toggle',
-      displayName: 'Disable',
+    unselectedText: {
+      type: 'color',
+      displayName: 'Unselected text',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
-        defaultValue: false,
+        schema: { type: 'string' },
+        defaultValue: '#375FCF',
       },
+      accordian: 'Tabs',
     },
+    selectedText: {
+      type: 'color',
+      displayName: 'Selected text',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#375FCF',
+      },
+      accordian: 'Tabs',
+    },
+    hoverBackground: {
+      type: 'color',
+      displayName: 'Hover Background',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'Tabs',
+    },
+    unselectedIcon: {
+      type: 'color',
+      displayName: 'Unselected Icon',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'Tabs',
+    },
+    selectedIcon: {
+      type: 'color',
+      displayName: 'Selected Icon',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'Tabs',
+    },
+    accent: {
+      type: 'color',
+      displayName: 'Accent',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'Tabs',
+    },
+    // highlightColor: {
+    //   type: 'color',
+    //   displayName: 'Highlight color',
+    //   validation: {
+    //     schema: { type: 'string' },
+    //     defaultValue: '#375FCF',
+    //   },
+    //   accordian: 'Tabs',
+    // },
     tabWidth: {
       type: 'select',
       displayName: 'Tab width',
@@ -144,6 +201,54 @@ export const tabsConfig = {
         { name: 'Auto', value: 'auto' },
         { name: 'Equally split', value: 'split' },
       ],
+      accordian: 'Tabs',
+    },
+    transition: {
+      type: 'select',
+      displayName: 'Transition',
+      options: [
+        { name: 'Slide', value: 'slide' },
+        { name: 'None', value: 'none' },
+      ],
+      accordian: 'Tabs',
+    },
+    border: {
+      type: 'color',
+      displayName: 'Border',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#375FCF',
+      },
+      accordian: 'Container',
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border radius',
+      validation: {
+        validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
+        defaultValue: false,
+      },
+      accordian: 'Container',
+    },
+    boxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box shadow',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
+      accordian: 'Container',
+      conditionallyRender: {
+        key: 'type',
+        value: 'primary',
+      },
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: { schema: { type: 'string' } },
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'Container',
     },
   },
   actions: [
@@ -157,28 +262,152 @@ export const tabsConfig = {
         },
       ],
     },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setTabDisable',
+      displayName: 'Set Tab disable',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
+    {
+      handle: 'setTabLoading',
+      displayName: 'Set Tab Loading',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
+    {
+      handle: 'setTabVisibility',
+      displayName: 'Set Tab visibility',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
   ],
-  exposedVariables: { currentTab: '' },
+  exposedVariables: {
+    currentTab: '',
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      useDynamicOptions: { value: '{{false}}' },
       tabs: {
         value:
           "{{[ \n\t\t{ title: 'Home', id: '0' }, \n\t\t{ title: 'Profile', id: '1' }, \n\t\t{ title: 'Settings', id: '2' } \n ]}}",
       },
+      tabItems: {
+        value: [
+          {
+            id: 't0',
+            title: 'Tab 1',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+          {
+            id: 't1',
+            title: 'Tab 2',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+          {
+            id: 't2',
+            title: 'Tab 3',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+        ],
+      },
       defaultTab: { value: '0' },
       hideTabs: { value: false },
       renderOnlyActiveTab: { value: false },
+      loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
+      headerBackground: { value: '#FFFFFF' },
+      divider: { value: '#CCD1D5' },
+      unselectedText: { value: '#6A727C' },
+      selectedText: { value: '#1B1F24' },
       highlightColor: { value: '#375FCF' },
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
+      hoverBackground: { value: '#1B1F24' },
+      unselectedIcon: { value: '#CCD1D5' },
+      selectedIcon: { value: '#CCD1D5' },
+      accent: { value: '#4368E3' },
       tabWidth: { value: 'auto' },
+      transition: { value: 'slide' },
+      borderRadius: { value: '{{6}}' },
+      border: { value: '#CCD1D5' },
+      boxShadow: { value: '0px 0px 0px 0px #121212' },
+      padding: { value: 'default' },
     },
   },
 };
diff --git a/frontend/src/Editor/WidgetManager/configs/text.js b/frontend/src/Editor/WidgetManager/configs/text.js
index ada530d127..031fca30d9 100644
--- a/frontend/src/Editor/WidgetManager/configs/text.js
+++ b/frontend/src/Editor/WidgetManager/configs/text.js
@@ -29,6 +29,15 @@ export const textConfig = {
       },
       showLabel: false,
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Show loading state',
@@ -268,6 +277,7 @@ export const textConfig = {
     properties: {
       textFormat: { value: 'html' },
       text: { value: `Hello {{globals.currentUser.firstName}}👋` },
+      dynamicHeight: { value: `{{false}}` },
       loadingState: { value: `{{false}}` },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index b7b2a5980b..b69ce93e0e 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -118,6 +118,8 @@ class HomePageComponent extends React.Component {
       shouldAutoImportPlugin: false,
       dependentPlugins: [],
       dependentPluginsDetail: {},
+      importedAppName: {},
+      isAppImportEditable: false,
       showMissingGroupsModal: false,
       missingGroups: [],
       missingGroupsExpanded: false,
@@ -655,6 +657,8 @@ class HomePageComponent extends React.Component {
       lastCommitUser: last_commit_user,
       lastPushDate: new Date(lastpush_date),
       organizationGitId: orgGit?.id,
+      appName: this.state.importedAppName,
+      allowEditing: this.state.isAppImportEditable,
     };
     gitSyncService
       .importGitApp(body)
@@ -912,6 +916,25 @@ class HomePageComponent extends React.Component {
       appType !== 'workflow'
     );
   };
+  handleAppNameChange = (e) => {
+    const newAppName = e.target.value;
+    const { appsFromRepos } = this.state;
+    let validationMessage = {};
+    if (!newAppName.trim()) {
+      validationMessage = { message: 'App name cannot be empty' };
+    } else if (newAppName.length > 50) {
+      validationMessage = { message: 'App name cannot exceed 50 characters' };
+    } else {
+      const matchingApp = Object.values(appsFromRepos).find((app) => app.git_app_name === newAppName.trim());
+      if (matchingApp?.app_name_exist === 'EXIST') {
+        validationMessage = { message: 'App name already exists' };
+      }
+    }
+    this.setState({
+      importedAppName: newAppName,
+      importingGitAppOperations: validationMessage,
+    });
+  };
   render() {
     const {
       apps,
@@ -1192,13 +1215,16 @@ class HomePageComponent extends React.Component {
                       options={this.generateOptionsForRepository()}
                       disabled={importingApp}
                       onChange={(newVal) => {
-                        this.setState({ selectedAppRepo: newVal }, () => {
-                          if (appsFromRepos[newVal]?.app_name_exist === 'EXIST') {
-                            this.setState({ importingGitAppOperations: { message: 'App name already exists' } });
-                          } else {
-                            this.setState({ importingGitAppOperations: {} });
+                        this.setState(
+                          { selectedAppRepo: newVal, importedAppName: appsFromRepos[newVal]?.git_app_name },
+                          () => {
+                            if (appsFromRepos[newVal]?.app_name_exist === 'EXIST') {
+                              this.setState({ importingGitAppOperations: { message: 'App name already exists' } });
+                            } else {
+                              this.setState({ importingGitAppOperations: {} });
+                            }
                           }
-                        });
+                        );
                       }}
                       width={'100%'}
                       value={selectedAppRepo}
@@ -1217,12 +1243,11 @@ class HomePageComponent extends React.Component {
                       <div className="tj-app-input">
                         <input
                           type="text"
-                          disabled={true}
-                          value={appsFromRepos[selectedAppRepo].git_app_name}
-                          className={cx('form-control font-weight-400 disabled', {
+                          value={this.state.importedAppName}
+                          className={cx('form-control font-weight-400', {
                             'tj-input-error-state': importingGitAppOperations?.message,
                           })}
-                          data-cy="app-name-field"
+                          onChange={this.handleAppNameChange}
                         />
                       </div>
                       <div>
@@ -1233,9 +1258,24 @@ class HomePageComponent extends React.Component {
                           )}
                           data-cy="app-name-helper-text"
                         >
-                          {importingGitAppOperations?.message
-                            ? importingGitAppOperations?.message
-                            : 'App name is inherited from git repository and cannot be edited'}
+                          {importingGitAppOperations?.message}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="application-editable-checkbox-container">
+                      <input
+                        className="form-check-input"
+                        checked={this.state.isAppImportEditable}
+                        type="checkbox"
+                        onChange={() =>
+                          this.setState((prevState) => ({ isAppImportEditable: !prevState.isAppImportEditable }))
+                        }
+                      />
+                      Make application editable
+                      <div className="helper-text">
+                        <div className="tj-text tj-text-xsm"></div>
+                        <div className="tj-text-xxsm">
+                          Enabling this allows editing and git sync push/pull access in development.
                         </div>
                       </div>
                     </div>
@@ -1464,12 +1504,6 @@ class HomePageComponent extends React.Component {
                     classes={`${this.props.darkMode ? 'theme-dark dark-theme m-3 trial-banner' : 'm-3 trial-banner'}`}
                   />
                 )}
-              {this.shouldShowMigrationBanner() && (
-                <UserGroupMigrationBanner
-                  classes={`${this.props.darkMode ? 'theme-dark dark-theme m-3 trial-banner' : 'm-3 trial-banner'}`}
-                  closeBanner={this.setShowGroupMigrationBanner}
-                />
-              )}
 
               <OrganizationList customStyle={{ marginBottom: isAdmin || isBuilder ? '' : '0px' }} />
             </div>
diff --git a/frontend/src/HomePage/MigrationModal/UserGroupMigrationModal.jsx b/frontend/src/HomePage/MigrationModal/UserGroupMigrationModal.jsx
index b21cc87b77..0bbff23191 100644
--- a/frontend/src/HomePage/MigrationModal/UserGroupMigrationModal.jsx
+++ b/frontend/src/HomePage/MigrationModal/UserGroupMigrationModal.jsx
@@ -3,7 +3,7 @@ import { Modal } from 'react-bootstrap';
 import './migration-modal.scss';
 
 export const UserGroupMigrationModal = ({ errorMsg, onHide, ...props }) => {
-  const documentationUrl = 'https://docs.tooljet.com/docs/tutorial/manage-users-groups';
+  const documentationUrl = 'https://docs.tooljet.ai/docs/tutorial/manage-users-groups';
   const userIcon = () => {
     return (
       <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/ToolJetUI/List/List.jsx b/frontend/src/ToolJetUI/List/List.jsx
index d37920c4bf..6b9c2c10fa 100644
--- a/frontend/src/ToolJetUI/List/List.jsx
+++ b/frontend/src/ToolJetUI/List/List.jsx
@@ -30,6 +30,7 @@ function ListItem({
   showCopyColumnOption = false,
   showVisibilityIcon = false,
   isColumnVisible = true,
+  showIconOnHover = false,
   columnType,
   isDeprecated,
   ...restProps
@@ -47,8 +48,8 @@ function ListItem({
         <div className="row">
           {(Icon || isDraggable) && (
             <div className="col-auto d-flex align-items-center">
-              {!isHovered && Icon && <Icon />}
               <SortableList.DragHandle show={isDraggable} />
+              <div className="draggable-icon-container">{(!isHovered || showIconOnHover) && Icon && <Icon />}</div>
             </div>
           )}
           <div
diff --git a/frontend/src/ToolJetUI/Tabs/tabs.scss b/frontend/src/ToolJetUI/Tabs/tabs.scss
index 523016cd92..767092558c 100644
--- a/frontend/src/ToolJetUI/Tabs/tabs.scss
+++ b/frontend/src/ToolJetUI/Tabs/tabs.scss
@@ -9,6 +9,7 @@
   .nav-item {
     font-size: 12px !important;
     line-height: 20px !important;
+    font-family: 'IBM Plex Sans';
 
     button {
       height: 36px;
@@ -17,7 +18,6 @@
 
   .nav-item .nav-link {
     color: var(--slate11) !important;
-    background-color: var(--base) !important;
   }
 
   .nav-tabs .nav-link.active {
diff --git a/frontend/src/_components/DarkModeToggle.jsx b/frontend/src/_components/DarkModeToggle.jsx
index c492117dd7..b5e314f651 100644
--- a/frontend/src/_components/DarkModeToggle.jsx
+++ b/frontend/src/_components/DarkModeToggle.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSpring, animated } from 'react-spring';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
@@ -6,20 +6,33 @@ import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
+import useAppDarkMode from '@/_hooks/useAppDarkMode';
 
 export const DarkModeToggle = function DarkModeToggle({
   darkMode = false,
   switchDarkMode,
   tooltipPlacement = 'bottom',
   showText = false,
+  toggleForCanvas = false,
 }) {
   const setResolvedGlobals = useStore((state) => state.setResolvedGlobals, shallow);
-  const appMode = useStore((state) => state.globalSettings.appMode, shallow);
+  const setGlobalSettings = useStore((state) => state.setGlobalSettings, shallow);
+  const globalSettings = useStore((state) => state.globalSettings, shallow);
+  const [appLevelDarkMode, setAppLevelDarkMode] = useState(false);
+
+  const { onAppModeChange, appMode } = useAppDarkMode();
 
   const toggleDarkMode = () => {
-    switchDarkMode(!darkMode);
-    if (appMode === 'auto') {
-      setResolvedGlobals('theme', { name: !darkMode ? 'dark' : 'light' });
+    if (toggleForCanvas) {
+      const exposedTheme = !appLevelDarkMode ? 'dark' : 'light';
+      setResolvedGlobals('theme', { name: exposedTheme });
+      setGlobalSettings({ ...globalSettings, appMode: exposedTheme });
+      setAppLevelDarkMode(!appLevelDarkMode);
+    } else {
+      switchDarkMode(!darkMode);
+      if (appMode === 'auto') {
+        setResolvedGlobals('theme', { name: !darkMode ? 'dark' : 'light' });
+      }
     }
   };
 
diff --git a/frontend/src/_components/EnableAutomaticSSOLoginModal.jsx b/frontend/src/_components/EnableAutomaticSSOLoginModal.jsx
index 3d5988e0df..78ce5047f0 100644
--- a/frontend/src/_components/EnableAutomaticSSOLoginModal.jsx
+++ b/frontend/src/_components/EnableAutomaticSSOLoginModal.jsx
@@ -29,7 +29,7 @@ function EnableAutomaticSSOLoginModal({ show, enableAutomaticSSOLogin, setShowMo
         <br />
         <br />
         <a
-          href="https://docs.tooljet.com/docs/user-authentication/sso/auto-sso-login/"
+          href="https://docs.tooljet.ai/docs/user-authentication/sso/auto-sso-login/"
           target="_blank"
           rel="noopener noreferrer"
           style={{
diff --git a/frontend/src/_components/NotificationBanner/NotificationBanner.jsx b/frontend/src/_components/NotificationBanner/NotificationBanner.jsx
index 8b61b37f1d..e9402e6e1f 100644
--- a/frontend/src/_components/NotificationBanner/NotificationBanner.jsx
+++ b/frontend/src/_components/NotificationBanner/NotificationBanner.jsx
@@ -3,7 +3,7 @@ import { Alert } from '@/_ui/Alert/Alert';
 import './resources/styles.scss';
 
 const DEFAULT_CONFIG = {
-  docsLink: ' https://docs.tooljet.com/docs/data-sources/local-data-sources-migration',
+  docsLink: ' https://docs.tooljet.ai/docs/data-sources/local-data-sources-migration',
 };
 
 const DEFAULT_MESSAGES = {
diff --git a/frontend/src/_components/OverflowTooltip.jsx b/frontend/src/_components/OverflowTooltip.jsx
index f5c4dd1cfd..c732d421de 100644
--- a/frontend/src/_components/OverflowTooltip.jsx
+++ b/frontend/src/_components/OverflowTooltip.jsx
@@ -6,6 +6,7 @@ export default function OverflowTooltip({
   className,
   whiteSpace = 'nowrap',
   placement = 'bottom',
+  boxWidth,
   maxLetters,
   ...rest
 }) {
@@ -17,7 +18,7 @@ export default function OverflowTooltip({
       textElementRef.current.scrollWidth > textElementRef.current.clientWidth ||
         textElementRef.current.clientHeight < textElementRef.current.scrollHeight - 4
     );
-  }, [children]);
+  }, [children, boxWidth]);
 
   const displayText =
     maxLetters && typeof children === 'string' && children.length > maxLetters
diff --git a/frontend/src/_components/SortableList/SortableList.jsx b/frontend/src/_components/SortableList/SortableList.jsx
index 4825aabfe1..d3047c961c 100644
--- a/frontend/src/_components/SortableList/SortableList.jsx
+++ b/frontend/src/_components/SortableList/SortableList.jsx
@@ -36,7 +36,7 @@ export function SortableList({ items, onChange, renderItem }) {
       }}
     >
       <SortableContext items={items}>
-        {items.map((item) => (
+        {items?.map((item) => (
           <React.Fragment key={item.id}>{renderItem(item)}</React.Fragment>
         ))}
       </SortableContext>
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index e989164690..f28f4a372d 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -2379,7 +2379,7 @@ export const buildAppDefinition = (data) => {
     canvasMaxWidth: 100,
     canvasMaxWidthType: '%',
     canvasMaxHeight: 2400,
-    canvasBackgroundColor: '#edeff5',
+    canvasBackgroundColor: 'var(--cc-appBackground-surface)',
     backgroundFxQuery: '',
   };
 
diff --git a/frontend/src/_helpers/auth-header.js b/frontend/src/_helpers/auth-header.js
index 498adf4ae0..cae96e2c12 100644
--- a/frontend/src/_helpers/auth-header.js
+++ b/frontend/src/_helpers/auth-header.js
@@ -1,8 +1,8 @@
 import { authenticationService } from '@/_services';
 import { handleUnSubscription } from './utils';
+import { getPatToken } from '@/AppBuilder/EmbedApp';
 
 export function authHeader(isMultipartData = false, current_organization_id) {
-  // return authorization header with jwt token
   let session = authenticationService.currentSessionValue;
 
   let subsciption;
@@ -13,9 +13,9 @@ export function authHeader(isMultipartData = false, current_organization_id) {
     handleUnSubscription(subsciption);
   }
 
-  const wid = current_organization_id || session.current_organization_id;
+  const wid = current_organization_id || session?.current_organization_id;
 
-  return {
+  const headers = {
     ...(!isMultipartData && {
       'Content-Type': 'application/json',
     }),
@@ -23,4 +23,17 @@ export function authHeader(isMultipartData = false, current_organization_id) {
       'tj-workspace-id': wid,
     }),
   };
+
+  // ✅ Explicitly remove PAT on login or logout routes
+  const path = window.location.pathname;
+  const isLoginOrLogout = path.includes('/login') || path.includes('/logout');
+
+  if (!isLoginOrLogout) {
+    const pat = getPatToken();
+    if (pat) {
+      headers['tj_auth_token'] = pat;
+    }
+  }
+
+  return headers;
 }
diff --git a/frontend/src/_helpers/authorizeWorkspace.js b/frontend/src/_helpers/authorizeWorkspace.js
index ae9b657d68..2c20ec2eea 100644
--- a/frontend/src/_helpers/authorizeWorkspace.js
+++ b/frontend/src/_helpers/authorizeWorkspace.js
@@ -30,7 +30,8 @@ export const authorizeWorkspace = () => {
       updateCurrentSession({
         triggeredOnce: true,
       });
-      const isApplicationsPath = getPathname(null, true).startsWith('/applications/');
+      const isApplicationsPath =
+        getPathname(null, true).startsWith('/applications/') || getPathname(null, true).startsWith('/embed-apps/');
       const appId = isApplicationsPath ? getPathname().split('/')[2] : null;
       /* CASE-1 */
       sessionService
diff --git a/frontend/src/_helpers/routes.js b/frontend/src/_helpers/routes.js
index 495ca04e18..a45ecf389c 100644
--- a/frontend/src/_helpers/routes.js
+++ b/frontend/src/_helpers/routes.js
@@ -136,6 +136,7 @@ export const getWorkspaceIdOrSlugFromURL = () => {
     'confirm-invite',
     'oauth2',
     'applications',
+    'embed-apps',
     'integrations',
     'settings',
     'licence',
@@ -182,6 +183,7 @@ export const returnWorkspaceIdIfNeed = (path) => {
   if (path) {
     const paths = [
       '/applications/',
+      '/embed-apps/',
       '/integrations',
       '/instance-settings',
       '/organization-invitations/',
diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js
index a2285ed6db..62fec9f432 100644
--- a/frontend/src/_helpers/utils.js
+++ b/frontend/src/_helpers/utils.js
@@ -19,6 +19,16 @@ import { componentTypes } from '@/Editor/WidgetManager/components';
 
 export const reservedKeyword = ['app', 'window'];
 
+// Function to format file size
+export function formatFileSize(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024; // Use 1024 for binary KB/MB etc
+  const dm = 2;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
 export const Constants = {
   Global: 'Global',
   Secret: 'Secret',
@@ -1387,7 +1397,7 @@ export const computeColor = (styleDefinition, value, meta) => {
       return value;
     }
     if (meta?.displayName == 'Text color') {
-      value = value == '#FFFFFF' ? '#1B1F24' : value;
+      value = value == '#FFFFFF' ? 'var(--cc-primary-text)' : value;
       return value;
     }
     if (meta?.displayName == 'Icon color') {
diff --git a/frontend/src/_hooks/useDynamicHeight.jsx b/frontend/src/_hooks/useDynamicHeight.jsx
new file mode 100644
index 0000000000..b015595a6f
--- /dev/null
+++ b/frontend/src/_hooks/useDynamicHeight.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react';
+
+export const useDynamicHeight = ({
+  dynamicHeight,
+  id,
+  height,
+  value,
+  adjustComponentPositions,
+  currentLayout,
+  width,
+  isContainer = false,
+  componentCount = 0,
+}) => {
+  const prevDynamicHeight = useRef(dynamicHeight);
+  const initialRender = useRef(true);
+
+  useEffect(() => {
+    if (dynamicHeight) {
+      const element = document.querySelector(`.ele-${id}`);
+      if (element) {
+        element.style.height = 'auto';
+        // Wait for the next frame to ensure the height has updated
+        requestAnimationFrame(() => {
+          adjustComponentPositions(id, currentLayout, false, isContainer, initialRender.current);
+        });
+      }
+    } else if (!dynamicHeight && prevDynamicHeight.current) {
+      const element = document.querySelector(`.ele-${id}`);
+      if (element) {
+        element.style.height = `${height}px`;
+        requestAnimationFrame(() => {
+          adjustComponentPositions(id, currentLayout, false, isContainer, initialRender.current);
+        });
+      }
+    }
+    prevDynamicHeight.current = dynamicHeight;
+    initialRender.current = false;
+  }, [dynamicHeight, id, value, adjustComponentPositions, currentLayout, height, width, isContainer, componentCount]);
+
+  return;
+};
diff --git a/frontend/src/_services/appPermission.service.js b/frontend/src/_services/appPermission.service.js
index fd2438f058..1aab6e97e1 100644
--- a/frontend/src/_services/appPermission.service.js
+++ b/frontend/src/_services/appPermission.service.js
@@ -11,6 +11,10 @@ export const appPermissionService = {
   createQueryPermission,
   updateQueryPermission,
   deleteQueryPermission,
+  getComponentPermission,
+  createComponentPermission,
+  updateComponentPermission,
+  deleteComponentPermission,
 };
 
 function getPagePermission(appId, pageId) {
@@ -89,3 +93,49 @@ function deleteQueryPermission(appId, queryId) {
   };
   return fetch(`${config.apiUrl}/app-permissions/${appId}/queries/${queryId}`, requestOptions).then(handleResponse);
 }
+
+function getComponentPermission(appId, componentId) {
+  const requestOptions = {
+    method: 'GET',
+    headers: authHeader(),
+    credentials: 'include',
+  };
+  return fetch(`${config.apiUrl}/app-permissions/${appId}/components/${componentId}`, requestOptions).then(
+    handleResponse
+  );
+}
+
+function createComponentPermission(appId, componentId, body) {
+  const requestOptions = {
+    method: 'POST',
+    headers: authHeader(),
+    credentials: 'include',
+    body: JSON.stringify(body),
+  };
+  return fetch(`${config.apiUrl}/app-permissions/${appId}/components/${componentId}`, requestOptions).then(
+    handleResponse
+  );
+}
+
+function updateComponentPermission(appId, componentId, body) {
+  const requestOptions = {
+    method: 'PUT',
+    headers: authHeader(),
+    credentials: 'include',
+    body: JSON.stringify(body),
+  };
+  return fetch(`${config.apiUrl}/app-permissions/${appId}/components/${componentId}`, requestOptions).then(
+    handleResponse
+  );
+}
+
+function deleteComponentPermission(appId, componentId) {
+  const requestOptions = {
+    method: 'DELETE',
+    headers: authHeader(),
+    credentials: 'include',
+  };
+  return fetch(`${config.apiUrl}/app-permissions/${appId}/components/${componentId}`, requestOptions).then(
+    handleResponse
+  );
+}
diff --git a/frontend/src/_services/appVersion.service.js b/frontend/src/_services/appVersion.service.js
index e798817521..5423c94ec6 100644
--- a/frontend/src/_services/appVersion.service.js
+++ b/frontend/src/_services/appVersion.service.js
@@ -16,6 +16,7 @@ export const appVersionService = {
   clonePage,
   findAllEventsWithSourceId,
   updateAppMode,
+  cloneGroup,
 };
 
 function getAll(appId) {
@@ -37,9 +38,11 @@ function promoteEnvironment(appId, versionId, currentEnvironmentId) {
   };
   return fetch(`${config.apiUrl}/v2/apps/${appId}/versions/${versionId}/promote`, requestOptions).then(handleResponse);
 }
-function getAppVersionData(appId, versionId) {
+function getAppVersionData(appId, versionId, mode) {
   const requestOptions = { method: 'GET', headers: authHeader(), credentials: 'include' };
-  return fetch(`${config.apiUrl}/v2/apps/${appId}/versions/${versionId}`, requestOptions).then(handleResponse);
+  return fetch(`${config.apiUrl}/v2/apps/${appId}/versions/${versionId}?mode=${mode}`, requestOptions).then(
+    handleResponse
+  );
 }
 
 function create(appId, versionName, versionFromId, currentEnvironmentId) {
@@ -148,7 +151,7 @@ function autoSaveApp(
 function updateAppMode(appId, versionId, appMode) {
   const requestOptions = {
     method: 'PUT',
-    headers: authHeader(),    
+    headers: authHeader(),
     credentials: 'include',
     body: JSON.stringify({ appId, versionId, appMode }),
   };
@@ -208,6 +211,18 @@ function clonePage(appId, versionId, pageId) {
   );
 }
 
+function cloneGroup(appId, versionId, pageId) {
+  const requestOptions = {
+    method: 'POST',
+    headers: authHeader(),
+    credentials: 'include',
+  };
+  return fetch(
+    `${config.apiUrl}/v2/apps/${appId}/versions/${versionId}/pages/${pageId}/clone-group`,
+    requestOptions
+  ).then(handleResponse);
+}
+
 function findAllEventsWithSourceId(appId, versionId, sourceId = undefined) {
   const requestOptions = {
     method: 'GET',
diff --git a/frontend/src/_services/apps.service.js b/frontend/src/_services/apps.service.js
index c29dea481a..2f1d933398 100644
--- a/frontend/src/_services/apps.service.js
+++ b/frontend/src/_services/apps.service.js
@@ -172,7 +172,7 @@ function setVisibility(appId, visibility) {
     credentials: 'include',
     body: JSON.stringify({ app: { is_public: visibility } }),
   };
-  return fetch(`${config.apiUrl}/apps/${appId}`, requestOptions).then(handleResponse);
+  return fetch(`${config.apiUrl}/apps/${appId}/public`, requestOptions).then(handleResponse);
 }
 
 function setMaintenance(appId, value) {
diff --git a/frontend/src/_services/auditLogsService.js b/frontend/src/_services/auditLogsService.js
index 6cb5579b2f..6f19631a89 100644
--- a/frontend/src/_services/auditLogsService.js
+++ b/frontend/src/_services/auditLogsService.js
@@ -1,7 +1,7 @@
 import config from 'config';
 import { authHeader, handleResponse } from '@/_helpers';
 
-export const auditLogsService = { index, getLicenseTerms, getMaxDurationForAuditLogs };
+export const auditLogsService = { index, getLicenseTerms, getMaxDurationForAuditLogs, getResources };
 
 function index(params) {
   const requestOptions = {
@@ -22,3 +22,8 @@ function getMaxDurationForAuditLogs() {
   const requestOptions = { method: 'GET', headers: authHeader(), credentials: 'include' };
   return fetch(`${config.apiUrl}/license/audit-logs/max-duration`, requestOptions).then(handleResponse);
 }
+
+function getResources() {
+  const requestOptions = { method: 'GET', headers: authHeader(), credentials: 'include' };
+  return fetch(`${config.apiUrl}/audit-logs/resources`, requestOptions).then(handleResponse);
+}
diff --git a/frontend/src/_services/git_sync.service.js b/frontend/src/_services/git_sync.service.js
index a710691872..25df504e10 100644
--- a/frontend/src/_services/git_sync.service.js
+++ b/frontend/src/_services/git_sync.service.js
@@ -210,7 +210,7 @@ function updateAppEditState(appId, allowEditing) {
     credentials: 'include',
     body: JSON.stringify(body),
   };
-  return fetch(`${config.apiUrl}/git-sync/appGit/${appId}`, requestOptions).then(handleResponse);
+  return fetch(`${config.apiUrl}/app-git/${appId}/configs`, requestOptions).then(handleResponse);
 }
 function getAppGitConfigs(workspaceId, versionId) {
   const requestOptions = {
@@ -219,8 +219,6 @@ function getAppGitConfigs(workspaceId, versionId) {
     credentials: 'include',
   };
 
-  return fetch(`${config.apiUrl}/git-sync/${workspaceId}/app/${versionId}/configs`, requestOptions).then(
-    handleResponse
-  );
+  return fetch(`${config.apiUrl}/app-git/${workspaceId}/app/${versionId}/configs`, requestOptions).then(handleResponse);
 }
 // Remove all app-git api's to separate service from here.
diff --git a/frontend/src/_services/groupPermission.v2.service.js b/frontend/src/_services/groupPermission.v2.service.js
index bb5973aa3f..c2c2be06d6 100644
--- a/frontend/src/_services/groupPermission.v2.service.js
+++ b/frontend/src/_services/groupPermission.v2.service.js
@@ -120,26 +120,37 @@ function createGranularPermission(id, body) {
     credentials: 'include',
     body: JSON.stringify(body),
   };
-  return fetch(`${config.apiUrl}/v2/group-permissions/${id}/granular-permissions`, requestOptions).then(handleResponse);
+  const type = body.type === 'app' ? 'app' : 'data-source';
+  return fetch(`${config.apiUrl}/v2/group-permissions/${id}/granular-permissions/${type}`, requestOptions).then(
+    handleResponse
+  );
 }
 
-function updateGranularPermission(id, body) {
+function updateGranularPermission(permission, body) {
+  const id = permission.id;
   const requestOptions = {
     method: 'PUT',
     headers: authHeader(),
     credentials: 'include',
     body: JSON.stringify(body),
   };
-  return fetch(`${config.apiUrl}/v2/group-permissions/granular-permissions/${id}`, requestOptions).then(handleResponse);
+  const type = permission.type === 'app' ? 'app' : 'data-source';
+  return fetch(`${config.apiUrl}/v2/group-permissions/granular-permissions/${type}/${id}`, requestOptions).then(
+    handleResponse
+  );
 }
 
-function deleteGranularPermission(id) {
+function deleteGranularPermission(permission) {
+  const id = permission.id;
   const requestOptions = {
     method: 'DELETE',
     headers: authHeader(),
     credentials: 'include',
   };
-  return fetch(`${config.apiUrl}/v2/group-permissions/granular-permissions/${id}`, requestOptions).then(handleResponse);
+  const type = permission.type === 'app' ? 'app' : 'data-source';
+  return fetch(`${config.apiUrl}/v2/group-permissions/granular-permissions/${type}/${id}`, requestOptions).then(
+    handleResponse
+  );
 }
 
 function fetchGranularPermissions(groupPermissionId) {
diff --git a/frontend/src/_services/organization.service.js b/frontend/src/_services/organization.service.js
index 481e8576c4..9a1c5aa183 100644
--- a/frontend/src/_services/organization.service.js
+++ b/frontend/src/_services/organization.service.js
@@ -14,6 +14,8 @@ export const organizationService = {
   checkWorkspaceUniqueness,
   updateOrganization,
   setDefaultWorkspace,
+  updateOrganizationStatus,
+  updateInheritSSO,
 };
 
 function getUsersByValue(searchInput) {
@@ -33,17 +35,27 @@ function createOrganization(data) {
   return fetch(`${config.apiUrl}/organizations`, requestOptions).then(handleResponse);
 }
 
-// Used for making API calls to update workspace name/slug and workspace status
-function updateOrganization(params, organizationId = '') {
+// Used for making API calls to update workspace name/slug
+function updateOrganization(params) {
   const requestOptions = {
     method: 'PATCH',
     headers: authHeader(),
     credentials: 'include',
     body: JSON.stringify(params),
   };
-  return fetch(`${config.apiUrl}/organizations${organizationId ? `/${organizationId}` : ''}`, requestOptions).then(
-    handleResponse
-  );
+  return fetch(`${config.apiUrl}/organizations`, requestOptions).then(handleResponse);
+}
+
+//used to update workspace status
+function updateOrganizationStatus(params, organizationId = '') {
+  const requestOptions = {
+    method: 'PATCH',
+    headers: authHeader(),
+    credentials: 'include',
+    body: JSON.stringify(params),
+  };
+  const status = params.status === 'active' ? 'unarchive' : 'archive';
+  return fetch(`${config.apiUrl}/organizations/${status}/${organizationId}`, requestOptions).then(handleResponse);
 }
 
 //  Used for making API calls to update details related to organization's SSO configurations
@@ -60,6 +72,16 @@ function editOrganization(params, organizationId = '') {
   ).then(handleResponse);
 }
 
+function updateInheritSSO(params) {
+  const requestOptions = {
+    method: 'PATCH',
+    headers: authHeader(),
+    credentials: 'include',
+    body: JSON.stringify(params),
+  };
+  return fetch(`${config.apiUrl}/login-configs/organization-general/inherit-sso`, requestOptions).then(handleResponse);
+}
+
 function getOrganizations(status = 'active', currentPage = undefined, perPageCount = undefined, name = undefined) {
   const query = queryString.stringify({
     status,
diff --git a/frontend/src/_services/session.service.js b/frontend/src/_services/session.service.js
index c09043d4a9..d7eeabead3 100644
--- a/frontend/src/_services/session.service.js
+++ b/frontend/src/_services/session.service.js
@@ -29,6 +29,10 @@ function logout(avoidRedirection = false, organizationId = null) {
   const workspaceId = getWorkspaceId() || organizationId;
 
   const redirectToLoginPage = () => {
+    // ✅ Notify parent if embedded
+    if (window.self !== window.top) {
+      window.parent.postMessage({ type: 'TJ_EMBED_APP_LOGOUT' }, '*');
+    }
     const loginPath = (window.public_config?.SUB_PATH || '/') + 'login' + `${workspaceId ? `/${workspaceId}` : ''}`;
     if (avoidRedirection) {
       window.location.href = loginPath;
diff --git a/frontend/src/_styles/components.scss b/frontend/src/_styles/components.scss
index cbe60f8621..f5b999747f 100644
--- a/frontend/src/_styles/components.scss
+++ b/frontend/src/_styles/components.scss
@@ -127,7 +127,6 @@ $btn-dark-color: #FFFFFF;
 
 
 .page-selector-panel-body {
-  padding: 4px;
   border-right: 1px solid #DFE3E6;
   padding-left:16px;
   padding-right:16px;
diff --git a/frontend/src/_styles/designtheme.scss b/frontend/src/_styles/designtheme.scss
index 52ce379af0..bfdb6cee41 100644
--- a/frontend/src/_styles/designtheme.scss
+++ b/frontend/src/_styles/designtheme.scss
@@ -164,7 +164,7 @@
 
 
     // new design theme
-    
+    --primary-brand: #4A6DD9;
     --primary-accent-strong: #4A6DD9;
     --primary-accent-subtle: rgba(74, 109, 217, 30%);
     --primary-white: #FAFCFF;
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index 6a0311b0c4..2f5dde474b 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/frontend/src/_styles/left-sidebar.scss
@@ -631,16 +631,16 @@
   .tj-list-item-selected {
     .custom-icon {
         svg {
-            color: #4368E3;
-            stroke: #4368E3;
+            color: var(--icon-accent);
+            stroke: var(--icon-accent);
             
         }
     }
   }
     .custom-icon {
         svg {
-          color: #6A727C;
-          stroke: #6A727C;
+          color: var(--icon-default);
+          stroke: var(--icon-default);
       }
     }
 
@@ -657,30 +657,42 @@
 
 
 .viewer-page-handler {
-  height: 32px;
-  padding: 0;
+  height: 40px;
 
   .card {
     background: none;
     border: none;
     box-shadow: none;
     display: flex;
+    height: 40px !important;
+    padding: 8px 12px !important;
+    color: var(--text-placeholder) !important;
+    font-weight: 400 !important;
+    font-size: 14px !important;
   }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     margin-right: 5px;
+    stroke: var(--icon-weak);
   }
 
-  .card,
   .card-body {
-    padding: 3px;
-    height: 32px;
+    padding: 0px !important;
+    display: flex;
+    gap: 6px;
+    align-items: center;
   }
 
   .card.active {
     background: #fff;
+    font-weight: 500 !important;
+    color: var(--text-default) !important;
+
+    svg {
+      stroke: var(--icon-accent);
+    }
   }
 }
 
@@ -696,17 +708,33 @@
 
 .mobile-header {
   width: 100%;
+  .header-container {
+    background-color: unset !important;
+  }
+  .navbar {
+    border-bottom: 0px !important;
+  }
+}
+
+.bm-item {
+  &:last-child {
+    width: 78% !important;
+    position: fixed;
+    bottom: 0px;
+    background: var(--background-surface-layer-01);
+  }
 }
 
 .bm-item .pages-container {
   width: 100% !important;
-  padding: 6px 0.3rem;
 
   .card.active {
     width: inherit;
-    background-color: var(--slate5);
-    color: var(--slate12);
+    background-color: var(--background-accent-weak);
+    color: var(--text-default);
     border: none;
+    padding: 0px;
+    border-radius: 6px;
   }
 }
 
diff --git a/frontend/src/_styles/pages-sidebar.scss b/frontend/src/_styles/pages-sidebar.scss
index cfed5d8a51..d37dbdba5c 100644
--- a/frontend/src/_styles/pages-sidebar.scss
+++ b/frontend/src/_styles/pages-sidebar.scss
@@ -2,114 +2,6 @@
     --tran-01: all 0.3s ease, background-color 0s, color 0s, border-color 0s;
 }
 
-.viewer {
-
-    .page-name,
-    .navigation-area,
-    .tj-list-item,
-    .canvas-box {
-        transition: var(--tran-01);
-    }
-
-    .page-name {
-        font-size: 12px;
-    }
-
-    .navigation-area {
-        z-index: 2;
-        border-right: 1px solid var(--slate6);
-
-        .left-sidebar-header-btn {
-            width: 25px;
-            height: 25px;
-        }
-
-        .tj-list-item {
-            width: 96%;
-            justify-content: start;
-        }
-
-        &.close {
-            transform: translateX(-90%);
-
-            .tj-list-item {
-                opacity: 0;
-                display: none;
-            }
-        }
-
-        .pin {
-            position: absolute;
-            right: -30px;
-            top: 3px;
-        }
-
-        &.sidebar-overlay:hover {
-            transform: translateX(0%);
-            box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-
-            .tj-list-item {
-                opacity: 1;
-                display: flex;
-            }
-        }
-
-        &.icon-only {
-            width: 65px !important;
-            padding: 0.5rem;
-
-            .tj-list-item {
-                justify-content: center;
-
-                .custom-icon {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-            }
-        }
-        .accordion-item{
-            border: none;
-        }
-        .accordion-body{
-            padding: 4px 0 4px 16px !important;
-        }
-        .accordion-header{
-            height: auto !important;
-            position: relative;
-            .page-group{
-                height: 32px;
-                display: flex;
-                align-items: center;
-                svg{
-                    height: 18px;
-                    width: 18px;
-                }
-            }
-            .tj-list-item{
-                border:none !important;
-                padding-left: 8px !important;
-                outline: none !important;
-                &:hover{
-                    background: none !important;
-                }
-            }
-            .active-page-group-highlight{
-                height: 32px;
-                width: 5px;
-                background: var(--primary-brand);
-                position: absolute;
-                left: -1rem;
-            }
-        }
-        .accordion-header button{
-            margin: 0;
-            padding: 0 !important;
-        }
-    }
-
-}
-
 .pages-settings {
     .label-style {
         width: unset !important;
@@ -126,6 +18,21 @@
 
     }
 
+    .inspector-component-title-input-holder {
+        .col-1 {
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+        .col-9 {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            width: 73%;
+
+        }
+    }
+
     .settings-tab {
         .field {
             label {
@@ -139,8 +46,8 @@
 }
 
 .icon-selector {
-    width: 25px;
-    height: 25px;
+    width: 21px;
+    height: 21px;
     margin-right: 6px;
     justify-content: center;
 
@@ -172,15 +79,6 @@
             
         }
     }
-    &.is-selected {
-        .icon-selector {
-            svg {
-                color: #4368E3;
-                stroke: #4368E3;
-                
-            }
-        }
-    }
     &.dark-theme {
         .icon-selector {
             svg {
@@ -191,11 +89,11 @@
     }
 }
 
-.active-group{
+.active-group {
     border-left: 2px solid red;
 }
 
-.page-group-collapse-icon{
+.page-group-collapse-icon {
     margin-right: 6px;
     position: relative;
     top: 1px;
@@ -203,31 +101,75 @@
 
 .page-drag-overlay {
     background: var(--slate5);
+
     svg {
         margin-right: 12px;
         width: 20px !important;
         height: 20px !important;
-        color:#6A727C;
+        color: #6A727C;
     }
-    &.dark-theme{
+
+    &.dark-theme {
         color: #fff;
-        svg{
-            color:#fff;
+
+        svg {
+            color: #fff;
         }
     }
 }
 
-.rename-input-buttons{
-    button{
+.rename-input-buttons {
+    button {
         box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.10);
         border: 1px solid #CCD1D5;
     }
 }
 
 #page-settings-tabpane-properties {
+    border: 0px !important;
+    padding: 0px !important;
+    .app-name {
+        width: 100% !important;
+        margin: 0px !important;
+    }
     .form-check-input[type=checkbox] {
         float: right;
     }
+
+    .accordion-header {
+        height: 32px;
+        background-color: var(--interactive-default);
+
+        .accordion-title-text {
+            color: var(--text-default);
+            text-transform: unset !important;
+        }
+    }
+
+    .accordion-body {
+        padding: 16px !important;
+
+        .page-type-buttons-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+        }
+
+        .add-new-page, .more-page-opts {
+            padding: 7px 12px;
+            margin-top: 12px;
+            height: 32px;
+            svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .add-new-page {
+            width: 100%;
+        }
+    }
 }
 
 #page-settings-tabpane-styles {
@@ -236,4 +178,543 @@
             padding: 0px !important;
         }
     }
+}
+
+.pages-and-groups-list {
+    .page-menu-item {
+        .icon-selector {
+            svg {
+                width: 16px !important;
+                height: 16px !important;
+            }
+        }
+    }
+    .page-name {
+        font-size: 12px !important;
+        color: var(--text-default) !important;
+    }
+    .accordion-body {
+        gap: 4px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+#sidebar-page-navigation {
+    
+    .navigation-area {
+        // margin-left: 48px;
+        z-index: 1;
+        background: var(--base, #FFF);
+        padding: 1rem;
+        border-right: 1px solid var(--slate6);
+        padding-top: 24px;
+        padding-bottom: 0px;
+        display: flex;
+        flex-direction: column;
+
+        .custom-icon {
+            line-height: 10px !important;
+        }
+
+        .page-dark-mode-btn-wrapper {
+            position: relative;
+            bottom: 2px;
+            justify-content: center;
+            padding-top: 32px;
+            margin-top: auto;
+
+            .sidebar-svg-icon {
+                width: 32px;
+                height: 32px;
+                &:hover {
+                background: var(--slate5);
+                border-radius: 6px;
+                }
+            }
+            
+        }
+
+        .app-name {
+            display: flex;
+            gap: 6px;
+            font-weight: 500;
+            font-size: 16px;
+            color: var(--text-default);
+            margin-left: 0px;
+            align-items: center;
+            width: unset !important;
+            margin-bottom: 20px;
+
+            .collapse-icon {
+                margin-left: auto;
+            }
+
+            &:hover {
+                background: unset !important
+            }
+        }
+
+        .page-name {
+            margin-left: 6px;
+        }
+
+        .left-sidebar-header-btn {
+            width: 25px;
+            height: 25px;
+        }
+
+        .tj-list-item {
+            justify-content: start;
+            padding: 8px 12px;
+            font-weight: 400;
+            color: var(--text-placeholder);
+            outline: none !important;
+        }
+
+        .tj-list-item-selected {
+            color: var(--text-default) !important;
+            font-weight: 500;
+            background: var(--background-accent-weak);
+            outline: none !important;
+        }
+
+        .page-group-wrapper {
+            &.tj-list-item-selected {
+                border-radius: 6px;
+                background: var(--background-accent-weak);
+
+            .page-name {
+                color: var(--text-default) !important;
+                font-weight: 500;
+            }
+            }
+        }
+
+        // &.close {
+        //     // transform: translateX(-90%);
+        //     width: 32px;
+        //     padding: 8px 6px 16px 6px;
+
+        //     .tj-list-item {
+        //         opacity: 0;
+        //         display: none;
+        //     }
+        // }
+
+        // &.sidebar-overlay:hover {
+        //     transform: translateX(0%);
+        //     box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+
+        //     .tj-list-item {
+        //         opacity: 1;
+        //         display: flex;
+        //     }
+        // }
+
+        &.icon-only {
+            width: 44px !important;
+            padding: 8px 6px 16px 6px;
+
+            .page-handler-wrapper {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+
+                .page-group-collapse {
+                    display: none !important;
+                }
+            }
+
+            .tj-list-item {
+                justify-content: center;
+                padding: 8px;
+                width: 32px;
+                height: 32px;
+
+                .page-name {
+                    display: none !important;
+                }
+
+                .custom-icon {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+
+            .app-name {
+                flex-direction: column-reverse;
+                margin-bottom: 0px;
+                .cursor-pointer {
+                   img {
+                        margin-top: 20px;
+                        margin-bottom: 20px;
+                    }
+                   }
+                .icon-btn {
+                    margin-left: 0px;
+                }
+            }
+        }
+
+        &.text-only {
+            .page-name {
+                margin-left: 0px;
+            }
+            
+        }
+        .accordion-item{
+            border: none;
+        }
+        .accordion-body{
+            padding: 4px 0 4px 16px !important;
+        }
+        .accordion-header{
+            height: auto !important;
+            position: relative;
+            .page-group{
+                height: 32px;
+                display: flex;
+                align-items: center;
+                svg{
+                    height: 18px;
+                    width: 18px;
+                }
+            }
+            .tj-list-item{
+                border:none !important;
+                padding-left: 8px !important;
+                outline: none !important;
+                &:hover{
+                    background: none !important;
+                }
+            }
+
+            .active-page-group-highlight{
+                height: 32px;
+                width: 5px;
+                background: var(--primary-brand);
+                position: absolute;
+                left: -1rem;
+            }
+        }
+        .accordion-header button{
+            margin: 0;
+            padding: 0 !important;
+        }
+
+        a.page-link {
+          border-radius: 0;
+          border: 0;
+        }
+
+        a.page-link:hover {
+          color: white;
+          background-color: #4D72FA;
+        }
+
+        a.page-link.active {
+          color: white;
+          background-color: #4D72FA;
+        }
+    }
+
+    .navigation-area {        
+        overflow: auto !important;
+
+        &.position-top {
+            flex-direction: row;
+            position: sticky !important;
+            top: 55px !important;
+            width: 100% !important;
+            height: 60px !important;
+            display: flex;
+            padding-top: 0px;
+            overflow: hidden !important;
+            justify-content: space-between;
+
+            .page-handler-wrapper {
+                width: 100%;
+                align-items: center;
+                gap: 1px;
+            }
+
+            .page-dark-mode-btn-wrapper {
+                padding: 0px;
+                margin-left: auto;
+                margin-top: 0px;
+                padding-left: 15px;
+                bottom: 0px !important;
+            }
+
+            .accordion-item {
+                .page-group-collapse {
+                    right: 4px;
+                    top: 9px;
+                    transform: rotate(30deg);
+                }
+                .tj-list-item {
+                    padding-right: 0px !important;
+                    width: unset !important;
+                }
+            }
+
+            .accordion-body {
+               &.show {
+                    z-index: 2;
+                    position: fixed;
+                    background: var(--background-surface-layer-01);
+                    border-radius: 6px;
+                    box-shadow: var(--elevation-200-box-shadow);
+                    padding: 4px !important;
+
+                    .tj-list-item {
+                        padding: 6px 12px !important;
+                    }
+                }
+            }
+
+            .app-name {
+                margin-bottom: 0px;
+                white-space: nowrap;
+                flex-shrink: 0;
+                margin-right: 40px;
+
+                img {
+                    flex-shrink: 0;
+                }
+            }
+
+            .tj-list-item {
+                outline: none !important;
+                padding: 6px 10px;
+                height: 32px;
+            }
+
+            .page-name {
+                width: 100% !important;
+            }
+
+            .position-relative {
+                display: flex;
+            }
+
+            .page-handler-wrapper {
+                display: flex;
+            }
+        }
+
+        &.right-sidebar-open {
+            width: calc(100% + 299px) !important;
+            position: sticky !important;
+
+        }
+
+        &.left-sidebar-open {
+            width: calc(100% + 348px) !important;
+            position: sticky !important;
+
+        }
+
+        &.right-sidebar-open.left-sidebar-open {
+            width: calc(100% + 646px) !important;
+            position: sticky !important;
+        }
+    }
+}
+
+#more-nav-btns {
+    .popover-body{
+        padding: 4px;
+        width: fit-content;
+
+        .tj-list-item{
+            padding: 8px 12px;
+            color: var(--text-placeholder);
+            justify-content: flex-start;
+
+            .page-name {
+                width: 100% !important;
+            }
+
+            .custom-icon {
+                line-height: 10px !important;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+    
+        }
+
+        .accordion-item {
+            border: 0px !important;
+        }
+
+        .accordion-body {
+            padding: 0px 12px !important;
+            padding-left: 28px !important;
+        }
+
+        .accordion-body {
+
+            }
+
+        .page-group-collapse {
+            // right: 4px;
+            transform: rotate(30deg);
+        }
+
+        .page-name {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            margin-left: 6px;
+        }
+
+        .tj-list-item-selected {
+            color: var(--text-default) !important;
+            font-weight: 500;
+            background: var(--background-accent-weak);
+            outline: none !important;
+            .custom-icon {
+                svg {
+                    color: var(--icon-accent);
+                    stroke: var(--icon-accent);
+                    
+                }
+            }
+          }
+            .custom-icon {
+                svg {
+                  color: var(--icon-default);
+                  stroke: var(--icon-default);
+              }
+            }
+        
+            &.dark-theme {
+              .custom-icon {
+                  svg {
+                      color: #ffffff;
+                      stroke: #ffffff;
+                  }
+              }
+          }
+
+          .page-group-wrapper {
+            display: flex;
+            align-items: center;
+            padding: 0px;
+            .tj-list-item {
+                padding-right: 0px;
+                width: unset !important;
+            }
+            &.tj-list-item-selected {
+                border-radius: 6px;
+                background: var(--background-accent-weak);
+
+            .page-name {
+                color: var(--text-default) !important;
+                font-weight: 500;
+            }
+            }
+        }
+    }
+}
+
+.viewer {
+
+    .page-name {
+        font-size: 14px;
+    }
+
+    .flex-grow-1 {
+        &.canvas-box {
+            flex-grow: unset !important;
+
+            #sidebar-page-navigation {
+                .navigation-area {
+                    top: 0px !important;
+                    left: 0px !important;
+                    margin-left: 0px !important;
+                    &.position-top {
+                        width: 100% !important;
+                    }
+                }
+            }
+        }
+    }
+    &.offset-top-bar-navigation {
+        .navbar {
+            height: 32px;
+        }
+
+        .header-container {
+            background-color: var(--background-inverse);
+        }
+        #sidebar-page-navigation {
+        .navigation-area {
+            &.position-top {
+                top: 44px !important;
+            }
+        }
+        }
+    }
+}
+
+
+.icon-btn {
+    padding: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--interactive-hover);
+    }
+}
+
+.page-menu-item {
+    &.is-selected {
+        .action-btn-wrapper {
+            display: flex !important;
+        }
+    }
+
+    &:hover {
+        .action-btn-wrapper {
+            display: flex !important;
+        }
+    }
+    
+    .action-btn-wrapper {
+        &.options-opened {
+            display: flex !important;
+        }
+    }
+    .action-btn-wrapper {
+        display: none;
+        gap:2px;
+        .icon-btn {
+            box-shadow: var(--elevation-100-box-shadow);
+            background-color: var(--button-secondary);
+            border: 1px solid var(--borders-disabled-on-white);
+            padding:4px;
+            width: 21px;
+            height: 21px;
+            border-radius: 4px;
+            &:hover {
+                background-color: var(--button-outline-hover);
+                border-color: var(--border-weak);
+            }
+
+            &:active {
+                background-color: var(--interactive-selected) !important;
+                border-color: var(--interactive-overlay-border-pressed) !important;
+              }
+        }
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/popover.scss b/frontend/src/_styles/popover.scss
index 459518309d..7f7c4385bf 100644
--- a/frontend/src/_styles/popover.scss
+++ b/frontend/src/_styles/popover.scss
@@ -52,6 +52,7 @@ div[data-radix-popper-content-wrapper]:has(.PopoverContent.drawer-height) {
   margin-top: 48px;
   margin-left: 47px !important;
   transform: none !important;
+  z-index: 2 !important;
 }
 
 @-moz-document url-prefix() {
diff --git a/frontend/src/_styles/queryManager.scss b/frontend/src/_styles/queryManager.scss
index 861dbd78fe..2f3674c62f 100644
--- a/frontend/src/_styles/queryManager.scss
+++ b/frontend/src/_styles/queryManager.scss
@@ -93,7 +93,7 @@ $border-radius: 4px;
   height: 400px;
   position: fixed;
   left: 48px;
-  right: 300px;
+  right: 348px;
   bottom: 0;
   overflow-x: hidden;
   flex: 1 1 auto;
diff --git a/frontend/src/_styles/table-component.scss b/frontend/src/_styles/table-component.scss
index 9c4b02a75e..7dc606e435 100644
--- a/frontend/src/_styles/table-component.scss
+++ b/frontend/src/_styles/table-component.scss
@@ -8,8 +8,9 @@
   padding: 8px;
   background-color: 'red !important';
 
+
   &.jet-table {
-    background-color: var(--surfaces-surface-01);
+    background-color: var(--cc-surface1-surface);
     box-shadow: var(--elevation-200-box-shadow);
     border: 1px solid var(--borders-weak-disabled);
   }
@@ -29,7 +30,7 @@
 
   .card-footer,
   .card {
-    background-color: var(--surfaces-surface-01);
+    background-color: var(--cc-surface1-surface);
   }
 
   .card {
@@ -38,6 +39,7 @@
 
   .card-footer {
     padding: 0.75rem;
+    // background-color: var(--cc-surface1-surface) !important;
   }
 
   .card-header {
@@ -61,7 +63,7 @@
 
   .table-row {
     border-top: 0 !important;
-    border-bottom: 1px solid inherit;
+    border-bottom: 1px solid var(--cc-default-border);
   }
 
   .table-bordered> :not(caption)>*>* {
@@ -70,7 +72,7 @@
 
 
   &.jet-table {
-    background-color: var(--surfaces-surface-01);
+    background-color: var(--cc-surface1-surface);
     box-shadow: var(--elevation-200-box-shadow);
     border: 1px solid var(--borders-weak-disabled);
 
@@ -94,7 +96,7 @@
 
         &:focus-visible {
           border-radius: 6px;
-          border: 2px solid var(--primary-accent-strong) !important;
+          border: 2px solid var(--cc-primary-brand) !important;
           // background: var(--base-base, #FFF) !important;
           /* Focus rings/Gray/light */
           // box-shadow: 0px 0px 0px 4px var(--slate6) !important;
@@ -102,7 +104,7 @@
 
         &:focus-within {
           border-radius: 6px;
-          border: 2px solid var(--primary-accent-strong) !important;
+          border: 2px solid var(--cc-primary-brand) !important;
           /* Selected ring/Indigo/light */
           // box-shadow: 0px 0px 0px 1px var(--indigo6) !important;
         }
@@ -120,6 +122,8 @@
     .jet-data-table {
       &::-webkit-scrollbar {
         display: unset !important;
+        width: 8px;
+        height: 8px;
       }
 
       &::-webkit-scrollbar-thumb {
@@ -257,7 +261,7 @@
           top: 0;
           left: 0;
           right: 0;
-          background: var(--surfaces-surface-01) !important;
+          background: var(--cc-surface1-surface) !important;
           box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
             rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
         }
@@ -299,7 +303,7 @@
 
       .table-row:hover,
       .table-row:focus {
-        background: var(--slate4, #ECEEF0) !important;
+        background: var(--cc-table-row-hover, #ECEEF0) !important;
       }
     }
 
@@ -311,13 +315,15 @@
       background: transparent;
     }
 
-    .jet-data-table:hover {
-      overflow-x: auto;
-      overflow-y: auto;
-    }
+    // .jet-data-table:hover {
+    //   overflow-x: auto;
+    //   overflow-y: auto;
+    // }
 
     .jet-data-table {
-      overflow: hidden;
+      overflow-x: auto;
+      overflow-y: auto;
+      scrollbar-color: var(--cc-table-scroll-bar-color) transparent;
 
       .th:first-child,
       td:first-child {
@@ -329,6 +335,8 @@
         border-right: none;
       }
 
+      // overflow: hidden;
+
       .form-check {
         margin-bottom: 0;
       }
@@ -484,7 +492,8 @@
 
   .jet-data-table {
     td {
-      border-bottom: 1px solid #656d7729;
+      // border-bottom: 1px solid #656d7729;
+      border-bottom: none;
 
       // overflow: hidden;
       &:hover {
@@ -503,7 +512,7 @@
 
       &:focus-within:not(.has-actions) {
         border: 1px solid var(--interactive-overlays-focus-outline);
-        background-color: var(--surfaces-surface-01) !important;
+        background-color: var(--cc-surface1-surface) !important;
         box-shadow: var(--elevation-200-box-shadow);
 
         &:has(.long-text-input) {
@@ -597,6 +606,7 @@
           display: flex;
           align-items: center;
           height: 100%;
+          align-self: center;
         }
 
         .react-select__dropdown-indicator {
@@ -614,7 +624,7 @@
 
       &:focus-within {
         border: 1px solid var(--indigo9) !important;
-        background-color: var(--indigo1) !important;
+        background-color: var(--cc-surface1-surface) !important;
 
       }
     }
@@ -644,7 +654,7 @@
   right: 0;
   height: 300px;
   z-index: 100;
-  background-color: var(--surfaces-surface-01) !important;
+  background-color: var(--cc-surface1-surface) !important;
   overflow: hidden;
 }
 
@@ -663,7 +673,7 @@
 */
 // download pop-up in the table widget
 .table-widget-download-popup {
-  background-color: var(--surfaces-surface-01) !important;
+  background-color: var(--cc-surface1-surface) !important;
   color: var(--slate12) !important;
   padding: 4px;
   border-radius: 6px;
@@ -708,7 +718,7 @@
 
 .popover:has(.dropdown-table-column-hide-common) {
   border: 1px solid var(--slate3) !important;
-  background-color: var(--surfaces-surface-01) !important;
+  background-color: var(--cc-surface1-surface) !important;
   padding: 4px;
   border-radius: 6px;
 }
@@ -757,32 +767,32 @@
 .jet-table.table-component {
   .pagination-container {
     input {
-      color: var(--slate12) !important;
       border: 1px solid var(--slate7, #D7DBDF) !important;
-      background: var(--base, #FFF) !important;
+      background-color: var(--cc-surface1-surface)!important;
+      color: var(--cc-primary-text) !important;
 
-      &:hover {
-        border: 1px solid var(--slate8, #C1C8CD) !important;
-        background: var(--slate1, #FBFCFD) !important;
-      }
+      // &:hover {
+      //   border: 1px solid var(--slate8, #C1C8CD) !important;
+      //   background: var(--slate1, #FBFCFD) !important;
+      // }
 
       &:focus-visible {
         border: 1px solid var(--slate7, #D7DBDF) !important;
-        background: var(--base, #FFF) !important;
+        // background: var(--base, #FFF) !important;
         /* Focus rings/Gray/light */
         box-shadow: 0px 0px 0px 4px var(--slate6) !important;
       }
 
-      &:active {
-        border: 1px solid var(--indigo9, #3E63DD) !important;
-        background: var(--indigo2, #F8FAFF) !important;
-        /* Focus rings/Indigo/light */
-        box-shadow: 0px 0px 0px 4px var(--indigo6) !important;
-      }
+      // &:active {
+      //   border: 1px solid var(--indigo9, #3E63DD) !important;
+      //   background: var(--indigo2, #F8FAFF) !important;
+      //   /* Focus rings/Indigo/light */
+      //   box-shadow: 0px 0px 0px 4px var(--indigo6) !important;
+      // }
     }
 
     .total-page-number {
-      color: var(--slate11) !important
+      // color: var(--slate11) !important
     }
   }
 }
@@ -800,12 +810,11 @@
 .jet-table {
   .tr {
     .th {
-      background: var(--surfaces-surface-02);
-      border-bottom: 1px solid var(--slate5, #E6E8EB) !important;
+      background: var(--cc-surface2-surface);
       border-top: 0 !important;
       padding: 6px 12px;
       align-items: center;
-      color: var(--text-primary) !important;
+      // color: var(--text-primary) !important;
       font-weight: 500 !important;
       font-size: 14px !important;
       width: 100%;
@@ -813,7 +822,8 @@
 
       &:hover {
 
-        background: linear-gradient(0deg, var(--surfaces-surface-02), var(--surfaces-surface-02)), linear-gradient(0deg, var(--interactive-overlays-fill-hover), var(--interactive-overlays-fill-hover)) !important;
+        // background: linear-gradient(0deg, var(--surfaces-surface-02), var(--surfaces-surface-02)), linear-gradient(0deg, var(--interactive-overlays-fill-hover), var(--interactive-overlays-fill-hover)) !important;
+        background: var(--cc-table-header-hover) !important;
       }
 
       &:focus-within {
@@ -1027,7 +1037,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: var(--surfaces-surface-01) !important;
+  background-color: var(--cc-surface1-surface) !important;
 
   .table-select-column-type-search-box {
     width: 100%;
@@ -1125,20 +1135,10 @@
 }
 
 .table-select-column-accordian {
-  padding: 0px 16px 0px;
   margin-top: -24px;
 
-  .accordion-button {
-    padding: 16px 0px !important;
-  }
-
-  .accordion-body {
-    padding: 0 !important;
-  }
-
   .accordion-item {
     border-width: 0px 0px 0px 0px !important;
-    border: solid var(--slate5);
   }
 
   .list-group-item {
@@ -1147,12 +1147,15 @@
 }
 
 .table-select-custom-menu-list {
-  box-shadow: var(--elevation-400-box-shadow) !important;
-
+  border-radius: 8px;
+  box-shadow: var(--elevation-400-box-shadow);
   .react-select__menu-list {
     display: flex;
     flex-direction: column;
-    background-color: var(--surfaces-surface-01) !important;
+    border-radius: 8px;
+    box-shadow: var(--elevation-400-box-shadow);
+    background-color: var(--cc-surface1-surface) !important;
+    
 
     .option-wrapper {
       align-items: center;
@@ -1164,7 +1167,7 @@
       }
 
       &:active {
-        background: var(--surfaces-surface-01) !important;
+        background: var(--cc-surface1-surface) !important;
         box-shadow: 0px 0px 0px 4px #DFE3E6;
 
       }
@@ -1336,7 +1339,7 @@
     padding: 0.75rem !important;
     outline: none !important;
     border: 1px solid var(--interactive-overlays-focus-outline) !important;
-    background-color: var(--surfaces-surface-01) !important;
+    background-color: var(--cc-surface1-surface) !important;
     z-index: 99999 !important;
     align-items: flex-start !important;
   }
@@ -1348,7 +1351,7 @@
 
 .overlay-cell-table {
   box-shadow: var(--elevation-400-box-shadow) !important;
-  background: var(--surfaces-surface-01) !important;
+  background: var(--cc-surface1-surface) !important;
   display: inline-flex !important;
   flex-wrap: wrap !important;
   gap: 10px !important;
@@ -1520,4 +1523,70 @@
   border-radius: 6px;
   display: flex;
   justify-content: center;
+}
+
+
+.react-select__single-value, .react-select__multi-value__label {
+  padding: 4px 7px !important;
+}
+
+.table-select-menu-pill {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 2px 6px;
+  padding-left: 6px;
+  box-sizing: border-box;
+  background: var(--surfaces-surface-03);
+}
+
+.table-select-colorpicker {
+  .color-picker-input {
+    width: 120px !important;
+  }
+}
+
+.table-cell {
+  .react-datepicker__month, .react-datepicker__month-container, .react-datepicker, .tj-datepicker-widget-month-selector, .tj-datepicker-widget-year-selector{
+    background-color: var(--cc-surface1-surface) !important;
+  }
+}
+
+
+
+.table-cell {
+  input[type="checkbox"] {
+    position: relative;
+    appearance: none;
+    -webkit-appearance: none;
+    border: 1px solid var(--borders-default);
+    border-radius: 3px;
+    background-color: var(--cc-surface1-surface);
+    cursor: pointer;
+    
+    &:checked {
+      background-color: var(--cc-primary-brand);
+      border-color: var(--cc-primary-brand);
+      
+      &:after {
+        content: '';
+        position: absolute;
+        left: 4px;
+        top: 1px;
+        width: 5px;
+        height: 9px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+    }
+    
+    &:not(:checked) {
+      background-color: var(--cc-surface1-surface);
+      border-color: var(--borders-default);
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss
index 6b021cce0d..ad724a1833 100644
--- a/frontend/src/_styles/tabler.scss
+++ b/frontend/src/_styles/tabler.scss
@@ -5368,7 +5368,7 @@ fieldset:disabled .btn {
     align-items: center;
     justify-content: space-between;
     padding: 1.5rem;
-    border-bottom: 1px solid #e6e8e9;
+    border-bottom: 1px solid var(--cc-default-border, #e6e8e9) !important;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px
 }
@@ -6124,7 +6124,7 @@ fieldset:disabled .btn {
     width: 1.5rem;
     height: 1.5rem;
     vertical-align: text-bottom;
-    border: 2px solid currentColor;
+    border: 2px solid var(--cc-primary-brand);
     border-right-color: transparent;
     border-radius: 50%; 
     -webkit-animation: .75s linear infinite spinner-border;
@@ -6136,7 +6136,7 @@ fieldset:disabled .btn {
     width: 1.5rem;
     height: 1.5rem;
     vertical-align: text-bottom;
-    border: 2px solid var(--primary-brand);
+    border: 2px solid var(--cc-primary-brand);
     border-right-color: transparent;
     border-radius: 50%; 
     -webkit-animation: .75s linear infinite spinner-border;
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 2d3271898f..522a80b68d 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -321,7 +321,7 @@ button {
 }
 
 .accordion-item {
-  border: solid var(--slate5);
+  border: none;
   border-width: 0px 0px 1px 0px;
 }
 
@@ -331,6 +331,13 @@ button {
   background-color: inherit;
 }
 
+.editor-sidebar {
+  .accordion-button {
+    border-radius: 0px !important;
+  }
+}
+
+
 .accordion-button {
   font-size: 14px;
   font-weight: 500 !important;
@@ -347,21 +354,15 @@ button {
 }
 
 .accordion-item-trigger {
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%23ACB2B9"/></svg>') !important;
-  height: 12px !important;
-  width: 12px !important;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
   transition: transform 0.3s;
   display: inherit !important;
-  opacity: 0.7;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
 }
 
 .accordion-item-trigger:not(.collapsed) {
-  transform: rotate(180deg);
-  opacity: 1;
-
+  transform: rotate(90deg);
 }
 
 .accordion-button::after {
@@ -374,7 +375,7 @@ button {
 
 
 .accordion-body {
-  padding: 4px 16px 16px 16px !important;
+  padding: 1rem !important;
 
   .form-label {
     font-weight: 400;
@@ -613,7 +614,7 @@ button {
 
   .editor-sidebar {
     position: fixed;
-    right: 0;
+    right: 48px;
     overflow: hidden;
     width: 300px;
     flex: 1 1 auto;
@@ -622,11 +623,41 @@ button {
     background-color: var(--base);
     background-clip: border-box;
     height: 100vh;
+    z-index: 2;
 
     >div {
       background-color: var(--base);
     }
 
+    .empty-configuration-header {
+      display: flex;
+      padding: 4px 12px;
+      align-items: center;
+      justify-content: space-between;
+
+      .header {
+        color: var(--text-default);
+        font-weight: 500;
+        font-size: 12px;
+      }
+    }
+
+    .no-component-selected {
+      flex-direction: column;
+      height: 100%;
+      padding: 0px 32px;
+
+      .heading {
+        color: var(--text-default);
+        margin-top: 16px;
+      }
+
+      .sub-heading {
+        color: var(--text-default);
+        text-align: center;
+      }
+    }
+
 
     .inspector {
       .form-control-plaintext {
@@ -772,9 +803,9 @@ button {
       height: 100%;
       top: 48px;
       position: fixed;
-      right: 300px;
+      // right: 300px;
       left: 48px;
-      overflow-y: scroll;
+      overflow-y: hidden;
       overflow-x: hidden;
       -webkit-box-pack: center;
       justify-content: center;
@@ -870,26 +901,6 @@ button {
         background-repeat: repeat;
       }
 
-      .navigation-area {
-        background: var(--base, #FFF);
-        padding: 1rem;
-
-        a.page-link {
-          border-radius: 0;
-          border: 0;
-        }
-
-        a.page-link:hover {
-          color: white;
-          background-color: #4D72FA;
-        }
-
-        a.page-link.active {
-          color: white;
-          background-color: #4D72FA;
-        }
-      }
-
     }
   }
 }
@@ -1622,10 +1633,6 @@ button {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none"><path d="M8.19426 3.5L3.80582 3.5C3.22697 3.5 2.86632 4.12791 3.15798 4.6279L5.35221 8.38943C5.64161 8.88556 6.35846 8.88556 6.64787 8.38943L8.8421 4.6279C9.13376 4.12791 8.77311 3.5 8.19426 3.5Z" fill="%23ffffff"/></svg>');
   }
 
-  .accordion-item-trigger {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none"><path d="M8.19426 3.5L3.80582 3.5C3.22697 3.5 2.86632 4.12791 3.15798 4.6279L5.35221 8.38943C5.64161 8.88556 6.35846 8.88556 6.64787 8.38943L8.8421 4.6279C9.13376 4.12791 8.77311 3.5 8.19426 3.5Z" fill="%23ffffff"/></svg>') !important;
-  }
-
   .homepage-body {
     .app-list {
       .app-title {
@@ -1677,7 +1684,7 @@ button {
 .pagination {
   .page-item.active {
     a.page-link {
-      background-color: var(--primary-brand);
+      background-color: var(--cc-primary-brand);
     }
   }
 }
@@ -2341,8 +2348,8 @@ body {
 }
 
 .RichEditor-root {
-  background: #ffffff;
-  border: 1px solid #ddd;
+  background: var(--cc-surface1-surface);
+  border: 1px solid var(--cc-default-border);
   font-family: "Georgia", serif;
   font-size: 14px;
   padding: 15px;
@@ -2362,9 +2369,26 @@ body {
   padding: 15px;
 }
 
+.RichEditor-controls {
+  .dropmenu {
+    .dropdownbtn {
+      color: var(--cc-placeholder-text);
+
+      &:hover {
+        color: var(--cc-primary-brand);
+      }
+    }
+
+    .dropdown-content {
+      color: var(--cc-placeholder-text);
+    }
+  }
+}
+
 .RichEditor-editor .public-DraftEditor-content {
   min-height: 100px;
   overflow-y: scroll;
+  color: var(--cc-primary-text);
 }
 
 .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
@@ -2440,7 +2464,7 @@ body {
 
 .dropmenu:hover {
   .dropdownbtn {
-    color: #5890ff;
+    color: var(--cc-primary-brand);
     background-color: rgba(0, 0, 0, 0.05);
     border-radius: 4px;
   }
@@ -2498,32 +2522,32 @@ body {
 .CalendarDay__selected,
 .CalendarDay__selected:active,
 .CalendarDay__selected:hover {
-  background: var(--primary-brand);
-  border: 1px double var(--primary-brand);
+  background: var(--cc-primary-brand);
+  border: 1px double var(--cc-primary-brand);
 }
 
 .CalendarDay__selected_span {
-  background: var(--primary-brand);
-  border: var(--primary-brand);
+  background: var(--cc-primary-brand);
+  border: var(--cc-primary-brand);
 }
 
 .CalendarDay__selected_span:active,
 .CalendarDay__selected_span:hover {
-  background: var(--primary-brand);
-  border: 1px double var(--primary-brand);
+  background: var(--cc-primary-brand);
+  border: 1px double var(--cc-primary-brand);
   color: #ffffff;
 }
 
 .CalendarDay__hovered_span:active,
 .CalendarDay__hovered_span:hover {
-  background: var(--primary-brand);
-  border: 1px double var(--primary-brand);
+  background: var(--cc-primary-brand);
+  border: 1px double var(--cc-primary-brand);
   color: #ffffff;
 }
 
 .CalendarDay__hovered_span {
-  background: var(--primary-brand);
-  border: 1px double var(--primary-brand);
+  background: var(--cc-primary-brand);
+  border: 1px double var(--cc-primary-brand);
   color: #ffffff;
 }
 
@@ -2800,7 +2824,7 @@ hr {
 }
 
 .config-handle {
-  display: block;
+  display: flex;
 }
 
 .apps-table {
@@ -3056,36 +3080,26 @@ input:focus-visible {
   }
 }
 
-.jet-outline-button {
+.jet-tabs {
+  overflow-y: auto
+}
+
+.jet-btn {
   outline: none;
   border: 1px solid;
 
-
-  &.btn-custom:hover {
+  &:hover {
     background: var(--tblr-btn-color-darker) !important;
   }
 
-  &.btn-custom:active {
+  &:active {
     background: var(--tblr-btn-color-clicked) !important;
-
   }
 }
 
-.jet-tabs {
-  overflow-y: auto
-}
-
 .jet-button {
   outline: none;
   border: 1px solid;
-
-  &.btn-custom:hover {
-    background: var(--tblr-btn-color-darker) !important;
-  }
-
-  &.btn-custom:active {
-    background: var(--tblr-btn-color-clicked) !important;
-  }
 }
 
 .editor-sidebar::-webkit-scrollbar {
@@ -3171,8 +3185,8 @@ input:focus-visible {
 
 .widgets-list {
   --tblr-gutter-x: 0px !important;
-  padding-right: 4px;
-  padding-left: 3px;
+  // padding-right: 4px;
+  // padding-left: 3px;
 }
 
 .global-settings-width-input-container {
@@ -3310,6 +3324,10 @@ input:focus-visible {
     color: inherit;
   }
 
+  .card .table tbody td .html-cell a {
+    color: #206bc4;
+  }
+
   .DateInput {
     background: #1f2936;
   }
@@ -3456,7 +3474,7 @@ input:focus-visible {
 
   .RichEditor-root {
     background: #1f2936;
-    border: 1px solid #2f3c4c;
+    border: 1px solid var(--cc-default-border);
   }
 
   .app-description {
@@ -3818,12 +3836,12 @@ input[type="text"] {
   }
 
   .rmsc {
+    --rmsc-main: var(--cc-primary-brand);
     height: 100%;
     border-radius: inherit;
   }
 
   .rmsc.dark {
-    --rmsc-main: $primary-light;
     --rmsc-hover: #283647;
     --rmsc-selected: #1f2936;
     --rmsc-border: #333333;
@@ -3872,7 +3890,7 @@ input[type="text"] {
 
 .disabled {
   pointer-events: none;
-  opacity: 0.4;
+  opacity: 0.5;
 }
 
 .enable-edit-fields {
@@ -3897,7 +3915,7 @@ input[type="text"] {
   }
 
   .react-datepicker__day--selected {
-    background-color: var(--primary-brand);
+    background-color: var(--cc-primary-brand);
   }
 }
 
@@ -4136,6 +4154,8 @@ input[type="text"] {
 .calendar-widget {
   padding: 10px;
   background-color: white;
+  background-color: var(--cc-primary-brand) !important;
+  border: transparent;
 
   .rbc-day-slot .rbc-event,
   .rbc-day-slot .rbc-background-event {
@@ -4153,6 +4173,7 @@ input[type="text"] {
     .rbc-event-label {
       display: none;
     }
+
   }
 
   .rbc-off-range-bg {
@@ -4447,7 +4468,7 @@ input[type="text"] {
   width: 18px;
   height: 18px;
   border-radius: 6px;
-  background-color: #0091FF;
+  background-color: #ffffff;
   border: 1px solid var(--Border-default, #CCD1D5);
   box-shadow: 0px 1px 0px 0px #e5e5e5;
 }
@@ -5283,11 +5304,17 @@ input[type="text"] {
   }
 
   .inspector-component-title-input-holder {
-    padding: 4px 12px;
+    padding: 2px 12px;
     margin: 0;
     display: flex;
     align-items: center;
     height: 36px;
+    flex-direction: column;
+
+    .icon-btn {
+      width: 32px;
+      height: 32px;
+    }
   }
 }
 
@@ -7116,6 +7143,23 @@ tbody {
   }
 }
 
+.react-datepicker__day,
+.tj-datepicker-widget-month-selector,
+.tj-datepicker-widget-year-selector,
+.react-datepicker__year-text,
+.react-datepicker__month-text {
+  color: var(--cc-primary-text) !important;
+}
+
+.react-datepicker__day--outside-month,
+.react-datepicker__day-name {
+  color: var(--cc-placeholder-text) !important;
+}
+
+.react-datepicker__month-text--selected {
+  color: #fff !important;
+}
+
 .datepicker-widget.theme-dark {
   .react-datepicker__tab-loop {
     .react-datepicker__header {
@@ -7142,8 +7186,10 @@ tbody {
     .react-datepicker__month {
       background-color: #232e3c;
 
+
+
       .react-datepicker__day {
-        color: white;
+
 
         &:hover {
           background-color: #636466;
@@ -7574,6 +7620,15 @@ tbody {
 
   .table-cell {
     padding: 0;
+
+    input[type="checkbox"] {
+      accent-color: var(--cc-primary-brand);
+      background-color: var(--cc-surface1-surface);
+    }
+
+    input[type="checkbox"]:checked::before {
+      background-color: var(--cc-surface1-surface);
+    }
   }
 
   .add-more-columns-btn {
@@ -10880,7 +10935,7 @@ tbody {
 }
 
 .permission-body {
-  
+
   .form-check {
     margin-bottom: 0px !important;
   }
@@ -12670,17 +12725,14 @@ tbody {
                 color: #6b6b6b !important;
               }
             }
-
           }
 
           &:hover {
             background-color: #2b2f31;
           }
-
         }
       }
     }
-
   }
 
   .react-tel-input .country-list .country.highlight {
@@ -12699,7 +12751,6 @@ tbody {
   border-radius: 6px;
   margin-top: -13px;
 
-
   .input-with-icon {
     justify-content: flex-end
   }
@@ -12737,8 +12788,6 @@ tbody {
   font-size: 12px;
   line-height: 20px;
   color: #11181C;
-
-
 }
 
 .maximum-canvas-width-input-select {
@@ -12761,8 +12810,6 @@ tbody {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   border-right: none !important;
-
-
 }
 
 .canvas-background-holder {
@@ -12818,13 +12865,11 @@ tbody {
 }
 
 .export-table-button {
-
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-
 #global-settings-popover.theme-dark {
   background-color: $bg-dark-light !important;
   border: 1px solid #2B2F31;
@@ -12900,7 +12945,6 @@ tbody {
       transform: translate3d(4px, 0, 0);
     }
   }
-
 }
 
 .profile-page-content-wrap {
@@ -12941,7 +12985,6 @@ tbody {
   .workspace-constant-card-body {
     min-height: calc(100vh - 408px);
     background: var(--base);
-
   }
 
   .constant-table-wrapper {
@@ -12971,8 +13014,6 @@ tbody {
   }
 }
 
-
-
 .variables-table-wrapper {
   tr {
     border-width: 0px !important;
@@ -13011,7 +13052,6 @@ tbody {
 
         .card-skeleton-container {
           width: 304px;
-
         }
       }
     }
@@ -13030,10 +13070,7 @@ tbody {
   }
 }
 
-
-
 @media only screen and (max-width: 1583px) and (min-width: 1312px) {
-
   .homepage-app-card-list-item {
     max-width: 264px;
 
@@ -13042,11 +13079,9 @@ tbody {
       width: 109px !important;
     }
   }
-
 }
 
 @media only screen and (min-width: 1728px) {
-
   .homepage-app-card-list-item {
     max-width: 304px;
 
@@ -13183,8 +13218,6 @@ tbody {
   }
 }
 
-
-
 .marketplace-body {
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
@@ -13277,7 +13310,6 @@ tbody {
   }
 }
 
-
 .gitsync-modal-body {
   align-items: center;
   justify-content: center;
@@ -13289,14 +13321,11 @@ tbody {
 
   .loader {
     border: 4px solid #f3f3f3;
-    /* Light gray border */
     border-top: 4px solid #3498db;
-    /* Blue border on top */
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
-    /* Rotation animation */
   }
 
   @keyframes spin {
@@ -14262,10 +14291,10 @@ tbody {
   border-radius: 6px;
 }
 
-.components-container {
-  margin-left: 16px;
-  margin-right: 16px;
-}
+// .components-container {
+//   margin-left: 16px;
+//   margin-right: 16px;
+// }
 
 .draggable-box-wrapper {
   height: 86px;
@@ -14285,6 +14314,8 @@ tbody {
   flex-direction: column;
   padding-bottom: 12px;
   padding-top: 12px;
+  margin-left: 16px;
+  margin-right: 16px;
 }
 
 .widgets-manager-header {
@@ -14313,6 +14344,8 @@ tbody {
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
+  margin-left: 16px;
+  margin-right: 16px;
 }
 
 .release-button {
@@ -14605,10 +14638,10 @@ tbody {
   border-radius: 6px;
 }
 
-.components-container {
-  margin-left: 16px;
-  margin-right: 16px;
-}
+// .components-container {
+//   margin-left: 16px;
+//   margin-right: 16px;
+// }
 
 .draggable-box-wrapper {
   height: 86px;
@@ -14844,6 +14877,7 @@ tbody {
   }
 }
 
+
 .navbar-seperator {
   border: 1px solid var(--slate5, #2B2F31);
   background: var(--slate1, #151718);
@@ -14964,10 +14998,10 @@ tbody {
   border-radius: 6px;
 }
 
-.components-container {
-  margin-left: 16px;
-  margin-right: 16px;
-}
+// .components-container {
+//   margin-left: 16px;
+//   margin-right: 16px;
+// }
 
 .draggable-box-wrapper {
   height: 86px;
@@ -15179,10 +15213,53 @@ tbody {
 }
 
 .canvas-codehinter-container {
+  align-items: center;
+  gap: 5px;
+
   .sketch-picker {
     left: 70px !important;
     top: 207px;
   }
+
+  .hinter-canvas-input {
+    width: 160px;
+    padding: 0px;
+
+    .canvas-hinter-wrap-container {
+      width: 155px;
+    }
+  }
+
+  .fx-canvas {
+    background-color: transparent !important;
+    cursor: pointer;
+    border: none !important;
+
+    .fx-button {
+      height: 24px;
+      width: 26px;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.1s ease, visibility 0.1s ease;
+    }
+
+    .fx-button.active {
+      opacity: 1;
+      visibility: visible;
+      display: flex;
+      background-color: var(--indigo5) !important;
+    }
+
+    &:hover {
+      .fx-button {
+        opacity: 1;
+        visibility: visible;
+        display: flex;
+      }
+    }
+  }
+
+
 }
 
 .debugger-card-body {
@@ -15355,7 +15432,10 @@ tbody {
 
   .create-commit-container,
   .commit-info,
-  .pull-container {
+  .pull-container,
+  .pushpull-container {
+    height: 260px !important;
+
     .form-control {
       font-weight: 400;
       font-size: 12px;
@@ -15824,7 +15904,7 @@ textarea.tj-text-input-widget {
   }
 
   &.is-invalid {
-    border: 1px solid var(--status-error-strong) !important; // For example, a red border for invalid input
+    border: 1px solid var(--cc-error-systemStatus) !important; // For example, a red border for invalid input
   }
 
   &:focus {
@@ -15862,11 +15942,6 @@ textarea.tj-text-input-widget {
   margin-bottom: 4px;
 }
 
-.accordion-header {
-  height: 52px;
-}
-
-
 .CodeMirror-placeholder {
   min-width: 265px !important;
 }
@@ -16047,7 +16122,7 @@ textarea.tj-text-input-widget {
 }
 
 .jet-listview {
-  &:hover {      
+  &:hover {
     &::-webkit-scrollbar-thumb {
       background-color: #6a727c4d !important;
     }
@@ -16222,7 +16297,7 @@ div.ds-svg-container img {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: var(--surfaces-surface-01) !important;
+  background-color: var(--cc-surface1-surface) !important;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 
@@ -16234,7 +16309,14 @@ div.ds-svg-container img {
     background: transparent;
     color: var(--slate12);
     gap: 16px;
+    color: var(--cc-primary-text);
+
+    input::placeholder {
+      color: var(--cc-placeholder-text);
+    }
+
   }
+
 }
 
 .mb-0 {
@@ -16243,11 +16325,27 @@ div.ds-svg-container img {
 
 .tabs-component {
   .tab-pane {
-    top: initial !important;
+    top: initial;
   }
 }
 
 
+.tabs-list {
+  .list-group-item {
+    margin-bottom: 0 !important;
+    background-color: var(--interactive-default) !important;
+  }
+
+  .active-column-list {
+    background-color: var(--interactive-hover) !important;
+  }
+
+  .list-group-item:hover {
+    background-color: var(--interactive-hover) !important;
+  }
+
+}
+
 fieldset:disabled {
   .json-form-wrapper-disabled {
     opacity: 0.5;
@@ -16263,7 +16361,7 @@ fieldset:disabled {
 }
 
 .pdf-retry-button {
-  background-color: var(--primary-brand);
+  background-color: var(--cc-primary-brand);
   color: var(--text-on-solid);
   width: 100px;
   border-radius: 6px;
@@ -16380,11 +16478,26 @@ fieldset:disabled {
 #component-portal,
 .custom-inspector-validation-time-picker {
 
+
+
+
+
+  .react-datepicker__month-container {
+    background-color: var(--cc-surface1-surface) !important;
+    border-top-left-radius: 10px !important;
+    border-bottom-left-radius: 10px !important;
+  }
+
+  .custom-time-input {
+    background-color: var(--cc-surface1-surface) !important;
+  }
+
   .datepicker-component {
     .react-datepicker {
       border-radius: 10px;
       box-shadow: 8px 8px 16px 0px #3032331A;
       height: auto;
+      background-color: var(--cc-surface1-surface) !important;
     }
   }
 
@@ -16395,16 +16508,18 @@ fieldset:disabled {
 
     .custom-time-input {
       border-left: none;
-      border-radius: 10px;
+      border-radius: 10px !important;
       box-shadow: 8px 8px 16px 0px #3032331A;
     }
 
     .time-input-body {
       padding-bottom: 0px;
+      background-color: var(--cc-surface1-surface);
     }
 
     .time-col {
       height: 200px;
+      color: var(--cc-primary-text);
     }
 
     .react-datepicker {
@@ -16464,6 +16579,7 @@ fieldset:disabled {
     .react-datepicker__header--custom {
       height: 34px;
       margin-bottom: 14px;
+      background-color: var(--cc-surface1-surface) !important;
     }
 
     .react-datepicker__year--container {
@@ -16471,10 +16587,11 @@ fieldset:disabled {
       width: 250px;
       box-shadow: 8px 8px 16px 0px #3032331A;
       border-radius: 10px;
+      background-color: var(--cc-surface1-surface);
     }
 
     .react-datepicker__year-text--selected {
-      background-color: #4368E3 !important;
+      background-color: var(--cc-primary-brand) !important;
       height: 24px;
       width: 61.33px;
       border-radius: 8px;
@@ -16498,11 +16615,13 @@ fieldset:disabled {
   .react-datepicker-month-component {
     .react-datepicker {
       border-radius: 11px;
+      background-color: var(--cc-surface1-surface);
     }
 
     .react-datepicker__header--custom {
       height: 34px;
       margin-bottom: 14px;
+      background-color: var(--cc-surface1-surface);
     }
 
     .react-datepicker__month-container {
@@ -16519,7 +16638,7 @@ fieldset:disabled {
     }
 
     .react-datepicker__month-text--selected {
-      background-color: #4368E3 !important;
+      background-color: var(--cc-primary-brand) !important;
       height: 24px;
       width: 61.33px;
       border-radius: 8px;
@@ -16569,6 +16688,7 @@ fieldset:disabled {
 
   .react-datepicker-time__input {
     margin-left: 0px !important;
+    ;
 
     .dark-time-input {
       color: #f4f6fa !important;
@@ -16601,7 +16721,8 @@ fieldset:disabled {
     border-bottom: 1px solid #CCD1D5;
     font-weight: 500;
     font-family: 'IBM Plex Sans';
-    color: #ACB2B9;
+    color: var(--cc-placeholder-text);
+    background-color: var(--cc-surface1-surface);
   }
 
   .time-input-body {
@@ -16615,10 +16736,11 @@ fieldset:disabled {
     scrollbar-width: none;
     height: 265px;
     width: 62px;
+    color: var(--cc-primary-text) !important;
   }
 
   .selected-time {
-    background-color: #4368E3 !important;
+    background-color: var(--cc-primary-brand) !important;
     border-radius: 6px;
     color: #fff;
   }
@@ -17118,7 +17240,7 @@ section.ai-message-prompt-input-wrapper {
   .react-datepicker__day--selected,
   .react-datepicker__day--range-end {
     border-radius: 8px !important;
-    background-color: #4368E3 !important;
+    background-color: var(--cc-primary-brand) !important;
     color: #fff !important;
   }
 
@@ -17169,7 +17291,7 @@ section.ai-message-prompt-input-wrapper {
     align-items: center;
     justify-content: center;
     padding: 4px;
-    background-color: var(--surfaces-surface-01) !important;
+    background-color: var(--cc-surface1-surface) !important;
   }
 
   .tj-datepicker-widget-right {
@@ -17285,7 +17407,7 @@ section.ai-message-prompt-input-wrapper {
   .react-datepicker__month-text--selected,
   .react-datepicker__month-text--range-end {
     border-radius: 8px !important;
-    background-color: #4368E3 !important;
+    background-color: var(--cc-primary-brand) !important;
     color: #fff !important;
   }
 
@@ -17346,6 +17468,7 @@ section.ai-message-prompt-input-wrapper {
   border-radius: 10px;
   box-shadow: 0px 8px 16px 0px #3032331A !important;
   font-family: 'IBM Plex Sans';
+  background-color: var(--cc-surface1-surface);
 
   .react-datepicker__year-container {
     box-shadow: none !important;
@@ -17400,7 +17523,7 @@ section.ai-message-prompt-input-wrapper {
   .react-datepicker__year-text--selected,
   .react-datepicker__year-text--range-end {
     border-radius: 8px !important;
-    background-color: #4368E3 !important;
+    background-color: var(--cc-primary-brand) !important;
     color: #fff !important;
   }
 
@@ -18698,6 +18821,7 @@ section.ai-message-prompt-input-wrapper {
   width: 100%;
   height: 48px;
   padding: 8px;
+  border-bottom: 1px solid var(--border-weak, #E4E7EB);
 
 
   .codebuilder-color-swatches {
@@ -18741,8 +18865,9 @@ section.ai-message-prompt-input-wrapper {
 }
 
 .theme-custom-menu-list-header {
-  margin: 16px 14px 0px 16px !important;
+  margin: 16px 14px 0px 8px !important;
   font-size: 12px;
+  line-height: 20px;
 }
 
 .theme-create-btn {
@@ -18769,33 +18894,33 @@ section.ai-message-prompt-input-wrapper {
 
 
 .textarea-widget:focus {
-  border-color: var(--primary-brand);
+  border-color: var(--cc-primary-brand);
 }
 
 .multiselct-widget-option {
   input:checked {
-    background-color: var(--primary-brand);
+    background-color: var(--cc-primary-brand);
   }
 }
 
 .multiselect-box {
   .options {
     input:checked {
-      background-color: var(--primary-brand);
+      background-color: var(--cc-primary-brand);
     }
   }
 }
 
 .timer-btn {
-  background-color: var(--primary-brand);
+  background-color: var(--cc-primary-brand);
 
   &:hover {
-    background-color: var(--primary-brand);
+    background-color: var(--cc-primary-brand);
   }
 }
 
 .timer-btn-hover:hover {
-  background-color: var(--primary-brand);
+  background-color: var(--cc-primary-brand);
 }
 
 .canvas-styles-header {
@@ -18841,45 +18966,59 @@ section.ai-message-prompt-input-wrapper {
 }
 
 .codebuilder-color-picker {
+  box-shadow: var(--elevation-400-box-shadow) !important;
+  border-radius: 8px !important;
+
   .sketch-picker {
     border: none !important;
   }
 }
 
 .accordion-button.inspector {
-  width: 300;
-  height: 32px;
   justify-content: space-between;
-  padding-top: 6px;
-  padding-right: 16px;
-  padding-bottom: 6px;
-  padding-left: 16px;
+  padding: 0.375rem 1rem !important;
   border-bottom-width: 1px;
   font-family: IBM Plex Sans;
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
   letter-spacing: 0%;
-  background: var(--Background-surface-layer-02, #F6F8FA);
-  color: var(--Text-placeholder, #6A727C) !important;
+  background-color: var(--interactive-default);
 
-}
-
-.dark-theme {
-  .accordion-button.inspector {
-    background: var(--slate3);
-    color: var(--slate12);
+  &:hover {
+    background-color: var(--interactive-hover);
   }
 }
 
-#inspector-tabpane-properties .accordion-header {
-  height: 32px;
-}
-
 .cm-tooltip {
   z-index: 9999 !important;
 }
 
+.accordion-item {
+
+  .accordion-button.inspector {
+    height: 28px;
+    padding: 0rem 1rem !important;
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .accordion-header {
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  .accordion-body {
+    border-bottom: 1px solid rgba(101, 109, 119, 0.16);
+  }
+
+}
+
+
 .workspace-constant-value {
   position: relative;
 
@@ -18947,6 +19086,291 @@ section.ai-message-prompt-input-wrapper {
   }
 }
 
+.base-medium {
+  font-family: "IBM Plex Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.base-regular {
+  font-family: "IBM Plex Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.small-medium {
+  font-family: "IBM Plex Sans";
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.large-medium {
+  font-family: "IBM Plex Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.table-cell {
+  input[type="checkbox"] {
+    accent-color: var(--cc-primary-brand);
+    background-color: var(--cc-surface1-surface);
+  }
+
+  input[type="checkbox"]:checked::before {
+    background-color: var(--cc-surface1-surface);
+  }
+}
+
+
+
+.canvas-component,
+.workspace-theme-container {
+
+  .tabs-component {
+    .real-canvas {
+      background-color: var(--cc-surface1-surface) !important;
+    }
+  }
+
+  .kanban-container {
+    background-color: var(--cc-surface1-surface);
+
+    .header {
+      background-color: var(--cc-surface1-surface);
+    }
+
+    .subcontainer-container {
+      background-color: var(--cc-surface1-surface);
+
+      .real-canvas {
+        background-color: var(--cc-surface1-surface) !important;
+      }
+    }
+
+  }
+
+
+
+  .calendar-widget {
+    background-color: var(--cc-surface1-surface);
+
+
+    .rbc-time-header-gutter {
+      color: var(--cc-primary-text);
+    }
+
+    .rbc-timeslot-group {
+      color: var(--cc-primary-text);
+    }
+
+    .rbc-toolbar {
+      color: var(--cc-primary-text);
+
+      .rbc-btn-group {
+        button {
+          border-color: var(--cc-default-border);
+          color: var(--cc-primary-text);
+        }
+      }
+    }
+
+    .rbc-day-bg {
+      border: 1px solid var(--cc-weak-border) !important;
+    }
+
+    .rbc-button-link {
+      color: var(--cc-primary-text);
+    }
+
+    .rbc-off-range {
+      .rbc-button-link {
+        color: var(--cc-placeholder-text);
+      }
+    }
+
+    .rbc-off-range-bg {
+      background-color: var(--cc-surface2-surface);
+
+
+
+    }
+
+    .rbc-month-header {
+      .rbc-header {
+        span {
+          color: var(--cc-primary-text);
+        }
+      }
+
+    }
+
+  }
+
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--cc-placeholder-text) !important;
+  }
+
+  .sketch-picker {
+    background-color: var(--cc-surface1-surface) !important;
+
+    input {
+      background-color: var(--cc-surface1-surface) !important;
+    }
+  }
+
+  .multiselect-box {
+    .search {
+      input {
+        background-color: var(--cc-surface1-surface) !important;
+      }
+
+    }
+
+    .dropdown-container {
+      background-color: var(--cc-surface1-surface) !important;
+    }
+
+
+    .select-item.selected {
+      background-color: var(--cc-surface1-surface) !important;
+    }
+
+    .options {
+      background-color: var(--cc-surface1-surface) !important;
+
+    }
+  }
+
+  .codehinter-multi-line-input {
+    .cm-content {
+      background-color: var(--cc-surface1-surface);
+    }
+
+    .cm-gutters {
+      background-color: var(--cc-surface3-surface) !important;
+    }
+
+    .cm-gutterElement {
+      color: var(--cc-placeholder-text) !important;
+    }
+  }
+
+}
+
+.pagination {
+
+  .page-item:not(.active) {
+    .page-link:not(.arrow-icon) {
+      color: var(--cc-primary-text);
+    }
+  }
+
+}
+
+.timer-wrapper {
+  background-color: var(--cc-surface1-surface);
+
+  .counter-container {
+    color: var(--cc-primary-text);
+  }
+}
+
+.pdf-page-controls {
+  background-color: var(--cc-surface1-surface);
+
+  span {
+    color: var(--cc-primary-text);
+  }
+
+}
+
+
+.list-timeline-content {
+
+  .list-timeline-title {
+    color: var(--cc-primary-text);
+  }
+
+  .text-muted {
+    color: var(--cc-placeholder-text) !important;
+  }
+
+  .list-timeline-time {
+    color: var(--cc-placeholder-text);
+  }
+
+}
+
+.legacy-datepicker-widget {
+  .react-datepicker__header {
+    background-color: var(--cc-surface3-surface) !important;
+  }
+
+  select {
+    background-color: var(--cc-surface1-surface) !important;
+    color: var(--cc-primary-text) !important;
+  }
+
+  .react-datepicker-popper {
+    width: 100%;
+    border-radius: 10px !important;
+
+  }
+
+  .react-datepicker__header {
+    color: var(--cc-primary-text) !important;
+  }
+
+  .react-datepicker__month-container {
+    background-color: var(--cc-surface1-surface) !important;
+    border-radius: 10px !important;
+  }
+
+  input {
+    background-color: var(--cc-surface1-surface) !important;
+    color: var(--cc-primary-text) !important;
+  }
+
+}
+
+.components-container {
+  // .accordion-header {
+  //   height: 32px;
+  // }
+
+  .accordion-body {
+    padding: 4px 0px 0px 0px !important;
+
+  }
+
+}
+
+.table-component-footer,
+.table-card-header {
+  .tj-ghost-black-btn:hover {
+    background-color: var(--cc-table-footer-action-hover, #ECEEF0) !important;
+  }
+
+}
+
+.table-column-lists {
+  .draggable-icon-container {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+  }
+}
+
 .codehinter-popup {
   .single-line-codehinter-input {
     .cm-editor {
@@ -19020,3 +19444,32 @@ section.ai-message-prompt-input-wrapper {
     }
   }
 }
+
+.application-editable-checkbox-container {
+  .form-check-input {
+    margin-right: 9px !important;
+    margin-bottom: 5px !important;
+    font-size: 12px !important;
+  }
+
+  .helper-text {
+    margin-left: 25px !important;
+    margin-bottom: 10px !important;
+  }
+}
+
+.git-sync-modal {
+  width: 400px !important;
+  height: 484px !important;
+}
+
+.dark-theme.git-sync-modal {
+  .modal-header {
+    border-bottom: 1px solid var(--slate5) !important;
+  }
+}
+
+.git-sync-modal .modal-header .modal-title .push-pull-tabs .tab-push.active,
+.git-sync-modal .modal-header .modal-title .push-pull-tabs .tab-pull.active {
+  border-bottom: 2px solid var(--indigo9) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/_ui/Accordion/AccordionItem.js b/frontend/src/_ui/Accordion/AccordionItem.js
index 79fd86a41f..3467506600 100644
--- a/frontend/src/_ui/Accordion/AccordionItem.js
+++ b/frontend/src/_ui/Accordion/AccordionItem.js
@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
-import cx from "classnames";
+import React, { useEffect } from 'react';
+import cx from 'classnames';
 
-const AccordionItem = ({ open = true, index, title, children }) => {
+const AccordionItem = ({ open = true, index, title, isTitleCase = true, children }) => {
   const [show, setShow] = React.useState(open);
   const [newChildren, setNewChildren] = React.useState([]);
 
@@ -13,7 +13,7 @@ const AccordionItem = ({ open = true, index, title, children }) => {
   function isNotEmpty(item) {
     if (Array.isArray(item)) {
       return item.some(isNotEmpty); // Check if any element in the array is not empty
-    } else if (typeof item === "object") {
+    } else if (typeof item === 'object') {
       return Object.keys(item).some((key) => isNotEmpty(item[key])); // Check if any key in the object is not empty
     } else {
       return Boolean(item); // Check if the item itself is truthy
@@ -23,46 +23,55 @@ const AccordionItem = ({ open = true, index, title, children }) => {
   function removeEmptyItems(input) {
     if (Array.isArray(input)) {
       return input.filter(isNotEmpty);
-    } else if (typeof input === "object") {
+    } else if (typeof input === 'object') {
       return isNotEmpty(input) ? input : null;
     } else {
       return input;
     }
   }
+
   return (
-    <div className="accordion-item">
+    <div className="accordion-item" >
       <h2
         className="accordion-header"
         id={`heading-${index}`}
-        data-cy={`widget-accordion-${String(title)
-          .toLowerCase()
-          .replace(/\s+/g, "-")}`}
+        data-cy={`widget-accordion-${String(title).toLowerCase().replace(/\s+/g, '-')}`}
+        onClick={() => setShow((prev) => !prev)}
+        style={{
+          cursor: 'pointer',
+          ...(!show ? { border: 'solid var(--border-weak)', borderWidth: '0px 0px 1px 0px' } : {}),
+        }}
       >
-        <div className={cx("accordion-button inspector")}>
+        <div className={cx('accordion-button inspector')}>
           <span
-            className="text-capitalize accordion-title-text"
-            data-cy={`label-${String(title)
-              .toLowerCase()
-              .replace(/\s+/g, "-")}`}
+            className={`${isTitleCase ? 'text-capitalize' : ''} accordion-title-text tw-text-sm tw-text-text-default`}
+            data-cy={`label-${String(title).toLowerCase().replace(/\s+/g, '-')}`}
           >
             {title}
           </span>
+
           <div
-            data-cy={`${String(title)
-              .toLowerCase()
-              .replace(/\s+/g, "-")}-collapse-button`}
+            data-cy={`${String(title).toLowerCase().replace(/\s+/g, '-')}-collapse-button`}
             type="button"
             data-bs-toggle="collapse"
             data-bs-target={`collapse-${index}`}
             aria-expanded="false"
-            className={cx("accordion-item-trigger", { collapsed: !show })}
-            onClick={() => setShow((prev) => !prev)}
-          ></div>
+            className={cx('accordion-item-trigger', { collapsed: !show })}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 10" fill="none">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M1.75248 9.79077C1.45888 9.99505 1.01733 10.0562 0.633728 9.94561C0.250116 9.83505 -1.8595e-08 9.5746 -3.12232e-08 9.2857L-4.0589e-07 0.714319C-4.18519e-07 0.425392 0.250115 0.164965 0.633727 0.0543937C1.01733 -0.0561772 1.45888 0.00496476 1.75248 0.20925L7.54905 4.24239C8.15032 4.6608 8.15032 5.33919 7.54905 5.75761L1.75248 9.79077Z"
+                fill="var(--icon-default)"
+              />
+            </svg>
+          </div>
         </div>
       </h2>
       <div
         id={`collapse-${index}`}
-        className={cx("accordion-collapse collapse", { show })}
+        className={cx('accordion-collapse collapse', { show })}
         data-bs-parent="#accordion-example"
       >
         <div className="accordion-body">{newChildren}</div>
diff --git a/frontend/src/_ui/Accordion/index.js b/frontend/src/_ui/Accordion/index.js
index f36f00c169..2a1cc32704 100644
--- a/frontend/src/_ui/Accordion/index.js
+++ b/frontend/src/_ui/Accordion/index.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import AccordionItem from './AccordionItem';
 
-const Accordion = ({ items, className = '' }) => {
+const Accordion = ({ items, className = '', isTitleCase = true }) => {
   return (
     <div className={`accordion ${className}`}>
       {items.map(({ title, isOpen, children }, index) => {
         // eslint-disable-next-line react/no-children-prop
-        return <AccordionItem open={isOpen} key={index} index={index} title={title} children={children} />;
+        return (
+          <AccordionItem open={isOpen} key={index} index={index} title={title} isTitleCase={isTitleCase}>
+            {children}
+          </AccordionItem>
+        );
       })}
     </div>
   );
diff --git a/frontend/src/_ui/Drawer/DrawerFooter/index.jsx b/frontend/src/_ui/Drawer/DrawerFooter/index.jsx
index 5af6833f3b..3a9c439abb 100644
--- a/frontend/src/_ui/Drawer/DrawerFooter/index.jsx
+++ b/frontend/src/_ui/Drawer/DrawerFooter/index.jsx
@@ -84,11 +84,11 @@ function DrawerFooter({
   ]);
 
   const drawerDocumentationsLinks = {
-    CreateTableForm: 'https://docs.tooljet.com/docs/tooljet-db/database-editor/#create-new-table',
-    EditTableForm: 'https://docs.tooljet.com/docs/tooljet-db/database-editor/#rename-table',
-    CreateColumnForm: 'https://docs.tooljet.com/docs/tooljet-db/database-editor/#add-new-column',
-    EditColumnForm: 'https://docs.tooljet.com/docs/tooljet-db/database-editor/#edit-column',
-    ForeignKeyTableForm: 'https://docs.tooljet.com/docs/tooljet-db/database-editor/#foreign-key',
+    CreateTableForm: 'https://docs.tooljet.ai/docs/tooljet-db/database-editor/#create-new-table',
+    EditTableForm: 'https://docs.tooljet.ai/docs/tooljet-db/database-editor/#rename-table',
+    CreateColumnForm: 'https://docs.tooljet.ai/docs/tooljet-db/database-editor/#add-new-column',
+    EditColumnForm: 'https://docs.tooljet.ai/docs/tooljet-db/database-editor/#edit-column',
+    ForeignKeyTableForm: 'https://docs.tooljet.ai/docs/tooljet-db/database-editor/#foreign-key',
   };
   const drawerNames = Object.keys(drawerDocumentationsLinks);
   const isDrawerWithDocumentation = drawerNames.some((drawerName) => drawerName === initiator);
diff --git a/frontend/src/_ui/FolderList/FolderList.jsx b/frontend/src/_ui/FolderList/FolderList.jsx
index bfaed03a75..dab63b4da0 100644
--- a/frontend/src/_ui/FolderList/FolderList.jsx
+++ b/frontend/src/_ui/FolderList/FolderList.jsx
@@ -98,8 +98,8 @@ function FolderList({
               <CustomIcon
                 color={computedStyles?.icon?.color}
                 style={{
-                  width: '18px',
-                  height: '18px',
+                  width: '16px',
+                  height: '16px',
                   color: computedStyles?.icon?.color,
                   stroke: computedStyles?.icon?.color,
                 }}
diff --git a/frontend/src/_ui/Icon/solidIcons/AddNavItemURL.jsx b/frontend/src/_ui/Icon/solidIcons/AddNavItemURL.jsx
new file mode 100644
index 0000000000..800fdbae56
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/AddNavItemURL.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const AddNavItemURL = ({ fill = '#C1C8CD', width = '25', height = 25, className = '', viewBox = '0 0 25 25' }) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.8741 3.12646C12.3889 2.64125 11.6022 2.64125 11.1171 3.12646L10.5613 3.68218C10.2824 3.96113 9.8301 3.96113 9.55116 3.68218C9.27221 3.40324 9.27221 2.95098 9.55116 2.67203L10.1069 2.1163C11.15 1.07321 12.8412 1.07321 13.8843 2.1163C14.9273 3.15939 14.9273 4.85058 13.8843 5.89368L13.3285 6.4494C13.0496 6.72836 12.5973 6.72836 12.3184 6.4494C12.0394 6.17046 12.0394 5.7182 12.3184 5.43925L12.8741 4.88353C13.3593 4.39833 13.3593 3.61166 12.8741 3.12646ZM11.6039 4.39661C11.8829 4.67556 11.8829 5.12781 11.6039 5.40677L10.132 6.87863C9.8531 7.15758 9.40083 7.15758 9.12189 6.87863C8.84294 6.59969 8.84294 6.14743 9.12189 5.86848L10.5938 4.39661C10.8727 4.11766 11.325 4.11766 11.6039 4.39661ZM8.4433 4.78998C8.72224 5.06893 8.72224 5.52119 8.4433 5.80014L7.88757 6.35587C7.40237 6.84107 7.40237 7.62774 7.88758 8.11294C8.37278 8.59814 9.15944 8.59814 9.64464 8.11294L10.2004 7.5572C10.4793 7.27826 10.9315 7.27826 11.2105 7.5572C11.4894 7.83616 11.4894 8.28841 11.2105 8.56736L10.6548 9.12309C9.6117 10.1662 7.92051 10.1662 6.87741 9.12309C5.83433 8.07999 5.83433 6.3888 6.87741 5.34572L7.43315 4.78998C7.71209 4.51104 8.16436 4.51104 8.4433 4.78998ZM11.4966 9.96488C9.98859 11.4728 7.54362 11.4728 6.03562 9.96488C4.52762 8.45688 4.52762 6.01193 6.03562 4.50392L6.34842 4.19113H2.76182C1.97285 4.19113 1.33325 4.83072 1.33325 5.6197V13.2387C1.33325 14.0277 1.97285 14.6673 2.76182 14.6673H10.3809C11.1698 14.6673 11.8094 14.0277 11.8094 13.2387V9.65203L11.4966 9.96488Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default AddNavItemURL;
diff --git a/frontend/src/_ui/Icon/solidIcons/ArrowDirectionLoop.jsx b/frontend/src/_ui/Icon/solidIcons/ArrowDirectionLoop.jsx
new file mode 100644
index 0000000000..1f2d8c9cc8
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/ArrowDirectionLoop.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ArrowDirectionLoop = ({ fill = '#4368E3', width = '16', className = '', viewBox = '0 0 16 16' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.7142 5.38089C8.7142 5.50719 8.66403 5.62831 8.57473 5.71761L5.95568 8.33667C5.81949 8.47286 5.61467 8.5136 5.43674 8.43988C5.2588 8.36618 5.14278 8.19255 5.14278 7.99994V6.33328H4.19039C3.66441 6.33328 3.23801 6.75968 3.23801 7.28567V10.8571C3.23801 11.3831 3.66441 11.8095 4.19039 11.8095H11.8094C12.3354 11.8095 12.7618 11.3831 12.7618 10.8571V7.28566C12.7618 6.75968 12.3354 6.33328 11.8094 6.33328H11.0952C10.5692 6.33328 10.1428 5.90688 10.1428 5.38089C10.1428 4.85491 10.5692 4.42851 11.0952 4.42851H11.8094C13.3874 4.42851 14.6666 5.7077 14.6666 7.28566V10.8571C14.6666 12.4351 13.3874 13.7142 11.8094 13.7142H4.19039C2.61244 13.7142 1.33325 12.4351 1.33325 10.8571V7.28567C1.33325 5.7077 2.61244 4.42852 4.19039 4.42852H5.14278V2.76185C5.14278 2.56925 5.2588 2.39562 5.43673 2.3219C5.61467 2.2482 5.81949 2.28894 5.95568 2.42513L8.57473 5.04418C8.66403 5.13348 8.7142 5.2546 8.7142 5.38089Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default ArrowDirectionLoop;
diff --git a/frontend/src/_ui/Icon/solidIcons/ArrowRight01.jsx b/frontend/src/_ui/Icon/solidIcons/ArrowRight01.jsx
new file mode 100644
index 0000000000..718fe980a0
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/ArrowRight01.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ArrowRight01 = ({ fill = '#C1C8CD', width = '12', className = '', viewBox = '0 0 12 12' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.2908 3.20921C8.01186 2.93026 7.5596 2.93026 7.28065 3.20921C7.0017 3.48816 7.0017 3.94042 7.28065 4.21937L8.5613 5.5H1.71429C1.3198 5.5 1 5.8198 1 6.21429C1 6.60878 1.3198 6.92858 1.71429 6.92858H8.5613L7.28065 8.20922C7.0017 8.48815 7.0017 8.94044 7.28065 9.21937C7.5596 9.4983 8.01186 9.4983 8.2908 9.21937L10.7908 6.71937C11.0697 6.44042 11.0697 5.98816 10.7908 5.70921L8.2908 3.20921Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default ArrowRight01;
diff --git a/frontend/src/_ui/Icon/solidIcons/Asterix.jsx b/frontend/src/_ui/Icon/solidIcons/Asterix.jsx
new file mode 100644
index 0000000000..2e878ef7d0
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Asterix.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Asterix = ({ fill = '#CCD1D5', width = '16', height = '16', className = '', viewBox = '0 0 16 16' }) => (
+  <svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.41175 13.6383C3.96788 13.3558 3.83702 12.767 4.11949 12.3231L6.26452 8.95236H2.28598C1.75986 8.95236 1.33334 8.52585 1.33334 7.99972C1.33334 7.47358 1.75986 7.04708 2.28598 7.04708H6.26464L4.11949 3.67613C3.83702 3.23225 3.96788 2.64344 4.41175 2.36097C4.85562 2.0785 5.44444 2.20935 5.7269 2.65323L7.99998 6.2252L10.2731 2.65323C10.5555 2.20935 11.1444 2.0785 11.5882 2.36097C12.032 2.64344 12.1629 3.23225 11.8805 3.67613L9.73533 7.04708H13.714C14.2402 7.04708 14.6667 7.47358 14.6667 7.99972C14.6667 8.52585 14.2402 8.95236 13.714 8.95236H9.73544L11.8805 12.3231C12.1629 12.767 12.032 13.3558 11.5882 13.6383C11.1444 13.9207 10.5555 13.7899 10.2731 13.346L7.99998 9.77405L5.72691 13.346C5.44444 13.7899 4.85562 13.9207 4.41175 13.6383Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Asterix;
diff --git a/frontend/src/_ui/Icon/solidIcons/CurlyBraces.jsx b/frontend/src/_ui/Icon/solidIcons/CurlyBraces.jsx
new file mode 100644
index 0000000000..249df06990
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/CurlyBraces.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const CurlyBraces = ({ fill = '#CCD1D5', width = '16', className = '', viewBox = '0 0 16 16', height = '16' }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6 2.984V2H5.91C5.597 2 5.294 2.062 5.001 2.185C4.70938 2.30725 4.44569 2.48758 4.226 2.715C4.0122 2.92988 3.84445 3.1861 3.733 3.468V3.469C3.63379 3.73668 3.56731 4.01537 3.535 4.299V4.301C3.50656 4.58773 3.49854 4.87613 3.511 5.164C3.523 5.454 3.529 5.744 3.529 6.033C3.529 6.236 3.489 6.426 3.412 6.605C3.26524 6.95433 2.99203 7.2364 2.647 7.393C2.47106 7.46984 2.28099 7.50901 2.089 7.508H2V8.492H2.09C2.285 8.492 2.47 8.532 2.646 8.613L2.647 8.614C2.825 8.692 2.976 8.798 3.102 8.932L3.104 8.934C3.234 9.064 3.337 9.219 3.411 9.399L3.412 9.401C3.49 9.581 3.529 9.769 3.529 9.967C3.529 10.257 3.523 10.547 3.511 10.836C3.499 11.132 3.507 11.421 3.535 11.706C3.568 11.989 3.634 12.265 3.732 12.531C3.838 12.804 4.003 13.056 4.226 13.285C4.449 13.515 4.708 13.692 5.001 13.815C5.294 13.938 5.597 14 5.911 14H6V13.016H5.91C5.71 13.016 5.523 12.978 5.347 12.901C5.17724 12.8217 5.02259 12.7134 4.89 12.581C4.76128 12.444 4.65679 12.2861 4.581 12.114C4.507 11.934 4.471 11.744 4.471 11.541C4.471 11.313 4.474 11.088 4.482 10.869C4.49 10.641 4.49 10.419 4.482 10.204C4.47848 9.98965 4.4601 9.77581 4.427 9.564C4.39519 9.35509 4.3388 9.15067 4.259 8.955C4.10336 8.57637 3.84881 8.24653 3.522 8C3.84918 7.7536 4.10408 7.42375 4.26 7.045C4.34 6.853 4.395 6.652 4.428 6.443C4.461 6.233 4.479 6.02 4.483 5.803C4.491 5.583 4.491 5.361 4.483 5.137C4.475 4.913 4.471 4.687 4.471 4.459C4.46926 4.17239 4.55135 3.89152 4.70717 3.65095C4.86299 3.41038 5.08573 3.22062 5.348 3.105C5.52458 3.02404 5.71675 2.98273 5.911 2.984H6ZM10 13.016V14H10.09C10.403 14 10.706 13.938 10.999 13.815C11.292 13.692 11.551 13.515 11.774 13.285C11.997 13.055 12.162 12.805 12.267 12.532C12.367 12.266 12.432 11.988 12.465 11.701V11.699C12.493 11.419 12.501 11.132 12.489 10.836C12.477 10.546 12.471 10.256 12.471 9.967C12.471 9.764 12.511 9.574 12.588 9.395V9.394C12.7346 9.04456 13.0079 8.76344 13.353 8.607C13.529 8.53027 13.719 8.4911 13.911 8.492H14V7.508H13.91C13.714 7.508 13.529 7.468 13.353 7.387L13.352 7.386C13.1803 7.31201 13.0255 7.20381 12.897 7.068L12.895 7.066C12.7629 6.93288 12.6585 6.77482 12.588 6.601V6.599C12.5099 6.42055 12.4697 6.22781 12.47 6.033C12.47 5.743 12.476 5.453 12.488 5.164C12.5005 4.8738 12.4925 4.58307 12.464 4.294C12.4316 4.01243 12.3654 3.73478 12.267 3.469V3.468C12.1553 3.18602 11.9872 2.92979 11.773 2.715C11.5533 2.4876 11.2896 2.30727 10.998 2.185C10.7102 2.06277 10.4007 1.99985 10.088 2H10V2.984H10.09C10.29 2.984 10.477 3.022 10.652 3.099C10.826 3.181 10.978 3.287 11.109 3.419C11.236 3.553 11.339 3.709 11.418 3.886C11.492 4.066 11.528 4.256 11.528 4.459C11.528 4.687 11.525 4.911 11.517 5.131C11.509 5.359 11.509 5.581 11.517 5.796C11.521 6.018 11.539 6.231 11.572 6.436C11.605 6.65 11.661 6.852 11.74 7.045C11.896 7.42372 12.1509 7.75356 12.478 8C12.1509 8.24644 11.896 8.57628 11.74 8.955C11.6608 9.14846 11.6044 9.35049 11.572 9.557C11.539 9.767 11.521 9.98 11.517 10.197C11.5089 10.4189 11.5089 10.6411 11.517 10.863C11.525 11.087 11.529 11.313 11.529 11.541C11.5306 11.8276 11.4485 12.1084 11.2927 12.3489C11.1369 12.5895 10.9142 12.7793 10.652 12.895C10.4754 12.976 10.2833 13.0173 10.089 13.016H10Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+export default CurlyBraces;
diff --git a/frontend/src/_ui/Icon/solidIcons/CursorClick.jsx b/frontend/src/_ui/Icon/solidIcons/CursorClick.jsx
new file mode 100644
index 0000000000..d63dd8a009
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/CursorClick.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+const CursorClick = ({ fill = '#C1C8CD', width = '28', className = '', viewBox = '0 0 28 28' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={width}
+      height={width}
+      viewBox={viewBox}
+      fill="none"
+    >
+      <g clip-path="url(#clip0_97_11622)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7.05306 0.0514836C7.85326 -0.162929 8.67576 0.311944 8.89018 1.11214L9.79712 4.49692C10.0115 5.29712 9.53666 6.11962 8.73646 6.33404C7.93626 6.54846 7.11376 6.07358 6.89936 5.27338L5.9924 1.8886C5.77798 1.0884 6.25286 0.265896 7.05306 0.0514836ZM1.11214 8.8897C0.311944 8.67528 -0.162929 7.85278 0.0514836 7.05258C0.265896 6.25238 1.0884 5.7775 1.8886 5.99192L5.27338 6.89886C6.07358 7.11328 6.54846 7.93578 6.33404 8.73598C6.11962 9.53618 5.29712 10.0111 4.49692 9.79664L1.11214 8.8897ZM3.99854 16.6453C3.41274 17.231 2.463 17.231 1.87721 16.6453C1.29143 16.0595 1.29143 15.1097 1.87721 14.5239L4.35504 12.0461C4.94082 11.4603 5.89058 11.4603 6.47636 12.0461C7.06216 12.6319 7.06216 13.5816 6.47636 14.1674L3.99854 16.6453ZM16.646 3.99854C17.2318 3.41274 17.2318 2.463 16.646 1.87721C16.0602 1.29143 15.1105 1.29143 14.5247 1.87721L12.0468 4.35504C11.4611 4.94082 11.4611 5.89058 12.0468 6.47636C12.6326 7.06216 13.5824 7.06214 14.1682 6.47636L16.646 3.99854Z"
+          fill={fill}
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.35354 10.9587C7.81642 9.3488 9.34832 7.81692 10.9582 8.35402L26.5924 13.57C28.4866 14.202 28.4626 16.8896 26.5574 17.4875L21.8422 18.9673L27.4128 24.5712C28.1914 25.3546 28.1914 26.6248 27.4128 27.4082C26.634 28.1916 25.3716 28.1916 24.5928 27.4082L18.9894 21.771L17.4871 26.5578C16.8891 28.463 14.2015 28.487 13.5695 26.5928L8.35354 10.9587Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_97_11622">
+          <rect width="28" height="28" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+export default CursorClick;
diff --git a/frontend/src/_ui/Icon/solidIcons/Delete01.jsx b/frontend/src/_ui/Icon/solidIcons/Delete01.jsx
new file mode 100644
index 0000000000..68c8d838f7
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Delete01.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Delete01 = ({ fill = '#E54D2E', width = '15', height = '18', className = '', viewBox = '0 0 15 18' }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M5.48715 1.68553C5.70353 1.36097 6.0678 1.16602 6.45788 1.16602H7.54245C7.93253 1.16602 8.2968 1.36097 8.51317 1.68553L9.04183 2.47852H11.2293C11.471 2.47852 11.6668 2.67439 11.6668 2.91602C11.6668 3.15764 11.471 3.35352 11.2293 3.35352H2.771C2.52937 3.35352 2.3335 3.15764 2.3335 2.91602C2.3335 2.67439 2.52937 2.47852 2.771 2.47852H4.9585L5.48715 1.68553Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.75016 12.8327H5.25016C3.9615 12.8327 2.91683 11.788 2.91683 10.4993V4.08268H11.0835V10.4993C11.0835 11.788 10.0388 12.8327 8.75016 12.8327ZM5.8335 5.97852C6.07512 5.97852 6.271 6.17439 6.271 6.41602V10.4993C6.271 10.741 6.07512 10.9368 5.8335 10.9368C5.59187 10.9368 5.396 10.741 5.396 10.4993L5.396 6.41602C5.396 6.17439 5.59187 5.97852 5.8335 5.97852ZM8.16683 5.97852C8.40845 5.97852 8.60433 6.17439 8.60433 6.41602V10.4993C8.60433 10.741 8.40845 10.9368 8.16683 10.9368C7.92521 10.9368 7.72933 10.741 7.72933 10.4993V6.41602C7.72933 6.17439 7.92521 5.97852 8.16683 5.97852Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Delete01;
diff --git a/frontend/src/_ui/Icon/solidIcons/DuplicatePage.jsx b/frontend/src/_ui/Icon/solidIcons/DuplicatePage.jsx
new file mode 100644
index 0000000000..3cea445511
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/DuplicatePage.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const DuplicatePage = ({ fill = '#C1C8CD', width = '14', className = '', viewBox = '0 0 14 14' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M7.37484 3.79102H4.6665V3.49935C4.6665 2.21068 5.71117 1.16602 6.99984 1.16602H10.4998C11.7885 1.16602 12.8332 2.21068 12.8332 3.49935V6.99935C12.8332 8.28801 11.7885 9.33268 10.4998 9.33268H10.2082V6.62435C10.2082 5.05954 8.93964 3.79102 7.37484 3.79102Z"
+      fill={fill}
+    />
+    <path
+      d="M6.99984 12.8327H3.49984C2.21117 12.8327 1.1665 11.788 1.1665 10.4993V6.99935C1.1665 5.71068 2.21117 4.66602 3.49984 4.66602H6.99984C8.2885 4.66602 9.33317 5.71068 9.33317 6.99935V10.4993C9.33317 11.788 8.2885 12.8327 6.99984 12.8327Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default DuplicatePage;
diff --git a/frontend/src/_ui/Icon/solidIcons/Menu.jsx b/frontend/src/_ui/Icon/solidIcons/Menu.jsx
index 4e5081db44..80e523542e 100644
--- a/frontend/src/_ui/Icon/solidIcons/Menu.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Menu.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Menu = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+const Menu = ({ fill = '#C1C8CD', width = '14', className = '', viewBox = '0 0 14 14' }) => (
   <svg
     width={width}
     height={width}
@@ -10,9 +10,15 @@ const Menu = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 2
     className={className}
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6.75 8.78906C6.75 8.37485 7.08579 8.03906 7.5 8.03906H17.5C17.9142 8.03906 18.25 8.37485 18.25 8.78906C18.25 9.20328 17.9142 9.53906 17.5 9.53906H7.5C7.08579 9.53906 6.75 9.20328 6.75 8.78906ZM6.75 12.7891C6.75 12.3748 7.08579 12.0391 7.5 12.0391H17.5C17.9142 12.0391 18.25 12.3748 18.25 12.7891C18.25 13.2033 17.9142 13.5391 17.5 13.5391H7.5C7.08579 13.5391 6.75 13.2033 6.75 12.7891ZM7.5 16.0391C7.08579 16.0391 6.75 16.3748 6.75 16.7891C6.75 17.2033 7.08579 17.5391 7.5 17.5391H17.5C17.9142 17.5391 18.25 17.2033 18.25 16.7891C18.25 16.3748 17.9142 16.0391 17.5 16.0391H7.5Z"
+      d="M1.1665 2.94153C1.1665 2.52132 1.50716 2.18066 1.92737 2.18066H12.0723C12.4925 2.18066 12.8332 2.52132 12.8332 2.94153C12.8332 3.36175 12.4925 3.7024 12.0723 3.7024H1.92737C1.50716 3.7024 1.1665 3.36175 1.1665 2.94153Z"
+      fill={fill}
+    />
+    <path
+      d="M1.1665 6.99954C1.1665 6.57932 1.50716 6.23867 1.92737 6.23867H12.0723C12.4925 6.23867 12.8332 6.57932 12.8332 6.99954C12.8332 7.41976 12.4925 7.76041 12.0723 7.76041H1.92737C1.50716 7.76041 1.1665 7.41976 1.1665 6.99954Z"
+      fill={fill}
+    />
+    <path
+      d="M1.92737 10.2966C1.50716 10.2966 1.1665 10.6373 1.1665 11.0575C1.1665 11.4777 1.50716 11.8184 1.92737 11.8184H12.0723C12.4925 11.8184 12.8332 11.4777 12.8332 11.0575C12.8332 10.6373 12.4925 10.2966 12.0723 10.2966H1.92737Z"
       fill={fill}
     />
   </svg>
diff --git a/frontend/src/_ui/Icon/solidIcons/MoreVertical01.jsx b/frontend/src/_ui/Icon/solidIcons/MoreVertical01.jsx
index dbda2756d5..f38ad994ae 100644
--- a/frontend/src/_ui/Icon/solidIcons/MoreVertical01.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/MoreVertical01.jsx
@@ -1,18 +1,24 @@
 import React from 'react';
 
-const MoreVertical01 = ({ fill = '#11181C', width = '12', height = '13', className = '', viewBox = '0 0 12 13' }) => (
+const MoreVertical01 = ({ fill = '#6A727C', width = '12', className = '', viewBox = '0 0 12 12' }) => (
   <svg
     width={width}
-    height={height}
+    height={width}
     viewBox={viewBox}
-    className={className}
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M5.00354 2.53516C5.00354 1.98287 5.45126 1.53516 6.00354 1.53516C6.55582 1.53516 7.00354 1.98287 7.00354 2.53516C7.00354 3.08744 6.55582 3.53516 6.00354 3.53516C5.45126 3.53516 5.00354 3.08744 5.00354 2.53516ZM5.00354 6.03516C5.00354 5.48287 5.45126 5.03516 6.00354 5.03516C6.55582 5.03516 7.00354 5.48287 7.00354 6.03516C7.00354 6.58744 6.55582 7.03516 6.00354 7.03516C5.45126 7.03516 5.00354 6.58744 5.00354 6.03516ZM5.00354 9.53516C5.00354 8.98287 5.45126 8.53516 6.00354 8.53516C6.55582 8.53516 7.00354 8.98287 7.00354 9.53516C7.00354 10.0874 6.55582 10.5352 6.00354 10.5352C5.45126 10.5352 5.00354 10.0874 5.00354 9.53516Z"
+      d="M4.91919 2C4.91919 1.44772 5.38556 1 5.96086 1C6.53615 1 7.00252 1.44772 7.00252 2C7.00252 2.55228 6.53615 3 5.96086 3C5.38556 3 4.91919 2.55228 4.91919 2Z"
+      fill={fill}
+    />
+    <path
+      d="M4.91919 6.00002C4.91919 5.44774 5.38556 5.00002 5.96086 5.00002C6.53615 5.00002 7.00252 5.44774 7.00252 6.00002C7.00252 6.55231 6.53615 7.00002 5.96086 7.00002C5.38556 7.00002 4.91919 6.55231 4.91919 6.00002Z"
+      fill={fill}
+    />
+    <path
+      d="M5.96086 9.00005C5.38556 9.00005 4.91919 9.44776 4.91919 10C4.91919 10.5523 5.38556 11 5.96086 11C6.53615 11 7.00252 10.5523 7.00252 10C7.00252 9.44776 6.53615 9.00005 5.96086 9.00005Z"
       fill={fill}
     />
   </svg>
diff --git a/frontend/src/_ui/Icon/solidIcons/NoPageEvents.jsx b/frontend/src/_ui/Icon/solidIcons/NoPageEvents.jsx
new file mode 100644
index 0000000000..92b4a0ee8c
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/NoPageEvents.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const NoPageEvents = ({ fill = 'var(--icon-weak)', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14" fill="none">
+    <g clip-path="url(#clip0_2235_34886)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.7071 13.2071C13.8946 13.0196 14 12.7652 14 12.5V4L10.5 0.5H4C3.73478 0.5 3.48043 0.605357 3.29289 0.792893C3.10536 0.98043 3 1.23478 3 1.5V8.77513L3.125 8.90013L4.01256 8.01256C4.69598 7.32915 5.80402 7.32914 6.48744 8.01256C7.17085 8.69598 7.17086 9.80402 6.48744 10.4874L5.59987 11.375L6.48744 12.2626C6.82914 12.6043 7 13.0521 7 13.5H13C13.2652 13.5 13.5196 13.3946 13.7071 13.2071Z"
+        fill="#CCD1D5"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4 1C3.8674 1 3.74022 1.05267 3.64645 1.14644C3.64645 1.14644 3.64644 1.14645 3.64644 1.14645M3.64644 1.14645C3.55267 1.24022 3.5 1.3674 3.5 1.5V7.5C3.5 7.77614 3.27614 8 3 8C2.72386 8 2.5 7.77614 2.5 7.5V1.5C2.5 1.10217 2.65804 0.720645 2.93933 0.439346L2.93934 0.439336C3.22065 0.158037 3.60217 0 4 0H10.5C10.6326 0 10.7598 0.0526784 10.8536 0.146447L14.3536 3.64645C14.4473 3.74021 14.5 3.86739 14.5 4V12.5C14.5 12.8978 14.3419 13.2794 14.0607 13.5607C13.7794 13.8419 13.3978 14 13 14H8C7.72386 14 7.5 13.7761 7.5 13.5C7.5 13.2239 7.72386 13 8 13H13C13.1326 13 13.2598 12.9473 13.3535 12.8535C13.4473 12.7598 13.5 12.6326 13.5 12.5V4.20711L10.2929 1H4"
+        fill={fill}
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.60355 8.89645C5.79882 9.09171 5.79882 9.40829 5.60355 9.60355L1.35355 13.8536C1.15829 14.0488 0.841709 14.0488 0.646447 13.8536C0.451184 13.6583 0.451184 13.3417 0.646447 13.1464L4.89645 8.89645C5.09171 8.70118 5.40829 8.70118 5.60355 8.89645Z"
+        fill={fill}
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.646447 8.89645C0.841709 8.70118 1.15829 8.70118 1.35355 8.89645L5.60355 13.1464C5.79882 13.3417 5.79882 13.6583 5.60355 13.8536C5.40829 14.0488 5.09171 14.0488 4.89645 13.8536L0.646447 9.60355C0.451184 9.40829 0.451184 9.09171 0.646447 8.89645Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2235_34886">
+        <rect width="14" height="14" fill="white" transform="translate(0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default NoPageEvents;
diff --git a/frontend/src/_ui/Icon/solidIcons/PageUpload.jsx b/frontend/src/_ui/Icon/solidIcons/PageUpload.jsx
new file mode 100644
index 0000000000..1bfc76c739
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/PageUpload.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const PageUploadIcon = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g id="Save filled">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.5 5V17.25C2.5 19.0449 3.98027 20.5 5.77519 20.5C7.5425 20.5 9 19.0673 9 17.3C9 16.8582 9.35817 16.5 9.8 16.5H18.5V5C18.5 3.34315 17.1569 2 15.5 2H5.5C3.84315 2 2.5 3.34315 2.5 5ZM9.75 8.82817C9.70334 8.86325 9.65858 8.90202 9.61612 8.94449L8.03033 10.5303C7.73744 10.8232 7.26256 10.8232 6.96967 10.5303C6.67678 10.2374 6.67678 9.76251 6.96967 9.46961L8.55546 7.88383C9.6294 6.80988 11.3706 6.80988 12.4445 7.88382L14.0303 9.46961C14.3232 9.76251 14.3232 10.2374 14.0303 10.5303C13.7374 10.8232 13.2626 10.8232 12.9697 10.5303L11.3839 8.94449C11.3414 8.90202 11.2967 8.86325 11.25 8.82817V12.9999C11.25 13.4142 10.9142 13.7499 10.5 13.7499C10.0858 13.7499 9.75 13.4142 9.75 12.9999V8.82817Z"
+        fill={fill}
+      />
+      <path
+        d="M22.3766 18.9899C21.9361 20.7202 20.3675 22 18.5 22H6.5C8.36748 22 9.93606 20.7202 10.3766 18.9899C10.5128 18.4547 10.9477 18 11.5 18H21.5C22.0523 18 22.5128 18.4547 22.3766 18.9899Z"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);
+
+export default PageUploadIcon;
diff --git a/frontend/src/_ui/Icon/solidIcons/Pin.jsx b/frontend/src/_ui/Icon/solidIcons/Pin.jsx
index d1fe02e5a8..2fdbeab30c 100644
--- a/frontend/src/_ui/Icon/solidIcons/Pin.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Pin.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Pin = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+const Pin = ({ fill = '#C1C8CD', width = '16', className = '', viewBox = '0 0 16 17' }) => (
   <svg
     width={width}
     height={width}
@@ -10,9 +10,15 @@ const Pin = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25
     className={className}
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M15.1523 4.36599C13.9199 3.13355 11.8126 4.00641 11.8126 5.74934C11.8126 6.2682 11.6065 6.76581 11.2396 7.13269L9.61887 8.75339C9.25198 9.12028 8.75438 9.3264 8.23552 9.3264C6.49259 9.3264 5.61972 11.4337 6.85216 12.6661L9.22844 15.0424L3.71088 20.5599C3.42971 20.8411 3.42971 21.297 3.71088 21.5782C3.99206 21.8594 4.44794 21.8594 4.72912 21.5782L10.2467 16.0606L12.6229 18.4369C13.8554 19.6693 15.9626 18.7964 15.9626 17.0535C15.9626 16.5347 16.1688 16.037 16.5357 15.6702L18.1564 14.0495C18.5232 13.6826 19.0209 13.4765 19.5397 13.4765C21.2826 13.4765 22.1555 11.3692 20.9231 10.1367L15.1523 4.36599Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.1925 9.06354L11.5777 9.68574L13.1332 11.2413C13.3406 11.4487 13.3406 11.782 13.1332 11.9968L12.6073 12.5227C12.3999 12.7301 12.0591 12.7301 11.8517 12.5227L3.44455 4.11552C3.23715 3.90812 3.23715 3.56739 3.44455 3.35999L3.97046 2.83407C4.17786 2.62667 4.51859 2.62667 4.726 2.83407L6.45188 4.55995L7.06667 3.93775C7.34074 3.67109 7.48888 3.30073 7.48888 2.91555C7.48888 1.6267 9.0518 0.974865 9.96289 1.89336L14.2368 6.16732C15.1553 7.0784 14.5035 8.64132 13.2147 8.64132C12.8295 8.64132 12.4591 8.78947 12.1925 9.06354Z"
+      fill={fill}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.67417 6.15991L9.9703 12.456C9.43698 12.8486 8.64441 12.8634 8.08887 12.3153L6.33336 10.5524L2.24458 14.6412C2.03718 14.8486 1.69645 14.8486 1.48905 14.6412C1.28165 14.4338 1.28165 14.093 1.48905 13.8856L5.57783 9.79685L3.81491 8.04134C3.26678 7.4858 3.28159 6.69323 3.67417 6.15991Z"
       fill={fill}
     />
   </svg>
diff --git a/frontend/src/_ui/Icon/solidIcons/PullIcon.jsx b/frontend/src/_ui/Icon/solidIcons/PullIcon.jsx
new file mode 100644
index 0000000000..5c1520e686
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/PullIcon.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Pull = ({ fill = '#ACB2B9', width = '14', height = '18', viewBox = '0 0 14 18', className = '' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <g clip-path="url(#clip0_2938_24794)">
+      <path
+        d="M13.4104 8.53856V12.6411C13.4104 12.8451 13.3293 13.0408 13.1851 13.1851C13.0408 13.3293 12.8451 13.4104 12.6411 13.4104H1.35907C1.15506 13.4104 0.959405 13.3293 0.815146 13.1851C0.670888 13.0408 0.589844 12.8451 0.589844 12.6411V8.53856C0.589844 8.33455 0.670888 8.13889 0.815146 7.99463C0.959405 7.85038 1.15506 7.76933 1.35907 7.76933C1.56309 7.76933 1.75874 7.85038 1.903 7.99463C2.04726 8.13889 2.12831 8.33455 2.12831 8.53856V11.8719H11.8719V8.53856C11.8719 8.33455 11.9529 8.13889 12.0972 7.99463C12.2415 7.85038 12.4371 7.76933 12.6411 7.76933C12.8451 7.76933 13.0408 7.85038 13.1851 7.99463C13.3293 8.13889 13.4104 8.33455 13.4104 8.53856ZM6.45587 9.08279C6.52733 9.15451 6.61225 9.21141 6.70575 9.25023C6.79925 9.28905 6.8995 9.30904 7.00074 9.30904C7.10198 9.30904 7.20223 9.28905 7.29573 9.25023C7.38923 9.21141 7.47415 9.15451 7.54561 9.08279L10.1097 6.51869C10.2542 6.37418 10.3354 6.17818 10.3354 5.97382C10.3354 5.76945 10.2542 5.57346 10.1097 5.42895C9.96521 5.28444 9.76921 5.20325 9.56484 5.20325C9.36048 5.20325 9.16448 5.28444 9.01997 5.42895L7.76933 6.67959V1.35907C7.76933 1.15506 7.68829 0.959405 7.54403 0.815146C7.39977 0.670888 7.20411 0.589844 7.0001 0.589844C6.79609 0.589844 6.60043 0.670888 6.45617 0.815146C6.31191 0.959405 6.23087 1.15506 6.23087 1.35907V6.67959L4.98023 5.43023C4.90867 5.35868 4.82373 5.30192 4.73024 5.26319C4.63675 5.22447 4.53655 5.20454 4.43536 5.20454C4.23099 5.20454 4.03499 5.28572 3.89048 5.43023C3.81893 5.50178 3.76217 5.58673 3.72345 5.68022C3.68472 5.77371 3.66479 5.87391 3.66479 5.9751C3.66479 6.17947 3.74598 6.37546 3.89048 6.51997L6.45587 9.08279Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2938_24794">
+        <rect width="13.3333" height="13.3333" fill="white" transform="translate(0.333496 0.332031)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Pull;
diff --git a/frontend/src/_ui/Icon/solidIcons/PushIcon.jsx b/frontend/src/_ui/Icon/solidIcons/PushIcon.jsx
new file mode 100644
index 0000000000..14f2797e8e
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/PushIcon.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Push = ({ fill = '#4368E3', width = '14', height = '18', viewBox = '0 0 14 18', className = '' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14" fill="none">
+    <g clip-path="url(#clip0_2938_24787)">
+      <path
+        d="M12.6275 8.37206V12.2936C12.6275 12.4886 12.55 12.6757 12.4121 12.8136C12.2742 12.9515 12.0872 13.0289 11.8922 13.0289H1.10785C0.912841 13.0289 0.725816 12.9515 0.587921 12.8136C0.450027 12.6757 0.372559 12.4886 0.372559 12.2936V8.37206C0.372559 8.17704 0.450027 7.99002 0.587921 7.85213C0.725816 7.71423 0.912841 7.63676 1.10785 7.63676C1.30286 7.63676 1.48989 7.71423 1.62778 7.85213C1.76568 7.99002 1.84315 8.17704 1.84315 8.37206V11.5583H11.1569V8.37206C11.1569 8.17704 11.2343 7.99002 11.3722 7.85213C11.5101 7.71423 11.6972 7.63676 11.8922 7.63676C12.0872 7.63676 12.2742 7.71423 12.4121 7.85213C12.55 7.99002 12.6275 8.17704 12.6275 8.37206ZM4.56925 4.48051L5.76472 3.28627V8.37206C5.76472 8.56707 5.84218 8.75409 5.98008 8.89199C6.11797 9.02988 6.305 9.10735 6.50001 9.10735C6.69502 9.10735 6.88205 9.02988 7.01994 8.89199C7.15784 8.75409 7.2353 8.56707 7.2353 8.37206V3.28627L8.43077 4.48235C8.49917 4.55075 8.58037 4.605 8.66973 4.64202C8.7591 4.67904 8.85488 4.69809 8.9516 4.69809C9.04833 4.69809 9.14411 4.67904 9.23348 4.64202C9.32284 4.605 9.40404 4.55075 9.47244 4.48235C9.54083 4.41395 9.59509 4.33276 9.6321 4.24339C9.66912 4.15403 9.68817 4.05824 9.68817 3.96152C9.68817 3.86479 9.66912 3.76901 9.6321 3.67964C9.59509 3.59028 9.54083 3.50908 9.47244 3.44068L7.02146 0.989704C6.95314 0.921155 6.87197 0.866765 6.7826 0.829653C6.69322 0.792541 6.5974 0.773438 6.50062 0.773438C6.40385 0.773438 6.30802 0.792541 6.21865 0.829653C6.12927 0.866765 6.0481 0.921155 5.97979 0.989704L3.52881 3.44068C3.46041 3.50908 3.40616 3.59028 3.36914 3.67964C3.33212 3.76901 3.31307 3.86479 3.31307 3.96152C3.31307 4.15687 3.39068 4.34422 3.52881 4.48235C3.66694 4.62048 3.85429 4.69809 4.04964 4.69809C4.24499 4.69809 4.43234 4.62048 4.57048 4.48235L4.56925 4.48051Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2938_24787">
+        <rect width="12.549" height="13.3333" fill="white" transform="translate(0.225586 0.332031)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Push;
diff --git a/frontend/src/_ui/Icon/solidIcons/Remove03.jsx b/frontend/src/_ui/Icon/solidIcons/Remove03.jsx
new file mode 100644
index 0000000000..3b52c03603
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Remove03.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Remove03 = ({ width = '14', fill = '#6A727C', className = '', viewBox = '0 0 14 14' }) => (
+  <svg
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.5487 2.82638C12.9283 2.44677 12.9283 1.83131 12.5487 1.45169C12.1691 1.07209 11.5536 1.07209 11.1741 1.45169L7.0001 5.62566L2.82614 1.45169C2.44652 1.07209 1.83106 1.07209 1.45145 1.45169C1.07185 1.83131 1.07185 2.44677 1.45145 2.82638L5.62542 7.00035L1.45145 11.1743C1.07185 11.5539 1.07185 12.1694 1.45145 12.549C1.83106 12.9286 2.44652 12.9286 2.82614 12.549L7.0001 8.37502L11.1741 12.549C11.5536 12.9286 12.1691 12.9286 12.5487 12.549C12.9283 12.1694 12.9283 11.5539 12.5487 11.1743L8.37478 7.00035L12.5487 2.82638Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Remove03;
diff --git a/frontend/src/_ui/Icon/solidIcons/Skip.jsx b/frontend/src/_ui/Icon/solidIcons/Skip.jsx
new file mode 100644
index 0000000000..bf64d96e6c
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Skip.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Skip = ({ style, fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg
+    data-cy={`icon-hidden`}
+    width={width}
+    height={width}
+    viewBox={viewBox}
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    style={style}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.23801 7.9987C3.23801 5.36877 5.37 3.23679 7.99992 3.23679C10.6298 3.23679 12.7618 5.36877 12.7618 7.9987C12.7618 10.6286 10.6298 12.7606 7.99992 12.7606C5.37 12.7606 3.23801 10.6286 3.23801 7.9987ZM7.99992 1.33203C4.31802 1.33203 1.33325 4.3168 1.33325 7.9987C1.33325 11.6806 4.31802 14.6654 7.99992 14.6654C11.6818 14.6654 14.6666 11.6806 14.6666 7.9987C14.6666 4.3168 11.6818 1.33203 7.99992 1.33203ZM5.42172 6.76737C5.0498 6.39544 5.0498 5.79243 5.42172 5.4205C5.79365 5.04857 6.39666 5.04857 6.7686 5.4205L10.5781 9.23002C10.95 9.60196 10.95 10.205 10.5781 10.5769C10.2062 10.9488 9.60318 10.9488 9.23124 10.5769L5.42172 6.76737Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Skip;
diff --git a/frontend/src/_ui/Icon/solidIcons/Sliders.jsx b/frontend/src/_ui/Icon/solidIcons/Sliders.jsx
new file mode 100644
index 0000000000..3a20347c7c
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Sliders.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Sliders = ({ fill = '#ACB2B9', width = '16', height = '16', viewBox = '0 0 16 16' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox={viewBox} fill="none">
+    <path
+      d="M2.5 3.83333H6.73568C6.95332 4.60284 7.66082 5.16667 8.5 5.16667C9.33919 5.16667 10.0467 4.60284 10.2643 3.83333H14.5C14.7761 3.83333 15 3.60948 15 3.33333C15 3.05719 14.7761 2.83333 14.5 2.83333H10.2643C10.0467 2.06383 9.33919 1.5 8.5 1.5C7.66082 1.5 6.95332 2.06383 6.73568 2.83333H2.5C2.22386 2.83333 2 3.05719 2 3.33333C2 3.60948 2.22386 3.83333 2.5 3.83333Z"
+      fill={fill}
+    />
+    <path
+      d="M11.8333 6.16667C10.8208 6.16667 10 6.98748 10 8C10 9.01252 10.8208 9.83333 11.8333 9.83333C12.6725 9.83333 13.38 9.2695 13.5977 8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H13.5977C13.38 6.7305 12.6725 6.16667 11.8333 6.16667Z"
+      fill={fill}
+    />
+    <path
+      d="M2 8C2 7.72386 2.22386 7.5 2.5 7.5H8.5C8.77614 7.5 9 7.72386 9 8C9 8.27614 8.77614 8.5 8.5 8.5H2.5C2.22386 8.5 2 8.27614 2 8Z"
+      fill={fill}
+    />
+    <path
+      d="M3.40234 13.1667H2.5C2.22386 13.1667 2 12.9428 2 12.6667C2 12.3905 2.22386 12.1667 2.5 12.1667H3.40234C3.61999 11.3972 4.32748 10.8333 5.16667 10.8333C6.17919 10.8333 7 11.6541 7 12.6667C7 13.6792 6.17919 14.5 5.16667 14.5C4.32748 14.5 3.61999 13.9362 3.40234 13.1667Z"
+      fill={fill}
+    />
+    <path
+      d="M8 12.6667C8 12.3905 8.22386 12.1667 8.5 12.1667H14.5C14.7761 12.1667 15 12.3905 15 12.6667C15 12.9428 14.7761 13.1667 14.5 13.1667H8.5C8.22386 13.1667 8 12.9428 8 12.6667Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Sliders;
diff --git a/frontend/src/_ui/Icon/solidIcons/SourceControl.jsx b/frontend/src/_ui/Icon/solidIcons/SourceControl.jsx
new file mode 100644
index 0000000000..563781a7dc
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/SourceControl.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const SourceControl = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 25 25' }) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" rx="4" fill="#3A3F42" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.5 8.5C9.22386 8.5 9 8.72386 9 9C9 9.27614 9.22386 9.5 9.5 9.5C9.77614 9.5 10 9.27614 10 9C10 8.72386 9.77614 8.5 9.5 8.5ZM8 9C8 8.17157 8.67157 7.5 9.5 7.5C10.3284 7.5 11 8.17157 11 9C11 9.65311 10.5826 10.2087 10 10.4146V13.5854C10.4262 13.736 10.764 14.0738 10.9146 14.5H13.5C13.6326 14.5 13.7598 14.4473 13.8536 14.3536C13.9473 14.2598 14 14.1326 14 14V12.7071L13.3536 13.3536C13.1583 13.5488 12.8417 13.5488 12.6464 13.3536C12.4512 13.1583 12.4512 12.8417 12.6464 12.6464L14.1464 11.1464C14.3417 10.9512 14.6583 10.9512 14.8536 11.1464L16.3536 12.6464C16.5488 12.8417 16.5488 13.1583 16.3536 13.3536C16.1583 13.5488 15.8417 13.5488 15.6464 13.3536L15 12.7071V14C15 14.3978 14.842 14.7794 14.5607 15.0607C14.2794 15.342 13.8978 15.5 13.5 15.5H10.9146C10.7087 16.0826 10.1531 16.5 9.5 16.5C8.67157 16.5 8 15.8284 8 15C8 14.3469 8.4174 13.7913 9 13.5854V10.4146C8.4174 10.2087 8 9.65311 8 9ZM14.5 8.5C14.2239 8.5 14 8.72386 14 9C14 9.27614 14.2239 9.5 14.5 9.5C14.7761 9.5 15 9.27614 15 9C15 8.72386 14.7761 8.5 14.5 8.5ZM13 9C13 8.17157 13.6716 7.5 14.5 7.5C15.3284 7.5 16 8.17157 16 9C16 9.82843 15.3284 10.5 14.5 10.5C13.6716 10.5 13 9.82843 13 9ZM9.5 14.5C9.22386 14.5 9 14.7239 9 15C9 15.2761 9.22386 15.5 9.5 15.5C9.77614 15.5 10 15.2761 10 15C10 14.7239 9.77614 14.5 9.5 14.5Z"
+      fill="#ECEDEE"
+    />
+  </svg>
+);
+
+export default SourceControl;
diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js
index c6fb056b78..9f0254d79a 100644
--- a/frontend/src/_ui/Icon/solidIcons/index.js
+++ b/frontend/src/_ui/Icon/solidIcons/index.js
@@ -8,6 +8,7 @@ import ArrowReturn from './ArrowReturn.jsx';
 import ArrowRight from './ArrowRight.jsx';
 import ArrowSort from './ArrowSort.jsx';
 import ArrowSortRectangle from './ArrowSortRectangle.jsx';
+import AddNavItemURL from './AddNavItemURL.jsx';
 import ArrowTransfer from './ArrowTransfer.jsx';
 import ArrowUp from './ArrowUp.jsx';
 import BookSearch from './BookSearch.jsx';
@@ -21,6 +22,7 @@ import CheveronRight from './CheveronRight.jsx';
 import CheveronUp from './CheveronUp.jsx';
 import ClearRectangle from './ClearRectangle.jsx';
 import Clock from './Clock.jsx';
+import CursorClick from './CursorClick.jsx';
 import LockGradient from './LockGradient.jsx';
 import DatasourceGradient from './DatasourceGradient.jsx';
 import Column from './Column.jsx';
@@ -74,6 +76,7 @@ import Minus01 from './Minus01.jsx';
 import Mobile from './Mobile.jsx';
 import MoreHorizontal from './MoreHorizontal.jsx';
 import MoreVertical from './MoreVertical.jsx';
+import MoreVertical01 from './MoreVertical01.jsx';
 import Notification from './Notification.jsx';
 import NotificationRinging from './NotificationRinging.jsx';
 import NotificationSide from './NotificationSide.jsx';
@@ -83,6 +86,7 @@ import NewTab from './NewTab.jsx';
 import Open from './Open.jsx';
 import Page from './Page.jsx';
 import PageAdd from './PageAdd.jsx';
+import PageUpload from './PageUpload.jsx';
 import Pin from './Pin.jsx';
 import Unpin from './Unpin.jsx';
 import AlignRight from './AlignRight';
@@ -95,6 +99,7 @@ import Read from './Read.jsx';
 import ReloadError from './ReloadError.jsx';
 import Remove from './Remove.jsx';
 import Remove01 from './Remove01.jsx';
+import Remove03 from './Remove03.jsx';
 import RemoveRectangle from './RemoveRectangle.jsx';
 import RightArrow from './RightArrow.jsx';
 import RightOuterJoin from './RightOuterJoin.jsx';
@@ -110,6 +115,7 @@ import Settings from './Settings.jsx';
 import Share from './Share.jsx';
 import Shield from './Shield.jsx';
 import ShieldCheck from './ShieldCheck.jsx';
+import Skip from './Skip.jsx';
 import Signpost from './Signpost.jsx';
 import SmileRectangle from './SmileRectangle.jsx';
 import SortArrowDown from './SortArrowDown.jsx';
@@ -235,11 +241,21 @@ import EmptyStateModules from './EmptyStateModules.jsx';
 import Code from './Code.jsx';
 import WorkflowV3 from './WorkflowV3.jsx';
 import WorkspaceV3 from './WorkspaceV3.jsx';
+import CurlyBraces from './CurlyBraces.jsx';
+import Sliders from './Sliders.jsx';
+import Asterix from './Asterix.jsx';
+import ArrowDirectionLoop from './ArrowDirectionLoop.jsx';
 import EnterpriseCrown from './EnterrpiseCrown.jsx';
 import FileCode from './FileCode.jsx';
 import Corners from './Corners.jsx';
 import Moon from './Moon.jsx';
-import MoreVertical01 from './MoreVertical01.jsx';
+import NoPageEvents from './NoPageEvents.jsx';
+import ArrowRight01 from './ArrowRight01.jsx';
+import DuplicatePage from './DuplicatePage.jsx';
+import Delete01 from './Delete01.jsx';
+import SourceControl from './SourceControl.jsx';
+import Push from './PushIcon.jsx';
+import Pull from './PullIcon.jsx';
 import RemoveFolder from './RemoveFolder.jsx';
 
 const Icon = (props) => {
@@ -252,6 +268,8 @@ const Icon = (props) => {
       return <DarkIcon {...props} />;
     case 'addrectangle':
       return <AddRectangle {...props} />;
+    case 'addnavitemurl':
+      return <AddNavItemURL {...props} />;
     case 'alignleftinspector':
       return <AlignLeftinspector {...props} />;
     case 'alignrightinspector':
@@ -274,8 +292,12 @@ const Icon = (props) => {
       return <ArrowBack {...props} />;
     case 'arrowbackdown':
       return <ArrowBackDown {...props} />;
+    case 'arrowright01':
+      return <ArrowRight01 {...props} />;
     case 'arrowdown':
       return <ArrowDown {...props} />;
+    case 'arrowdirectionloop':
+      return <ArrowDirectionLoop {...props} />;
     case 'arroweft':
       return <Arroweft {...props} />;
     case 'arrowreturn':
@@ -290,6 +312,8 @@ const Icon = (props) => {
       return <ArrowTransfer {...props} />;
     case 'arrowup':
       return <ArrowUp {...props} />;
+    case 'asterix':
+      return <Asterix {...props} />;
     case 'auditlogs':
       return <AuditLogs {...props} />;
     case 'booksearch':
@@ -326,6 +350,8 @@ const Icon = (props) => {
       return <Code {...props} />;
     case 'clock':
       return <Clock {...props} />;
+    case 'cursorclick':
+      return <CursorClick {...props} />;
     case 'column':
       return <Column {...props} />;
     case 'columns':
@@ -336,6 +362,8 @@ const Icon = (props) => {
       return <Computer {...props} />;
     case 'copy':
       return <Copy {...props} />;
+    case 'curlybraces':
+      return <CurlyBraces {...props} />;
     case 'darkmode':
       return <DarkMode {...props} />;
     case 'datasource':
@@ -346,16 +374,22 @@ const Icon = (props) => {
       return <DangerDark {...props} />;
     case 'delete':
       return <Delete {...props} />;
+    case 'delete01':
+      return <Delete01 {...props} />;
     case 'diamond':
       return <Diamond {...props} />;
     case 'downarrow':
       return <DownArrow {...props} />;
+    case 'duplicatepage':
+      return <DuplicatePage {...props} />;
     case 'editrectangle':
       return <EditRectangle {...props} />;
     case 'enterprise':
       return <Enterprise {...props} />;
     case 'enterpriseGradient':
       return <EnterpriseGradient {...props} />;
+    case 'nopageevents':
+      return <NoPageEvents {...props} />;
     case 'enterprisesmall':
       return <EnterpriseSmall {...props} />;
     case 'enterprise-new':
@@ -460,6 +494,8 @@ const Icon = (props) => {
       return <MoreHorizontal {...props} />;
     case 'morevertical':
       return <MoreVertical {...props} />;
+    case 'morevertical01':
+      return <MoreVertical01 {...props} />;
     case 'notification':
       return <Notification {...props} />;
     case 'notificationringing':
@@ -480,6 +516,8 @@ const Icon = (props) => {
       return <Page {...props} />;
     case 'pageAdd':
       return <PageAdd {...props} />;
+    case 'pageUpload':
+      return <PageUpload {...props} />;
     case 'pin':
       return <Pin {...props} />;
     case 'unpin01':
@@ -552,8 +590,12 @@ const Icon = (props) => {
       return <Shield {...props} />;
     case 'shieldcheck':
       return <ShieldCheck {...props} />;
+    case 'skip':
+      return <Skip {...props} />;
     case 'signpost':
       return <Signpost {...props} />;
+    case 'sliders':
+      return <Sliders {...props} />;
     case 'smilerectangle':
       return <SmileRectangle {...props} />;
     case 'sortarrowdown':
@@ -700,6 +742,8 @@ const Icon = (props) => {
       return <ReplaceAll {...props} />;
     case 'remove02':
       return <Remove02 {...props} />;
+    case 'remove03':
+      return <Remove03 {...props} />;
     case 'bookdemo':
       return <BookDemo {...props} />;
     case 'contactv3':
@@ -726,8 +770,12 @@ const Icon = (props) => {
       return <Play01 {...props} />;
     case 'moon':
       return <Moon {...props} />;
-    case 'morevertical01':
-      return <MoreVertical01 {...props} />;
+    case 'source-control':
+      return <SourceControl {...props} />;
+    case 'push-changes':
+      return <Push {...props} />;
+    case 'pull-changes':
+      return <Pull {...props} />;
     default:
       return <Apps {...props} />;
   }
diff --git a/frontend/src/_ui/Label.jsx b/frontend/src/_ui/Label.jsx
index 443f4ddc6e..4597ba7543 100644
--- a/frontend/src/_ui/Label.jsx
+++ b/frontend/src/_ui/Label.jsx
@@ -39,7 +39,7 @@ function Label({ label, width, labelRef, color, defaultAlignment, direction, aut
             {isMandatory && (
               <span
                 style={{
-                  color: 'var(--status-error-strong)',
+                  color: 'var(--cc-error-systemStatus)',
                   position: 'absolute',
                   right: direction == 'right' ? '0px' : '4px',
                   top: '0px',
diff --git a/frontend/src/components/ui/Button/Button.jsx b/frontend/src/components/ui/Button/Button.jsx
index 6f95221805..41df1ac15e 100644
--- a/frontend/src/components/ui/Button/Button.jsx
+++ b/frontend/src/components/ui/Button/Button.jsx
@@ -126,6 +126,7 @@ const Button = forwardRef(
       asChild = false,
       fill = '',
       iconOnly = false, // as normal button and icon have diff styles make sure to pass it as truw when icon only button is used
+      loaderText = null,
       ...props
     },
     ref
@@ -149,6 +150,23 @@ const Button = forwardRef(
       </div>
     );
 
+    const renderLoader = () => {
+      if (loaderText) {
+        return (
+          <div className="tw-flex tw-justify-center tw-items-center tw-gap-1.5">
+            <Loader color={iconFillColor} width={getIconSize(size)} position="relative" />
+            <span>{loaderText}</span>
+          </div>
+        );
+      }
+      return (
+        <div className="tw-flex tw-justify-center tw-items-center">
+          <Loader color={iconFillColor} width={getIconSize(size)} />
+          <a className="tw-invisible">{props.children}</a>
+        </div>
+      );
+    };
+
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, iconOnly, className }))}
@@ -157,10 +175,7 @@ const Button = forwardRef(
         {...props}
       >
         {isLoading ? (
-          <div className="tw-flex tw-justify-center tw-items-center">
-            <Loader color={iconFillColor} width={getIconSize(size)} />
-            <a className="tw-invisible">{props.children}</a>
-          </div>
+          renderLoader()
         ) : (
           <>
             {leadingIconElement}
diff --git a/frontend/src/components/ui/Dropdown/DropdownUtils/DropdownUtils.jsx b/frontend/src/components/ui/Dropdown/DropdownUtils/DropdownUtils.jsx
index bbbb8e6b61..cd3b84e329 100644
--- a/frontend/src/components/ui/Dropdown/DropdownUtils/DropdownUtils.jsx
+++ b/frontend/src/components/ui/Dropdown/DropdownUtils/DropdownUtils.jsx
@@ -21,23 +21,36 @@ export const dropdownVariants = cva('', {
   },
 });
 
-export const LeadingIcon = (props) => (
-  <div
-    className={cn(
-      `tw-flex tw-h-[18px] ${props.avatarSrc ? 'tw-w-[20px]' : 'tw-w-[16px]'} tw-items-center tw-justify-center`,
-      props.className
-    )}
-  >
-    {props.avatarSrc ? (
-      <Avatar>
-        <AvatarImage src={props.avatarSrc} alt={props.avatarAlt} />
-        <AvatarFallback>{props.avatarFall}</AvatarFallback>
-      </Avatar>
-    ) : (
-      <SolidIcon name="user" height="16px" width="16px" fill="var(--icon-default)" />
-    )}
-  </div>
-);
+export const LeadingIcon = (props) => {
+  const { icon, className } = props;
+  if (icon) {
+    // If icon is already a React element, render it directly
+    if (React.isValidElement(icon)) {
+      return React.cloneElement(icon, { className });
+    }
+    // If icon is a component reference
+    const Icon = icon;
+    return <Icon className={className} />;
+  }
+
+  return (
+    <div
+      className={cn(
+        `tw-flex tw-h-[18px] ${props.avatarSrc ? 'tw-w-[20px]' : 'tw-w-[16px]'} tw-items-center tw-justify-center`,
+        props.className
+      )}
+    >
+      {props.avatarSrc ? (
+        <Avatar>
+          <AvatarImage src={props.avatarSrc} alt={props.avatarAlt} />
+          <AvatarFallback>{props.avatarFall}</AvatarFallback>
+        </Avatar>
+      ) : (
+        <SolidIcon name="user" height="16px" width="16px" fill="var(--icon-default)" />
+      )}
+    </div>
+  );
+};
 
 export const TrailingAction = ({ trailingAction }) => (
   <div className="tw-absolute tw-right-[8px] tw-flex tw-h-[18px] tw-w-[16px] tw-items-center tw-justify-center">
diff --git a/frontend/src/components/ui/Dropdown/Index.jsx b/frontend/src/components/ui/Dropdown/Index.jsx
index 2ac535cbef..3cd98b9dcd 100644
--- a/frontend/src/components/ui/Dropdown/Index.jsx
+++ b/frontend/src/components/ui/Dropdown/Index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from './Select';
 import { DropdownLabel, HelperMessage, ValidationMessage } from './DropdownUtils/DropdownUtils';
@@ -7,6 +7,14 @@ const DropdownComponent = ({ options = {}, ...props }) => {
   const [open, setOpen] = useState(false);
   const [isValid, setIsValid] = useState(null);
   const [message, setMessage] = useState('');
+  const triggerRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(0);
+
+  useEffect(() => {
+    if (triggerRef.current) {
+      setTriggerWidth(triggerRef.current.offsetWidth);
+    }
+  }, []);
 
   const dropdownStyle = `${
     isValid === true ? '!tw-border-border-success-strong' : isValid === false ? '!tw-border-border-danger-strong' : ''
@@ -14,6 +22,8 @@ const DropdownComponent = ({ options = {}, ...props }) => {
 
   const handleOpenChange = () => {
     setOpen(!open);
+    if (!open) props.onOpen?.();
+    else props.onClose?.();
   };
 
   const handleChange = (e) => {
@@ -30,21 +40,22 @@ const DropdownComponent = ({ options = {}, ...props }) => {
     <div>
       {props.label && <DropdownLabel label={props.label} disabled={props.disabled} required={props.required} />}
       <Select {...props} onOpenChange={handleOpenChange} onValueChange={handleChange}>
-        <SelectTrigger open={open} className={dropdownStyle} {...props}>
+        <SelectTrigger ref={triggerRef} open={open} className={dropdownStyle} {...props}>
           <SelectValue placeholder={props.placeholder} />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent style={{ width: triggerWidth > 0 ? `${triggerWidth}px` : props.width }}>
           <SelectGroup>
             {Object.keys(options).map((key) => (
               <SelectItem
                 {...props}
                 value={options[key].value}
+                leadingIcon={options[key].leadingIcon}
                 avatarSrc={options[key].avatarSrc}
                 avatarAlt={options[key].avatarAlt}
                 avatarFall={options[key].avatarFall}
                 key={key}
               >
-                {key}
+                {options[key].label ?? key}
               </SelectItem>
             ))}
           </SelectGroup>
diff --git a/frontend/src/components/ui/Dropdown/Select.jsx b/frontend/src/components/ui/Dropdown/Select.jsx
index 79d96c269e..c705a03a76 100644
--- a/frontend/src/components/ui/Dropdown/Select.jsx
+++ b/frontend/src/components/ui/Dropdown/Select.jsx
@@ -37,14 +37,21 @@ const SelectTrigger = React.forwardRef(({ className, children, open, size, ...pr
       onMouseLeave={() => setIsHovered(false)}
       {...props}
     >
-      <div className="tw-flex tw-items-center tw-gap-[6px]">
+      <div
+        className="tw-flex tw-items-center tw-gap-[6px]"
+        style={props.leadingIcon ? { width: 'calc(100% - 28px)' } : {}}
+      >
         {props.leadingIcon && (
-          <LeadingIcon avatarSrc={props.avatarSrc} avatarAlt={props.avatarAlt} avatarFall={props.avatarFall} />
+          <LeadingIcon
+            icon={props.leadingIcon}
+            avatarSrc={props.avatarSrc}
+            avatarAlt={props.avatarAlt}
+            avatarFall={props.avatarFall}
+          />
         )}
         <div
-          className={`${
-            props.leadingIcon ? 'tw-max-w-[94px]' : 'tw-max-w-[116px]'
-          } [&>span]:tw-text-left [&>span]:tw-line-clamp-1`}
+          className={`[&>span]:tw-text-left [&>span]:tw-line-clamp-1`}
+          style={{ wordWrap: 'break-word', width: props.leadingIcon ? 'calc(100% - 20px)' : '116px' }}
         >
           {children}
         </div>
@@ -84,7 +91,7 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'tw-relative tw-z-50 tw-max-h-96 tw-w-[170px] tw-p-[6px] tw-overflow-hidden tw-rounded-[10px] tw-border tw-bg-background-surface-layer-01 tw-text-text-default tw-shadow-md data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
+        `tw-relative tw-z-[99999] tw-max-h-96 tw-w-[170px] tw-p-[6px] tw-overflow-hidden tw-rounded-[10px] tw-border tw-bg-background-surface-layer-01 tw-text-text-default tw-shadow-md data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2`,
         position === 'popper' &&
           'data-[side=bottom]:tw-translate-y-1 data-[side=left]:-tw-translate-x-1 data-[side=right]:tw-translate-x-1 data-[side=top]:-tw-translate-y-1',
         className
@@ -113,7 +120,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'tw-relative tw-flex tw-w-full tw-h-[30px] tw-items-center tw-rounded-[6px] tw-py-[6px] tw-pl-[30px] tw-pr-[8px] tw-text-[12px]/[18px] tw-font-normal tw-text-text-default tw-outline-none focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-interactive-focus-outline focus-visible:tw-ring-offset-interactive-focus-outline hover:tw-bg-[#CCD1D5]/30 active:tw-bg-[#ACB2B9]/35 data-[disabled]:tw-pointer-events-none data-[disabled]:tw-text-text-placeholder [&>span]:tw-w-[50px] [&>span]:tw-text-left [&>span]:tw-line-clamp-1',
+      'tw-relative tw-flex tw-w-full tw-h-[30px] tw-items-center tw-rounded-[6px] tw-py-[6px] tw-pl-[30px] tw-pr-[8px] tw-text-[12px]/[18px] tw-font-normal tw-text-text-default tw-outline-none focus-visible:tw-ring-[1px] focus-visible:tw-ring-offset-[1px] focus-visible:tw-ring-interactive-focus-outline focus-visible:tw-ring-offset-interactive-focus-outline hover:tw-bg-[#CCD1D5]/30 active:tw-bg-[#ACB2B9]/35 data-[disabled]:tw-pointer-events-none data-[disabled]:tw-text-text-placeholder [&>span]:tw-w-[100px] [&>span]:tw-text-left [&>span]:tw-line-clamp-1 tw-cursor-pointer',
       className
     )}
     {...props}
@@ -125,6 +132,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
     </div>
     {props.leadingIcon && (
       <LeadingIcon
+        icon={props.leadingIcon}
         avatarSrc={props.avatarSrc}
         avatarAlt={props.avatarAlt}
         avatarFall={props.avatarFall}
diff --git a/frontend/src/components/ui/utilComponents/loader.jsx b/frontend/src/components/ui/utilComponents/loader.jsx
index c1497bccd2..da2dc1f1d2 100644
--- a/frontend/src/components/ui/utilComponents/loader.jsx
+++ b/frontend/src/components/ui/utilComponents/loader.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Loader = ({ color, width }) => {
+const Loader = ({ color, width, position = 'absolute' }) => {
   const loaderStyle = {
     width,
     height: width,
@@ -11,6 +11,7 @@ const Loader = ({ color, width }) => {
     } 90%, transparent 94%) top/4px 4px no-repeat, conic-gradient(#0000 30%, ${color || '#FFFFFF'})`,
     WebkitMask: `radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0)`,
     animation: 'l13 1s infinite linear',
+    position,
   };
 
   return <div className="component-spinner" style={loaderStyle}></div>;
diff --git a/frontend/src/modules/Appbuilder/components/ColorSwatches/ColorSwatches.jsx b/frontend/src/modules/Appbuilder/components/ColorSwatches/ColorSwatches.jsx
index bf0839f842..d4aa71ef5c 100644
--- a/frontend/src/modules/Appbuilder/components/ColorSwatches/ColorSwatches.jsx
+++ b/frontend/src/modules/Appbuilder/components/ColorSwatches/ColorSwatches.jsx
@@ -1,9 +1,16 @@
 import React from 'react';
 import { withEditionSpecificComponent } from '@/modules/common/helpers';
 import BaseColorSwatches from '@/modules/common/components/BaseColorSwatches';
+import { getCssVarValue } from '@/Editor/Components/utils';
 
 const ColorSwatches = (props) => {
-  return <BaseColorSwatches {...props} />;
+  const { value } = props;
+  let modifiedValue = props.value;
+  if (typeof value === 'string' && value?.includes('var(')) {
+    modifiedValue = getCssVarValue(document.documentElement, value);
+  }
+
+  return <BaseColorSwatches {...props} value={modifiedValue} />;
 };
 
 export default withEditionSpecificComponent(ColorSwatches, 'Appbuilder');
diff --git a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
index fde35f9320..d46b809fd7 100644
--- a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
+++ b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
@@ -135,7 +135,7 @@ class BaseSSOConfigurationList extends React.Component {
   toggleDefaultSSO = async () => {
     try {
       const currentDefaultSSO = !this.state.defaultSSO;
-      await organizationService.editOrganization({ inheritSSO: currentDefaultSSO });
+      await organizationService.updateInheritSSO({ inheritSSO: currentDefaultSSO });
       this.setState(
         {
           defaultSSO: currentDefaultSSO,
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/BaseManageGranularAccess.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/BaseManageGranularAccess.jsx
index 118340107c..10dd038087 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/BaseManageGranularAccess.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGranularAccess/BaseManageGranularAccess.jsx
@@ -131,7 +131,7 @@ class BaseManageGranularAccess extends React.Component {
       deleteGranularPermissions: true,
     });
     groupPermissionV2Service
-      .deleteGranularPermission(currentEditingPermissions.id)
+      .deleteGranularPermission(currentEditingPermissions)
       .then(() => {
         toast.success('Deleted permission successfully');
         this.fetchGranularPermissions(this.props.groupPermissionId);
@@ -365,7 +365,7 @@ class BaseManageGranularAccess extends React.Component {
       allowRoleChange,
     };
     groupPermissionV2Service
-      .updateGranularPermission(permission.id, body)
+      .updateGranularPermission(permission, body)
       .then(() => {
         this.fetchGranularPermissions(this.props.groupPermissionId);
         this.closeAddPermissionModal();
@@ -451,7 +451,7 @@ class BaseManageGranularAccess extends React.Component {
     };
 
     groupPermissionV2Service
-      .updateGranularPermission(currentEditingPermissions.id, body)
+      .updateGranularPermission(currentEditingPermissions, body)
       .then(() => {
         this.fetchGranularPermissions(this.props.groupPermissionId);
         this.closeAddPermissionModal();
@@ -495,7 +495,7 @@ class BaseManageGranularAccess extends React.Component {
           <SolidIcon name="informationcircle" fill="var(--slate8)" /> {text}
           <a
             style={{ margin: '0', padding: '0', textDecoration: 'underline', color: '#3E63DD' }}
-            href="https://docs.tooljet.com/docs/tutorial/manage-users-groups/"
+            href="https://docs.tooljet.ai/docs/tutorial/manage-users-groups/"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -636,7 +636,6 @@ class BaseManageGranularAccess extends React.Component {
 
     const currentGroupPermission = this.props?.groupPermission;
     const isRoleGroup = currentGroupPermission.name == 'admin';
-    const defaultGroup = currentGroupPermission.type === 'default';
     const showPermissionInfo = currentGroupPermission.name == 'admin' || currentGroupPermission.name == 'end-user';
     const addPermissionTooltipMessage = !newPermissionName
       ? 'Please input permissions name'
diff --git a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx
index efc01bb72c..0ae6b0bc0c 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/Groups/components/BaseManageGroupPermissionResources/BaseManageGroupPermissionResources.jsx
@@ -265,7 +265,7 @@ class BaseManageGroupPermissionResources extends React.Component {
           <SolidIcon name="informationcircle" fill="#3E63DD" /> {text}
           <a
             style={{ margin: '0', padding: '0', textDecoration: 'underline', color: '#3E63DD' }}
-            href="https://docs.tooljet.com/docs/tutorial/manage-users-groups/"
+            href="https://docs.tooljet.ai/docs/tutorial/manage-users-groups/"
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx b/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx
index e616f718ed..160799dc9d 100644
--- a/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx
+++ b/frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx
@@ -4,6 +4,8 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import classNames from 'classnames';
 import { computeColor } from '@/_helpers/utils';
+import { Tooltip } from 'react-bootstrap';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 const BaseColorSwatches = ({
   value,
@@ -19,6 +21,7 @@ const BaseColorSwatches = ({
   componentType = 'color',
   CustomOptionList = () => {},
   SwatchesToggle = () => {},
+  onReset,
 }) => {
   value = component == 'Button' ? computeColor(styleDefinition, value, meta) : value;
   const [showPicker, setShowPicker] = useState(false);
@@ -58,12 +61,17 @@ const BaseColorSwatches = ({
       <Popover
         className={classNames(
           { 'dark-theme': darkMode },
-          // This is fix when color picker don't have much space to open in bottom side
           { 'inspector-color-input-popover': colorPickerPosition === 'top' }
         )}
-        style={{ zIndex: 10000 }}
+        style={{ zIndex: 999999 }}
       >
-        <Popover.Body className={!asBoxShadowPopover && 'boxshadow-picker'} style={{ padding: '0px' }}>
+        <Popover.Body
+          className={!asBoxShadowPopover && 'boxshadow-picker'}
+          style={{
+            padding: '0px',
+            marginLeft: '-16px',
+          }}
+        >
           <>{ColorPicker()}</>
         </Popover.Body>
       </Popover>
@@ -74,7 +82,23 @@ const BaseColorSwatches = ({
     return (
       <div className="codebuilder-color-picker">
         {SwatchesToggle()}
-        {showPicker && componentType === 'swatches' && CustomOptionList()}
+        {showPicker && componentType === 'swatches' && (
+          <div
+            style={{
+              maxHeight: '200px',
+              overflowY: 'auto',
+              padding: '8px',
+              paddingTop: '0px',
+              '&::-webkit-scrollbar': {
+                display: 'none',
+              },
+              msOverflowStyle: 'none',
+              scrollbarWidth: 'none',
+            }}
+          >
+            {CustomOptionList()}
+          </div>
+        )}
         {showPicker && componentType === 'color' && (
           <div>
             {/* <div style={coverStyles} onClick={() => setShowPicker(false)} /> */}
@@ -92,6 +116,7 @@ const BaseColorSwatches = ({
     );
   };
   const ColorPickerInputBox = () => {
+    console.log('onReset', onReset);
     return (
       <div
         className="row mx-0 color-picker-input d-flex"
@@ -99,13 +124,33 @@ const BaseColorSwatches = ({
         data-cy={`${String(cyLabel)}-picker`}
         style={outerStyles}
       >
-        <div className="color-icon" style={{ backgroundColor: value, marginLeft: '8px' }} />
+        <div className="color-icon" style={{ backgroundColor: value, marginLeft: '4px' }} />
 
-        <div className="col tj-text-xsm p-0 color-slate12" data-cy={`${String(cyLabel)}-value`}>
+        <div
+          className="col tj-text-xsm p-0 color-slate12"
+          data-cy={`${String(cyLabel)}-value`}
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
           {colorMap?.[value]
-            ? 'Brand/' + colorMap?.[value]?.charAt(0).toUpperCase() + colorMap?.[value]?.slice(1)
+            ? colorMap[value]
+                .split('/')
+                .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+                .join('/')
             : value}
         </div>
+        {typeof onReset === 'function' && (
+          <div className="col-auto p-0">
+            <OverlayTrigger placement="left" overlay={<Tooltip id="reset-default-color">Reset to default</Tooltip>}>
+              <div onClick={onReset} className="color-reset">
+                <SolidIcon name="reset" />
+              </div>
+            </OverlayTrigger>
+          </div>
+        )}
       </div>
     );
   };
diff --git a/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx b/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx
index dba5206476..e0dee2a9f5 100644
--- a/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx
+++ b/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx
@@ -579,7 +579,7 @@ const BaseManageOrgConstants = ({
                           // Todo: Update link to documentation: workspace constants
                           onClick={() =>
                             window.open(
-                              'https://docs.tooljet.com/docs/org-management/workspaces/workspace_constants/',
+                              'https://docs.tooljet.ai/docs/org-management/workspaces/workspace_constants/',
                               '_blank'
                             )
                           }
diff --git a/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/PromoteVersionButton.jsx b/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/PromoteVersionButton.jsx
index f30c40b82f..ef0279712a 100644
--- a/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/PromoteVersionButton.jsx
+++ b/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/PromoteVersionButton.jsx
@@ -9,20 +9,25 @@ import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 const PromoteVersionButton = () => {
   const { moduleId } = useModuleContext();
   const [promoteModalData, setPromoteModalData] = useState(null);
-  const { isSaving, editingVersion, appVersionEnvironment, environments, selectedEnvironment, currentEnvIndex } = useStore(
-    (state) => ({
-      isSaving: state.appStore.modules[moduleId].app.isSaving,
-      editingVersion: state.currentVersionId,
-      selectedEnvironment: state.selectedEnvironment,
-      environments: state.environments,
-      appVersionEnvironment: state.appVersionEnvironment,
-      currentEnvIndex: state.environments?.findIndex((env) => env?.id === state.appVersionEnvironment?.id),
-    }),
-    shallow
-  );
+  const { isSaving, editingVersion, appVersionEnvironment, environments, selectedEnvironment, currentEnvIndex } =
+    useStore(
+      (state) => ({
+        isSaving: state.appStore.modules[moduleId].app.isSaving,
+        editingVersion: state.currentVersionId,
+        selectedEnvironment: state.selectedEnvironment,
+        environments: state.environments,
+        appVersionEnvironment: state.appVersionEnvironment,
+        currentEnvIndex: state.environments?.findIndex((env) => env?.id === state.appVersionEnvironment?.id),
+      }),
+      shallow
+    );
 
   // enable only after the environment details are loaded
-  const shouldDisablePromote = isSaving || selectedEnvironment?.priority < appVersionEnvironment?.priority || !appVersionEnvironment || !environments?.[currentEnvIndex + 1];
+  const shouldDisablePromote =
+    isSaving ||
+    selectedEnvironment?.priority < appVersionEnvironment?.priority ||
+    !appVersionEnvironment ||
+    !environments?.[currentEnvIndex + 1];
 
   const handlePromote = () => {
     setPromoteModalData({
@@ -57,7 +62,7 @@ const PromoteVersionButton = () => {
         data={promoteModalData}
         editingVersion={editingVersion}
         onClose={() => setPromoteModalData(null)}
-        fetchEnvironments={() => { }}
+        fetchEnvironments={() => {}}
       />
     </>
   );
diff --git a/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/components/PromoteConfirmationModal/PromoteConfirmationModal.jsx b/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/components/PromoteConfirmationModal/PromoteConfirmationModal.jsx
index cbc1284c06..7c8be912d5 100644
--- a/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/components/PromoteConfirmationModal/PromoteConfirmationModal.jsx
+++ b/frontend/src/modules/common/components/BasePromoteReleaseButton/components/PromoteVersionButton/components/PromoteConfirmationModal/PromoteConfirmationModal.jsx
@@ -38,6 +38,7 @@ const PromoteConfirmationModal = React.memo(({ data, onClose }) => {
     onClose();
     setShow(false);
   }, [promotingEnvironment, onClose]);
+  const allowAppEdit = useStore((state) => state.allowEditing);
 
   const handleConfirm = () => {
     setPromotingEnvironment(true);
@@ -46,7 +47,10 @@ const PromoteConfirmationModal = React.memo(({ data, onClose }) => {
       currentVersionId,
       async (response) => {
         toast.success(`${selectedVersion.name} has been promoted to ${data.target.name}!`);
-        if (data?.current?.name == 'development' && creationMode !== 'GIT') {
+        if (
+          data?.current?.name == 'development' &&
+          (creationMode !== 'GIT' || (creationMode === 'GIT' && allowAppEdit))
+        ) {
           try {
             const gitData = await gitSyncService.getAppConfig(current_organization_id, selectedVersion?.id);
             const appGit = gitData?.app_git;
diff --git a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
index 9f601bb412..4251ebf866 100644
--- a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
@@ -944,10 +944,10 @@ class DataSourceManagerComponent extends React.Component {
       : true;
     this.props.setGlobalDataSourceStatus({ isEditing: !isSaveDisabled });
     const docLink = isSampleDb
-      ? 'https://docs.tooljet.com/docs/data-sources/sample-data-sources'
+      ? 'https://docs.tooljet.ai/docs/data-sources/sample-data-sources'
       : selectedDataSource?.pluginId && selectedDataSource.pluginId.trim() !== ''
-      ? `https://docs.tooljet.com/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource?.kind}/`
-      : `https://docs.tooljet.com/docs/data-sources/${selectedDataSource?.kind}`;
+      ? `https://docs.tooljet.ai/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource?.kind}/`
+      : `https://docs.tooljet.ai/docs/data-sources/${selectedDataSource?.kind}`;
     return (
       pluginsLoaded && (
         <div>
@@ -1206,8 +1206,8 @@ class DataSourceManagerComponent extends React.Component {
                         data-cy="link-read-documentation"
                         href={
                           selectedDataSource?.pluginId && selectedDataSource.pluginId.trim() !== ''
-                            ? `https://docs.tooljet.com/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource.kind}/`
-                            : `https://docs.tooljet.com/docs/data-sources/${selectedDataSource.kind}`
+                            ? `https://docs.tooljet.ai/docs/marketplace/plugins/marketplace-plugin-${selectedDataSource.kind}/`
+                            : `https://docs.tooljet.ai/docs/data-sources/${selectedDataSource.kind}`
                         }
                         target="_blank"
                         rel="noreferrer"
diff --git a/resolve-conflicts-submodules.sh b/resolve-conflicts-submodules.sh
new file mode 100644
index 0000000000..e98dff0bb1
--- /dev/null
+++ b/resolve-conflicts-submodules.sh
@@ -0,0 +1,69 @@
+#!/bin/bash
+
+# Script to resolve git submodule conflicts during rebase
+# Usage: ./resolve-submodule-conflicts.sh
+
+set -e  # Exit on any error
+
+echo "🔧 Resolving git submodule conflicts..."
+
+# Function to resolve submodule conflict
+resolve_submodule_conflict() {
+    local submodule_path=$1
+    local submodule_name=$(basename "$submodule_path")
+    
+    echo "📁 Processing submodule: $submodule_path"
+    
+    # Check if submodule directory exists
+    if [ ! -d "$submodule_path" ]; then
+        echo "❌ Error: Submodule directory '$submodule_path' does not exist"
+        return 1
+    fi
+    
+    # Step 1: Navigate to submodule directory
+    echo "  → Entering $submodule_path"
+    cd "$submodule_path"
+    
+    # Step 2: Get the latest commit hash from main branch
+    echo "  → Fetching latest changes..."
+    git fetch origin
+    
+    echo "  → Getting latest commit from main branch..."
+    main_commit=$(git rev-parse origin/main)
+    echo "  → Latest main commit: $main_commit"
+    
+    # Step 3: Checkout to the latest main commit
+    echo "  → Checking out to latest main commit..."
+    git checkout "$main_commit"
+    
+    # Step 4: Go back to root directory
+    echo "  → Returning to root directory..."
+    cd - > /dev/null
+    
+    # Step 5: Stage the submodule changes
+    echo "  → Staging submodule changes..."
+    git add "$submodule_path"
+    
+    echo "✅ Resolved conflict for $submodule_path"
+    echo ""
+}
+
+# Main execution
+echo "🚀 Starting submodule conflict resolution..."
+echo ""
+
+# Resolve server/ee submodule
+if [ -d "server/ee" ]; then
+    resolve_submodule_conflict "server/ee"
+else
+    echo "⚠️  Warning: server/ee directory not found, skipping..."
+fi
+
+# Resolve frontend/ee submodule
+if [ -d "frontend/ee" ]; then
+    resolve_submodule_conflict "frontend/ee"
+else
+    echo "⚠️  Warning: frontend/ee directory not found, skipping..."
+fi
+
+echo "🎉 All submodule conflicts resolved!"
diff --git a/server/data-migrations/1744195079014-MoveVisibilityForRangeSliderComponent.ts b/server/data-migrations/1744195079014-MoveVisibilityForRangeSliderComponent.ts
new file mode 100644
index 0000000000..4b0efe0946
--- /dev/null
+++ b/server/data-migrations/1744195079014-MoveVisibilityForRangeSliderComponent.ts
@@ -0,0 +1,43 @@
+import { Component } from 'src/entities/component.entity';
+import { processDataInBatches } from '@helpers/migration.helper';
+import { EntityManager, MigrationInterface, QueryRunner } from 'typeorm';
+
+export class MoveVisibilityForRangeSliderComponent1744195079014 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const batchSize = 100;
+    const entityManager = queryRunner.manager;
+
+    await processDataInBatches(
+      entityManager,
+      async (entityManager: EntityManager) => {
+        return await entityManager.find(Component, {
+          where: { type: 'RangeSlider' },
+          order: { createdAt: 'ASC' },
+        });
+      },
+      async (entityManager: EntityManager, components: Component[]) => {
+        await this.processUpdates(entityManager, components);
+      },
+      batchSize
+    );
+  }
+
+  private async processUpdates(entityManager, components) {
+    for (const component of components) {
+      const properties = component.properties;
+      const styles = component.styles;
+
+      if (styles.visibility) {
+        properties.visibility = styles.visibility;
+        delete styles.visibility;
+      }
+
+      await entityManager.update(Component, component.id, {
+        properties,
+        styles,
+      });
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/data-migrations/1746728238308-SetDefaultSessionTypeToUser.ts b/server/data-migrations/1746728238308-SetDefaultSessionTypeToUser.ts
new file mode 100644
index 0000000000..94c2ce04f3
--- /dev/null
+++ b/server/data-migrations/1746728238308-SetDefaultSessionTypeToUser.ts
@@ -0,0 +1,13 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class SetDefaultSessionTypeToUser1746728238308 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            UPDATE user_sessions
+            SET session_type = 'user'
+            WHERE session_type IS NULL;
+          `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/data-migrations/1749711866124-MigrateEnabledFlagToProviderColumns.ts b/server/data-migrations/1749711866124-MigrateEnabledFlagToProviderColumns.ts
new file mode 100644
index 0000000000..1ec386133b
--- /dev/null
+++ b/server/data-migrations/1749711866124-MigrateEnabledFlagToProviderColumns.ts
@@ -0,0 +1,35 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class MigrateEnabledFlagToProviderColumns1749711866124 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      UPDATE "organization_git_ssh" git_ssh
+      SET "is_enabled" = TRUE 
+      FROM "organization_git_sync" git_sync 
+      WHERE git_ssh."config_id" = git_sync."id" 
+        AND git_sync."is_enabled" = TRUE 
+        AND git_sync."git_type" = 'github_ssh';
+    `);
+
+    await queryRunner.query(`
+      UPDATE "organization_git_https" git_https
+      SET "is_enabled" = TRUE 
+      FROM "organization_git_sync" git_sync 
+      WHERE git_https."config_id" = git_sync."id" 
+        AND git_sync."is_enabled" = TRUE 
+        AND git_sync."git_type" = 'github_https';
+    `);
+    await queryRunner.query(`
+      UPDATE "organization_gitlab" gitlab
+      SET "is_enabled" = TRUE 
+      FROM "organization_git_sync" git_sync 
+      WHERE gitlab."config_id" = git_sync."id" 
+        AND git_sync."is_enabled" = TRUE 
+        AND git_sync."git_type" = 'gitlab';
+    `);
+    await queryRunner.dropColumn('organization_git_sync', 'is_enabled');
+    await queryRunner.dropColumn('organization_git_sync', 'git_type');
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/data-migrations/1750659565297-MigrateHiddenValueFromBooleanToJson.ts b/server/data-migrations/1750659565297-MigrateHiddenValueFromBooleanToJson.ts
new file mode 100644
index 0000000000..7904995071
--- /dev/null
+++ b/server/data-migrations/1750659565297-MigrateHiddenValueFromBooleanToJson.ts
@@ -0,0 +1,30 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class MigrateHiddenValueFromBooleanToJson1750659565297 implements MigrationInterface {
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+
+    await queryRunner.query(`ALTER TABLE pages RENAME COLUMN hidden TO hidden_old`);
+
+    await queryRunner.query(`ALTER TABLE pages ADD COLUMN hidden jsonb`);
+
+    const pages = await queryRunner.query(`SELECT id, hidden_old FROM pages`);
+    for (const page of pages) {
+      const newValue = {
+          value: `{{${page.hidden_old}}}`,
+          fxActive: false,
+      };
+
+      await queryRunner.query(
+        `UPDATE pages SET hidden = $1 WHERE id = $2`,
+        [JSON.stringify(newValue), page.id]
+      );
+    }
+
+    await queryRunner.query(`ALTER TABLE pages DROP COLUMN hidden_old`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+    }
+
+}
diff --git a/server/data-migrations/1750761058803-RenameTJDefaultThemeTOTooljet.ts b/server/data-migrations/1750761058803-RenameTJDefaultThemeTOTooljet.ts
new file mode 100644
index 0000000000..6c310786fe
--- /dev/null
+++ b/server/data-migrations/1750761058803-RenameTJDefaultThemeTOTooljet.ts
@@ -0,0 +1,21 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class RenameTJDefaultThemeTOTooljet1750761058803 implements MigrationInterface {
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(
+            `
+                UPDATE organization_themes SET name='Tooljet' WHERE name='TJ default';
+            `
+        );
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(
+            `
+                UPDATE organization_themes SET name='TJ default' WHERE name='Tooljet';
+            `
+        );
+    }
+
+}
diff --git a/server/ee b/server/ee
index e76477d30e..3bd72a7575 160000
--- a/server/ee
+++ b/server/ee
@@ -1 +1 @@
-Subproject commit e76477d30eb21df5d188ca204c520df75fddd529
+Subproject commit 3bd72a7575446d120a3b548e8819be271072407a
diff --git a/server/jest.config.ts b/server/jest.config.ts
index dd113e965c..bf78172022 100644
--- a/server/jest.config.ts
+++ b/server/jest.config.ts
@@ -22,8 +22,10 @@ const config: Config.InitialOptions = {
     '@entities/(.*)': '<rootDir>/src/entities/$1',
     '@controllers/(.*)': '<rootDir>/src/controllers/$1',
     '@modules/(.*)': '<rootDir>/src/modules/$1',
+    '@helpers/(.*)': '<rootDir>/src/helpers/$1',
     '@ee/(.*)': '<rootDir>/ee/$1',
     '@apps/(.*)': '<rootDir>/ee/apps/$1',
+    ormconfig: '<rootDir>/ormconfig.ts',
   },
   runner: 'groups',
   testTimeout: 30000,
diff --git a/server/migrations/1744630818000-AddEnabledFlagAppGit.ts b/server/migrations/1744630818000-AddEnabledFlagAppGit.ts
new file mode 100644
index 0000000000..8ea2e40220
--- /dev/null
+++ b/server/migrations/1744630818000-AddEnabledFlagAppGit.ts
@@ -0,0 +1,24 @@
+import { MigrationInterface, QueryRunner, TableColumn } from 'typeorm';
+
+export class AddEnabledFlagAppGit1744630818000 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.addColumn(
+      'app_git_sync',
+      new TableColumn({
+        name: 'allow_editing',
+        type: 'boolean',
+        isNullable: false,
+        default: false,
+      })
+    );
+    await queryRunner.query(`
+      UPDATE app_git_sync
+      SET allow_editing = true
+      WHERE app_id IN (
+        SELECT id FROM apps WHERE creation_mode = 'DEFAULT'
+      )
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/migrations/1746727457618-CreateUserPersonalAccessTokensTable.ts b/server/migrations/1746727457618-CreateUserPersonalAccessTokensTable.ts
new file mode 100644
index 0000000000..0218a1b902
--- /dev/null
+++ b/server/migrations/1746727457618-CreateUserPersonalAccessTokensTable.ts
@@ -0,0 +1,82 @@
+import { MigrationInterface, QueryRunner, TableForeignKey } from 'typeorm';
+import { Table } from 'typeorm/schema-builder/table/Table';
+
+export class CreateUserPersonalAccessTokensTable1746727457618 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.createTable(
+      new Table({
+        name: 'user_personal_access_tokens',
+        columns: [
+          {
+            name: 'id',
+            type: 'uuid',
+            isPrimary: true,
+            isGenerated: true,
+            generationStrategy: 'uuid',
+          },
+          {
+            name: 'user_id',
+            type: 'uuid',
+            isNullable: false,
+          },
+          {
+            name: 'app_id',
+            type: 'uuid',
+            isNullable: true,
+          },
+          {
+            name: 'token_hash',
+            type: 'varchar',
+            length: '256',
+            isNullable: false,
+          },
+          {
+            name: 'scope',
+            type: 'enum',
+            enum: ['app', 'workspace'],
+            isNullable: false,
+          },
+          {
+            name: 'session_expiry_minutes',
+            type: 'int',
+            isNullable: false,
+            default: 60,
+          },
+          {
+            name: 'created_at',
+            type: 'timestamp',
+            default: 'now()',
+          },
+          {
+            name: 'expires_at',
+            type: 'timestamp',
+            isNullable: false,
+          },
+        ],
+      }),
+      true
+    );
+
+    await queryRunner.createForeignKey(
+      'user_personal_access_tokens',
+      new TableForeignKey({
+        columnNames: ['user_id'],
+        referencedColumnNames: ['id'],
+        referencedTableName: 'users',
+        onDelete: 'CASCADE',
+      })
+    );
+
+    await queryRunner.createForeignKey(
+      'user_personal_access_tokens',
+      new TableForeignKey({
+        columnNames: ['app_id'],
+        referencedColumnNames: ['id'],
+        referencedTableName: 'apps',
+        onDelete: 'CASCADE',
+      })
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/migrations/1746728003499-AddSessionTypeAndPatIdToUserSessions.ts b/server/migrations/1746728003499-AddSessionTypeAndPatIdToUserSessions.ts
new file mode 100644
index 0000000000..e99d7459c5
--- /dev/null
+++ b/server/migrations/1746728003499-AddSessionTypeAndPatIdToUserSessions.ts
@@ -0,0 +1,38 @@
+import { MigrationInterface, QueryRunner, TableForeignKey, TableColumn } from 'typeorm';
+
+export class AddSessionTypeAndPatIdToUserSessions1746728003499 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.addColumn(
+      'user_sessions',
+      new TableColumn({
+        name: 'session_type',
+        type: 'enum',
+        enum: ['user', 'pat'],
+        default: `'user'`,
+        isNullable: false,
+      })
+    );
+
+    await queryRunner.addColumn(
+      'user_sessions',
+      new TableColumn({
+        name: 'pat_id',
+        type: 'uuid',
+        isNullable: true,
+      })
+    );
+
+    await queryRunner.createForeignKey(
+      'user_sessions',
+      new TableForeignKey({
+        columnNames: ['pat_id'],
+        referencedColumnNames: ['id'],
+        referencedTableName: 'user_personal_access_tokens',
+        onDelete: 'CASCADE',
+      })
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+  }
+}
diff --git a/server/migrations/1747923859030-AddEnabledColumnProviderTable.ts b/server/migrations/1747923859030-AddEnabledColumnProviderTable.ts
index f4d82d7011..d26ce3169a 100644
--- a/server/migrations/1747923859030-AddEnabledColumnProviderTable.ts
+++ b/server/migrations/1747923859030-AddEnabledColumnProviderTable.ts
@@ -13,38 +13,6 @@ export class AddEnabledColumnProviderTable1747923859030 implements MigrationInte
     await queryRunner.query(`
       ALTER TABLE "organization_gitlab" ADD COLUMN IF NOT EXISTS "is_enabled" boolean DEFAULT FALSE;
     `);
-
-    await queryRunner.query(`
-      UPDATE "organization_git_ssh" git_ssh
-      SET "is_enabled" = TRUE 
-      FROM "organization_git_sync" git_sync 
-      WHERE git_ssh."config_id" = git_sync."id" 
-        AND git_sync."is_enabled" = TRUE 
-        AND git_sync."git_type" = 'github_ssh';
-    `);
-
-    await queryRunner.query(`
-      UPDATE "organization_git_https" git_https
-      SET "is_enabled" = TRUE 
-      FROM "organization_git_sync" git_sync 
-      WHERE git_https."config_id" = git_sync."id" 
-        AND git_sync."is_enabled" = TRUE 
-        AND git_sync."git_type" = 'github_https';
-    `);
-
-    await queryRunner.commitTransaction();
-    await queryRunner.startTransaction();
-
-    await queryRunner.query(`
-      UPDATE "organization_gitlab" gitlab
-      SET "is_enabled" = TRUE 
-      FROM "organization_git_sync" git_sync 
-      WHERE gitlab."config_id" = git_sync."id" 
-        AND git_sync."is_enabled" = TRUE 
-        AND git_sync."git_type" = 'gitlab';
-    `);
-    await queryRunner.dropColumn('organization_git_sync', 'is_enabled');
-    await queryRunner.dropColumn('organization_git_sync', 'git_type');
   }
 
   public async down(queryRunner: QueryRunner): Promise<void> {}
diff --git a/server/migrations/1748509644056-CreateComponentPermissions.ts b/server/migrations/1748509644056-CreateComponentPermissions.ts
new file mode 100644
index 0000000000..baa66f01de
--- /dev/null
+++ b/server/migrations/1748509644056-CreateComponentPermissions.ts
@@ -0,0 +1,51 @@
+import { MigrationInterface, QueryRunner, Table, TableForeignKey } from 'typeorm';
+
+export class CreateComponentPermissions1748509644056 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.createTable(
+      new Table({
+        name: 'component_permissions',
+        columns: [
+          {
+            name: 'id',
+            type: 'uuid',
+            isGenerated: true,
+            default: 'gen_random_uuid()',
+            isPrimary: true,
+          },
+          {
+            name: 'component_id',
+            type: 'uuid',
+            isNullable: false,
+          },
+          {
+            name: 'type',
+            type: 'enum',
+            enum: ['SINGLE', 'GROUP'],
+          },
+          {
+            name: 'created_at',
+            type: 'timestamp',
+            isNullable: false,
+            default: 'now()',
+          },
+        ],
+      }),
+      true
+    );
+
+    await queryRunner.createForeignKey(
+      'component_permissions',
+      new TableForeignKey({
+        columnNames: ['component_id'],
+        referencedColumnNames: ['id'],
+        referencedTableName: 'components',
+        onDelete: 'CASCADE',
+      })
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.dropTable('component_permissions');
+  }
+}
diff --git a/server/migrations/1748509665915-CreateComponentUsers.ts b/server/migrations/1748509665915-CreateComponentUsers.ts
new file mode 100644
index 0000000000..dbc4e3ef45
--- /dev/null
+++ b/server/migrations/1748509665915-CreateComponentUsers.ts
@@ -0,0 +1,76 @@
+import { MigrationInterface, QueryRunner, Table, TableForeignKey } from 'typeorm';
+
+export class CreateComponentUsers1748509665915 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.createTable(
+      new Table({
+        name: 'component_users',
+        columns: [
+          {
+            name: 'id',
+            type: 'uuid',
+            isGenerated: true,
+            default: 'gen_random_uuid()',
+            isPrimary: true,
+          },
+          {
+            name: 'component_permissions_id',
+            type: 'uuid',
+            isNullable: false,
+          },
+          {
+            name: 'user_id',
+            type: 'uuid',
+            isNullable: true,
+          },
+          {
+            name: 'permission_groups_id',
+            type: 'uuid',
+            isNullable: true,
+          },
+          {
+            name: 'created_at',
+            type: 'timestamp',
+            isNullable: false,
+            default: 'now()',
+          },
+        ],
+      }),
+      true
+    );
+
+    await queryRunner.createForeignKey(
+      'component_users',
+      new TableForeignKey({
+        columnNames: ['component_permissions_id'],
+        referencedColumnNames: ['id'],
+        referencedTableName: 'component_permissions',
+        onDelete: 'CASCADE',
+      })
+    );
+
+    await queryRunner.createForeignKey(
+      'component_users',
+      new TableForeignKey({
+        columnNames: ['user_id'],
+        referencedColumnNames: ['id'],
+        referencedTableName: 'users',
+        onDelete: 'CASCADE',
+      })
+    );
+
+    await queryRunner.createForeignKey(
+      'component_users',
+      new TableForeignKey({
+        columnNames: ['permission_groups_id'],
+        referencedColumnNames: ['id'],
+        referencedTableName: 'permission_groups',
+        onDelete: 'CASCADE',
+      })
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.dropTable('component_users');
+  }
+}
diff --git a/server/migrations/1749766539146-ModifyPagesTableForDifferentNavs.ts b/server/migrations/1749766539146-ModifyPagesTableForDifferentNavs.ts
new file mode 100644
index 0000000000..263aac9830
--- /dev/null
+++ b/server/migrations/1749766539146-ModifyPagesTableForDifferentNavs.ts
@@ -0,0 +1,56 @@
+import { MigrationInterface, QueryRunner, TableColumn } from 'typeorm';
+
+export class ModifyPagesTableForDifferentNavs1749766539146 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.addColumn(
+      'pages',
+      new TableColumn({
+        name: 'url',
+        type: 'varchar',
+        isNullable: true,
+      })
+    );
+
+    if (queryRunner.connection.driver.options.type === 'postgres') {
+      await queryRunner.query(`
+            CREATE TYPE "page_open_in_enum" AS ENUM ('new_tab', 'same_tab')
+          `);
+    }
+    await queryRunner.addColumn(
+      'pages',
+      new TableColumn({
+        name: 'open_in',
+        type: queryRunner.connection.driver.options.type === 'postgres' ? 'page_open_in_enum' : 'varchar',
+        default: `'new_tab'`,
+        isNullable: false,
+      })
+    );
+
+    if (queryRunner.connection.driver.options.type === 'postgres') {
+      await queryRunner.query(`
+            CREATE TYPE "page_type_enum" AS ENUM ('default', 'group', 'url', 'app')
+          `);
+    }
+    await queryRunner.addColumn(
+      'pages',
+      new TableColumn({
+        name: 'type',
+        type: queryRunner.connection.driver.options.type === 'postgres' ? 'page_type_enum' : 'varchar',
+        default: `'default'`,
+        isNullable: false,
+      })
+    );
+
+    await queryRunner.addColumn(
+      'pages',
+      new TableColumn({
+        name: 'app_id',
+        type: 'varchar',
+        isNullable: false,
+        default: `''`,
+      })
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}
diff --git a/server/src/entities/app_git_sync.entity.ts b/server/src/entities/app_git_sync.entity.ts
index 3e7536fcd4..b5a4fcd931 100644
--- a/server/src/entities/app_git_sync.entity.ts
+++ b/server/src/entities/app_git_sync.entity.ts
@@ -61,6 +61,9 @@ export class AppGitSync extends BaseEntity {
   @JoinColumn({ name: 'app_id' })
   app: App;
 
+  @Column({ name: 'allow_editing', default: false, nullable: false })
+  allowEditing: boolean;
+
   @CreateDateColumn({ default: () => 'now()', name: 'created_at' })
   createdAt: Date;
 
diff --git a/server/src/entities/component.entity.ts b/server/src/entities/component.entity.ts
index bb22c7dcd4..6ef8d20b0c 100644
--- a/server/src/entities/component.entity.ts
+++ b/server/src/entities/component.entity.ts
@@ -11,6 +11,7 @@ import {
 } from 'typeorm';
 import { Page } from './page.entity';
 import { Layout } from './layout.entity';
+import { ComponentPermission } from './component_permissions.entity';
 
 @Entity({ name: 'components' })
 @Index('idx_component_page_id', ['pageId'])
@@ -60,4 +61,7 @@ export class Component {
 
   @OneToMany(() => Layout, (layout) => layout.component)
   layouts: Layout[];
+
+  @OneToMany(() => ComponentPermission, (permission) => permission.component)
+  permissions: ComponentPermission[];
 }
diff --git a/server/src/entities/component_permissions.entity.ts b/server/src/entities/component_permissions.entity.ts
new file mode 100644
index 0000000000..9ed804eb4e
--- /dev/null
+++ b/server/src/entities/component_permissions.entity.ts
@@ -0,0 +1,29 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn, CreateDateColumn, OneToMany } from 'typeorm';
+import { Component } from './component.entity';
+import { PAGE_PERMISSION_TYPE } from '@modules/app-permissions/constants';
+import { ComponentUser } from './component_users.entity';
+
+@Entity('component_permissions')
+export class ComponentPermission {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ name: 'component_id', type: 'uuid', nullable: false })
+  componentId: string;
+
+  @Column({
+    type: 'enum',
+    enum: PAGE_PERMISSION_TYPE,
+  })
+  type: PAGE_PERMISSION_TYPE;
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt: Date;
+
+  @ManyToOne(() => Component, (component) => component.permissions, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'component_id' })
+  component: Component;
+
+  @OneToMany(() => ComponentUser, (componentUser) => componentUser.componentPermission)
+  users: ComponentUser[];
+}
diff --git a/server/src/entities/component_users.entity.ts b/server/src/entities/component_users.entity.ts
new file mode 100644
index 0000000000..2728297e3b
--- /dev/null
+++ b/server/src/entities/component_users.entity.ts
@@ -0,0 +1,34 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn, CreateDateColumn } from 'typeorm';
+import { User } from './user.entity';
+import { ComponentPermission } from './component_permissions.entity';
+import { GroupPermissions } from './group_permissions.entity';
+
+@Entity('component_users')
+export class ComponentUser {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ name: 'component_permissions_id', type: 'uuid' })
+  componentPermissionsId: string;
+
+  @Column({ name: 'user_id', type: 'uuid', nullable: true })
+  userId: string | null;
+
+  @Column({ name: 'permission_groups_id', type: 'uuid', nullable: true })
+  permissionGroupsId: string | null;
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt: Date;
+
+  @ManyToOne(() => ComponentPermission, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'component_permissions_id' })
+  componentPermission: ComponentPermission;
+
+  @ManyToOne(() => User, { onDelete: 'CASCADE', nullable: true })
+  @JoinColumn({ name: 'user_id' })
+  user: User;
+
+  @ManyToOne(() => GroupPermissions, { onDelete: 'CASCADE', nullable: true })
+  @JoinColumn({ name: 'permission_groups_id' })
+  permissionGroup: GroupPermissions;
+}
diff --git a/server/src/entities/group_permissions.entity.ts b/server/src/entities/group_permissions.entity.ts
index 26667796ae..6fa49ddaa6 100644
--- a/server/src/entities/group_permissions.entity.ts
+++ b/server/src/entities/group_permissions.entity.ts
@@ -15,6 +15,7 @@ import { GranularPermissions } from './granular_permissions.entity';
 import { GROUP_PERMISSIONS_TYPE } from '@modules/group-permissions/constants';
 import { PageUser } from './page_users.entity';
 import { QueryUser } from './query_users.entity';
+import { ComponentUser } from './component_users.entity';
 
 @Entity({ name: 'permission_groups' })
 export class GroupPermissions extends BaseEntity {
@@ -76,5 +77,8 @@ export class GroupPermissions extends BaseEntity {
   @OneToMany(() => QueryUser, (queryUser) => queryUser.permissionGroup)
   queryUsers: QueryUser[];
 
+  @OneToMany(() => ComponentUser, (componentUser) => componentUser.permissionGroup)
+  componentUsers: ComponentUser[];
+
   disabled?: boolean;
 }
diff --git a/server/src/entities/page.entity.ts b/server/src/entities/page.entity.ts
index 4b3dc5466e..b797493ffb 100644
--- a/server/src/entities/page.entity.ts
+++ b/server/src/entities/page.entity.ts
@@ -12,6 +12,18 @@ import { AppVersion } from './app_version.entity';
 import { Component } from './component.entity';
 import { PagePermission } from './page_permissions.entity';
 
+export enum PageOpenIn {
+  NEW_TAB = 'new_tab',
+  SAME_TAB = 'same_tab',
+}
+
+export enum PageType {
+  DEFAULT = 'default',
+  GROUP = 'group',
+  URL = 'url',
+  APP = 'app',
+}
+
 @Entity({ name: 'pages' })
 export class Page {
   @PrimaryGeneratedColumn('uuid')
@@ -29,7 +41,7 @@ export class Page {
   @Column()
   disabled: boolean;
 
-  @Column('simple-json', { name: 'hidden' })
+  @Column('jsonb', { name: 'hidden' })
   hidden;
 
   @Column()
@@ -56,6 +68,28 @@ export class Page {
   @Column({ name: 'is_page_group', default: false })
   isPageGroup: boolean;
 
+  @Column({ name: 'url', type: 'varchar', nullable: true })
+  url: string | null;
+
+  @Column({
+    type: 'enum',
+    enum: PageOpenIn,
+    name: 'open_in',
+    default: PageOpenIn.SAME_TAB,
+  })
+  openIn: PageOpenIn;
+
+  @Column({
+    type: 'enum',
+    enum: PageType,
+    name: 'type',
+    default: PageType.DEFAULT,
+  })
+  type: PageType;
+
+  @Column({ name: 'app_id', type: 'varchar', nullable: true }) // Assuming appId is a varchar/string
+  appId: string | null;
+
   @ManyToOne(() => AppVersion, (appVersion) => appVersion.pages)
   @JoinColumn({ name: 'app_version_id' })
   appVersion: AppVersion;
diff --git a/server/src/entities/user.entity.ts b/server/src/entities/user.entity.ts
index 515b1f469e..f43396f0ed 100644
--- a/server/src/entities/user.entity.ts
+++ b/server/src/entities/user.entity.ts
@@ -31,6 +31,7 @@ import { AiResponseVote } from './ai_response_vote.entity';
 import { USER_ROLE } from '@modules/group-permissions/constants';
 import { PageUser } from './page_users.entity';
 import { QueryUser } from './query_users.entity';
+import { ComponentUser } from './component_users.entity';
 
 @Entity({ name: 'users' })
 export class User extends BaseEntity {
@@ -192,6 +193,9 @@ export class User extends BaseEntity {
   @OneToMany(() => QueryUser, (queryUser) => queryUser.user)
   queryUsers: QueryUser[];
 
+  @OneToMany(() => ComponentUser, (componentUser) => componentUser.user)
+  componentUsers: ComponentUser[];
+
   organizationId: string;
   invitedOrganizationId: string;
   organizationIds?: Array<string>;
diff --git a/server/src/entities/user_personal_access_tokens.entity.ts b/server/src/entities/user_personal_access_tokens.entity.ts
new file mode 100644
index 0000000000..787fdd102b
--- /dev/null
+++ b/server/src/entities/user_personal_access_tokens.entity.ts
@@ -0,0 +1,45 @@
+import {
+  Entity,
+  Column,
+  PrimaryGeneratedColumn,
+  CreateDateColumn,
+  ManyToOne,
+  BaseEntity,
+  JoinColumn,
+} from 'typeorm';
+import { User } from '@entities/user.entity';
+import { App } from '@entities/app.entity';
+import { PersonalAccessTokenScope } from '@modules/external-apis/constants';
+
+@Entity({ name: 'user_personal_access_tokens' })
+export class UserPersonalAccessToken extends BaseEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @ManyToOne(() => User, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'user_id' })
+  user: User;
+
+  @ManyToOne(() => App, { nullable: false, onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'app_id' })
+  app: App;
+
+  @Column({ name: 'token_hash', type: 'varchar', length: 256 })
+  tokenHash: string;
+
+  @Column({
+    name: 'scope',
+    type: 'enum',
+    enum: PersonalAccessTokenScope,
+  })
+  scope: PersonalAccessTokenScope;
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt: Date;
+
+  @Column({ name: 'expires_at', type: 'timestamp' })
+  expiresAt: Date;
+
+  @Column({ name: 'session_expiry_minutes', type: 'int', nullable: false, default: 60 })
+  sessionExpiryMinutes: number;
+}
diff --git a/server/src/entities/user_sessions.entity.ts b/server/src/entities/user_sessions.entity.ts
index 9fcc602239..427b43eb42 100644
--- a/server/src/entities/user_sessions.entity.ts
+++ b/server/src/entities/user_sessions.entity.ts
@@ -1,5 +1,7 @@
 import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, JoinColumn, BaseEntity, ManyToOne } from 'typeorm';
 import { User } from './user.entity';
+import { UserPersonalAccessToken } from './user_personal_access_tokens.entity';
+import { SessionType } from '@modules/external-apis/constants';
 
 @Entity({ name: 'user_sessions' })
 export class UserSessions extends BaseEntity {
@@ -24,4 +26,11 @@ export class UserSessions extends BaseEntity {
 
   @Column({ name: 'last_logged_in' })
   lastLoggedIn: Date;
+
+  @Column({ name: 'session_type', type: 'enum', enum: SessionType, default: 'user' })
+  sessionType: SessionType.USER | SessionType.PAT;
+
+  @ManyToOne(() => UserPersonalAccessToken, { nullable: true, onDelete: 'SET NULL' })
+  @JoinColumn({ name: 'pat_id' })
+  pat: UserPersonalAccessToken | null;
 }
diff --git a/server/src/modules/app-git/ability/index.ts b/server/src/modules/app-git/ability/index.ts
index 539e252911..8996f754b7 100644
--- a/server/src/modules/app-git/ability/index.ts
+++ b/server/src/modules/app-git/ability/index.ts
@@ -27,7 +27,6 @@ export class AppGitAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
     const isAllAppsEditable = !!userAppGitPermissions?.isAllEditable;
     const isAllAppsCreatable = !!userPermission?.appCreate;
     const isAllAppsViewable = !!userAppGitPermissions?.isAllViewable;
-
     // Grant feature-level access based on resource actions
     if (isAdmin || superAdmin || isBuilder) {
       // Admin or Super Admin gets full access to all features
@@ -38,6 +37,8 @@ export class AppGitAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
       can(FEATURE_KEY.GIT_GET_APP_CONFIG, App);
       can(FEATURE_KEY.GIT_SYNC_APP, App);
       can(FEATURE_KEY.GIT_APP_VERSION_RENAME, App);
+      can(FEATURE_KEY.GIT_APP_CONFIGS_UPDATE, App);
+      can(FEATURE_KEY.GIT_FETCH_APP_CONFIGS, App);
       return;
     }
 
diff --git a/server/src/modules/app-git/constants/feature.ts b/server/src/modules/app-git/constants/feature.ts
index b875af3bcd..5c5cada809 100644
--- a/server/src/modules/app-git/constants/feature.ts
+++ b/server/src/modules/app-git/constants/feature.ts
@@ -12,5 +12,7 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.GIT_SYNC_APP]: { license: LICENSE_FIELD.VALID },
     [FEATURE_KEY.GIT_UPDATE_APP]: { license: LICENSE_FIELD.VALID },
     [FEATURE_KEY.GIT_APP_VERSION_RENAME]: { license: LICENSE_FIELD.VALID },
+    [FEATURE_KEY.GIT_APP_CONFIGS_UPDATE]: { license: LICENSE_FIELD.VALID },
+    [FEATURE_KEY.GIT_FETCH_APP_CONFIGS]: { isPublic: true },
   },
 };
diff --git a/server/src/modules/app-git/constants/index.ts b/server/src/modules/app-git/constants/index.ts
index 7955e51730..51cebdc13f 100644
--- a/server/src/modules/app-git/constants/index.ts
+++ b/server/src/modules/app-git/constants/index.ts
@@ -6,4 +6,6 @@ export enum FEATURE_KEY {
   GIT_GET_APP_CONFIG = 'git_get_app_config', // Corresponds to getAppConfig (GET ':workspaceId/app/:versionId')
   GIT_SYNC_APP = 'git_sync_app', // Corresponds to gitSyncApp (POST 'gitpush/:appGitId/:versionId')
   GIT_APP_VERSION_RENAME = 'git_app_version_rename', // Corresponds to gitSyncApp (POST 'gitpush/:appGitId/:versionId')
+  GIT_APP_CONFIGS_UPDATE = 'git_app_configs_update',
+  GIT_FETCH_APP_CONFIGS = 'get_app_git_configs',
 }
diff --git a/server/src/modules/app-git/controller.ts b/server/src/modules/app-git/controller.ts
index f7a7d12b03..df68e38551 100644
--- a/server/src/modules/app-git/controller.ts
+++ b/server/src/modules/app-git/controller.ts
@@ -1,7 +1,13 @@
 import { Controller, Get, UseGuards, Post, Param, Body, NotFoundException, Put } from '@nestjs/common';
 import { JwtAuthGuard } from '../session/guards/jwt-auth.guard';
 import { User, UserEntity } from '@modules/app/decorators/user.decorator';
-import { AppGitPullDto, AppGitPullUpdateDto, AppGitPushDto, RenameAppOrVersionDto } from '@modules/app-git/dto';
+import {
+  AppGitPullDto,
+  AppGitPullUpdateDto,
+  AppGitPushDto,
+  AppGitUpdateDto,
+  RenameAppOrVersionDto,
+} from '@modules/app-git/dto';
 import { MODULES } from '@modules/app/constants/modules';
 import { InitModule } from '@modules/app/decorators/init-module';
 import { LICENSE_FIELD } from '@modules/licensing/constants';
@@ -80,4 +86,25 @@ export class AppGitController {
   ) {
     throw new NotFoundException();
   }
+
+  @RequireFeature(LICENSE_FIELD.GIT_SYNC)
+  @InitFeature(FEATURE_KEY.GIT_APP_CONFIGS_UPDATE)
+  @Put(':appId/configs')
+  async updateAppGitConfigs(
+    @User() user: UserEntity,
+    @Param('appId') appId: string,
+    @Body() updateAppGitDto: AppGitUpdateDto
+  ) {
+    throw new NotFoundException();
+  }
+
+  @RequireFeature(LICENSE_FIELD.GIT_SYNC)
+  @Get(':workspaceId/app/:versionId/configs')
+  async getAppGitConfigs(
+    @User() user,
+    @Param('workspaceId') organizationId: string,
+    @Param('versionId') versionId: string
+  ) {
+    throw new NotFoundException();
+  }
 }
diff --git a/server/src/modules/app-git/dto/index.ts b/server/src/modules/app-git/dto/index.ts
index a3e39c490c..55cdd31a49 100644
--- a/server/src/modules/app-git/dto/index.ts
+++ b/server/src/modules/app-git/dto/index.ts
@@ -16,6 +16,10 @@ export class AppGitCreateDto {
   @IsString()
   @IsNotEmpty()
   gitAppName: string;
+
+  @IsBoolean()
+  @IsOptional()
+  allowEditing: boolean;
 }
 
 export class AppGitPushDto {
@@ -56,6 +60,13 @@ export class AppGitPullDto {
 
   @IsString()
   gitVersionName: string;
+
+  @IsString()
+  appName: string;
+
+  @IsBoolean()
+  @IsOptional()
+  allowEditing: boolean;
 }
 
 export class AppGitPullUpdateDto {
diff --git a/server/src/modules/app-git/service.ts b/server/src/modules/app-git/service.ts
index 6ec1672bee..76209e6131 100644
--- a/server/src/modules/app-git/service.ts
+++ b/server/src/modules/app-git/service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import { AppGitPullDto, AppGitPullUpdateDto, AppGitPushDto } from '@modules/app-git/dto';
+import { AppGitPullDto, AppGitPullUpdateDto, AppGitPushDto, AppGitUpdateDto } from '@modules/app-git/dto';
 import { User } from 'src/entities/user.entity';
 
 @Injectable()
@@ -23,4 +23,7 @@ export class AppGitService {
   async pullGitAppChanges(user: User, appMetaBody: AppGitPullUpdateDto, appId: string): Promise<any> {
     throw new Error('Method not implemented.');
   }
+  async updateAppGitConfiguration(user: User, appId: string, updateAppGitDto: AppGitUpdateDto): Promise<any> {
+    throw new Error('Method not implemented.');
+  }
 }
diff --git a/server/src/modules/app-git/types/index.ts b/server/src/modules/app-git/types/index.ts
index fe4bccf048..c4a718c480 100644
--- a/server/src/modules/app-git/types/index.ts
+++ b/server/src/modules/app-git/types/index.ts
@@ -10,6 +10,8 @@ interface Features {
   [FEATURE_KEY.GIT_SYNC_APP]: FeatureConfig;
   [FEATURE_KEY.GIT_UPDATE_APP]: FeatureConfig;
   [FEATURE_KEY.GIT_APP_VERSION_RENAME]: FeatureConfig;
+  [FEATURE_KEY.GIT_APP_CONFIGS_UPDATE]: FeatureConfig;
+  [FEATURE_KEY.GIT_FETCH_APP_CONFIGS]: FeatureConfig;
 }
 
 export interface FeaturesConfig {
diff --git a/server/src/modules/app-permissions/ability/index.ts b/server/src/modules/app-permissions/ability/index.ts
index 5a03f417d5..81b25601b1 100644
--- a/server/src/modules/app-permissions/ability/index.ts
+++ b/server/src/modules/app-permissions/ability/index.ts
@@ -42,6 +42,10 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
           FEATURE_KEY.CREATE_QUERY_PERMISSIONS,
           FEATURE_KEY.UPDATE_QUERY_PERMISSIONS,
           FEATURE_KEY.DELETE_QUERY_PERMISSIONS,
+          FEATURE_KEY.FETCH_COMPONENT_PERMISSIONS,
+          FEATURE_KEY.CREATE_COMPONENT_PERMISSIONS,
+          FEATURE_KEY.UPDATE_COMPONENT_PERMISSIONS,
+          FEATURE_KEY.DELETE_COMPONENT_PERMISSIONS,
         ],
         App
       );
@@ -64,6 +68,10 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
           FEATURE_KEY.CREATE_QUERY_PERMISSIONS,
           FEATURE_KEY.UPDATE_QUERY_PERMISSIONS,
           FEATURE_KEY.DELETE_QUERY_PERMISSIONS,
+          FEATURE_KEY.FETCH_COMPONENT_PERMISSIONS,
+          FEATURE_KEY.CREATE_COMPONENT_PERMISSIONS,
+          FEATURE_KEY.UPDATE_COMPONENT_PERMISSIONS,
+          FEATURE_KEY.DELETE_COMPONENT_PERMISSIONS,
         ],
         App
       );
@@ -80,6 +88,7 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
           FEATURE_KEY.FETCH_USER_GROUPS,
           FEATURE_KEY.FETCH_PAGE_PERMISSIONS,
           FEATURE_KEY.FETCH_QUERY_PERMISSIONS,
+          FEATURE_KEY.FETCH_COMPONENT_PERMISSIONS,
         ],
         App
       );
diff --git a/server/src/modules/app-permissions/constants/features.ts b/server/src/modules/app-permissions/constants/features.ts
index 360b1cf4c9..cd992b88aa 100644
--- a/server/src/modules/app-permissions/constants/features.ts
+++ b/server/src/modules/app-permissions/constants/features.ts
@@ -14,5 +14,9 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.CREATE_QUERY_PERMISSIONS]: {},
     [FEATURE_KEY.UPDATE_QUERY_PERMISSIONS]: {},
     [FEATURE_KEY.DELETE_QUERY_PERMISSIONS]: {},
+    [FEATURE_KEY.FETCH_COMPONENT_PERMISSIONS]: {},
+    [FEATURE_KEY.CREATE_COMPONENT_PERMISSIONS]: {},
+    [FEATURE_KEY.UPDATE_COMPONENT_PERMISSIONS]: {},
+    [FEATURE_KEY.DELETE_COMPONENT_PERMISSIONS]: {},
   },
 };
diff --git a/server/src/modules/app-permissions/constants/index.ts b/server/src/modules/app-permissions/constants/index.ts
index ff5063e948..14e7122e2f 100644
--- a/server/src/modules/app-permissions/constants/index.ts
+++ b/server/src/modules/app-permissions/constants/index.ts
@@ -21,4 +21,8 @@ export enum FEATURE_KEY {
   CREATE_QUERY_PERMISSIONS = 'create_query_permissions',
   UPDATE_QUERY_PERMISSIONS = 'update_query_permissions',
   DELETE_QUERY_PERMISSIONS = 'delete_query_permissions',
+  FETCH_COMPONENT_PERMISSIONS = 'fetch_component_permissions',
+  CREATE_COMPONENT_PERMISSIONS = 'create_component_permissions',
+  UPDATE_COMPONENT_PERMISSIONS = 'update_component_permissions',
+  DELETE_COMPONENT_PERMISSIONS = 'delete_component_permissions',
 }
diff --git a/server/src/modules/app-permissions/controller.ts b/server/src/modules/app-permissions/controller.ts
index d317e3115b..65bdaf017d 100644
--- a/server/src/modules/app-permissions/controller.ts
+++ b/server/src/modules/app-permissions/controller.ts
@@ -127,4 +127,50 @@ export class AppPermissionsController implements IAppPermissionsController {
   ): Promise<any> {
     throw new NotFoundException();
   }
+
+  @InitFeature(FEATURE_KEY.FETCH_COMPONENT_PERMISSIONS)
+  @Get(':appId/components/:componentId')
+  async fetchComponentPermissions(
+    @User() user,
+    @Param('appId') appId: string,
+    @Param('componentId') componentId: string,
+    @Res({ passthrough: true }) response: Response
+  ): Promise<any> {
+    throw new NotFoundException();
+  }
+
+  @InitFeature(FEATURE_KEY.CREATE_COMPONENT_PERMISSIONS)
+  @Post(':appId/components/:componentId')
+  async createComponentPermissions(
+    @User() user,
+    @Param('appId') appId: string,
+    @Param('componentId') componentId: string,
+    @Body() body: CreatePermissionDto,
+    @Res({ passthrough: true }) response: Response
+  ): Promise<any> {
+    throw new NotFoundException();
+  }
+
+  @InitFeature(FEATURE_KEY.UPDATE_COMPONENT_PERMISSIONS)
+  @Put(':appId/components/:componentId')
+  async updateComponentPermissions(
+    @User() user,
+    @Param('appId') appId: string,
+    @Param('componentId') componentId: string,
+    @Body() body: CreatePermissionDto,
+    @Res({ passthrough: true }) response: Response
+  ): Promise<any> {
+    throw new NotFoundException();
+  }
+
+  @InitFeature(FEATURE_KEY.DELETE_COMPONENT_PERMISSIONS)
+  @Delete(':appId/components/:componentId')
+  async deleteComponentPermissions(
+    @User() user,
+    @Param('appId') appId: string,
+    @Param('componentId') componentId: string,
+    @Res({ passthrough: true }) response: Response
+  ): Promise<any> {
+    throw new NotFoundException();
+  }
 }
diff --git a/server/src/modules/app-permissions/interfaces/IController.ts b/server/src/modules/app-permissions/interfaces/IController.ts
index a7808d280d..e9b9cdc24e 100644
--- a/server/src/modules/app-permissions/interfaces/IController.ts
+++ b/server/src/modules/app-permissions/interfaces/IController.ts
@@ -46,4 +46,24 @@ export interface IAppPermissionsController {
   ): Promise<any>;
 
   deleteQueryPermissions(user: User, appId: string, queryId: string, response: Response): Promise<any>;
+
+  fetchComponentPermissions(user: User, appId: string, componentId: string, response: Response): Promise<any>;
+
+  createComponentPermissions(
+    user: User,
+    appId: string,
+    componentId: string,
+    body: CreatePermissionDto,
+    response: Response
+  ): Promise<any>;
+
+  updateComponentPermissions(
+    user: User,
+    appId: string,
+    componentId: string,
+    body: CreatePermissionDto,
+    response: Response
+  ): Promise<any>;
+
+  deleteComponentPermissions(user: User, appId: string, componentId: string, response: Response): Promise<any>;
 }
diff --git a/server/src/modules/app-permissions/interfaces/IUtilService.ts b/server/src/modules/app-permissions/interfaces/IUtilService.ts
index dbd390982a..a38d845076 100644
--- a/server/src/modules/app-permissions/interfaces/IUtilService.ts
+++ b/server/src/modules/app-permissions/interfaces/IUtilService.ts
@@ -14,4 +14,8 @@ export interface IUtilService {
   createQueryPermission(queryId: string, body: CreatePermissionDto): Promise<any>;
 
   updateQueryPermission(queryId: string, body: CreatePermissionDto): Promise<any>;
+
+  createComponentPermission(componentId: string, body: CreatePermissionDto): Promise<any>;
+
+  updateComponentPermission(componentId: string, body: CreatePermissionDto): Promise<any>;
 }
diff --git a/server/src/modules/app-permissions/module.ts b/server/src/modules/app-permissions/module.ts
index 5e3e3db107..b290bd5dbc 100644
--- a/server/src/modules/app-permissions/module.ts
+++ b/server/src/modules/app-permissions/module.ts
@@ -9,10 +9,14 @@ import { PageUsersRepository } from './repositories/page-users.repository';
 import { PagePermissionsRepository } from './repositories/page-permissions.repository';
 import { QueryUsersRepository } from './repositories/query-users.repository';
 import { QueryPermissionsRepository } from './repositories/query-permissions.repository';
+import { ComponentUsersRepository } from './repositories/component-users.repository';
+import { ComponentPermissionsRepository } from './repositories/component-permissions.repository';
 import { PageUser } from '@entities/page_users.entity';
 import { PagePermission } from '@entities/page_permissions.entity';
 import { QueryUser } from '@entities/query_users.entity';
 import { QueryPermission } from '@entities/query_permissions.entity';
+import { ComponentUser } from '@entities/component_users.entity';
+import { ComponentPermission } from '@entities/component_permissions.entity';
 
 export class AppPermissionsModule {
   static async register(configs: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -24,7 +28,16 @@ export class AppPermissionsModule {
     return {
       module: AppPermissionsModule,
       imports: [
-        TypeOrmModule.forFeature([GroupPermissions, User, PageUser, PagePermission, QueryUser, QueryPermission]),
+        TypeOrmModule.forFeature([
+          GroupPermissions,
+          User,
+          PageUser,
+          PagePermission,
+          QueryUser,
+          QueryPermission,
+          ComponentUser,
+          ComponentPermission,
+        ]),
       ],
       controllers: [AppPermissionsController],
       providers: [
@@ -35,6 +48,8 @@ export class AppPermissionsModule {
         PagePermissionsRepository,
         QueryUsersRepository,
         QueryPermissionsRepository,
+        ComponentUsersRepository,
+        ComponentPermissionsRepository,
         FeatureAbilityFactory,
       ],
       exports: [AppPermissionsUtilService, AppPermissionsService],
diff --git a/server/src/modules/app-permissions/repositories/component-permissions.repository.ts b/server/src/modules/app-permissions/repositories/component-permissions.repository.ts
new file mode 100644
index 0000000000..802dd12868
--- /dev/null
+++ b/server/src/modules/app-permissions/repositories/component-permissions.repository.ts
@@ -0,0 +1,58 @@
+import { ComponentPermission } from '@entities/component_permissions.entity';
+import { Injectable } from '@nestjs/common';
+import { DataSource, EntityManager, Repository } from 'typeorm';
+import { ComponentUsersRepository } from './component-users.repository';
+import { dbTransactionWrap } from '@helpers/database.helper';
+import { PAGE_PERMISSION_TYPE } from '../constants';
+
+@Injectable()
+export class ComponentPermissionsRepository extends Repository<ComponentPermission> {
+  constructor(private dataSource: DataSource, private readonly componentUsersRepository: ComponentUsersRepository) {
+    super(ComponentPermission, dataSource.createEntityManager());
+  }
+
+  async getComponentPermissions(componentId: string, manager?: EntityManager): Promise<ComponentPermission[]> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const componentPermissions = await manager.find(ComponentPermission, {
+        where: { componentId },
+        relations: ['users', 'users.user', 'users.permissionGroup'],
+      });
+
+      return componentPermissions.map((permission) => {
+        if (permission.type === PAGE_PERMISSION_TYPE.GROUP) {
+          return {
+            ...permission,
+            groups: permission.users,
+            users: undefined,
+          };
+        }
+        return permission;
+      });
+    }, manager || this.manager);
+  }
+
+  async createComponentPermissions(
+    componentId: string,
+    type: PAGE_PERMISSION_TYPE,
+    manager?: EntityManager
+  ): Promise<ComponentPermission> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const existingPermission = await manager.findOne(ComponentPermission, { where: { componentId } });
+      if (existingPermission) {
+        throw new Error(`Component permission already exists for Component id: ${componentId}`);
+      }
+
+      const componentPermission = manager.create(ComponentPermission, {
+        componentId,
+        type,
+      });
+      return manager.save(componentPermission);
+    }, manager || this.manager);
+  }
+
+  async deleteComponentPermissions(componentId: string, manager?: EntityManager): Promise<void> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      await manager.delete(ComponentPermission, { componentId });
+    }, manager || this.manager);
+  }
+}
diff --git a/server/src/modules/app-permissions/repositories/component-users.repository.ts b/server/src/modules/app-permissions/repositories/component-users.repository.ts
new file mode 100644
index 0000000000..98478b4334
--- /dev/null
+++ b/server/src/modules/app-permissions/repositories/component-users.repository.ts
@@ -0,0 +1,83 @@
+import { ComponentUser } from '@entities/component_users.entity';
+import { Injectable } from '@nestjs/common';
+import { DataSource, EntityManager, Repository } from 'typeorm';
+import { dbTransactionWrap } from '@helpers/database.helper';
+import { ComponentPermission } from '@entities/component_permissions.entity';
+
+@Injectable()
+export class ComponentUsersRepository extends Repository<ComponentUser> {
+  constructor(private dataSource: DataSource) {
+    super(ComponentUser, dataSource.createEntityManager());
+  }
+
+  async createComponentUsersWithSingle(
+    componentPermissionsId: string,
+    users: string[],
+    manager?: EntityManager
+  ): Promise<ComponentUser[]> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const componentUsers = users.map((userId) => {
+        return manager.create(ComponentUser, {
+          componentPermissionsId,
+          userId,
+          permissionGroupsId: null,
+        });
+      });
+      return manager.save(componentUsers);
+    }, manager || this.manager);
+  }
+
+  async createComponentUsersWithGroup(
+    componentPermissionsId: string,
+    groups: string[],
+    manager?: EntityManager
+  ): Promise<ComponentUser[]> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const componentUsers = groups.map((permissionGroupsId) => {
+        return manager.create(ComponentUser, {
+          componentPermissionsId,
+          permissionGroupsId,
+          userId: null,
+        });
+      });
+      return manager.save(componentUsers);
+    }, manager || this.manager);
+  }
+
+  async checkComponentUserWithGroup(
+    componentPermission: ComponentPermission,
+    userId: string,
+    manager?: EntityManager
+  ): Promise<boolean> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const result = await manager
+        .createQueryBuilder(ComponentUser, 'component_users')
+        .innerJoin('component_users.permissionGroup', 'group')
+        .innerJoin('group.groupUsers', 'groupUser')
+        .where('component_users.componentPermission = :permissionId', {
+          permissionId: componentPermission.id,
+        })
+        .andWhere('groupUser.userId = :userId', { userId })
+        .getOne();
+
+      return !!result;
+    }, manager || this.manager);
+  }
+
+  async checkComponentUserWithSingle(
+    componentPermission: ComponentPermission,
+    userId: string,
+    manager?: EntityManager
+  ): Promise<boolean> {
+    return dbTransactionWrap(async (manager: EntityManager) => {
+      const componentUser = await manager.findOne(ComponentUser, {
+        where: {
+          componentPermission: { id: componentPermission.id },
+          userId,
+        },
+      });
+
+      return !!componentUser;
+    }, manager || this.manager);
+  }
+}
diff --git a/server/src/modules/app-permissions/types/index.ts b/server/src/modules/app-permissions/types/index.ts
index d377f5a08f..5e3acf64b4 100644
--- a/server/src/modules/app-permissions/types/index.ts
+++ b/server/src/modules/app-permissions/types/index.ts
@@ -13,6 +13,10 @@ interface Features {
   [FEATURE_KEY.CREATE_QUERY_PERMISSIONS]: FeatureConfig;
   [FEATURE_KEY.UPDATE_QUERY_PERMISSIONS]: FeatureConfig;
   [FEATURE_KEY.DELETE_QUERY_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.FETCH_COMPONENT_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.CREATE_COMPONENT_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.UPDATE_COMPONENT_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.DELETE_COMPONENT_PERMISSIONS]: FeatureConfig;
 }
 
 export interface FeaturesConfig {
diff --git a/server/src/modules/app-permissions/util.service.ts b/server/src/modules/app-permissions/util.service.ts
index 7ff894a058..55d927eebb 100644
--- a/server/src/modules/app-permissions/util.service.ts
+++ b/server/src/modules/app-permissions/util.service.ts
@@ -31,4 +31,12 @@ export class AppPermissionsUtilService implements IUtilService {
   async updateQueryPermission(queryId: string, body: CreatePermissionDto): Promise<any> {
     throw new Error('Method not implemented.');
   }
+
+  async createComponentPermission(componentId: string, body: CreatePermissionDto): Promise<any> {
+    throw new Error('Method not implemented.');
+  }
+
+  async updateComponentPermission(componentId: string, body: CreatePermissionDto): Promise<any> {
+    throw new Error('Method not implemented.');
+  }
 }
diff --git a/server/src/modules/apps/ability/app.ability.ts b/server/src/modules/apps/ability/app.ability.ts
index eb51ebc716..c45256ea23 100644
--- a/server/src/modules/apps/ability/app.ability.ts
+++ b/server/src/modules/apps/ability/app.ability.ts
@@ -34,6 +34,7 @@ export function defineAppAbility(
         FEATURE_KEY.VALIDATE_PRIVATE_APP_ACCESS,
         FEATURE_KEY.UPDATE_ICON,
         FEATURE_KEY.VALIDATE_RELEASED_APP_ACCESS,
+        FEATURE_KEY.APP_PUBLIC_UPDATE,
       ],
       App
     );
@@ -58,6 +59,7 @@ export function defineAppAbility(
         FEATURE_KEY.VALIDATE_PRIVATE_APP_ACCESS,
         FEATURE_KEY.UPDATE_ICON,
         FEATURE_KEY.VALIDATE_RELEASED_APP_ACCESS,
+        FEATURE_KEY.APP_PUBLIC_UPDATE,
       ],
       App
     );
diff --git a/server/src/modules/apps/constants/features.ts b/server/src/modules/apps/constants/features.ts
index f97efa92ec..2b722fe23f 100644
--- a/server/src/modules/apps/constants/features.ts
+++ b/server/src/modules/apps/constants/features.ts
@@ -6,6 +6,9 @@ export const FEATURES: FeaturesConfig = {
   [MODULES.APP]: {
     [FEATURE_KEY.CREATE]: {},
     [FEATURE_KEY.UPDATE]: {},
+    [FEATURE_KEY.APP_PUBLIC_UPDATE]: {
+      auditLogsKey: 'APP_PUBLIC_UPDATE',
+    },
     [FEATURE_KEY.UPDATE_ICON]: {
       auditLogsKey: FEATURE_KEY.UPDATE,
     },
@@ -17,7 +20,7 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.GET_ONE]: {},
     [FEATURE_KEY.GET_BY_SLUG]: {},
     [FEATURE_KEY.RELEASE]: {
-      auditLogsKey: FEATURE_KEY.UPDATE,
+      auditLogsKey: 'APP_RELEASE',
     },
   },
 };
diff --git a/server/src/modules/apps/constants/index.ts b/server/src/modules/apps/constants/index.ts
index 81b7b8cae4..33c6bb3651 100644
--- a/server/src/modules/apps/constants/index.ts
+++ b/server/src/modules/apps/constants/index.ts
@@ -10,6 +10,7 @@ export enum FEATURE_KEY {
   GET_ONE = 'get_one',
   GET_BY_SLUG = 'APP_VIEW',
   RELEASE = 'release',
+  APP_PUBLIC_UPDATE = 'app_public_update',
 }
 
 export enum APP_TYPES {
diff --git a/server/src/modules/apps/controller.ts b/server/src/modules/apps/controller.ts
index db27eaa3fa..cfa9ffc4c7 100644
--- a/server/src/modules/apps/controller.ts
+++ b/server/src/modules/apps/controller.ts
@@ -58,6 +58,13 @@ export class AppsController implements IAppsController {
     return this.appsService.update(app, appUpdateDto, user);
   }
 
+  @InitFeature(FEATURE_KEY.APP_PUBLIC_UPDATE)
+  @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
+  @Put(':id/public')
+  updatePublic(@User() user, @App() app: AppEntity, @Body('app') appUpdateDto: AppUpdateDto) {
+    return this.appsService.update(app, appUpdateDto, user);
+  }
+
   @InitFeature(FEATURE_KEY.DELETE)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
   @Delete(':id')
diff --git a/server/src/modules/apps/dto/component.ts b/server/src/modules/apps/dto/component.ts
index 027877590d..b9c0bc0f97 100644
--- a/server/src/modules/apps/dto/component.ts
+++ b/server/src/modules/apps/dto/component.ts
@@ -12,6 +12,7 @@ import {
   ValidatorConstraint,
   ValidatorConstraintInterface,
   Validate,
+  ValidateNested,
 } from 'class-validator';
 
 export class ComponentLayoutDto {
@@ -157,3 +158,40 @@ export class DeleteComponentDto {
   @IsOptional()
   is_component_cut: boolean;
 }
+
+export class BatchDiffDto {
+  @IsObject()
+  @IsOptional()
+  create?: {
+    diff: Record<string, any>;
+    pageId: string;
+  };
+
+  @IsObject()
+  @IsOptional()
+  update?: {
+    diff: Record<string, any>;
+  };
+
+  @IsObject()
+  @IsOptional()
+  delete?: {
+    diff: string[];
+    is_component_cut?: boolean;
+  };
+}
+
+export class BatchComponentsDto {
+  @IsObject()
+  @ValidateNested()
+  @Type(() => BatchDiffDto)
+  diff: BatchDiffDto;
+
+  @IsBoolean()
+  @IsOptional()
+  is_user_switched_version: boolean;
+
+  @IsString()
+  @IsOptional()
+  pageId: string;
+}
diff --git a/server/src/modules/apps/dto/page.ts b/server/src/modules/apps/dto/page.ts
index f92e5c66be..cb883bfd28 100644
--- a/server/src/modules/apps/dto/page.ts
+++ b/server/src/modules/apps/dto/page.ts
@@ -1,4 +1,27 @@
-import { IsNotEmpty, IsNumber, IsOptional, IsString, IsUUID, MaxLength } from 'class-validator';
+import {
+  IsEnum,
+  IsNotEmpty,
+  IsNumber,
+  IsOptional,
+  IsString,
+  IsUrl,
+  IsUUID,
+  MaxLength,
+  ValidateIf,
+} from 'class-validator';
+
+// 1. Define your enums here in the same file
+export enum PageOpenIn {
+  NEW_TAB = 'new_tab',
+  SAME_TAB = 'same_tab',
+}
+
+export enum PageType {
+  DEFAULT = 'default',
+  GROUP = 'group',
+  URL = 'url',
+  APP = 'app',
+}
 
 export class CreatePageDto {
   @IsUUID()
@@ -32,6 +55,24 @@ export class CreatePageDto {
 
   @IsOptional()
   icon: string;
+
+  @IsOptional()
+  @IsString()
+  @ValidateIf((o) => o.url !== '')
+  @IsUrl()
+  url?: string;
+
+  @IsEnum(PageOpenIn)
+  @IsOptional()
+  openIn?: PageOpenIn;
+
+  @IsEnum(PageType)
+  @IsOptional()
+  type?: PageType;
+
+  @IsUUID()
+  @IsOptional()
+  appId?: string;
 }
 
 export class DeletePageDto {
diff --git a/server/src/modules/apps/guards/app-auth.guard.ts b/server/src/modules/apps/guards/app-auth.guard.ts
index d942341c9c..43334f21bb 100644
--- a/server/src/modules/apps/guards/app-auth.guard.ts
+++ b/server/src/modules/apps/guards/app-auth.guard.ts
@@ -10,7 +10,6 @@ import { WORKSPACE_STATUS } from '@modules/users/constants/lifecycle';
 import { AppsUtilService } from '../util.service';
 import { AppsRepository } from '../repository';
 import { OrganizationRepository } from '@modules/organizations/repository';
-
 @Injectable()
 export class AppAuthGuard extends AuthGuard('jwt') {
   // This guard will allow access for unauthenticated user if the app is public
@@ -54,7 +53,7 @@ export class AppAuthGuard extends AuthGuard('jwt') {
       return true;
     }
 
-    // Throw a custom exception with workspace ID if the app is not public
+    // Fall back to JWT authentication
     try {
       const authResult = await super.canActivate(context);
       return authResult;
diff --git a/server/src/modules/apps/interfaces/services/IComponentService.ts b/server/src/modules/apps/interfaces/services/IComponentService.ts
index 6f23d47b0e..b45e71dd2d 100644
--- a/server/src/modules/apps/interfaces/services/IComponentService.ts
+++ b/server/src/modules/apps/interfaces/services/IComponentService.ts
@@ -16,7 +16,7 @@ export interface IComponentsService {
     componenstLayoutDiff: Record<string, { layouts: LayoutData; component?: { parent: string } }>,
     appVersionId: string
   ): Promise<void | { error: { message: string } }>;
-  getAllComponents(pageId: string): Promise<Record<string, any>>;
+  getAllComponents(pageId: string, manager?: EntityManager): Promise<Record<string, any>>;
   transformComponentData(data: object): Component[];
   createComponentWithLayout(
     componentData: Component,
diff --git a/server/src/modules/apps/interfaces/services/IEventService.ts b/server/src/modules/apps/interfaces/services/IEventService.ts
index 3f809189e6..5cac28b5fd 100644
--- a/server/src/modules/apps/interfaces/services/IEventService.ts
+++ b/server/src/modules/apps/interfaces/services/IEventService.ts
@@ -1,9 +1,10 @@
 import { EventHandler } from 'src/entities/event_handler.entity';
 import { CreateEventHandlerDto, UpdateEvent } from '@modules/apps/dto/event';
 import { App } from '@entities/app.entity';
+import { EntityManager } from 'typeorm';
 
 export interface IEventsService {
-  findEventsForVersion(appVersionId: string): Promise<EventHandler[]>;
+  findEventsForVersion(appVersionId: string, manager?: EntityManager): Promise<EventHandler[]>;
   findAllEventsWithSourceId(sourceId: string): Promise<EventHandler[]>;
   cascadeDeleteEvents(sourceId: string): Promise<void>;
   createEvent(eventHandler: CreateEventHandlerDto, versionId: string): Promise<EventHandler>;
diff --git a/server/src/modules/apps/interfaces/services/IPageService.ts b/server/src/modules/apps/interfaces/services/IPageService.ts
index f8f8fed9eb..517bf69ec1 100644
--- a/server/src/modules/apps/interfaces/services/IPageService.ts
+++ b/server/src/modules/apps/interfaces/services/IPageService.ts
@@ -2,9 +2,10 @@ import { Page } from '@entities/page.entity';
 import { AppVersion } from '@entities/app_version.entity';
 import { EventHandler } from 'src/entities/event_handler.entity';
 import { CreatePageDto, UpdatePageDto } from '@modules/apps/dto/page';
+import { EntityManager } from 'typeorm';
 
 export interface IPageService {
-  findPagesForVersion(appVersionId: string): Promise<Page[]>;
+  findPagesForVersion(appVersionId: string, mode?:string, manager?: EntityManager): Promise<Page[]>;
   findOne(id: string): Promise<Page>;
   createPage(page: CreatePageDto, appVersionId: string): Promise<Page>;
   clonePage(pageId: string, appVersionId: string): Promise<{ pages: Page[]; events: EventHandler[] }>;
diff --git a/server/src/modules/apps/interfaces/services/IPageUtilService.ts b/server/src/modules/apps/interfaces/services/IPageUtilService.ts
index d66543ec9d..38aac82d52 100644
--- a/server/src/modules/apps/interfaces/services/IPageUtilService.ts
+++ b/server/src/modules/apps/interfaces/services/IPageUtilService.ts
@@ -2,7 +2,7 @@ import { Page } from 'src/entities/page.entity';
 import { EntityManager } from 'typeorm';
 import { CreatePageDto } from '@modules/apps/dto/page';
 export interface IPageHelperService {
-  fetchPages(appVersionId: string): Promise<Page[]>;
+  fetchPages(appVersionId: string, manager?: EntityManager): Promise<Page[]>;
   reorderPages(udpateObject: any, appVersionId: string): Promise<void>;
   deletePageGroup(page: Page, appVersionId: string, deleteAssociatedPages: boolean): Promise<void>;
   rearrangePagesOrderPostDeletion(pageDeleted: Page, manager: EntityManager): Promise<void>;
diff --git a/server/src/modules/apps/module.ts b/server/src/modules/apps/module.ts
index 2a54c29326..af6c809b6e 100644
--- a/server/src/modules/apps/module.ts
+++ b/server/src/modules/apps/module.ts
@@ -22,6 +22,9 @@ import { AiModule } from '@modules/ai/module';
 import { AppPermissionsModule } from '@modules/app-permissions/module';
 import { RolesRepository } from '@modules/roles/repository';
 import { UsersModule } from '@modules/users/module';
+import { UserSessionRepository } from '@modules/session/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
+import { AppGitRepository } from '@modules/app-git/repository';
 @Module({})
 export class AppsModule {
   static async register(configs: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -55,6 +58,7 @@ export class AppsModule {
         AppsService,
         VersionRepository,
         AppsRepository,
+        AppGitRepository,
         AppEnvironmentUtilService,
         PageService,
         EventsService,
@@ -67,6 +71,8 @@ export class AppsModule {
         DataSourcesRepository,
         AppImportExportService,
         RolesRepository,
+        UserSessionRepository,
+        UserRepository,
       ],
       exports: [AppsUtilService, AppImportExportService],
     };
diff --git a/server/src/modules/apps/repository.ts b/server/src/modules/apps/repository.ts
index ab539b086c..f026266bf8 100644
--- a/server/src/modules/apps/repository.ts
+++ b/server/src/modules/apps/repository.ts
@@ -47,11 +47,18 @@ export class AppsRepository extends Repository<App> {
     });
   }
 
+  findOneById(id: string): Promise<App> {
+    return this.findOne({ where: { id } });
+  }
+
   findById(id: string, organizationId: string, versionId?: string): Promise<App> {
     const versionCondition = versionId ? { appVersions: { id: versionId } } : {};
+    const baseWhere = { id, ...versionCondition };
+    const where = organizationId ? { ...baseWhere, organizationId } : baseWhere;
+
     return this.findOne({
       ...(versionId ? { relations: ['appVersions'] } : {}),
-      where: { id, organizationId, ...versionCondition },
+      where,
     });
   }
 
diff --git a/server/src/modules/apps/service.ts b/server/src/modules/apps/service.ts
index 30bfa92c64..98308537a7 100644
--- a/server/src/modules/apps/service.ts
+++ b/server/src/modules/apps/service.ts
@@ -41,6 +41,7 @@ import { RequestContext } from '@modules/request-context/service';
 import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
 import { MODULES } from '@modules/app/constants/modules';
 import { EventEmitter2 } from '@nestjs/event-emitter';
+import { AppGitRepository } from '@modules/app-git/repository';
 
 @Injectable()
 export class AppsService implements IAppsService {
@@ -57,7 +58,8 @@ export class AppsService implements IAppsService {
     protected readonly organizationThemeUtilService: OrganizationThemesUtilService,
     protected readonly aiUtilService: AiUtilService,
     protected readonly componentsService: ComponentsService,
-    protected readonly eventEmitter: EventEmitter2
+    protected readonly eventEmitter: EventEmitter2,
+    protected readonly appGitRepository: AppGitRepository
   ) { }
   async create(user: User, appCreateDto: AppCreateDto) {
     const { name, icon, type } = appCreateDto;
@@ -70,7 +72,7 @@ export class AppsService implements IAppsService {
       appUpdateDto.icon = icon;
       await this.appsUtilService.update(app, appUpdateDto, null, manager);
 
-      // Setting data for audit logs
+      //APP_CREATE audit
       RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
         userId: user.id,
         organizationId: user.organizationId,
@@ -161,6 +163,8 @@ export class AppsService implements IAppsService {
       };
       await this.eventEmitter.emit('app-rename-commit', appRenameDto);
     }
+
+    //APP_UPDATE audit
     RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
       userId,
       organizationId,
@@ -178,9 +182,11 @@ export class AppsService implements IAppsService {
     const { id } = app;
 
     await this.appRepository.delete({ id, organizationId });
+    console.log('deleted app');
 
+    //APP_DELETE audit
     RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
-      userId: id,
+      userId: user.id,
       organizationId: user.organizationId,
       resourceId: app.id,
       resourceName: app.name,
@@ -295,7 +301,11 @@ export class AppsService implements IAppsService {
         appVersionEnvironment = await this.appEnvironmentUtilService.getByPriority(user.organizationId);
         response['editing_version']['current_environment_id'] = appVersionEnvironment.id;
       }
-      response['should_freeze_editor'] = app.creationMode === 'GIT' || shouldFreezeEditor;
+      response['should_freeze_editor'] = shouldFreezeEditor;
+      const appGit = await this.appGitRepository.findAppGitByAppId(app.id);
+      if (appGit) {
+        response['should_freeze_editor'] = !appGit.allowEditing || shouldFreezeEditor;
+      }
       response['editorEnvironment'] = {
         id: appVersionEnvironment.id,
         name: appVersionEnvironment.name,
@@ -389,6 +399,7 @@ export class AppsService implements IAppsService {
 
       await manager.update(App, appId, { currentVersionId: versionToBeReleased });
 
+      //APP_RELEASE audit
       RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
         userId: user.id,
         organizationId: user.organizationId,
diff --git a/server/src/modules/apps/services/app-import-export.service.ts b/server/src/modules/apps/services/app-import-export.service.ts
index 7a6a089548..66bd0b4014 100644
--- a/server/src/modules/apps/services/app-import-export.service.ts
+++ b/server/src/modules/apps/services/app-import-export.service.ts
@@ -41,6 +41,8 @@ import { PageUser } from '@entities/page_users.entity';
 import { UsersUtilService } from '@modules/users/util.service';
 import { QueryPermission } from '@entities/query_permissions.entity';
 import { QueryUser } from '@entities/query_users.entity';
+import { ComponentPermission } from '@entities/component_permissions.entity';
+import { ComponentUser } from '@entities/component_users.entity';
 interface AppResourceMappings {
   defaultDataSourceIdMapping: Record<string, string>;
   dataQueryMapping: Record<string, string>;
@@ -68,7 +70,9 @@ type NewRevampedComponent =
   | 'Checkbox'
   | 'Divider'
   | 'VerticalDivider'
-  | 'Link';
+  | 'Link'
+  | 'DaterangePicker'
+  | 'TextArea';
 
 const DefaultDataSourceNames: DefaultDataSourceName[] = [
   'restapidefault',
@@ -88,6 +92,8 @@ const NewRevampedComponents: NewRevampedComponent[] = [
   'Divider',
   'VerticalDivider',
   'Link',
+  'DaterangePicker',
+  'TextArea',
 ];
 
 @Injectable()
@@ -238,6 +244,9 @@ export class AppImportExportService {
           ? await manager
               .createQueryBuilder(Component, 'components')
               .leftJoinAndSelect('components.layouts', 'layouts')
+              .leftJoinAndSelect('components.permissions', 'permission')
+              .leftJoinAndSelect('permission.users', 'componentUser')
+              .leftJoinAndSelect('componentUser.permissionGroup', 'permissionGroup')
               .where('components.pageId IN(:...pageId)', {
                 pageId: pages.map((v) => v.id),
               })
@@ -245,6 +254,21 @@ export class AppImportExportService {
               .getMany()
           : [];
 
+      const componentsWithPermissionGroups = components.map((component) => {
+        const groupPermission = component.permissions.find((perm) => perm.type === 'GROUP');
+
+        return {
+          ...component,
+          permissions: groupPermission
+            ? {
+                permissionGroup: groupPermission.users
+                  .map((user) => user.permissionGroup?.name)
+                  .filter((name): name is string => Boolean(name)),
+              }
+            : undefined,
+        };
+      });
+
       const events = await manager
         .createQueryBuilder(EventHandler, 'event_handlers')
         .where('event_handlers.appVersionId IN(:...versionId)', {
@@ -253,7 +277,7 @@ export class AppImportExportService {
         .orderBy('event_handlers.created_at', 'ASC')
         .getMany();
 
-      appToExport['components'] = components;
+      appToExport['components'] = componentsWithPermissionGroups;
       appToExport['pages'] = pagesWithPermissionGroups;
       appToExport['events'] = events;
       appToExport['dataQueries'] = queriesWithPermissionGroups;
@@ -953,6 +977,13 @@ export class AppImportExportService {
               await manager.save(newLayout);
             }));
 
+            if (component.permissions) {
+              savedComponent.permissions = component.permissions;
+            }
+
+            //create component permissions of component if flag enabled in dto
+            await this.createComponentPermissionsForGroups(savedComponent, user.organizationId, manager);
+
             const componentEvents = importingEvents.filter((event) => event.sourceId === component.id);
 
             if (componentEvents.length > 0) {
@@ -1383,7 +1414,7 @@ export class AppImportExportService {
     return pageSettings;
   }
 
-  async checkIfGroupPermissionsExist(pages, queries, organizationId) {
+  async checkIfGroupPermissionsExist(pages, queries, components, organizationId) {
     const allGroupNames = new Set<string>();
 
     for (const page of pages) {
@@ -1402,6 +1433,15 @@ export class AppImportExportService {
       }
     }
 
+    for (const component of components) {
+      const groupNames = component.permissions?.permissionGroup || [];
+      for (const name of groupNames) {
+        if (!allGroupNames.has(name)) {
+          allGroupNames.add(name);
+        }
+      }
+    }
+
     if (!allGroupNames.size) return;
 
     return await dbTransactionWrap(async (manager: EntityManager) => {
@@ -1497,6 +1537,41 @@ export class AppImportExportService {
     await manager.save(queryUsers);
   }
 
+  async createComponentPermissionsForGroups(component, organizationId: string, manager: EntityManager) {
+    const groupNames = component.permissions?.permissionGroup || [];
+    if (!groupNames.length) return;
+
+    const existingGroups = await manager
+      .createQueryBuilder(GroupPermissions, 'gp')
+      .where('gp.name IN (:...names)', { names: groupNames })
+      .andWhere('gp.organizationId = :organizationId', { organizationId })
+      .getMany();
+
+    const groupMap = new Map(existingGroups.map((g) => [g.name, g]));
+
+    // Filter to only existing group names
+    const validGroupNames = groupNames.filter((name) => groupMap.has(name));
+
+    // If no valid group names exist, do not create permissions
+    if (!validGroupNames.length) return;
+
+    const permission = manager.create(ComponentPermission, {
+      componentId: component.id,
+      type: PAGE_PERMISSION_TYPE.GROUP,
+    });
+
+    const savedPermission = await manager.save(permission);
+
+    const componentUsers = validGroupNames.map((name) =>
+      manager.create(ComponentUser, {
+        componentPermissionsId: savedPermission.id,
+        permissionGroupsId: groupMap.get(name).id,
+      })
+    );
+
+    await manager.save(componentUsers);
+  }
+
   async createAppVersionsForImportedApp(
     manager: EntityManager,
     user: User,
@@ -2062,9 +2137,10 @@ function migrateProperties(
       delete generalStyles?.boxShadow;
     }
 
+    // Set empty label for specific components
     if (
-      shouldHandleBackwardCompatibility &&
-      (componentType === 'TextInput' || componentType === 'PasswordInput' || componentType === 'NumberInput')
+      (shouldHandleBackwardCompatibility && ['TextInput', 'PasswordInput', 'NumberInput'].includes(componentType)) ||
+      (['TextArea', 'DaterangePicker'].includes(componentType) && !properties.label)
     ) {
       properties.label = '';
     }
diff --git a/server/src/modules/apps/services/component.service.ts b/server/src/modules/apps/services/component.service.ts
index c6ef31f5b8..73997f08fc 100644
--- a/server/src/modules/apps/services/component.service.ts
+++ b/server/src/modules/apps/services/component.service.ts
@@ -12,7 +12,7 @@ const _ = require('lodash');
 
 @Injectable()
 export class ComponentsService implements IComponentsService {
-  constructor(protected eventHandlerService: EventsService) { }
+  constructor(protected eventHandlerService: EventsService) {}
 
   findOne(id: string): Promise<Component> {
     return dbTransactionWrap((manager: EntityManager) => {
@@ -22,130 +22,26 @@ export class ComponentsService implements IComponentsService {
 
   async create(componentDiff: object, pageId: string, appVersionId: string) {
     return dbTransactionForAppVersionAssociationsUpdate(async (manager: EntityManager) => {
-      const page = await manager.findOne(Page, {
-        where: { appVersionId, id: pageId },
-      });
-
-      const newComponents = this.transformComponentData(componentDiff);
-
-      const componentLayouts = [];
-
-      newComponents.forEach((component) => {
-        component.page = page;
-      });
-
-      const savedComponents = await manager.save(Component, newComponents);
-
-      savedComponents.forEach((component) => {
-        const componentLayout = componentDiff[component.id].layouts;
-
-        if (componentLayout) {
-          for (const type in componentLayout) {
-            const layout = componentLayout[type];
-            const newLayout = new Layout();
-            newLayout.type = type;
-            newLayout.top = layout.top;
-            newLayout.left = layout.left;
-            newLayout.width = layout.width;
-            newLayout.height = layout.height;
-            newLayout.component = component;
-            newLayout.dimensionUnit = LayoutDimensionUnits.COUNT;
-
-            componentLayouts.push(newLayout);
-          }
-        }
-      });
-
-      await manager.save(Layout, componentLayouts);
-
+      await this.createComponentsAndLayouts(componentDiff, pageId, appVersionId, manager);
       return {};
     }, appVersionId);
   }
 
   async update(componentDiff: object, appVersionId: string) {
     return dbTransactionForAppVersionAssociationsUpdate(async (manager: EntityManager) => {
-      for (const componentId in componentDiff) {
-        const { component } = componentDiff[componentId];
-
-        const doesComponentExist = await manager.findAndCount(Component, { where: { id: componentId } });
-
-        if (doesComponentExist[1] === 0) {
-          return {
-            error: {
-              message: `Component with id ${componentId} does not exist`,
-            },
-          };
-        }
-
-        const componentData: Component = await manager.findOne(Component, {
-          where: { id: componentId },
-        });
-
-        const isComponentDefinitionChanged = component.definition ? true : false;
-
-        if (isComponentDefinitionChanged) {
-          const updatedDefinition = component.definition;
-          const columnsUpdated = Object.keys(updatedDefinition);
-
-          const newComponentsData = columnsUpdated.reduce((acc, column) => {
-            const newColumnData = _.mergeWith(
-              componentData[column === 'others' ? 'displayPreferences' : column],
-              updatedDefinition[column],
-              (objValue, srcValue) => {
-                if (componentData.type === 'Table' && _.isArray(objValue)) {
-                  return srcValue;
-                } else if (
-                  (componentData.type === 'DropdownV2' ||
-                    componentData.type === 'MultiselectV2' ||
-                    componentData.type === 'ModuleContainer' ||
-                    componentData.type === 'Steps') &&
-                  _.isArray(objValue)
-                ) {
-                  return _.isArray(srcValue) ? srcValue : Object.values(srcValue);
-                }
-              }
-            );
-
-            if (column === 'others') {
-              acc['displayPreferences'] = newColumnData;
-            } else {
-              acc[column] = newColumnData;
-            }
-
-            return acc;
-          }, {});
-
-          // Update the component with merged data
-          await manager.update(Component, componentId, newComponentsData);
-        } else {
-          // Update the component directly if definition is not changed
-          await manager.update(Component, componentId, component);
-        }
+      const result = await this.updateComponents(componentDiff, appVersionId, manager);
+      if (result?.error) {
+        return result;
       }
     }, appVersionId);
   }
 
   async delete(componentIds: string[], appVersionId: string, isComponentCut = false) {
     return dbTransactionForAppVersionAssociationsUpdate(async (manager: EntityManager) => {
-      const components = await manager.findBy(Component, {
-        id: In(componentIds),
-      });
-
-      if (!components.length) {
-        return {
-          error: {
-            message: `Components with ids ${componentIds} do not exist`,
-          },
-        };
+      const result = await this.deleteComponents(componentIds, appVersionId, isComponentCut, manager);
+      if (result?.error) {
+        return result;
       }
-
-      if (!isComponentCut) {
-        components.forEach((component) => {
-          this.eventHandlerService.cascadeDeleteEvents(component.id);
-        });
-      }
-
-      await manager.delete(Component, { id: In(componentIds) });
     }, appVersionId);
   }
 
@@ -186,7 +82,7 @@ export class ComponentsService implements IComponentsService {
     }, appVersionId);
   }
 
-  async getAllComponents(pageId: string) {
+  async getAllComponents(pageId: string, manager?: EntityManager) {
     // need to get all components for a page with their layouts
 
     return dbTransactionWrap(async (manager: EntityManager) => {
@@ -220,7 +116,7 @@ export class ComponentsService implements IComponentsService {
             return acc;
           }, {});
         });
-    });
+    }, manager);
   }
 
   transformComponentData(data: object): Component[] {
@@ -308,4 +204,168 @@ export class ComponentsService implements IComponentsService {
     const numberOfGrids = 43;
     return Math.round((dimension * numberOfGrids) / 100);
   }
+
+  async batchOperations(
+    batchOperations: {
+      create?: { diff: object; pageId: string };
+      update?: { diff: object };
+      delete?: { diff: string[]; is_component_cut?: boolean };
+    },
+    appVersionId: string
+  ) {
+    return dbTransactionForAppVersionAssociationsUpdate(async (manager: EntityManager) => {
+      const results: { created?: number; updated?: number; deleted?: number } = {};
+
+      // Handle create operation if present
+      if (batchOperations.create) {
+        const { diff, pageId } = batchOperations.create;
+        await this.createComponentsAndLayouts(diff, pageId, appVersionId, manager);
+        results.created = Object.keys(diff).length;
+      }
+
+      // Handle update operation if present
+      if (batchOperations.update) {
+        const { diff } = batchOperations.update;
+        await this.updateComponents(diff, appVersionId, manager);
+        results.updated = Object.keys(diff).length;
+      }
+
+      // Handle delete operation if present
+      if (batchOperations.delete) {
+        const { diff: componentIds, is_component_cut = false } = batchOperations.delete;
+        await this.deleteComponents(componentIds, appVersionId, is_component_cut, manager);
+        results.deleted = componentIds.length;
+      }
+
+      return results;
+    }, appVersionId);
+  }
+
+  // Common methods used by both the original methods and batch operations
+  private async createComponentsAndLayouts(diff: object, pageId: string, appVersionId: string, manager: EntityManager) {
+    const page = await manager.findOne(Page, {
+      where: { appVersionId, id: pageId },
+    });
+
+    const newComponents = this.transformComponentData(diff);
+    const componentLayouts = [];
+
+    newComponents.forEach((component) => {
+      component.page = page;
+    });
+
+    const savedComponents = await manager.save(Component, newComponents);
+
+    savedComponents.forEach((component) => {
+      const componentLayout = diff[component.id].layouts;
+
+      if (componentLayout) {
+        for (const type in componentLayout) {
+          const layout = componentLayout[type];
+          const newLayout = new Layout();
+          newLayout.type = type;
+          newLayout.top = layout.top;
+          newLayout.left = layout.left;
+          newLayout.width = layout.width;
+          newLayout.height = layout.height;
+          newLayout.component = component;
+          newLayout.dimensionUnit = LayoutDimensionUnits.COUNT;
+
+          componentLayouts.push(newLayout);
+        }
+      }
+    });
+
+    await manager.save(Layout, componentLayouts);
+  }
+
+  private async updateComponents(diff: object, appVersionId: string, manager: EntityManager) {
+    for (const componentId in diff) {
+      const { component } = diff[componentId];
+
+      const doesComponentExist = await manager.findAndCount(Component, { where: { id: componentId } });
+
+      if (doesComponentExist[1] === 0) {
+        return {
+          error: {
+            message: `Component with id ${componentId} does not exist`,
+          },
+        };
+      }
+
+      const componentData: Component = await manager.findOne(Component, {
+        where: { id: componentId },
+      });
+
+      const isComponentDefinitionChanged = component.definition ? true : false;
+
+      if (isComponentDefinitionChanged) {
+        const updatedDefinition = component.definition;
+        const columnsUpdated = Object.keys(updatedDefinition);
+
+        const newComponentsData = columnsUpdated.reduce((acc, column) => {
+          const newColumnData = _.mergeWith(
+            componentData[column === 'others' ? 'displayPreferences' : column],
+            updatedDefinition[column],
+            (objValue, srcValue) => {
+              if ((componentData.type === 'Table' || componentData.type === 'Form') && _.isArray(objValue)) {
+                return srcValue;
+              } else if (componentData.type === 'Form' && _.isObject(srcValue)) {
+                // Handle Form component with object srcValue like JSONData & JSONSchema
+                return srcValue;
+              } else if (
+                  (componentData.type === 'DropdownV2' ||
+                    componentData.type === 'MultiselectV2' ||
+                    componentData.type === 'ModuleContainer' ||
+                    componentData.type === 'Tabs' ||
+                    componentData.type === 'Steps') &&
+                _.isArray(objValue)
+              ) {
+                return _.isArray(srcValue) ? srcValue : Object.values(srcValue);
+              }
+            }
+          );
+
+          if (column === 'others') {
+            acc['displayPreferences'] = newColumnData;
+          } else {
+            acc[column] = newColumnData;
+          }
+
+          return acc;
+        }, {});
+
+        await manager.update(Component, componentId, newComponentsData);
+      } else {
+        await manager.update(Component, componentId, component);
+      }
+    }
+  }
+
+  private async deleteComponents(
+    componentIds: string[],
+    appVersionId: string,
+    isComponentCut: boolean,
+    manager: EntityManager
+  ) {
+    const components = await manager.findBy(Component, {
+      id: In(componentIds),
+    });
+
+    if (!components.length) {
+      return {
+        error: {
+          message: `Components with ids ${componentIds} do not exist`,
+        },
+      };
+    }
+
+    if (!isComponentCut) {
+      components.forEach((component) => {
+        this.eventHandlerService.cascadeDeleteEvents(component.id);
+      });
+    }
+
+    await manager.delete(Component, { id: In(componentIds) });
+  }
 }
diff --git a/server/src/modules/apps/services/event.service.ts b/server/src/modules/apps/services/event.service.ts
index 98ecdac194..a93d6cdfe1 100644
--- a/server/src/modules/apps/services/event.service.ts
+++ b/server/src/modules/apps/services/event.service.ts
@@ -8,13 +8,13 @@ import { IEventsService } from '../interfaces/services/IEventService';
 
 @Injectable()
 export class EventsService implements IEventsService {
-  async findEventsForVersion(appVersionId: string): Promise<EventHandler[]> {
+  async findEventsForVersion(appVersionId: string, manager?: EntityManager): Promise<EventHandler[]> {
     return dbTransactionWrap(async (manager: EntityManager) => {
       const allEvents = await manager.find(EventHandler, {
         where: { appVersionId },
       });
       return allEvents;
-    });
+    }, manager);
   }
 
   async findAllEventsWithSourceId(sourceId: string): Promise<EventHandler[]> {
diff --git a/server/src/modules/apps/services/page.service.ts b/server/src/modules/apps/services/page.service.ts
index 02bea48dab..8de8b1ac71 100644
--- a/server/src/modules/apps/services/page.service.ts
+++ b/server/src/modules/apps/services/page.service.ts
@@ -23,12 +23,12 @@ export class PageService implements IPageService {
     protected eventHandlerService: EventsService
   ) {}
 
-  async findPagesForVersion(appVersionId: string): Promise<Page[]> {
+  async findPagesForVersion(appVersionId: string, mode?: string, manager?: EntityManager): Promise<Page[]> {
     // const allPages = await this.pageRepository.find({ where: { appVersionId }, order: { index: 'ASC' } });
-    const allPages = await this.pageHelperService.fetchPages(appVersionId);
+    const allPages = await this.pageHelperService.fetchPages(appVersionId, manager);
     const pagesWithComponents = await Promise.all(
       allPages.map(async (page) => {
-        const components = await this.componentsService.getAllComponents(page.id);
+        const components = await this.componentsService.getAllComponents(page.id, manager);
         delete page.appVersionId;
         return { ...page, components };
       })
@@ -54,7 +54,7 @@ export class PageService implements IPageService {
     // TODO - Should use manager here - multiple db operations found
     return dbTransactionForAppVersionAssociationsUpdate(async (manager) => {
       const pageToClone = await manager.findOne(Page, {
-        where: { id: pageId, versionId: appVersionId },
+        where: { id: pageId, appVersionId },
       });
 
       if (!pageToClone) {
@@ -81,19 +81,113 @@ export class PageService implements IPageService {
       newPage.index = pageToClone.index + 1;
       newPage.appVersionId = appVersionId;
       newPage.autoComputeLayout = true;
+      newPage.type = pageToClone.type;
 
       const clonedpage = await manager.save(newPage);
 
-      await this.clonePageEventsAndComponents(pageId, clonedpage.id);
+      await this.clonePageEventsAndComponents(pageId, clonedpage.id, manager);
 
-      const pages = await this.findPagesForVersion(appVersionId);
-      const events = await this.eventHandlerService.findEventsForVersion(appVersionId);
+      const pages = await this.findPagesForVersion(appVersionId, '', manager);
+      const events = await this.eventHandlerService.findEventsForVersion(appVersionId, manager);
 
       return { pages, events };
     }, appVersionId);
   }
 
-  async clonePageEventsAndComponents(pageId: string, clonePageId: string) {
+  async cloneGroup(groupPageId: string, appVersionId: string) {
+    return dbTransactionForAppVersionAssociationsUpdate(async (manager) => {
+      const groupToClone = await manager.findOne(Page, {
+        where: { id: groupPageId, appVersionId, isPageGroup: true },
+      });
+
+      if (!groupToClone) {
+        throw new Error('Group page not found');
+      }
+
+      let groupName = `${groupToClone.name} (copy)`;
+      let groupHandle = `${groupToClone.handle}-copy`;
+
+      const allPages = await manager.find(Page, { where: { appVersionId } });
+
+      const similarGroupPages = allPages.filter((page) => {
+        return page.name.includes(groupName) || page.handle.includes(groupHandle);
+      });
+
+      if (similarGroupPages.length > 0) {
+        groupName = `${groupToClone.name} (copy ${similarGroupPages.length})`;
+        groupHandle = `${groupToClone.handle}-copy-${similarGroupPages.length}`;
+      }
+
+      const newGroupPage = new Page();
+      newGroupPage.name = groupName;
+      newGroupPage.handle = groupHandle;
+      newGroupPage.index = 999;
+      newGroupPage.pageGroupIndex = groupToClone.pageGroupIndex;
+      newGroupPage.isPageGroup = true;
+      newGroupPage.icon = groupToClone.icon || 'IconFolder';
+      newGroupPage.appVersionId = appVersionId;
+      newGroupPage.autoComputeLayout = groupToClone.autoComputeLayout;
+      newGroupPage.type = groupToClone.type;
+      newGroupPage.openIn = groupToClone.openIn;
+      newGroupPage.appId = groupToClone.appId;
+      newGroupPage.url = groupToClone.url;
+      newGroupPage.disabled = groupToClone.disabled;
+      newGroupPage.hidden = groupToClone.hidden;
+
+      const clonedGroup = await manager.save(newGroupPage);
+
+      // Find child pages in this group
+      const childPages = await manager.find(Page, {
+        where: {
+          appVersionId,
+          pageGroupId: groupToClone.id,
+        },
+      });
+
+      for (const child of childPages) {
+        let childName = `${child.name} (copy)`;
+        let childHandle = `${child.handle}-copy`;
+
+        const existingSimilar = allPages.filter(
+          (page) => page.name.includes(childName) || page.handle.includes(childHandle)
+        );
+
+        if (existingSimilar.length > 0) {
+          childName = `${child.name} (copy ${existingSimilar.length})`;
+          childHandle = `${child.handle}-copy-${existingSimilar.length}`;
+        }
+
+        const clonedChild = new Page();
+        clonedChild.name = childName;
+        clonedChild.handle = childHandle;
+        clonedChild.index = child.index + 1;
+        clonedChild.pageGroupIndex = child.pageGroupIndex;
+        clonedChild.pageGroupId = clonedGroup.id;
+        clonedChild.isPageGroup = false;
+        clonedChild.icon = child.icon || 'IconFile';
+        clonedChild.appVersionId = appVersionId;
+        clonedChild.autoComputeLayout = true;
+        clonedChild.type = child.type;
+        clonedChild.openIn = child.openIn;
+        clonedChild.appId = child.appId;
+        clonedChild.url = child.url;
+        clonedChild.disabled = child.disabled;
+        clonedChild.hidden = child.hidden;
+
+        const newChildPage = await manager.save(clonedChild);
+
+        // Clone events and components for each child page
+        await this.clonePageEventsAndComponents(child.id, newChildPage.id, manager);
+      }
+
+      const pages = await this.findPagesForVersion(appVersionId, '', manager);
+      const events = await this.eventHandlerService.findEventsForVersion(appVersionId, manager);
+
+      return { pages, events };
+    }, appVersionId);
+  }
+
+  async clonePageEventsAndComponents(pageId: string, clonePageId: string, manager?: EntityManager) {
     return dbTransactionWrap(async (manager: EntityManager) => {
       const pageComponents = await manager.find(Component, { where: { pageId } });
       const pageEvents = await this.eventHandlerService.findAllEventsWithSourceId(pageId);
@@ -247,7 +341,7 @@ export class PageService implements IPageService {
       if (!isEmpty(toUpdateComponents)) {
         await manager.save(toUpdateComponents);
       }
-    });
+    }, manager);
   }
 
   async reorderPages(diff, appVersionId: string) {
@@ -255,7 +349,6 @@ export class PageService implements IPageService {
   }
 
   async updatePage(pageUpdates: UpdatePageDto, appVersionId: string) {
-    console.log({ pageUpdates });
     if (Object.keys(pageUpdates.diff).length > 1) {
       throw new Error('Can not update multiple pages');
     }
@@ -264,7 +357,6 @@ export class PageService implements IPageService {
       const currentPage = await manager.findOne(Page, {
         where: { id: pageUpdates.pageId },
       });
-      console.log({ currentPage });
 
       if (!currentPage) {
         throw new Error('Page not found');
diff --git a/server/src/modules/apps/services/page.util.service.ts b/server/src/modules/apps/services/page.util.service.ts
index aface2cc16..9ebf795ffd 100644
--- a/server/src/modules/apps/services/page.util.service.ts
+++ b/server/src/modules/apps/services/page.util.service.ts
@@ -11,7 +11,7 @@ import { IPageHelperService } from '../interfaces/services/IPageUtilService';
 export class PageHelperService implements IPageHelperService {
   constructor(protected eventHandlerService: EventsService, protected licenseTermsService: LicenseTermsService) {}
 
-  public async fetchPages(appVersionId: string): Promise<Page[]> {
+  public async fetchPages(appVersionId: string, manager?: EntityManager): Promise<Page[]> {
     let allPages = [];
     return await dbTransactionWrap(async (manager: EntityManager) => {
       allPages = await manager.find(Page, {
@@ -25,7 +25,7 @@ export class PageHelperService implements IPageHelperService {
       });
 
       return allPages;
-    });
+    }, manager);
   }
 
   public async reorderPages(udpateObject, appVersionId: string): Promise<void> {
@@ -77,6 +77,10 @@ export class PageHelperService implements IPageHelperService {
     page.appVersionId = appVersionId;
     page.autoComputeLayout = true;
     page.index = dto.index;
+    page.appId = dto.appId;
+    page.url = dto.url;
+    page.type = dto.type;
+    page.openIn = dto.openIn;
     return page;
   }
 
diff --git a/server/src/modules/apps/services/widget-config/button.js b/server/src/modules/apps/services/widget-config/button.js
index d5b6a58214..b945b737ed 100644
--- a/server/src/modules/apps/services/widget-config/button.js
+++ b/server/src/modules/apps/services/widget-config/button.js
@@ -219,11 +219,11 @@ export const buttonConfig = {
     events: [],
     styles: {
       textColor: { value: '#FFFFFF' },
-      borderColor: { value: 'var(--primary-brand)' },
-      loaderColor: { value: '#FFFFFF' },
+      borderColor: { value: 'var(--cc-primary-brand)' },
+      loaderColor: { value: 'var(--cc-surface1-surface)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: 'var(--primary-brand)' },
-      iconColor: { value: '#FFFFFF' },
+      backgroundColor: { value: 'var(--cc-primary-brand)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
diff --git a/server/src/modules/apps/services/widget-config/buttonGroup.js b/server/src/modules/apps/services/widget-config/buttonGroup.js
index c92b0eb39c..72f675df97 100644
--- a/server/src/modules/apps/services/widget-config/buttonGroup.js
+++ b/server/src/modules/apps/services/widget-config/buttonGroup.js
@@ -120,7 +120,7 @@ export const buttonGroupConfig = {
       displayName: 'Selected background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     alignment: {
@@ -155,7 +155,6 @@ export const buttonGroupConfig = {
       params: [{ handle: 'selected', displayName: 'Value' }],
     },
   ],
-
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
@@ -170,14 +169,14 @@ export const buttonGroupConfig = {
     },
     events: [],
     styles: {
-      backgroundColor: { value: '' },
-      textColor: { value: '' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      textColor: { value: 'var(--cc-primary-text)' },
       visibility: { value: '{{true}}' },
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
-      selectedBackgroundColor: { value: 'var(--primary-brand)' },
       padding: { value: 'default' },
+      selectedBackgroundColor: { value: 'var(--cc-primary-brand)' },
       alignment: { value: 'left' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/chart.js b/server/src/modules/apps/services/widget-config/chart.js
index 81dbd2547a..66b5b21e98 100644
--- a/server/src/modules/apps/services/widget-config/chart.js
+++ b/server/src/modules/apps/services/widget-config/chart.js
@@ -45,7 +45,7 @@ export const chartConfig = {
         schema: {
           type: 'string',
         },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     showAxes: {
@@ -136,7 +136,7 @@ export const chartConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background color',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
     },
     padding: {
       type: 'code',
@@ -192,7 +192,7 @@ export const chartConfig = {
     },
     properties: {
       title: { value: 'This title can be changed' },
-      markerColor: { value: 'var(--primary-brand)' },
+      markerColor: { value: 'var(--cc-primary-brand)' },
       showAxes: { value: '{{true}}' },
       showGridLines: { value: '{{true}}' },
       plotFromJson: { value: '{{false}}' },
@@ -228,7 +228,7 @@ export const chartConfig = {
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       padding: { value: '50' },
       borderRadius: { value: '{{4}}' },
       visibility: { value: '{{true}}' },
diff --git a/server/src/modules/apps/services/widget-config/checkbox.js b/server/src/modules/apps/services/widget-config/checkbox.js
index ca4e740885..bff6b026d8 100644
--- a/server/src/modules/apps/services/widget-config/checkbox.js
+++ b/server/src/modules/apps/services/widget-config/checkbox.js
@@ -196,11 +196,11 @@ export const checkboxConfig = {
     events: [],
     styles: {
       disabledState: { value: '{{false}}' },
-      textColor: { value: '#1B1F24' },
-      checkboxColor: { value: 'var(--primary-brand)' },
-      uncheckedColor: { value: '#E4E7EB' },
-      borderColor: { value: '#CCD1D5' },
-      handleColor: { value: '#FFFFFF' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      checkboxColor: { value: 'var(--cc-primary-brand)' },
+      uncheckedColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
       alignment: { value: 'right' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
diff --git a/server/src/modules/apps/services/widget-config/circularProgressbar.js b/server/src/modules/apps/services/widget-config/circularProgressbar.js
index 2babc27a12..ee30a2c2a4 100644
--- a/server/src/modules/apps/services/widget-config/circularProgressbar.js
+++ b/server/src/modules/apps/services/widget-config/circularProgressbar.js
@@ -33,10 +33,10 @@ export const circularProgressbarConfig = {
   styles: {
     color: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
+      displayName: 'Color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     textColor: {
@@ -44,7 +44,7 @@ export const circularProgressbarConfig = {
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     textSize: {
@@ -104,8 +104,8 @@ export const circularProgressbarConfig = {
     },
     events: [],
     styles: {
-      color: { value: 'var(--primary-brand)' },
-      textColor: { value: '' },
+      color: { value: 'var(--cc-primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
       textSize: { value: '{{16}}' },
       strokeWidth: { value: '{{8}}' },
       counterClockwise: { value: '{{false}}' },
diff --git a/server/src/modules/apps/services/widget-config/codeEditor.js b/server/src/modules/apps/services/widget-config/codeEditor.js
index eb76891af0..45386c8a33 100644
--- a/server/src/modules/apps/services/widget-config/codeEditor.js
+++ b/server/src/modules/apps/services/widget-config/codeEditor.js
@@ -20,6 +20,15 @@ export const codeEditorConfig = {
         defaultValue: true,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     mode: {
       type: 'code',
       displayName: 'Mode',
@@ -80,6 +89,7 @@ export const codeEditorConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      dynamicHeight: { value: '{{false}}' },
       enableLineNumber: { value: '{{true}}' },
       mode: { value: 'javascript' },
       placeholder: { value: '' },
diff --git a/server/src/modules/apps/services/widget-config/colorPicker.js b/server/src/modules/apps/services/widget-config/colorPicker.js
index 6255f81202..10ade7bd76 100644
--- a/server/src/modules/apps/services/widget-config/colorPicker.js
+++ b/server/src/modules/apps/services/widget-config/colorPicker.js
@@ -4,7 +4,7 @@ export const colorPickerConfig = {
   description: 'Choose colors from a palette',
   component: 'ColorPicker',
   properties: {
-    defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
+    defaultColor: { type: 'color', displayName: 'Default color' },
   },
   defaultSize: {
     width: 9,
@@ -14,9 +14,7 @@ export const colorPickerConfig = {
     {
       displayName: 'Set Color',
       handle: 'setColor',
-      params: [
-        { handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
-      ],
+      params: [{ handle: 'color', displayName: 'Color', defaultValue: '#ffffff', type: 'color' }],
     },
   ],
   others: {
diff --git a/server/src/modules/apps/services/widget-config/container.js b/server/src/modules/apps/services/widget-config/container.js
index 2bff0d84c5..545d772829 100644
--- a/server/src/modules/apps/services/widget-config/container.js
+++ b/server/src/modules/apps/services/widget-config/container.js
@@ -21,6 +21,15 @@ export const containerConfig = {
         defaultValue: false,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     visibility: {
       type: 'toggle',
       displayName: 'Visibility',
@@ -61,12 +70,13 @@ export const containerConfig = {
       displayName: 'ContainerText',
       properties: ['text'],
       accessorKey: 'text',
-      styles: ['fontWeight', 'textSize', 'textColor'],
+      styles: ['fontWeight', 'textSize', 'textColor', 'boxShadow'],
       defaultValue: {
         text: 'Container title',
         fontWeight: 'bold',
         textSize: 16,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
+        boxShadow: '0px 0px 0px 0px #00000090',
       },
     },
   ],
@@ -77,7 +87,7 @@ export const containerConfig = {
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
       accordian: 'container',
     },
@@ -86,7 +96,7 @@ export const containerConfig = {
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ddd',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
       accordian: 'header',
     },
@@ -95,19 +105,19 @@ export const containerConfig = {
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-default-border)',
       },
       accordian: 'container',
     },
     borderRadius: {
       type: 'numberInput',
-      displayName: 'Border',
+      displayName: 'Border radius',
       validation: {
         schema: {
           type: 'union',
           schemas: [{ type: 'string' }, { type: 'number' }],
         },
-        defaultValue: 4,
+        defaultValue: 6,
       },
       accordian: 'container',
     },
@@ -150,15 +160,16 @@ export const containerConfig = {
       loadingState: { value: `{{false}}` },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      dynamicHeight: { value: '{{false}}' },
       headerHeight: { value: `{{80}}` },
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
-      headerBackgroundColor: { value: '#fff' },
-      borderRadius: { value: '4' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderRadius: { value: '6' },
       headerHeight: { value: '{{80}}' },
-      borderColor: { value: '#fff' },
+      borderColor: { value: 'var(--cc-default-border)' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/currencyinput.js b/server/src/modules/apps/services/widget-config/currencyinput.js
index 64a8f2df57..efd53844f9 100644
--- a/server/src/modules/apps/services/widget-config/currencyinput.js
+++ b/server/src/modules/apps/services/widget-config/currencyinput.js
@@ -88,9 +88,9 @@ export const currencyinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -140,33 +140,33 @@ export const currencyinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -177,9 +177,9 @@ export const currencyinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -284,17 +284,17 @@ export const currencyinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/server/src/modules/apps/services/widget-config/customComponent.js b/server/src/modules/apps/services/widget-config/customComponent.js
index cc1dae2b3e..2677b71c25 100644
--- a/server/src/modules/apps/services/widget-config/customComponent.js
+++ b/server/src/modules/apps/services/widget-config/customComponent.js
@@ -37,9 +37,9 @@ export const customComponentConfig = {
         value: `{{{ title: 'Hi! There', buttonText: 'Update Title'}}}`,
       },
       code: {
-        value: `import React from 'https://cdn.skypack.dev/react';
-  import ReactDOM from 'https://cdn.skypack.dev/react-dom';
-  import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
+        value: `import React from 'https://esm.sh/react@17.0.2';
+  import ReactDOM from 'https://esm.sh/react-dom@17.0.2';
+  import { Button, Container } from 'https://esm.sh/@material-ui/core@4.12.4?deps=react@17.0.2';
   const MyCustomComponent = ({data, updateData, runQuery}) => (
     <Container>
         <h1>{data.title}</h1>
diff --git a/server/src/modules/apps/services/widget-config/datepickerV2.js b/server/src/modules/apps/services/widget-config/datepickerV2.js
index ea56598d2e..46a3c794c7 100644
--- a/server/src/modules/apps/services/widget-config/datepickerV2.js
+++ b/server/src/modules/apps/services/widget-config/datepickerV2.js
@@ -170,8 +170,8 @@ export const datePickerV2Config = {
   styles: {
     labelColor: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -222,31 +222,31 @@ export const datePickerV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -262,7 +262,7 @@ export const datePickerV2Config = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -334,23 +334,23 @@ export const datePickerV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       alignment: { value: 'side' },
       direction: { value: 'left' },
       labelWidth: { value: '20' },
       auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       icon: { value: 'IconCalendarEvent' },
       iconVisibility: { value: true },
       iconDirection: { value: 'left' },
       fieldBorderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/daterangepicker.js b/server/src/modules/apps/services/widget-config/daterangepicker.js
index 2fcd5bfb42..ac81dcea58 100644
--- a/server/src/modules/apps/services/widget-config/daterangepicker.js
+++ b/server/src/modules/apps/services/widget-config/daterangepicker.js
@@ -200,7 +200,7 @@ export const daterangepickerConfig = {
   styles: {
     labelColor: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
+      displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -264,7 +264,7 @@ export const daterangepickerConfig = {
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
@@ -292,7 +292,7 @@ export const daterangepickerConfig = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -372,7 +372,7 @@ export const daterangepickerConfig = {
       auto: { value: '{{true}}' },
       fieldBackgroundColor: { value: '#fff' },
       fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
       selectedTextColor: { value: '#1B1F24' },
       errTextColor: { value: '#E54D2E' },
       icon: { value: 'IconCalendarMonth' },
@@ -381,7 +381,7 @@ export const daterangepickerConfig = {
       borderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/datetimepickerV2.js b/server/src/modules/apps/services/widget-config/datetimepickerV2.js
index 658cc31c01..a737486e3b 100644
--- a/server/src/modules/apps/services/widget-config/datetimepickerV2.js
+++ b/server/src/modules/apps/services/widget-config/datetimepickerV2.js
@@ -215,8 +215,8 @@ export const datetimePickerV2Config = {
   styles: {
     labelColor: {
       type: 'colorSwatches',
-      displayName: 'colorSwatches',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -267,31 +267,31 @@ export const datetimePickerV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -307,7 +307,7 @@ export const datetimePickerV2Config = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -385,23 +385,23 @@ export const datetimePickerV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       alignment: { value: 'side' },
       direction: { value: 'left' },
       labelWidth: { value: '20' },
       auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       icon: { value: 'IconCalendarTime' },
       iconVisibility: { value: true },
       iconDirection: { value: 'left' },
       fieldBorderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/divider.js b/server/src/modules/apps/services/widget-config/divider.js
index 1c173fd54d..378ca06a02 100644
--- a/server/src/modules/apps/services/widget-config/divider.js
+++ b/server/src/modules/apps/services/widget-config/divider.js
@@ -1,6 +1,6 @@
 export const dividerConfig = {
   name: 'HorizontalDivider',
-  displayName: 'Horizontal Divider',
+  displayName: 'Horizontal divider',
   description: 'Separator between components',
   component: 'Divider',
   defaultSize: {
@@ -65,11 +65,11 @@ export const dividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-default-border)',
       },
       accordian: 'Divider',
     },
@@ -89,8 +89,8 @@ export const dividerConfig = {
       type: 'switch',
       displayName: 'Label alignment',
       validation: { schema: { type: 'string' }, defaultValue: 'left' },
-      isIcon: true,
       showLabel: true,
+      isIcon: true,
       options: [
         { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
         { displayName: 'alignhorizontalcenter', value: 'center', iconName: 'alignhorizontalcenter' },
@@ -100,7 +100,7 @@ export const dividerConfig = {
       isFxNotRequired: true,
     },
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Label Color',
       validation: {
         schema: { type: 'string' },
@@ -146,10 +146,10 @@ export const dividerConfig = {
     },
     events: [],
     styles: {
-      dividerColor: { value: '#CCD1D5' },
+      dividerColor: { value: 'var(--cc-default-border)' },
       labelAlignment: { value: 'center' },
       dividerStyle: { value: 'solid' },
-      labelColor: { value: '#6A727C' },
+      labelColor: { value: 'var(--cc-placeholder-text)' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
     },
diff --git a/server/src/modules/apps/services/widget-config/dropdown.js b/server/src/modules/apps/services/widget-config/dropdown.js
index b8b090af24..d4424e23fb 100644
--- a/server/src/modules/apps/services/widget-config/dropdown.js
+++ b/server/src/modules/apps/services/widget-config/dropdown.js
@@ -134,7 +134,7 @@ export const dropdownConfig = {
         schema: {
           type: 'string',
         },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     disabledState: {
@@ -200,6 +200,7 @@ export const dropdownConfig = {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       justifyContent: { value: 'left' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/dropdownV2.js b/server/src/modules/apps/services/widget-config/dropdownV2.js
index d7534b25a8..473985efbe 100644
--- a/server/src/modules/apps/services/widget-config/dropdownV2.js
+++ b/server/src/modules/apps/services/widget-config/dropdownV2.js
@@ -127,7 +127,7 @@ export const dropdownV2Config = {
     labelColor: {
       type: 'colorSwatches',
       displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -179,31 +179,31 @@ export const dropdownV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -335,14 +335,14 @@ export const dropdownV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       labelWidth: { value: '33' },
       auto: { value: '{{true}}' },
       fieldBorderRadius: { value: '6' },
-      selectedTextColor: { value: '#1B1F24' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      errTextColor: { value: '#D72D39' },
-      fieldBackgroundColor: { value: '#fff' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
       direction: { value: 'left' },
       alignment: { value: 'side' },
       padding: { value: 'default' },
@@ -350,7 +350,7 @@ export const dropdownV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/emailinput.js b/server/src/modules/apps/services/widget-config/emailinput.js
index 825340616f..25f83722ba 100644
--- a/server/src/modules/apps/services/widget-config/emailinput.js
+++ b/server/src/modules/apps/services/widget-config/emailinput.js
@@ -80,9 +80,9 @@ export const emailinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -132,33 +132,33 @@ export const emailinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -169,9 +169,9 @@ export const emailinputConfig = {
       visibility: true,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -271,17 +271,17 @@ export const emailinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CCD1D5' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/server/src/modules/apps/services/widget-config/filepicker.js b/server/src/modules/apps/services/widget-config/filepicker.js
index 8df492daa5..0854d156cf 100644
--- a/server/src/modules/apps/services/widget-config/filepicker.js
+++ b/server/src/modules/apps/services/widget-config/filepicker.js
@@ -16,86 +16,72 @@ export const filepickerConfig = {
       handle: 'clearFiles',
       displayName: 'Clear Files',
     },
+    {
+      handle: 'setFileName',
+      displayName: 'Set File Name',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set Visibility',
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set Loading',
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set Disable',
+    },
   ],
   properties: {
-    instructionText: {
+    label: {
       type: 'code',
-      displayName: 'Instruction text',
+      displayName: 'Label',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'Instruction text',
+        defaultValue: 'Label',
       },
+      accordian: 'Data',
+    },
+    instructionText: {
+      type: 'code',
+      displayName: 'Placeholder',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'Drag and drop files or click here to upload',
+      },
+      accordian: 'Data',
     },
     enableDropzone: {
-      type: 'code',
+      type: 'toggle',
       displayName: 'Use drop zone',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    enablePicker: {
-      type: 'code',
-      displayName: 'Use file picker',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    enableMultiple: {
-      type: 'code',
-      displayName: 'Pick multiple files',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      accordian: 'Data',
     },
-    maxFileCount: {
-      type: 'code',
-      displayName: 'Max file count',
+    enablePicker: {
+      type: 'toggle',
+      displayName: 'Use file picker',
       validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 2,
+        schema: { type: 'boolean' },
+        defaultValue: false,
       },
+      accordian: 'Data',
     },
-    fileType: {
-      type: 'code',
-      displayName: 'Accept file types',
+    enableMultiple: {
+      type: 'toggle',
+      displayName: 'Allow picking multiple files',
       validation: {
-        schema: {
-          type: 'string',
-        },
-        defaultValue: 'image/*',
-      },
-    },
-    maxSize: {
-      type: 'code',
-      displayName: 'Max size limit (Bytes)',
-      validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 1048576,
-      },
-    },
-    minSize: {
-      type: 'code',
-      displayName: 'Min size limit (Bytes)',
-      validation: {
-        schema: {
-          type: 'union',
-          schemas: [{ type: 'string' }, { type: 'number' }],
-        },
-        defaultValue: 50,
+        schema: { type: 'boolean' },
+        defaultValue: false,
       },
+      accordian: 'Data',
     },
     parseContent: {
       type: 'toggle',
-      displayName: 'Parse content',
+      displayName: 'Enable parsing',
       validation: {
         schema: {
           type: 'boolean',
@@ -122,26 +108,52 @@ export const filepickerConfig = {
         defaultValue: 'auto-detect',
       },
     },
-  },
-  events: {
-    onFileSelected: { displayName: 'On File Selected' },
-    onFileLoaded: { displayName: 'On File Loaded' },
-    onFileDeselected: { displayName: 'On File Deselected' },
-  },
-  styles: {
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Show loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
     visibility: {
       type: 'toggle',
       displayName: 'Visibility',
+      section: 'additionalActions',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
+        schema: { type: 'boolean' },
         defaultValue: true,
       },
     },
     disabledState: {
       type: 'toggle',
       displayName: 'Disable',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '',
+      },
+    },
+  },
+  events: {
+    onFileSelected: { displayName: 'On File Selected' },
+    onFileLoaded: { displayName: 'On File Loaded' },
+    onFileDeselected: { displayName: 'On File Deselected' },
+  },
+  validation: {
+    enableValidation: {
+      type: 'toggle',
+      displayName: 'Make this field mandatory',
       validation: {
         schema: {
           type: 'boolean',
@@ -149,21 +161,120 @@ export const filepickerConfig = {
         defaultValue: false,
       },
     },
-    borderRadius: {
+    fileType: {
       type: 'code',
-      displayName: 'Border radius',
+      displayName: 'Accept file types',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'image/*',
+      },
+    },
+    minSize: {
+      type: 'code',
+      displayName: 'Min size limit (Bytes)',
       validation: {
         schema: {
           type: 'union',
           schemas: [{ type: 'string' }, { type: 'number' }],
         },
-        defaultValue: 4,
+        defaultValue: 50,
+      },
+    },
+    maxSize: {
+      type: 'code',
+      displayName: 'Max size limit (Bytes)',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 1048576,
+      },
+    },
+    minFileCount: {
+      type: 'code',
+      displayName: 'Min file count',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 2,
+      },
+    },
+    maxFileCount: {
+      type: 'code',
+      displayName: 'Max file count',
+      validation: {
+        schema: {
+          type: 'union',
+          schemas: [{ type: 'string' }, { type: 'number' }],
+        },
+        defaultValue: 2,
       },
     },
   },
+  styles: {
+    dropzoneTitleColor: {
+      type: 'colorSwatches',
+      displayName: 'Title',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    dropzoneActiveColor: {
+      type: 'colorSwatches',
+      displayName: 'Active color',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    dropzoneErrorColor: {
+      type: 'colorSwatches',
+      displayName: 'Error color',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'File Drop Area',
+    },
+    containerBackgroundColor: {
+      type: 'colorSwatches',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: false },
+      accordian: 'Container',
+    },
+    containerBorder: {
+      type: 'colorSwatches',
+      displayName: 'Border',
+      validation: { schema: { type: 'string' }, defaultValue: 'transparent' },
+      accordian: 'Container',
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border Radius',
+      validation: { schema: { type: 'number' }, defaultValue: 6 },
+      accordian: 'Container',
+    },
+    containerBoxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box shadow',
+      validation: { schema: { type: 'string' }, defaultValue: '0px 1px 3px rgba(0,0,0,0.1)' },
+      accordian: 'Container',
+    },
+    containerPadding: {
+      type: 'numberInput',
+      displayName: 'Padding',
+      validation: { schema: { type: 'string' }, defaultValue: 16 },
+      accordian: 'Container',
+    },
+  },
   exposedVariables: {
-    file: [{ name: '', content: '', dataURL: '', type: '', parsedData: '' }],
+    file: [{ name: '', content: '', dataURL: '', type: '', parsedValue: null }],
     isParsing: false,
+    isValid: true,
+    fileSize: 0,
+    isMandatory: false,
+    isLoading: false,
+    isVisible: true,
+    isDisabled: false,
   },
   definition: {
     others: {
@@ -171,22 +282,44 @@ export const filepickerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      label: { value: 'Upload files' },
       instructionText: { value: 'Drag and drop files here or click to select files' },
       enableDropzone: { value: '{{true}}' },
       enablePicker: { value: '{{true}}' },
-      maxFileCount: { value: '{{2}}' },
       enableMultiple: { value: '{{false}}' },
-      fileType: { value: '{{"image/*"}}' },
-      maxSize: { value: '{{1048576}}' },
-      minSize: { value: '{{50}}' },
       parseContent: { value: '{{false}}' },
       parseFileType: { value: 'auto-detect' },
+      loadingState: { value: '{{false}}' },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
-      borderRadius: { value: '{{4}}' },
+      borderRadius: { value: '{{6}}' },
+      dropzoneTitleColor: { value: 'var(--cc-primary-text)' },
+      dropzoneActiveColor: { value: 'var(--cc-primary-brand)' },
+      dropzoneErrorColor: { value: 'var(--cc-error-systemStatus)' },
+      containerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      containerBorder: { value: 'var(--cc-default-border)' },
+      containerBoxShadow: { value: '0px 1px 3px rgba(0,0,0,0.1)' },
+      containerPadding: { value: '16px' },
+    },
+    validation: {
+      enableValidation: { value: '{{false}}' },
+      fileType: { value: '{{}}' },
+      minSize: { value: '{{50}}' },
+      maxSize: { value: '{{51200000}}' },
+      minFileCount: { value: '{{0}}' },
+      maxFileCount: { value: '{{2}}' },
+    },
+    validation: {
+      enableValidation: { value: '{{false}}' },
+      fileType: { value: '{{}}' },
+      minSize: { value: '{{50}}' },
+      maxSize: { value: '{{51200000}}' },
+      minFileCount: { value: '{{0}}' },
+      maxFileCount: { value: '{{2}}' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/form.js b/server/src/modules/apps/services/widget-config/form.js
index 7c558a73e8..04ef729aa6 100644
--- a/server/src/modules/apps/services/widget-config/form.js
+++ b/server/src/modules/apps/services/widget-config/form.js
@@ -3,7 +3,7 @@ export const formConfig = {
   displayName: 'Form',
   description: 'Wrapper for multiple components',
   defaultSize: {
-    width: 13,
+    width: 15,
     height: 450,
   },
   defaultChildren: [
@@ -17,12 +17,13 @@ export const formConfig = {
       },
       properties: ['text'],
       accessorKey: 'text',
-      styles: ['fontWeight', 'textSize', 'textColor'],
+      styles: ['fontWeight', 'textSize', 'textColor', 'boxShadow'],
       defaultValue: {
         text: 'Form title',
         textSize: 16,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
         fontWeight: 'bold',
+        boxShadow: '0px 0px 0px 0px #00000090',
       },
     },
     {
@@ -40,46 +41,6 @@ export const formConfig = {
         padding: 'none',
       },
     },
-    {
-      componentName: 'TextInput',
-      layout: {
-        top: 20,
-        left: 1,
-        height: 40,
-        width: 41,
-      },
-      properties: ['placeholder', 'label'],
-      styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
-      defaultValue: {
-        placeholder: 'Enter your name',
-        label: 'Name',
-        width: '{{60}}',
-        direction: 'left',
-        alignment: 'side',
-        auto: '{{false}}',
-        padding: 'default',
-      },
-    },
-    {
-      componentName: 'NumberInput',
-      layout: {
-        top: 80,
-        left: 1,
-        height: 40,
-        width: 41,
-      },
-      properties: ['placeholder', 'label'],
-      styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
-      defaultValue: {
-        placeholder: 'Age',
-        label: 'Age',
-        width: '{{60}}',
-        direction: 'left',
-        alignment: 'side',
-        auto: '{{false}}',
-        padding: 'default',
-      },
-    },
   ],
   component: 'Form',
   others: {
@@ -87,9 +48,11 @@ export const formConfig = {
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    showHeader: { type: 'toggle', displayName: 'Header' },
+    showFooter: { type: 'toggle', displayName: 'Footer' },
     buttonToSubmit: {
       type: 'select',
-      displayName: 'Button to submit form',
+      displayName: 'Submit button',
       options: [{ name: 'None', value: 'none' }],
       validation: {
         schema: { type: 'string' },
@@ -100,6 +63,65 @@ export const formConfig = {
         value: false,
       },
     },
+    generateFormFrom: {
+      type: 'dropdownMenu',
+      displayName: 'Generate form from',
+      options: [
+        { name: 'Raw JSON', value: 'rawJson' },
+        { name: 'JSON schema', value: 'jsonSchema' },
+      ],
+      section: 'data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'object' }] } },
+      newLine: true,
+    },
+    JSONData: {
+      type: 'code',
+      displayName: '',
+      conditionallyRender: {
+        key: 'generateFormFrom',
+        value: 'rawJson',
+      },
+      section: 'data',
+      showLabel: false,
+      validation: {
+        schema: { type: 'object' },
+      },
+    },
+    newJsonSchema: {
+      type: 'code',
+      displayName: '',
+      conditionallyRender: {
+        key: 'generateFormFrom',
+        value: 'jsonSchema',
+      },
+      section: 'data',
+      showLabel: false,
+      validation: {
+        schema: { type: 'object' },
+      },
+    },
+    fields: {
+      type: 'array',
+      displayName: 'Table Columns',
+    },
+    validateOnSubmit: {
+      type: 'toggle',
+      displayName: 'Validate all fields on submission',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    resetOnSubmit: {
+      type: 'toggle',
+      displayName: 'Reset form on submission',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -109,20 +131,29 @@ export const formConfig = {
         defaultValue: false,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     advanced: {
       type: 'toggle',
       displayName: ' Use custom schema',
+      section: 'deprecated',
     },
     JSONSchema: {
       type: 'code',
       displayName: 'JSON Schema',
+      section: 'deprecated',
       conditionallyRender: {
         key: 'advanced',
         value: true,
       },
     },
-    showHeader: { type: 'toggle', displayName: 'Header' },
-    showFooter: { type: 'toggle', displayName: 'Footer' },
     headerHeight: {
       type: 'numberInput',
       displayName: 'Header height',
@@ -173,19 +204,19 @@ export const formConfig = {
   },
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     footerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Footer background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     backgroundColor: {
@@ -254,25 +285,39 @@ export const formConfig = {
     },
     properties: {
       loadingState: { value: '{{false}}' },
+      dynamicHeight: { value: '{{false}}' },
       advanced: { value: '{{false}}' },
       JSONSchema: {
         value:
           "{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
       },
+      newJsonSchema: {
+        value:
+          "{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
+      },
       showHeader: { value: '{{true}}' },
       showFooter: { value: '{{true}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       headerHeight: { value: 60 },
       footerHeight: { value: 60 },
+      validateOnSubmit: { value: '{{true}}' },
+      resetOnSubmit: { value: '{{true}}' },
+      generateFormFrom: '',
+      fields: {
+        value: [],
+      },
+      JSONData: {
+        value: undefined,  
+      }
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      footerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       borderRadius: { value: '0' },
-      borderColor: { value: '#fff' },
-      headerBackgroundColor: { value: '#fff' },
-      footerBackgroundColor: { value: '#fff' },
+      borderColor: { value: 'var(--cc-default-border)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/image.js b/server/src/modules/apps/services/widget-config/image.js
index ca74e31d12..ead4078270 100644
--- a/server/src/modules/apps/services/widget-config/image.js
+++ b/server/src/modules/apps/services/widget-config/image.js
@@ -157,7 +157,7 @@ export const imageConfig = {
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
       accordian: 'Container',
     },
@@ -258,7 +258,7 @@ export const imageConfig = {
     styles: {
       imageFit: { value: 'contain' },
       imageShape: { value: 'none' },
-      backgroundColor: { value: '#FFFFFF' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       borderColor: { value: '' },
       borderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
diff --git a/server/src/modules/apps/services/widget-config/kanban.js b/server/src/modules/apps/services/widget-config/kanban.js
index cd39d0bd7b..8574d72eb5 100644
--- a/server/src/modules/apps/services/widget-config/kanban.js
+++ b/server/src/modules/apps/services/widget-config/kanban.js
@@ -157,7 +157,7 @@ export const kanbanConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
-      accentColor: { value: 'var(--primary-brand)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/link.js b/server/src/modules/apps/services/widget-config/link.js
index 16d5f13368..ba50ae50a4 100644
--- a/server/src/modules/apps/services/widget-config/link.js
+++ b/server/src/modules/apps/services/widget-config/link.js
@@ -78,7 +78,7 @@ export const linkConfig = {
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--cc-primary-brand)',
       },
       accordian: 'Link text',
     },
@@ -216,7 +216,7 @@ export const linkConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#4368E3' },
+      textColor: { value: 'var(--cc-primary-brand)' },
       textSize: { value: '{{14}}' },
       underline: { value: 'on-hover' },
       verticalAlignment: { value: 'center' },
diff --git a/server/src/modules/apps/services/widget-config/listview.js b/server/src/modules/apps/services/widget-config/listview.js
index c3ebdcfa19..4ca2bd0e52 100644
--- a/server/src/modules/apps/services/widget-config/listview.js
+++ b/server/src/modules/apps/services/widget-config/listview.js
@@ -61,6 +61,15 @@ export const listviewConfig = {
         defaultValue: "[{text: 'Sample text 1'}]",
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     mode: {
       type: 'select',
       displayName: 'Mode',
@@ -132,15 +141,15 @@ export const listviewConfig = {
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#fff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     borderColor: {
       type: 'colorSwatches',
-      displayName: 'Border color',
+      displayName: 'Border',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#dadcde',
+        defaultValue: 'var(--cc-default-border)',
       },
     },
     visibility: {
@@ -189,6 +198,7 @@ export const listviewConfig = {
       rowHeight: {
         value: '100',
       },
+      dynamicHeight: { value: '{{false}}' },
       visible: { value: '{{true}}' },
       showBorder: { value: '{{true}}' },
       rowsPerPage: { value: '{{10}}' },
@@ -196,8 +206,8 @@ export const listviewConfig = {
     },
     events: [],
     styles: {
-      backgroundColor: { value: '#fff' },
-      borderColor: { value: '#dadcde' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       borderRadius: { value: '{{4}}' },
diff --git a/server/src/modules/apps/services/widget-config/modal.js b/server/src/modules/apps/services/widget-config/modal.js
index 3443c73c9b..90182b6494 100644
--- a/server/src/modules/apps/services/widget-config/modal.js
+++ b/server/src/modules/apps/services/widget-config/modal.js
@@ -85,7 +85,7 @@ export const modalConfig = {
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     headerTextColor: {
@@ -93,7 +93,7 @@ export const modalConfig = {
       displayName: 'Header title color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     bodyBackgroundColor: {
@@ -101,7 +101,7 @@ export const modalConfig = {
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     disabledState: {
@@ -170,12 +170,12 @@ export const modalConfig = {
     },
     events: [],
     styles: {
-      headerBackgroundColor: { value: '#ffffffff' },
-      headerTextColor: { value: '#000000' },
-      bodyBackgroundColor: { value: '#ffffffff' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      headerTextColor: { value: 'var(--cc-primary-text)' },
+      bodyBackgroundColor: { value: 'var(--cc-surface1-surface)' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
+      triggerButtonBackgroundColor: { value: 'var(--cc-primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/modalV2.js b/server/src/modules/apps/services/widget-config/modalV2.js
index 2318a986f8..a9c95ce2e4 100644
--- a/server/src/modules/apps/services/widget-config/modalV2.js
+++ b/server/src/modules/apps/services/widget-config/modalV2.js
@@ -116,7 +116,7 @@ export const modalV2Config = {
       defaultValue: {
         text: 'Modal title',
         textSize: 20,
-        textColor: '#000',
+        textColor: 'var(--cc-primary-text)',
       },
     },
     {
@@ -129,11 +129,30 @@ export const modalV2Config = {
       },
       displayName: 'ModalFooterCancel',
       properties: ['text'],
-      styles: ['type', 'borderColor', 'padding'],
+      styles: [
+        'textColor',
+        'loaderColor',
+        'iconColor',
+        'borderRadius',
+        'iconVisibility',
+        'direction',
+        'icon',
+        'type',
+        'borderColor',
+        'padding',
+      ],
       defaultValue: {
+        textColor: '#000000',
+        loaderColor: 'var(--cc-surface1-surface)',
+        icon: 'IconAlignBoxBottomLeft',
         text: 'Button1',
         type: 'outline',
         borderColor: '#CCD1D5',
+        iconColor: 'var(--cc-default-icon)',
+        borderRadius: 6,
+        iconVisibility: false,
+        direction: 'left',
+        padding: 'default',
       },
     },
     {
@@ -154,31 +173,31 @@ export const modalV2Config = {
   ],
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     footerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Footer background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     bodyBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#ffffffff',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
     },
     triggerButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button background color',
       validation: {
         schema: { type: 'string' },
@@ -186,7 +205,7 @@ export const modalV2Config = {
       },
     },
     triggerButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button text color',
       validation: {
         schema: { type: 'string' },
@@ -255,10 +274,10 @@ export const modalV2Config = {
     },
     events: [],
     styles: {
-      headerBackgroundColor: { value: '#ffffffff' },
-      footerBackgroundColor: { value: '#ffffffff' },
-      bodyBackgroundColor: { value: '#ffffffff' },
-      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      headerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      footerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      bodyBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      triggerButtonBackgroundColor: { value: 'var(--cc-primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js
index c9d89045aa..161f7bba83 100644
--- a/server/src/modules/apps/services/widget-config/multiselectV2.js
+++ b/server/src/modules/apps/services/widget-config/multiselectV2.js
@@ -197,7 +197,7 @@ export const multiselectV2Config = {
     labelColor: {
       type: 'colorSwatches',
       displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -250,32 +250,32 @@ export const multiselectV2Config = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
 
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -384,14 +384,14 @@ export const multiselectV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       labelWidth: { value: '33' },
       auto: { value: '{{true}}' },
       fieldBorderRadius: { value: '6' },
-      selectedTextColor: { value: '#1B1F24' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      errTextColor: { value: '#D72D39' },
-      fieldBackgroundColor: { value: '#fff' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
       direction: { value: 'left' },
       alignment: { value: 'side' },
       padding: { value: 'default' },
@@ -399,7 +399,7 @@ export const multiselectV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: 'var(--primary-brand)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/numberinput.js b/server/src/modules/apps/services/widget-config/numberinput.js
index cba9c04cd1..261fad96e8 100644
--- a/server/src/modules/apps/services/widget-config/numberinput.js
+++ b/server/src/modules/apps/services/widget-config/numberinput.js
@@ -74,7 +74,7 @@ export const numberinputConfig = {
     color: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -126,31 +126,31 @@ export const numberinputConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -163,7 +163,7 @@ export const numberinputConfig = {
     iconColor: {
       type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -277,13 +277,13 @@ export const numberinputConfig = {
     events: [],
     styles: {
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: 'var(--primary-brand)' },
-      errTextColor: { value: '#D72D39' },
-      textColor: { value: '#1B1F24' },
-      color: { value: '#1B1F24' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      color: { value: 'var(--cc-primary-text)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
diff --git a/server/src/modules/apps/services/widget-config/passwordinput.js b/server/src/modules/apps/services/widget-config/passwordinput.js
index fad0d00735..839bb01732 100644
--- a/server/src/modules/apps/services/widget-config/passwordinput.js
+++ b/server/src/modules/apps/services/widget-config/passwordinput.js
@@ -86,7 +86,7 @@ export const passinputConfig = {
     color: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -138,31 +138,31 @@ export const passinputConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
-      accordian: 'field',
-    },
-    accentColor: {
-      type: 'colorSwatches',
-      displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
+      accordian: 'field',
+    },
+    accentColor: {
+      type: 'colorSwatches',
+      displayName: 'Accent',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -175,7 +175,7 @@ export const passinputConfig = {
     iconColor: {
       type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -276,16 +276,16 @@ export const passinputConfig = {
     events: [],
     styles: {
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: 'var(--primary-brand)' },
-      errTextColor: { value: '#D72D39' },
-      textColor: { value: '#1B1F24' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/server/src/modules/apps/services/widget-config/phoneinput.js b/server/src/modules/apps/services/widget-config/phoneinput.js
index 83e35ffc68..617d72738f 100644
--- a/server/src/modules/apps/services/widget-config/phoneinput.js
+++ b/server/src/modules/apps/services/widget-config/phoneinput.js
@@ -85,9 +85,9 @@ export const phoneinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -137,33 +137,33 @@ export const phoneinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     borderRadius: {
@@ -270,16 +270,16 @@ export const phoneinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/server/src/modules/apps/services/widget-config/radioButtonV2.js b/server/src/modules/apps/services/widget-config/radioButtonV2.js
index 62a084d75a..3ae1fb5e65 100644
--- a/server/src/modules/apps/services/widget-config/radioButtonV2.js
+++ b/server/src/modules/apps/services/widget-config/radioButtonV2.js
@@ -279,16 +279,16 @@ export const radiobuttonV2Config = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#11181C' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       direction: { value: 'left' },
       alignment: { value: 'side' },
       auto: { value: '{{false}}' },
       labelWidth: { value: '20' },
-      borderColor: { value: '#FFFFFF' },
-      switchOffBackgroundColor: { value: '#FFFFFF' },
-      switchOnBackgroundColor: { value: '#4368E3' },
-      handleColor: { value: '#FFFFFF' },
-      optionsTextColor: { value: '#11181C' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      switchOffBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      switchOnBackgroundColor: { value: 'var(--cc-primary-brand)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
+      optionsTextColor: { value: 'var(--cc-primary-text)' },
       padding: { value: 'default' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/radiobutton.js b/server/src/modules/apps/services/widget-config/radiobutton.js
index 66d055ca5e..cb8f086b19 100644
--- a/server/src/modules/apps/services/widget-config/radiobutton.js
+++ b/server/src/modules/apps/services/widget-config/radiobutton.js
@@ -57,7 +57,7 @@ export const radiobuttonConfig = {
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     activeColor: {
@@ -65,7 +65,7 @@ export const radiobuttonConfig = {
       displayName: 'Active color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     visibility: {
@@ -112,8 +112,8 @@ export const radiobuttonConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '' },
-      activeColor: { value: 'var(--primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      activeColor: { value: 'var(--cc-primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/rangeslider.js b/server/src/modules/apps/services/widget-config/rangeslider.js
index 186ae7fbc7..00531a9a90 100644
--- a/server/src/modules/apps/services/widget-config/rangeslider.js
+++ b/server/src/modules/apps/services/widget-config/rangeslider.js
@@ -12,9 +12,25 @@ export const rangeSliderConfig = {
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    enableTwoHandle: {
+      type: 'switch',
+      displayName: 'Slider type',
+      options: [
+        { displayName: 'Slider', value: 'slider' },
+        { displayName: 'Range slider', value: 'rangeSlider' },
+      ],
+      isFxNotRequired: true,
+      defaultValue: { value: 'slider' },
+      fullWidth: true,
+    },
+    label: {
+      type: 'code',
+      displayName: 'Label',
+      validation: { schema: { type: 'string' }, defaultValue: 'Label' },
+    },
     min: {
       type: 'number',
-      displayName: 'Min',
+      displayName: 'Min value',
       validation: {
         schema: { type: 'number' },
         defaultValue: 0,
@@ -22,67 +38,216 @@ export const rangeSliderConfig = {
     },
     max: {
       type: 'number',
-      displayName: 'Max',
+      displayName: 'Max value',
       validation: {
         schema: { type: 'number' },
         defaultValue: 100,
       },
     },
     value: {
-      type: 'code',
-      displayName: 'Value',
+      type: 'number',
+      displayName: 'Default value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'slider',
+      },
+
       validation: {
         schema: {
-          type: 'union',
-          schemas: [{ type: 'array', element: { type: 'number' } }, { type: 'number' }],
+          schema: { type: 'number' },
+          defaultValue: 50,
         },
-        defaultValue: 50,
       },
     },
-    enableTwoHandle: {
+    startValue: {
+      type: 'number',
+      displayName: 'Default start value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'rangeSlider',
+      },
+
+      validation: {
+        schema: {
+          schema: { type: 'number' },
+          defaultValue: 50,
+        },
+      },
+    },
+    endValue: {
+      type: 'number',
+      displayName: 'Default end value',
+      conditionallyRender: {
+        key: 'enableTwoHandle',
+        value: 'rangeSlider',
+      },
+
+      validation: {
+        schema: {
+          schema: { type: 'number' },
+          defaultValue: 80,
+        },
+      },
+    },
+    stepSize: {
+      type: 'number',
+      displayName: 'Step size',
+      validation: {
+        schema: { type: 'number' },
+        defaultValue: 1,
+      },
+    },
+    schema: {
+      type: 'code',
+      displayName: 'Set marks',
+    },
+    loadingState: {
       type: 'toggle',
-      displayName: 'Two handles',
+      displayName: 'Show loading state',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
       },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
     },
   },
   events: {
     onChange: { displayName: 'On change' },
   },
   styles: {
+    color: {
+      type: 'colorSwatches',
+      displayName: 'Color',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'label',
+    },
+    alignment: {
+      type: 'switch',
+      displayName: 'Alignment',
+      validation: { schema: { type: 'string' }, defaultValue: 'side' },
+      options: [
+        { displayName: 'Side', value: 'side' },
+        { displayName: 'Top', value: 'top' },
+      ],
+      accordian: 'label',
+    },
+    direction: {
+      type: 'switch',
+      displayName: '',
+      validation: { schema: { type: 'string' }, defaultValue: 'left' },
+      showLabel: false,
+      isIcon: true,
+      options: [
+        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+      ],
+      accordian: 'label',
+      isFxNotRequired: true,
+    },
+    width: {
+      type: 'slider',
+      displayName: 'Width',
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    auto: {
+      type: 'checkbox',
+      displayName: 'auto',
+      showLabel: false,
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
     lineColor: {
       type: 'colorSwatches',
-      displayName: 'Line color',
+      displayName: 'Track',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
-      },
-    },
-    handleColor: {
-      type: 'colorSwatches',
-      displayName: 'Handle color',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: '#E4E7EB',
       },
+      accordian: 'slider',
     },
     trackColor: {
       type: 'colorSwatches',
-      displayName: 'Track color',
+      displayName: 'Accent',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
       },
+      accordian: 'slider',
     },
-    visibility: {
-      type: 'code',
-      displayName: 'Visibility',
+    handleColor: {
+      type: 'colorSwatches',
+      displayName: 'Handle',
       validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
+        schema: { type: 'string' },
+        defaultValue: '#FFFFFF',
       },
+      accordian: 'slider',
+    },
+    handleBorderColor: {
+      type: 'colorSwatches',
+      displayName: 'Handle border',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ACB2B9',
+      },
+      accordian: 'slider',
+    },
+    markerLabel: {
+      type: 'colorSwatches',
+      displayName: 'Marker label',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'slider',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
+      isFxNotRequired: true,
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'container',
     },
     padding: {
       type: 'switch',
@@ -100,13 +265,52 @@ export const rangeSliderConfig = {
   },
   exposedVariables: {
     value: null,
+    label: 'Label',
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
   },
+  actions: [
+    {
+      handle: 'setValue',
+      displayName: 'Set value',
+      params: [{ handle: 'num1', displayName: 'Value', defaultValue: 'New value' }],
+    },
+    {
+      handle: 'setRangeValue',
+      displayName: 'Set range value',
+      params: [
+        { handle: 'num1', displayName: 'Min value' },
+        { handle: 'num2', displayName: 'Max value' },
+      ],
+    },
+    {
+      handle: 'reset',
+      displayName: 'Reset',
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
   definition: {
     others: {
       showOnDesktop: { value: true },
       showOnMobile: { value: false },
     },
     properties: {
+      label: { value: 'Label' },
       min: {
         value: '{{0}}',
       },
@@ -116,13 +320,37 @@ export const rangeSliderConfig = {
       value: {
         value: '{{50}}',
       },
-      enableTwoHandle: { value: false },
+      startValue: {
+        value: '{{50}}',
+      },
+      endValue: {
+        value: '{{80}}',
+      },
+      enableTwoHandle: { value: 'slider' },
+      stepSize: {
+        value: '{{1}}',
+      },
+      schema: {
+        value: "{{[\t{label: '25%',value: 25},{label: '50%',value: 50},{label: '75%',value: 75}\t]}}",
+      },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      loadingState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      lineColor: { value: '' },
-      handleColor: { value: '' },
-      trackColor: { value: 'var(--primary-brand)' },
+      lineColor: { value: 'var(--cc-surface3-surface)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
+      handleBorderColor: { value: 'var(--cc-default-border)' },
+      trackColor: { value: 'var(--cc-primary-brand)' },
+      markerLabel: { value: 'var(--cc-primary-text)' },
+      direction: { value: 'left' },
+      width: { value: '{{33}}' },
+      alignment: { value: 'side' },
+      color: { value: 'var(--cc-primary-text)' },
+      auto: { value: '{{true}}' },
+      padding: { value: 'default' },
       visibility: { value: '{{true}}' },
       padding: { value: 'default' },
     },
diff --git a/server/src/modules/apps/services/widget-config/richtextarea.js b/server/src/modules/apps/services/widget-config/richtextarea.js
index c964d53d6b..8580f2b56a 100644
--- a/server/src/modules/apps/services/widget-config/richtextarea.js
+++ b/server/src/modules/apps/services/widget-config/richtextarea.js
@@ -37,6 +37,15 @@ export const richtextareaConfig = {
       },
       section: 'additionalActions',
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
   },
   events: {},
   styles: {
@@ -95,6 +104,7 @@ export const richtextareaConfig = {
       placeholder: { value: 'Placeholder text' },
       defaultValue: { value: '' },
       loadingState: { value: `{{false}}` },
+      dynamicHeight: { value: '{{false}}' },
     },
     events: [],
     styles: {
diff --git a/server/src/modules/apps/services/widget-config/spinner.js b/server/src/modules/apps/services/widget-config/spinner.js
index c38bfdc468..c2e91199f0 100644
--- a/server/src/modules/apps/services/widget-config/spinner.js
+++ b/server/src/modules/apps/services/widget-config/spinner.js
@@ -27,7 +27,7 @@ export const spinnerConfig = {
       displayName: 'Colour',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
     },
     size: {
@@ -54,7 +54,7 @@ export const spinnerConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       size: { value: 'sm' },
-      colour: { value: 'var(--primary-brand)' },
+      colour: { value: 'var(--cc-primary-brand)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/starrating.js b/server/src/modules/apps/services/widget-config/starrating.js
index fd2dce59d9..333feba8bc 100644
--- a/server/src/modules/apps/services/widget-config/starrating.js
+++ b/server/src/modules/apps/services/widget-config/starrating.js
@@ -70,7 +70,7 @@ export const starratingConfig = {
       displayName: 'Label color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-primary-text)',
       },
     },
     visibility: {
@@ -122,7 +122,7 @@ export const starratingConfig = {
     events: [],
     styles: {
       textColor: { value: '#ffb400' },
-      labelColor: { value: '' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       padding: { value: 'default' },
diff --git a/server/src/modules/apps/services/widget-config/statistics.js b/server/src/modules/apps/services/widget-config/statistics.js
index ecf1f70aed..dbe58f7cfe 100644
--- a/server/src/modules/apps/services/widget-config/statistics.js
+++ b/server/src/modules/apps/services/widget-config/statistics.js
@@ -57,22 +57,22 @@ export const statisticsConfig = {
     primaryLabelColour: {
       type: 'colorSwatches',
       displayName: 'Primary label colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
     },
     primaryTextColour: {
       type: 'colorSwatches',
       displayName: 'Primary text  colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#000000' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
     },
     secondaryLabelColour: {
       type: 'colorSwatches',
       displayName: 'Secondary label colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-placeholder-text)' },
     },
     secondaryTextColour: {
       type: 'colorSwatches',
       displayName: 'Secondary text colour',
-      validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-success-systemStatus)' },
     },
     visibility: {
       type: 'toggle',
@@ -95,10 +95,10 @@ export const statisticsConfig = {
     },
     events: [],
     styles: {
-      primaryLabelColour: { value: '#8092AB' },
-      primaryTextColour: { value: '#000000' },
-      secondaryLabelColour: { value: '#8092AB' },
-      secondaryTextColour: { value: '#36AF8B' },
+      primaryLabelColour: { value: 'var(--cc-primary-text)' },
+      primaryTextColour: { value: 'var(--cc-primary-text)' },
+      secondaryLabelColour: { value: 'var(--cc-placeholder-text)' },
+      secondaryTextColour: { value: 'var(--cc-success-systemStatus)' },
       visibility: { value: '{{true}}' },
     },
   },
diff --git a/server/src/modules/apps/services/widget-config/steps.js b/server/src/modules/apps/services/widget-config/steps.js
index 4400a19137..6cffcabefa 100644
--- a/server/src/modules/apps/services/widget-config/steps.js
+++ b/server/src/modules/apps/services/widget-config/steps.js
@@ -74,6 +74,7 @@ export const stepsConfig = {
         defaultValue: 1,
       },
     },
+
   },
   defaultSize: {
     width: 22,
@@ -169,7 +170,7 @@ export const stepsConfig = {
       displayName: 'Completed accent',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-primary-brand)',
       },
       accordian: 'steps',
     },
@@ -239,11 +240,11 @@ export const stepsConfig = {
       // color: { value: '' },
       // textColor: { value: '' },
       padding: { value: 'default' },
-      incompletedAccent: { value: '#E4E7EB' },
-      incompletedLabel: { value: '#1B1F24' },
-      completedAccent: { value: '#4368E3' },
-      completedLabel: { value: '#1B1F24' },
-      currentStepLabel: { value: '#1B1F24' },
+      incompletedAccent: { value: 'var(--cc-surface3-surface)' },
+      incompletedLabel: { value: 'var(--cc-primary-text)' },
+      completedAccent: { value: 'var(--cc-primary-brand)' },
+      completedLabel: { value: 'var(--cc-primary-text)' },
+      currentStepLabel: { value: 'var(--cc-primary-text)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/table.js b/server/src/modules/apps/services/widget-config/table.js
index 9f0c4fd723..49d51a969b 100644
--- a/server/src/modules/apps/services/widget-config/table.js
+++ b/server/src/modules/apps/services/widget-config/table.js
@@ -269,6 +269,15 @@ export const tableConfig = {
         schema: { type: 'boolean' },
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
   },
   others: {
     showOnDesktop: { type: 'toggle', displayName: 'Show on desktop ' },
@@ -292,22 +301,19 @@ export const tableConfig = {
     onTableDataDownload: { displayName: 'Download data' },
   },
   styles: {
-    textColor: {
+    columnTitleColor: {
       type: 'colorSwatches',
-      displayName: 'Text Color',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#000',
-      },
-      accordian: 'Data',
+      displayName: 'Column title',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-placeholder-text)' },
+      accordian: 'Column Header',
     },
     columnHeaderWrap: {
       type: 'switch',
-      displayName: 'Column header',
+      displayName: 'Overflow',
       validation: { schema: { type: 'string' } },
-      accordian: 'Data',
+      accordian: 'Column Header',
       options: [
-        { displayName: 'Fixed', value: 'fixed' },
+        { displayName: 'None', value: 'fixed' },
         { displayName: 'Wrap', value: 'wrap' },
       ],
     },
@@ -315,12 +321,27 @@ export const tableConfig = {
       type: 'switch',
       displayName: 'Header casing',
       validation: { schema: { type: 'string' } },
-      accordian: 'Data',
+      accordian: 'Column Header',
       options: [
-        { displayName: 'AA', value: 'uppercase' },
         { displayName: 'As typed', value: 'none' },
+        { displayName: 'AA', value: 'uppercase' },
       ],
     },
+    columnBackgroundColor: {
+      type: 'colorSwatches',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface2-surface)' },
+      accordian: 'Column Header',
+    },
+    textColor: {
+      type: 'colorSwatches',
+      displayName: 'Text',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-primary-text)',
+      },
+      accordian: 'Data',
+    },
     tableType: {
       type: 'select',
       displayName: 'Row style',
@@ -391,11 +412,17 @@ export const tableConfig = {
     },
     actionButtonRadius: {
       type: 'numberInput',
-      displayName: 'Button radius',
+      displayName: 'Action button radius',
       validation: {
         schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'boolean' }] },
       },
-      accordian: 'Action button',
+      accordian: 'Data',
+    },
+    containerBackgroundColor: {
+      type: 'colorSwatches',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
+      accordian: 'Container',
     },
     borderRadius: {
       type: 'numberInput',
@@ -663,15 +690,20 @@ export const tableConfig = {
       allowSelection: { value: '{{true}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      dynamicHeight: { value: `{{false}}` },
     },
     events: [],
     styles: {
-      textColor: { value: '#000' },
+      columnTitleColor: { value: 'var(--cc-placeholder-text)' },
+      columnBackgroundColor: { value: 'var(--cc-surface2-surface)' },
+      containerBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      textColor: { value: 'var(--cc-primary-text)' },
       columnHeaderWrap: { value: 'fixed' },
       headerCasing: { value: 'uppercase' },
       actionButtonRadius: { value: '0' },
       cellSize: { value: 'regular' },
-      borderRadius: { value: '8' },
+      borderRadius: { value: '6' },
+      borderColor: { value: 'var(--cc-default-border)' },
       tableType: { value: 'table-classic' },
       maxRowHeight: { value: 'auto' },
       maxRowHeightValue: { value: '{{0}}' }, // Setting it here as 0 since TableRowHeightInput component will set the value
diff --git a/server/src/modules/apps/services/widget-config/tabs.js b/server/src/modules/apps/services/widget-config/tabs.js
index a9c10bebaf..70754e85d9 100644
--- a/server/src/modules/apps/services/widget-config/tabs.js
+++ b/server/src/modules/apps/services/widget-config/tabs.js
@@ -6,52 +6,47 @@ export const tabsConfig = {
     width: 30,
     height: 300,
   },
-  defaultChildren: [
-    {
-      componentName: 'Image',
-      layout: {
-        top: 60,
-        left: 17,
-        height: 100,
-        width: 7,
-      },
-      tab: 0,
-      properties: ['source'],
-      defaultValue: {
-        source: 'https://uploads-ssl.webflow.com/6266634263b9179f76b2236e/62666392f32677b5cb2fb84b_logo.svg',
-      },
-    },
-    {
-      componentName: 'Text',
-      layout: {
-        top: 100,
-        left: 5,
-        height: 50,
-        width: 34,
-      },
-      tab: 1,
-      properties: ['text'],
-      defaultValue: {
-        text: 'Open-source low-code framework to build & deploy internal tools within minutes.',
-      },
-    },
-    {
-      componentName: 'Table',
-      layout: {
-        top: 0,
-        left: 1,
-        width: 41,
-        height: 250,
-      },
-      tab: 2,
-    },
-  ],
   component: 'Tabs',
   others: {
     showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
   },
   properties: {
+    useDynamicOptions: {
+      type: 'toggle',
+      displayName: 'Dynamic options',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
     tabs: {
       type: 'code',
       displayName: 'Tabs',
@@ -89,6 +84,7 @@ export const tabsConfig = {
     hideTabs: {
       type: 'toggle',
       displayName: 'Hide tabs',
+      section: 'additionalActions',
       validation: {
         schema: {
           type: 'boolean',
@@ -99,6 +95,7 @@ export const tabsConfig = {
     renderOnlyActiveTab: {
       type: 'toggle',
       displayName: 'Render only active tab',
+      section: 'additionalActions',
       validation: {
         schema: {
           type: 'boolean',
@@ -106,37 +103,106 @@ export const tabsConfig = {
         defaultValue: false,
       },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: '' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
+    },
   },
   events: { onTabSwitch: { displayName: 'On tab switch' } },
   styles: {
-    highlightColor: {
+    headerBackground: {
       type: 'colorSwatches',
-      displayName: 'Highlight color',
+      displayName: 'Header background',
       validation: {
         schema: { type: 'string' },
-        defaultValue: 'var(--primary-brand)',
+        defaultValue: 'var(--cc-surface1-surface)',
       },
+      accordian: 'Tabs',
     },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
+    divider: {
+      type: 'colorSwatches',
+      displayName: 'Divider',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
-        defaultValue: false,
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-default-border)',
       },
+      accordian: 'Tabs',
     },
-    disabledState: {
-      type: 'toggle',
-      displayName: 'Disable',
+    unselectedText: {
+      type: 'colorSwatches',
+      displayName: 'Unselected text',
       validation: {
-        schema: {
-          type: 'boolean',
-        },
-        defaultValue: false,
+        schema: { type: 'string' },
+        defaultValue: '#375FCF',
       },
+      accordian: 'Tabs',
     },
+    selectedText: {
+      type: 'colorSwatches',
+      displayName: 'Selected text',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-primary-text)',
+      },
+      accordian: 'Tabs',
+    },
+    hoverBackground: {
+      type: 'colorSwatches',
+      displayName: 'Hover Background',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#1B1F24',
+      },
+      accordian: 'Tabs',
+    },
+    unselectedIcon: {
+      type: 'colorSwatches',
+      displayName: 'Unselected Icon',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'Tabs',
+    },
+    selectedIcon: {
+      type: 'colorSwatches',
+      displayName: 'Selected Icon',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#CCD1D5',
+      },
+      accordian: 'Tabs',
+    },
+    accent: {
+      type: 'colorSwatches',
+      displayName: 'Accent',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-primary-brand)',
+      },
+      accordian: 'Tabs',
+    },
+    // highlightColor: {
+    //   type: 'colorSwatches',
+    //   displayName: 'Highlight color',
+    //   validation: {
+    //     schema: { type: 'string' },
+    //     defaultValue: '#375FCF',
+    //   },
+    //   accordian: 'Tabs',
+    // },
     tabWidth: {
       type: 'select',
       displayName: 'Tab width',
@@ -144,6 +210,54 @@ export const tabsConfig = {
         { name: 'Auto', value: 'auto' },
         { name: 'Equally split', value: 'split' },
       ],
+      accordian: 'Tabs',
+    },
+    transition: {
+      type: 'select',
+      displayName: 'Transition',
+      options: [
+        { name: 'Slide', value: 'slide' },
+        { name: 'None', value: 'none' },
+      ],
+      accordian: 'Tabs',
+    },
+    border: {
+      type: 'colorSwatches',
+      displayName: 'Border',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#375FCF',
+      },
+      accordian: 'Container',
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border radius',
+      validation: {
+        validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
+        defaultValue: false,
+      },
+      accordian: 'Container',
+    },
+    boxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box shadow',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
+      accordian: 'Container',
+      conditionallyRender: {
+        key: 'type',
+        value: 'primary',
+      },
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: { schema: { type: 'string' } },
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'Container',
     },
   },
   actions: [
@@ -157,28 +271,153 @@ export const tabsConfig = {
         },
       ],
     },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setTabDisable',
+      displayName: 'Set Tab disable',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
+    {
+      handle: 'setTabLoading',
+      displayName: 'Set Tab Loading',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
+    {
+      handle: 'setTabVisibility',
+      displayName: 'Set Tab visibility',
+      params: [
+        {
+          handle: 'tabId',
+          displayName: 'Tab',
+          type: 'select',
+          isDynamicOpiton: true,
+          optionsGetter: 'component.definition.properties.tabItems.value',
+        },
+        {
+          handle: 'value',
+          type: 'toggle',
+          displayName: 'Value',
+          defaultValue: '{{false}}',
+        },
+      ],
+    },
   ],
-  exposedVariables: { currentTab: '' },
+  exposedVariables: {
+    currentTab: '',
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
+      dynamicHeight: { value: '{{false}}' },
+      useDynamicOptions: { value: '{{false}}' },
       tabs: {
         value:
           "{{[ \n\t\t{ title: 'Home', id: '0' }, \n\t\t{ title: 'Profile', id: '1' }, \n\t\t{ title: 'Settings', id: '2' } \n ]}}",
       },
+      tabItems: {
+        value: [
+          {
+            id: 't0',
+            title: 'Tab 1',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+          {
+            id: 't1',
+            title: 'Tab 2',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+          {
+            id: 't2',
+            title: 'Tab 3',
+            icon: { value: 'IconHome2' },
+            iconVisibility: { value: false },
+            loading: { value: false },
+            disable: { value: false },
+            visible: { value: true },
+          },
+        ],
+      },
       defaultTab: { value: '0' },
       hideTabs: { value: false },
       renderOnlyActiveTab: { value: false },
+      loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      tooltip: { value: '' },
     },
     events: [],
     styles: {
-      highlightColor: { value: 'var(--primary-brand)' },
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
+      headerBackground: { value: 'var(--cc-surface1-surface)' },
+      divider: { value: 'var(--cc-default-border)' },
+      unselectedText: { value: 'var(--cc-placeholder-text)' },
+      selectedText: { value: 'var(--cc-primary-text)' },
+      highlightColor: { value: 'var(--cc-primary-brand)' },
+      hoverBackground: { value: '#1B1F24' },
+      unselectedIcon: { value: 'var(--cc-default-icon)' },
+      selectedIcon: { value: 'var(--cc-default-icon)' },
+      accent: { value: 'var(--cc-primary-brand)' },
       tabWidth: { value: 'auto' },
+      transition: { value: 'slide' },
+      borderRadius: { value: '{{6}}' },
+      border: { value: 'var(--cc-default-border)' },
+      boxShadow: { value: '0px 0px 0px 0px #121212' },
+      padding: { value: 'default' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/text.js b/server/src/modules/apps/services/widget-config/text.js
index 8ed1edffd1..1291a65ef8 100644
--- a/server/src/modules/apps/services/widget-config/text.js
+++ b/server/src/modules/apps/services/widget-config/text.js
@@ -29,6 +29,15 @@ export const textConfig = {
       },
       showLabel: false,
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     loadingState: {
       type: 'toggle',
       displayName: 'Show loading state',
@@ -269,13 +278,14 @@ export const textConfig = {
       textFormat: { value: 'html' },
       text: { value: `Hello {{globals.currentUser.firstName}}👋` },
       loadingState: { value: `{{false}}` },
+      dynamicHeight: { value: `{{false}}` },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
     },
     events: [],
     styles: {
       backgroundColor: { value: '#fff00000' },
-      textColor: { value: '#000000' },
+      textColor: { value: 'var(--cc-primary-text)' },
       textSize: { value: '{{14}}' },
       textAlign: { value: 'left' },
       fontWeight: { value: 'normal' },
diff --git a/server/src/modules/apps/services/widget-config/textarea.js b/server/src/modules/apps/services/widget-config/textarea.js
index d0e0364334..ea5cf0d3ed 100644
--- a/server/src/modules/apps/services/widget-config/textarea.js
+++ b/server/src/modules/apps/services/widget-config/textarea.js
@@ -17,6 +17,15 @@ export const textareaConfig = {
       displayName: 'Label',
       validation: { schema: { type: 'string' }, defaultValue: 'Label' },
     },
+    dynamicHeight: {
+      type: 'toggle',
+      displayName: 'Dynamic height',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
     placeholder: {
       type: 'code',
       displayName: 'Placeholder',
@@ -80,9 +89,9 @@ export const textareaConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -132,33 +141,33 @@ export const textareaConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -169,9 +178,9 @@ export const textareaConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -274,6 +283,7 @@ export const textareaConfig = {
       value: { value: '' },
       label: { value: 'Label' },
       placeholder: { value: 'Enter your input' },
+      dynamicHeight: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       loadingState: { value: '{{false}}' },
@@ -281,17 +291,17 @@ export const textareaConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/server/src/modules/apps/services/widget-config/textinput.js b/server/src/modules/apps/services/widget-config/textinput.js
index e259ecddd0..4da69a7e77 100644
--- a/server/src/modules/apps/services/widget-config/textinput.js
+++ b/server/src/modules/apps/services/widget-config/textinput.js
@@ -82,7 +82,7 @@ export const textinputConfig = {
     color: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -134,31 +134,31 @@ export const textinputConfig = {
     backgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     borderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     textColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -171,7 +171,7 @@ export const textinputConfig = {
     iconColor: {
       type: 'colorSwatches',
       displayName: 'Icon color',
-      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-icon)' },
       accordian: 'field',
       visibility: false,
       showLabel: false,
@@ -281,17 +281,17 @@ export const textinputConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      borderColor: { value: '#CCD1D5' },
-      accentColor: { value: 'var(--primary-brand)' },
-      errTextColor: { value: '#D72D39' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#fff' },
-      iconColor: { value: '#CFD3D859' },
+      backgroundColor: { value: 'var(--cc-surface1-surface)' },
+      iconColor: { value: 'var(--cc-default-icon)' },
       direction: { value: 'left' },
       width: { value: '{{33}}' },
       alignment: { value: 'side' },
-      color: { value: '#1B1F24' },
+      color: { value: 'var(--cc-primary-text)' },
       auto: { value: '{{true}}' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/server/src/modules/apps/services/widget-config/timeline.js b/server/src/modules/apps/services/widget-config/timeline.js
index 63776f0b99..212f8bc480 100644
--- a/server/src/modules/apps/services/widget-config/timeline.js
+++ b/server/src/modules/apps/services/widget-config/timeline.js
@@ -48,7 +48,7 @@ export const timelineConfig = {
     properties: {
       data: {
         value:
-          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}",
+          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--cc-primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--cc-primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--cc-primary-brand)'} \n] }}",
       },
       hideDate: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/timepicker.js b/server/src/modules/apps/services/widget-config/timepicker.js
index a5a1fb6b06..9b23523249 100644
--- a/server/src/modules/apps/services/widget-config/timepicker.js
+++ b/server/src/modules/apps/services/widget-config/timepicker.js
@@ -166,7 +166,7 @@ export const timePickerConfig = {
     labelColor: {
       type: 'colorSwatches',
       displayName: 'Color',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'label',
     },
     alignment: {
@@ -217,31 +217,31 @@ export const timePickerConfig = {
     fieldBackgroundColor: {
       type: 'colorSwatches',
       displayName: 'Background',
-      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
       accordian: 'field',
     },
     fieldBorderColor: {
       type: 'colorSwatches',
       displayName: 'Border',
-      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-default-border)' },
       accordian: 'field',
     },
     accentColor: {
       type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-brand)' },
       accordian: 'field',
     },
     selectedTextColor: {
       type: 'colorSwatches',
       displayName: 'Text',
-      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-primary-text)' },
       accordian: 'field',
     },
     errTextColor: {
       type: 'colorSwatches',
       displayName: 'Error text',
-      validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-error-systemStatus)' },
       accordian: 'field',
     },
     icon: {
@@ -257,7 +257,7 @@ export const timePickerConfig = {
       showLabel: false,
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#6A727C',
+        defaultValue: 'var(--cc-default-icon)',
       },
       accordian: 'field',
     },
@@ -331,23 +331,23 @@ export const timePickerConfig = {
     },
     events: [],
     styles: {
-      labelColor: { value: '#1B1F24' },
+      labelColor: { value: 'var(--cc-primary-text)' },
       alignment: { value: 'side' },
       direction: { value: 'left' },
       labelWidth: { value: '20' },
       auto: { value: '{{true}}' },
-      fieldBackgroundColor: { value: '#fff' },
-      fieldBorderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
-      selectedTextColor: { value: '#1B1F24' },
-      errTextColor: { value: '#E54D2E' },
+      fieldBackgroundColor: { value: 'var(--cc-surface1-surface)' },
+      fieldBorderColor: { value: 'var(--cc-default-border)' },
+      accentColor: { value: 'var(--cc-primary-brand)' },
+      selectedTextColor: { value: 'var(--cc-primary-text)' },
+      errTextColor: { value: 'var(--cc-error-systemStatus)' },
       icon: { value: 'IconClock' },
       iconVisibility: { value: true },
       iconDirection: { value: 'left' },
       fieldBorderRadius: { value: '{{6}}' },
       boxShadow: { value: '0px 0px 0px 0px #121212' },
       padding: { value: 'default' },
-      iconColor: { value: '#6A727C' },
+      iconColor: { value: 'var(--cc-default-icon)' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/toggleswitch.js b/server/src/modules/apps/services/widget-config/toggleswitch.js
index bd646a47f3..4aa6c10c58 100644
--- a/server/src/modules/apps/services/widget-config/toggleswitch.js
+++ b/server/src/modules/apps/services/widget-config/toggleswitch.js
@@ -74,8 +74,8 @@ export const toggleswitchConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '' },
-      toggleSwitchColor: { value: 'var(--primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      toggleSwitchColor: { value: 'var(--cc-primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/toggleswitchv2.js b/server/src/modules/apps/services/widget-config/toggleswitchv2.js
index 4b31bc8f0c..aec87dc17c 100644
--- a/server/src/modules/apps/services/widget-config/toggleswitchv2.js
+++ b/server/src/modules/apps/services/widget-config/toggleswitchv2.js
@@ -194,11 +194,11 @@ export const toggleSwitchV2Config = {
     },
     events: [],
     styles: {
-      textColor: { value: '#1B1F24' },
-      toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility
-      uncheckedColor: { value: '#E4E7EB' },
-      borderColor: { value: '#E4E7EB' },
-      handleColor: { value: '#FFFFFF' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      toggleSwitchColor: { value: 'var(--cc-primary-brand)' }, //keeping same key for backward comopatibility
+      uncheckedColor: { value: 'var(--cc-surface3-surface)' },
+      borderColor: { value: 'var(--cc-default-border)' },
+      handleColor: { value: 'var(--cc-surface1-surface)' },
       alignment: { value: 'right' },
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
diff --git a/server/src/modules/apps/services/widget-config/treeSelect.js b/server/src/modules/apps/services/widget-config/treeSelect.js
index 898f0b3ed0..68e16b107c 100644
--- a/server/src/modules/apps/services/widget-config/treeSelect.js
+++ b/server/src/modules/apps/services/widget-config/treeSelect.js
@@ -70,8 +70,8 @@ export const treeSelectConfig = {
     },
     events: [],
     styles: {
-      textColor: { value: '' },
-      checkboxColor: { value: 'var(--primary-brand)' },
+      textColor: { value: 'var(--cc-primary-text)' },
+      checkboxColor: { value: 'var(--cc-primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },
diff --git a/server/src/modules/apps/services/widget-config/verticalDivider.js b/server/src/modules/apps/services/widget-config/verticalDivider.js
index df426c7b5f..a75d0528e2 100644
--- a/server/src/modules/apps/services/widget-config/verticalDivider.js
+++ b/server/src/modules/apps/services/widget-config/verticalDivider.js
@@ -36,7 +36,7 @@ export const verticalDividerConfig = {
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--cc-default-border)',
       },
       accordian: 'Divider',
     },
@@ -90,7 +90,7 @@ export const verticalDividerConfig = {
     },
     events: [],
     styles: {
-      dividerColor: { value: '#CCD1D5' },
+      dividerColor: { value: 'var(--cc-default-border)' },
       dividerStyle: { value: 'solid' },
       padding: { value: 'default' },
       boxShadow: { value: '0px 0px 0px 0px #00000040' },
diff --git a/server/src/modules/apps/types/index.ts b/server/src/modules/apps/types/index.ts
index 061be1bc3e..8a264716cf 100644
--- a/server/src/modules/apps/types/index.ts
+++ b/server/src/modules/apps/types/index.ts
@@ -10,6 +10,7 @@ interface Features {
   [FEATURE_KEY.GET]: FeatureConfig;
   [FEATURE_KEY.VALIDATE_PRIVATE_APP_ACCESS]: FeatureConfig;
   [FEATURE_KEY.VALIDATE_RELEASED_APP_ACCESS]: FeatureConfig;
+  [FEATURE_KEY.APP_PUBLIC_UPDATE]: FeatureConfig;
   [FEATURE_KEY.GET_ASSOCIATED_TABLES]: FeatureConfig;
   [FEATURE_KEY.GET_ONE]: FeatureConfig;
   [FEATURE_KEY.GET_BY_SLUG]: FeatureConfig;
diff --git a/server/src/modules/apps/util.service.ts b/server/src/modules/apps/util.service.ts
index 57cac46979..b7b4ffdbd6 100644
--- a/server/src/modules/apps/util.service.ts
+++ b/server/src/modules/apps/util.service.ts
@@ -136,7 +136,7 @@ export class AppsUtilService implements IAppsUtilService {
         canvasMaxWidth: 100,
         canvasMaxWidthType: '%',
         canvasMaxHeight: 2400,
-        canvasBackgroundColor: '#edeff5',
+        canvasBackgroundColor: 'var(--cc-appBackground-surface)',
         backgroundFxQuery: '',
         appMode: 'auto',
       };
diff --git a/server/src/modules/audit-logs/ability/index.ts b/server/src/modules/audit-logs/ability/index.ts
index 08e02705b2..00a0ae8318 100644
--- a/server/src/modules/audit-logs/ability/index.ts
+++ b/server/src/modules/audit-logs/ability/index.ts
@@ -15,5 +15,6 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
 
   protected defineAbilityFor(can: AbilityBuilder<FeatureAbility>['can'], UserAllPermissions: UserAllPermissions): void {
     can(FEATURE_KEY.VIEW_LOGS, AuditLog);
+    can(FEATURE_KEY.VIEW_RESOURCES, AuditLog);
   }
 }
diff --git a/server/src/modules/audit-logs/constants/features.ts b/server/src/modules/audit-logs/constants/features.ts
index 2e158f052a..0e83a0bdeb 100644
--- a/server/src/modules/audit-logs/constants/features.ts
+++ b/server/src/modules/audit-logs/constants/features.ts
@@ -8,5 +8,8 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.VIEW_LOGS]: {
       license: LICENSE_FIELD.AUDIT_LOGS,
     },
+    [FEATURE_KEY.VIEW_RESOURCES]: {
+      license: LICENSE_FIELD.AUDIT_LOGS,
+    },
   },
 };
diff --git a/server/src/modules/audit-logs/constants/index.ts b/server/src/modules/audit-logs/constants/index.ts
index e3645a9817..aa9c8f3aba 100644
--- a/server/src/modules/audit-logs/constants/index.ts
+++ b/server/src/modules/audit-logs/constants/index.ts
@@ -11,4 +11,5 @@ export const PER_PAGE_DEFAULT_COUNT = '10';
 
 export enum FEATURE_KEY {
   VIEW_LOGS = 'viewLogs',
+  VIEW_RESOURCES = 'viewResoures',
 }
diff --git a/server/src/modules/audit-logs/types/index.ts b/server/src/modules/audit-logs/types/index.ts
index 6d234fd18f..beb208f924 100644
--- a/server/src/modules/audit-logs/types/index.ts
+++ b/server/src/modules/audit-logs/types/index.ts
@@ -28,6 +28,7 @@ export interface AuditLogFields {
 
 export interface Features {
   [FEATURE_KEY.VIEW_LOGS]: FeatureConfig;
+  [FEATURE_KEY.VIEW_RESOURCES]: FeatureConfig;
 }
 
 export interface FeaturesConfig {
diff --git a/server/src/modules/auth/guards/authorize-workspace-guard.ts b/server/src/modules/auth/guards/authorize-workspace-guard.ts
index 4310d2224c..26d7b19f9e 100644
--- a/server/src/modules/auth/guards/authorize-workspace-guard.ts
+++ b/server/src/modules/auth/guards/authorize-workspace-guard.ts
@@ -1,4 +1,4 @@
-import { ExecutionContext, Injectable, NotFoundException } from '@nestjs/common';
+import { ExecutionContext, Injectable, NotFoundException, UnauthorizedException } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { Organization } from 'src/entities/organization.entity';
 import { dbTransactionWrap } from 'src/helpers/database.helper';
@@ -12,31 +12,38 @@ export class AuthorizeWorkspaceGuard extends AuthGuard('jwt') {
 
   async canActivate(context: ExecutionContext): Promise<any> {
     const request = context.switchToHttp().getRequest();
-    if (request?.cookies['tj_auth_token']) {
-      let user: any;
-      const organizationId =
-        typeof request.headers['tj-workspace-id'] === 'object'
-          ? request.headers['tj-workspace-id'][0]
-          : request.headers['tj-workspace-id'];
 
-      if (organizationId) {
-        await dbTransactionWrap(async (manager: EntityManager) => {
-          const org = await manager.findOne(Organization, {
-            where: { id: organizationId },
-            select: ['id'],
-          });
-          if (!org) {
-            throw new NotFoundException();
-          }
-        }, this.manager);
-      }
+    // ✅ Allow execution only if one of the expected auth methods is present
+    const hasJwtCookie = !!request.cookies['tj_auth_token'];
+    const hasPatHeader = !!request.headers['tj_auth_token'];
 
-      try {
-        user = super.canActivate(context);
-      } catch (err) {
-        return false;
-      }
-      return user;
+    if (!hasJwtCookie && !hasPatHeader) {
+      throw new UnauthorizedException('Missing authentication token');
     }
+
+    let user: any;
+    const organizationId =
+      typeof request.headers['tj-workspace-id'] === 'object'
+        ? request.headers['tj-workspace-id'][0]
+        : request.headers['tj-workspace-id'];
+
+    if (organizationId) {
+      await dbTransactionWrap(async (manager: EntityManager) => {
+        const org = await manager.findOne(Organization, {
+          where: { id: organizationId },
+          select: ['id'],
+        });
+        if (!org) {
+          throw new NotFoundException();
+        }
+      }, this.manager);
+    }
+
+    try {
+      user = super.canActivate(context);
+    } catch (err) {
+      return false;
+    }
+    return user;
   }
 }
diff --git a/server/src/modules/auth/module.ts b/server/src/modules/auth/module.ts
index 81b456687d..68b2702362 100644
--- a/server/src/modules/auth/module.ts
+++ b/server/src/modules/auth/module.ts
@@ -7,7 +7,7 @@ import { RolesModule } from '@modules/roles/module';
 import { GroupPermissionsModule } from '@modules/group-permissions/module';
 import { OnboardingModule } from '@modules/onboarding/module';
 import { ProfileModule } from '@modules/profile/module';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { OrganizationRepository } from '@modules/organizations/repository';
 import { OrganizationUsersRepository } from '@modules/organization-users/repository';
 import { RolesRepository } from '@modules/roles/repository';
diff --git a/server/src/modules/auth/oauth/service.ts b/server/src/modules/auth/oauth/service.ts
index 438673c29e..2cc1be2dea 100644
--- a/server/src/modules/auth/oauth/service.ts
+++ b/server/src/modules/auth/oauth/service.ts
@@ -29,7 +29,7 @@ import { LoginConfigsUtilService } from '@modules/login-configs/util.service';
 import { AuthUtilService } from '@modules/auth/util.service';
 import { LicenseTermsService } from '@modules/licensing/interfaces/IService';
 import { OrganizationUsersUtilService } from '@modules/organization-users/util.service';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { InstanceSettingsUtilService } from '@modules/instance-settings/util.service';
 import { OrganizationRepository } from '@modules/organizations/repository';
 import { OrganizationUsersRepository } from '@modules/organization-users/repository';
diff --git a/server/src/modules/auth/service.ts b/server/src/modules/auth/service.ts
index cfea254fe0..61342e7f85 100644
--- a/server/src/modules/auth/service.ts
+++ b/server/src/modules/auth/service.ts
@@ -15,7 +15,7 @@ import { INSTANCE_USER_SETTINGS } from '@modules/instance-settings/constants';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { OrganizationRepository } from '@modules/organizations/repository';
 import { EMAIL_EVENTS } from '@modules/email/constants';
-import { UserRepository } from '../users/repository';
+import { UserRepository } from '../users/repositories/repository';
 import { AuthUtilService } from './util.service';
 import { SessionUtilService } from '../session/util.service';
 import { IAuthService } from './interfaces/IService';
diff --git a/server/src/modules/auth/util.service.ts b/server/src/modules/auth/util.service.ts
index 8eb738b3a3..cb2dcc8049 100644
--- a/server/src/modules/auth/util.service.ts
+++ b/server/src/modules/auth/util.service.ts
@@ -2,7 +2,7 @@ import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import * as bcrypt from 'bcrypt';
 import { User } from '../../entities/user.entity';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { LicenseUserService } from '@modules/licensing/services/user.service';
 import { RolesUtilService } from '@modules/roles/util.service';
 import { OrganizationUser } from '../../entities/organization_user.entity';
diff --git a/server/src/modules/data-queries/util.service.ts b/server/src/modules/data-queries/util.service.ts
index 1478e2a699..1b12422d1b 100644
--- a/server/src/modules/data-queries/util.service.ts
+++ b/server/src/modules/data-queries/util.service.ts
@@ -433,12 +433,31 @@ export class DataQueriesUtilService implements IDataQueriesUtilService {
           }
         }
 
+        // d: Simple variable replacement for single {{variable}}
+        if (
+          typeof resolvedValue === 'string' &&
+          (resolvedValue.match(/^{{{.*}}}$/) || // Triple brace objects - accepts anything between {{{ }}}
+            (resolvedValue.startsWith('{{') &&
+              resolvedValue.endsWith('}}') &&
+              (resolvedValue.match(/{{/g) || [])?.length === 1)) // Single variables
+        ) {
+          resolvedValue = options[resolvedValue];
+          if (parent && key !== null) {
+            parent[key] = resolvedValue;
+          }
+        }
+
         // c: Replace all occurrences of {{ }} variables
-        if (typeof resolvedValue === 'string' && resolvedValue?.match(/\{\{(.*?)\}\}/g)?.length > 0) {
+        else if (
+          typeof resolvedValue === 'string' &&
+          resolvedValue?.match(/\{\{(.*?)\}\}/g)?.length > 0 &&
+          !resolvedValue.match(/^\{\{[^}]*\}\}$/) // Only exclude if entire string is one template variable
+        ) {
           const variables = resolvedValue.match(/\{\{(.*?)\}\}/g);
 
           for (const variable of variables || []) {
             let replacement = options[variable];
+
             // Check if the replacement is an object
             if (typeof replacement === 'object' && replacement !== null) {
               // Ensure parent is a non-empty array before attempting to access its first element
@@ -461,19 +480,6 @@ export class DataQueriesUtilService implements IDataQueriesUtilService {
           }
         }
 
-        // d: Simple variable replacement for single {{variable}}
-        if (
-          typeof resolvedValue === 'string' &&
-          resolvedValue.startsWith('{{') &&
-          resolvedValue.endsWith('}}') &&
-          (resolvedValue.match(/{{/g) || [])?.length === 1
-        ) {
-          resolvedValue = options[resolvedValue];
-          if (parent && key !== null) {
-            parent[key] = resolvedValue;
-          }
-        }
-
         // e: Handle strings with %%
         // Removed code since variables are deprecated
 
diff --git a/server/src/modules/email/service.ts b/server/src/modules/email/service.ts
index 3899375374..d198859ca3 100644
--- a/server/src/modules/email/service.ts
+++ b/server/src/modules/email/service.ts
@@ -90,6 +90,7 @@ export class EmailService implements IEmailService {
       host: smtpSettings.host,
       port: smtpSettings.port,
       secure: smtpSettings.port === 465, // Use `true` for port 465, `false` for others
+      ignoreTLS: process.env.SMTP_IGNORE_TLS === 'true' ? true : false,
       auth: {
         user: smtpSettings.username,
         pass: smtpSettings.password,
diff --git a/server/src/modules/external-apis/ability/index.ts b/server/src/modules/external-apis/ability/index.ts
index f71ae8fa55..2475b65b6c 100644
--- a/server/src/modules/external-apis/ability/index.ts
+++ b/server/src/modules/external-apis/ability/index.ts
@@ -24,6 +24,8 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
         FEATURE_KEY.UPDATE_USER,
         FEATURE_KEY.UPDATE_USER_ROLE,
         FEATURE_KEY.UPDATE_USER_WORKSPACE,
+        FEATURE_KEY.GENERATE_PAT,
+        FEATURE_KEY.VALIDATE_PAT_SESSION,
       ],
       User
     );
diff --git a/server/src/modules/external-apis/constants/feature.ts b/server/src/modules/external-apis/constants/feature.ts
index 5551dd64e0..3506a7f8aa 100644
--- a/server/src/modules/external-apis/constants/feature.ts
+++ b/server/src/modules/external-apis/constants/feature.ts
@@ -49,5 +49,13 @@ export const FEATURES: FeaturesConfig = {
       license: LICENSE_FIELD.EXTERNAL_API,
       isPublic: true,
     },
+    [FEATURE_KEY.GENERATE_PAT]: {
+      license: LICENSE_FIELD.EXTERNAL_API,
+      isPublic: true,
+    },
+    [FEATURE_KEY.VALIDATE_PAT_SESSION]: {
+      license: LICENSE_FIELD.EXTERNAL_API,
+      isPublic: true,
+    },
   },
 };
diff --git a/server/src/modules/external-apis/constants/index.ts b/server/src/modules/external-apis/constants/index.ts
index 97030f67a7..32ac851cc3 100644
--- a/server/src/modules/external-apis/constants/index.ts
+++ b/server/src/modules/external-apis/constants/index.ts
@@ -10,6 +10,8 @@ export enum FEATURE_KEY {
   GET_ALL_WORKSPACE_APPS = 'GET_ALL_WORKSPACE_APPS',
   IMPORT_APP = 'IMPORT_APP',
   EXPORT_APP = 'EXPORT_APP',
+  GENERATE_PAT = 'GENERATE_PAT',
+  VALIDATE_PAT_SESSION = 'VALIDATE_PAT_SESSION',
 }
 
 export type DefaultDataSourceKind = 'restapi' | 'runjs' | 'runpy' | 'tooljetdb' | 'workflows';
@@ -45,3 +47,13 @@ export const NewRevampedComponents: NewRevampedComponent[] = [
   'Checkbox',
   'Button',
 ];
+
+export enum SessionType {
+  USER = 'user',
+  PAT = 'pat',
+}
+
+export enum PersonalAccessTokenScope {
+  APP = 'app',
+  WORKSPACE = 'workspace',
+}
diff --git a/server/src/modules/external-apis/dto/index.ts b/server/src/modules/external-apis/dto/index.ts
index 9d8d6a0f9d..825f200e37 100644
--- a/server/src/modules/external-apis/dto/index.ts
+++ b/server/src/modules/external-apis/dto/index.ts
@@ -12,6 +12,8 @@ import {
   IsNotEmpty,
   IsDefined,
   IsObject,
+  IsInt,
+  Min,
 } from 'class-validator';
 import { Transform, Type } from 'class-transformer';
 import { USER_ROLE } from '@modules/group-permissions/constants';
@@ -204,3 +206,35 @@ export class ImportTooljetDatabaseDto {
   // @IsOptional()
   // data: boolean;
 }
+
+export class GeneratePATDto {
+  @IsOptional()
+  @IsUUID()
+  userId?: string;
+
+  @IsOptional()
+  @IsEmail()
+  email?: string;
+
+  @IsUUID()
+  @IsOptional()
+  appId: string;
+
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  sessionExpiry?: number; // In minutes
+
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  patExpiry?: number; // In minutes
+}
+
+export class ValidatePATSessionDto {
+  @IsUUID()
+  appId: string;
+
+  @IsString()
+  accessToken: string;
+}
diff --git a/server/src/modules/external-apis/module.ts b/server/src/modules/external-apis/module.ts
index 22621363e6..a003882404 100644
--- a/server/src/modules/external-apis/module.ts
+++ b/server/src/modules/external-apis/module.ts
@@ -8,6 +8,11 @@ import { TooljetDbModule } from '@modules/tooljet-db/module';
 import { AppsModule } from '@modules/apps/module';
 import { OrganizationsModule } from '@modules/organizations/module';
 import { VersionModule } from '@modules/versions/module';
+import { UserPersonalAccessTokenRepository } from '../users/repositories/UserPersonalAccessTokens.repository';
+import { AppsRepository } from '@modules/apps/repository';
+import { SessionModule } from '@modules/session/module';
+import { UserRepository } from '@modules/users/repositories/repository';
+import { OrganizationRepository } from '@modules/organizations/repository';
 import { UsersModule } from '@modules/users/module';
 export class ExternalApiModule {
   static async register(configs?: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -26,8 +31,18 @@ export class ExternalApiModule {
         await AppsModule.register(configs),
         await OrganizationsModule.register(configs),
         await VersionModule.register(configs),
+        await SessionModule.register(configs),
+      ],
+      providers: [
+        ExternalApiUtilService,
+        ExternalApisService,
+        FeatureAbilityFactory,
+        RolesRepository,
+        UserPersonalAccessTokenRepository,
+        AppsRepository,
+        UserRepository,
+        OrganizationRepository,
       ],
-      providers: [ExternalApiUtilService, ExternalApisService, FeatureAbilityFactory, RolesRepository],
       controllers: [ExternalApisController],
       exports: [ExternalApiUtilService],
     };
diff --git a/server/src/modules/external-apis/types/index.ts b/server/src/modules/external-apis/types/index.ts
index 5ed8d5c323..54896b0bad 100644
--- a/server/src/modules/external-apis/types/index.ts
+++ b/server/src/modules/external-apis/types/index.ts
@@ -14,6 +14,8 @@ interface Features {
   [FEATURE_KEY.GET_ALL_WORKSPACE_APPS]: FeatureConfig;
   [FEATURE_KEY.IMPORT_APP]: FeatureConfig;
   [FEATURE_KEY.EXPORT_APP]: FeatureConfig;
+  [FEATURE_KEY.GENERATE_PAT]: FeatureConfig;
+  [FEATURE_KEY.VALIDATE_PAT_SESSION]: FeatureConfig;
 }
 
 export interface FeaturesConfig {
diff --git a/server/src/modules/folder-apps/service.ts b/server/src/modules/folder-apps/service.ts
index 7ed80df160..c90e833dfb 100644
--- a/server/src/modules/folder-apps/service.ts
+++ b/server/src/modules/folder-apps/service.ts
@@ -57,6 +57,8 @@ export class FolderAppsService implements IFolderAppsService {
         return MODULES.APP;
       case APP_TYPES.WORKFLOW:
         return MODULES.WORKFLOWS;
+      case APP_TYPES.MODULE:
+        return MODULES.MODULES;
       default:
         throw new BadRequestException('Invalid resource type');
     }
diff --git a/server/src/modules/git-sync/constants/gitsync_error.constant.ts b/server/src/modules/git-sync/constants/gitsync_error.constant.ts
index 49671c03dc..d7e810bf41 100644
--- a/server/src/modules/git-sync/constants/gitsync_error.constant.ts
+++ b/server/src/modules/git-sync/constants/gitsync_error.constant.ts
@@ -1,7 +1,7 @@
 export enum GitErrorMessages {
   BRANCH_NOT_FOUND = 'Specified branch from env variable is \n missing in Github repository',
   BRANCH_NAME_MISMATCH = 'Could not push commit to the repository. Please ensure your default branch name is master and try again.',
-  GENERIC_CLONE_ERROR = 'Issue while cloning',
+  GENERIC_CLONE_ERROR = 'Issue while cloning. Please try again.',
   REPOSITORY_NOT_FOUND = 'Repository not found. Please verify the repository URL is correct and accessible.',
   INVALID_PRIVATE_KEY = "Invalid GitHub private key format. Please check the key and ensure it's properly formatted.",
   INVALID_APP_ID = 'Invalid GitHub App ID. Please verify the App ID and try again.',
diff --git a/server/src/modules/git-sync/module.ts b/server/src/modules/git-sync/module.ts
index 3eb8af3970..e11bd129b9 100644
--- a/server/src/modules/git-sync/module.ts
+++ b/server/src/modules/git-sync/module.ts
@@ -6,6 +6,8 @@ import { AppsModule } from '@modules/apps/module';
 import { VersionModule } from '@modules/versions/module';
 import { OrganizationGitSyncRepository } from './repository';
 import { VersionRepository } from '@modules/versions/repository';
+import { AppGitRepository } from '@modules/app-git/repository';
+
 export class GitSyncModule {
   static async register(configs?: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
     const { GitSyncController } = await import(`${await getImportPath(configs?.IS_GET_CONTEXT)}/git-sync/controller`);
@@ -49,6 +51,7 @@ export class GitSyncModule {
       providers: [
         OrganizationGitSyncRepository,
         VersionRepository,
+        AppGitRepository,
         BaseGitUtilService,
         BaseGitSyncService,
         GitSyncService,
diff --git a/server/src/modules/group-permissions/ability/index.ts b/server/src/modules/group-permissions/ability/index.ts
index cb9ed485ff..41c1b37fdc 100644
--- a/server/src/modules/group-permissions/ability/index.ts
+++ b/server/src/modules/group-permissions/ability/index.ts
@@ -30,11 +30,14 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
           FEATURE_KEY.GET_ALL,
           FEATURE_KEY.UPDATE,
           FEATURE_KEY.GET_ALL_GROUP_USER,
-          FEATURE_KEY.DELETE_GRANULAR_PERMISSIONS,
-          FEATURE_KEY.CREATE_GRANULAR_PERMISSIONS,
+          FEATURE_KEY.DELETE_GRANULAR_APP_PERMISSIONS,
+          FEATURE_KEY.DELETE_GRANULAR_DATA_PERMISSIONS,
+          FEATURE_KEY.CREATE_GRANULAR_APP_PERMISSIONS,
+          FEATURE_KEY.CREATE_GRANULAR_DATA_PERMISSIONS,
           FEATURE_KEY.GET_ALL_GRANULAR_PERMISSIONS,
           FEATURE_KEY.GET_ADDABLE_APPS,
-          FEATURE_KEY.UPDATE_GRANULAR_PERMISSIONS,
+          FEATURE_KEY.UPDATE_GRANULAR_APP_PERMISSIONS,
+          FEATURE_KEY.UPDATE_GRANULAR_DATA_PERMISSIONS,
           FEATURE_KEY.GET_ADDABLE_DS,
           FEATURE_KEY.USER_ROLE_CHANGE,
         ],
diff --git a/server/src/modules/group-permissions/constants/features.ts b/server/src/modules/group-permissions/constants/features.ts
index 881ff6b39f..de5d50b5bf 100644
--- a/server/src/modules/group-permissions/constants/features.ts
+++ b/server/src/modules/group-permissions/constants/features.ts
@@ -7,18 +7,23 @@ export const FEATURES_EE: FeaturesConfig = {
   [MODULES.GROUP_PERMISSIONS]: {
     [FEATURE_KEY.ADD_GROUP_USER]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'USER_ADD_TO_GROUP',
     },
     [FEATURE_KEY.CREATE]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GROUP_PERMISSION_CREATE',
     },
     [FEATURE_KEY.DELETE]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GROUP_PERMISSION_DELETE',
     },
     [FEATURE_KEY.DELETE_GROUP_USER]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'USER_REMOVE_FROM_GROUP',
     },
     [FEATURE_KEY.DUPLICATE]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GROUP_PERMISSION_DUPLICATE',
     },
     [FEATURE_KEY.GET_ADDABLE_USERS]: {
       license: LICENSE_FIELD.VALID,
@@ -27,13 +32,24 @@ export const FEATURES_EE: FeaturesConfig = {
     [FEATURE_KEY.GET_ALL]: {},
     [FEATURE_KEY.UPDATE]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GROUP_PERMISSION_UPDATE',
     },
     [FEATURE_KEY.GET_ALL_GROUP_USER]: {},
-    [FEATURE_KEY.DELETE_GRANULAR_PERMISSIONS]: {
+    [FEATURE_KEY.DELETE_GRANULAR_APP_PERMISSIONS]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GRANULAR_PERMISSION_APP_DELETE',
     },
-    [FEATURE_KEY.CREATE_GRANULAR_PERMISSIONS]: {
+    [FEATURE_KEY.DELETE_GRANULAR_DATA_PERMISSIONS]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GRANULAR_PERMISSION_DATA_SOURCE_DELETE',
+    },
+    [FEATURE_KEY.CREATE_GRANULAR_APP_PERMISSIONS]: {
+      license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GRANULAR_PERMISSION_APP_CREATE',
+    },
+    [FEATURE_KEY.CREATE_GRANULAR_DATA_PERMISSIONS]: {
+      license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GRANULAR_PERMISSION_DATA_SOURCE_CREATE',
     },
     [FEATURE_KEY.GET_ALL_GRANULAR_PERMISSIONS]: {
       license: LICENSE_FIELD.VALID,
@@ -41,8 +57,13 @@ export const FEATURES_EE: FeaturesConfig = {
     [FEATURE_KEY.GET_ADDABLE_APPS]: {
       license: LICENSE_FIELD.VALID,
     },
-    [FEATURE_KEY.UPDATE_GRANULAR_PERMISSIONS]: {
+    [FEATURE_KEY.UPDATE_GRANULAR_APP_PERMISSIONS]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GRANULAR_PERMISSION_APP_UPDATE',
+    },
+    [FEATURE_KEY.UPDATE_GRANULAR_DATA_PERMISSIONS]: {
+      license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'GRANULAR_PERMISSION_DATA_SOURCE_UPDATE',
     },
     [FEATURE_KEY.GET_ADDABLE_DS]: {
       license: LICENSE_FIELD.VALID,
@@ -63,11 +84,14 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.GET_ALL]: {},
     [FEATURE_KEY.UPDATE]: {},
     [FEATURE_KEY.GET_ALL_GROUP_USER]: {},
-    [FEATURE_KEY.DELETE_GRANULAR_PERMISSIONS]: {},
-    [FEATURE_KEY.CREATE_GRANULAR_PERMISSIONS]: {},
+    [FEATURE_KEY.DELETE_GRANULAR_APP_PERMISSIONS]: {},
+    [FEATURE_KEY.DELETE_GRANULAR_DATA_PERMISSIONS]: {},
+    [FEATURE_KEY.CREATE_GRANULAR_APP_PERMISSIONS]: {},
+    [FEATURE_KEY.CREATE_GRANULAR_DATA_PERMISSIONS]: {},
     [FEATURE_KEY.GET_ALL_GRANULAR_PERMISSIONS]: {},
     [FEATURE_KEY.GET_ADDABLE_APPS]: {},
-    [FEATURE_KEY.UPDATE_GRANULAR_PERMISSIONS]: {},
+    [FEATURE_KEY.UPDATE_GRANULAR_APP_PERMISSIONS]: {},
+    [FEATURE_KEY.UPDATE_GRANULAR_DATA_PERMISSIONS]: {},
     [FEATURE_KEY.GET_ADDABLE_DS]: {
       license: LICENSE_FIELD.VALID,
     },
diff --git a/server/src/modules/group-permissions/constants/index.ts b/server/src/modules/group-permissions/constants/index.ts
index 7610c9e881..892f2d62a2 100644
--- a/server/src/modules/group-permissions/constants/index.ts
+++ b/server/src/modules/group-permissions/constants/index.ts
@@ -123,9 +123,12 @@ export enum FEATURE_KEY {
   GET_ADDABLE_USERS = 'get_addable_group_user',
   GET_ADDABLE_APPS = 'get_addable_apps',
   GET_ADDABLE_DS = 'get_addable_ds',
-  CREATE_GRANULAR_PERMISSIONS = 'create_granular_permissions',
+  CREATE_GRANULAR_APP_PERMISSIONS = 'create_granular_app_permissions',
+  CREATE_GRANULAR_DATA_PERMISSIONS = 'create_granular_data_permissions',
   GET_ALL_GRANULAR_PERMISSIONS = 'get_all_granular_permissions',
-  UPDATE_GRANULAR_PERMISSIONS = 'update_granular_permissions',
-  DELETE_GRANULAR_PERMISSIONS = 'delete_granular_permissions',
+  UPDATE_GRANULAR_APP_PERMISSIONS = 'update_granular_app_permissions',
+  UPDATE_GRANULAR_DATA_PERMISSIONS = 'update_granular_data_permissions',
+  DELETE_GRANULAR_APP_PERMISSIONS = 'delete_granular_app_permissions',
+  DELETE_GRANULAR_DATA_PERMISSIONS = 'delete_granular_data_permissions',
   USER_ROLE_CHANGE = 'change_user_role',
 }
diff --git a/server/src/modules/group-permissions/controller.ts b/server/src/modules/group-permissions/controller.ts
index b959a871a0..11109d65e5 100644
--- a/server/src/modules/group-permissions/controller.ts
+++ b/server/src/modules/group-permissions/controller.ts
@@ -31,7 +31,7 @@ export class GroupPermissionsControllerV2 implements IGroupPermissionsController
     @User() user: UserEntity,
     @Body() createGroupPermissionDto: CreateGroupPermissionDto
   ): Promise<GroupPermissions> {
-    return await this.groupPermissionsService.create(user.organizationId, createGroupPermissionDto.name);
+    return await this.groupPermissionsService.create(user, createGroupPermissionDto.name);
   }
 
   @InitFeature(FEATURE_KEY.GET_ONE)
@@ -62,14 +62,14 @@ export class GroupPermissionsControllerV2 implements IGroupPermissionsController
       2. EE/Cloud - Basic Plan - No'one can update custom and default group
             - Paid Plan - Can update only custom and default -builder custom group
     */
-    return await this.groupPermissionsService.updateGroup(id, user.organizationId, updateGroupDto);
+    return await this.groupPermissionsService.updateGroup(id, user, updateGroupDto);
   }
 
   @InitFeature(FEATURE_KEY.DELETE)
   @UseGuards(GroupExistenceGuard)
   @Delete(':id')
   async delete(@User() user: UserEntity, @Param('id') id: string) {
-    return await this.groupPermissionsService.deleteGroup(id, user.organizationId);
+    return await this.groupPermissionsService.deleteGroup(id, user);
   }
 
   @InitFeature(FEATURE_KEY.DUPLICATE)
@@ -80,7 +80,7 @@ export class GroupPermissionsControllerV2 implements IGroupPermissionsController
     @Param('id') groupId: string,
     @Body() duplicateGroupDto: DuplicateGroupDtoBase
   ) {
-    return await this.groupPermissionsService.duplicateGroup(groupId, user.organizationId, duplicateGroupDto);
+    return await this.groupPermissionsService.duplicateGroup(groupId, user, duplicateGroupDto);
   }
 
   @InitFeature(FEATURE_KEY.ADD_GROUP_USER)
@@ -91,9 +91,8 @@ export class GroupPermissionsControllerV2 implements IGroupPermissionsController
     @Param('id') groupId: string,
     @Body() addGroupUserDto: AddGroupUserDto
   ) {
-    const { organizationId } = user;
     addGroupUserDto.groupId = groupId;
-    await this.groupPermissionsService.addGroupUsers(addGroupUserDto, organizationId);
+    await this.groupPermissionsService.addGroupUsers(addGroupUserDto, user);
     return;
   }
 
@@ -112,7 +111,7 @@ export class GroupPermissionsControllerV2 implements IGroupPermissionsController
   @InitFeature(FEATURE_KEY.DELETE_GROUP_USER)
   @Delete('users/:id')
   async deleteGroupUser(@User() user: UserEntity, @Param('id') id: string) {
-    await this.groupPermissionsService.deleteGroupUser(id, user.organizationId);
+    await this.groupPermissionsService.deleteGroupUser(id, user);
   }
 
   @InitFeature(FEATURE_KEY.GET_ADDABLE_USERS)
diff --git a/server/src/modules/group-permissions/controllers/granular-permissions.controller.ts b/server/src/modules/group-permissions/controllers/granular-permissions.controller.ts
index 01ea35593a..1dc7e50eaa 100644
--- a/server/src/modules/group-permissions/controllers/granular-permissions.controller.ts
+++ b/server/src/modules/group-permissions/controllers/granular-permissions.controller.ts
@@ -35,16 +35,28 @@ export class GranularPermissionsController implements IGranularPermissionsContro
     return await this.granularPermissionsService.getAddableDataSources(user.organizationId);
   }
 
-  @InitFeature(FEATURE_KEY.CREATE_GRANULAR_PERMISSIONS)
+  @InitFeature(FEATURE_KEY.CREATE_GRANULAR_APP_PERMISSIONS)
   @UseGuards(GroupExistenceGuard)
-  @Post(':id/granular-permissions')
-  async createGranularPermissions(
+  @Post(':id/granular-permissions/app')
+  async createGranularAppPermissions(
     @User() user: UserEntity,
     @Param('id') groupId: string,
     @Body() createGranularPermissionsDto: CreateGranularPermissionDto
   ) {
     createGranularPermissionsDto.groupId = groupId;
-    return await this.granularPermissionsService.create(user.organizationId, createGranularPermissionsDto);
+    return await this.granularPermissionsService.create(user, createGranularPermissionsDto);
+  }
+
+  @InitFeature(FEATURE_KEY.CREATE_GRANULAR_DATA_PERMISSIONS)
+  @UseGuards(GroupExistenceGuard)
+  @Post(':id/granular-permissions/data-source')
+  async createGranularDataPermissions(
+    @User() user: UserEntity,
+    @Param('id') groupId: string,
+    @Body() createGranularPermissionsDto: CreateGranularPermissionDto
+  ) {
+    createGranularPermissionsDto.groupId = groupId;
+    return await this.granularPermissionsService.create(user, createGranularPermissionsDto);
   }
 
   @InitFeature(FEATURE_KEY.GET_ALL_GRANULAR_PERMISSIONS)
@@ -57,23 +69,41 @@ export class GranularPermissionsController implements IGranularPermissionsContro
     return await this.granularPermissionsService.getAll(groupId, user.organizationId, { filterDataSource: true });
   }
 
-  @InitFeature(FEATURE_KEY.UPDATE_GRANULAR_PERMISSIONS)
-  @Put('granular-permissions/:id')
-  async updateGranularPermissions(
+  @InitFeature(FEATURE_KEY.UPDATE_GRANULAR_APP_PERMISSIONS)
+  @Put('granular-permissions/app/:id')
+  async updateGranularAppPermissions(
     @User() user: UserEntity,
     @Param('id') granularPermissionsId: string,
     @Body() updateGranularPermissionDto: UpdateGranularPermissionDto<any>
   ) {
-    await this.granularPermissionsService.update(
-      granularPermissionsId,
-      user.organizationId,
-      updateGranularPermissionDto
-    );
+    await this.granularPermissionsService.update(granularPermissionsId, user, updateGranularPermissionDto);
   }
 
-  @InitFeature(FEATURE_KEY.DELETE_GRANULAR_PERMISSIONS)
-  @Delete('granular-permissions/:id')
-  async deleteGranularPermissions(@User() user: UserEntity, @Param('id') granularPermissionsId: string): Promise<void> {
-    await this.granularPermissionsService.delete(granularPermissionsId, user.organizationId);
+  @InitFeature(FEATURE_KEY.UPDATE_GRANULAR_DATA_PERMISSIONS)
+  @Put('granular-permissions/data-source/:id')
+  async updateGranularDataPermissions(
+    @User() user: UserEntity,
+    @Param('id') granularPermissionsId: string,
+    @Body() updateGranularPermissionDto: UpdateGranularPermissionDto<any>
+  ) {
+    await this.granularPermissionsService.update(granularPermissionsId, user, updateGranularPermissionDto);
+  }
+
+  @InitFeature(FEATURE_KEY.DELETE_GRANULAR_APP_PERMISSIONS)
+  @Delete('granular-permissions/app/:id')
+  async deleteGranularAppPermissions(
+    @User() user: UserEntity,
+    @Param('id') granularPermissionsId: string
+  ): Promise<void> {
+    await this.granularPermissionsService.delete(granularPermissionsId, user);
+  }
+
+  @InitFeature(FEATURE_KEY.DELETE_GRANULAR_DATA_PERMISSIONS)
+  @Delete('granular-permissions/data-source/:id')
+  async deleteGranularDataPermissions(
+    @User() user: UserEntity,
+    @Param('id') granularPermissionsId: string
+  ): Promise<void> {
+    await this.granularPermissionsService.delete(granularPermissionsId, user);
   }
 }
diff --git a/server/src/modules/group-permissions/interfaces/IController.ts b/server/src/modules/group-permissions/interfaces/IController.ts
index df49acff20..a7d925242f 100644
--- a/server/src/modules/group-permissions/interfaces/IController.ts
+++ b/server/src/modules/group-permissions/interfaces/IController.ts
@@ -22,16 +22,27 @@ export interface IGroupPermissionsControllerV2 {
 export interface IGranularPermissionsController {
   getAddableApps(user: UserEntity): Promise<{ AddableResourceItem }[]>;
   getAddableDs(user: UserEntity): Promise<{ AddableResourceItem }[]>;
-  createGranularPermissions(
+  createGranularAppPermissions(
+    user: UserEntity,
+    groupId: string,
+    createGranularPermissionsDto: CreateGranularPermissionDto
+  ): Promise<GranularPermissions>;
+  createGranularDataPermissions(
     user: UserEntity,
     groupId: string,
     createGranularPermissionsDto: CreateGranularPermissionDto
   ): Promise<GranularPermissions>;
   getAllGranularPermissions(user: UserEntity, groupId: string): Promise<GranularPermissions[]>;
-  updateGranularPermissions(
+  updateGranularAppPermissions(
     user: UserEntity,
     granularPermissionsId: string,
     updateGranularPermissionDto: UpdateGranularPermissionDto<any>
   ): Promise<void>;
-  deleteGranularPermissions(user: UserEntity, granularPermissionsId: string): Promise<void>;
+  updateGranularDataPermissions(
+    user: UserEntity,
+    granularPermissionsId: string,
+    updateGranularPermissionDto: UpdateGranularPermissionDto<any>
+  ): Promise<void>;
+  deleteGranularAppPermissions(user: UserEntity, granularPermissionsId: string): Promise<void>;
+  deleteGranularDataPermissions(user: UserEntity, granularPermissionsId: string): Promise<void>;
 }
diff --git a/server/src/modules/group-permissions/interfaces/IService.ts b/server/src/modules/group-permissions/interfaces/IService.ts
index 8d63bdaa90..9c5156781c 100644
--- a/server/src/modules/group-permissions/interfaces/IService.ts
+++ b/server/src/modules/group-permissions/interfaces/IService.ts
@@ -11,7 +11,7 @@ import { DataSourcesGroupPermissions } from '@entities/data_sources_group_permis
 import { User } from '@entities/user.entity';
 
 export interface IGranularPermissionsService {
-  create(organizationId: string, createGranularPermissionsDto: CreateGranularPermissionDto): Promise<void>;
+  create(user: User, createGranularPermissionsDto: CreateGranularPermissionDto): Promise<void>;
   getAddableApps(organizationId: string): Promise<{ AddableResourceItem }[]>;
   getAddableDataSources(organizationId: string): Promise<{ AddableResourceItem }[]>;
   getAll(
@@ -19,12 +19,8 @@ export interface IGranularPermissionsService {
     organizationId: string,
     searchParam?: GranularPermissionQuerySearchParam
   ): Promise<GranularPermissions[]>;
-  update(
-    id: string,
-    organizationId: string,
-    updateGranularPermissionDto: UpdateGranularPermissionDto<any>
-  ): Promise<void>;
-  delete(id: string, organizationId: string): Promise<void>;
+  update(id: string, user: User, updateGranularPermissionDto: UpdateGranularPermissionDto<any>): Promise<void>;
+  delete(id: string, user: User): Promise<void>;
 }
 
 export interface IGroupPermissionsDuplicateService {
@@ -53,18 +49,14 @@ export interface IGroupPermissionsDuplicateService {
 }
 
 export interface IGroupPermissionsService {
-  create(organizationId: string, name: string): Promise<GroupPermissions>;
+  create(user: User, name: string): Promise<GroupPermissions>;
   getGroup(organizationId: string, id: string): Promise<{ group: GroupPermissions; isBuilderLevel: boolean }>;
   getAllGroup(organizationId: string): Promise<GetUsersResponse>;
-  updateGroup(id: string, organizationId: string, updateGroupPermissionDto: UpdateGroupPermissionDto): Promise<void>;
-  deleteGroup(id: string, organizationId: string): Promise<void>;
-  duplicateGroup(
-    groupId: string,
-    organizationId: string,
-    duplicateGroupDto: DuplicateGroupDto
-  ): Promise<GroupPermissions>;
-  addGroupUsers(addGroupUserDto: AddGroupUserDto, organizationId: string, manager?: EntityManager): Promise<void>;
+  updateGroup(id: string, user: User, updateGroupPermissionDto: UpdateGroupPermissionDto): Promise<void>;
+  deleteGroup(id: string, user: User): Promise<void>;
+  duplicateGroup(groupId: string, user: User, duplicateGroupDto: DuplicateGroupDto): Promise<GroupPermissions>;
+  addGroupUsers(addGroupUserDto: AddGroupUserDto, user: User, manager?: EntityManager): Promise<void>;
   getAllGroupUsers(group: GroupPermissions, organizationId: string, searchInput?: string): Promise<GroupUsers[]>;
-  deleteGroupUser(id: string, organizationId: string): Promise<void>;
+  deleteGroupUser(id: string, user: User): Promise<void>;
   getAddableUser(groupId: string, organizationId: string, searchInput?: string): Promise<User[]>;
 }
diff --git a/server/src/modules/group-permissions/module.ts b/server/src/modules/group-permissions/module.ts
index e18da248f8..81f67c9fb1 100644
--- a/server/src/modules/group-permissions/module.ts
+++ b/server/src/modules/group-permissions/module.ts
@@ -1,6 +1,6 @@
 import { DynamicModule } from '@nestjs/common';
 import { getImportPath } from '@modules/app/constants';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { RolesRepository } from '@modules/roles/repository';
 import { GroupPermissionsRepository } from '@modules/group-permissions/repository';
 import { OrganizationUsersRepository } from '@modules/organization-users/repository';
diff --git a/server/src/modules/group-permissions/service.ts b/server/src/modules/group-permissions/service.ts
index 00b64d49d5..8327d0e83d 100644
--- a/server/src/modules/group-permissions/service.ts
+++ b/server/src/modules/group-permissions/service.ts
@@ -17,6 +17,9 @@ import { DATA_BASE_CONSTRAINTS, ERROR_HANDLER } from './constants/error';
 import { RolesRepository } from '@modules/roles/repository';
 import { IGroupPermissionsService } from './interfaces/IService';
 import { GroupPermissionLicenseUtilService } from './util-services/license.util.service';
+import { RequestContext } from '@modules/request-context/service';
+import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
+import { User } from '@entities/user.entity';
 
 @Injectable()
 export class GroupPermissionsService implements IGroupPermissionsService {
@@ -30,10 +33,27 @@ export class GroupPermissionsService implements IGroupPermissionsService {
     protected readonly licenseUtilService: GroupPermissionLicenseUtilService
   ) {}
 
-  create(organizationId: string, name: string): Promise<GroupPermissions> {
+  async create(user: User, name: string): Promise<GroupPermissions> {
     const groupCreateObj: CreateDefaultGroupObject = { name };
     this.groupPermissionsUtilService.validateCreateGroupOperation(groupCreateObj);
-    return this.groupPermissionsRepository.createGroup(organizationId, groupCreateObj);
+    const groupPermissionResponse = await this.groupPermissionsRepository.createGroup(
+      user.organizationId,
+      groupCreateObj
+    );
+    //GROUP_PERMISSION_CREATE audit
+    const auditLogsData = {
+      userId: user.id,
+      organizationId: user.organizationId,
+      resourceId: groupPermissionResponse.id,
+      resourceName: name,
+      resourceData: {
+        group_details: {
+          name: name,
+        },
+      },
+    };
+    RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
+    return groupPermissionResponse;
   }
 
   getGroup(organizationId: string, id: string): Promise<{ group: GroupPermissions; isBuilderLevel: boolean }> {
@@ -44,10 +64,10 @@ export class GroupPermissionsService implements IGroupPermissionsService {
     return this.groupPermissionsUtilService.getAllGroupByOrganization(organizationId);
   }
 
-  async updateGroup(id: string, organizationId: string, updateGroupPermissionDto: UpdateGroupPermissionDto) {
+  async updateGroup(id: string, user: User, updateGroupPermissionDto: UpdateGroupPermissionDto) {
     return await dbTransactionWrap(async (manager: EntityManager) => {
+      const organizationId = user.organizationId;
       const group = await this.groupPermissionsRepository.getGroup({ id, organizationId }, manager);
-
       // License validation - Update not allowed on basic plan
       const isLicenseValid = await this.licenseUtilService.isValidLicense();
       if (!isLicenseValid && group.type === GROUP_PERMISSIONS_TYPE.CUSTOM_GROUP) {
@@ -105,29 +125,47 @@ export class GroupPermissionsService implements IGroupPermissionsService {
 
       // Validating license
       await this.licenseUserService.validateUser(manager);
+      //GROUP_PERMISSION_UPDATE audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: group.id,
+        resourceName: group.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
     });
   }
 
-  async deleteGroup(id: string, organizationId: string): Promise<void> {
+  async deleteGroup(id: string, user: User): Promise<void> {
     await dbTransactionWrap(async (manager: EntityManager) => {
+      const organizationId = user.organizationId;
       const group = await this.groupPermissionsRepository.getGroup({ id, organizationId }, manager);
 
       if (group.type == GROUP_PERMISSIONS_TYPE.DEFAULT) {
         throw new BadRequestException(ERROR_HANDLER.DEFAULT_GROUP_UPDATE_NOT_ALLOWED);
       }
+      //GROUP_PERMISSION_DELETE audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: user.organizationId,
+        resourceId: group.id,
+        resourceName: group.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
       await manager.delete(GroupPermissions, id);
     });
   }
 
   async duplicateGroup(
     groupId: string,
-    organizationId: string,
+    user: User,
     duplicateGroupDto: DuplicateGroupDtoBase
   ): Promise<GroupPermissions> {
     const { addApps, addPermission, addUsers } = duplicateGroupDto;
+    const organizationId = user.organizationId;
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const group = await this.groupPermissionsRepository.getGroup({ id: groupId, organizationId }, manager);
-
+      const groupCopy = JSON.parse(JSON.stringify(group));
       // Create new Group
       const newGroup = await this.groupPermissionsDuplicateService.duplicateGroup(group, addPermission, manager);
 
@@ -175,12 +213,22 @@ export class GroupPermissionsService implements IGroupPermissionsService {
       }
 
       await this.licenseUserService.validateUser(manager);
+
+      //GROUP_PERMISSION_DUPLICATE audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: groupCopy.id,
+        resourceName: groupCopy.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
       return newGroup;
     });
   }
 
-  async addGroupUsers(addGroupUserDto: AddGroupUserDto, organizationId: string, manager?: EntityManager) {
+  async addGroupUsers(addGroupUserDto: AddGroupUserDto, user: User, manager?: EntityManager) {
     const { userIds } = addGroupUserDto;
+    const organizationId = user.organizationId;
 
     if (!userIds && userIds.length === 0) {
       return;
@@ -189,6 +237,18 @@ export class GroupPermissionsService implements IGroupPermissionsService {
     await dbTransactionWrap(async (manager: EntityManager) => {
       await this.groupPermissionsUtilService.addUsersToGroup(addGroupUserDto, organizationId, manager);
       await this.licenseUserService.validateUser(manager);
+      const group = await this.groupPermissionsRepository.getGroup(
+        { id: addGroupUserDto.groupId, organizationId: organizationId },
+        manager
+      );
+      //USER_ADD_TO_GROUP audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: group.id,
+        resourceName: group.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
     }, manager);
   }
 
@@ -196,10 +256,22 @@ export class GroupPermissionsService implements IGroupPermissionsService {
     return await this.groupPermissionsRepository.getUsersInGroup(group.id, organizationId, searchInput);
   }
 
-  async deleteGroupUser(id: string, organizationId: string): Promise<void> {
-    const groupUser = await this.groupPermissionsRepository.getGroupUser(id);
-    this.groupPermissionsUtilService.validateDeleteGroupUserOperation(groupUser?.group, organizationId);
-    await this.groupPermissionsRepository.removeUserFromGroup(id);
+  async deleteGroupUser(id: string, user: User, manager?: EntityManager): Promise<void> {
+    const organizationId = user.organizationId;
+    await dbTransactionWrap(async (manager: EntityManager) => {
+      const groupUser = await this.groupPermissionsRepository.getGroupUser(id, manager);
+      this.groupPermissionsUtilService.validateDeleteGroupUserOperation(groupUser?.group, organizationId);
+      console.log('group user group', groupUser?.group);
+      await this.groupPermissionsRepository.removeUserFromGroup(id);
+      //USER_REMOVE_FROM_GROUP audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: groupUser?.group.id,
+        resourceName: groupUser?.group.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
+    }, manager);
   }
 
   async getAddableUser(groupId: string, organizationId: string, searchInput?: string) {
diff --git a/server/src/modules/group-permissions/services/granular-permissions.service.ts b/server/src/modules/group-permissions/services/granular-permissions.service.ts
index a5f543b6b7..a5c8b55783 100644
--- a/server/src/modules/group-permissions/services/granular-permissions.service.ts
+++ b/server/src/modules/group-permissions/services/granular-permissions.service.ts
@@ -11,6 +11,9 @@ import { GranularPermissionQuerySearchParam } from '../types';
 import { IGranularPermissionsService } from '../interfaces/IService';
 import { GroupPermissionLicenseUtilService } from '../util-services/license.util.service';
 import { USER_ROLE } from '../constants';
+import { User } from '@entities/user.entity';
+import { RequestContext } from '@modules/request-context/service';
+import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
 
 @Injectable()
 export class GranularPermissionsService implements IGranularPermissionsService {
@@ -21,7 +24,8 @@ export class GranularPermissionsService implements IGranularPermissionsService {
     protected readonly licenseUtilService: GroupPermissionLicenseUtilService
   ) {}
 
-  async create(organizationId: string, createGranularPermissionsDto: CreateGranularPermissionDto) {
+  async create(user: User, createGranularPermissionsDto: CreateGranularPermissionDto) {
+    const organizationId = user.organizationId;
     const { createResourcePermissionObject } = createGranularPermissionsDto;
     const group = await this.groupPermissionRepository.getGroup({
       id: createGranularPermissionsDto.groupId,
@@ -29,7 +33,7 @@ export class GranularPermissionsService implements IGranularPermissionsService {
     });
     this.granularPermissionUtilService.validateGranularPermissionCreateOperation(group);
     return await dbTransactionWrap(async (manager: EntityManager) => {
-      await this.granularPermissionUtilService.create(
+      const granularPermission = await this.granularPermissionUtilService.create(
         {
           createGranularPermissionDto: createGranularPermissionsDto,
           organizationId,
@@ -37,8 +41,16 @@ export class GranularPermissionsService implements IGranularPermissionsService {
         createResourcePermissionObject,
         manager
       );
-
       await this.licenseUserService.validateUser(manager);
+
+      //GRANULAR_PERMISSION_APP_CREATE audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: granularPermission.id,
+        resourceName: granularPermission.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
     });
   }
   async getAddableApps(organizationId: string): Promise<{ AddableResourceItem }[]> {
@@ -88,7 +100,8 @@ export class GranularPermissionsService implements IGranularPermissionsService {
     });
   }
 
-  async update(id: string, organizationId: string, updateGranularPermissionDto: UpdateGranularPermissionDto<any>) {
+  async update(id: string, user: User, updateGranularPermissionDto: UpdateGranularPermissionDto<any>) {
+    const organizationId = user.organizationId;
     await dbTransactionWrap(async (manager: EntityManager) => {
       const granularPermissions = await this.groupPermissionRepository.getGranularPermission(
         id,
@@ -105,10 +118,20 @@ export class GranularPermissionsService implements IGranularPermissionsService {
       });
 
       await this.licenseUserService.validateUser(manager);
+
+      //GRANULAR_PERMISSION_APP_UPDATE audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: granularPermissions.id,
+        resourceName: granularPermissions.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
     });
   }
 
-  async delete(id: string, organizationId: string) {
+  async delete(id: string, user: User) {
+    const organizationId = user.organizationId;
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const granularPermission = await this.groupPermissionRepository.getGranularPermission(
         id,
@@ -120,6 +143,15 @@ export class GranularPermissionsService implements IGranularPermissionsService {
         throw new BadRequestException();
       }
       await manager.delete(GranularPermissions, id);
+
+      //GRANULAR_PERMISSION_APP_DELETE audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: granularPermission.id,
+        resourceName: granularPermission.name,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
     });
   }
 }
diff --git a/server/src/modules/group-permissions/types/index.ts b/server/src/modules/group-permissions/types/index.ts
index e241de91fc..beddd87e39 100644
--- a/server/src/modules/group-permissions/types/index.ts
+++ b/server/src/modules/group-permissions/types/index.ts
@@ -54,11 +54,14 @@ interface Features {
   [FEATURE_KEY.GET_ALL]: FeatureConfig;
   [FEATURE_KEY.UPDATE]: FeatureConfig;
   [FEATURE_KEY.GET_ALL_GROUP_USER]: FeatureConfig;
-  [FEATURE_KEY.DELETE_GRANULAR_PERMISSIONS]: FeatureConfig;
-  [FEATURE_KEY.CREATE_GRANULAR_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.DELETE_GRANULAR_APP_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.DELETE_GRANULAR_DATA_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.CREATE_GRANULAR_APP_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.CREATE_GRANULAR_DATA_PERMISSIONS]: FeatureConfig;
   [FEATURE_KEY.GET_ALL_GRANULAR_PERMISSIONS]: FeatureConfig;
   [FEATURE_KEY.GET_ADDABLE_APPS]: FeatureConfig;
-  [FEATURE_KEY.UPDATE_GRANULAR_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.UPDATE_GRANULAR_APP_PERMISSIONS]: FeatureConfig;
+  [FEATURE_KEY.UPDATE_GRANULAR_DATA_PERMISSIONS]: FeatureConfig;
   [FEATURE_KEY.GET_ADDABLE_DS]: FeatureConfig;
   [FEATURE_KEY.USER_ROLE_CHANGE]: FeatureConfig;
 }
diff --git a/server/src/modules/group-permissions/util.service.ts b/server/src/modules/group-permissions/util.service.ts
index 7af22ba987..6436888ce0 100644
--- a/server/src/modules/group-permissions/util.service.ts
+++ b/server/src/modules/group-permissions/util.service.ts
@@ -26,7 +26,7 @@ import { DEFAULT_GRANULAR_PERMISSIONS_NAME } from './constants/granular_permissi
 import { RolesUtilService } from '@modules/roles/util.service';
 import { GroupUsers } from '../../entities/group_users.entity';
 import { RolesRepository } from '@modules/roles/repository';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { USER_STATUS, WORKSPACE_USER_STATUS } from '@modules/users/constants/lifecycle';
 import { IGroupPermissionsUtilService } from './interfaces/IUtilService';
 import { GroupPermissionLicenseUtilService } from './util-services/license.util.service';
diff --git a/server/src/modules/import-export-resources/constants/feature.ts b/server/src/modules/import-export-resources/constants/feature.ts
index aea32e96f8..7bc60d63e5 100644
--- a/server/src/modules/import-export-resources/constants/feature.ts
+++ b/server/src/modules/import-export-resources/constants/feature.ts
@@ -4,10 +4,14 @@ import { FeaturesConfig } from '../types';
 
 export const FEATURES: FeaturesConfig = {
   [MODULES.IMPORT_EXPORT_RESOURCES]: {
-    [FEATURE_KEY.APP_RESOURCE_EXPORT]: {},
-    [FEATURE_KEY.APP_RESOURCE_IMPORT]: {
-      auditLogsKey: 'APP_CREATE',
+    [FEATURE_KEY.APP_RESOURCE_EXPORT]: {
+      auditLogsKey: 'APP_EXPORT',
+    },
+    [FEATURE_KEY.APP_RESOURCE_IMPORT]: {
+      auditLogsKey: 'APP_IMPORT',
+    },
+    [FEATURE_KEY.APP_RESOURCE_CLONE]: {
+      auditLogsKey: 'APP_CLONE',
     },
-    [FEATURE_KEY.APP_RESOURCE_CLONE]: {},
   },
 };
diff --git a/server/src/modules/import-export-resources/service.ts b/server/src/modules/import-export-resources/service.ts
index 465524076a..b79d9dcf5e 100644
--- a/server/src/modules/import-export-resources/service.ts
+++ b/server/src/modules/import-export-resources/service.ts
@@ -9,6 +9,7 @@ import { isEmpty } from 'lodash';
 import { InternalTableRepository } from '@modules/tooljet-db/repository';
 import { RequestContext } from '@modules/request-context/service';
 import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
+import { AppsRepository } from '@modules/apps/repository';
 import { dbTransactionWrap } from '@helpers/database.helper';
 
 @Injectable()
@@ -16,7 +17,8 @@ export class ImportExportResourcesService {
   constructor(
     protected readonly appImportExportService: AppImportExportService,
     protected readonly tooljetDbImportExportService: TooljetDbImportExportService,
-    protected readonly internalTableRepository: InternalTableRepository
+    protected readonly internalTableRepository: InternalTableRepository,
+    protected readonly appsRepository: AppsRepository
   ) {}
 
   async export(
@@ -57,6 +59,15 @@ export class ImportExportResourcesService {
       if (exportedApps.length > 0) resourcesExport.app = exportedApps;
     }
 
+    const appData = await this.appsRepository.findOne({ where: { id: exportResourcesDto.app[0].id } });
+    //APP_EXPORT audit
+    const auditLogsData = {
+      userId: user.id,
+      organizationId: user.organizationId,
+      resourceId: appData.id,
+      resourceName: appData.name,
+    };
+    RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
     return resourcesExport;
   }
 
@@ -79,8 +90,14 @@ export class ImportExportResourcesService {
           appParams = { ...appParams.appV2 };
           const pages = appParams?.pages;
           const queries = appParams?.dataQueries;
-          (pages?.length || queries?.length) &&
-            (await this.appImportExportService.checkIfGroupPermissionsExist(pages, queries, user.organizationId));
+          const components = appParams?.components;
+          (pages?.length || queries?.length || components?.length) &&
+            (await this.appImportExportService.checkIfGroupPermissionsExist(
+              pages,
+              queries,
+              components,
+              user.organizationId
+            ));
         }
       }
     }
@@ -157,6 +174,14 @@ export class ImportExportResourcesService {
       tooljet_database: resourceExport.tooljet_database,
     };
 
-    return this.import(user, importResourcesDto, true);
+    const createdApp = await this.import(user, importResourcesDto, true);
+    //APP_CLONE audit
+    RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
+      userId: user.id,
+      organizationId: user.organizationId,
+      resourceId: createdApp.app[0]?.id,
+      resourceName: createdApp.app[0]?.name,
+    });
+    return createdApp;
   }
 }
diff --git a/server/src/modules/instance-settings/Interfaces/IController.ts b/server/src/modules/instance-settings/Interfaces/IController.ts
index 3797db846e..4eb35ec582 100644
--- a/server/src/modules/instance-settings/Interfaces/IController.ts
+++ b/server/src/modules/instance-settings/Interfaces/IController.ts
@@ -1,8 +1,9 @@
+import { User } from '@entities/user.entity';
 import { CreateInstanceSettingsDto, UpdateUserSettingsDto } from '../dto';
 
 export interface IInstanceSettingsController {
   get(): Promise<object>;
   create(body: CreateInstanceSettingsDto): Promise<void>;
-  update(body: UpdateUserSettingsDto): Promise<void>;
+  update(body: UpdateUserSettingsDto, user: User): Promise<void>;
   delete(id: string): Promise<void>;
 }
diff --git a/server/src/modules/instance-settings/Interfaces/IService.ts b/server/src/modules/instance-settings/Interfaces/IService.ts
index fc5cb88cd3..2dab4426d1 100644
--- a/server/src/modules/instance-settings/Interfaces/IService.ts
+++ b/server/src/modules/instance-settings/Interfaces/IService.ts
@@ -1,3 +1,4 @@
+import { User } from '@entities/user.entity';
 import { CreateInstanceSettingsDto, UpdateUserSettingsDto } from '../dto';
 import { InstanceSettings } from '@entities/instance_settings.entity';
 
@@ -6,7 +7,7 @@ export interface IInstanceSettingsService {
 
   create(params: CreateInstanceSettingsDto): Promise<InstanceSettings>;
 
-  update(params: UpdateUserSettingsDto): Promise<void>;
+  update(params: UpdateUserSettingsDto, user: User): Promise<void>;
 
   delete(settings_id: string): Promise<void>;
 }
diff --git a/server/src/modules/instance-settings/controller.ts b/server/src/modules/instance-settings/controller.ts
index aa985625e6..f04a888099 100644
--- a/server/src/modules/instance-settings/controller.ts
+++ b/server/src/modules/instance-settings/controller.ts
@@ -7,6 +7,8 @@ import { MODULES } from '@modules/app/constants/modules';
 import { InitFeature } from '@modules/app/decorators/init-feature.decorator';
 import { FEATURE_KEY } from './constants';
 import { FeatureAbilityGuard } from './ability/guard';
+import { User as UserEntity } from '@entities/user.entity';
+import { User } from '@modules/app/decorators/user.decorator';
 
 @InitModule(MODULES.INSTANCE_SETTINGS)
 @Controller('instance-settings')
@@ -28,7 +30,7 @@ export class InstanceSettingsController implements IInstanceSettingsController {
 
   @InitFeature(FEATURE_KEY.UPDATE)
   @Patch()
-  async update(@Body() body: UpdateUserSettingsDto) {
+  async update(@Body() body: UpdateUserSettingsDto, @User() user: UserEntity) {
     throw new NotFoundException();
   }
 
diff --git a/server/src/modules/instance-settings/module.ts b/server/src/modules/instance-settings/module.ts
index f956aef045..821be79dc2 100644
--- a/server/src/modules/instance-settings/module.ts
+++ b/server/src/modules/instance-settings/module.ts
@@ -2,6 +2,7 @@ import { getImportPath } from '@modules/app/constants';
 import { EncryptionModule } from '@modules/encryption/module';
 import { DynamicModule } from '@nestjs/common';
 import { FeatureAbilityFactory } from './ability';
+import { OrganizationRepository } from '@modules/organizations/repository';
 
 export class InstanceSettingsModule {
   static async register(configs: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -15,7 +16,7 @@ export class InstanceSettingsModule {
       module: InstanceSettingsModule,
       imports: [await EncryptionModule.register(configs)],
       controllers: [InstanceSettingsController],
-      providers: [InstanceSettingsUtilService, InstanceSettingsService, FeatureAbilityFactory],
+      providers: [InstanceSettingsUtilService, InstanceSettingsService, FeatureAbilityFactory, OrganizationRepository],
       exports: [InstanceSettingsUtilService],
     };
   }
diff --git a/server/src/modules/instance-settings/service.ts b/server/src/modules/instance-settings/service.ts
index aadbf560d2..e3bc48b234 100644
--- a/server/src/modules/instance-settings/service.ts
+++ b/server/src/modules/instance-settings/service.ts
@@ -1,3 +1,4 @@
+import { User } from '@entities/user.entity';
 import { CreateInstanceSettingsDto, UpdateUserSettingsDto } from './dto';
 import { IInstanceSettingsService } from './Interfaces/IService';
 import { InstanceSettings } from '@entities/instance_settings.entity';
@@ -12,7 +13,7 @@ export class InstanceSettingsService implements IInstanceSettingsService {
   create(params: CreateInstanceSettingsDto): Promise<InstanceSettings> {
     throw new Error('Method not implemented.');
   }
-  update(params: UpdateUserSettingsDto): Promise<void> {
+  update(params: UpdateUserSettingsDto, user: User): Promise<void> {
     throw new Error('Method not implemented.');
   }
   delete(settings_id: string): Promise<any> {
diff --git a/server/src/modules/licensing/controller.ts b/server/src/modules/licensing/controller.ts
index 54706a4c09..efef126b1d 100644
--- a/server/src/modules/licensing/controller.ts
+++ b/server/src/modules/licensing/controller.ts
@@ -8,6 +8,8 @@ import { LicenseUpdateDto } from './dto';
 import { FeatureAbilityGuard } from './ability/guard';
 import { FEATURE_KEY } from './constants';
 import { InitFeature } from '@modules/app/decorators/init-feature.decorator';
+import { User as UserEntity } from '@entities/user.entity';
+import { User } from '@modules/app/decorators/user.decorator';
 
 @InitModule(MODULES.LICENSING)
 @Controller('license')
@@ -34,7 +36,7 @@ export class LicenseController implements ILicenseController {
   getLicenseTerms(): Promise<{ terms: Terms }> {
     throw new Error('Method not implemented.');
   }
-  updateLicense(licenseUpdateDto: LicenseUpdateDto): Promise<void> {
+  updateLicense(licenseUpdateDto: LicenseUpdateDto, @User() user: UserEntity): Promise<void> {
     throw new Error('Method not implemented.');
   }
 }
diff --git a/server/src/modules/licensing/interfaces/IController.ts b/server/src/modules/licensing/interfaces/IController.ts
index fbba0b527b..d6829eb73f 100644
--- a/server/src/modules/licensing/interfaces/IController.ts
+++ b/server/src/modules/licensing/interfaces/IController.ts
@@ -33,7 +33,7 @@ export interface ILicenseController {
    * @param licenseUpdateDto - The DTO containing the update information for the license.
    * @returns A promise that resolves when the license is updated.
    */
-  updateLicense(licenseUpdateDto: LicenseUpdateDto): Promise<void>;
+  updateLicense(licenseUpdateDto: LicenseUpdateDto, user: User): Promise<void>;
 }
 
 export interface ILicenseAppsController {
diff --git a/server/src/modules/licensing/interfaces/IService.ts b/server/src/modules/licensing/interfaces/IService.ts
index e94ef016b9..f1045bd94d 100644
--- a/server/src/modules/licensing/interfaces/IService.ts
+++ b/server/src/modules/licensing/interfaces/IService.ts
@@ -1,5 +1,6 @@
 import { EntityManager } from 'typeorm';
 import { LIMIT_TYPE } from '@modules/users/constants/lifecycle';
+import { User } from '@entities/user.entity';
 
 export interface ILicenseWorkflowsService {
   getWorkflowLimit(params: { limitFor: string; workspaceId?: string }): Promise<any>;
@@ -51,6 +52,6 @@ export interface ILicenseService {
   getFeatureAccess(): Promise<any>;
   getDomains(): Promise<{ domains: any; licenseStatus: any }>;
   getLicenseTerms(): Promise<{ terms: any }>;
-  updateLicense(dto: any): Promise<void>;
+  updateLicense(dto: any, user: User): Promise<void>;
   plans(): Promise<{ plans: any }>;
 }
diff --git a/server/src/modules/licensing/module.ts b/server/src/modules/licensing/module.ts
index 2025f40b22..5429202e0d 100644
--- a/server/src/modules/licensing/module.ts
+++ b/server/src/modules/licensing/module.ts
@@ -1,9 +1,10 @@
 import { DynamicModule } from '@nestjs/common';
 import { getImportPath } from '@modules/app/constants';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { LicenseRepository } from './repository';
 import { LicenseInitService, LicenseTermsService } from './interfaces/IService';
 import { FeatureAbilityFactory } from './ability';
+import { OrganizationRepository } from '@modules/organizations/repository';
 export class LicenseModule {
   static async forRoot(configs: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
     const importPath = await getImportPath(configs?.IS_GET_CONTEXT);
@@ -55,6 +56,7 @@ export class LicenseModule {
         LicenseDecryptService,
         LicenseWorkflowsService,
         FeatureAbilityFactory,
+        OrganizationRepository,
       ],
       controllers: [
         LicenseController,
diff --git a/server/src/modules/licensing/service.ts b/server/src/modules/licensing/service.ts
index 0b8ff4d77c..7840b9b615 100644
--- a/server/src/modules/licensing/service.ts
+++ b/server/src/modules/licensing/service.ts
@@ -1,6 +1,7 @@
 import { Injectable, HttpException } from '@nestjs/common';
 import { PLAN_DETAILS } from './constants';
 import { ILicenseService } from './interfaces/IService';
+import { User } from '@entities/user.entity';
 
 @Injectable()
 export class LicenseService implements ILicenseService {
@@ -16,7 +17,7 @@ export class LicenseService implements ILicenseService {
   getLicenseTerms(): Promise<{ terms: any }> {
     throw new Error('Method not implemented.');
   }
-  updateLicense(dto: any): Promise<void> {
+  updateLicense(dto: any, user: User): Promise<void> {
     throw new Error('Method not implemented.');
   }
 
diff --git a/server/src/modules/licensing/services/count.service.ts b/server/src/modules/licensing/services/count.service.ts
index 14c2421a6e..6734c0b162 100644
--- a/server/src/modules/licensing/services/count.service.ts
+++ b/server/src/modules/licensing/services/count.service.ts
@@ -5,7 +5,7 @@ import { Injectable } from '@nestjs/common';
 import { EntityManager, In, Not } from 'typeorm';
 import { App } from 'src/entities/app.entity';
 import { Organization } from '@entities/organization.entity';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { USER_ROLE } from '@modules/group-permissions/constants';
 import { ILicenseCountsService } from '../interfaces/IService';
 import { APP_TYPES } from '@modules/apps/constants';
diff --git a/server/src/modules/login-configs/ability/index.ts b/server/src/modules/login-configs/ability/index.ts
index 371c60a2a7..80f65f9298 100644
--- a/server/src/modules/login-configs/ability/index.ts
+++ b/server/src/modules/login-configs/ability/index.ts
@@ -23,6 +23,7 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
           FEATURE_KEY.GET_ORGANIZATION_CONFIGS,
           FEATURE_KEY.UPDATE_ORGANIZATION_SSO,
           FEATURE_KEY.UPDATE_ORGANIZATION_GENERAL_CONFIGS,
+          FEATURE_KEY.INSTANCE_SSO_INHERIT,
         ],
         Organization
       );
diff --git a/server/src/modules/login-configs/constants/feature.ts b/server/src/modules/login-configs/constants/feature.ts
index 6c94ebe0dc..cf1bdce62a 100644
--- a/server/src/modules/login-configs/constants/feature.ts
+++ b/server/src/modules/login-configs/constants/feature.ts
@@ -8,8 +8,15 @@ export const FEATURES: FeaturesConfig = {
       isPublic: true,
     },
     [FEATURE_KEY.GET_ORGANIZATION_CONFIGS]: {},
-    [FEATURE_KEY.UPDATE_ORGANIZATION_SSO]: {},
-    [FEATURE_KEY.UPDATE_ORGANIZATION_GENERAL_CONFIGS]: {},
+    [FEATURE_KEY.UPDATE_ORGANIZATION_SSO]: {
+      auditLogsKey: 'SSO_UPDATE',
+    },
+    [FEATURE_KEY.UPDATE_ORGANIZATION_GENERAL_CONFIGS]: {
+      auditLogsKey: 'WORKSPACE_LOGIN_SETTINGS_UPDATE',
+    },
+    [FEATURE_KEY.INSTANCE_SSO_INHERIT]: {
+      auditLogsKey: 'INSTANCE_SSO_INHERIT',
+    },
     [FEATURE_KEY.UPDATE_INSTANCE_SSO]: {},
     [FEATURE_KEY.UPDATE_INSTANCE_GENERAL_CONFIGS]: {},
     [FEATURE_KEY.GET_INSTANCE_SSO]: {},
diff --git a/server/src/modules/login-configs/constants/index.ts b/server/src/modules/login-configs/constants/index.ts
index 0fd2ec4548..26e9c301dd 100644
--- a/server/src/modules/login-configs/constants/index.ts
+++ b/server/src/modules/login-configs/constants/index.ts
@@ -6,4 +6,5 @@ export enum FEATURE_KEY {
   UPDATE_INSTANCE_SSO = 'update_instance_sso',
   UPDATE_INSTANCE_GENERAL_CONFIGS = 'update_instance_general_configs',
   GET_INSTANCE_SSO = 'get_instance_sso',
+  INSTANCE_SSO_INHERIT = 'instance_sso_inherit',
 }
diff --git a/server/src/modules/login-configs/controller.ts b/server/src/modules/login-configs/controller.ts
index 51e3f72635..187b46731f 100644
--- a/server/src/modules/login-configs/controller.ts
+++ b/server/src/modules/login-configs/controller.ts
@@ -13,6 +13,7 @@ import { FeatureAbilityGuard } from './ability/guard';
 import { SSOGuard } from '@modules/licensing/guards/sso.guard';
 import { InstanceConfigsUpdateDto } from './dto';
 import { NotFoundException } from '@nestjs/common';
+import { User as UserEntity } from '@entities/user.entity';
 
 @InitModule(MODULES.LOGIN_CONFIGS)
 @Controller('login-configs')
@@ -39,8 +40,8 @@ export class LoginConfigsController implements ILoginConfigsController {
   @InitFeature(FEATURE_KEY.UPDATE_ORGANIZATION_SSO)
   @UseGuards(JwtAuthGuard, FeatureAbilityGuard)
   @Patch('/organization-sso')
-  async updateOrganizationSSOConfigs(@Body() body, @User() user) {
-    const result: any = await this.loginConfigsService.updateOrganizationSSOConfigs(user.organizationId, body);
+  async updateOrganizationSSOConfigs(@Body() body, @User() user: UserEntity) {
+    const result: any = await this.loginConfigsService.updateOrganizationSSOConfigs(user, body);
     return decamelizeKeys({ id: result.id });
   }
 
@@ -65,7 +66,7 @@ export class LoginConfigsController implements ILoginConfigsController {
   @InitFeature(FEATURE_KEY.UPDATE_INSTANCE_GENERAL_CONFIGS)
   @UseGuards(JwtAuthGuard, FeatureAbilityGuard)
   @Patch('/instance-general')
-  async updateGeneralConfigs(@Body() instanceConfigsUpdateDto: InstanceConfigsUpdateDto) {
+  async updateGeneralConfigs(@Body() instanceConfigsUpdateDto: InstanceConfigsUpdateDto, @User() user: UserEntity) {
     throw new NotFoundException();
   }
 
@@ -75,9 +76,18 @@ export class LoginConfigsController implements ILoginConfigsController {
   @Patch('/organization-general')
   async updateOrganizationGeneralConfigs(
     @Body() organizationConfigsUpdateDto: OrganizationConfigsUpdateDto,
-    @User() user
+    @User() user: UserEntity
   ) {
-    await this.loginConfigsService.updateGeneralOrganizationConfigs(user.organizationId, organizationConfigsUpdateDto);
+    await this.loginConfigsService.updateGeneralOrganizationConfigs(user, organizationConfigsUpdateDto);
+    return;
+  }
+
+  @InitFeature(FEATURE_KEY.INSTANCE_SSO_INHERIT)
+  @UseGuards(JwtAuthGuard, FeatureAbilityGuard)
+  @Patch('/organization-general/inherit-sso')
+  async updateInheritSSO(@Body() organizationConfigsUpdateDto: OrganizationConfigsUpdateDto, @User() user: UserEntity) {
+    const inheritSso = organizationConfigsUpdateDto.inheritSSO;
+    await this.loginConfigsService.updateInheritSSO(user, inheritSso);
     return;
   }
 }
diff --git a/server/src/modules/login-configs/interfaces/IController.ts b/server/src/modules/login-configs/interfaces/IController.ts
index 663c34eb6d..33750b0e59 100644
--- a/server/src/modules/login-configs/interfaces/IController.ts
+++ b/server/src/modules/login-configs/interfaces/IController.ts
@@ -1,6 +1,6 @@
 // src/interfaces/controllers/login-configs-controller.interface.ts
 import { OrganizationConfigsUpdateDto, InstanceConfigsUpdateDto } from '../dto';
-import { User as UserEntity } from '@entities/user.entity';
+import { User, User as UserEntity } from '@entities/user.entity';
 
 export interface ILoginConfigsController {
   /**
@@ -37,11 +37,13 @@ export interface ILoginConfigsController {
    * Update instance general configs
    * PATCH '/instance-general'
    */
-  updateGeneralConfigs(body: InstanceConfigsUpdateDto): Promise<any>;
+  updateGeneralConfigs(body: InstanceConfigsUpdateDto, user: User): Promise<any>;
 
   /**
    * Update organization general configs
    * PATCH '/organization-general'
    */
   updateOrganizationGeneralConfigs(body: OrganizationConfigsUpdateDto, user: UserEntity): Promise<any>;
+
+  updateInheritSSO(body: OrganizationConfigsUpdateDto, user: User);
 }
diff --git a/server/src/modules/login-configs/interfaces/IService.ts b/server/src/modules/login-configs/interfaces/IService.ts
index ab984a73bb..ec213c45b0 100644
--- a/server/src/modules/login-configs/interfaces/IService.ts
+++ b/server/src/modules/login-configs/interfaces/IService.ts
@@ -1,3 +1,4 @@
+import { User } from '@entities/user.entity';
 import { OrganizationConfigsUpdateDto } from '../dto';
 
 export interface SSOConfig {
@@ -23,7 +24,7 @@ export interface ILoginConfigsService {
    * Update organization SSO configs
    */
   updateOrganizationSSOConfigs(
-    organizationId: string,
+    user: User,
     params: {
       type: string;
       configs: any;
@@ -34,7 +35,7 @@ export interface ILoginConfigsService {
   /**
    * Update general organization configs
    */
-  updateGeneralOrganizationConfigs(organizationId: string, params: OrganizationConfigsUpdateDto): Promise<any>;
+  updateGeneralOrganizationConfigs(user: User, params: OrganizationConfigsUpdateDto): Promise<any>;
 
   /**
    * Get instance SSO configs
@@ -49,5 +50,7 @@ export interface ILoginConfigsService {
   /**
    * Validate and update system parameters
    */
-  validateAndUpdateSystemParams(params: any): Promise<any>;
+  validateAndUpdateSystemParams(params: any, user: User): Promise<any>;
+
+  updateInheritSSO(user: User, param: boolean): Promise<void>;
 }
diff --git a/server/src/modules/login-configs/service.ts b/server/src/modules/login-configs/service.ts
index cdd364ff41..d317b0de51 100644
--- a/server/src/modules/login-configs/service.ts
+++ b/server/src/modules/login-configs/service.ts
@@ -9,6 +9,9 @@ import { OrganizationRepository } from '@modules/organizations/repository';
 import { ConfigScope, SSOType } from '@entities/sso_config.entity';
 import { cleanObject } from '@helpers/utils.helper';
 import { OrganizationConfigsUpdateDto } from './dto';
+import { User } from '@entities/user.entity';
+import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
+import { RequestContext } from '@modules/request-context/service';
 import { SsoConfigOidcGroupSyncRepository } from './oidc-group-sync.repository';
 
 @Injectable()
@@ -52,7 +55,8 @@ export class LoginConfigsService implements ILoginConfigsService {
     };
   }
 
-  async updateOrganizationSSOConfigs(organizationId: string, params: any): Promise<any> {
+  async updateOrganizationSSOConfigs(user: User, params: any): Promise<any> {
+    const organizationId = user.organizationId;
     const { type, configs, enabled, oidcGroupSyncs } = params;
 
     if (
@@ -62,6 +66,15 @@ export class LoginConfigsService implements ILoginConfigsService {
     }
 
     await this.loginConfigsUtilService.encryptSecret(configs);
+    const organization = await this.organizationsRepository.findOne({ where: { id: organizationId } });
+    //SSO_UPDATE audit
+    const auditLogsData = {
+      userId: user.id,
+      organizationId: organizationId,
+      resourceId: organizationId,
+      resourceName: organization.name,
+    };
+    RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
 
     const ssoConfig = await this.ssoConfigsRepository.createOrUpdateSSOConfig({
       sso: type,
@@ -78,7 +91,8 @@ export class LoginConfigsService implements ILoginConfigsService {
     return ssoConfig;
   }
 
-  async updateGeneralOrganizationConfigs(organizationId: string, params: OrganizationConfigsUpdateDto) {
+  async updateGeneralOrganizationConfigs(user: User, params: OrganizationConfigsUpdateDto) {
+    const organizationId = user.organizationId;
     const { domain, enableSignUp, inheritSSO, automaticSsoLogin } = params;
 
     const updatableParams = {
@@ -114,7 +128,32 @@ export class LoginConfigsService implements ILoginConfigsService {
 
     // removing keys with undefined values
     cleanObject(updatableParams);
+    const organization = await this.organizationsRepository.findOne({ where: { id: organizationId } });
     await this.organizationsRepository.updateOne(organizationId, updatableParams);
+
+    //WORKSPACE_LOGIN_SETTINGS_UPDATE audit
+    const auditLogsData = {
+      userId: user.id,
+      organizationId: organizationId,
+      resourceId: organizationId,
+      resourceName: organization.name,
+    };
+    RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
+  }
+
+  async updateInheritSSO(user: User, param: boolean): Promise<void> {
+    const organizationId = user.organizationId;
+    const organization = await this.organizationsRepository.findOne({ where: { id: organizationId } });
+    await this.organizationsRepository.update({ id: organizationId }, { inheritSSO: param });
+
+    //INSTANCE_SSO_INHERIT audit
+    const auditLogsData = {
+      userId: user.id,
+      organizationId: organizationId,
+      resourceId: organizationId,
+      resourceName: organization.name,
+    };
+    RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
   }
 
   async getInstanceSSOConfigs() {
@@ -144,7 +183,7 @@ export class LoginConfigsService implements ILoginConfigsService {
     throw new Error('Method not implemented.');
   }
 
-  public async validateAndUpdateSystemParams(params: any): Promise<void> {
+  public async validateAndUpdateSystemParams(params: any, user: User): Promise<void> {
     throw new Error('Method not implemented.');
   }
 }
diff --git a/server/src/modules/login-configs/types/index.ts b/server/src/modules/login-configs/types/index.ts
index fb410e9e2d..090de4d60a 100644
--- a/server/src/modules/login-configs/types/index.ts
+++ b/server/src/modules/login-configs/types/index.ts
@@ -40,6 +40,7 @@ interface Features {
   [FEATURE_KEY.GET_ORGANIZATION_CONFIGS]: FeatureConfig;
   [FEATURE_KEY.UPDATE_ORGANIZATION_SSO]: FeatureConfig;
   [FEATURE_KEY.UPDATE_ORGANIZATION_GENERAL_CONFIGS]: FeatureConfig;
+  [FEATURE_KEY.INSTANCE_SSO_INHERIT]: FeatureConfig;
   [FEATURE_KEY.UPDATE_INSTANCE_SSO]: FeatureConfig;
   [FEATURE_KEY.UPDATE_INSTANCE_GENERAL_CONFIGS]: FeatureConfig;
   [FEATURE_KEY.GET_INSTANCE_SSO]: FeatureConfig;
diff --git a/server/src/modules/modules/module.ts b/server/src/modules/modules/module.ts
index dc442ffa8c..59c545174e 100644
--- a/server/src/modules/modules/module.ts
+++ b/server/src/modules/modules/module.ts
@@ -13,6 +13,7 @@ import { AiModule } from '@modules/ai/module';
 import { AppsRepository } from '@modules/apps/repository';
 import { AppPermissionsModule } from '@modules/app-permissions/module';
 import { RolesRepository } from '@modules/roles/repository';
+import { AppGitRepository } from '@modules/app-git/repository';
 @Module({})
 export class ModulesModule {
   static async register(configs: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -50,6 +51,7 @@ export class ModulesModule {
         OrganizationRepository,
         DataSourcesRepository,
         RolesRepository,
+        AppGitRepository
       ],
     };
   }
diff --git a/server/src/modules/onboarding/module.ts b/server/src/modules/onboarding/module.ts
index 71acbf4981..1fc08e18b4 100644
--- a/server/src/modules/onboarding/module.ts
+++ b/server/src/modules/onboarding/module.ts
@@ -5,7 +5,7 @@ import { InstanceSettingsModule } from '@modules/instance-settings/module';
 import { SessionModule } from '@modules/session/module';
 import { OrganizationUsersModule } from '@modules/organization-users/module';
 import { OrganizationUsersRepository } from '@modules/organization-users/repository';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { OrganizationRepository } from '@modules/organizations/repository';
 import { RolesModule } from '@modules/roles/module';
 import { FeatureAbilityFactory } from './ability';
diff --git a/server/src/modules/onboarding/service.ts b/server/src/modules/onboarding/service.ts
index 33d6f9e5a7..888a8c74f9 100644
--- a/server/src/modules/onboarding/service.ts
+++ b/server/src/modules/onboarding/service.ts
@@ -47,7 +47,7 @@ import { EventEmitter2 } from '@nestjs/event-emitter';
 import { OrganizationRepository } from '@modules/organizations/repository';
 import { EMAIL_EVENTS } from '@modules/email/constants';
 import { OnboardingCompletedDto } from '@modules/onboarding/dto';
-import { UserRepository } from '../users/repository';
+import { UserRepository } from '../users/repositories/repository';
 import { OnboardingUtilService } from './util.service';
 import { SessionUtilService } from '../session/util.service';
 import { OrganizationUsersUtilService } from '../organization-users/util.service';
diff --git a/server/src/modules/onboarding/util.service.ts b/server/src/modules/onboarding/util.service.ts
index 5c32ef89e8..9a8d461874 100644
--- a/server/src/modules/onboarding/util.service.ts
+++ b/server/src/modules/onboarding/util.service.ts
@@ -1,7 +1,7 @@
 import { ForbiddenException, Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { User } from '@entities/user.entity';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { OrganizationUser } from '../../entities/organization_user.entity';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { TrialUserDto } from '@modules/onboarding/dto/user.dto';
diff --git a/server/src/modules/organization-themes/constants/index.ts b/server/src/modules/organization-themes/constants/index.ts
index 581c2181c0..fb5400c5df 100644
--- a/server/src/modules/organization-themes/constants/index.ts
+++ b/server/src/modules/organization-themes/constants/index.ts
@@ -5,7 +5,7 @@ export enum THEME_UPDATE_TYPE {
   DEFAULT = 'default',
 }
 
-export const defaultThemeName = 'TJ default';
+export const defaultThemeName = 'Tooljet';
 
 export const TJDefaultTheme: Definition = {
   brand: {
@@ -35,10 +35,6 @@ export const TJDefaultTheme: Definition = {
         light: '#6A727C',
         dark: '#858C94',
       },
-      disabled: {
-        light: '#ACB2B9',
-        dark: '#545B64',
-      },
     },
   },
   border: {
@@ -56,10 +52,6 @@ export const TJDefaultTheme: Definition = {
         light: '#E4E7EB',
         dark: '#EEF0F1',
       },
-      disabled: {
-        light: '#E4E7EB',
-        dark: '#F6F8FA',
-      },
     },
   },
   systemStatus: {
@@ -69,7 +61,7 @@ export const TJDefaultTheme: Definition = {
         dark: '#318344',
       },
       error: {
-        light: '#D72D39',
+        light: '#D72D39',   
         dark: '#D03F43',
       },
       warning: {
diff --git a/server/src/modules/organization-users/module.ts b/server/src/modules/organization-users/module.ts
index 3ebec059aa..ce3b40fc02 100644
--- a/server/src/modules/organization-users/module.ts
+++ b/server/src/modules/organization-users/module.ts
@@ -1,7 +1,7 @@
 import { DynamicModule } from '@nestjs/common';
 import { getImportPath } from '@modules/app/constants';
 import { EncryptionModule } from '@modules/encryption/module';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { RolesRepository } from '@modules/roles/repository';
 import { OrganizationUsersRepository } from './repository';
 import { GroupPermissionsRepository } from '@modules/group-permissions/repository';
diff --git a/server/src/modules/organization-users/service.ts b/server/src/modules/organization-users/service.ts
index 467b5e9539..bd24e9bb51 100644
--- a/server/src/modules/organization-users/service.ts
+++ b/server/src/modules/organization-users/service.ts
@@ -17,7 +17,7 @@ import { EMAIL_EVENTS } from '@modules/email/constants';
 import { LicenseUserService } from '@modules/licensing/services/user.service';
 import { LicenseOrganizationService } from '@modules/licensing/services/organization.service';
 import { OrganizationUsersUtilService } from './util.service';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { MAX_ROW_COUNT } from './constants';
 import { isPlural } from '@helpers/utils.helper';
 import { Response } from 'express';
diff --git a/server/src/modules/organization-users/util.service.ts b/server/src/modules/organization-users/util.service.ts
index ba6deb3d65..0e6feb6907 100644
--- a/server/src/modules/organization-users/util.service.ts
+++ b/server/src/modules/organization-users/util.service.ts
@@ -26,7 +26,7 @@ import { GroupPermissionsUtilService } from '../group-permissions/util.service';
 import { RolesRepository } from '../roles/repository';
 import { WORKSPACE_STATUS } from '@modules/users/constants/lifecycle';
 import { InstanceSettingsUtilService } from '@modules/instance-settings/util.service';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { UserDetailsService } from './services/user-details.service';
 import { FetchUserResponse, InvitedUserType, RoleUpdate, UserFilterOptions } from './types';
 import { GroupPermissionsRepository } from '@modules/group-permissions/repository';
diff --git a/server/src/modules/organizations/ability/index.ts b/server/src/modules/organizations/ability/index.ts
index 49eaa256dd..78a6a51687 100644
--- a/server/src/modules/organizations/ability/index.ts
+++ b/server/src/modules/organizations/ability/index.ts
@@ -44,7 +44,8 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
       can([FEATURE_KEY.UPDATE, FEATURE_KEY.GET, FEATURE_KEY.CHECK_UNIQUE], Organization);
     }
     if (superAdmin) {
-      can([FEATURE_KEY.WORKSPACE_STATUS_UPDATE, FEATURE_KEY.SET_DEFAULT], Organization);
+      can([FEATURE_KEY.WORKSPACE_ARCHIVE, FEATURE_KEY.SET_DEFAULT], Organization);
+      can([FEATURE_KEY.WORKSPACE_UNARCHIVE, FEATURE_KEY.SET_DEFAULT], Organization);
     }
   }
 }
diff --git a/server/src/modules/organizations/constants/feature.ts b/server/src/modules/organizations/constants/feature.ts
index 7276f855fb..707ab435f1 100644
--- a/server/src/modules/organizations/constants/feature.ts
+++ b/server/src/modules/organizations/constants/feature.ts
@@ -8,9 +8,18 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.GET]: {
       isPublic: true,
     },
-    [FEATURE_KEY.WORKSPACE_STATUS_UPDATE]: {},
-    [FEATURE_KEY.UPDATE]: {},
-    [FEATURE_KEY.CREATE]: {},
+    [FEATURE_KEY.WORKSPACE_ARCHIVE]: {
+      auditLogsKey: 'WORKSPACE_ARCHIVE',
+    },
+    [FEATURE_KEY.WORKSPACE_UNARCHIVE]: {
+      auditLogsKey: 'WORKSPACE_UNARCHIVE',
+    },
+    [FEATURE_KEY.UPDATE]: {
+      auditLogsKey: 'WORKSPACE_UPDATE',
+    },
+    [FEATURE_KEY.CREATE]: {
+      auditLogsKey: 'WORKSPACE_CREATE',
+    },
     [FEATURE_KEY.CHECK_UNIQUE_ONBOARDING]: {
       isPublic: true,
     },
diff --git a/server/src/modules/organizations/constants/index.ts b/server/src/modules/organizations/constants/index.ts
index 45b2f85044..432dfc6261 100644
--- a/server/src/modules/organizations/constants/index.ts
+++ b/server/src/modules/organizations/constants/index.ts
@@ -22,7 +22,8 @@ export const CONSTRAINTS = [
 export enum FEATURE_KEY {
   GET = 'get',
   UPDATE = 'update',
-  WORKSPACE_STATUS_UPDATE = 'status_update',
+  WORKSPACE_ARCHIVE = 'workspace_archive',
+  WORKSPACE_UNARCHIVE = 'workspace_unarchive',
   CHECK_UNIQUE = 'check_unique',
   CREATE = 'create',
   CHECK_UNIQUE_ONBOARDING = 'check_unique_onboarding',
diff --git a/server/src/modules/organizations/controller.ts b/server/src/modules/organizations/controller.ts
index 2de2ed9936..509bcd98d9 100644
--- a/server/src/modules/organizations/controller.ts
+++ b/server/src/modules/organizations/controller.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Get, Patch, UseGuards, Query, Param, NotImplementedException } from '@nestjs/common';
+import { Body, Controller, Get, Patch, UseGuards, Query, Param } from '@nestjs/common';
 import { OrganizationsService } from '@modules/organizations/service';
 import { decamelizeKeys } from 'humps';
 import { User } from '@modules/app/decorators/user.decorator';
@@ -38,7 +38,7 @@ export class OrganizationsController implements IOrganizationsController {
   @UseGuards(JwtAuthGuard, FeatureAbilityGuard)
   @Patch()
   async updateOrganizationNameAndSlug(@Body() organizationUpdateDto: OrganizationUpdateDto, @User() user: UserEntity) {
-    await this.organizationsService.updateOrganizationNameAndSlug(user.organizationId, organizationUpdateDto);
+    await this.organizationsService.updateOrganizationNameAndSlug(user, organizationUpdateDto);
     return;
   }
 
@@ -50,12 +50,27 @@ export class OrganizationsController implements IOrganizationsController {
     return;
   }
 
-  // Note : This endpoint is used for archive/unarchive workspaces.
-  @InitFeature(FEATURE_KEY.WORKSPACE_STATUS_UPDATE)
+  @InitFeature(FEATURE_KEY.WORKSPACE_ARCHIVE)
   @UseGuards(JwtAuthGuard)
-  @Patch(':id')
-  async updateById(@Body() organizationUpdateDto: OrganizationStatusUpdateDto, @Param('id') organizationId: string) {
-    await this.organizationsService.updateOrganizationStatus(organizationId, organizationUpdateDto);
+  @Patch('/archive/:id')
+  async archiveOrganization(
+    @Body() organizationUpdateDto: OrganizationStatusUpdateDto,
+    @Param('id') organizationId: string,
+    @User() user: UserEntity
+  ) {
+    await this.organizationsService.updateOrganizationStatus(organizationId, organizationUpdateDto, user);
+    return;
+  }
+
+  @InitFeature(FEATURE_KEY.WORKSPACE_UNARCHIVE)
+  @UseGuards(JwtAuthGuard)
+  @Patch('/unarchive/:id')
+  async unarchiveOrganization(
+    @Body() organizationUpdateDto: OrganizationStatusUpdateDto,
+    @Param('id') organizationId: string,
+    @User() user: UserEntity
+  ) {
+    await this.organizationsService.updateOrganizationStatus(organizationId, organizationUpdateDto, user);
     return;
   }
 
diff --git a/server/src/modules/organizations/interfaces/IController.ts b/server/src/modules/organizations/interfaces/IController.ts
index 2654fe53db..65e701c9ad 100644
--- a/server/src/modules/organizations/interfaces/IController.ts
+++ b/server/src/modules/organizations/interfaces/IController.ts
@@ -6,7 +6,16 @@ export interface IOrganizationsController {
 
   updateOrganizationNameAndSlug(organizationUpdateDto: OrganizationUpdateDto, user: User): Promise<void>;
 
-  updateById(organizationUpdateDto: OrganizationStatusUpdateDto, organizationId: string): Promise<void>;
+  archiveOrganization(
+    organizationUpdateDto: OrganizationStatusUpdateDto,
+    organizationId: string,
+    user: User
+  ): Promise<void>;
+  unarchiveOrganization(
+    organizationUpdateDto: OrganizationStatusUpdateDto,
+    organizationId: string,
+    user: User
+  ): Promise<void>;
 
   checkWorkspaceUnique(name: string, slug: string): Promise<void>;
 
diff --git a/server/src/modules/organizations/interfaces/IService.ts b/server/src/modules/organizations/interfaces/IService.ts
index 658418e4f5..2729b5d511 100644
--- a/server/src/modules/organizations/interfaces/IService.ts
+++ b/server/src/modules/organizations/interfaces/IService.ts
@@ -1,6 +1,7 @@
 import { Organization } from 'src/entities/organization.entity';
 import { OrganizationUpdateDto, OrganizationStatusUpdateDto } from '@modules/organizations/dto';
 import { EntityManager } from 'typeorm';
+import { User } from '@entities/user.entity';
 
 export interface IOrganizationsService {
   fetchOrganizations(
@@ -11,9 +12,13 @@ export interface IOrganizationsService {
     name?: string
   ): Promise<{ organizations: Organization[]; totalCount: number }>;
 
-  updateOrganizationNameAndSlug(organizationId: string, updatableData: OrganizationUpdateDto): Promise<Organization>;
+  updateOrganizationNameAndSlug(user: User, updatableData: OrganizationUpdateDto): Promise<Organization>;
 
-  updateOrganizationStatus(organizationId: string, updatableData: OrganizationStatusUpdateDto): Promise<Organization>;
+  updateOrganizationStatus(
+    organizationId: string,
+    updatableData: OrganizationStatusUpdateDto,
+    user: User
+  ): Promise<Organization>;
 
   checkWorkspaceUniqueness(name: string, slug: string): Promise<void>;
 
diff --git a/server/src/modules/organizations/service.ts b/server/src/modules/organizations/service.ts
index 8e8f715399..47a3e7cb02 100644
--- a/server/src/modules/organizations/service.ts
+++ b/server/src/modules/organizations/service.ts
@@ -8,6 +8,9 @@ import { OrganizationStatusUpdateDto, OrganizationUpdateDto } from '@modules/org
 import { IOrganizationsService } from '@modules/organizations/interfaces/IService';
 import { LicenseOrganizationService } from '@modules/licensing/services/organization.service';
 import { WORKSPACE_STATUS } from '@modules/users/constants/lifecycle';
+import { User } from '@entities/user.entity';
+import { RequestContext } from '@modules/request-context/service';
+import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
 
 @Injectable()
 export class OrganizationsService implements IOrganizationsService {
@@ -36,19 +39,40 @@ export class OrganizationsService implements IOrganizationsService {
     }
   }
 
-  async updateOrganizationNameAndSlug(
-    organizationId: string,
-    updatableData: OrganizationUpdateDto
-  ): Promise<Organization> {
+  async updateOrganizationNameAndSlug(user: User, updatableData: OrganizationUpdateDto): Promise<Organization> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
+      const organizationId = user.organizationId;
+      const organization = await manager.findOne(Organization, { where: { id: organizationId } });
       await this.organizationRepository.updateOne(organizationId, updatableData, manager);
+
+      //WORKSPACE_UPDATE audit
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: organizationId,
+        resourceName: organization.name,
+        resourceData: {
+          previous_workspace_details: {
+            id: organizationId,
+            name: organization.name,
+            slug: organization.slug,
+          },
+          updated_workspace_details: {
+            id: organizationId,
+            name: updatableData.name,
+            slug: updatableData.slug,
+          },
+        },
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
       return;
     });
   }
 
   async updateOrganizationStatus(
     organizationId: string,
-    updatableData: OrganizationStatusUpdateDto
+    updatableData: OrganizationStatusUpdateDto,
+    user: User
   ): Promise<Organization> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const organization = await this.organizationRepository.findOne({ where: { id: organizationId } });
@@ -60,6 +84,31 @@ export class OrganizationsService implements IOrganizationsService {
       if (updatableData.status === WORKSPACE_STATUS.ACTIVE) {
         await this.licenseOrganizationService.validateOrganization(manager); //Check for only unarchiving
       }
+
+      //WORKSPACE_ARCHIVE audit WORKSPACE_UNARCHIVE audit
+      const resourceData =
+        updatableData.status === WORKSPACE_STATUS.ACTIVE
+          ? {
+              unarchived_workspace: {
+                id: organizationId,
+                name: organization.name,
+              },
+            }
+          : {
+              archived_workspace: {
+                id: organizationId,
+                name: organization.name,
+              },
+            };
+
+      const auditLogsData = {
+        userId: user.id,
+        organizationId: organizationId,
+        resourceId: organizationId,
+        resourceName: organization.name,
+        resourceData: resourceData,
+      };
+      RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
       return;
     });
   }
diff --git a/server/src/modules/organizations/types/index.ts b/server/src/modules/organizations/types/index.ts
index ea5fc8c08f..949b507344 100644
--- a/server/src/modules/organizations/types/index.ts
+++ b/server/src/modules/organizations/types/index.ts
@@ -8,7 +8,8 @@ interface Features {
   [FEATURE_KEY.UPDATE]: FeatureConfig;
   [FEATURE_KEY.CREATE]: FeatureConfig;
   [FEATURE_KEY.CHECK_UNIQUE_ONBOARDING]: FeatureConfig;
-  [FEATURE_KEY.WORKSPACE_STATUS_UPDATE]: FeatureConfig;
+  [FEATURE_KEY.WORKSPACE_ARCHIVE]: FeatureConfig;
+  [FEATURE_KEY.WORKSPACE_UNARCHIVE]: FeatureConfig;
   [FEATURE_KEY.SET_DEFAULT]: FeatureConfig;
 }
 
diff --git a/server/src/modules/profile/guards/password-revalidate.guard.ts b/server/src/modules/profile/guards/password-revalidate.guard.ts
index 1fbe28fd44..c3a8a9be89 100644
--- a/server/src/modules/profile/guards/password-revalidate.guard.ts
+++ b/server/src/modules/profile/guards/password-revalidate.guard.ts
@@ -1,4 +1,4 @@
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
 import { Observable } from 'rxjs';
 const bcrypt = require('bcrypt');
diff --git a/server/src/modules/profile/module.ts b/server/src/modules/profile/module.ts
index 20cc363fbc..a96356b2f2 100644
--- a/server/src/modules/profile/module.ts
+++ b/server/src/modules/profile/module.ts
@@ -1,6 +1,6 @@
 import { DynamicModule } from '@nestjs/common';
 import { getImportPath } from '@modules/app/constants';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { FilesRepository } from '@modules/files/repository';
 import { FeatureAbilityFactory } from './ability';
 
diff --git a/server/src/modules/profile/service.ts b/server/src/modules/profile/service.ts
index 17ab95d476..75adff4fd6 100644
--- a/server/src/modules/profile/service.ts
+++ b/server/src/modules/profile/service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { ProfileUpdateDto } from '@modules/profile/dto';
 import { dbTransactionWrap } from '@helpers/database.helper';
 import { EntityManager } from 'typeorm';
diff --git a/server/src/modules/profile/util.service.ts b/server/src/modules/profile/util.service.ts
index 2631627e2b..369b7afa05 100644
--- a/server/src/modules/profile/util.service.ts
+++ b/server/src/modules/profile/util.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
 import { EntityManager } from 'typeorm';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { FilesRepository } from '@modules/files/repository';
 import { File } from '@entities/file.entity';
 import { IProfileUtilService } from '@modules/profile/interfaces/IService';
diff --git a/server/src/modules/session/guards/session-auth-guard.ts b/server/src/modules/session/guards/session-auth-guard.ts
index a003668dc7..f8c32c7147 100644
--- a/server/src/modules/session/guards/session-auth-guard.ts
+++ b/server/src/modules/session/guards/session-auth-guard.ts
@@ -1,4 +1,4 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { ExecutionContext, Injectable, UnauthorizedException } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 
 @Injectable()
@@ -6,15 +6,20 @@ export class SessionAuthGuard extends AuthGuard('jwt') {
   async canActivate(context: ExecutionContext): Promise<any> {
     let user;
     const request = context.switchToHttp().getRequest();
-    request.isGetUserSession = true;
-    if (request?.cookies['tj_auth_token']) {
-      try {
-        user = await super.canActivate(context);
-      } catch (err) {
-        return false;
-      }
-      return user;
+    // ✅ Allow execution only if one of the expected auth methods is present
+    const hasJwtCookie = !!request.cookies['tj_auth_token'];
+    const hasPatHeader = !!request.headers['tj_auth_token'];
+
+    if (!hasJwtCookie && !hasPatHeader) {
+      return false;
     }
-    return false;
+
+    request.isGetUserSession = true;
+    try {
+      user = await super.canActivate(context);
+    } catch (err) {
+      return false;
+    }
+    return user;
   }
 }
diff --git a/server/src/modules/session/interfaces/IService.ts b/server/src/modules/session/interfaces/IService.ts
index 86bf33fac2..14d3411a0f 100644
--- a/server/src/modules/session/interfaces/IService.ts
+++ b/server/src/modules/session/interfaces/IService.ts
@@ -32,4 +32,5 @@ export interface JWTPayload {
   isSSOLogin: boolean;
   isPasswordLogin: boolean;
   invitedOrganizationId?: string;
+  isPatLogin?: boolean;
 }
diff --git a/server/src/modules/session/jwt/jwt.strategy.ts b/server/src/modules/session/jwt/jwt.strategy.ts
index 0a689380c3..843d66a65e 100644
--- a/server/src/modules/session/jwt/jwt.strategy.ts
+++ b/server/src/modules/session/jwt/jwt.strategy.ts
@@ -5,20 +5,27 @@ import { ConfigService } from '@nestjs/config';
 import { User } from 'src/entities/user.entity';
 import { WORKSPACE_USER_STATUS } from '@modules/users/constants/lifecycle';
 import { Request } from 'express';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { SessionUtilService } from '../util.service';
 import { JWTPayload } from '../types';
+import { ForbiddenException } from '@nestjs/common';
+import { UserSessionRepository } from '@modules/session/repository';
 
 @Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy) {
   constructor(
     protected readonly configService: ConfigService,
     protected readonly sessionUtilService: SessionUtilService,
-    protected readonly userRepository: UserRepository
+    protected readonly userRepository: UserRepository,
+    protected readonly sessionRepository: UserSessionRepository
   ) {
     super({
-      jwtFromRequest: (request) => {
-        return request?.cookies['tj_auth_token'];
+      jwtFromRequest: (request: Request) => {
+        // Ensure PAT is processed correctly without bypassing JWT validation
+        if (request.headers['tj_auth_token']) {
+          return request.headers['tj_auth_token'];
+        }
+        return request.cookies['tj_auth_token'];
       },
       ignoreExpiration: true,
       secretOrKey: configService.get<string>('SECRET_KEY_BASE'),
@@ -45,13 +52,17 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
       return user;
     }
 
-    const organizationId =
+    let organizationId =
       typeof req.headers['tj-workspace-id'] === 'object'
         ? req.headers['tj-workspace-id'][0]
         : req.headers['tj-workspace-id'];
 
+    if (!organizationId && payload?.isPATLogin && payload?.appId) {
+      organizationId = payload.organizationIds[0];
+    }
+
     if (isUserMandatory) {
-      // header deos not exist
+      // header does not exist
       if (!organizationId) return false;
 
       // No authenticated workspaces
@@ -69,7 +80,11 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
     if (payload?.sub && organizationId && !isInviteSession) {
       /* Usual JWT case: user with valid organization id */
       const archivedWorkspaceUser = isGettingOrganizations || req['isSwitchingOrganization'];
-      user = await this.userRepository.findByEmail(payload.sub, archivedWorkspaceUser ? null : organizationId, WORKSPACE_USER_STATUS.ACTIVE);
+      user = await this.userRepository.findByEmail(
+        payload.sub,
+        archivedWorkspaceUser ? null : organizationId,
+        WORKSPACE_USER_STATUS.ACTIVE
+      );
       if (bypassOrganizationValidation) {
         await this.sessionUtilService.findOrganization(organizationId);
       }
diff --git a/server/src/modules/session/module.ts b/server/src/modules/session/module.ts
index 61442169d7..c638705ac4 100644
--- a/server/src/modules/session/module.ts
+++ b/server/src/modules/session/module.ts
@@ -7,12 +7,13 @@ import { MetaModule } from '@modules/meta/module';
 import { RolesRepository } from '@modules/roles/repository';
 import { EncryptionModule } from '@modules/encryption/module';
 import { SessionScheduler } from './scheduler';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { AppsRepository } from '@modules/apps/repository';
 import { OrganizationRepository } from '@modules/organizations/repository';
 import { OrganizationUsersRepository } from '@modules/organization-users/repository';
 import { GroupPermissionsRepository } from '@modules/group-permissions/repository';
 import { FeatureAbilityFactory } from './ability';
+import { UserSessionRepository } from './repository';
 
 export class SessionModule {
   static async register(config: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -22,6 +23,25 @@ export class SessionModule {
     const { SessionUtilService } = await import(`${importPath}/session/util.service`);
     const { JwtStrategy } = await import(`${importPath}/session/jwt/jwt.strategy`);
 
+    const providerImports = [
+      RolesRepository,
+      SessionService,
+      SessionUtilService,
+      UserRepository,
+      AppsRepository,
+      OrganizationRepository,
+      OrganizationUsersRepository,
+      GroupPermissionsRepository,
+      JwtStrategy,
+      FeatureAbilityFactory,
+      UserSessionRepository,
+    ];
+
+    if (!config.IS_GET_CONTEXT) {
+      providerImports.push(SessionScheduler);
+    }
+    
+
     return {
       module: SessionModule,
       imports: [
@@ -38,19 +58,7 @@ export class SessionModule {
         }),
       ],
       controllers: [SessionController],
-      providers: [
-        RolesRepository,
-        SessionService,
-        SessionUtilService,
-        UserRepository,
-        AppsRepository,
-        OrganizationRepository,
-        OrganizationUsersRepository,
-        GroupPermissionsRepository,
-        JwtStrategy,
-        SessionScheduler,
-        FeatureAbilityFactory,
-      ],
+      providers: providerImports,
       exports: [SessionUtilService],
     };
   }
diff --git a/server/src/modules/session/repository.ts b/server/src/modules/session/repository.ts
index e69de29bb2..4bfd5b9fc1 100644
--- a/server/src/modules/session/repository.ts
+++ b/server/src/modules/session/repository.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@nestjs/common';
+import { DataSource, Repository } from 'typeorm';
+import { UserSessions } from '@entities/user_sessions.entity';
+
+@Injectable()
+export class UserSessionRepository extends Repository<UserSessions> {
+  constructor(private readonly dataSource: DataSource) {
+    super(UserSessions, dataSource.createEntityManager());
+  }
+
+  async getSession(sessionId: string): Promise<UserSessions | null> {
+    return this.findOne({
+      where: { id: sessionId },
+      relations: ['user', 'pat'],
+    });
+  }
+}
diff --git a/server/src/modules/session/scheduler.ts b/server/src/modules/session/scheduler.ts
index 47c61eb56a..1a42828adb 100644
--- a/server/src/modules/session/scheduler.ts
+++ b/server/src/modules/session/scheduler.ts
@@ -1,3 +1,4 @@
+import { UserPersonalAccessToken } from '@entities/user_personal_access_tokens.entity';
 import { Injectable } from '@nestjs/common';
 import { Cron, CronExpression } from '@nestjs/schedule';
 import { UserSessions } from 'src/entities/user_sessions.entity';
@@ -8,8 +9,11 @@ import { EntityManager, LessThan } from 'typeorm';
 export class SessionScheduler {
   @Cron(CronExpression.EVERY_HOUR)
   async handleCron() {
-    console.log('starting job to clear expired sessions at ', new Date().toISOString());
+    console.log('starting job to clear expired pat and sessions at ', new Date().toISOString());
     await dbTransactionWrap(async (manager: EntityManager) => {
+      await manager.delete(UserPersonalAccessToken, {
+        expiresAt: LessThan(new Date()),
+      });
       await manager.delete(UserSessions, {
         expiry: LessThan(new Date()),
       });
diff --git a/server/src/modules/session/service.ts b/server/src/modules/session/service.ts
index 3aa0aedaf4..fddfa1461b 100644
--- a/server/src/modules/session/service.ts
+++ b/server/src/modules/session/service.ts
@@ -12,7 +12,7 @@ import { UserSessions } from 'src/entities/user_sessions.entity';
 import { Response } from 'express';
 import { User } from 'src/entities/user.entity';
 import { Organization } from '@entities/organization.entity';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { SessionUtilService } from './util.service';
 import { AppsRepository } from '@modules/apps/repository';
 import { OrganizationRepository } from '@modules/organizations/repository';
diff --git a/server/src/modules/session/types/index.ts b/server/src/modules/session/types/index.ts
index 6886ae51ad..6d5d24902e 100644
--- a/server/src/modules/session/types/index.ts
+++ b/server/src/modules/session/types/index.ts
@@ -11,6 +11,9 @@ export type JWTPayload = {
   isPasswordLogin: boolean;
   isSSOLogin: boolean;
   invitedOrganizationId?: string;
+  isPATLogin?: boolean;
+  token?: string;
+  appId?: string;
 };
 
 interface Features {
diff --git a/server/src/modules/session/util.service.ts b/server/src/modules/session/util.service.ts
index fcfb61d9f0..9bf7b4f571 100644
--- a/server/src/modules/session/util.service.ts
+++ b/server/src/modules/session/util.service.ts
@@ -13,7 +13,7 @@ import { CookieOptions } from 'express';
 import { decamelizeKeys } from 'humps';
 import { JWTPayload } from '@modules/session/interfaces/IService';
 import { Response } from 'express';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import * as _ from 'lodash';
 import { OrganizationRepository } from '@modules/organizations/repository';
 import { GroupPermissionsRepository } from '@modules/group-permissions/repository';
@@ -29,6 +29,7 @@ import { RolesRepository } from '@modules/roles/repository';
 import { EncryptionService } from '@modules/encryption/service';
 import { OnboardingStatus } from '@modules/onboarding/constants';
 import { RequestContext } from '@modules/request-context/service';
+import { SessionType } from '@modules/external-apis/constants';
 
 @Injectable()
 export class SessionUtilService {
@@ -64,7 +65,8 @@ export class SessionUtilService {
     loggedInUser?: User,
     manager?: EntityManager,
     invitedOrganizationId?: string,
-    extraData?: any
+    extraData?: any,
+    isPatLogin?: boolean
   ): Promise<any> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const request = RequestContext?.currentContext?.req;
@@ -72,8 +74,8 @@ export class SessionUtilService {
         ...(loggedInUser?.id === user.id ? loggedInUser?.organizationIds || [] : []),
         ...(organization ? [organization.id] : []),
       ]);
-      let sessionId = loggedInUser?.sessionId; // logged in user and new user are different -> creating session
-      if (loggedInUser?.id !== user.id) {
+      let sessionId = isPatLogin ? user.sessionId : loggedInUser?.sessionId; // logged in user and new user are different -> creating session
+      if (loggedInUser?.id !== user.id && !isPatLogin) {
         const clientIp = (request as any)?.clientIp;
         const session: UserSessions = await this.createSession(
           user.id,
@@ -90,9 +92,12 @@ export class SessionUtilService {
         username: user.id,
         sub: user.email,
         organizationIds: [...organizationIds],
-        isSSOLogin: loggedInUser?.isSSOLogin || isInstanceSSO,
-        isPasswordLogin: loggedInUser?.isPasswordLogin || isPasswordLogin,
+        isSSOLogin: isPatLogin ? false : loggedInUser?.isSSOLogin || isInstanceSSO,
+        isPasswordLogin: isPatLogin ? false : loggedInUser?.isPasswordLogin || isPasswordLogin,
         ...(invitedOrganizationId ? { invitedOrganizationId } : {}),
+        ...(isPatLogin ? { isPATLogin: true } : {}),
+        ...(isPatLogin && extraData?.token ? { token: extraData?.token } : {}),
+        ...(isPatLogin && extraData?.appId ? { appId: extraData?.appId, scope: 'App' } : {}),
       };
 
       if (organization) user.organizationId = organization.id;
@@ -109,8 +114,12 @@ export class SessionUtilService {
         cookieOptions.sameSite = 'none';
         cookieOptions.secure = true;
       }
-      response.cookie('tj_auth_token', this.sign(JWTPayload), cookieOptions);
-
+      let signedPat;
+      if (isPatLogin) {
+        signedPat = this.sign(JWTPayload);
+      } else {
+        response.cookie('tj_auth_token', this.sign(JWTPayload), cookieOptions);
+      }
       const isCurrentOrganizationArchived = organization?.status === WORKSPACE_STATUS.ARCHIVE;
 
       const permissionData = await this.getPermissionDataToAuthorize(user, manager);
@@ -126,6 +135,7 @@ export class SessionUtilService {
         ...permissionData,
         noActiveWorkspaces,
         ...(extraData ? extraData : {}),
+        ...(isPatLogin ? { signedPat } : {}),
       };
 
       return decamelizeKeys(responsePayload);
@@ -454,18 +464,46 @@ export class SessionUtilService {
             status: USER_STATUS.ACTIVE,
           },
         },
-        relations: ['user'],
+        relations: [SessionType.USER, SessionType.PAT], // Include PAT relation
       });
 
       if (!session) {
         throw new UnauthorizedException();
       }
 
-      // extending expiry asynchronously
-      session.expiry = this.getSessionExpiry();
-      //Updating last_logged_in
+      const now = new Date();
+
+      // ✅ Check for PAT session
+      if (session.sessionType === SessionType.PAT) {
+        if (!session.pat) {
+          throw new UnauthorizedException('Invalid PAT session');
+        }
+
+        if (session.pat.expiresAt < now) {
+          throw new UnauthorizedException('PAT token expired');
+        }
+
+        if (session.expiry < now) {
+          throw new UnauthorizedException('PAT session expired');
+        }
+
+        // Extend PAT session expiry
+        session.expiry = new Date(Date.now() + session.pat.sessionExpiryMinutes * 60 * 1000);
+      } else {
+        // Regular session extension
+        if (session.expiry < now) {
+          throw new UnauthorizedException('User session expired');
+        }
+
+        session.expiry = this.getSessionExpiry();
+      }
+
+      // Update last_logged_in
       session.lastLoggedIn = new Date();
-      manager.save(session).catch((err) => console.error('error while extending user session expiry', err));
+
+      manager.save(session).catch((err) => {
+        console.error('error while extending session expiry', err);
+      });
     });
   }
 
diff --git a/server/src/modules/setup-organization/service.ts b/server/src/modules/setup-organization/service.ts
index 925e8a75eb..d65ff4dc7d 100644
--- a/server/src/modules/setup-organization/service.ts
+++ b/server/src/modules/setup-organization/service.ts
@@ -5,12 +5,31 @@ import { EntityManager } from 'typeorm';
 import { SetupOrganizationsUtilService } from './util.service';
 import { ISetupOrganizationsService } from './interfaces/IService';
 import { OrganizationInputs } from './types/organization-inputs';
+import { RequestContext } from '@modules/request-context/service';
+import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
 
 @Injectable()
 export class SetupOrganizationsService implements ISetupOrganizationsService {
   constructor(protected readonly setupOrganizationsUtilService: SetupOrganizationsUtilService) {}
 
   async create(organizationInputs: OrganizationInputs, user?: User, manager?: EntityManager): Promise<Organization> {
-    return this.setupOrganizationsUtilService.create(organizationInputs, user, manager);
+    const organization = await this.setupOrganizationsUtilService.create(organizationInputs, user, manager);
+
+    //WORKSPACE_CREATE audit
+    const auditLogsData = {
+      userId: user.id,
+      organizationId: organization.id,
+      resourceId: organization.id,
+      resourceName: organization.name,
+      resourceData: {
+        workspace_details: {
+          id: organization.id,
+          name: organization.name,
+          slug: organization.slug,
+        },
+      },
+    };
+    RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, auditLogsData);
+    return organization;
   }
 }
diff --git a/server/src/modules/smtp/controller.ts b/server/src/modules/smtp/controller.ts
index 3edbb0d1d1..f061390cce 100644
--- a/server/src/modules/smtp/controller.ts
+++ b/server/src/modules/smtp/controller.ts
@@ -7,6 +7,8 @@ import { FeatureAbilityGuard } from './ability/guard';
 import { SmtpControllerInterface } from './interfaces/IController';
 import { InitFeature } from '@modules/app/decorators/init-feature.decorator';
 import { FEATURE_KEY } from './constants';
+import { User as UserEntity } from '@entities/user.entity';
+import { User } from '@modules/app/decorators/user.decorator';
 
 @InitModule(MODULES.SMTP)
 @Controller('smtp')
@@ -20,17 +22,20 @@ export class SmtpController implements SmtpControllerInterface {
   }
 
   @InitFeature(FEATURE_KEY.UPDATE)
-  updateSmtpSettings(updateSmtpSettingsDto: UpdateSMTPSettingsDto): Promise<void> {
+  updateSmtpSettings(updateSmtpSettingsDto: UpdateSMTPSettingsDto, @User() user: UserEntity): Promise<void> {
     throw new Error('Method not implemented.');
   }
 
   @InitFeature(FEATURE_KEY.UPDATE_ENV)
-  updateSmtpEnvSetting(updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto): Promise<void> {
+  updateSmtpEnvSetting(
+    updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto,
+    @User() user: UserEntity
+  ): Promise<void> {
     throw new Error('Method not implemented.');
   }
 
   @InitFeature(FEATURE_KEY.UPDATE_STATUS)
-  updateSmtpEnvStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto): Promise<void> {
+  updateSmtpEnvStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto, @User() user: UserEntity): Promise<void> {
     throw new Error('Method not implemented.');
   }
 }
diff --git a/server/src/modules/smtp/interfaces/IController.ts b/server/src/modules/smtp/interfaces/IController.ts
index 417f1ce959..3e29cf2bcb 100644
--- a/server/src/modules/smtp/interfaces/IController.ts
+++ b/server/src/modules/smtp/interfaces/IController.ts
@@ -1,11 +1,12 @@
+import { User } from '@entities/user.entity';
 import { ListSMTPDto, UpdateSMTPSettingsDto, UpdateSmtpEnvSettingChangedDto, UpdateSmtpStatusChangedDto } from '../dto';
 
 export interface SmtpControllerInterface {
   getSMTPSettings(): Promise<ListSMTPDto>;
 
-  updateSmtpSettings(updateSmtpSettingsDto: UpdateSMTPSettingsDto): Promise<void>;
+  updateSmtpSettings(updateSmtpSettingsDto: UpdateSMTPSettingsDto, user: User): Promise<void>;
 
-  updateSmtpEnvSetting(updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto): Promise<void>;
+  updateSmtpEnvSetting(updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto, user: User): Promise<void>;
 
-  updateSmtpEnvStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto): Promise<void>;
+  updateSmtpEnvStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto, user: User): Promise<void>;
 }
diff --git a/server/src/modules/smtp/interfaces/IService.ts b/server/src/modules/smtp/interfaces/IService.ts
index 900b7bff88..7ea58458bf 100644
--- a/server/src/modules/smtp/interfaces/IService.ts
+++ b/server/src/modules/smtp/interfaces/IService.ts
@@ -1,11 +1,12 @@
+import { User } from '@entities/user.entity';
 import { ListSMTPDto, UpdateSmtpEnvSettingChangedDto, UpdateSMTPSettingsDto, UpdateSmtpStatusChangedDto } from '../dto';
 
 export interface SMTPServiceInterface {
   get(): Promise<ListSMTPDto>;
 
-  update(updateSmtpSettingsDto: UpdateSMTPSettingsDto): Promise<void>;
+  update(updateSmtpSettingsDto: UpdateSMTPSettingsDto, user: User): Promise<void>;
 
-  updateEnvSettings(updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto): Promise<void>;
+  updateEnvSettings(updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto, user: User): Promise<void>;
 
-  updateStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto): Promise<void>;
+  updateStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto, user: User): Promise<void>;
 }
diff --git a/server/src/modules/smtp/module.ts b/server/src/modules/smtp/module.ts
index 8de78a12af..802fe37f78 100644
--- a/server/src/modules/smtp/module.ts
+++ b/server/src/modules/smtp/module.ts
@@ -2,6 +2,7 @@ import { getImportPath } from '@modules/app/constants';
 import { InstanceSettingsModule } from '@modules/instance-settings/module';
 import { DynamicModule, Module } from '@nestjs/common';
 import { FeatureAbilityFactory } from './ability';
+import { OrganizationRepository } from '@modules/organizations/repository';
 
 @Module({})
 export class SMTPModule {
@@ -14,7 +15,7 @@ export class SMTPModule {
       module: SMTPModule,
       imports: [await InstanceSettingsModule.register(configs)],
       controllers: [SmtpController],
-      providers: [SMTPService, FeatureAbilityFactory, SMTPUtilService],
+      providers: [SMTPService, FeatureAbilityFactory, SMTPUtilService, OrganizationRepository],
       exports: [SMTPUtilService],
     };
   }
diff --git a/server/src/modules/smtp/service.ts b/server/src/modules/smtp/service.ts
index 9926b613ff..2d2dcd1f2c 100644
--- a/server/src/modules/smtp/service.ts
+++ b/server/src/modules/smtp/service.ts
@@ -1,19 +1,20 @@
 import { Injectable } from '@nestjs/common';
 import { ListSMTPDto, UpdateSmtpEnvSettingChangedDto, UpdateSMTPSettingsDto, UpdateSmtpStatusChangedDto } from './dto';
 import { SMTPServiceInterface } from './interfaces/IService';
+import { User } from '@entities/user.entity';
 
 @Injectable()
 export class SMTPService implements SMTPServiceInterface {
   get(): Promise<ListSMTPDto> {
     throw new Error('Method not implemented.');
   }
-  update(updateSmtpSettingsDto: UpdateSMTPSettingsDto): Promise<void> {
+  update(updateSmtpSettingsDto: UpdateSMTPSettingsDto, user: User): Promise<void> {
     throw new Error('Method not implemented.');
   }
-  updateEnvSettings(updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto): Promise<void> {
+  updateEnvSettings(updateSmtpEnvSettingChangedDto: UpdateSmtpEnvSettingChangedDto, user: User): Promise<void> {
     throw new Error('Method not implemented.');
   }
-  updateStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto): Promise<void> {
+  updateStatus(updateSmtpStatusChangedDto: UpdateSmtpStatusChangedDto, user: User): Promise<void> {
     throw new Error('Method not implemented.');
   }
 }
diff --git a/server/src/modules/users/module.ts b/server/src/modules/users/module.ts
index 9ba2992f32..b32c7ab8f8 100644
--- a/server/src/modules/users/module.ts
+++ b/server/src/modules/users/module.ts
@@ -1,6 +1,6 @@
 import { getImportPath } from '@modules/app/constants';
 import { DynamicModule } from '@nestjs/common';
-import { UserRepository } from './repository';
+import { UserRepository } from './repositories/repository';
 import { SessionModule } from '@modules/session/module';
 import { FeatureAbilityFactory } from './ability';
 import { OrganizationUsersRepository } from '@modules/organization-users/repository';
diff --git a/server/src/modules/users/repositories/UserPersonalAccessTokens.repository.ts b/server/src/modules/users/repositories/UserPersonalAccessTokens.repository.ts
new file mode 100644
index 0000000000..8ff2db73f6
--- /dev/null
+++ b/server/src/modules/users/repositories/UserPersonalAccessTokens.repository.ts
@@ -0,0 +1,60 @@
+import { Injectable } from '@nestjs/common';
+import { DataSource, Repository } from 'typeorm';
+import { UserPersonalAccessToken } from '@entities/user_personal_access_tokens.entity';
+import { PersonalAccessTokenScope } from '@modules/external-apis/constants';
+import * as bcrypt from 'bcrypt';
+import { User } from '@entities/user.entity';
+import { App } from '@entities/app.entity';
+const defaultPatExpiry = 10; //in days
+const defaultPatSessionExpiry = 10; //in days
+
+@Injectable()
+export class UserPersonalAccessTokenRepository extends Repository<UserPersonalAccessToken> {
+  constructor(private dataSource: DataSource) {
+    super(UserPersonalAccessToken, dataSource.createEntityManager());
+  }
+
+  async findValidTokenByHash(hash: string): Promise<UserPersonalAccessToken | null> {
+    const tokens = await this.find(); // still looping since bcrypt is not searchable
+    for (const token of tokens) {
+      const isMatch = await bcrypt.compare(hash, token.tokenHash);
+      if (isMatch && token.expiresAt > new Date()) {
+        return token;
+      }
+    }
+    return null;
+  }
+
+  async findByUser(userId: string): Promise<UserPersonalAccessToken[]> {
+    return this.find({ where: { user: { id: userId } } });
+  }
+
+  async findByApp(appId: string): Promise<UserPersonalAccessToken[]> {
+    return this.find({ where: { app: { id: appId } } });
+  }
+
+  async createToken(
+    user: User,
+    rawToken: string,
+    app: App,
+    options?: { scope: PersonalAccessTokenScope; patExpiryMinutes?: number; sessionExpiryMinutes?: number }
+  ): Promise<void> {
+    const patExpiry = options?.patExpiryMinutes ?? (parseInt(process.env?.PAT_EXPIRY) || defaultPatExpiry) * 24 * 60; // default: 10 days
+    const sessionExpiry =
+      options?.sessionExpiryMinutes ?? (parseInt(process.env?.PAT_SESSION_EXPIRY) || defaultPatSessionExpiry) * 24 * 60; // default: 10 days
+
+    const now = new Date();
+
+    const token = this.create({
+      user,
+      app,
+      tokenHash: rawToken,
+      scope: options.scope,
+      createdAt: new Date(),
+      expiresAt: new Date(Date.now() + patExpiry * 60 * 1000),
+      sessionExpiryMinutes: sessionExpiry,
+    });
+
+    await this.save(token);
+  }
+}
diff --git a/server/src/modules/users/repository.ts b/server/src/modules/users/repositories/repository.ts
similarity index 100%
rename from server/src/modules/users/repository.ts
rename to server/src/modules/users/repositories/repository.ts
diff --git a/server/src/modules/versions/ability/app-version.ability.ts b/server/src/modules/versions/ability/app-version.ability.ts
index 16ccb14ccd..5a89b79287 100644
--- a/server/src/modules/versions/ability/app-version.ability.ts
+++ b/server/src/modules/versions/ability/app-version.ability.ts
@@ -27,7 +27,9 @@ export function defineAppVersionAbility(
         FEATURE_KEY.UPDATE_COMPONENT_LAYOUT,
         FEATURE_KEY.DELETE_COMPONENTS,
         FEATURE_KEY.CREATE_PAGES,
+        FEATURE_KEY.CLONE_GROUP,
         FEATURE_KEY.CLONE_PAGES,
+        FEATURE_KEY.CLONE_GROUP,
         FEATURE_KEY.UPDATE_PAGES,
         FEATURE_KEY.DELETE_PAGE,
         FEATURE_KEY.REORDER_PAGES,
@@ -35,6 +37,9 @@ export function defineAppVersionAbility(
         FEATURE_KEY.CREATE_EVENT,
         FEATURE_KEY.UPDATE_EVENT,
         FEATURE_KEY.DELETE_EVENT,
+        FEATURE_KEY.APP_VERSION_CREATE,
+        FEATURE_KEY.APP_VERSION_DELETE,
+        FEATURE_KEY.APP_VERSION_UPDATE,
       ],
       App
     );
@@ -60,6 +65,7 @@ export function defineAppVersionAbility(
         FEATURE_KEY.DELETE_COMPONENTS,
         FEATURE_KEY.CREATE_PAGES,
         FEATURE_KEY.CLONE_PAGES,
+        FEATURE_KEY.CLONE_GROUP,
         FEATURE_KEY.UPDATE_PAGES,
         FEATURE_KEY.DELETE_PAGE,
         FEATURE_KEY.REORDER_PAGES,
@@ -67,6 +73,9 @@ export function defineAppVersionAbility(
         FEATURE_KEY.CREATE_EVENT,
         FEATURE_KEY.UPDATE_EVENT,
         FEATURE_KEY.DELETE_EVENT,
+        FEATURE_KEY.APP_VERSION_CREATE,
+        FEATURE_KEY.APP_VERSION_DELETE,
+        FEATURE_KEY.APP_VERSION_UPDATE,
       ],
       App
     );
@@ -90,6 +99,7 @@ export function defineAppVersionAbility(
         FEATURE_KEY.DELETE_COMPONENTS,
         FEATURE_KEY.CREATE_PAGES,
         FEATURE_KEY.CLONE_PAGES,
+         FEATURE_KEY.CLONE_GROUP,
         FEATURE_KEY.UPDATE_PAGES,
         FEATURE_KEY.DELETE_PAGE,
         FEATURE_KEY.REORDER_PAGES,
@@ -97,6 +107,9 @@ export function defineAppVersionAbility(
         FEATURE_KEY.CREATE_EVENT,
         FEATURE_KEY.UPDATE_EVENT,
         FEATURE_KEY.DELETE_EVENT,
+        FEATURE_KEY.APP_VERSION_CREATE,
+        FEATURE_KEY.APP_VERSION_DELETE,
+        FEATURE_KEY.APP_VERSION_UPDATE,
       ],
       App
     );
diff --git a/server/src/modules/versions/constants/features.ts b/server/src/modules/versions/constants/features.ts
index 9bf84dfae3..978eec0013 100644
--- a/server/src/modules/versions/constants/features.ts
+++ b/server/src/modules/versions/constants/features.ts
@@ -21,6 +21,7 @@ export const FEATURES: FeaturesConfig = {
     },
     [FEATURE_KEY.PROMOTE]: {
       license: LICENSE_FIELD.VALID,
+      auditLogsKey: 'APP_PROMOTE',
     },
     [FEATURE_KEY.CREATE_COMPONENTS]: {},
     [FEATURE_KEY.UPDATE_COMPONENTS]: {},
@@ -28,6 +29,7 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.DELETE_COMPONENTS]: {},
     [FEATURE_KEY.CREATE_PAGES]: {},
     [FEATURE_KEY.CLONE_PAGES]: {},
+    [FEATURE_KEY.CLONE_GROUP]: {},
     [FEATURE_KEY.UPDATE_PAGES]: {},
     [FEATURE_KEY.DELETE_PAGE]: {},
     [FEATURE_KEY.REORDER_PAGES]: {},
@@ -35,5 +37,8 @@ export const FEATURES: FeaturesConfig = {
     [FEATURE_KEY.CREATE_EVENT]: {},
     [FEATURE_KEY.UPDATE_EVENT]: {},
     [FEATURE_KEY.DELETE_EVENT]: {},
+    [FEATURE_KEY.APP_VERSION_CREATE]: {},
+    [FEATURE_KEY.APP_VERSION_DELETE]: {},
+    [FEATURE_KEY.APP_VERSION_UPDATE]: {},
   },
 };
diff --git a/server/src/modules/versions/constants/index.ts b/server/src/modules/versions/constants/index.ts
index 06d516e80e..61bac78f36 100644
--- a/server/src/modules/versions/constants/index.ts
+++ b/server/src/modules/versions/constants/index.ts
@@ -12,6 +12,7 @@ export enum FEATURE_KEY {
   DELETE_COMPONENTS = 'DELETE_COMPONENTS',
   CREATE_PAGES = 'CREATE_PAGES',
   CLONE_PAGES = 'CLONE_PAGES',
+  CLONE_GROUP = 'CLONE_GROUP',
   UPDATE_PAGES = 'UPDATE_PAGES',
   DELETE_PAGE = 'DELETE_PAGE',
   REORDER_PAGES = 'REORDER_PAGES',
@@ -19,4 +20,7 @@ export enum FEATURE_KEY {
   CREATE_EVENT = 'CREATE_EVENT',
   UPDATE_EVENT = 'UPDATE_EVENT',
   DELETE_EVENT = 'DELETE_EVENT',
+  APP_VERSION_CREATE = 'APP_VERSION_CREATE',
+  APP_VERSION_DELETE = 'APP_VERSION_DELETE',
+  APP_VERSION_UPDATE = 'APP_VERSION_UPDATE',
 }
diff --git a/server/src/modules/versions/controller.ts b/server/src/modules/versions/controller.ts
index 9297790bc5..721db2a74a 100644
--- a/server/src/modules/versions/controller.ts
+++ b/server/src/modules/versions/controller.ts
@@ -25,14 +25,14 @@ export class VersionController implements IVersionController {
     return this.versionService.getAllVersions(app);
   }
 
-  @InitFeature(FEATURE_KEY.CREATE)
+  @InitFeature(FEATURE_KEY.APP_VERSION_CREATE)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
   @Post(':id/versions')
   createVersion(@User() user, @App() app: AppEntity, @Body() versionCreateDto: VersionCreateDto) {
     return this.versionService.createVersion(app, user, versionCreateDto);
   }
 
-  @InitFeature(FEATURE_KEY.DELETE)
+  @InitFeature(FEATURE_KEY.APP_VERSION_DELETE)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
   @Delete(':id/versions/:versionId')
   deleteVersion(@User() user: UserEntity, @App() app: AppEntity) {
diff --git a/server/src/modules/versions/controller.v2.ts b/server/src/modules/versions/controller.v2.ts
index 95d2a68664..9600f17298 100644
--- a/server/src/modules/versions/controller.v2.ts
+++ b/server/src/modules/versions/controller.v2.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Get, Param, Put, UseGuards } from '@nestjs/common';
+import { Body, Controller, Get, Put, Param, Query, UseGuards } from '@nestjs/common';
 import { VersionService } from './service';
 import { InitModule } from '@modules/app/decorators/init-module';
 import { MODULES } from '@modules/app/constants/modules';
@@ -21,22 +21,22 @@ import { IVersionControllerV2 } from './interfaces/IControllerV2';
   version: '2',
 })
 export class VersionControllerV2 implements IVersionControllerV2 {
-  constructor(protected readonly versionService: VersionService) {}
+  constructor(protected readonly versionService: VersionService) { }
 
   @InitFeature(FEATURE_KEY.GET_ONE)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
   @Get(':id/versions/:versionId')
-  getVersion(@User() user: UserEntity, @App() app: AppEntity) {
-    return this.versionService.getVersion(app, user);
+  getVersion(@User() user: UserEntity, @App() app: AppEntity, @Query('mode') mode?: string) {
+    return this.versionService.getVersion(app, user, mode);
   }
 
-  @InitFeature(FEATURE_KEY.UPDATE)
+  @InitFeature(FEATURE_KEY.APP_VERSION_UPDATE)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
   @Put(':id/versions/:versionId')
   updateVersion(@User() user, @App() app: AppEntity, @Body() appVersionUpdateDto: AppVersionUpdateDto) {
     return this.versionService.update(app, user, appVersionUpdateDto);
   }
- 
+
   // If we want to update app mode in public app, we use this endpoint
   @InitFeature(FEATURE_KEY.UPDATE_SETTINGS)
   @Put(':id/versions/:versionId/global_settings/app_mode')
@@ -55,7 +55,7 @@ export class VersionControllerV2 implements IVersionControllerV2 {
     return this.versionService.updateSettings(app, user, appVersionUpdateDto);
   }
 
- 
+
 
   @InitFeature(FEATURE_KEY.PROMOTE)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
diff --git a/server/src/modules/versions/controllers/components.controller.ts b/server/src/modules/versions/controllers/components.controller.ts
index 38d78fa221..e91e30e791 100644
--- a/server/src/modules/versions/controllers/components.controller.ts
+++ b/server/src/modules/versions/controllers/components.controller.ts
@@ -10,6 +10,7 @@ import { FeatureAbilityGuard } from '../ability/guard';
 import { AppDecorator as App } from '@modules/app/decorators/app.decorator';
 import { ComponentsService } from '@modules/apps/services/component.service';
 import {
+  BatchComponentsDto,
   CreateComponentDto,
   DeleteComponentDto,
   LayoutUpdateDto,
@@ -58,4 +59,11 @@ export class ComponentsController implements IComponentsController {
   async updateComponentLayout(@App() app: AppEntity, @Body() updateComponentLayout: LayoutUpdateDto) {
     await this.componentsService.componentLayoutChange(updateComponentLayout.diff, app.appVersions[0].id);
   }
+
+  @InitFeature(FEATURE_KEY.UPDATE_COMPONENTS)
+  @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
+  @Put(':id/versions/:versionId/components/batch')
+  async batchComponentOperations(@App() app: AppEntity, @Body() batchComponentsDto: BatchComponentsDto) {
+    return this.componentsService.batchOperations(batchComponentsDto.diff, app.appVersions[0].id);
+  }
 }
diff --git a/server/src/modules/versions/interfaces/IControllerV2.ts b/server/src/modules/versions/interfaces/IControllerV2.ts
index bb382ff055..4b23435911 100644
--- a/server/src/modules/versions/interfaces/IControllerV2.ts
+++ b/server/src/modules/versions/interfaces/IControllerV2.ts
@@ -4,7 +4,7 @@ import { App as AppEntity } from '@entities/app.entity';
 import { PromoteVersionDto } from '../dto';
 
 export interface IVersionControllerV2 {
-  getVersion(user: UserEntity, app: AppEntity): Promise<any>;
+  getVersion(user: UserEntity, app: AppEntity, mode?: string): Promise<any>;
   updateVersion(user: UserEntity, app: AppEntity, appVersionUpdateDto: AppVersionUpdateDto): Promise<any>;
   updateGlobalSettings(user: UserEntity, app: AppEntity, appVersionUpdateDto: AppVersionUpdateDto): Promise<any>;
   updateAppMode(appId: string, versionId: string, appMode: 'light' | 'dark' | 'auto'): Promise<any>;
diff --git a/server/src/modules/versions/interfaces/IService.ts b/server/src/modules/versions/interfaces/IService.ts
index dc39061efa..5c6ed2d1b4 100644
--- a/server/src/modules/versions/interfaces/IService.ts
+++ b/server/src/modules/versions/interfaces/IService.ts
@@ -11,7 +11,7 @@ export interface IVersionService {
 
   deleteVersion(app: App, user: User): Promise<void>;
 
-  getVersion(app: App, user: User): Promise<any>;
+  getVersion(app: App, user: User, mode?: string): Promise<any>;
 
   update(app: App, user: User, appVersionUpdateDto: AppVersionUpdateDto): Promise<void>;
 
diff --git a/server/src/modules/versions/interfaces/IUtilService.ts b/server/src/modules/versions/interfaces/IUtilService.ts
index 340b918b03..f68118978e 100644
--- a/server/src/modules/versions/interfaces/IUtilService.ts
+++ b/server/src/modules/versions/interfaces/IUtilService.ts
@@ -6,6 +6,6 @@ import { EntityManager } from 'typeorm';
 
 export interface IVersionUtilService {
   updateVersion(appVersion: AppVersion, appVersionUpdateDto: AppVersionUpdateDto): Promise<void>;
-  deleteVersionGit(app: App, user: User, manager?: EntityManager): Promise<void>;
+  deleteVersionGit(app: App, version: AppVersion, manager?: EntityManager): Promise<void>;
   fetchVersions(appId: string): Promise<AppVersion[]>;
 }
diff --git a/server/src/modules/versions/module.ts b/server/src/modules/versions/module.ts
index 7fac84f033..894c27206a 100644
--- a/server/src/modules/versions/module.ts
+++ b/server/src/modules/versions/module.ts
@@ -7,6 +7,7 @@ import { DataQueryRepository } from '@modules/data-queries/repository';
 import { DataSourcesRepository } from '@modules/data-sources/repository';
 import { DataSourcesModule } from '@modules/data-sources/module';
 import { AppsRepository } from '@modules/apps/repository';
+import { AppGitRepository } from '@modules/app-git/repository';
 import { FeatureAbilityFactory } from './ability';
 import { getImportPath } from '@modules/app/constants';
 import { AppPermissionsModule } from '@modules/app-permissions/module';
@@ -46,6 +47,7 @@ export class VersionModule {
         DataSourcesRepository,
         VersionRepository,
         AppsRepository,
+        AppGitRepository,
         VersionsCreateService,
         PageService,
         EventsService,
diff --git a/server/src/modules/versions/repository.ts b/server/src/modules/versions/repository.ts
index 9f3dd5f017..ad37db8df4 100644
--- a/server/src/modules/versions/repository.ts
+++ b/server/src/modules/versions/repository.ts
@@ -147,6 +147,34 @@ export class VersionRepository extends Repository<AppVersion> {
     }, manager || this.manager);
   }
 
+  async findVersionWithQueryPermissions(id: string, manager?: EntityManager): Promise<AppVersion> {
+    return await dbTransactionWrap(async (manager: EntityManager) => {
+      const appVersion = await manager
+        .createQueryBuilder(AppVersion, 'appVersion')
+        .where('appVersion.id = :id', { id })
+        .leftJoinAndSelect('appVersion.app', 'app')
+        .leftJoinAndSelect('appVersion.dataQueries', 'dataQueries')
+        .leftJoinAndSelect('dataQueries.dataSource', 'dataSource')
+        .leftJoinAndSelect('dataQueries.plugins', 'plugins')
+        .leftJoinAndSelect('plugins.manifestFile', 'manifestFile')
+        .leftJoinAndSelect('dataQueries.permissions', 'permission')
+        .leftJoinAndSelect('permission.users', 'queryUser')
+        .leftJoinAndSelect('queryUser.user', 'user')
+        .leftJoinAndSelect('queryUser.permissionGroup', 'group')
+        .getOneOrFail();
+
+      if (appVersion?.dataQueries) {
+        for (const query of appVersion?.dataQueries) {
+          if (query?.plugin) {
+            query.plugin.manifestFile.data = JSON.parse(decode(query.plugin.manifestFile.data.toString('utf8')));
+          }
+        }
+      }
+
+      return appVersion;
+    }, manager || this.manager);
+  }
+
   getVersionsInApp(appId: string, manager?: EntityManager): Promise<AppVersion[]> {
     return dbTransactionWrap((manager: EntityManager) => {
       return manager.find(AppVersion, {
@@ -195,7 +223,6 @@ export class VersionRepository extends Repository<AppVersion> {
       return appVersions;
     }, manager || this.manager);
   }
-
   async getAppVersionById(versionId: string) {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const version = await manager.findOneOrFail(AppVersion, {
diff --git a/server/src/modules/versions/service.ts b/server/src/modules/versions/service.ts
index 0c37d4051b..06ee814dd1 100644
--- a/server/src/modules/versions/service.ts
+++ b/server/src/modules/versions/service.ts
@@ -22,6 +22,7 @@ import { IVersionService } from './interfaces/IService';
 import { RequestContext } from '@modules/request-context/service';
 import { AUDIT_LOGS_REQUEST_CONTEXT_KEY } from '@modules/app/constants';
 import { EventEmitter2 } from '@nestjs/event-emitter';
+import { AppGitRepository } from '@modules/app-git/repository';
 
 @Injectable()
 export class VersionService implements IVersionService {
@@ -35,7 +36,8 @@ export class VersionService implements IVersionService {
     protected readonly licenseTermsService: LicenseTermsService,
     protected readonly organizationThemesUtilService: OrganizationThemesUtilService,
     protected readonly versionsUtilService: VersionUtilService,
-    protected readonly eventEmitter: EventEmitter2
+    protected readonly eventEmitter: EventEmitter2,
+    protected readonly appGitRepository: AppGitRepository
   ) {}
   async getAllVersions(app: App): Promise<{ versions: Array<AppVersion> }> {
     const result = await this.versionRepository.getVersionsInApp(app.id);
@@ -72,6 +74,7 @@ export class VersionService implements IVersionService {
 
       await this.createVersionService.setupNewVersion(appVersion, versionFrom, organizationId, manager);
 
+      //APP_VERSION_CREATE audit
       RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
         userId: user.id,
         organizationId: user.organizationId,
@@ -94,7 +97,7 @@ export class VersionService implements IVersionService {
     return await this.versionsUtilService.deleteVersion(app, user, manager);
   }
 
-  async getVersion(app: App, user: User): Promise<any> {
+  async getVersion(app: App, user: User, mode?: string): Promise<any> {
     const prepareResponse = async (app: App, versionId: string) => {
       let appVersion,
         updatedVersionId = versionId;
@@ -149,15 +152,17 @@ export class VersionService implements IVersionService {
         user.organizationId,
         editingVersion?.globalSettings?.theme?.id
       );
-
+      const appGit = await this.appGitRepository.findAppGitByAppId(app.id);
+      if (appGit) {
+        shouldFreezeEditor = !appGit.allowEditing || shouldFreezeEditor;
+      }
       editingVersion['globalSettings']['theme'] = appTheme;
-
       return {
         ...appData,
         editing_version: editingVersion,
         pages: this.appUtilService.mergeDefaultComponentData(pagesForVersion),
         events: eventsForVersion,
-        should_freeze_editor: app.creationMode === 'GIT' || shouldFreezeEditor,
+        should_freeze_editor: shouldFreezeEditor,
       };
     };
 
@@ -270,6 +275,7 @@ export class VersionService implements IVersionService {
         await this.versionRepository.update(version.id, editableParams);
         const environments = await this.appEnvironmentUtilService.getAll(user.organizationId, app.id, manager);
 
+        //APP_PROMOTE audit
         RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
           userId: user.id,
           organizationId: user.organizationId,
diff --git a/server/src/modules/versions/types/index.ts b/server/src/modules/versions/types/index.ts
index b475b361b2..4736e46369 100644
--- a/server/src/modules/versions/types/index.ts
+++ b/server/src/modules/versions/types/index.ts
@@ -4,6 +4,7 @@ import { MODULES } from '@modules/app/constants/modules';
 
 interface Features {
   [FEATURE_KEY.CLONE_PAGES]: FeatureConfig;
+  [FEATURE_KEY.CLONE_GROUP]: FeatureConfig;
   [FEATURE_KEY.REORDER_PAGES]: FeatureConfig;
   [FEATURE_KEY.UPDATE_PAGES]: FeatureConfig;
   [FEATURE_KEY.DELETE_PAGE]: FeatureConfig;
@@ -12,6 +13,9 @@ interface Features {
   [FEATURE_KEY.GET_EVENTS]: FeatureConfig;
   [FEATURE_KEY.UPDATE_EVENT]: FeatureConfig;
   [FEATURE_KEY.DELETE_EVENT]: FeatureConfig;
+  [FEATURE_KEY.APP_VERSION_CREATE]: FeatureConfig;
+  [FEATURE_KEY.APP_VERSION_DELETE]: FeatureConfig;
+  [FEATURE_KEY.APP_VERSION_UPDATE]: FeatureConfig;
   [FEATURE_KEY.CREATE_COMPONENTS]: FeatureConfig;
   [FEATURE_KEY.UPDATE_COMPONENTS]: FeatureConfig;
   [FEATURE_KEY.UPDATE_COMPONENT_LAYOUT]: FeatureConfig;
diff --git a/server/src/modules/versions/util.service.ts b/server/src/modules/versions/util.service.ts
index 8c1ea9b853..d0400af882 100644
--- a/server/src/modules/versions/util.service.ts
+++ b/server/src/modules/versions/util.service.ts
@@ -7,9 +7,6 @@ import { dbTransactionWrap } from '@helpers/database.helper';
 import { EntityManager } from 'typeorm';
 import { App } from '@entities/app.entity';
 import { User } from '@entities/user.entity';
-import { RenameAppOrVersionDto } from '@modules/app-git/dto';
-import { RequestContext } from '@modules/request-context/service';
-import got from 'got';
 
 @Injectable()
 export class VersionUtilService implements IVersionUtilService {
@@ -107,13 +104,12 @@ export class VersionUtilService implements IVersionUtilService {
       return;
     }, manager);
   }
-  async deleteVersionGit(app: App, user: User, manager?: EntityManager): Promise<void> {
+  async deleteVersionGit(app: App, version: AppVersion, manager?: EntityManager): Promise<void> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       if (app.currentVersionId && app.currentVersionId === app.appVersions[0].id) {
         throw new BadRequestException('You cannot delete a released version');
       }
-
-      await this.versionRepository.deleteById(app.appVersions[0].id, manager);
+      await this.versionRepository.deleteById(version.id, manager);
 
       // TODO: Add audit logs
       return;
diff --git a/server/src/modules/white-labelling/Interfaces/IController.ts b/server/src/modules/white-labelling/Interfaces/IController.ts
index 8dcbd53dd3..aa18d61839 100644
--- a/server/src/modules/white-labelling/Interfaces/IController.ts
+++ b/server/src/modules/white-labelling/Interfaces/IController.ts
@@ -1,11 +1,16 @@
+import { User } from '@entities/user.entity';
 import { UpdateWhiteLabellingDto } from '@modules/white-labelling/dto';
 
 export interface IWhiteLabellingController {
   get(): Promise<any>; // Method to fetch white labeling settings
 
-  update(updateWhiteLabellingDto: UpdateWhiteLabellingDto): Promise<any>; // Method to update white labeling settings
+  update(updateWhiteLabellingDto: UpdateWhiteLabellingDto, user: User): Promise<any>; // Method to update white labeling settings
 
   getWorkspaceSettings(workspaceId: string): Promise<any>; // Method to get specific white labeling settings for an organization
 
-  updateWorkspaceSettings(organizationId: string, updateWhiteLabellingDto: UpdateWhiteLabellingDto): Promise<any>; // Method to update white labeling settings for a specific organization
+  updateWorkspaceSettings(
+    organizationId: string,
+    updateWhiteLabellingDto: UpdateWhiteLabellingDto,
+    user: User
+  ): Promise<any>; // Method to update white labeling settings for a specific organization
 }
diff --git a/server/src/modules/white-labelling/Interfaces/IService.ts b/server/src/modules/white-labelling/Interfaces/IService.ts
index 236b2a5921..baef4bfb92 100644
--- a/server/src/modules/white-labelling/Interfaces/IService.ts
+++ b/server/src/modules/white-labelling/Interfaces/IService.ts
@@ -1,7 +1,8 @@
+import { User } from '@entities/user.entity';
 import { UpdateWhiteLabellingDto } from '../dto';
 
 export interface IWhiteLabellingService {
   getProcessedSettings(organizationId: string): Promise<any>;
 
-  updateSettings(updateDto: UpdateWhiteLabellingDto, organizationId?: string | null): Promise<any>;
+  updateSettings(updateDto: UpdateWhiteLabellingDto, user: User, organizationId?: string | null): Promise<any>;
 }
diff --git a/server/src/modules/white-labelling/controller.ts b/server/src/modules/white-labelling/controller.ts
index 5edc7a9628..b368d87d84 100644
--- a/server/src/modules/white-labelling/controller.ts
+++ b/server/src/modules/white-labelling/controller.ts
@@ -7,6 +7,8 @@ import { InitFeature } from '@modules/app/decorators/init-feature.decorator';
 import { MODULES } from '@modules/app/constants/modules';
 import { FEATURE_KEY } from './constant';
 import { WhiteLabellingService } from './service';
+import { User as UserEntity } from '@entities/user.entity';
+import { User } from '@modules/app/decorators/user.decorator';
 
 @Controller('white-labelling')
 @InitModule(MODULES.WHITE_LABELLING)
@@ -21,7 +23,7 @@ export class WhiteLabellingController implements IWhiteLabellingController {
 
   @Put()
   @InitFeature(FEATURE_KEY.UPDATE)
-  async update(@Body() updateWhiteLabellingDto: UpdateWhiteLabellingDto) {
+  async update(@Body() updateWhiteLabellingDto: UpdateWhiteLabellingDto, @User() user: UserEntity) {
     throw new NotFoundException();
   }
 
@@ -35,7 +37,8 @@ export class WhiteLabellingController implements IWhiteLabellingController {
   @InitFeature(FEATURE_KEY.UPDATE_WORKSPACE_SETTINGS)
   async updateWorkspaceSettings(
     @Param('organizationId') organizationId: string,
-    @Body() updateWhiteLabellingDto: UpdateWhiteLabellingDto
+    @Body() updateWhiteLabellingDto: UpdateWhiteLabellingDto,
+    @User() user: UserEntity
   ) {
     throw new NotFoundException();
   }
diff --git a/server/src/modules/white-labelling/service.ts b/server/src/modules/white-labelling/service.ts
index 48e9dbdd48..a6726ed1a6 100644
--- a/server/src/modules/white-labelling/service.ts
+++ b/server/src/modules/white-labelling/service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { IWhiteLabellingService } from './Interfaces/IService';
 import { UpdateWhiteLabellingDto } from './dto';
 import { WhiteLabellingUtilService } from './util.service';
+import { User } from '@entities/user.entity';
 
 @Injectable()
 export class WhiteLabellingService implements IWhiteLabellingService {
@@ -10,7 +11,7 @@ export class WhiteLabellingService implements IWhiteLabellingService {
     return this.whiteLabellingUtilService.getProcessedSettings();
   }
 
-  async updateSettings(updateDto: UpdateWhiteLabellingDto, organizationId?: string | null): Promise<any> {
+  async updateSettings(updateDto: UpdateWhiteLabellingDto, user: User, organizationId?: string | null): Promise<any> {
     throw new Error('Method not implemented.');
   }
 }
diff --git a/server/src/modules/workflows/module.ts b/server/src/modules/workflows/module.ts
index 389a754701..a0c3078258 100644
--- a/server/src/modules/workflows/module.ts
+++ b/server/src/modules/workflows/module.ts
@@ -4,7 +4,7 @@ import { ThrottlerModule } from '@nestjs/throttler';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { getImportPath } from '@modules/app/constants';
 import { TooljetDbModule } from '@modules/tooljet-db/module';
-import { UserRepository } from '@modules/users/repository';
+import { UserRepository } from '@modules/users/repositories/repository';
 import { User } from '@entities/user.entity';
 import { WorkflowExecutionNode } from '@entities/workflow_execution_node.entity';
 import { WorkflowExecutionEdge } from '@entities/workflow_execution_edge.entity';
@@ -31,6 +31,7 @@ import { AiModule } from '@modules/ai/module';
 import { DataSourcesRepository } from '@modules/data-sources/repository';
 import { AppPermissionsModule } from '@modules/app-permissions/module';
 import { RolesRepository } from '@modules/roles/repository';
+import { AppGitRepository } from '@modules/app-git/repository';
 export class WorkflowsModule {
   static async register(configs?: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
     const importPath = await getImportPath(configs?.IS_GET_CONTEXT);
@@ -104,6 +105,7 @@ export class WorkflowsModule {
         DataSourcesRepository,
         OrganizationConstantRepository,
         VersionRepository,
+        AppGitRepository,
         AppsService,
         PageService,
         EventsService,
diff --git a/server/test/modules/data-queries/util.service.spec.ts b/server/test/modules/data-queries/util.service.spec.ts
new file mode 100644
index 0000000000..0aad2f7814
--- /dev/null
+++ b/server/test/modules/data-queries/util.service.spec.ts
@@ -0,0 +1,484 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { DataQueriesUtilService } from '../../../src/modules/data-queries/util.service';
+import { ConfigService } from '@nestjs/config';
+import { VersionRepository } from '../../../src/modules/versions/repository';
+import { AppEnvironmentUtilService } from '../../../src/modules/app-environments/util.service';
+import { DataSourcesUtilService } from '../../../src/modules/data-sources/util.service';
+import { PluginsServiceSelector } from '../../../src/modules/data-sources/services/plugin-selector.service';
+
+describe('DataQueriesUtilService', () => {
+  let service: DataQueriesUtilService;
+  let dataSourceUtilService: DataSourcesUtilService;
+
+  beforeEach(async () => {
+    const mockDataSourceUtilService = {
+      resolveConstants: jest.fn(),
+      parseSourceOptions: jest.fn(),
+      getAuthUrl: jest.fn(),
+      updateOAuthAccessToken: jest.fn(),
+    };
+
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        DataQueriesUtilService,
+        {
+          provide: ConfigService,
+          useValue: {
+            get: jest.fn(),
+          },
+        },
+        {
+          provide: VersionRepository,
+          useValue: {
+            findOne: jest.fn(),
+          },
+        },
+        {
+          provide: AppEnvironmentUtilService,
+          useValue: {
+            getOptions: jest.fn(),
+          },
+        },
+        {
+          provide: DataSourcesUtilService,
+          useValue: mockDataSourceUtilService,
+        },
+        {
+          provide: PluginsServiceSelector,
+          useValue: {
+            getService: jest.fn(),
+          },
+        },
+      ],
+    }).compile();
+
+    service = module.get<DataQueriesUtilService>(DataQueriesUtilService);
+    dataSourceUtilService = module.get<DataSourcesUtilService>(DataSourcesUtilService);
+  });
+
+  describe('parseQueryOptions', () => {
+    it('should traverse objects and arrays properly', async () => {
+      const object = {
+        nestedObject: {
+          key: 'value',
+        },
+        array: [1, 2, 3],
+        nestedArray: [{ key: 'value' }],
+      };
+      const options = {};
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual(object);
+    });
+
+    it('should replace a simple variable', async () => {
+      const object = {
+        key: '{{variable}}',
+      };
+      const options = {
+        '{{variable}}': 'replaced value',
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        key: 'replaced value',
+      });
+    });
+
+    it('should replace multiple variables in a string', async () => {
+      const object = {
+        key: 'Hello {{name}}, welcome to {{place}}!',
+      };
+      const options = {
+        '{{name}}': 'John',
+        '{{place}}': 'ToolJet',
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        key: 'Hello John, welcome to ToolJet!',
+      });
+    });
+
+    it('should replace newlines with spaces', async () => {
+      const object = {
+        key: 'Hello\nWorld',
+      };
+      const options = {};
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        key: 'Hello\nWorld',
+      });
+    });
+
+    it('should resolve constants', async () => {
+      const object = {
+        key: '{{constants.API_KEY}}',
+      };
+      const options = {};
+      jest.spyOn(dataSourceUtilService, 'resolveConstants').mockResolvedValue('resolved-api-key');
+
+      const result = await service.parseQueryOptions(object, options, 'org-id', 'env-id', { id: 'user-id' } as any);
+
+      expect(dataSourceUtilService.resolveConstants).toHaveBeenCalledWith('{{constants.API_KEY}}', 'org-id', 'env-id', {
+        id: 'user-id',
+      });
+      expect(result).toEqual({
+        key: 'resolved-api-key',
+      });
+    });
+
+    it('should resolve secrets', async () => {
+      const object = {
+        key: '{{secrets.DB_PASSWORD}}',
+      };
+      const options = {};
+      jest.spyOn(dataSourceUtilService, 'resolveConstants').mockResolvedValue('secret-password');
+
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(dataSourceUtilService.resolveConstants).toHaveBeenCalledWith(
+        '{{secrets.DB_PASSWORD}}',
+        'org-id',
+        undefined,
+        undefined
+      );
+      expect(result).toEqual({
+        key: 'secret-password',
+      });
+    });
+
+    it('should resolve globals.server variables', async () => {
+      const object = {
+        key: '{{globals.server.BASE_URL}}',
+      };
+      const options = {};
+      jest.spyOn(dataSourceUtilService, 'resolveConstants').mockResolvedValue('https://api.example.com');
+
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(dataSourceUtilService.resolveConstants).toHaveBeenCalledWith(
+        '{{globals.server.BASE_URL}}',
+        'org-id',
+        undefined,
+        undefined
+      );
+      expect(result).toEqual({
+        key: 'https://api.example.com',
+      });
+    });
+
+    it('should replace variables in nested objects', async () => {
+      const object = {
+        level1: {
+          level2: {
+            key: '{{variable}}',
+          },
+        },
+      };
+      const options = {
+        '{{variable}}': 'replaced value',
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        level1: {
+          level2: {
+            key: 'replaced value',
+          },
+        },
+      });
+    });
+
+    it('should replace variables in arrays', async () => {
+      const object = {
+        array: ['{{var1}}', '{{var2}}', 'static'],
+      };
+      const options = {
+        '{{var1}}': 'value1',
+        '{{var2}}': 'value2',
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        array: ['value1', 'value2', 'static'],
+      });
+    });
+
+    it('should handle object value replacements', async () => {
+      const object = {
+        key: '{{objectVar}}',
+      };
+      const options = {
+        '{{objectVar}}': { foo: 'bar' },
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        key: { foo: 'bar' },
+      });
+    });
+
+    it('should handle null and undefined replacements', async () => {
+      const object = {
+        nullKey: '{{nullVar}}',
+        undefinedKey: '{{undefinedVar}}',
+      };
+      const options = {
+        '{{nullVar}}': null,
+        '{{undefinedVar}}': undefined,
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        nullKey: null,
+        undefinedKey: undefined,
+      });
+    });
+
+    it('should handle numeric replacements', async () => {
+      const object = {
+        key: '{{numVar}}',
+      };
+      const options = {
+        '{{numVar}}': 42,
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        key: 42,
+      });
+    });
+
+    it('should handle a complex case with multiple replacement types', async () => {
+      const object = {
+        simpleVar: '{{var}}',
+        multipleVars: 'Hello {{name}} at {{company}}',
+        constant: '{{constants.API_URL}}',
+        nested: {
+          array: [
+            '{{var}}',
+            {
+              deepNested: '{{secrets.API_KEY}}',
+            },
+          ],
+        },
+      };
+
+      const options = {
+        '{{var}}': 'replaced',
+        '{{name}}': 'John',
+        '{{company}}': 'ToolJet',
+      };
+
+      jest.spyOn(dataSourceUtilService, 'resolveConstants').mockImplementation(async (value) => {
+        if (value === '{{constants.API_URL}}') return 'https://api.example.com';
+        if (value === '{{secrets.API_KEY}}') return 'secret-key';
+        return value;
+      });
+
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        simpleVar: 'replaced',
+        multipleVars: 'Hello John at ToolJet',
+        constant: 'https://api.example.com',
+        nested: {
+          array: [
+            'replaced',
+            {
+              deepNested: 'secret-key',
+            },
+          ],
+        },
+      });
+    });
+
+    it('should fail to resolve constants with spaces in variable names', async () => {
+      const object = {
+        key: '{{ constants.API_KEY}}',
+        anotherKey: '{{  secrets.DB_PASSWORD  }}',
+        thirdKey: '{{ globals.server.BASE_URL }}',
+      };
+      const options = {};
+
+      jest.spyOn(dataSourceUtilService, 'resolveConstants').mockResolvedValue('should-not-be-used');
+
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(dataSourceUtilService.resolveConstants).not.toHaveBeenCalledWith(
+        '{{ constants.API_KEY}}',
+        'org-id',
+        undefined,
+        undefined
+      );
+
+      expect(result).toEqual(object);
+    });
+
+    it('should not replace malformed variables', async () => {
+      const object = {
+        incomplete1: '{{ incomplete',
+        incomplete2: 'incomplete }}',
+        malformed: '{ variable }',
+      };
+      const options = {
+        '{{ incomplete': 'should not be used',
+        'incomplete }}': 'should not be used',
+        '{ variable }': 'should not be used',
+      };
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual(object);
+    });
+
+    it('should handle variables without replacement values', async () => {
+      const object = {
+        key: '{{nonExistentVar}}',
+      };
+      const options = {};
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        key: undefined,
+      });
+    });
+
+    it('should handle a mix of valid and invalid variable formats', async () => {
+      const object = {
+        valid: '{{validVar}}',
+        invalid: '{{ invalidVar }}',
+        mixed: 'Hello {{validVar}} and {{ invalidVar }}!',
+      };
+      const options = {
+        '{{validVar}}': 'replaced',
+        '{{ invalidVar }}': undefined,
+      };
+
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        valid: 'replaced',
+        invalid: undefined,
+        mixed: 'Hello replaced and undefined!',
+      });
+    });
+
+    it('should handle spaces in constants/secrets/globals references', async () => {
+      const object = {
+        secrets: '{{secrets.API_KEY}}',
+        secretsWithSpaces: '{{  secrets.API_KEY  }}',
+        constants: '{{constants.DB_URL}}',
+        constantsWithSpaces: '{{ constants.DB_URL }}',
+        globals: '{{globals.server.URL}}',
+        globalsWithSpaces: '{{  globals.server.URL  }}',
+      };
+
+      const options = {};
+
+      jest.spyOn(dataSourceUtilService, 'resolveConstants').mockImplementation(async (input) => {
+        if (input === '{{secrets.API_KEY}}') return 'correct-secret';
+        if (input === '{{constants.DB_URL}}') return 'correct-constant';
+        if (input === '{{globals.server.URL}}') return 'correct-global';
+        // These conditions should be included for proper handling of spaces
+        if (input === '{{  secrets.API_KEY  }}') return 'correct-secret-with-spaces';
+        if (input === '{{ constants.DB_URL }}') return 'correct-constant-with-spaces';
+        if (input === '{{  globals.server.URL  }}') return 'correct-global-with-spaces';
+        return input;
+      });
+
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      // This expectation will fail because the current implementation doesn't handle spaces correctly
+      expect(result).toEqual({
+        secrets: 'correct-secret',
+        secretsWithSpaces: 'correct-secret-with-spaces', // Should be resolved but currently isn't
+        constants: 'correct-constant',
+        constantsWithSpaces: 'correct-constant-with-spaces', // Should be resolved but currently isn't
+        globals: 'correct-global',
+        globalsWithSpaces: 'correct-global-with-spaces', // Should be resolved but currently isn't
+      });
+    });
+
+    it('should handle all JavaScript data types and special values', async () => {
+      const date = new Date('2023-05-15T12:00:00Z');
+      const regex = /test/gi;
+
+      const object = {
+        string: '{{stringVar}}',
+        number: '{{numberVar}}',
+        boolean: '{{boolVar}}',
+        nullVal: '{{nullVar}}',
+        undefinedVal: '{{undefinedVar}}',
+        nanVal: '{{nanVar}}',
+        infinityVal: '{{infinityVar}}',
+        negInfinityVal: '{{negInfinityVar}}',
+        emptyString: '{{emptyStringVar}}',
+        emptyArray: '{{emptyArrayVar}}',
+        emptyObject: '{{emptyObjectVar}}',
+        dateObj: '{{dateVar}}',
+        regexObj: '{{regexVar}}',
+        bigInt: '{{bigIntVar}}',
+        nestedObject: '{{nestedObjVar}}',
+        arrayMixed: '{{arrayMixedVar}}',
+        // Using variables within strings
+        mixedString: 'String with {{numberVar}} and {{boolVar}} values',
+      };
+
+      const options = {
+        '{{stringVar}}': 'test string',
+        '{{numberVar}}': 42,
+        '{{boolVar}}': true,
+        '{{nullVar}}': null,
+        '{{undefinedVar}}': undefined,
+        '{{nanVar}}': NaN,
+        '{{infinityVar}}': Infinity,
+        '{{negInfinityVar}}': -Infinity,
+        '{{emptyStringVar}}': '',
+        '{{emptyArrayVar}}': [],
+        '{{emptyObjectVar}}': {},
+        '{{dateVar}}': date,
+        '{{regexVar}}': regex,
+        '{{bigIntVar}}': BigInt(9007199254740991),
+        '{{nestedObjVar}}': {
+          key1: 'value1',
+          key2: 123,
+          key3: {
+            nestedKey: 'nested value',
+          },
+        },
+        '{{arrayMixedVar}}': [1, 'string', true, null, { key: 'value' }],
+      };
+
+      const result = await service.parseQueryOptions(object, options, 'org-id');
+
+      expect(result).toEqual({
+        string: 'test string',
+        number: 42,
+        boolean: true,
+        nullVal: null,
+        undefinedVal: undefined,
+        nanVal: NaN,
+        infinityVal: Infinity,
+        negInfinityVal: -Infinity,
+        emptyString: '',
+        emptyArray: [],
+        emptyObject: {},
+        dateObj: date,
+        regexObj: regex,
+        bigInt: BigInt(9007199254740991),
+        nestedObject: {
+          key1: 'value1',
+          key2: 123,
+          key3: {
+            nestedKey: 'nested value',
+          },
+        },
+        arrayMixed: [1, 'string', true, null, { key: 'value' }],
+        // Mixed string should have the values converted to strings when interpolated
+        mixedString: 'String with 42 and true values',
+      });
+    });
+  });
+});