diff --git a/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx b/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
index f1a5d171b4..866565252e 100644
--- a/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
+++ b/frontend/src/Editor/Components/RadioButtonV2/RadioButtonV2.jsx
@@ -191,7 +191,7 @@ export const RadioButtonV2 = ({
         data-cy={`label-${String(componentName).toLowerCase()} `}
         data-disabled={isDisabled}
         id={String(componentName)}
-        className={cx('radio-button,', 'd-flex', {
+        className={cx('radio-button', 'd-flex', {
           [alignment === 'top' &&
           ((labelWidth != 0 && label?.length != 0) ||
             (labelAutoWidth && labelWidth == 0 && label && label?.length != 0))
@@ -279,7 +279,7 @@ export const RadioButtonV2 = ({
         </div>
       </div>
       <div
-        className={`${isValid ? '' : visibility ? 'd-flex' : 'none'}`}
+        className={`${isValid ? 'd-none' : visibility ? 'd-flex' : 'd-none'}`}
         style={{
           color: 'var(--status-error-strong)',
           justifyContent: direction === 'right' ? 'flex-start' : 'flex-end',
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 432a7b4f0f..f79ec46931 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -10715,6 +10715,10 @@ tbody {
   width: 660px;
 }
 
+.org-users-page-animation-fade {
+  height: 100%;
+}
+
 .org-users-page {
   .nav-tabs .nav-link.active {
     background-color: transparent !important;
@@ -10881,6 +10885,25 @@ tbody {
   }
 }
 
+.default-group-wrap-small {
+  gap: 4px;
+  width: 121px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--indigo3);
+  border-radius: 6px;
+  padding: 5px 10px;
+  
+  p {
+    font-weight: 500 !important;
+    line-height: 18px !important;
+    color: var(--indigo9);
+    font-family: 'IBM Plex Sans', sans-serif;
+  }
+}
+
 .sso-icon-wrapper {
   display: flex;
   flex-direction: row;
diff --git a/frontend/src/_ui/Icon/solidIcons/Moon.jsx b/frontend/src/_ui/Icon/solidIcons/Moon.jsx
new file mode 100644
index 0000000000..913a345c56
--- /dev/null
+++ b/frontend/src/_ui/Icon/solidIcons/Moon.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Moon = ({ fill = '#6A727C', width = '24', className = '', viewBox = '0 0 24 24' }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox={viewBox}
+      className={className}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.107 6.64283C15.6139 6.64283 15.2142 6.24309 15.2142 5.74998V5.21426H14.6785C14.1854 5.21426 13.7856 4.81452 13.7856 4.32141C13.7856 3.8283 14.1854 3.42856 14.6785 3.42856H15.2142V2.89285C15.2142 2.39974 15.6139 2 16.107 2C16.6002 2 16.9999 2.39974 16.9999 2.89285V3.42856H17.5356C18.0288 3.42856 18.4285 3.8283 18.4285 4.32141C18.4285 4.81452 18.0288 5.21426 17.5356 5.21426H16.9999V5.74998C16.9999 6.24309 16.6002 6.64283 16.107 6.64283ZM18.7856 11.4642C18.7856 11.9573 19.1853 12.3571 19.6785 12.3571C20.1716 12.3571 20.5713 11.9573 20.5713 11.4642V10.9285H21.107C21.6002 10.9285 21.9999 10.5288 21.9999 10.0357C21.9999 9.54255 21.6002 9.14281 21.107 9.14281H20.5713V8.6071C20.5713 8.11399 20.1716 7.71425 19.6785 7.71425C19.1853 7.71425 18.7856 8.11399 18.7856 8.6071V9.14281H18.2499C17.7568 9.14281 17.357 9.54255 17.357 10.0357C17.357 10.5288 17.7568 10.9285 18.2499 10.9285H18.7856V11.4642ZM6.07263 6.07373C7.96356 4.98201 10.1187 4.74735 12.1075 5.23996C12.7387 5.39633 12.9939 5.95217 12.9996 6.40209C13.0051 6.8352 12.7967 7.33059 12.3328 7.59845C10.4674 8.67541 9.82636 11.1468 10.9769 13.1396C12.1274 15.1324 14.5883 15.8129 16.4536 14.736C16.9176 14.4681 17.4508 14.5354 17.8232 14.7567C18.2099 14.9866 18.5637 15.4855 18.3835 16.1103C17.8158 18.0789 16.5349 19.828 14.644 20.9197C10.6598 23.2201 5.53735 21.7172 3.18302 17.6395C0.828705 13.5616 2.08841 8.37403 6.07263 6.07373Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default Moon;
diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js
index 5daa4b7c91..2a7b801570 100644
--- a/frontend/src/_ui/Icon/solidIcons/index.js
+++ b/frontend/src/_ui/Icon/solidIcons/index.js
@@ -234,6 +234,7 @@ import NewTabSmall from './NewTabSmall.jsx';
 import Code from './Code.jsx';
 import WorkflowV3 from './WorkflowV3.jsx';
 import WorkspaceV3 from './WorkspaceV3.jsx';
+import Moon from './Moon.jsx';
 
 const Icon = (props) => {
   switch (props.name) {
@@ -707,6 +708,8 @@ const Icon = (props) => {
       return <AICrown {...props} />;
     case 'play01':
       return <Play01 {...props} />;
+    case 'moon':
+      return <Moon {...props} />;
     default:
       return <Apps {...props} />;
   }
diff --git a/frontend/src/components/ui/Input/EditableTitleInput/Index.jsx b/frontend/src/components/ui/Input/EditableTitleInput/Index.jsx
index 62ae962970..0ca218e305 100644
--- a/frontend/src/components/ui/Input/EditableTitleInput/Index.jsx
+++ b/frontend/src/components/ui/Input/EditableTitleInput/Index.jsx
@@ -4,7 +4,7 @@ import { Input } from '../Input';
 import { HelperMessage, ValidationMessage } from '../InputUtils/InputUtils';
 import Tooltip from '../../Tooltip/Tooltip';
 
-const EditableTitleInput = ({ size, disabled, helperText, onChange, ...restProps }) => {
+const EditableTitleInput = ({ size, disabled, helperText, onChange: change, readOnly, placeholder, ...restProps }) => {
   const inputRef = useRef(null);
   const [tooltipWidth, setTooltipWidth] = useState('auto');
   const [isValid, setIsValid] = useState(null);
@@ -17,7 +17,7 @@ const EditableTitleInput = ({ size, disabled, helperText, onChange, ...restProps
       setIsValid(validateObj.valid);
       setMessage(validateObj.message);
     }
-    onChange(e, validateObj);
+    change(e, validateObj);
   };
 
   const inputStyle = `tw-border-transparent hover:tw-border-border-default tw-font-medium tw-pl-[12px] tw-pr-[12px] ${
@@ -35,7 +35,14 @@ const EditableTitleInput = ({ size, disabled, helperText, onChange, ...restProps
   return (
     <div className="tw-relative">
       <div className="tw-peer tw-relative" ref={inputRef}>
-        <Input size={size} disabled={disabled} onChange={handleChange} {...restProps} className={inputStyle} />
+        <Input
+          size={size}
+          disabled={disabled}
+          placeholder={disabled && readOnly ? readOnly : placeholder}
+          onChange={handleChange}
+          {...restProps}
+          className={inputStyle}
+        />
         <SolidIcon
           name="editable"
           width="16px"
diff --git a/server/src/modules/organization-themes/constants/index.ts b/server/src/modules/organization-themes/constants/index.ts
index 5f8041bc52..581c2181c0 100644
--- a/server/src/modules/organization-themes/constants/index.ts
+++ b/server/src/modules/organization-themes/constants/index.ts
@@ -31,11 +31,11 @@ export const TJDefaultTheme: Definition = {
         light: '#1B1F24',
         dark: '#CFD3D8',
       },
-      secondary: {
+      placeholder: {
         light: '#6A727C',
         dark: '#858C94',
       },
-      tertiary: {
+      disabled: {
         light: '#ACB2B9',
         dark: '#545B64',
       },
@@ -48,15 +48,15 @@ export const TJDefaultTheme: Definition = {
       large: 0,
     },
     colors: {
-      primary: {
+      default: {
         light: '#CCD1D5',
         dark: '#3C434B',
       },
-      secondary: {
+      weak: {
         light: '#E4E7EB',
         dark: '#EEF0F1',
       },
-      tertiary: {
+      disabled: {
         light: '#E4E7EB',
         dark: '#F6F8FA',
       },
@@ -64,15 +64,15 @@ export const TJDefaultTheme: Definition = {
   },
   systemStatus: {
     colors: {
-      primary: {
+      success: {
         light: '#1E823B',
         dark: '#318344',
       },
-      secondary: {
+      error: {
         light: '#D72D39',
         dark: '#D03F43',
       },
-      tertiary: {
+      warning: {
         light: '#BF4F03',
         dark: '#BA5722',
       },
@@ -84,6 +84,18 @@ export const TJDefaultTheme: Definition = {
         light: '#F6F6F6',
         dark: '#121518',
       },
+      surface1: {
+        light: '#FFFFFF',
+        dark: '#1E2226',
+      },
+      surface2: {
+        light: '#F6F8FA',
+        dark: '#2B3036',
+      },
+      surface3: {
+        light: '#E4E7EB',
+        dark: '#3C434B',
+      },
     },
   },
 };
diff --git a/server/src/modules/organization-themes/dto/index.ts b/server/src/modules/organization-themes/dto/index.ts
index c87f7b1565..eb7ac608cd 100644
--- a/server/src/modules/organization-themes/dto/index.ts
+++ b/server/src/modules/organization-themes/dto/index.ts
@@ -33,12 +33,12 @@ class TextColors {
   @IsOptional()
   @ValidateNested()
   @Type(() => Color)
-  secondary?: Color;
+  placeholder?: Color;
 
   @IsOptional()
   @ValidateNested()
   @Type(() => Color)
-  tertiary?: Color;
+  disabled?: Color;
 }
 
 class Text {
@@ -64,17 +64,17 @@ class BorderRadius {
 class BorderColors {
   @ValidateNested()
   @Type(() => Color)
-  primary: Color;
+  default: Color;
 
   @IsOptional()
   @ValidateNested()
   @Type(() => Color)
-  secondary?: Color;
+  weak?: Color;
 
   @IsOptional()
   @ValidateNested()
   @Type(() => Color)
-  tertiary?: Color;
+  disabled?: Color;
 }
 
 class Border {
@@ -90,17 +90,17 @@ class Border {
 class SystemStatusColors {
   @ValidateNested()
   @Type(() => Color)
-  primary: Color;
+  success: Color;
 
   @IsOptional()
   @ValidateNested()
   @Type(() => Color)
-  secondary?: Color;
+  error?: Color;
 
   @IsOptional()
   @ValidateNested()
   @Type(() => Color)
-  tertiary?: Color;
+  warning?: Color;
 }
 
 class SystemStatus {
@@ -121,6 +121,18 @@ class SurfaceColors {
   @ValidateNested()
   @Type(() => AppBackgroundColor)
   appBackground: AppBackgroundColor;
+
+  @ValidateNested()
+  @Type(() => Color)
+  surface1: Color;
+
+  @ValidateNested()
+  @Type(() => Color)
+  surface2: Color;
+
+  @ValidateNested()
+  @Type(() => Color)
+  surface3: Color;
 }
 
 class Surface {