diff --git a/packages/client/src/pages/PortalSettings/categories/common/appearance.js b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
index 42f3e20cc9..f22c51101b 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/appearance.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
@@ -107,6 +107,7 @@ const Appearance = (props) => {
   const array_items = useMemo(
     () => [
       {
+        id: "light-theme",
         key: "0",
         title: t("Profile:LightTheme"),
         content: (
@@ -120,6 +121,7 @@ const Appearance = (props) => {
         ),
       },
       {
+        id: "dark-theme",
         key: "1",
         title: t("Profile:DarkTheme"),
         content: (
@@ -733,7 +735,7 @@ const Appearance = (props) => {
 
         <div className="buttons-container">
           <Button
-            className="button"
+            className="save button"
             label={t("Common:SaveButton")}
             onClick={onSave}
             primary
@@ -742,7 +744,7 @@ const Appearance = (props) => {
           />
 
           <Button
-            className="button"
+            className="edit-current-theme button"
             label={t("Settings:EditCurrentTheme")}
             onClick={onClickEdit}
             size="small"
@@ -750,7 +752,7 @@ const Appearance = (props) => {
           />
           {isShowDeleteButton && (
             <Button
-              className="button"
+              className="delete-theme button"
               label={t("Settings:DeleteTheme")}
               onClick={onOpenDialogDelete}
               size="small"
diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
index a4ce96d90b..78c816015f 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
@@ -123,6 +123,7 @@ const ColorSchemeDialog = (props) => {
         {showSaveButtonDialog && (
           <>
             <Button
+              className="save"
               label={t("Common:SaveButton")}
               size="normal"
               primary
@@ -130,6 +131,7 @@ const ColorSchemeDialog = (props) => {
               onClick={onSaveColorSchemeDialog}
             />
             <Button
+              className="cancel-button"
               label={t("Common:CancelButton")}
               size="normal"
               scale
diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
index a1f31de0b3..c499a73c12 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
@@ -119,7 +119,7 @@ const HexColorPickerComponent = (props) => {
           />
           <Button
             label={t("Common:CancelButton")}
-            className="button"
+            className="cancel-button button"
             size="small"
             scale={true}
             onClick={onCloseHexColorPicker}
diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js
index ff223f42ec..49cd9284ef 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/modalDialogDelete.js
@@ -33,14 +33,14 @@ const ModalDialogDelete = (props) => {
       <ModalDialog.Body>{t("Settings:DeleteThemeNotice")}</ModalDialog.Body>
       <ModalDialog.Footer>
         <Button
-          className="button-modal"
+          className="delete button-modal"
           label={t("Common:Delete")}
           onClick={onClickDelete}
           primary
           size="normal"
         />
         <Button
-          className="button-modal"
+          className="cancel-button button-modal"
           label={t("Common:CancelButton")}
           size="normal"
           onClick={onClose}