From aeec7b0471390e403353213e85e66db0a7e99bb0 Mon Sep 17 00:00:00 2001
From: Chetan <chetan.koli@logicloop.io>
Date: Sat, 5 Sep 2026 18:40:30 +0530
Subject: [PATCH] Refactor DashboardPage to use new solid-dashboard.css and
 update class names

- Replaced CSS module imports with a new global CSS file for the DashboardPage.
- Updated class names in the DashboardPage component to match the new CSS styles.
- Introduced a new solid-dashboard.css file containing styles for the dashboard layout, header, filters, and widgets.
- Removed the old CSS module type definitions as they are no longer needed.
---
 src/components/common/SettingsComponent.tsx   | 116 +--
 src/components/common/SolidLoadingState.tsx   |  12 +-
 src/components/common/SolidModuleHome.tsx     |  21 +-
 ...nent.module.css => settings-component.css} | 256 +++----
 ...ate.module.css => solid-loading-state.css} |  14 +-
 src/components/common/solid-module-home.css   |  84 +++
 .../common/solidModuleHome.module.css         | 134 ----
 .../chatter/SolidChatterCustomMessage.tsx     |   6 +-
 .../core/chatter/SolidChatterDateDivider.tsx  |   6 +-
 .../core/chatter/SolidChatterHeader.tsx       |   5 +-
 .../core/chatter/SolidChatterMentionMenu.tsx  |  14 +-
 .../core/chatter/SolidChatterMessageBox.tsx   |  31 +-
 .../core/chatter/SolidMessageComposer.tsx     |  27 +-
 .../{chatter.module.css => solid-chatter.css} | 100 ++-
 .../SolidAccountSettings.tsx                  |  20 +-
 .../SolidChangePassword.tsx                   |  46 +-
 .../SolidNotifications.tsx                    |  18 +-
 .../SolidPersonalInfo.tsx                     |  72 +-
 .../SolidAccountSettings/SolidVersionInfo.tsx |  66 +-
 ....module.css => solid-account-settings.css} | 244 +++---
 .../SolidImportDropzone.tsx                   |   5 +-
 .../SolidImportInstructions.tsx               |   5 +-
 .../SolidImportTransaction.tsx                |   7 +-
 ...olidImport.module.css => solid-import.css} | 246 +++---
 .../SolidLoaders/SolidCircularLoader.tsx      |   6 +-
 ...s.module.css => solid-circular-loader.css} |   4 +-
 .../media/fileSize/MediaFileSizeWidget.tsx    |   8 +-
 .../core/form/SolidFormViewShimmerLoading.tsx |   6 +-
 .../core/form/fields/SolidBooleanField.tsx    |  26 +-
 .../core/form/fields/SolidComputedField.tsx   |  14 +-
 .../core/form/fields/SolidDateField.tsx       |  12 +-
 .../core/form/fields/SolidDateTimeField.tsx   |  12 +-
 .../core/form/fields/SolidDecimalField.tsx    |  16 +-
 .../core/form/fields/SolidEmailField.tsx      |  10 +-
 .../core/form/fields/SolidIntegerField.tsx    |  16 +-
 .../core/form/fields/SolidJsonField.tsx       |  10 +-
 .../core/form/fields/SolidLongTextField.tsx   |  20 +-
 .../form/fields/SolidMediaMultipleField.tsx   |  52 +-
 .../form/fields/SolidMediaSingleField.tsx     |  36 +-
 .../core/form/fields/SolidPasswordField.tsx   |  36 +-
 .../core/form/fields/SolidRichTextField.tsx   |  12 +-
 .../fields/SolidSelectionDynamicField.tsx     |  16 +-
 .../form/fields/SolidSelectionStaticField.tsx |  32 +-
 .../core/form/fields/SolidShortTextField.tsx  |  28 +-
 .../core/form/fields/SolidTimeField.tsx       |  12 +-
 .../SolidRelationManyToManyField.tsx          |  20 +-
 .../relations/SolidRelationManyToOneField.tsx |  16 +-
 .../relations/SolidRelationOneToManyField.tsx |  12 +-
 ...olidFields.module.css => solid-fields.css} |  95 ++-
 ...ss => solid-form-view-shimmer-loading.css} |   2 +-
 .../SolidListColumnSelector.tsx               |   7 +-
 ...ule.css => solid-list-column-selector.css} |   4 +-
 src/components/core/list/SolidListView.tsx    |  10 +-
 .../core/list/SolidListViewWrapper.module.css |  90 ---
 .../list/columns/SolidMediaMultipleColumn.tsx |  14 +-
 .../core/list/solid-list-view-wrapper.css     |  13 +
 .../widgets/PublishedStatusListViewWidget.tsx |   8 +-
 ... => published-status-list-view-widget.css} |  10 +-
 .../core/model/FieldMetaDataForm.tsx          | 264 +++----
 src/components/core/model/ModelMetaData.tsx   |  52 +-
 src/components/core/module/CreateModule.tsx   |  44 +-
 src/components/core/solid-ai/SolidAiChat.tsx  | 248 +++----
 ...lidAiChat.module.css => solid-ai-chat.css} | 485 ++++--------
 .../themes/solid-dark-enterprise/theme.css    | 695 +++--------------
 .../themes/solid-dark-modern/theme.css        | 280 ++-----
 .../themes/solid-dark-purple/theme.css        |  14 +-
 .../themes/solid-light-enterprise/theme.css   | 700 +++---------------
 .../themes/solid-light-modern/theme.css       | 463 ++++--------
 .../themes/solid-light-purple/theme.css       |  14 +-
 src/routes/pages/admin/core/DashboardPage.tsx |  84 +--
 ...ardPage.module.css => solid-dashboard.css} |  92 +--
 src/types/css-modules.d.ts                    |   6 -
 72 files changed, 1999 insertions(+), 3682 deletions(-)
 rename src/components/common/{SettingsComponent.module.css => settings-component.css} (72%)
 rename src/components/common/{SolidLoadingState.module.css => solid-loading-state.css} (85%)
 create mode 100644 src/components/common/solid-module-home.css
 delete mode 100644 src/components/common/solidModuleHome.module.css
 rename src/components/core/chatter/{chatter.module.css => solid-chatter.css} (80%)
 rename src/components/core/common/SolidAccountSettings/{SolidAccountSettings.module.css => solid-account-settings.css} (69%)
 rename src/components/core/common/SolidGenericImport/{SolidImport.module.css => solid-import.css} (70%)
 rename src/components/core/common/SolidLoaders/{SolidLoaders.module.css => solid-circular-loader.css} (93%)
 rename src/components/core/form/fields/{solidFields.module.css => solid-fields.css} (78%)
 rename src/components/core/form/{solidFormViewShimmerLoading.module.css => solid-form-view-shimmer-loading.css} (67%)
 rename src/components/core/list/SolidColumnSelector/{SolidListColumnSelector.module.css => solid-list-column-selector.css} (69%)
 delete mode 100644 src/components/core/list/SolidListViewWrapper.module.css
 create mode 100644 src/components/core/list/solid-list-view-wrapper.css
 rename src/components/core/list/widgets/{PublishedStatusListViewWidget.module.css => published-status-list-view-widget.css} (68%)
 rename src/components/core/solid-ai/{SolidAiChat.module.css => solid-ai-chat.css} (75%)
 rename src/routes/pages/admin/core/{DashboardPage.module.css => solid-dashboard.css} (66%)
 delete mode 100644 src/types/css-modules.d.ts

diff --git a/src/components/common/SettingsComponent.tsx b/src/components/common/SettingsComponent.tsx
index 54de70e9..56f16f19 100644
--- a/src/components/common/SettingsComponent.tsx
+++ b/src/components/common/SettingsComponent.tsx
@@ -33,7 +33,7 @@ import {
 import { SettingDropzoneActivePlaceholder } from "./SolidSettings/SettingDropzoneActivePlaceholder";
 import { SettingsImageRemoveButton } from "./SolidSettings/SettingsImageRemoveButton";
 import { SolidUploadedImage } from "./SolidSettings/SolidUploadedImage";
-import styles from "./SettingsComponent.module.css";
+import "./settings-component.css";
 
 type SettingsFormValue = string | number | boolean | null | File;
 type SettingsFilterMode = "all" | "read-only" | "editable";
@@ -306,11 +306,11 @@ export function SettingsComponent() {
   const moduleTabs = moduleEntries.map((entry) => ({
     value: entry.moduleName,
     label: (
-      <span className={styles.moduleTab}>
-        <span className={styles.moduleTabBadge}>{entry.badge}</span>
-        <span className={styles.moduleTabText}>
-          <span className={styles.moduleTabLabel}>{entry.label}</span>
-          <span className={styles.moduleTabMeta}>{entry.settings.length} settings</span>
+      <span className={"solid-settings-module-tab"}>
+        <span className={"solid-settings-module-tab-badge"}>{entry.badge}</span>
+        <span className={"solid-settings-module-tab-text"}>
+          <span className={"solid-settings-module-tab-label"}>{entry.label}</span>
+          <span className={"solid-settings-module-tab-meta"}>{entry.settings.length} settings</span>
         </span>
       </span>
     ),
@@ -318,15 +318,15 @@ export function SettingsComponent() {
       <div>
         {groupedModuleSettings.length ? (
           groupedModuleSettings.map((group) => (
-            <section key={group.key} className={styles.groupSection}>
-              <div className={styles.groupCard}>
-                <div className={styles.groupHeader}>
+            <section key={group.key} className={"solid-settings-group-section"}>
+              <div className={"solid-settings-group-card"}>
+                <div className={"solid-settings-group-header"}>
                   <div>
-                    <h3 className={styles.groupTitle}>{group.label}</h3>
-                    <div className={styles.groupMeta}>{group.settings.length} item{group.settings.length === 1 ? "" : "s"}</div>
+                    <h3 className={"solid-settings-group-title"}>{group.label}</h3>
+                    <div className={"solid-settings-group-meta"}>{group.settings.length} item{group.settings.length === 1 ? "" : "s"}</div>
                   </div>
                 </div>
-                <div className={styles.groupBody}>
+                <div className={"solid-settings-group-body"}>
                   {group.settings.map((setting) => {
                     const value = formValues[setting.key];
                     const settingName = setting.label || humanizeSettingToken(setting.key);
@@ -344,22 +344,22 @@ export function SettingsComponent() {
                       updateFileValue,
                     };
                     return (
-                      <div key={setting.key} className={styles.settingRow}>
-                        <div className={styles.settingLabelWrap}>
-                          <div className={styles.settingLabelLine}>
-                            <p className={styles.settingLabel}>{settingName}</p>
+                      <div key={setting.key} className={"solid-settings-setting-row"}>
+                        <div className={"solid-settings-setting-label-wrap"}>
+                          <div className={"solid-settings-setting-label-line"}>
+                            <p className={"solid-settings-setting-label"}>{settingName}</p>
                             {settingHelpText ? (
                               <SolidTooltip>
                                 <SolidTooltipTrigger asChild>
                                   <button
                                     type="button"
-                                    className={styles.settingHelpButton}
+                                    className={"solid-settings-setting-help-button"}
                                     aria-label={`Show help for ${settingName}`}
                                   >
                                     <CircleHelp size={14} aria-hidden />
                                   </button>
                                 </SolidTooltipTrigger>
-                                <SolidTooltipContent align="start" className={styles.settingHelpTooltip}>
+                                <SolidTooltipContent align="start" className={"solid-settings-setting-help-tooltip"}>
                                   {settingHelpText}
                                 </SolidTooltipContent>
                               </SolidTooltip>
@@ -377,14 +377,14 @@ export function SettingsComponent() {
                               </SolidTooltip>
                             ) : null}
                           </div>
-                          {setting.description ? <p className={styles.settingDescription}>{setting.description}</p> : null}
+                          {setting.description ? <p className={"solid-settings-setting-description"}>{setting.description}</p> : null}
                         </div>
 
                         {!setting.editable ? (
                           setting.controlType === "custom" ? (
                             customWidgetErrorText ? (
-                              <div className={styles.readonlyValue}>
-                                <span className={styles.customWidgetError}>{customWidgetErrorText}</span>
+                              <div className={"solid-settings-readonly-value"}>
+                                <span className={"solid-settings-custom-widget-error"}>{customWidgetErrorText}</span>
                               </div>
                             ) : SettingsWidget ? (
                               (() => {
@@ -393,22 +393,22 @@ export function SettingsComponent() {
                               })()
                             ) : null
                           ) : setting.controlType === "mediaSingle" && value ? (
-                            <div className={styles.mediaPreview}>
+                            <div className={"solid-settings-media-preview"}>
                               <SolidUploadedImage src={normalizeAssetUrl(String(value))} />
                             </div>
                           ) : (
-                            <div className={styles.readonlyValue}>
-                              <span className={value === null || value === undefined || value === "" ? styles.emptyValue : undefined}>
+                            <div className={"solid-settings-readonly-value"}>
+                              <span className={value === null || value === undefined || value === "" ? "solid-settings-empty-value" : undefined}>
                                 {formatReadonlyValue(setting, value)}
                               </span>
                             </div>
                           )
                         ) : (
-                          <div className={`${styles.controlStack} ${setting.controlType === "custom" ? styles.customControlStack : ""}`}>
+                          <div className={`${"solid-settings-control-stack"} ${setting.controlType === "custom" ? "solid-settings-custom-control-stack" : ""}`}>
                             {setting.controlType === "boolean" ? (
-                              <div className={styles.boolRow}>
+                              <div className={"solid-settings-bool-row"}>
                                 <SolidSwitch checked={Boolean(value)} onChange={(checked) => updateValue(setting.key, checked)} />
-                                <span className={styles.boolText}>{value ? "Enabled" : "Disabled"}</span>
+                                <span className={"solid-settings-bool-text"}>{value ? "Enabled" : "Disabled"}</span>
                               </div>
                             ) : null}
 
@@ -459,11 +459,11 @@ export function SettingsComponent() {
                             ) : null}
 
                             {setting.controlType === "mediaSingle" ? (
-                              <div className={styles.mediaField}>
-                                <div className={styles.mediaComposer}>
-                                  <label className={styles.mediaDropzone}>
+                              <div className={"solid-settings-media-field"}>
+                                <div className={"solid-settings-media-composer"}>
+                                  <label className={"solid-settings-media-dropzone"}>
                                     <input
-                                      className={styles.mediaInput}
+                                      className={"solid-settings-media-input"}
                                       type="file"
                                       accept=".png,.jpg,.jpeg,.svg,.webp"
                                       onChange={(event) => updateFileValue(setting.key, event.target.files?.[0] ?? null)}
@@ -471,11 +471,11 @@ export function SettingsComponent() {
                                     <SettingDropzoneActivePlaceholder note="PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB" />
                                   </label>
                                   {(filePreviews[setting.key] || value) ? (
-                                    <div className={styles.mediaPreview}>
+                                    <div className={"solid-settings-media-preview"}>
                                       <SolidUploadedImage src={filePreviews[setting.key] || normalizeAssetUrl(String(value))} />
                                     </div>
                                   ) : (
-                                    <div className={styles.mediaEmptyState}>Preview appears here after upload</div>
+                                    <div className={"solid-settings-media-empty-state"}>Preview appears here after upload</div>
                                   )}
                                 </div>
                                 {(filePreviews[setting.key] || value) ? (
@@ -486,8 +486,8 @@ export function SettingsComponent() {
 
                             {setting.controlType === "custom" ? (
                               customWidgetErrorText ? (
-                                <div className={styles.readonlyValue}>
-                                  <span className={styles.customWidgetError}>{customWidgetErrorText}</span>
+                                <div className={"solid-settings-readonly-value"}>
+                                  <span className={"solid-settings-custom-widget-error"}>{customWidgetErrorText}</span>
                                 </div>
                               ) : SettingsWidget ? (
                                 (() => {
@@ -506,24 +506,24 @@ export function SettingsComponent() {
             </section>
           ))
         ) : (
-          <div className={styles.emptyState}>No settings match the current filter.</div>
+          <div className={"solid-settings-empty-state"}>No settings match the current filter.</div>
         )}
       </div>
     ),
   }));
 
   return (
-    <div className={styles.page}>
-      <div className={`page-header ${styles.pageHeader}`}>
-        <div className={styles.headerIntro}>
+    <div className={"solid-settings-page"}>
+      <div className="solid-settings-page-header">
+        <div className={"solid-settings-header-intro"}>
           <div className="form-wrapper-title">Settings</div>
-          <div className={styles.subtitle}>Manage platform configuration across modules from a single workspace.</div>
-          <div className={styles.summaryChips}>
-            <span className={styles.summaryChip}>{moduleEntries.length} module{moduleEntries.length === 1 ? "" : "s"}</span>
-            <span className={styles.summaryChip}>{totalSettingsCount} setting{totalSettingsCount === 1 ? "" : "s"}</span>
+          <div className={"solid-settings-subtitle"}>Manage platform configuration across modules from a single workspace.</div>
+          <div className={"solid-settings-summary-chips"}>
+            <span className={"solid-settings-summary-chip"}>{moduleEntries.length} module{moduleEntries.length === 1 ? "" : "s"}</span>
+            <span className={"solid-settings-summary-chip"}>{totalSettingsCount} setting{totalSettingsCount === 1 ? "" : "s"}</span>
             <button
               type="button"
-              className={`${styles.summaryChip} ${styles.summaryChipButton} ${filterMode === "editable" ? styles.summaryChipActive : ""}`}
+              className={`${"solid-settings-summary-chip"} ${"solid-settings-summary-chip-button"} ${filterMode === "editable" ? "solid-settings-summary-chip-active" : ""}`}
               aria-pressed={filterMode === "editable"}
               onClick={() => setFilterMode((current) => (current === "editable" ? "all" : "editable"))}
             >
@@ -531,39 +531,39 @@ export function SettingsComponent() {
             </button>
           </div>
         </div>
-        <div className={styles.headerSearch}>
-          <div className={styles.searchIcon}>
+        <div className={"solid-settings-header-search"}>
+          <div className={"solid-settings-search-icon"}>
             <Search size={16} />
             <SolidInput
-              className={styles.searchInput}
+              className={"solid-settings-search-input"}
               value={searchTerm}
               placeholder="Search settings, groups, or modules"
               onChange={(event: any) => setSearchTerm(event.target.value)}
             />
           </div>
           {searchTerm ? (
-            <span className={styles.resultsMeta}>
+            <span className={"solid-settings-results-meta"}>
               {filteredSettings.length} result{filteredSettings.length === 1 ? "" : "s"}
             </span>
           ) : null}
         </div>
-        <div className={styles.toolbarActions}>
-          <div className={styles.legend}>
+        <div className={"solid-settings-toolbar-actions"}>
+          <div className={"solid-settings-legend"}>
             <button
               type="button"
-              className={`${styles.readonlyFilterButton} ${filterMode === "read-only" ? styles.readonlyFilterButtonActive : ""}`}
+              className={`${"solid-settings-readonly-filter-button"} ${filterMode === "read-only" ? "solid-settings-readonly-filter-button-active" : ""}`}
               aria-pressed={filterMode === "read-only"}
               aria-label={filterMode === "read-only" ? "Disable read-only filter" : "Enable read-only filter"}
               onClick={() => setFilterMode((current) => (current === "read-only" ? "all" : "read-only"))}
             >
               <SolidTag tone="warn">Read only</SolidTag>
             </button>
-            <span className={filterMode === "read-only" ? styles.legendLabelActive : undefined}>
+            <span className={filterMode === "read-only" ? "solid-settings-legend-label-active" : undefined}>
               {filterMode === "read-only" ? "Read-only filter active" : "System-managed value"}
             </span>
             <SolidTooltip>
               <SolidTooltipTrigger asChild>
-                <button type="button" className={styles.legendButton} aria-label="Read-only legend details">
+                <button type="button" className={"solid-settings-legend-button"} aria-label="Read-only solid-settings-legend details">
                   i
                 </button>
               </SolidTooltipTrigger>
@@ -578,19 +578,19 @@ export function SettingsComponent() {
         </div>
       </div>
 
-      <div className={styles.workspace}>
+      <div className={"solid-settings-workspace"}>
         {moduleTabs.length ? (
           <SolidTabGroup
             tabs={moduleTabs}
             value={activeModule}
             onValueChange={setActiveModule}
-            className={styles.tabGroup}
-            listClassName={styles.tabList}
-            panelClassName={styles.tabPanel}
+            className={"solid-settings-tab-group"}
+            listClassName={"solid-settings-tab-list"}
+            panelClassName={"solid-settings-tab-panel"}
             orientation="vertical"
           />
         ) : (
-          <div className={styles.emptyState}>No settings are available.</div>
+          <div className={"solid-settings-empty-state"}>No settings are available.</div>
         )}
       </div>
     </div>
diff --git a/src/components/common/SolidLoadingState.tsx b/src/components/common/SolidLoadingState.tsx
index cad4a68f..86d155d5 100644
--- a/src/components/common/SolidLoadingState.tsx
+++ b/src/components/common/SolidLoadingState.tsx
@@ -2,7 +2,7 @@ import { useLayoutEffect } from "react";
 import type { ReactNode } from "react";
 import { SolidSpinner } from "../shad-cn-ui";
 import { getDefaultThemeKey, isRegisteredThemeKey, type ThemeMode } from "../../theme/theme-registry";
-import styles from "./SolidLoadingState.module.css";
+import "./solid-loading-state.css";
 
 const THEME_MODE_STORAGE_KEY = "solidx.theme.mode";
 const LIGHT_THEME_STORAGE_KEY = "solidx.theme.light";
@@ -47,11 +47,11 @@ export function SolidLoadingState({
   }, []);
 
   return (
-    <section className={styles.solidLoadingState} aria-busy="true" aria-live="polite">
-      <div className={styles.card}>
-        <SolidSpinner size={28} className={styles.spinner} label={spinnerLabel} />
-        <h2 className={styles.title}>{title}</h2>
-        <p className={styles.description}>{description}</p>
+    <section className={"solid-loading-state"} aria-busy="true" aria-live="polite">
+      <div className={"solid-loading-card"}>
+        <SolidSpinner size={28} className={"solid-loading-spinner"} label={spinnerLabel} />
+        <h2 className={"solid-loading-title"}>{title}</h2>
+        <p className={"solid-loading-description"}>{description}</p>
         {children}
       </div>
     </section>
diff --git a/src/components/common/SolidModuleHome.tsx b/src/components/common/SolidModuleHome.tsx
index 9cc2b7ec..48763c7a 100644
--- a/src/components/common/SolidModuleHome.tsx
+++ b/src/components/common/SolidModuleHome.tsx
@@ -1,8 +1,7 @@
 
 
 import { useSession } from "../../hooks/useSession";
-import styles from './solidModuleHome.module.css'
-import { DocsSvg } from '../Svg/DocsSvg';
+import './solid-module-home.css';import { DocsSvg } from '../Svg/DocsSvg';
 import { SettingsSvg } from '../Svg/SettingsSvg';
 import { DevDocs } from '../Svg/DevDocs';
 import { HomePageModuleSvg } from '../Svg/HomePageModuleSvg';
@@ -46,16 +45,16 @@ export const SolidModuleHome = ({ moduleName = "Dashboard" }: SolidModuleHomePro
                 </div>
             </div>
             <div className="p-6 md:p-8 flex flex-col gap-6">
-                <div className={styles.solidModuleWelcomeSection}>
+                <div className={"solid-module-welcome-section"}>
                     <div className='flex flex-col gap-2 pr-4 lg:pr-0'>
-                        <h3 className={styles.solidModuleHomeTitle1}>
+                        <h3 className={"solid-module-home-title1"}>
                             Welcome, {status === "loading" ? "." : user}
                         </h3>
                         <p className='m-0 w-35rem text-sl'>
                             This is the home page for the {moduleName} module. You can find documentation and settings below.
                         </p>
                     </div>
-                    <div className={styles.homeSvg}>
+                    <div className={"solid-module-home-home-svg"}>
                         <HomePageModuleSvg />
                     </div>
                 </div>
@@ -66,26 +65,26 @@ export const SolidModuleHome = ({ moduleName = "Dashboard" }: SolidModuleHomePro
                         icon: <DocsSvg />,
                         title: 'Admin Docs',
                         description: 'Explore the administrator documentation to manage and configure your system',
-                        class: styles.dashboardCardOne,
+                        class: "solid-module-home-dashboard-card-one",
                         url: 'https://docs.solidxai.com/docs/admin-docs/'
                     }, {
                         icon: <DevDocs />,
                         title: 'Dev Docs',
                         description: 'Dive into the developer documentation to build, extend, and integrate with the platform',
-                        class: styles.dashboardCardTwo,
+                        class: "solid-module-home-dashboard-card-two",
                         url: 'https://docs.solidxai.com/docs/developer-docs/'
                     }, {
                         icon: <SettingsSvg />,
                         title: 'Settings',
                         description: 'Access and update your account settings, preferences, and profile information',
-                        class: styles.dashboardCardThree,
+                        class: "solid-module-home-dashboard-card-three",
                         type: 'popup'
                     }].map((card, i) => (
                         <div className='w-full md:w-1/2 xl:w-1/3 px-2 pt-2' key={i}>
-                            <div className={`${styles.solidModuleHomeColorCards} ${card.class}`}>
+                            <div className={`${"solid-module-home-color-cards"} ${card.class}`}>
                                 <div>
-                                    <div className={styles.solidModuleHomeCardSvgWrapper}>{card.icon}</div>
-                                    <h3 className={`${styles.solidModuleHomeTitle1} mt-6`}>{card.title}</h3>
+                                    <div className={"solid-module-home-card-svg-wrapper"}>{card.icon}</div>
+                                    <h3 className={`${"solid-module-home-title1"} mt-6`}>{card.title}</h3>
                                     <p className='mb-0 mt-2 mr-2 text-xs'>
                                         {card.description}
                                     </p>
diff --git a/src/components/common/SettingsComponent.module.css b/src/components/common/settings-component.css
similarity index 72%
rename from src/components/common/SettingsComponent.module.css
rename to src/components/common/settings-component.css
index 1a4a8fa7..6da84210 100644
--- a/src/components/common/SettingsComponent.module.css
+++ b/src/components/common/settings-component.css
@@ -1,4 +1,4 @@
-.page {
+.solid-settings-page {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
@@ -6,7 +6,7 @@
   color: var(--foreground);
 }
 
-.pageHeader {
+.solid-settings-page-header {
   flex-shrink: 0;
   position: sticky;
   top: 0;
@@ -19,14 +19,14 @@
   border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
 }
 
-.headerIntro {
+.solid-settings-header-intro {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
   min-width: 0;
 }
 
-.headerSearch {
+.solid-settings-header-search {
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -35,19 +35,19 @@
   min-width: 0;
 }
 
-.subtitle {
+.solid-settings-subtitle {
   color: var(--muted-foreground);
   font-size: 0.9rem;
   margin: 0;
 }
 
-.summaryChips {
+.solid-settings-summary-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
 }
 
-.summaryChip {
+.solid-settings-summary-chip {
   display: inline-flex;
   align-items: center;
   min-height: 1.75rem;
@@ -60,17 +60,17 @@
   font-weight: 600;
 }
 
-.summaryChipButton {
+.solid-settings-summary-chip-button {
   cursor: pointer;
 }
 
-.summaryChipActive {
+.solid-settings-summary-chip-active {
   border-color: color-mix(in srgb, var(--primary-color, #7c3aed) 45%, transparent);
   background: color-mix(in srgb, var(--primary-color, #7c3aed) 14%, var(--card) 86%);
   color: var(--primary-color, #7c3aed);
 }
 
-.resultsMeta {
+.solid-settings-results-meta {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -85,7 +85,7 @@
   white-space: nowrap;
 }
 
-.legend {
+.solid-settings-legend {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
@@ -93,7 +93,7 @@
   font-size: 0.78rem;
 }
 
-.readonlyFilterButton {
+.solid-settings-readonly-filter-button {
   border: 1px solid transparent;
   background: transparent;
   padding: 0.12rem;
@@ -106,24 +106,24 @@
     box-shadow 0.15s ease;
 }
 
-.readonlyFilterButton:hover {
+.solid-settings-readonly-filter-button:hover {
   transform: translateY(-1px);
   border-color: color-mix(in srgb, #f59e0b 36%, transparent);
 }
 
-.readonlyFilterButtonActive {
+.solid-settings-readonly-filter-button-active {
   filter: saturate(1.18);
   border-color: color-mix(in srgb, #f59e0b 50%, transparent);
   background: color-mix(in srgb, #f59e0b 14%, transparent);
   box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 22%, transparent);
 }
 
-.legendLabelActive {
+.solid-settings-legend-label-active {
   color: color-mix(in srgb, #b45309 78%, var(--foreground));
   font-weight: 700;
 }
 
-.legendButton {
+.solid-settings-legend-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -137,7 +137,7 @@
   cursor: help;
 }
 
-.toolbarActions {
+.solid-settings-toolbar-actions {
   display: flex;
   align-items: center;
   gap: 0.65rem;
@@ -146,12 +146,12 @@
   min-width: 0;
 }
 
-.searchIcon {
+.solid-settings-search-icon {
   position: relative;
   width: min(100%, 28rem);
 }
 
-.searchIcon svg {
+.solid-settings-search-icon svg {
   position: absolute;
   left: 0.85rem;
   top: 50%;
@@ -159,11 +159,11 @@
   color: var(--muted-foreground);
 }
 
-.searchInput {
+.solid-settings-search-input {
   padding-left: 2.4rem;
 }
 
-.workspace {
+.solid-settings-workspace {
   background: color-mix(in srgb, var(--surface-card, var(--card)) 94%, var(--card) 6%);
   border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
   border-radius: 1.25rem;
@@ -173,7 +173,7 @@
   min-height: 0;
 }
 
-.tabGroup {
+.solid-settings-tab-group {
   display: grid;
   grid-template-columns: minmax(210px, 236px) minmax(0, 1fr);
   gap: 0;
@@ -181,7 +181,7 @@
   min-height: 0;
 }
 
-.tabList {
+.solid-settings-tab-list {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -197,14 +197,14 @@
   max-width: 100%;
 }
 
-.tabPanel {
+.solid-settings-tab-panel {
   padding: 0.85rem 0.95rem 1rem;
   overflow-y: auto;
   min-height: 0;
   overflow-x: hidden;
 }
 
-.moduleTab {
+.solid-settings-module-tab {
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -213,7 +213,7 @@
   min-width: 0;
 }
 
-.moduleTabBadge {
+.solid-settings-module-tab-badge {
   width: 1.95rem;
   height: 1.95rem;
   border-radius: 0.85rem;
@@ -227,7 +227,7 @@
   border: 1px solid color-mix(in srgb, var(--primary-color, #4f46e5) 28%, transparent);
 }
 
-.moduleTabText {
+.solid-settings-module-tab-text {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
@@ -235,37 +235,37 @@
   overflow: hidden;
 }
 
-.moduleTabLabel {
+.solid-settings-module-tab-label {
   font-size: 0.89rem;
   font-weight: 600;
   line-height: 1.2;
 }
 
-.moduleTabMeta {
+.solid-settings-module-tab-meta {
   font-size: 0.72rem;
   color: var(--muted-foreground);
 }
 
-.moduleTabLabel,
-.moduleTabMeta {
+.solid-settings-module-tab-label,
+.solid-settings-module-tab-meta {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.groupSection + .groupSection {
+.solid-settings-group-section + .solid-settings-group-section {
   margin-top: 0.85rem;
 }
 
-.groupCard {
+.solid-settings-group-card {
   border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
   border-radius: 1rem;
   overflow: visible;
   background: color-mix(in srgb, var(--surface-card, var(--card)) 96%, var(--card) 4%);
 }
 
-.groupHeader {
+.solid-settings-group-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -275,23 +275,23 @@
   border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
 }
 
-.groupTitle {
+.solid-settings-group-title {
   margin: 0;
   font-size: 0.94rem;
   font-weight: 700;
   color: var(--solid-form-title, #0f172a);
 }
 
-.groupMeta {
+.solid-settings-group-meta {
   font-size: 0.74rem;
   color: var(--muted-foreground);
 }
 
-.groupBody {
+.solid-settings-group-body {
   padding: 0.15rem 0.9rem;
 }
 
-.settingRow {
+.solid-settings-setting-row {
   display: grid;
   grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
   gap: 0.95rem;
@@ -299,31 +299,31 @@
   align-items: start;
 }
 
-.settingRow + .settingRow {
+.solid-settings-setting-row + .solid-settings-setting-row {
   border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
 }
 
-.settingLabelWrap {
+.solid-settings-setting-label-wrap {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
 }
 
-.settingLabelLine {
+.solid-settings-setting-label-line {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
 }
 
-.settingLabel {
+.solid-settings-setting-label {
   margin: 0;
   font-size: 0.86rem;
   font-weight: 600;
   color: var(--solid-form-title, #0f172a);
 }
 
-.settingHelpButton {
+.solid-settings-setting-help-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -338,24 +338,24 @@
   transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
 }
 
-.settingHelpButton:hover {
+.solid-settings-setting-help-button:hover {
   color: var(--primary-color, #7c3aed);
   background: color-mix(in srgb, var(--primary-color, #7c3aed) 10%, transparent);
   transform: translateY(-1px);
 }
 
-.settingHelpButton:focus-visible {
+.solid-settings-setting-help-button:focus-visible {
   outline: 2px solid color-mix(in srgb, var(--primary-color, #7c3aed) 45%, transparent);
   outline-offset: 2px;
 }
 
-.settingHelpTooltip {
+.solid-settings-setting-help-tooltip {
   max-width: 24rem;
   white-space: normal;
   line-height: 1.45;
 }
 
-.settingDescription {
+.solid-settings-setting-description {
   margin: 0;
   color: var(--muted-foreground);
   font-size: 0.79rem;
@@ -363,7 +363,7 @@
   max-width: 20rem;
 }
 
-.readonlyValue {
+.solid-settings-readonly-value {
   min-height: 2.45rem;
   max-width: 100%;
   display: flex;
@@ -378,62 +378,62 @@
   word-break: break-word;
 }
 
-.emptyValue {
+.solid-settings-empty-value {
   color: var(--muted-foreground);
   font-style: italic;
 }
 
-.customWidgetError {
+.solid-settings-custom-widget-error {
   color: var(--red-600, #dc2626);
   font-style: normal;
 }
 
-.controlStack {
+.solid-settings-control-stack {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   max-width: 38rem;
 }
 
-.customControlStack {
+.solid-settings-custom-control-stack {
   max-width: none;
 }
 
 /* Keep nested horizontal widget tabs sized to their labels. The outer settings
    tabs intentionally use full-width vertical triggers. */
-.customControlStack :global(.solid-tabs:not(.solid-tabs--vertical) .solid-notebook-tab-trigger) {
+.solid-settings-custom-control-stack .solid-tabs:not(.solid-tabs--vertical) .solid-notebook-tab-trigger {
   flex: 0 0 auto !important;
   width: auto !important;
 }
 
-.mediaField {
+.solid-settings-media-field {
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
 }
 
-.mediaComposer {
+.solid-settings-media-composer {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
   gap: 0.75rem;
   align-items: start;
 }
 
-.mediaDropzone {
+.solid-settings-media-dropzone {
   position: relative;
   display: block;
   cursor: pointer;
   max-width: 100%;
 }
 
-.mediaInput {
+.solid-settings-media-input {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
 }
 
-.mediaPreview {
+.solid-settings-media-preview {
   width: min(100%, 260px);
   border-radius: 0.9rem;
   border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
@@ -441,7 +441,7 @@
   background: color-mix(in srgb, var(--surface-ground, var(--card)) 80%, var(--card) 20%);
 }
 
-.mediaEmptyState {
+.solid-settings-media-empty-state {
   min-height: 8.5rem;
   display: flex;
   align-items: center;
@@ -455,19 +455,19 @@
   font-size: 0.8rem;
 }
 
-.boolRow {
+.solid-settings-bool-row {
   display: flex;
   align-items: center;
   gap: 0.65rem;
   min-height: 2.45rem;
 }
 
-.boolText {
+.solid-settings-bool-text {
   font-size: 0.84rem;
   color: var(--muted-foreground);
 }
 
-.emptyState {
+.solid-settings-empty-state {
   padding: 2.25rem 1.5rem;
   text-align: center;
   color: var(--muted-foreground);
@@ -477,34 +477,34 @@
    intentionally uses a fixed vertical module rail, but that rail leaves too
    little room for nested AI settings tabs and their provider table on phones. */
 @media (max-width: 767px) {
-  .page {
+  .solid-settings-page {
     height: auto;
     min-height: calc(100dvh - 46px);
     overflow-x: hidden;
   }
 
-  .pageHeader {
+  .solid-settings-page-header {
     grid-template-columns: minmax(0, 1fr);
     align-items: stretch;
   }
 
-  .headerSearch,
-  .searchIcon {
+  .solid-settings-header-search,
+  .solid-settings-search-icon {
     width: 100%;
     max-width: none;
   }
 
-  .toolbarActions {
+  .solid-settings-toolbar-actions {
     justify-content: space-between;
   }
 
-  .tabGroup {
+  .solid-settings-tab-group {
     display: flex;
     flex-direction: column;
     width: 100%;
   }
 
-  .tabList {
+  .solid-settings-tab-list {
     flex: 0 0 auto;
     flex-direction: row;
     overflow-x: auto;
@@ -513,55 +513,55 @@
     border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
   }
 
-  .tabPanel {
+  .solid-settings-tab-panel {
     width: 100%;
     min-width: 0;
     overflow-x: auto;
     padding: 0.75rem 0.65rem 1rem;
   }
 
-  .settingRow {
+  .solid-settings-setting-row {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .customControlStack,
-  .customControlStack :global(.solid-notebook),
-  .customControlStack :global(.solid-notebook-content) {
+  .solid-settings-custom-control-stack,
+  .solid-settings-custom-control-stack .solid-notebook,
+  .solid-settings-custom-control-stack .solid-notebook-content {
     width: 100%;
     min-width: 0;
     max-width: 100%;
   }
 
-  .customControlStack :global(.solid-notebook-tablist) {
+  .solid-settings-custom-control-stack .solid-notebook-tablist {
     max-width: 100%;
     overflow-x: auto;
   }
 
-  .customControlStack :global(.solid-ai-model-config-card) {
+  .solid-settings-custom-control-stack .solid-ai-model-config-card {
     width: 100% !important;
   }
 }
 
-.pageHeader :global(.form-wrapper-title) {
+.solid-settings-page-header .form-wrapper-title {
   color: var(--foreground) !important;
 }
 
-.workspace :global(.solid-notebook-tab-trigger) {
+.solid-settings-workspace .solid-notebook-tab-trigger {
   color: color-mix(in srgb, var(--muted-foreground) 88%, transparent);
   border-bottom-color: transparent;
 }
 
-.workspace :global(.solid-notebook-tab-trigger:hover) {
+.solid-settings-workspace .solid-notebook-tab-trigger:hover {
   color: var(--foreground);
 }
 
-.workspace :global(.solid-notebook-tab-trigger.active) {
+.solid-settings-workspace .solid-notebook-tab-trigger.active {
   color: var(--foreground);
   background: color-mix(in srgb, var(--primary) 10%, var(--card) 90%);
   border-bottom-color: transparent;
 }
 
-.workspace :global(.solid-tabs--vertical .solid-notebook-tab-trigger) {
+.solid-settings-workspace .solid-tabs--vertical .solid-notebook-tab-trigger {
   width: 100%;
   justify-content: flex-start;
   padding: 0.7rem 0.8rem;
@@ -570,25 +570,25 @@
   text-align: left;
 }
 
-.workspace :global(.solid-tabs--vertical .solid-notebook-tab-trigger.active) {
+.solid-settings-workspace .solid-tabs--vertical .solid-notebook-tab-trigger.active {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
 }
 
-.workspace :global(.solid-notebook-tablist.solid-tabs-list) {
+.solid-settings-workspace .solid-notebook-tablist.solid-tabs-list {
   width: 100% !important;
   max-width: 100%;
   min-width: 0;
 }
 
-:global(html.dark) .pageHeader,
-:global([data-theme="dark"]) .pageHeader {
+html.dark .solid-settings-page-header,
+[data-theme="dark"] .solid-settings-page-header {
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--background) 96%, #020617 4%), color-mix(in srgb, var(--background) 92%, #020617 8%));
   border-bottom-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
 }
 
-:global(html.dark) .workspace,
-:global([data-theme="dark"]) .workspace {
+html.dark .solid-settings-workspace,
+[data-theme="dark"] .solid-settings-workspace {
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #172554 4%), color-mix(in srgb, var(--card) 90%, #0b1220 10%));
   border-color: color-mix(in srgb, var(--border) 74%, #334155 26%);
@@ -597,75 +597,75 @@
     inset 0 1px 0 rgba(148, 163, 184, 0.04);
 }
 
-:global(html.dark) .tabList,
-:global([data-theme="dark"]) .tabList {
+html.dark .solid-settings-tab-list,
+[data-theme="dark"] .solid-settings-tab-list {
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
     color-mix(in srgb, var(--background) 78%, var(--card) 22%);
   border-right-color: color-mix(in srgb, var(--border) 74%, #334155 26%);
 }
 
-:global(html.dark) .groupCard,
-:global([data-theme="dark"]) .groupCard {
+html.dark .solid-settings-group-card,
+[data-theme="dark"] .solid-settings-group-card {
   border-color: color-mix(in srgb, var(--border) 76%, #334155 24%);
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--card) 95%, #172554 5%), color-mix(in srgb, var(--card) 90%, #0b1220 10%));
 }
 
-:global(html.dark) .groupHeader,
-:global([data-theme="dark"]) .groupHeader {
+html.dark .solid-settings-group-header,
+[data-theme="dark"] .solid-settings-group-header {
   background: color-mix(in srgb, var(--background) 72%, var(--card) 28%);
   border-bottom-color: color-mix(in srgb, var(--border) 72%, #334155 28%);
 }
 
-:global(html.dark) .groupTitle,
-:global(html.dark) .settingLabel,
-:global([data-theme="dark"]) .groupTitle,
-:global([data-theme="dark"]) .settingLabel {
+html.dark .solid-settings-group-title,
+html.dark .solid-settings-setting-label,
+[data-theme="dark"] .solid-settings-group-title,
+[data-theme="dark"] .solid-settings-setting-label {
   color: var(--foreground);
 }
 
-:global(html.dark) .readonlyValue,
-:global(html.dark) .mediaPreview,
-:global(html.dark) .mediaEmptyState,
-:global([data-theme="dark"]) .readonlyValue,
-:global([data-theme="dark"]) .mediaPreview,
-:global([data-theme="dark"]) .mediaEmptyState {
+html.dark .solid-settings-readonly-value,
+html.dark .solid-settings-media-preview,
+html.dark .solid-settings-media-empty-state,
+[data-theme="dark"] .solid-settings-readonly-value,
+[data-theme="dark"] .solid-settings-media-preview,
+[data-theme="dark"] .solid-settings-media-empty-state {
   border-color: color-mix(in srgb, var(--border) 74%, #334155 26%);
   background: color-mix(in srgb, var(--background) 70%, var(--card) 30%);
 }
 
-:global(html.dark) .workspace :global(.solid-notebook-tab-trigger),
-:global([data-theme="dark"]) .workspace :global(.solid-notebook-tab-trigger) {
+html.dark .solid-settings-workspace .solid-notebook-tab-trigger,
+[data-theme="dark"] .solid-settings-workspace .solid-notebook-tab-trigger {
   color: color-mix(in srgb, var(--foreground) 74%, transparent);
 }
 
-:global(html.dark) .workspace :global(.solid-notebook-tab-trigger.active),
-:global([data-theme="dark"]) .workspace :global(.solid-notebook-tab-trigger.active) {
+html.dark .solid-settings-workspace .solid-notebook-tab-trigger.active,
+[data-theme="dark"] .solid-settings-workspace .solid-notebook-tab-trigger.active {
   color: color-mix(in srgb, var(--foreground) 96%, white 4%);
   background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 18%, #172554 82%), color-mix(in srgb, var(--primary) 10%, #0b1220 90%));
 }
 
 @media (max-width: 960px) {
-  .pageHeader {
+  .solid-settings-page-header {
     grid-template-columns: 1fr;
     align-items: stretch;
   }
 
-  .tabGroup {
+  .solid-settings-tab-group {
     grid-template-columns: 1fr;
   }
 
-  .headerSearch {
+  .solid-settings-header-search {
     justify-content: flex-start;
     min-width: 100%;
   }
 
-  .toolbarActions {
+  .solid-settings-toolbar-actions {
     justify-content: space-between;
   }
 
-  .tabList {
+  .solid-settings-tab-list {
     flex-direction: row;
     align-items: stretch;
     border-right: none;
@@ -674,72 +674,72 @@
     overflow-x: auto;
   }
 
-  .moduleTab {
+  .solid-settings-module-tab {
     min-width: 12rem;
   }
 
-  .settingRow {
+  .solid-settings-setting-row {
     grid-template-columns: 1fr;
   }
 
-  .mediaComposer {
+  .solid-settings-media-composer {
     grid-template-columns: 1fr;
   }
 
-  .mediaPreview {
+  .solid-settings-media-preview {
     width: 100%;
   }
 }
 
 @media (max-width: 640px) {
-  .page {
+  .solid-settings-page {
     height: auto;
     min-height: calc(100dvh - 46px);
   }
 
-  .pageHeader {
+  .solid-settings-page-header {
     gap: 0.75rem;
   }
 
-  .subtitle {
+  .solid-settings-subtitle {
     max-width: none;
     line-height: 1.45;
   }
 
-  .searchIcon {
+  .solid-settings-search-icon {
     width: 100%;
   }
 
-  .toolbarActions {
+  .solid-settings-toolbar-actions {
     justify-content: flex-start;
   }
 
-  .legend {
+  .solid-settings-legend {
     flex-wrap: wrap;
   }
 
-  .tabList {
+  .solid-settings-tab-list {
     padding: 0.7rem;
   }
 
-  .tabPanel {
+  .solid-settings-tab-panel {
     padding: 0.75rem;
   }
 
-  .moduleTab {
+  .solid-settings-module-tab {
     min-width: 10.5rem;
   }
 
-  .groupHeader {
+  .solid-settings-group-header {
     align-items: flex-start;
     flex-direction: column;
   }
 
-  .groupBody {
+  .solid-settings-group-body {
     padding-inline: 0.75rem;
   }
 
-  .readonlyValue {
+  .solid-settings-readonly-value {
     min-height: 2.3rem;
   }
 }
diff --git a/src/components/common/SolidLoadingState.module.css b/src/components/common/solid-loading-state.css
similarity index 85%
rename from src/components/common/SolidLoadingState.module.css
rename to src/components/common/solid-loading-state.css
index 8c0a6b7d..13947a90 100644
--- a/src/components/common/SolidLoadingState.module.css
+++ b/src/components/common/solid-loading-state.css
@@ -1,4 +1,4 @@
-.solidLoadingState {
+.solid-loading-state {
   min-height: 100vh;
   width: 100%;
   display: flex;
@@ -10,7 +10,7 @@
     var(--background);
 }
 
-.card {
+.solid-loading-card {
   width: min(100%, 28rem);
   display: flex;
   flex-direction: column;
@@ -24,11 +24,11 @@
   box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.35);
 }
 
-.spinner {
+.solid-loading-spinner {
   color: var(--primary-color);
 }
 
-.title {
+.solid-loading-title {
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
@@ -36,7 +36,7 @@
   color: var(--foreground);
 }
 
-.description {
+.solid-loading-description {
   margin: 0;
   max-width: 24rem;
   font-size: 0.875rem;
@@ -45,11 +45,11 @@
 }
 
 @media (max-width: 640px) {
-  .solidLoadingState {
+  .solid-loading-state {
     padding: 1.25rem;
   }
 
-  .card {
+  .solid-loading-card {
     padding: 1.5rem 1.25rem;
     border-radius: 0.875rem;
   }
diff --git a/src/components/common/solid-module-home.css b/src/components/common/solid-module-home.css
new file mode 100644
index 00000000..c024c60b
--- /dev/null
+++ b/src/components/common/solid-module-home.css
@@ -0,0 +1,84 @@
+.solid-module-welcome-section {
+    background-color: var(--solid-dashboard-welcome-bg);
+    padding: 24px;
+    border-radius: 0.5rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.solid-module-home-home-svg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.solid-module-home-title1 {
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 700;
+    color: var(--solid-dark-title);
+    margin: 0;
+}
+
+.solid-module-home-color-cards {
+    border-radius: 0.5rem;
+    padding: 24px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.solid-module-home-dashboard-card-one {
+    border: 1px solid var(--solid-dashboard-card-one-border);
+    background: var(--solid-dashboard-card-one-bg);
+}
+
+.solid-module-home-dashboard-card-one .solid-module-home-card-svg-wrapper {
+    background-color: var(--solid-admin-card-color-1);
+}
+
+.solid-module-home-dashboard-card-two {
+    border: 1px solid var(--solid-dashboard-card-two-border);
+    background: var(--solid-dashboard-card-two-bg);
+}
+
+.solid-module-home-dashboard-card-two .solid-module-home-card-svg-wrapper {
+    background-color: var(--solid-admin-card-color-2);
+}
+
+.solid-module-home-dashboard-card-three {
+    border: 1px solid var(--solid-dashboard-card-three-border);
+    background: var(--solid-dashboard-card-three-bg);
+}
+
+.solid-module-home-dashboard-card-three .solid-module-home-card-svg-wrapper {
+    background-color: var(--solid-admin-card-color-3);
+}
+
+@media(max-width:991px) {
+    .solid-module-welcome-section {
+        padding: 16px;
+        height: 100%;
+        padding-bottom: 0 !important;
+        padding-right: 0px !important;
+    }
+
+    .solid-module-home-color-cards {
+        padding: 16px;
+    }
+
+    .solid-module-home-title1 {
+        font-size: 1.4rem;
+    }
+
+    .solid-module-home-home-svg {
+        position: relative;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/components/common/solidModuleHome.module.css b/src/components/common/solidModuleHome.module.css
deleted file mode 100644
index f45f0686..00000000
--- a/src/components/common/solidModuleHome.module.css
+++ /dev/null
@@ -1,134 +0,0 @@
-.solidModuleWelcomeSection {
-    background-color: var(--solid-dashboard-welcome-bg);
-    padding: 24px;
-    border-radius: 0.5rem;
-    position: relative;
-    overflow: hidden;
-}
-
-.homeSvg {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.solidModuleHomeTitle1 {
-    font-size: 1.5rem;
-    font-style: normal;
-    font-weight: 700;
-    color: var(--solid-dark-title);
-    margin: 0;
-}
-
-.solidModuleHomeColorCards {
-    border-radius: 0.5rem;
-    padding: 24px;
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    height: 100%;
-}
-
-.dashboardCardOne {
-    border: 1px solid var(--solid-dashboard-card-one-border);
-    background: var(--solid-dashboard-card-one-bg);
-}
-
-.dashboardCardOne .solidModuleHomeCardSvgWrapper {
-    background-color: var(--solid-admin-card-color-1);
-}
-
-.dashboardCardTwo {
-    border: 1px solid var(--solid-dashboard-card-two-border);
-    background: var(--solid-dashboard-card-two-bg);
-}
-
-.dashboardCardTwo .solidModuleHomeCardSvgWrapper {
-    background-color: var(--solid-admin-card-color-2);
-}
-
-.dashboardCardThree {
-    border: 1px solid var(--solid-dashboard-card-three-border);
-    background: var(--solid-dashboard-card-three-bg);
-}
-
-.dashboardCardThree .solidModuleHomeCardSvgWrapper {
-    background-color: var(--solid-admin-card-color-3);
-}
-
-.solidModuleHomeCardSvgWrapper,
-.solidModuleHomeActionCardSvgWrapper {
-    display: flex;
-    width: 3rem;
-    height: 3rem;
-    padding: 0.5rem;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    aspect-ratio: 1/1;
-    border-radius: 50%;
-}
-
-.solidModuleHomeActionCard {
-    border-radius: 0.5rem;
-    padding: 24px;
-    height: 100%;
-    border: 1px solid var(--primary-light-color);
-    transition: 0.2s linear;
-    cursor: pointer;
-    background-color: var(--surface-0);
-}
-
-.solidModuleHomeActionCard:hover {
-    background-color: var(--solid-surface-elevated);
-}
-
-.solidModuleHomeActionCardSvgWrapper {
-    background-color: var(--gray-100);
-    transition: 0.2s linear;
-}
-
-.solidModuleHomeActionCardSvgWrapper svg path {
-    fill: var(--primary-color);
-    background-color: var(--primary-color);
-    transition: 0.2s linear;
-}
-
-.solidModuleHomeActionCard:hover .solidModuleHomeActionCardSvgWrapper {
-    background-color: var(--primary-color);
-}
-
-.solidModuleHomeActionCard:hover .solidModuleHomeActionCardSvgWrapper svg path {
-    fill: var(--surface-a);
-}
-
-@media(max-width:991px) {
-    .solidModuleWelcomeSection {
-        padding: 16px;
-        height: 100%;
-        padding-bottom: 0 !important;
-        padding-right: 0px !important;
-    }
-
-    .solidModuleHomeColorCards {
-        padding: 16px;
-    }
-
-    .solidModuleHomeActionCard {
-        padding: 16px;
-    }
-
-    .solidModuleHomeTitle1 {
-        font-size: 1.4rem;
-    }
-
-    .homeSvg {
-        position: relative;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    }
-
-
-}
\ No newline at end of file
diff --git a/src/components/core/chatter/SolidChatterCustomMessage.tsx b/src/components/core/chatter/SolidChatterCustomMessage.tsx
index 1e6ec43c..f6ab4302 100644
--- a/src/components/core/chatter/SolidChatterCustomMessage.tsx
+++ b/src/components/core/chatter/SolidChatterCustomMessage.tsx
@@ -1,9 +1,7 @@
 
 import React from 'react'
 import MarkdownViewer from '../../../components/common/MarkdownViewer'
-import styles from './chatter.module.css'
-
-interface SolidChatterCustomMessageProps {
+import './solid-chatter.css';interface SolidChatterCustomMessageProps {
     message: string;
 }
 
@@ -39,5 +37,5 @@ export const SolidChatterCustomMessage: React.FC<SolidChatterCustomMessageProps>
         );
     }
 
-    return <p className={styles.solidMessageText}>{message}</p>;
+    return <p className={"solid-chatter-message-text"}>{message}</p>;
 };
diff --git a/src/components/core/chatter/SolidChatterDateDivider.tsx b/src/components/core/chatter/SolidChatterDateDivider.tsx
index 06eadbfb..d02dc2f5 100644
--- a/src/components/core/chatter/SolidChatterDateDivider.tsx
+++ b/src/components/core/chatter/SolidChatterDateDivider.tsx
@@ -1,5 +1,5 @@
 
-import styles from './chatter.module.css';
+import './solid-chatter.css';
 
 interface Props {
     date: string;
@@ -11,8 +11,8 @@ export const SolidChatterDateDivider = ({ date }: Props) => {
         : new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
 
     return (
-        <div className={styles.chatterDatetimeDivider}>
-            <div className={`${styles.chatterDividerContent} absolute`}>
+        <div className={"solid-chatter-datetime-divider"}>
+            <div className={`${"solid-chatter-divider-content"} absolute`}>
                 {displayDate}
             </div>
         </div>
diff --git a/src/components/core/chatter/SolidChatterHeader.tsx b/src/components/core/chatter/SolidChatterHeader.tsx
index ae6ac718..fff62776 100644
--- a/src/components/core/chatter/SolidChatterHeader.tsx
+++ b/src/components/core/chatter/SolidChatterHeader.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react'
-import styles from './chatter.module.css'
-import { SolidMessageComposer } from './SolidMessageComposer'
+import './solid-chatter.css';import { SolidMessageComposer } from './SolidMessageComposer'
 import { useLazyGetusersQuery } from '../../../redux/api/userApi'
 import { ERROR_MESSAGES } from '../../../constants/error-messages'
 import {
@@ -129,7 +128,7 @@ export const SolidChatterHeader = (props: Props) => {
     };
 
     return (
-        <div className={`${styles.chatterTitle} ${title ? styles.chatterTitleWithLabel : ''} solid-list-toolbar`}>
+        <div className={`${"solid-chatter-title"} ${title ? "chatter-title-with-label" : ''} solid-list-toolbar`}>
             <div className='flex justify-between items-center solid-list-toolbar-row'>
                 <p className="m-0 view-title solid-text-wrapper form-wrapper-title">
                     {title || ''}
diff --git a/src/components/core/chatter/SolidChatterMentionMenu.tsx b/src/components/core/chatter/SolidChatterMentionMenu.tsx
index 85eef0ce..fe8b751c 100644
--- a/src/components/core/chatter/SolidChatterMentionMenu.tsx
+++ b/src/components/core/chatter/SolidChatterMentionMenu.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import styles from './chatter.module.css';
+import './solid-chatter.css';
 
 interface Props {
     isLoading: boolean;
@@ -18,26 +18,26 @@ export const SolidChatterMentionMenu = ({ isLoading, users, activeIndex, onSelec
     }, [activeIndex]);
 
     return (
-        <div className={styles.chatterMentionMenu}>
+        <div className={"solid-chatter-mention-menu"}>
             {isLoading && (
-                <div className={styles.chatterMentionEmpty}>Searching users...</div>
+                <div className={"solid-chatter-mention-empty"}>Searching users...</div>
             )}
             {!isLoading && users.length === 0 && (
-                <div className={styles.chatterMentionEmpty}>No users found</div>
+                <div className={"solid-chatter-mention-empty"}>No users found</div>
             )}
             {!isLoading && users.map((user, index) => (
                 <button
                     key={user.id}
                     ref={index === activeIndex ? activeOptionRef : null}
                     type="button"
-                    className={`${styles.chatterMentionOption} ${index === activeIndex ? styles.chatterMentionOptionActive : ''}`}
+                    className={`${"solid-chatter-mention-option"} ${index === activeIndex ? "solid-chatter-mention-option-active" : ''}`}
                     onMouseDown={(event) => {
                         event.preventDefault();
                         onSelect(user);
                     }}
                 >
-                    <span className={styles.chatterMentionName}>{user.fullName || user.username}</span>
-                    <span className={styles.chatterMentionUsername}>@{user.username}</span>
+                    <span className={"solid-chatter-mention-name"}>{user.fullName || user.username}</span>
+                    <span className={"solid-chatter-mention-username"}>@{user.username}</span>
                 </button>
             ))}
         </div>
diff --git a/src/components/core/chatter/SolidChatterMessageBox.tsx b/src/components/core/chatter/SolidChatterMessageBox.tsx
index a2efb6f0..eef005b5 100644
--- a/src/components/core/chatter/SolidChatterMessageBox.tsx
+++ b/src/components/core/chatter/SolidChatterMessageBox.tsx
@@ -2,8 +2,7 @@
 import { getTextColor, stringToColor } from '../../../helpers/getRandomColors'
 import Image from "../../common/Image"
 import { useEffect, useMemo, useRef, useState } from 'react'
-import styles from './chatter.module.css'
-import { SolidChatterCustomMessage } from './SolidChatterCustomMessage'
+import './solid-chatter.css';import { SolidChatterCustomMessage } from './SolidChatterCustomMessage'
 import { SolidChatterAuditMessage } from './SolidChatterAuditMessage'
 import { Check, GitBranch, MessageSquare, Paperclip, Pencil, Trash2, X } from 'lucide-react'
 import { SolidButton, SolidLightbox, SolidTag, SolidTooltip, SolidTooltipContent, SolidTooltipTrigger, SolidIcon, SolidTextarea, type SolidIconName } from '../../shad-cn-ui'
@@ -293,20 +292,20 @@ export const SolidChatterMessageBox = (props: Props) => {
     };
 
     return (
-        <div className={styles.solidChatterMessageBox}>
-            <div className={styles.solidChatterMessageCard}>
-                <div className={styles.solidChatterMessageLayout}>
-                    <div className={styles.solidChatterAvatar} style={avatarStyle}>
+        <div className={"solid-chatter-message-box"}>
+            <div className={"solid-chatter-message-card"}>
+                <div className={"solid-chatter-message-layout"}>
+                    <div className={"solid-chatter-avatar"} style={avatarStyle}>
                         {initials || user.charAt(0).toUpperCase()}
                     </div>
-                    <div className={styles.solidChatterMessageContent}>
-                        <div className={styles.solidChatterMessageHeader}>
+                    <div className={"solid-chatter-message-content"}>
+                        <div className={"solid-chatter-message-header"}>
                             <div className='flex items-center gap-2 flex-wrap'>
-                                <p className={styles.solidChatterUser}>{user}</p>
+                                <p className={"solid-chatter-user"}>{user}</p>
                                 <SolidTooltip>
                                     <SolidTooltipTrigger asChild>
                                         <span
-                                            className={`${styles.solidChatterBadge} ${messageType === 'audit' ? styles.audit : styles.custom}`}
+                                            className={`${"solid-chatter-badge"} ${messageType === 'audit' ? "solid-chatter-audit" : "solid-chatter-custom"}`}
                                             aria-label={messageLabel}
                                         >
                                             <TypeIcon size={12} />
@@ -333,17 +332,17 @@ export const SolidChatterMessageBox = (props: Props) => {
                                         title="Edit note"
                                     />
                                 )}
-                                <span className={styles.solidChatterTime}>{time}</span>
+                                <span className={"solid-chatter-time"}>{time}</span>
                             </div>
                         </div>
                         {modelDisplayName && (
-                            <p className={`${styles.solidChatterMeta} m-0`}>
+                            <p className={`${"solid-chatter-meta"} m-0`}>
                                 {modelDisplayName}
                                 {modelUserKey && <> · <span className='font-medium'>{modelUserKey}</span></>}
                             </p>
                         )}
                         {localMessage && !isEditing && (
-                            <div className={styles.solidMessageWrapper}>
+                            <div className={"solid-chatter-message-wrapper"}>
                                 {messageType === 'audit'
                                     ? <SolidChatterAuditMessage auditRecord={auditRecord} />
                                     : <SolidChatterCustomMessage message={localMessage} />}
@@ -361,7 +360,7 @@ export const SolidChatterMessageBox = (props: Props) => {
                                     rows={4}
                                     className="w-full py-2"
                                 />
-                                <p className={styles.chatterComposerHelp}>
+                                <p className={"solid-chatter-composer-help"}>
                                     Type @ to mention a user. Press Ctrl+Enter to save.
                                 </p>
                                 {mentionRange && (
@@ -440,11 +439,11 @@ export const SolidChatterMessageBox = (props: Props) => {
                             </div>
                         )}
                         {visibleAttachments.length > 0 && (
-                            <div className={styles.solidChatterAttachments}>
+                            <div className={"solid-chatter-attachments"}>
                                 {visibleAttachments.map((attachment) => {
                                     const isImage = attachment.mimeType.startsWith('image/');
                                     return (
-                                        <div key={attachment.id} className={styles.solidChatterAttachment} style={{ position: 'relative' }}>
+                                        <div key={attachment.id} className={"solid-chatter-attachment"} style={{ position: 'relative' }}>
                                             {isEditing && canEditNote && (
                                                 <SolidButton
                                                     type="button"
diff --git a/src/components/core/chatter/SolidMessageComposer.tsx b/src/components/core/chatter/SolidMessageComposer.tsx
index eacedaf6..f60aeec4 100644
--- a/src/components/core/chatter/SolidMessageComposer.tsx
+++ b/src/components/core/chatter/SolidMessageComposer.tsx
@@ -1,5 +1,4 @@
-import styles from './chatter.module.css'
-import { usePostChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'
+import './solid-chatter.css';import { usePostChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'
 import { useEffect, useState, useRef } from 'react'
 import { ERROR_MESSAGES } from '../../../constants/error-messages'
 import { SolidButton, SolidTextarea } from '../../shad-cn-ui'
@@ -112,19 +111,19 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
     };
 
     return (
-        <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>
+        <form className={"solid-chatter-message-composer"} onSubmit={handleSubmit}>
             {/* {type === 'email' &&
                 <div className='mb-2 flex items-center gap-1 text-sm'>
                     <span className='font-bold'>To:</span>
-                    <div className={styles.chatterEmails}>
+                    <div className={"solid-chatter-emails"}>
                         {tempEmails.map((mail, index) => (
                             <span key={index}>
                                 {mail}
                             </span>
                         ))}
                     </div>
-                    <div className={`si si-sort-down-fill text-[var(--primary-color)] ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>
-                        <div className={styles.emailsTooltip}>
+                    <div className={`si si-sort-down-fill text-[var(--primary-color)] ${"solid-chatter-email-tooltip-icon"}`} style={{ fontSize: 8 }}>
+                        <div className={"solid-chatter-emails-tooltip"}>
                             {tempEmails.map((mail, index) => (
                                 <span key={index} className='text-color text-sm'>
                                     {mail}
@@ -134,7 +133,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
                     </div>
                 </div>
             } */}
-            <div className={`${styles.solidMessageWrapper} flex flex-col gap-2 w-full`}>
+            <div className={`${"solid-chatter-message-wrapper"} flex flex-col gap-2 w-full`}>
                 <div className='flex items-center justify-between'>
                     <p className='form-field-label m-0'>
                         {type === 'email' ? 'Email Message' : 'Internal Note'}
@@ -151,7 +150,7 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
                     className="w-full p-2"
                     rows={4}
                 />
-                <p className={styles.chatterComposerHelp}>
+                <p className={"solid-chatter-composer-help"}>
                     Type @ to mention a user. Press Ctrl+Enter to save.
                 </p>
                 {mentionRange && (
@@ -206,15 +205,15 @@ export const SolidMessageComposer = ({ type, modelSingularName, refetch, id, onC
                 </div>
             </div>
             {selectedFiles.length > 0 && (
-                <div className={styles.chatterSelectedFiles}>
+                <div className={"solid-chatter-selected-files"}>
                     {selectedFiles.map((file, index) => (
-                        <div key={index} className={styles.chatterSelectedFileCard}>
-                            <div className={styles.chatterSelectedFileIcon}>
+                        <div key={index} className={"solid-chatter-selected-file-card"}>
+                            <div className={"solid-chatter-selected-file-icon"}>
                                 <FileText size={16} />
                             </div>
-                            <div className={styles.chatterSelectedFileMeta}>
-                                <p className={styles.chatterSelectedFileName}>{file.name}</p>
-                                <span className={styles.chatterSelectedFileSize}>{formatFileSize(file.size)}</span>
+                            <div className={"solid-chatter-selected-file-meta"}>
+                                <p className={"solid-chatter-selected-file-name"}>{file.name}</p>
+                                <span className={"solid-chatter-selected-file-size"}>{formatFileSize(file.size)}</span>
                             </div>
                             <SolidButton
                                 type="button"
diff --git a/src/components/core/chatter/chatter.module.css b/src/components/core/chatter/solid-chatter.css
similarity index 80%
rename from src/components/core/chatter/chatter.module.css
rename to src/components/core/chatter/solid-chatter.css
index 2cb8d941..a48e851b 100644
--- a/src/components/core/chatter/chatter.module.css
+++ b/src/components/core/chatter/solid-chatter.css
@@ -1,19 +1,9 @@
-.chatterTitle {
+.solid-chatter-title {
     padding: 0.2rem 0 0.55rem 2.75rem;
     border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
 }
 
-
-.chatterMessageComposer .chatterMessageInput {
-    background-color: var(--background);
-    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
-}
-
-.chatterMessageComposer .chatterMessageInput::placeholder {
-    color: color-mix(in srgb, var(--muted-foreground) 52%, transparent);
-}
-
-.chatterMentionMenu {
+.solid-chatter-mention-menu {
     width: min(22rem, 100%);
     max-height: 13rem;
     overflow-y: auto;
@@ -28,7 +18,7 @@
     z-index: 20;
 }
 
-.chatterMentionOption {
+.solid-chatter-mention-option {
     appearance: none;
     border: 0;
     background: transparent;
@@ -42,33 +32,33 @@
     border-radius: 0.35rem;
 }
 
-.chatterMentionOption:hover,
-.chatterMentionOption:focus {
+.solid-chatter-mention-option:hover,
+.solid-chatter-mention-option:focus {
     background: color-mix(in srgb, var(--primary-color, var(--primary)) 10%, transparent);
     outline: none;
 }
 
-.chatterMentionOptionActive {
+.solid-chatter-mention-option-active {
     background: color-mix(in srgb, var(--primary-color, var(--primary)) 12%, transparent);
 }
 
-.chatterMentionName {
+.solid-chatter-mention-name {
     font-size: 0.78rem;
     font-weight: 600;
     line-height: 1.2;
 }
 
-.chatterMentionUsername,
-.chatterMentionEmpty {
+.solid-chatter-mention-username,
+.solid-chatter-mention-empty {
     font-size: 0.72rem;
     color: var(--muted-foreground);
 }
 
-.chatterMentionEmpty {
+.solid-chatter-mention-empty {
     padding: 0.5rem 0.55rem;
 }
 
-.chatterComposerHelp {
+.solid-chatter-composer-help {
     margin: -0.2rem 0 0;
     font-size: 0.68rem;
     font-style: italic;
@@ -76,18 +66,18 @@
     color: var(--muted-foreground);
 }
 
-.chatterEmails {
+.solid-chatter-emails {
     max-width: 80%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.emailTooltipIcon {
+.solid-chatter-email-tooltip-icon {
     position: relative;
 }
 
-.emailsTooltip {
+.solid-chatter-emails-tooltip {
     visibility: hidden;
     position: absolute;
     right: 0px !important;
@@ -102,17 +92,17 @@
     gap: 5px;
 }
 
-.emailTooltipIcon:hover .emailsTooltip {
+.solid-chatter-email-tooltip-icon:hover .solid-chatter-emails-tooltip {
     visibility: visible !important;
 }
 
-.chatterDatetimeDivider {
+.solid-chatter-datetime-divider {
     border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
     position: relative;
     margin: 30px 0 15px 0;
 }
 
-.chatterDividerContent {
+.solid-chatter-divider-content {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -126,7 +116,7 @@
     color: var(--muted-foreground);
 }
 
-.solidMessageWrapper {
+.solid-chatter-message-wrapper {
     border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
     padding: 0.7rem 0.8rem;
     border-radius: 0.7rem;
@@ -140,42 +130,42 @@
     overflow-wrap: anywhere;
 }
 
-:global(.solidMessageWrapper p) {
+.solid-chatter-message-wrapper p {
     margin: 0;
     font-size: inherit;
     line-height: inherit;
     color: inherit;
 }
 
-:global(.solid-purple-button) {
+.solid-purple-button {
     --solid-btn-bg: var(--primary-color, var(--primary));
     --solid-btn-border: var(--primary-color, var(--primary));
     --solid-btn-fg: #fff;
 }
 
-:global(.solid-purple-button:hover) {
+.solid-purple-button:hover {
     --solid-btn-bg: color-mix(in srgb, var(--primary-color, var(--primary)) 86%, #0f172a);
     --solid-btn-border: color-mix(in srgb, var(--primary-color, var(--primary)) 86%, #0f172a);
 }
 
-.solidChatterMessageBox {
+.solid-chatter-message-box {
     margin-top: 0px;
     padding-left: 0.3rem;
 }
 
-.solidChatterMessageCard {
+.solid-chatter-message-card {
     border-radius: 0.75rem;
     background: transparent;
     padding: 0.25rem 0;
 }
 
-.solidChatterMessageLayout {
+.solid-chatter-message-layout {
     display: flex;
     gap: 0.65rem;
     align-items: flex-start;
 }
 
-.solidChatterAvatar {
+.solid-chatter-avatar {
     width: 25px;
     height: 25px;
     border-radius: 50%;
@@ -189,7 +179,7 @@
     box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
 }
 
-.solidChatterMessageContent {
+.solid-chatter-message-content {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -197,7 +187,7 @@
     gap: 0.4rem;
 }
 
-.solidChatterMessageHeader {
+.solid-chatter-message-header {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
@@ -205,32 +195,32 @@
     flex-wrap: wrap;
 }
 
-.solidChatterUser {
+.solid-chatter-user {
     margin: 0;
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--foreground);
 }
 
-.solidChatterMeta {
+.solid-chatter-meta {
     margin: 0;
     font-size: 0.70rem;
     color: var(--muted-foreground);
 }
 
-.solidChatterTime {
+.solid-chatter-time {
     font-size: 0.70rem;
     color: var(--muted-foreground);
     white-space: nowrap;
 }
 
-.solidChatterAttachments {
+.solid-chatter-attachments {
     display: flex;
     flex-wrap: wrap;
     gap: 0.35rem;
 }
 
-.solidChatterAttachment {
+.solid-chatter-attachment {
     border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
     border-radius: 0.55rem;
     padding: 0.3rem 0.5rem;
@@ -240,18 +230,18 @@
     gap: 0.25rem;
 }
 
-.solidChatterAttachment img {
+.solid-chatter-attachment img {
     border-radius: 0.45rem;
 }
 
-.chatterSelectedFiles {
+.solid-chatter-selected-files {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-top: 0.75rem;
 }
 
-.chatterSelectedFileCard {
+.solid-chatter-selected-file-card {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -262,7 +252,7 @@
     min-width: 220px;
 }
 
-.chatterSelectedFileIcon {
+.solid-chatter-selected-file-icon {
     width: 28px;
     height: 28px;
     border-radius: 0.45rem;
@@ -274,12 +264,12 @@
     flex-shrink: 0;
 }
 
-.chatterSelectedFileMeta {
+.solid-chatter-selected-file-meta {
     flex: 1;
     min-width: 0;
 }
 
-.chatterSelectedFileName {
+.solid-chatter-selected-file-name {
     margin: 0;
     font-size: 0.8rem;
     font-weight: 500;
@@ -287,12 +277,12 @@
     word-break: break-word;
 }
 
-.chatterSelectedFileSize {
+.solid-chatter-selected-file-size {
     font-size: 0.7rem;
     color: var(--muted-foreground);
 }
 
-.solidChatterBadge {
+.solid-chatter-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.2rem;
@@ -303,30 +293,30 @@
     background: color-mix(in srgb, var(--muted) 16%, var(--card) 84%);
 }
 
-.solidChatterBadge.audit {
+.solid-chatter-badge.solid-chatter-audit {
     color: #9333ea;
     border-color: rgba(147, 51, 234, 0.2);
     background: rgba(147, 51, 234, 0.08);
 }
 
-.solidChatterBadge.custom {
+.solid-chatter-badge.solid-chatter-custom {
     color: #722ED1;
     border-color: rgba(114, 46, 209, 0.2);
     background: rgba(114, 46, 209, 0.08);
 }
 
-:global(.solid-chatter-body) {
+.solid-chatter-body {
     padding: 0.35rem 0.85rem 1rem 0.2rem;
     overflow-y: auto;
     scrollbar-gutter: stable;
 }
-:global(.solidMessageWrapper .solidMessageText) {
+.solid-chatter-message-wrapper .solid-chatter-message-text {
     margin: 0;
     font-size: inherit;
     color: inherit;
     line-height: inherit;
 }
-.solidMessageText {
+.solid-chatter-message-text {
     margin: 0;
     font-size: inherit;
     color: inherit;
diff --git a/src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx b/src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx
index 6e2581c7..b900f6a1 100644
--- a/src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx
+++ b/src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { SolidPersonalInfo } from "./SolidPersonalInfo";
 import { SolidChangePassword } from "./SolidChangePassword";
 import { SolidVersionInfo } from "./SolidVersionInfo";
-import styles from "./SolidAccountSettings.module.css";
+import "./solid-account-settings.css";
 import { useGetSolidVersionInfoQuery, useLazyGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi";
 import { getSettingsMap, toLegacySettingsShape } from "../../../../helpers/settingsPayload";
 
@@ -52,24 +52,24 @@ export const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfile
   if (!showProfileSettingsDialog) return null;
 
   return (
-    <div className={styles.backdrop} role="presentation" onClick={() => setShowProfileSettingsDialog(false)}>
+    <div className={"solid-account-settings-backdrop"} role="presentation" onClick={() => setShowProfileSettingsDialog(false)}>
       <section
-        className={styles.modal}
+        className={"solid-account-settings-modal"}
         role="dialog"
         aria-modal="true"
         aria-labelledby="solid-account-settings-title"
         onClick={(event) => event.stopPropagation()}
       >
-        <header className={styles.header}>
+        <header className={"solid-account-settings-header"}>
           <div>
-            <h2 id="solid-account-settings-title" className={styles.title}>
+            <h2 id="solid-account-settings-title" className={"solid-account-settings-title"}>
               Account Settings
             </h2>
-            <p className={styles.subtitle}>Manage your profile and security settings.</p>
+            <p className={"solid-account-settings-subtitle"}>Manage your profile and security settings.</p>
           </div>
           <button
             type="button"
-            className={styles.closeButton}
+            className={"solid-account-settings-close-button"}
             onClick={() => setShowProfileSettingsDialog(false)}
             aria-label="Close account settings"
           >
@@ -77,14 +77,14 @@ export const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfile
           </button>
         </header>
 
-        <div className={styles.tabsLine} role="tablist" aria-label="Account setting sections">
+        <div className={"solid-account-settings-tabs-line"} role="tablist" aria-label="Account setting sections">
           {settings.map((option) => (
             <button
               key={option.key}
               type="button"
               role="tab"
               aria-selected={option.key === settingKey}
-              className={`${styles.tabTrigger} ${option.key === settingKey ? styles.tabActive : ""}`}
+              className={`${"solid-account-settings-tab-trigger"} ${option.key === settingKey ? "solid-account-settings-tab-active" : ""}`}
               onClick={() => setSettingKey(option.key)}
             >
               {option.label}
@@ -92,7 +92,7 @@ export const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfile
           ))}
         </div>
 
-        <div className={styles.formWrapper}>{renderSettingComponent}</div>
+        <div className={"solid-account-settings-form-wrapper"}>{renderSettingComponent}</div>
       </section>
     </div>
   );
diff --git a/src/components/core/common/SolidAccountSettings/SolidChangePassword.tsx b/src/components/core/common/SolidAccountSettings/SolidChangePassword.tsx
index b1124013..7afb85f0 100644
--- a/src/components/core/common/SolidAccountSettings/SolidChangePassword.tsx
+++ b/src/components/core/common/SolidAccountSettings/SolidChangePassword.tsx
@@ -8,7 +8,7 @@ import { useSession } from "../../../../hooks/useSession";
 import { useChangePasswordMutation } from "../../../../redux/api/authApi";
 import { SolidPasswordHelperText } from "../SolidPasswordHelperText";
 import { SolidButton } from "../../../shad-cn-ui/SolidButton";
-import styles from "./SolidAccountSettings.module.css";
+import "./solid-account-settings.css";
 
 type ToastState = {
   id: number;
@@ -23,20 +23,20 @@ const ToastMessage = ({ toast, onClose }: { toast: ToastState; onClose: () => vo
   if (!toast) return null;
   const severityClass =
     toast.severity === "error"
-      ? styles.toastError
+      ? "solid-account-settings-toast-error"
       : toast.severity === "success"
-        ? styles.toastSuccess
+        ? "solid-account-settings-toast-success"
         : toast.severity === "warn"
-          ? styles.toastWarn
-          : styles.toastInfo;
+          ? "solid-account-settings-toast-warn"
+          : "solid-account-settings-toast-info";
 
   return (
-    <div className={`${styles.toast} ${severityClass}`} role="status" aria-live="polite">
+    <div className={`${"solid-account-settings-toast"} ${severityClass}`} role="status" aria-live="polite">
       <div>
-        <div className={styles.toastTitle}>{toast.summary}</div>
-        <div className={styles.toastBody}>{toast.detail}</div>
+        <div className={"solid-account-settings-toast-title"}>{toast.summary}</div>
+        <div className={"solid-account-settings-toast-body"}>{toast.detail}</div>
       </div>
-      <button type="button" className={styles.toastClose} onClick={onClose} aria-label="Close notification">
+      <button type="button" className={"solid-account-settings-toast-close"} onClick={onClose} aria-label="Close notification">
         ×
       </button>
     </div>
@@ -60,12 +60,12 @@ const PasswordInput = ({
 }) => {
   const [visible, setVisible] = useState(false);
   return (
-    <div className={styles.passwordWrap}>
+    <div className={"solid-account-settings-password-wrap"}>
       <input
         id={id}
         name={name}
         type={visible ? "text" : "password"}
-        className={styles.input}
+        className={"solid-account-settings-input"}
         value={value}
         onChange={onChange}
         onBlur={onBlur}
@@ -73,7 +73,7 @@ const PasswordInput = ({
       />
       <button
         type="button"
-        className={styles.passwordToggle}
+        className={"solid-account-settings-password-toggle"}
         onClick={() => setVisible((prev) => !prev)}
         aria-label={visible ? "Hide password" : "Show password"}
       >
@@ -186,12 +186,12 @@ export const SolidChangePassword = ({ solidSettingsData }: any) => {
   const isChangePasswordDisabled = !formik.dirty || !formik.isValid || formik.isSubmitting;
 
   return (
-    <form onSubmit={formik.handleSubmit} className={styles.accountForm}>
+    <form onSubmit={formik.handleSubmit} className={"solid-account-settings-account-form"}>
       <ToastMessage toast={toast} onClose={() => setToast(null)} />
 
-      <div className={styles.accountScroll}>
-        <div className={styles.formStack}>
-          <div className={styles.field}>
+      <div className={"solid-account-settings-account-scroll"}>
+        <div className={"solid-account-settings-form-stack"}>
+          <div className={"solid-account-settings-field"}>
             <label htmlFor="currentPassword">Current Password</label>
             <PasswordInput
               id="currentPassword"
@@ -200,10 +200,10 @@ export const SolidChangePassword = ({ solidSettingsData }: any) => {
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
             />
-            {fieldError("currentPassword") ? <p className={styles.errorText}>{fieldError("currentPassword")}</p> : null}
+            {fieldError("currentPassword") ? <p className={"solid-account-settings-error-text"}>{fieldError("currentPassword")}</p> : null}
           </div>
 
-          <div className={styles.field}>
+          <div className={"solid-account-settings-field"}>
             <label htmlFor="newPassword">New Password</label>
             <PasswordInput
               id="newPassword"
@@ -212,10 +212,10 @@ export const SolidChangePassword = ({ solidSettingsData }: any) => {
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
             />
-            {fieldError("newPassword") ? <p className={styles.errorText}>{fieldError("newPassword")}</p> : null}
+            {fieldError("newPassword") ? <p className={"solid-account-settings-error-text"}>{fieldError("newPassword")}</p> : null}
           </div>
 
-          <div className={styles.field}>
+          <div className={"solid-account-settings-field"}>
             <label htmlFor="confirmPassword">Confirm New Password</label>
             <PasswordInput
               id="confirmPassword"
@@ -224,16 +224,16 @@ export const SolidChangePassword = ({ solidSettingsData }: any) => {
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
             />
-            {fieldError("confirmPassword") ? <p className={styles.errorText}>{fieldError("confirmPassword")}</p> : null}
+            {fieldError("confirmPassword") ? <p className={"solid-account-settings-error-text"}>{fieldError("confirmPassword")}</p> : null}
           </div>
         </div>
 
-        <div className={styles.passwordHintWrap}>
+        <div className={"solid-account-settings-password-hint-wrap"}>
           <SolidPasswordHelperText text={solidSettingsData?.data?.authenticationPasswordComplexityDescription} />
         </div>
       </div>
 
-      <div className={styles.footerActions}>
+      <div className={"solid-account-settings-footer-actions"}>
         <SolidButton type="submit" size="sm" loading={formik.isSubmitting} disabled={isChangePasswordDisabled}>
           Change Password
         </SolidButton>
diff --git a/src/components/core/common/SolidAccountSettings/SolidNotifications.tsx b/src/components/core/common/SolidAccountSettings/SolidNotifications.tsx
index 8370853b..b342976b 100644
--- a/src/components/core/common/SolidAccountSettings/SolidNotifications.tsx
+++ b/src/components/core/common/SolidAccountSettings/SolidNotifications.tsx
@@ -5,7 +5,7 @@ import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { useBulkUpdateSolidUserSettingsMutation, useGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi";
 import { showToast } from "../../../../redux/features/toastSlice";
 import { SolidButton } from "../../../shad-cn-ui/SolidButton";
-import styles from "./SolidAccountSettings.module.css";
+import "./solid-account-settings.css";
 import { getSettingsMap } from "../../../../helpers/settingsPayload";
 
 export const SolidNotifications = () => {
@@ -58,25 +58,25 @@ export const SolidNotifications = () => {
   });
 
   return (
-    <form onSubmit={formik.handleSubmit} className={styles.accountForm}>
-      <div className={styles.accountScroll}>
-        <div className={styles.switchRow}>
+    <form onSubmit={formik.handleSubmit} className={"solid-account-settings-account-form"}>
+      <div className={"solid-account-settings-account-scroll"}>
+        <div className={"solid-account-settings-switch-row"}>
           <div>
-            <label className={styles.sectionTitle}>Enable Notification</label>
-            <div className={styles.versionCaption}>Decide whether you want to be notified of new messages or updates.</div>
+            <label className={"solid-account-settings-section-title"}>Enable Notification</label>
+            <div className={"solid-account-settings-version-caption"}>Decide whether you want to be notified of new messages or updates.</div>
           </div>
-          <label className={styles.switch} aria-label="Enable notification">
+          <label className={"solid-account-settings-switch"} aria-label="Enable notification">
             <input
               type="checkbox"
               checked={Boolean(formik.values.enableNotification)}
               onChange={(event) => formik.setFieldValue("enableNotification", event.target.checked)}
             />
-            <span className={styles.switchTrack} />
+            <span className={"solid-account-settings-switch-track"} />
           </label>
         </div>
       </div>
 
-      <div className={styles.footerActions}>
+      <div className={"solid-account-settings-footer-actions"}>
         <SolidButton type="submit" size="sm" loading={formik.isSubmitting}>
           Save
         </SolidButton>
diff --git a/src/components/core/common/SolidAccountSettings/SolidPersonalInfo.tsx b/src/components/core/common/SolidAccountSettings/SolidPersonalInfo.tsx
index cae06756..34179571 100644
--- a/src/components/core/common/SolidAccountSettings/SolidPersonalInfo.tsx
+++ b/src/components/core/common/SolidAccountSettings/SolidPersonalInfo.tsx
@@ -5,7 +5,7 @@ import { useGetUserQuery, useUpdateUserProfileMutation } from "../../../../redux
 import { useSession } from "../../../../hooks/useSession";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { SolidButton } from "../../../shad-cn-ui/SolidButton";
-import styles from "./SolidAccountSettings.module.css";
+import "./solid-account-settings.css";
 
 type ToastState = {
   id: number;
@@ -20,20 +20,20 @@ const ToastMessage = ({ toast, onClose }: { toast: ToastState; onClose: () => vo
   if (!toast) return null;
   const severityClass =
     toast.severity === "error"
-      ? styles.toastError
+      ? "solid-account-settings-toast-error"
       : toast.severity === "success"
-        ? styles.toastSuccess
+        ? "solid-account-settings-toast-success"
         : toast.severity === "warn"
-          ? styles.toastWarn
-          : styles.toastInfo;
+          ? "solid-account-settings-toast-warn"
+          : "solid-account-settings-toast-info";
 
   return (
-    <div className={`${styles.toast} ${severityClass}`} role="status" aria-live="polite">
+    <div className={`${"solid-account-settings-toast"} ${severityClass}`} role="status" aria-live="polite">
       <div>
-        <div className={styles.toastTitle}>{toast.summary}</div>
-        <div className={styles.toastBody}>{toast.detail}</div>
+        <div className={"solid-account-settings-toast-title"}>{toast.summary}</div>
+        <div className={"solid-account-settings-toast-body"}>{toast.detail}</div>
       </div>
-      <button type="button" className={styles.toastClose} onClick={onClose} aria-label="Close notification">
+      <button type="button" className={"solid-account-settings-toast-close"} onClick={onClose} aria-label="Close notification">
         ×
       </button>
     </div>
@@ -55,17 +55,17 @@ const ConfirmDialog = ({
 }) => {
   if (!visible) return null;
   return (
-    <div className={styles.confirmBackdrop} role="presentation" onClick={onCancel}>
+    <div className={"solid-account-settings-confirm-backdrop"} role="presentation" onClick={onCancel}>
       <div
-        className={styles.confirmModal}
+        className={"solid-account-settings-confirm-modal"}
         role="dialog"
         aria-modal="true"
         aria-label={title}
         onClick={(event) => event.stopPropagation()}
       >
-        <div className={styles.confirmHeader}>{title}</div>
-        <div className={styles.confirmBody}>{text}</div>
-        <div className={styles.confirmActions}>
+        <div className={"solid-account-settings-confirm-header"}>{title}</div>
+        <div className={"solid-account-settings-confirm-body"}>{text}</div>
+        <div className={"solid-account-settings-confirm-actions"}>
           <SolidButton size="sm" variant="destructive" onClick={onConfirm}>
             Confirm
           </SolidButton>
@@ -232,18 +232,18 @@ export const SolidPersonalInfo = () => {
 
   return (
     <>
-      <form onSubmit={formik.handleSubmit} className={styles.accountForm}>
+      <form onSubmit={formik.handleSubmit} className={"solid-account-settings-account-form"}>
         <ToastMessage toast={toast} onClose={() => setToast(null)} />
 
-        <div className={styles.accountScroll}>
-          <div className={styles.sectionTitle}>Profile Picture</div>
+        <div className={"solid-account-settings-account-scroll"}>
+          <div className={"solid-account-settings-section-title"}>Profile Picture</div>
 
-          <div className={styles.avatarRow}>
-            <div className={styles.avatarShell}>
+          <div className={"solid-account-settings-avatar-row"}>
+            <div className={"solid-account-settings-avatar-shell"}>
               {liveAvatarUrl ? (
-                <img src={liveAvatarUrl} alt="Profile" className={styles.avatarImage} />
+                <img src={liveAvatarUrl} alt="Profile" className={"solid-account-settings-avatar-image"} />
               ) : (
-                <span className={styles.avatarFallback} style={{ backgroundColor: avatarBg }}>
+                <span className={"solid-account-settings-avatar-fallback"} style={{ backgroundColor: avatarBg }}>
                   {initials}
                 </span>
               )}
@@ -251,7 +251,7 @@ export const SolidPersonalInfo = () => {
               {liveAvatarUrl ? (
                 <button
                   type="button"
-                  className={styles.avatarRemove}
+                  className={"solid-account-settings-avatar-remove"}
                   onClick={handleDeleteAvatar}
                   aria-label="Delete profile picture"
                 >
@@ -264,7 +264,7 @@ export const SolidPersonalInfo = () => {
               type="button"
               size="sm"
               variant="outline"
-              className={styles.accountSecondaryBtn}
+              className={"solid-account-settings-account-secondary-btn"}
               onClick={() => fileInputRef.current?.click()}
             >
               Upload Avatar
@@ -283,36 +283,36 @@ export const SolidPersonalInfo = () => {
             />
           </div>
 
-          <div className={styles.dashedDivider} />
+          <div className={"solid-account-settings-dashed-divider"} />
 
-          <div className={styles.sectionTitle}>Details</div>
-          <div className={styles.grid}>
-            <div className={styles.field}>
+          <div className={"solid-account-settings-section-title"}>Details</div>
+          <div className={"solid-account-settings-grid"}>
+            <div className={"solid-account-settings-field"}>
               <label htmlFor="fullName">Name</label>
               <input
                 id="fullName"
                 name="fullName"
                 value={formik.values.fullName}
                 onChange={formik.handleChange}
-                className={styles.input}
+                className={"solid-account-settings-input"}
               />
             </div>
 
-            <div className={styles.field}>
+            <div className={"solid-account-settings-field"}>
               <label htmlFor="email">Email</label>
-              <input id="email" disabled value={userData?.data?.email || ""} className={styles.input} />
+              <input id="email" disabled value={userData?.data?.email || ""} className={"solid-account-settings-input"} />
             </div>
 
-            <div className={styles.field}>
+            <div className={"solid-account-settings-field"}>
               <label htmlFor="mobile">Contact Number</label>
-              <input id="mobile" disabled value={userData?.data?.mobile || ""} className={styles.input} />
+              <input id="mobile" disabled value={userData?.data?.mobile || ""} className={"solid-account-settings-input"} />
             </div>
 
-            <div className={styles.field}>
+            <div className={"solid-account-settings-field"}>
               <label>Role</label>
-              <div className={styles.roleBox}>
+              <div className={"solid-account-settings-role-box"}>
                 {roleLabels.map((name: string) => (
-                  <span key={name} className={styles.roleChip}>
+                  <span key={name} className={"solid-account-settings-role-chip"}>
                     {name}
                   </span>
                 ))}
@@ -321,7 +321,7 @@ export const SolidPersonalInfo = () => {
           </div>
         </div>
 
-        <div className={styles.footerActions}>
+        <div className={"solid-account-settings-footer-actions"}>
           <SolidButton type="submit" size="sm" loading={formik.isSubmitting} disabled={isSaveDisabled}>
             Save
           </SolidButton>
diff --git a/src/components/core/common/SolidAccountSettings/SolidVersionInfo.tsx b/src/components/core/common/SolidAccountSettings/SolidVersionInfo.tsx
index aabea700..b3b65bad 100644
--- a/src/components/core/common/SolidAccountSettings/SolidVersionInfo.tsx
+++ b/src/components/core/common/SolidAccountSettings/SolidVersionInfo.tsx
@@ -5,7 +5,7 @@ import { useSession } from "../../../../hooks/useSession";
 import { useLazyGetSolidVersionInfoQuery } from "../../../../redux/api/solidSettingsApi";
 import { getSolidEntityApiPoolSnapshot, SOLID_ENTITY_API_POOL_LIMIT } from "../../../../redux/store/solidEntityApiPool";
 import { SolidButton } from "../../../shad-cn-ui/SolidButton";
-import styles from "./SolidAccountSettings.module.css";
+import "./solid-account-settings.css";
 
 interface PackageVersionInfo {
   repo: "local" | "npm";
@@ -66,14 +66,14 @@ export const SolidVersionInfo = () => {
 
   if (isLoading) {
     return (
-      <div className={styles.versionLoaderWrap}>
+      <div className={"solid-account-settings-version-loader-wrap"}>
         <span className="solid-btn-spinner" aria-hidden="true" />
       </div>
     );
   }
 
   if (isError || !data) {
-    return <p className={styles.versionError}>Unable to load version information.</p>;
+    return <p className={"solid-account-settings-version-error"}>Unable to load version information.</p>;
   }
 
   const packages = ((data as any)?.data?.data ?? (data as any)?.data ?? data) as Record<string, PackageVersionInfo>;
@@ -86,24 +86,24 @@ export const SolidVersionInfo = () => {
   const activeCount = poolSnapshot.filter((entry) => entry.active).length;
 
   if (!packages || Object.keys(packages).length === 0) {
-    return <p className={styles.versionError}>Version information is currently unavailable.</p>;
+    return <p className={"solid-account-settings-version-error"}>Version information is currently unavailable.</p>;
   }
 
   return (
-    <div className={styles.versionPanel}>
-      <h3 className={styles.sectionTitle}>Version Information</h3>
-      <p className={styles.versionCaption}>Packages powering this application</p>
+    <div className={"solid-account-settings-version-panel"}>
+      <h3 className={"solid-account-settings-section-title"}>Version Information</h3>
+      <p className={"solid-account-settings-version-caption"}>Packages powering this application</p>
 
-      <div className={styles.versionList}>
+      <div className={"solid-account-settings-version-list"}>
         {Object.entries(packages).map(([key, info]) => (
-          <div key={key} className={styles.versionRow}>
+          <div key={key} className={"solid-account-settings-version-row"}>
             <div>
-              <div className={styles.versionName}>{PACKAGE_LABELS[key] || key}</div>
-              <div className={styles.versionHint}>{PACKAGE_HINTS[key] || key}</div>
+              <div className={"solid-account-settings-version-name"}>{PACKAGE_LABELS[key] || key}</div>
+              <div className={"solid-account-settings-version-hint"}>{PACKAGE_HINTS[key] || key}</div>
             </div>
-            <div className={styles.versionTags}>
-              <span className={styles.versionTag}>{info.version}</span>
-              <span className={`${styles.versionTag} ${info.repo === "local" ? styles.repoLocal : styles.repoNpm}`}>
+            <div className={"solid-account-settings-version-tags"}>
+              <span className={"solid-account-settings-version-tag"}>{info.version}</span>
+              <span className={`${"solid-account-settings-version-tag"} ${info.repo === "local" ? "solid-account-settings-repo-local" : "solid-account-settings-repo-npm"}`}>
                 {info.repo}
               </span>
             </div>
@@ -112,7 +112,7 @@ export const SolidVersionInfo = () => {
       </div>
 
       {canOpenDiagnostics && (
-        <div className={styles.versionActions}>
+        <div className={"solid-account-settings-version-actions"}>
           <SolidButton
             type="button"
             size="sm"
@@ -125,21 +125,21 @@ export const SolidVersionInfo = () => {
       )}
 
       {canOpenDiagnostics && showDiagnostics && (
-        <div className={styles.diagnosticsBackdrop} role="presentation" onClick={() => setShowDiagnostics(false)}>
+        <div className={"solid-account-settings-diagnostics-backdrop"} role="presentation" onClick={() => setShowDiagnostics(false)}>
           <section
-            className={styles.diagnosticsModal}
+            className={"solid-account-settings-diagnostics-modal"}
             role="dialog"
             aria-modal="true"
             aria-labelledby="solid-diagnostics-title"
             onClick={(event) => event.stopPropagation()}
           >
-            <header className={styles.diagnosticsHeader}>
+            <header className={"solid-account-settings-diagnostics-header"}>
               <div>
-                <h3 id="solid-diagnostics-title" className={styles.sectionTitle}>Diagnostics</h3>
-                <p className={styles.versionCaption}>Current tab runtime entity API pool snapshot.</p>
+                <h3 id="solid-diagnostics-title" className={"solid-account-settings-section-title"}>Diagnostics</h3>
+                <p className={"solid-account-settings-version-caption"}>Current tab runtime entity API pool snapshot.</p>
               </div>
-              <div className={styles.diagnosticsHeaderActions}>
-                <span className={styles.diagnosticsRefreshStatus} aria-live="polite">{lastDiagnosticsRefreshLabel}</span>
+              <div className={"solid-account-settings-diagnostics-header-actions"}>
+                <span className={"solid-account-settings-diagnostics-refresh-status"} aria-live="polite">{lastDiagnosticsRefreshLabel}</span>
                 <SolidButton
                   type="button"
                   size="sm"
@@ -151,7 +151,7 @@ export const SolidVersionInfo = () => {
                 </SolidButton>
                 <button
                   type="button"
-                  className={styles.closeButton}
+                  className={"solid-account-settings-close-button"}
                   onClick={() => setShowDiagnostics(false)}
                   aria-label="Close diagnostics"
                 >
@@ -160,24 +160,24 @@ export const SolidVersionInfo = () => {
               </div>
             </header>
 
-            <div className={styles.diagnosticsSummary}>
+            <div className={"solid-account-settings-diagnostics-summary"}>
               <span><strong>Environment:</strong> {envName || "unknown"}</span>
               <span><strong>Pool Limit:</strong> {SOLID_ENTITY_API_POOL_LIMIT}</span>
               <span><strong>Active:</strong> {activeCount}</span>
               <span><strong>Cached:</strong> {poolSnapshot.length}</span>
             </div>
 
-            <div className={styles.diagnosticsTabs}>
+            <div className={"solid-account-settings-diagnostics-tabs"}>
               <button
                 type="button"
-                className={`${styles.diagnosticsTab} ${activeTab === "pool" ? styles.diagnosticsTabActive : ""}`}
+                className={`${"solid-account-settings-diagnostics-tab"} ${activeTab === "pool" ? "solid-account-settings-diagnostics-tab-active" : ""}`}
                 onClick={() => setActiveTab("pool")}
               >
                 Pool
               </button>
               <button
                 type="button"
-                className={`${styles.diagnosticsTab} ${activeTab === "runtime" ? styles.diagnosticsTabActive : ""}`}
+                className={`${"solid-account-settings-diagnostics-tab"} ${activeTab === "runtime" ? "solid-account-settings-diagnostics-tab-active" : ""}`}
                 onClick={() => setActiveTab("runtime")}
               >
                 Runtime
@@ -185,8 +185,8 @@ export const SolidVersionInfo = () => {
             </div>
 
             {activeTab === "pool" ? (
-              <div className={styles.diagnosticsTableWrap}>
-                <table className={styles.diagnosticsTable}>
+              <div className={"solid-account-settings-diagnostics-table-wrap"}>
+                <table className={"solid-account-settings-diagnostics-table"}>
                   <thead>
                     <tr>
                       <th>Entity</th>
@@ -199,13 +199,13 @@ export const SolidVersionInfo = () => {
                   <tbody>
                     {poolSnapshot.length === 0 ? (
                       <tr>
-                        <td colSpan={5} className={styles.diagnosticsEmpty}>No entity APIs created in this session yet.</td>
+                        <td colSpan={5} className={"solid-account-settings-diagnostics-empty"}>No entity APIs created in this session yet.</td>
                       </tr>
                     ) : (
                       poolSnapshot.map((entry) => (
                         <tr key={entry.reducerPath}>
                           <td>{entry.entityName}</td>
-                          <td className={styles.diagnosticsMono}>{entry.reducerPath}</td>
+                          <td className={"solid-account-settings-diagnostics-mono"}>{entry.reducerPath}</td>
                           <td>#{entry.registeredAt}</td>
                           <td>#{entry.lastAccessedAt}</td>
                           <td>{entry.active ? "yes" : "no"}</td>
@@ -216,12 +216,12 @@ export const SolidVersionInfo = () => {
                 </table>
               </div>
             ) : (
-              <div className={styles.diagnosticsRuntimeGrid}>
+              <div className={"solid-account-settings-diagnostics-runtime-grid"}>
                 <div><strong>Environment:</strong> {envName || "unknown"}</div>
                 <div><strong>Backend API:</strong> {backendApi}</div>
                 <div><strong>Login Redirect:</strong> {loginRedirect}</div>
                 <div><strong>User:</strong> {session?.user?.email || session?.user?.name || "(unknown)"}</div>
-                <div className={styles.diagnosticsSpan2}><strong>Roles:</strong> {roles}</div>
+                <div className={"solid-account-settings-diagnostics-span2"}><strong>Roles:</strong> {roles}</div>
               </div>
             )}
           </section>
diff --git a/src/components/core/common/SolidAccountSettings/SolidAccountSettings.module.css b/src/components/core/common/SolidAccountSettings/solid-account-settings.css
similarity index 69%
rename from src/components/core/common/SolidAccountSettings/SolidAccountSettings.module.css
rename to src/components/core/common/SolidAccountSettings/solid-account-settings.css
index 01b77f5e..cc93bfdb 100644
--- a/src/components/core/common/SolidAccountSettings/SolidAccountSettings.module.css
+++ b/src/components/core/common/SolidAccountSettings/solid-account-settings.css
@@ -1,4 +1,4 @@
-.backdrop {
+.solid-account-settings-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1100;
@@ -9,7 +9,7 @@
   padding: 16px;
 }
 
-.modal {
+.solid-account-settings-modal {
   width: min(540px, calc(100vw - 20px));
   max-height: calc(100vh - 32px);
   min-width: 0;
@@ -24,7 +24,7 @@
   overscroll-behavior: contain;
 }
 
-.header {
+.solid-account-settings-header {
   min-height: 62px;
   border-bottom: 1px solid var(--border);
   padding: 12px 14px;
@@ -34,11 +34,11 @@
   gap: 12px;
 }
 
-.header > div {
+.solid-account-settings-header > div {
   min-width: 0;
 }
 
-.title {
+.solid-account-settings-title {
   margin: 0;
   color: var(--card-foreground);
   font-size: 20px;
@@ -47,13 +47,13 @@
   letter-spacing: -0.01em;
 }
 
-.subtitle {
+.solid-account-settings-subtitle {
   margin: 4px 0 0;
   font-size: 12px;
   color: var(--muted-foreground);
 }
 
-.closeButton {
+.solid-account-settings-close-button {
   width: 30px;
   height: 30px;
   border-radius: 8px;
@@ -65,12 +65,12 @@
   cursor: pointer;
 }
 
-.closeButton:hover {
+.solid-account-settings-close-button:hover {
   background: var(--accent);
   color: var(--accent-foreground);
 }
 
-.tabsLine {
+.solid-account-settings-tabs-line {
   display: flex;
   align-items: center;
   gap: 16px;
@@ -78,7 +78,7 @@
   padding: 0 14px;
 }
 
-.tabTrigger {
+.solid-account-settings-tab-trigger {
   border: 0;
   background: transparent;
   color: var(--muted-foreground);
@@ -89,17 +89,17 @@
   cursor: pointer;
 }
 
-.tabTrigger:hover {
+.solid-account-settings-tab-trigger:hover {
   color: var(--foreground);
 }
 
-.tabActive {
+.solid-account-settings-tab-active {
   color: var(--foreground);
   font-weight: 600;
   border-bottom-color: var(--foreground);
 }
 
-.formWrapper {
+.solid-account-settings-form-wrapper {
   flex: 1;
   min-height: 0;
   min-width: 0;
@@ -108,7 +108,7 @@
   background: var(--card);
 }
 
-.toast {
+.solid-account-settings-toast {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -120,19 +120,19 @@
   background: var(--card);
 }
 
-.toastTitle {
+.solid-account-settings-toast-title {
   font-size: 12px;
   font-weight: 600;
   line-height: 1.25;
 }
 
-.toastBody {
+.solid-account-settings-toast-body {
   font-size: 12px;
   color: var(--muted-foreground);
   line-height: 1.25;
 }
 
-.toastClose {
+.solid-account-settings-toast-close {
   width: 22px;
   height: 22px;
   border: 0;
@@ -142,28 +142,28 @@
   cursor: pointer;
 }
 
-.toastClose:hover {
+.solid-account-settings-toast-close:hover {
   background: var(--accent);
   color: var(--accent-foreground);
 }
 
-.toastError {
+.solid-account-settings-toast-error {
   border-color: color-mix(in srgb, #ef4444 46%, var(--border));
 }
 
-.toastSuccess {
+.solid-account-settings-toast-success {
   border-color: color-mix(in srgb, #22c55e 46%, var(--border));
 }
 
-.toastWarn {
+.solid-account-settings-toast-warn {
   border-color: color-mix(in srgb, #f59e0b 46%, var(--border));
 }
 
-.toastInfo {
+.solid-account-settings-toast-info {
   border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
 }
 
-.confirmBackdrop {
+.solid-account-settings-confirm-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1200;
@@ -173,7 +173,7 @@
   padding: 16px;
 }
 
-.confirmModal {
+.solid-account-settings-confirm-modal {
   width: min(360px, calc(100vw - 24px));
   border-radius: 12px;
   border: 1px solid var(--border);
@@ -182,32 +182,32 @@
   box-shadow: 0 18px 44px rgba(2, 6, 23, 0.35);
 }
 
-.confirmHeader {
+.solid-account-settings-confirm-header {
   border-bottom: 1px solid var(--border);
   padding: 12px 14px;
   font-size: 14px;
   font-weight: 600;
 }
 
-.confirmBody {
+.solid-account-settings-confirm-body {
   padding: 14px;
   font-size: 13px;
   color: var(--muted-foreground);
 }
 
-.confirmActions {
+.solid-account-settings-confirm-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   padding: 0 14px 14px;
 }
 
-.tabsLine::-webkit-scrollbar {
+.solid-account-settings-tabs-line::-webkit-scrollbar {
   display: none;
 }
 
 @media (max-width: 900px) {
-  .tabsLine {
+  .solid-account-settings-tabs-line {
     gap: 12px;
     overflow-x: auto;
     white-space: nowrap;
@@ -216,7 +216,7 @@
   }
 }
 
-.accountForm {
+.solid-account-settings-account-form {
   min-height: 100%;
   display: flex;
   flex-direction: column;
@@ -227,25 +227,25 @@
   background: transparent;
 }
 
-.accountScroll {
+.solid-account-settings-account-scroll {
   min-height: 0;
   padding: 12px 12px 0;
 }
 
-.sectionTitle {
+.solid-account-settings-section-title {
   margin: 0 0 8px;
   font-size: 14px;
   font-weight: 650;
   color: var(--foreground);
 }
 
-.avatarRow {
+.solid-account-settings-avatar-row {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.avatarShell {
+.solid-account-settings-avatar-shell {
   position: relative;
   width: 72px;
   height: 72px;
@@ -255,14 +255,14 @@
   background: var(--muted);
 }
 
-.avatarImage {
+.solid-account-settings-avatar-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
 }
 
-.avatarFallback {
+.solid-account-settings-avatar-fallback {
   width: 100%;
   height: 100%;
   display: grid;
@@ -273,7 +273,7 @@
   border-radius: inherit;
 }
 
-.avatarRemove {
+.solid-account-settings-avatar-remove {
   position: absolute;
   right: -2px;
   top: -2px;
@@ -288,35 +288,35 @@
   cursor: pointer;
 }
 
-.avatarRemove:hover {
+.solid-account-settings-avatar-remove:hover {
   background: #ef4444;
   color: #fff;
 }
 
-.dashedDivider {
+.solid-account-settings-dashed-divider {
   margin: 14px 0;
   border-bottom: 1px dashed var(--border);
 }
 
-.grid {
+.solid-account-settings-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
 }
 
-.field {
+.solid-account-settings-field {
   display: flex;
   flex-direction: column;
   gap: 5px;
 }
 
-.field label {
+.solid-account-settings-field label {
   font-size: 12px;
   color: var(--muted-foreground);
   font-weight: 500;
 }
 
-.input {
+.solid-account-settings-input {
   width: 100%;
   height: 34px;
   border-radius: 8px;
@@ -327,18 +327,18 @@
   font-size: 13px;
 }
 
-.input:disabled {
+.solid-account-settings-input:disabled {
   opacity: 0.78;
   cursor: not-allowed;
   background: color-mix(in srgb, var(--muted) 35%, transparent);
 }
 
-.input:focus-visible {
+.solid-account-settings-input:focus-visible {
   outline: none;
   border-color: var(--primary);
 }
 
-.roleBox {
+.solid-account-settings-role-box {
   min-height: 34px;
   border-radius: 8px;
   border: 1px solid var(--border);
@@ -349,7 +349,7 @@
   gap: 6px;
 }
 
-.roleChip {
+.solid-account-settings-role-chip {
   border: 1px solid var(--border);
   border-radius: 999px;
   padding: 3px 8px;
@@ -358,41 +358,37 @@
   background: var(--card);
 }
 
-.footerActions {
+.solid-account-settings-footer-actions {
   border-top: 1px solid var(--border);
   padding: 10px 12px 12px;
   display: flex;
   justify-content: flex-start;
 }
 
-.passwordHintWrap {
+.solid-account-settings-password-hint-wrap {
   margin: 8px;
 }
 
-.accountPrimaryBtn.solid-btn {
-  font-weight: 500;
-}
-
-.accountSecondaryBtn.solid-btn {
+.solid-account-settings-account-secondary-btn.solid-btn {
   --solid-btn-bg: var(--card);
   --solid-btn-fg: var(--foreground);
   --solid-btn-border: var(--border);
   font-weight: 500;
 }
 
-.accountSecondaryBtn.solid-btn:hover {
+.solid-account-settings-account-secondary-btn.solid-btn:hover {
   background: color-mix(in srgb, var(--accent) 75%, transparent);
 }
 
-.passwordWrap {
+.solid-account-settings-password-wrap {
   position: relative;
 }
 
-.passwordWrap .input {
+.solid-account-settings-password-wrap .solid-account-settings-input {
   padding-right: 56px;
 }
 
-.passwordToggle {
+.solid-account-settings-password-toggle {
   position: absolute;
   right: 7px;
   top: 50%;
@@ -408,44 +404,44 @@
   cursor: pointer;
 }
 
-.passwordToggle:hover {
+.solid-account-settings-password-toggle:hover {
   background: var(--accent);
   color: var(--accent-foreground);
 }
 
-.errorText {
+.solid-account-settings-error-text {
   margin: 0;
   color: #ef4444;
   font-size: 12px;
   line-height: 1.2;
 }
 
-.formStack {
+.solid-account-settings-form-stack {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
 }
 
-.versionPanel {
+.solid-account-settings-version-panel {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.versionCaption {
+.solid-account-settings-version-caption {
   margin: 0;
   font-size: 12px;
   color: var(--muted-foreground);
 }
 
-.versionList {
+.solid-account-settings-version-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 8px;
 }
 
-.versionRow {
+.solid-account-settings-version-row {
   border: 1px solid var(--border);
   border-radius: 10px;
   background: color-mix(in srgb, var(--muted) 20%, transparent);
@@ -456,22 +452,22 @@
   gap: 8px;
 }
 
-.versionName {
+.solid-account-settings-version-name {
   font-size: 13px;
   font-weight: 600;
 }
 
-.versionHint {
+.solid-account-settings-version-hint {
   font-size: 11px;
   color: var(--muted-foreground);
 }
 
-.versionTags {
+.solid-account-settings-version-tags {
   display: flex;
   gap: 6px;
 }
 
-.versionTag {
+.solid-account-settings-version-tag {
   border: 1px solid var(--border);
   border-radius: 999px;
   padding: 3px 8px;
@@ -479,35 +475,35 @@
   background: var(--card);
 }
 
-.repoLocal {
+.solid-account-settings-repo-local {
   border-color: color-mix(in srgb, #f59e0b 48%, var(--border));
   color: #b45309;
 }
 
-.repoNpm {
+.solid-account-settings-repo-npm {
   border-color: color-mix(in srgb, #22c55e 48%, var(--border));
   color: #15803d;
 }
 
-.versionLoaderWrap {
+.solid-account-settings-version-loader-wrap {
   min-height: 200px;
   display: grid;
   place-items: center;
 }
 
-.versionError {
+.solid-account-settings-version-error {
   color: var(--muted-foreground);
   margin: 0;
   font-size: 13px;
 }
 
-.versionActions {
+.solid-account-settings-version-actions {
   margin-top: 12px;
   display: flex;
   justify-content: flex-start;
 }
 
-.diagnosticsBackdrop {
+.solid-account-settings-diagnostics-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1300;
@@ -517,7 +513,7 @@
   padding: 16px;
 }
 
-.diagnosticsModal {
+.solid-account-settings-diagnostics-modal {
   width: min(1100px, calc(100vw - 24px));
   max-height: calc(100vh - 28px);
   overflow: auto;
@@ -529,14 +525,14 @@
   padding: 16px;
 }
 
-.diagnosticsHeader {
+.solid-account-settings-diagnostics-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
 }
 
-.diagnosticsHeaderActions {
+.solid-account-settings-diagnostics-header-actions {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -544,7 +540,7 @@
   justify-content: flex-end;
 }
 
-.diagnosticsRefreshStatus {
+.solid-account-settings-diagnostics-refresh-status {
   font-size: 12px;
   color: var(--muted-foreground);
   min-height: 18px;
@@ -552,7 +548,7 @@
   align-items: center;
 }
 
-.diagnosticsSummary {
+.solid-account-settings-diagnostics-summary {
   margin-top: 12px;
   padding: 10px 12px;
   border: 1px solid var(--border);
@@ -564,20 +560,20 @@
   font-size: 13px;
 }
 
-.diagnosticsTableWrap {
+.solid-account-settings-diagnostics-table-wrap {
   margin-top: 12px;
   border: 1px solid var(--border);
   border-radius: 10px;
   overflow: auto;
 }
 
-.diagnosticsTabs {
+.solid-account-settings-diagnostics-tabs {
   margin-top: 12px;
   display: flex;
   gap: 8px;
 }
 
-.diagnosticsTab {
+.solid-account-settings-diagnostics-tab {
   border: 1px solid var(--border);
   border-radius: 999px;
   background: transparent;
@@ -588,45 +584,45 @@
   cursor: pointer;
 }
 
-.diagnosticsTab:hover {
+.solid-account-settings-diagnostics-tab:hover {
   color: var(--foreground);
 }
 
-.diagnosticsTabActive {
+.solid-account-settings-diagnostics-tab-active {
   background: color-mix(in srgb, var(--accent) 42%, transparent);
   color: var(--foreground);
 }
 
-.diagnosticsTable {
+.solid-account-settings-diagnostics-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
 }
 
-.diagnosticsTable thead tr {
+.solid-account-settings-diagnostics-table thead tr {
   border-bottom: 1px solid var(--border);
 }
 
-.diagnosticsTable tbody tr {
+.solid-account-settings-diagnostics-table tbody tr {
   border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
 }
 
-.diagnosticsTable th,
-.diagnosticsTable td {
+.solid-account-settings-diagnostics-table th,
+.solid-account-settings-diagnostics-table td {
   text-align: left;
   padding: 8px 10px;
   vertical-align: top;
 }
 
-.diagnosticsEmpty {
+.solid-account-settings-diagnostics-empty {
   opacity: 0.75;
 }
 
-.diagnosticsMono {
+.solid-account-settings-diagnostics-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.diagnosticsRuntimeGrid {
+.solid-account-settings-diagnostics-runtime-grid {
   margin-top: 12px;
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -638,11 +634,11 @@
   font-size: 13px;
 }
 
-.diagnosticsSpan2 {
+.solid-account-settings-diagnostics-span2 {
   grid-column: span 2;
 }
 
-.switchRow {
+.solid-account-settings-switch-row {
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 12px;
@@ -652,20 +648,20 @@
   gap: 12px;
 }
 
-.switch {
+.solid-account-settings-switch {
   position: relative;
   display: inline-flex;
   width: 42px;
   height: 24px;
 }
 
-.switch input {
+.solid-account-settings-switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
-.switchTrack {
+.solid-account-settings-switch-track {
   position: absolute;
   inset: 0;
   border-radius: 999px;
@@ -674,7 +670,7 @@
   transition: 120ms ease;
 }
 
-.switchTrack::after {
+.solid-account-settings-switch-track::after {
   content: "";
   position: absolute;
   top: 2px;
@@ -687,111 +683,111 @@
   box-shadow: 0 1px 3px rgba(2, 6, 23, 0.2);
 }
 
-.switch input:checked + .switchTrack {
+.solid-account-settings-switch input:checked + .solid-account-settings-switch-track {
   background: color-mix(in srgb, var(--primary) 70%, transparent);
   border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
 }
 
-.switch input:checked + .switchTrack::after {
+.solid-account-settings-switch input:checked + .solid-account-settings-switch-track::after {
   left: 20px;
 }
 
 @media (max-width: 760px) {
-  .modal {
+  .solid-account-settings-modal {
     width: min(98vw, 540px);
   }
 
-  .diagnosticsModal {
+  .solid-account-settings-diagnostics-modal {
     width: min(98vw, 1100px);
     padding: 12px;
   }
 
-  .diagnosticsHeader {
+  .solid-account-settings-diagnostics-header {
     flex-direction: column;
     align-items: stretch;
   }
 
-  .diagnosticsRuntimeGrid {
+  .solid-account-settings-diagnostics-runtime-grid {
     grid-template-columns: 1fr;
   }
 
-  .diagnosticsSpan2 {
+  .solid-account-settings-diagnostics-span2 {
     grid-column: span 1;
   }
 }
 
 @media (max-width: 640px) {
-  .backdrop {
+  .solid-account-settings-backdrop {
     padding: 8px;
   }
 
-  .modal {
+  .solid-account-settings-modal {
     width: calc(100vw - 16px);
     max-height: calc(100dvh - 16px);
     border-radius: 14px;
   }
 
-  .header {
+  .solid-account-settings-header {
     padding: 14px 12px 10px;
     align-items: flex-start;
   }
 
-  .title {
+  .solid-account-settings-title {
     font-size: 18px;
   }
 
-  .subtitle {
+  .solid-account-settings-subtitle {
     font-size: 11.5px;
     line-height: 1.4;
   }
 
-  .tabsLine {
+  .solid-account-settings-tabs-line {
     gap: 10px;
     padding: 0 12px;
     overscroll-behavior-x: contain;
   }
 
-  .tabTrigger {
+  .solid-account-settings-tab-trigger {
     flex: 0 0 auto;
     font-size: 12px;
     padding: 11px 0 9px;
   }
 
-  .formWrapper {
+  .solid-account-settings-form-wrapper {
     padding: 8px;
   }
 
-  .accountScroll {
+  .solid-account-settings-account-scroll {
     padding: 8px 8px 0;
   }
 
-  .avatarRow,
-  .versionRow {
+  .solid-account-settings-avatar-row,
+  .solid-account-settings-version-row {
     flex-direction: column;
     align-items: flex-start;
   }
 
-  .versionTags {
+  .solid-account-settings-version-tags {
     flex-wrap: wrap;
   }
 
-  .footerActions {
+  .solid-account-settings-footer-actions {
     padding: 10px 8px 12px;
   }
 
-  .confirmActions {
+  .solid-account-settings-confirm-actions {
     padding: 0 8px 12px;
     flex-direction: column-reverse;
   }
 
-  .footerActions :global(.solid-btn),
-  .confirmActions :global(.solid-btn),
-  .versionActions :global(.solid-btn) {
+  .solid-account-settings-footer-actions .solid-btn,
+  .solid-account-settings-confirm-actions .solid-btn,
+  .solid-account-settings-version-actions .solid-btn {
     width: 100%;
     justify-content: center;
   }
 
-  .versionActions {
+  .solid-account-settings-version-actions {
     width: 100%;
   }
 }
diff --git a/src/components/core/common/SolidGenericImport/SolidImportDropzone.tsx b/src/components/core/common/SolidGenericImport/SolidImportDropzone.tsx
index 720f4ce0..0f33b0f4 100644
--- a/src/components/core/common/SolidGenericImport/SolidImportDropzone.tsx
+++ b/src/components/core/common/SolidGenericImport/SolidImportDropzone.tsx
@@ -4,8 +4,7 @@ import { useDropzone } from 'react-dropzone';
 import { FileSpreadsheet, FileText, Trash2, Upload } from 'lucide-react';
 import { useDispatch } from 'react-redux';
 import { showToast } from '../../../../redux/features/toastSlice';
-import styles from './SolidImport.module.css'
-import { DocumentSvg } from './DocumentSvg';
+import './solid-import.css';import { DocumentSvg } from './DocumentSvg';
 import { useCreateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { SolidButton } from '../../../shad-cn-ui';
@@ -70,7 +69,7 @@ export const SolidImportDropzone = ({ setImportStep, setTransactionId, modelMeta
 
     return (
         <div>
-            <div className={styles.SolidImportContextWrapper}>
+            <div className={"solid-import-solid-import-context-wrapper"}>
                 <div {...rootProps}>
                     <input {...getInputProps()} />
                     <div className="solid-import-dropzone-copy">
diff --git a/src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx b/src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx
index 310f716f..ee970fd3 100644
--- a/src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx
+++ b/src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx
@@ -1,6 +1,5 @@
 import { Download, FileSpreadsheet, MoveRight } from 'lucide-react';
-import styles from './SolidImport.module.css'
-import { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';
+import './solid-import.css';import { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';
 import { useEffect } from 'react';
 import { getSession } from "../../../../adapters/auth/index";
 import { ERROR_MESSAGES } from '../../../../constants/error-messages';
@@ -65,7 +64,7 @@ export const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any
 
     return (
         <div>
-            <div className={styles.SolidImportContextWrapper}>
+            <div className={"solid-import-solid-import-context-wrapper"}>
                 {isLoading ? (
                     <div className="solid-import-loading-state">
                         <SolidSpinner size={22} label="Loading import instructions" />
diff --git a/src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx b/src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx
index 7f9fc0e1..adbc9f4a 100644
--- a/src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx
+++ b/src/components/core/common/SolidGenericImport/SolidImportTransaction.tsx
@@ -1,6 +1,5 @@
 import { AlertTriangle, CircleX, MoveRight } from 'lucide-react'
-import styles from './SolidImport.module.css'
-import { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
+import './solid-import.css';import { useCreateImportSyncMutation, useLazyGetImportMappingInfoQuery, usePatchUpdateImportTransactionMutation } from '../../../../redux/api/importTransactionApi';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { showToast } from '../../../../redux/features/toastSlice';
@@ -256,7 +255,7 @@ export const SolidImportTransaction = ({ setImportStatusResult, transactionId, s
     );
     return (
         <div>
-            <div className={styles.SolidImportContextWrapper}>
+            <div className={"solid-import-solid-import-context-wrapper"}>
                 {isLoading ? (
                     <div className="solid-import-loading-state">
                         <SolidSpinner size={22} label="Loading mapping info" />
@@ -291,7 +290,7 @@ export const SolidImportTransaction = ({ setImportStatusResult, transactionId, s
                             </div>
                         ) : null}
                         <div className='solid-import-mapping-table'>
-                            <div className={`solid-import-mapping-head ${styles.ImportTableHeader}`}>
+                            <div className={`solid-import-mapping-head ${"solid-import-import-table-header"}`}>
                                 <div className="solid-import-mapping-head-cell">File Column</div>
                                 <div className="solid-import-mapping-head-cell">SolidX Field</div>
                             </div>
diff --git a/src/components/core/common/SolidGenericImport/SolidImport.module.css b/src/components/core/common/SolidGenericImport/solid-import.css
similarity index 70%
rename from src/components/core/common/SolidGenericImport/SolidImport.module.css
rename to src/components/core/common/SolidGenericImport/solid-import.css
index 5bc46e2d..80ab47fb 100644
--- a/src/components/core/common/SolidGenericImport/SolidImport.module.css
+++ b/src/components/core/common/SolidGenericImport/solid-import.css
@@ -1,4 +1,4 @@
-.SolidImportContextWrapper {
+.solid-import-solid-import-context-wrapper {
     min-height: 360px;
     max-height: min(58vh, 520px);
     border-radius: 14px;
@@ -8,7 +8,7 @@
     overflow-x: visible;
 }
 
-.ImportTableHeader {
+.solid-import-import-table-header {
     background: color-mix(in srgb, var(--accent) 48%, transparent);
     border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
     position: sticky;
@@ -16,51 +16,51 @@
     z-index: 1;
 }
 
-:global(.solid-import-dialog) {
+.solid-import-dialog {
     width: min(840px, calc(100vw - 1.5rem));
 }
 
-:global(.solid-import-dialog-body) {
+.solid-import-dialog-body {
     padding: 14px 16px 16px;
 }
 
-:global(.solid-import-shell) {
+.solid-import-shell {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }
 
-:global(.solid-import-dialog-heading) {
+.solid-import-dialog-heading {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }
 
-:global(.solid-import-dialog-title) {
+.solid-import-dialog-title {
     font-size: 18px;
     line-height: 1.15;
     font-weight: 700;
     letter-spacing: -0.02em;
 }
 
-:global(.solid-import-dialog-subtitle) {
+.solid-import-dialog-subtitle {
     max-width: 560px;
     font-size: 12.5px;
     line-height: 1.55;
     color: color-mix(in srgb, var(--foreground) 74%, transparent);
 }
 
-:global(.solid-import-stepper) {
+.solid-import-stepper {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 6px;
 }
 
-:global(.solid-import-stepper-item-wrap) {
+.solid-import-stepper-item-wrap {
     min-width: 0;
 }
 
-:global(.solid-import-stepper-item) {
+.solid-import-stepper-item {
     width: 100%;
     min-height: 46px;
     border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
@@ -75,35 +75,35 @@
     transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
 }
 
-:global(.solid-import-stepper-item:hover:not(:disabled)) {
+.solid-import-stepper-item:hover:not(:disabled) {
     background-color: color-mix(in srgb, var(--card) 90%, white 10%);
 }
 
-:global(.solid-import-stepper-item:focus-visible) {
+.solid-import-stepper-item:focus-visible {
     outline: none;
     border-color: var(--primary);
 }
 
-:global(.solid-import-stepper-item:disabled) {
+.solid-import-stepper-item:disabled {
     cursor: not-allowed;
 }
 
-:global(.solid-import-stepper-item.is-active) {
+.solid-import-stepper-item.is-active {
     border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
     background: color-mix(in srgb, var(--primary) 12%, var(--card));
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
-:global(.solid-import-stepper-item.is-complete) {
+.solid-import-stepper-item.is-complete {
     border-color: color-mix(in srgb, #16a34a 24%, var(--border));
     background: color-mix(in srgb, #16a34a 10%, var(--card));
 }
 
-:global(.solid-import-stepper-item.is-locked) {
+.solid-import-stepper-item.is-locked {
     opacity: 0.6;
 }
 
-:global(.solid-import-stepper-badge) {
+.solid-import-stepper-badge {
     width: 22px;
     height: 22px;
     flex: 0 0 22px;
@@ -117,37 +117,37 @@
     font-weight: 700;
 }
 
-:global(.solid-import-stepper-item.is-active .solid-import-stepper-badge) {
+.solid-import-stepper-item.is-active .solid-import-stepper-badge {
     background: var(--primary);
     border-color: transparent;
     color: var(--primary-foreground);
 }
 
-:global(.solid-import-stepper-item.is-complete .solid-import-stepper-badge) {
+.solid-import-stepper-item.is-complete .solid-import-stepper-badge {
     background: #16a34a;
     border-color: transparent;
     color: #fff;
 }
 
-:global(.solid-import-stepper-label) {
+.solid-import-stepper-label {
     min-width: 0;
     font-size: 13px;
     line-height: 1.2;
     font-weight: 600;
 }
 
-:global(.solid-import-panel-grid) {
+.solid-import-panel-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.85fr);
     gap: 14px;
     padding: 14px;
 }
 
-:global(.solid-import-panel-grid.is-single-column) {
+.solid-import-panel-grid.is-single-column {
     grid-template-columns: 1fr;
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-panel) {
+.solid-import-panel-grid.is-single-column .solid-import-panel {
     border: 0;
     border-radius: 0;
     background: transparent;
@@ -155,11 +155,11 @@
     padding: 0;
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-panel-main) {
+.solid-import-panel-grid.is-single-column .solid-import-panel-main {
     max-width: 100%;
 }
 
-:global(.solid-import-panel) {
+.solid-import-panel {
     border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
     border-radius: 14px;
     background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%), color-mix(in srgb, var(--card) 99%, black 1%));
@@ -167,15 +167,15 @@
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
-:global(.solid-import-panel.is-full-width) {
+.solid-import-panel.is-full-width {
     max-width: 100%;
 }
 
-:global(.solid-import-panel-side) {
+.solid-import-panel-side {
     background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--card)), color-mix(in srgb, var(--card) 96%, black 4%));
 }
 
-:global(.solid-import-section-title) {
+.solid-import-section-title {
     margin: 0 0 12px;
     font-size: 14px;
     line-height: 1.25;
@@ -184,13 +184,13 @@
     color: var(--foreground);
 }
 
-:global(.solid-import-section-copy) {
+.solid-import-section-copy {
     font-size: 12.5px;
     line-height: 1.6;
     color: color-mix(in srgb, var(--foreground) 76%, transparent);
 }
 
-:global(.solid-import-instruction-list) {
+.solid-import-instruction-list {
     margin: 0;
     padding-left: 22px;
     display: flex;
@@ -198,34 +198,34 @@
     gap: 16px;
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-list) {
+.solid-import-panel-grid.is-single-column .solid-import-instruction-list {
     padding-left: 0;
     gap: 0;
     list-style: none;
     counter-reset: solid-import-instruction;
 }
 
-:global(.solid-import-instruction-list li::marker) {
+.solid-import-instruction-list li::marker {
     font-size: 12px;
     font-weight: 700;
     color: color-mix(in srgb, var(--foreground) 74%, transparent);
 }
 
-:global(.solid-import-instruction-item) {
+.solid-import-instruction-item {
     line-height: 1.45;
 }
 
-:global(.solid-import-instruction-list > li) {
+.solid-import-instruction-list > li {
     padding-bottom: 14px;
     border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
 }
 
-:global(.solid-import-instruction-list > li:last-child) {
+.solid-import-instruction-list > li:last-child {
     padding-bottom: 0;
     border-bottom: 0;
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-list > li) {
+.solid-import-panel-grid.is-single-column .solid-import-instruction-list > li {
     display: grid;
     grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
     gap: 16px;
@@ -234,7 +234,7 @@
     counter-increment: solid-import-instruction;
 }
 
-:global(.solid-import-instruction-title) {
+.solid-import-instruction-title {
     margin: 0 0 6px;
     font-size: 13px;
     line-height: 1.4;
@@ -243,40 +243,40 @@
     color: color-mix(in srgb, var(--foreground) 96%, transparent);
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-title) {
+.solid-import-panel-grid.is-single-column .solid-import-instruction-title {
     margin: 0;
     padding-top: 3px;
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-title::before) {
+.solid-import-panel-grid.is-single-column .solid-import-instruction-title::before {
     content: counter(solid-import-instruction) ". ";
     color: color-mix(in srgb, var(--foreground) 66%, transparent);
     font-variant-numeric: tabular-nums;
 }
 
-:global(.solid-import-instruction-copy) {
+.solid-import-instruction-copy {
     font-size: 12px;
     line-height: 1.65;
     color: color-mix(in srgb, var(--foreground) 72%, transparent);
 }
 
-:global(.solid-import-template-actions) {
+.solid-import-template-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-template-actions) {
+.solid-import-panel-grid.is-single-column .solid-import-template-actions {
     justify-content: flex-start;
 }
 
-:global(.solid-import-inline-token-list) {
+.solid-import-inline-token-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }
 
-:global(.solid-import-inline-token) {
+.solid-import-inline-token {
     display: inline-flex;
     align-items: center;
     min-height: 26px;
@@ -290,11 +290,11 @@
     font-weight: 500;
 }
 
-:global(.solid-import-panel-grid.is-single-column .solid-import-inline-token-list) {
+.solid-import-panel-grid.is-single-column .solid-import-inline-token-list {
     gap: 9px;
 }
 
-:global(.solid-import-custom-instruction) {
+.solid-import-custom-instruction {
     margin: 0;
     padding: 10px 12px;
     border-radius: 10px;
@@ -305,11 +305,11 @@
     color: color-mix(in srgb, var(--foreground) 78%, transparent);
 }
 
-:global(.solid-import-custom-instruction + .solid-import-custom-instruction) {
+.solid-import-custom-instruction + .solid-import-custom-instruction {
     margin-top: 10px;
 }
 
-:global(.solid-import-dropzone-shell) {
+.solid-import-dropzone-shell {
     min-height: 300px;
     padding: 16px 18px;
     border: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--border));
@@ -326,11 +326,11 @@
     transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
 }
 
-:global(.solid-import-dropzone-shell:hover) {
+.solid-import-dropzone-shell:hover {
     border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
 }
 
-:global(.solid-import-dropzone-copy) {
+.solid-import-dropzone-copy {
     width: min(420px, 100%);
     display: flex;
     flex-direction: column;
@@ -338,7 +338,7 @@
     gap: 8px;
 }
 
-:global(.solid-import-dropzone-kicker) {
+.solid-import-dropzone-kicker {
     padding: 4px 10px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--primary) 10%, transparent);
@@ -348,12 +348,12 @@
     letter-spacing: 0.02em;
 }
 
-:global(.solid-import-dropzone-title) {
+.solid-import-dropzone-title {
     font-size: 15px;
     margin-bottom: 2px;
 }
 
-:global(.solid-import-dropzone-format-list) {
+.solid-import-dropzone-format-list {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -361,7 +361,7 @@
     justify-content: center;
 }
 
-:global(.solid-import-dropzone-format-pill) {
+.solid-import-dropzone-format-pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -375,7 +375,7 @@
     color: color-mix(in srgb, var(--foreground) 82%, transparent);
 }
 
-:global(.solid-import-file-card) {
+.solid-import-file-card {
     width: min(420px, 100%);
     margin-top: 4px;
     border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
@@ -388,14 +388,14 @@
     gap: 10px;
 }
 
-:global(.solid-import-file-card-main) {
+.solid-import-file-card-main {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
 }
 
-:global(.solid-import-file-icon) {
+.solid-import-file-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
@@ -407,11 +407,11 @@
     flex: 0 0 38px;
 }
 
-:global(.solid-import-file-meta) {
+.solid-import-file-meta {
     min-width: 0;
 }
 
-:global(.solid-import-file-name) {
+.solid-import-file-name {
     font-size: 12px;
     font-weight: 600;
     color: var(--foreground);
@@ -420,17 +420,17 @@
     text-overflow: ellipsis;
 }
 
-:global(.solid-import-file-caption) {
+.solid-import-file-caption {
     font-size: 11px;
     line-height: 1.4;
     color: color-mix(in srgb, var(--foreground) 68%, transparent);
 }
 
-:global(.solid-import-file-remove) {
+.solid-import-file-remove {
     flex: 0 0 auto;
 }
 
-:global(.solid-import-actions) {
+.solid-import-actions {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -438,15 +438,15 @@
     padding-top: 10px;
 }
 
-:global(.solid-import-actions-copy) {
+.solid-import-actions-copy {
     margin: 0;
     font-size: 11.5px;
     line-height: 1.5;
     color: color-mix(in srgb, var(--foreground) 62%, transparent);
 }
 
-:global(.solid-import-loading-state),
-:global(.solid-import-empty-state) {
+.solid-import-loading-state,
+.solid-import-empty-state {
     min-height: 100%;
     padding: 20px;
     display: flex;
@@ -457,29 +457,29 @@
     gap: 8px;
 }
 
-:global(.solid-import-empty-state h4) {
+.solid-import-empty-state h4 {
     margin: 0;
     font-size: 16px;
     line-height: 1.3;
     color: var(--foreground);
 }
 
-:global(.solid-import-empty-state p) {
+.solid-import-empty-state p {
     margin: 0;
     font-size: 12.5px;
     line-height: 1.6;
     color: color-mix(in srgb, var(--foreground) 70%, transparent);
 }
 
-:global(.solid-import-empty-state.solid-import-empty-state-danger h4) {
+.solid-import-empty-state.solid-import-empty-state-danger h4 {
     color: #b91c1c;
 }
 
-:global(.solid-import-mapping-shell) {
+.solid-import-mapping-shell {
     padding: 12px;
 }
 
-:global(.solid-import-mapping-intro) {
+.solid-import-mapping-intro {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
@@ -487,7 +487,7 @@
     margin-bottom: 10px;
 }
 
-:global(.solid-import-mapping-count) {
+.solid-import-mapping-count {
     min-height: 26px;
     padding: 0 10px;
     border-radius: 999px;
@@ -501,7 +501,7 @@
     color: color-mix(in srgb, var(--foreground) 78%, transparent);
 }
 
-:global(.solid-import-mapping-alert) {
+.solid-import-mapping-alert {
     margin-bottom: 12px;
     padding: 12px 14px;
     border: 1px solid color-mix(in srgb, #f59e0b 34%, var(--border));
@@ -516,7 +516,7 @@
     align-items: flex-start;
 }
 
-:global(.solid-import-mapping-alert-icon) {
+.solid-import-mapping-alert-icon {
     width: 30px;
     height: 30px;
     border-radius: 9px;
@@ -528,11 +528,11 @@
     flex-shrink: 0;
 }
 
-:global(.solid-import-mapping-alert-copy) {
+.solid-import-mapping-alert-copy {
     min-width: 0;
 }
 
-:global(.solid-import-mapping-alert-title) {
+.solid-import-mapping-alert-title {
     margin: 0;
     font-size: 12.5px;
     line-height: 1.35;
@@ -540,14 +540,14 @@
     color: color-mix(in srgb, var(--foreground) 96%, transparent);
 }
 
-:global(.solid-import-mapping-alert-text) {
+.solid-import-mapping-alert-text {
     margin: 3px 0 0;
     font-size: 12px;
     line-height: 1.6;
     color: color-mix(in srgb, var(--foreground) 74%, transparent);
 }
 
-:global(.solid-import-mapping-table) {
+.solid-import-mapping-table {
     border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
     border-radius: 12px;
     overflow: visible;
@@ -555,14 +555,14 @@
     position: relative;
 }
 
-:global(.solid-import-mapping-head) {
+.solid-import-mapping-head {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
 }
 
-:global(.solid-import-mapping-head-cell) {
+.solid-import-mapping-head-cell {
     padding: 11px 14px;
     font-size: 11px;
     font-weight: 700;
@@ -571,7 +571,7 @@
     color: color-mix(in srgb, var(--foreground) 62%, transparent);
 }
 
-:global(.solid-import-mapping-row) {
+.solid-import-mapping-row {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
     border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
@@ -579,23 +579,23 @@
     z-index: 0;
 }
 
-:global(.solid-import-mapping-row:focus-within) {
+.solid-import-mapping-row:focus-within {
     z-index: 4;
 }
 
-:global(.solid-import-mapping-source),
-:global(.solid-import-mapping-target) {
+.solid-import-mapping-source,
+.solid-import-mapping-target {
     padding: 12px 14px;
     min-width: 0;
 }
 
-:global(.solid-import-mapping-source-title) {
+.solid-import-mapping-source-title {
     font-size: 12px;
     font-weight: 600;
     color: var(--foreground);
 }
 
-:global(.solid-import-mapping-source-value) {
+.solid-import-mapping-source-value {
     margin-top: 4px;
     font-size: 11px;
     line-height: 1.45;
@@ -603,32 +603,32 @@
     word-break: break-word;
 }
 
-:global(.solid-import-mapping-target-controls) {
+.solid-import-mapping-target-controls {
     display: flex;
     align-items: center;
     gap: 8px;
     min-width: 0;
 }
 
-:global(.solid-import-mapping-target-controls > .solid-select-wrap) {
+.solid-import-mapping-target-controls > .solid-select-wrap {
     flex: 1 1 auto;
     min-width: 0;
 }
 
-:global(.solid-import-mapping-select .solid-select-trigger) {
+.solid-import-mapping-select .solid-select-trigger {
     width: 100%;
 }
 
-:global(.solid-import-mapping-select .solid-select-menu) {
+.solid-import-mapping-select .solid-select-menu {
     z-index: calc(var(--z-overlay) + 4);
 }
 
-:global(.solid-import-mapping-row:nth-child(-n + 1) .solid-import-mapping-select .solid-select-menu.solid-select-menu-top) {
+.solid-import-mapping-row:nth-child(-n + 1) .solid-import-mapping-select .solid-select-menu.solid-select-menu-top {
     top: calc(100% + 4px);
     bottom: auto;
 }
 
-:global(.solid-import-mapping-remove) {
+.solid-import-mapping-remove {
     width: 32px;
     height: 32px;
     border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
@@ -640,34 +640,34 @@
     justify-content: center;
 }
 
-:global(.solid-import-mapping-remove:hover) {
+.solid-import-mapping-remove:hover {
     background: color-mix(in srgb, #ef4444 10%, transparent);
     color: #dc2626;
 }
 
-:global(.solid-import-mapping-remove:focus-visible) {
+.solid-import-mapping-remove:focus-visible {
     outline: none;
     border-color: #dc2626;
 }
 
-:global(.solid-import-mapping-remove-placeholder) {
+.solid-import-mapping-remove-placeholder {
     width: 32px;
     height: 32px;
     flex: 0 0 32px;
 }
 
-:global(.solid-import-summary-card) {
+.solid-import-summary-card {
     border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
     border-radius: 14px;
     background: color-mix(in srgb, var(--card) 94%, white 6%);
     padding: 14px;
 }
 
-:global(.solid-import-summary-card-header) {
+.solid-import-summary-card-header {
     margin-bottom: 14px;
 }
 
-:global(.solid-import-status-pill) {
+.solid-import-status-pill {
     min-height: 32px;
     padding: 0 12px;
     border-radius: 999px;
@@ -678,27 +678,27 @@
     font-weight: 600;
 }
 
-:global(.solid-import-status-pill.is-success) {
+.solid-import-status-pill.is-success {
     background: color-mix(in srgb, #16a34a 12%, transparent);
     color: #15803d;
 }
 
-:global(.solid-import-status-pill.is-danger) {
+.solid-import-status-pill.is-danger {
     background: color-mix(in srgb, #ef4444 12%, transparent);
     color: #dc2626;
 }
 
-:global(.solid-import-status-pill.is-warning) {
+.solid-import-status-pill.is-warning {
     background: color-mix(in srgb, #f59e0b 14%, transparent);
     color: #b45309;
 }
 
-:global(.solid-import-summary-metrics) {
+.solid-import-summary-metrics {
     color: var(--foreground);
     font-weight: 600;
 }
 
-:global(.solid-import-summary-metric) {
+.solid-import-summary-metric {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -706,94 +706,94 @@
     font-size: 12px;
 }
 
-:global(.solid-import-summary-divider-wrap) {
+.solid-import-summary-divider-wrap {
     padding: 10px 0;
 }
 
-:global(.solid-import-summary-divider) {
+.solid-import-summary-divider {
     height: 1px;
     background: color-mix(in srgb, var(--border) 90%, transparent);
 }
 
-:global(.solid-import-confirm-dialog) {
+.solid-import-confirm-dialog {
     width: min(430px, calc(100vw - 1.5rem));
 }
 
-:global(.solid-import-confirm-dialog-body) {
+.solid-import-confirm-dialog-body {
     padding-top: 12px;
 }
 
-:global(.solid-import-confirm-dialog-body p) {
+.solid-import-confirm-dialog-body p {
     margin: 0;
     font-size: 12px;
     line-height: 1.55;
     color: color-mix(in srgb, var(--foreground) 74%, transparent);
 }
 
-:global(.solid-import-confirm-dialog-footer) {
+.solid-import-confirm-dialog-footer {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
 }
 
 @media (max-width: 960px) {
-    :global(.solid-import-panel-grid) {
+    .solid-import-panel-grid {
         grid-template-columns: 1fr;
     }
 
-    :global(.solid-import-mapping-head),
-    :global(.solid-import-mapping-row) {
+    .solid-import-mapping-head,
+    .solid-import-mapping-row {
         grid-template-columns: 1fr;
     }
 
-    :global(.solid-import-mapping-target) {
+    .solid-import-mapping-target {
         padding-top: 0;
     }
 }
 
 @media (max-width: 720px) {
-    .SolidImportContextWrapper {
+    .solid-import-solid-import-context-wrapper {
         min-height: 320px;
         max-height: none;
     }
 
-    :global(.solid-import-stepper) {
+    .solid-import-stepper {
         grid-template-columns: 1fr 1fr;
     }
 
-    :global(.solid-import-stepper-label) {
+    .solid-import-stepper-label {
         font-size: 12px;
     }
 
-    :global(.solid-import-actions) {
+    .solid-import-actions {
         flex-direction: column;
         align-items: stretch;
     }
 
-    :global(.solid-import-actions-copy) {
+    .solid-import-actions-copy {
         text-align: center;
     }
 
-    :global(.solid-import-mapping-intro) {
+    .solid-import-mapping-intro {
         flex-direction: column;
     }
 
-    :global(.solid-import-mapping-alert) {
+    .solid-import-mapping-alert {
         grid-template-columns: 1fr;
         gap: 10px;
     }
 
-    :global(.solid-import-mapping-alert-icon) {
+    .solid-import-mapping-alert-icon {
         width: 28px;
         height: 28px;
     }
 
-    :global(.solid-import-panel-grid.is-single-column .solid-import-instruction-list > li) {
+    .solid-import-panel-grid.is-single-column .solid-import-instruction-list > li {
         grid-template-columns: 1fr;
         gap: 8px;
     }
 
-    :global(.solid-import-panel-grid.is-single-column .solid-import-instruction-title) {
+    .solid-import-panel-grid.is-single-column .solid-import-instruction-title {
         padding-top: 0;
     }
 }
diff --git a/src/components/core/common/SolidLoaders/SolidCircularLoader.tsx b/src/components/core/common/SolidLoaders/SolidCircularLoader.tsx
index 3aa351e7..74777a31 100644
--- a/src/components/core/common/SolidLoaders/SolidCircularLoader.tsx
+++ b/src/components/core/common/SolidLoaders/SolidCircularLoader.tsx
@@ -1,7 +1,5 @@
-import styles from './SolidLoaders.module.css'
-
-export const SolidCircularLoader = () => {
+import './solid-circular-loader.css';export const SolidCircularLoader = () => {
     return (
-        <div className={styles.SolidCircularLoader}></div>
+        <div className={"solid-circular-loader"}></div>
     )
 }
\ No newline at end of file
diff --git a/src/components/core/common/SolidLoaders/SolidLoaders.module.css b/src/components/core/common/SolidLoaders/solid-circular-loader.css
similarity index 93%
rename from src/components/core/common/SolidLoaders/SolidLoaders.module.css
rename to src/components/core/common/SolidLoaders/solid-circular-loader.css
index aa1a7453..aa12cae6 100644
--- a/src/components/core/common/SolidLoaders/SolidLoaders.module.css
+++ b/src/components/core/common/SolidLoaders/solid-circular-loader.css
@@ -1,4 +1,4 @@
-.SolidCircularLoader {
+.solid-circular-loader {
     width: 48px;
     height: 48px;
     border: 5px solid var(--primary-color);
@@ -17,4 +17,4 @@
     100% {
         transform: rotate(360deg);
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/core/extension/solid-core/media/fileSize/MediaFileSizeWidget.tsx b/src/components/core/extension/solid-core/media/fileSize/MediaFileSizeWidget.tsx
index d35967b5..fc302035 100644
--- a/src/components/core/extension/solid-core/media/fileSize/MediaFileSizeWidget.tsx
+++ b/src/components/core/extension/solid-core/media/fileSize/MediaFileSizeWidget.tsx
@@ -1,5 +1,5 @@
 import { SolidFormFieldWidgetProps, SolidListFieldWidgetProps } from "../../../../../../types/solid-core";
-import styles from "../../../../form/fields/solidFields.module.css";
+import "../../../../form/fields/solid-fields.css";
 
 export const formatMediaFileSize = (value: unknown) => {
   const size = Number(value);
@@ -37,11 +37,11 @@ export const MediaFileSizeFormViewWidget = ({ formik, fieldContext }: SolidFormF
   const value = formik.values[fieldLayoutInfo.attrs.name];
 
   return (
-    <div className={styles.fieldViewWrapper}>
+    <div className={"solid-field-view-wrapper"}>
       {showFieldLabel !== false && (
-        <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+        <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
       )}
-      <p className={styles.fieldViewValue}>{formatMediaFileSize(value)}</p>
+      <p className={"solid-field-view-value"}>{formatMediaFileSize(value)}</p>
     </div>
   );
 };
diff --git a/src/components/core/form/SolidFormViewShimmerLoading.tsx b/src/components/core/form/SolidFormViewShimmerLoading.tsx
index 133a2e22..d20fa8fa 100644
--- a/src/components/core/form/SolidFormViewShimmerLoading.tsx
+++ b/src/components/core/form/SolidFormViewShimmerLoading.tsx
@@ -1,7 +1,5 @@
 
-import styles from './solidFormViewShimmerLoading.module.css'
-
-const SkeletonBlock = ({ width, height, className }: { width?: string; height?: string; className?: string }) => (
+import './solid-form-view-shimmer-loading.css';const SkeletonBlock = ({ width, height, className }: { width?: string; height?: string; className?: string }) => (
     <div className={`solid-skeleton ${className ?? ""}`} style={{ width, height }} />
 );
 
@@ -24,7 +22,7 @@ export const SolidFormViewShimmerLoading = () => {
                     <SkeletonBlock width="30%" height="2rem" />
                 </div>
             </div>
-            <div className={styles.solidFormViewShimmerLoadingWrapper}>
+            <div className={"solid-form-view-shimmer-loading-wrapper"}>
                 <div className='p-4'>
                     <div className='flex flex-wrap -mx-2 -mt-2'>
                         <div className='field w-1/2 px-2 pt-2'>
diff --git a/src/components/core/form/fields/SolidBooleanField.tsx b/src/components/core/form/fields/SolidBooleanField.tsx
index b44829f6..cf12143b 100644
--- a/src/components/core/form/fields/SolidBooleanField.tsx
+++ b/src/components/core/form/fields/SolidBooleanField.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import * as Yup from "yup";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import {
@@ -202,9 +202,9 @@ export const DefaultBooleanFormEditWidget = ({ formik, fieldContext }: SolidForm
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -230,7 +230,7 @@ export const DefaultBooleanFormEditWidget = ({ formik, fieldContext }: SolidForm
                 }}
             />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
@@ -268,9 +268,9 @@ export const SolidBooleanCheckboxStyleFormEditWidget = ({ formik, fieldContext }
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel !== false && (
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -305,7 +305,7 @@ export const SolidBooleanCheckboxStyleFormEditWidget = ({ formik, fieldContext }
                 }
             </div>
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
@@ -365,9 +365,9 @@ export const SolidBooleanSwitchStyleFormEditWidget = ({ formik, fieldContext }:
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel !== false && (
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -396,7 +396,7 @@ export const SolidBooleanSwitchStyleFormEditWidget = ({ formik, fieldContext }:
                 <span className="ml-2">{fieldLabel || "Yes"}</span>
             </div>
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
@@ -423,11 +423,11 @@ export const DefaultBooleanFormViewWidget = ({ formik, fieldContext }: SolidForm
 
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>
+            <p className={"solid-field-view-value"}>
                 {(() => {
                     const value = formik.values[fieldLayoutInfo.attrs.name];
                     if (value === true) return trueLabel;
diff --git a/src/components/core/form/fields/SolidComputedField.tsx b/src/components/core/form/fields/SolidComputedField.tsx
index 193c8cbf..47646b34 100644
--- a/src/components/core/form/fields/SolidComputedField.tsx
+++ b/src/components/core/form/fields/SolidComputedField.tsx
@@ -1,6 +1,6 @@
 
 import * as Yup from 'yup';
-import styles from './solidFields.module.css';
+import './solid-fields.css';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
@@ -102,20 +102,20 @@ export const DefaultComputedFormWidget = ({ formik, fieldContext }: SolidFormFie
     if (viewMode === 'view') {
         // View mode: display as plain text (same as DefaultShortTextFormViewWidget)
         return (
-            <div className={styles.fieldViewWrapper}>
+            <div className={"solid-field-view-wrapper"}>
                 {showFieldLabel !== false && (
-                    <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                    <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
                 )}
-                <p className={styles.fieldViewValue}>{value && typeof value === 'string' ? value : ''}</p>
+                <p className={"solid-field-view-value"}>{value && typeof value === 'string' ? value : ''}</p>
             </div>
         );
     }
 
     // Edit mode: read-only input to make it clear this is a server-computed value
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     <SolidFieldTooltip fieldContext={fieldContext} />
                 </label>
@@ -127,7 +127,7 @@ export const DefaultComputedFormWidget = ({ formik, fieldContext }: SolidFormFie
                 value={value || ''}
                 readOnly
                 disabled
-                className={styles.fieldInput}
+                className={"solid-field-input"}
             />
         </div>
     );
diff --git a/src/components/core/form/fields/SolidDateField.tsx b/src/components/core/form/fields/SolidDateField.tsx
index dd0a363a..f118e7cb 100644
--- a/src/components/core/form/fields/SolidDateField.tsx
+++ b/src/components/core/form/fields/SolidDateField.tsx
@@ -10,7 +10,7 @@ import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 
 const toDateValue = (value: any) => {
     if (!value) return null;
@@ -140,9 +140,9 @@ export const DefaultDateFormEditWidget = ({ formik, fieldContext }: SolidFormFie
 
     return (
         <div className="relative">
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                     </label>
@@ -178,13 +178,13 @@ export const DefaultDateFormViewWidget = ({ formik, fieldContext, }: SolidFormFi
 
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>
+                <p className={`${"solid-field-view-label"} form-field-label`}>
                     {fieldLabel}
                 </p>
             )}
-            <p className={styles.fieldViewValue}>
+            <p className={"solid-field-view-value"}>
                 <DateFieldViewComponent value={rawValue} format={format} fallback="-"></DateFieldViewComponent>
             </p>
         </div>
diff --git a/src/components/core/form/fields/SolidDateTimeField.tsx b/src/components/core/form/fields/SolidDateTimeField.tsx
index bbf8687d..cd5b062a 100644
--- a/src/components/core/form/fields/SolidDateTimeField.tsx
+++ b/src/components/core/form/fields/SolidDateTimeField.tsx
@@ -11,7 +11,7 @@ import { SolidFieldTooltip } from "../../../../components/common/SolidFieldToolt
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';
 import dayjs from "dayjs";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 import utc from 'dayjs/plugin/utc';
 
 dayjs.extend(utc);
@@ -140,9 +140,9 @@ export const DefaultDateTimeFormEditWidget = ({ formik, fieldContext }: SolidFor
 
     return (
         <div className="relative">
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
@@ -185,13 +185,13 @@ export const DefaultDateTimeFormViewWidget = ({
     const format = fieldLayoutInfo.attrs?.format as string | undefined;
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>
+                <p className={`${"solid-field-view-label"} form-field-label`}>
                     {fieldLabel}
                 </p>
             )}
-            <p className={styles.fieldViewValue}>
+            <p className={"solid-field-view-value"}>
                 <DateFieldViewComponent value={rawValue} format={format} showTime={true} fallback="-"></DateFieldViewComponent>
             </p>
         </div>
diff --git a/src/components/core/form/fields/SolidDecimalField.tsx b/src/components/core/form/fields/SolidDecimalField.tsx
index 62a4e3f2..ecf066fb 100644
--- a/src/components/core/form/fields/SolidDecimalField.tsx
+++ b/src/components/core/form/fields/SolidDecimalField.tsx
@@ -1,6 +1,6 @@
 
 import * as Yup from "yup";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
@@ -112,11 +112,11 @@ export const DefaultDecimalFormViewWidget = ({ formik, fieldContext }: SolidForm
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const value = formik.values[fieldLayoutInfo.attrs.name];
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>{value != null && typeof value !== "object" ? value : ''}</p>
+            <p className={"solid-field-view-value"}>{value != null && typeof value !== "object" ? value : ''}</p>
         </div>
     );
 }
@@ -139,15 +139,15 @@ export const DefaultDecimalFormEditWidget = ({ formik, fieldContext }: SolidForm
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
                 </label>
             }
-            <div className={styles.fieldNumberWrapper}>
+            <div className={"solid-field-number-wrapper"}>
                 <SolidNumberInput
                     readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                     disabled={formDisabled || fieldDisabled}
@@ -170,7 +170,7 @@ export const DefaultDecimalFormEditWidget = ({ formik, fieldContext }: SolidForm
                 />
             </div>
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
diff --git a/src/components/core/form/fields/SolidEmailField.tsx b/src/components/core/form/fields/SolidEmailField.tsx
index dc4f626f..a948aa27 100644
--- a/src/components/core/form/fields/SolidEmailField.tsx
+++ b/src/components/core/form/fields/SolidEmailField.tsx
@@ -1,5 +1,5 @@
 
-import styles from './solidFields.module.css';
+import './solid-fields.css';
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
@@ -143,9 +143,9 @@ export const DefaultEmailFormEditWidget = ({ formik, fieldContext }: SolidFormFi
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -161,11 +161,11 @@ export const DefaultEmailFormEditWidget = ({ formik, fieldContext }: SolidFormFi
                 onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
                 onBlur={(e) => fieldContext.onBlur(e, 'onFieldBlur')}
                 value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                className={styles.fieldInput}
+                className={"solid-field-input"}
                 autoComplete={autoComplete}
             />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
diff --git a/src/components/core/form/fields/SolidIntegerField.tsx b/src/components/core/form/fields/SolidIntegerField.tsx
index dc808c5b..d9f43ecc 100644
--- a/src/components/core/form/fields/SolidIntegerField.tsx
+++ b/src/components/core/form/fields/SolidIntegerField.tsx
@@ -3,7 +3,7 @@ import * as Yup from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 import { useState } from "react";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { Range } from "react-range";
@@ -121,11 +121,11 @@ export const DefaultIntegerFormViewWidget = ({ formik, fieldContext }: SolidForm
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const value = formik.values[fieldLayoutInfo.attrs.name];
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>{value != null && typeof value !== "object" ? value : ''}</p>
+            <p className={"solid-field-view-value"}>{value != null && typeof value !== "object" ? value : ''}</p>
         </div>
     );
 }
@@ -153,15 +153,15 @@ export const DefaultIntegerFormEditWidget = ({ formik, fieldContext }: SolidForm
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
                 </label>
             }
-            <div className={styles.fieldNumberWrapper}>
+            <div className={"solid-field-number-wrapper"}>
                 <SolidNumberInput
                     readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                     disabled={formDisabled || fieldDisabled}
@@ -185,7 +185,7 @@ export const DefaultIntegerFormEditWidget = ({ formik, fieldContext }: SolidForm
                 />
             </div>
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
diff --git a/src/components/core/form/fields/SolidJsonField.tsx b/src/components/core/form/fields/SolidJsonField.tsx
index 07abb849..4a678609 100644
--- a/src/components/core/form/fields/SolidJsonField.tsx
+++ b/src/components/core/form/fields/SolidJsonField.tsx
@@ -7,7 +7,7 @@ import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { SolidCodeEditor } from "../../../shad-cn-ui";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 export class SolidJsonField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -112,9 +112,9 @@ export const DefaultJsonFormEditWidget = ({ formik, fieldContext }: SolidFormFie
 
     return (
         <div className="relative">
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
@@ -181,9 +181,9 @@ export const DefaultJsonFormViewWidget = ({ formik, fieldContext }: SolidFormFie
     return (
 
 
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel != false &&
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             }
             <SolidCodeEditor
                 value={code}
diff --git a/src/components/core/form/fields/SolidLongTextField.tsx b/src/components/core/form/fields/SolidLongTextField.tsx
index 8bb82b00..1489a6c1 100644
--- a/src/components/core/form/fields/SolidLongTextField.tsx
+++ b/src/components/core/form/fields/SolidLongTextField.tsx
@@ -1,6 +1,6 @@
 
 import * as Yup from 'yup';
-import styles from './solidFields.module.css';
+import './solid-fields.css';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { useEffect, useRef, useState } from "react";
 import { getExtensionComponent } from "../../../../helpers/registry";
@@ -133,9 +133,9 @@ export const DefaultLongTextFormEditWidget = ({ formik, fieldContext }: SolidFor
     const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={styles.fieldLabel}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={"solid-field-label"}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -149,10 +149,10 @@ export const DefaultLongTextFormEditWidget = ({ formik, fieldContext }: SolidFor
                 onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => fieldContext.onChange(e, 'onFieldChange')}
                 value={formik.values[fieldLayoutInfo.attrs.name] || ''}
                 rows={5}
-                className={styles.fieldTextarea}
+                className={"solid-field-textarea"}
             />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
@@ -204,7 +204,7 @@ export const DynamicJsonEditorFormViewWidget = ({ formik, fieldContext }: SolidF
         }
         if (meta.type === "longText") {
             return (
-                <SolidTextarea value={value} rows={10} cols={100} readOnly className={styles.fieldTextarea} />
+                <SolidTextarea value={value} rows={10} cols={100} readOnly className={"solid-field-textarea"} />
             );
         }
         if (meta.type === "date" || meta.type === "datetime") {
@@ -236,7 +236,7 @@ export const DynamicJsonEditorFormViewWidget = ({ formik, fieldContext }: SolidF
     return (
         <div className="mt-4">
             {fieldLayoutInfo?.attrs?.showLabel !== false && (
-                <label className={`${styles.fieldLabel} form-field-label mb-10`}>
+                <label className={`${"solid-field-label"} form-field-label mb-10`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -369,7 +369,7 @@ export const DynamicJsonEditorFormEditWidget = ({ formik, fieldContext }: SolidF
                     value={value}
                     rows={10}
                     cols={100}
-                    className={styles.fieldTextarea}
+                    className={"solid-field-textarea"}
                 />
             );
         }
@@ -404,7 +404,7 @@ export const DynamicJsonEditorFormEditWidget = ({ formik, fieldContext }: SolidF
     return (
         <div className="mt-4">
             {fieldLayoutInfo?.attrs?.showLabel !== false && (
-                <label className={`${styles.fieldLabel} form-field-label mb-10`}>
+                <label className={`${"solid-field-label"} form-field-label mb-10`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -484,7 +484,7 @@ export const CodeEditorFormEditWidget = ({ formik, fieldContext }: SolidFormFiel
     return (
         <div className="mt-4">
             {fieldLayoutInfo?.attrs?.showLabel !== false && (
-                <label className={`${styles.fieldLabel} form-field-label mb-10`}>
+                <label className={`${"solid-field-label"} form-field-label mb-10`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
diff --git a/src/components/core/form/fields/SolidMediaMultipleField.tsx b/src/components/core/form/fields/SolidMediaMultipleField.tsx
index 3519a5a3..2cd55128 100644
--- a/src/components/core/form/fields/SolidMediaMultipleField.tsx
+++ b/src/components/core/form/fields/SolidMediaMultipleField.tsx
@@ -29,7 +29,7 @@ import { SolidFormFieldWidgetProps, SolidMediaFormFieldWidgetProps } from "../..
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { showToast } from "../../../../redux/features/toastSlice";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 import { SolidIcon } from "../../../shad-cn-ui";
 import { buildMediaFieldKey, getPersistedMediaId } from "./mediaFieldUtils";
 
@@ -379,9 +379,9 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
 
     return (
         <div style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
-            <div className={`${styles.fieldWrapper} relative`}>
+            <div className={`${"solid-field-wrapper"} relative`}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
@@ -411,20 +411,20 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                 }
             </div>
             {fileDetails.length > 0 &&
-                <div className={`${styles.mediaAttachmentCard} mt-4`}>
-                    <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
+                <div className={`${"solid-field-media-attachment-card"} mt-4`}>
+                    <div className={`${"solid-field-media-attachment-row"} flex items-center md:gap-2`}>
                         <FileReaderExt fileDetails={fileDetails[0]} />
-                        <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                        <div className={`${"solid-field-media-attachment-meta"} w-full`}>
                             <div className="flex items-start justify-between gap-4">
                                 <button
                                     type="button"
-                                    className={styles.mediaAttachmentName}
+                                    className={"solid-field-media-attachment-name"}
                                     onClick={() => handleFileView(fileDetails[0])}
                                     title={fileDetails[0].name}
                                 >
                                     {fileDetails[0].name}
                                 </button>
-                                <div className={`${styles.mediaAttachmentActions} flex items-center gap-2`}>
+                                <div className={`${"solid-field-media-attachment-actions"} flex items-center gap-2`}>
                                         <button
                                             type="button"
                                             className="solid-file-icon-btn"
@@ -440,7 +440,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                                         </button>
                                     <button
                                         type="button"
-                                        className="solid-file-icon-btn is-danger"
+                                        className="solid-file-icon-btn solid-field-danger"
                                         disabled={isFieldDisabled || isFieldReadonly}
                                         aria-label="Remove file"
                                         onClick={() => confirmDeleteFile(fileDetails[0].fileKey)}
@@ -449,7 +449,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                                     </button>
                                 </div>
                             </div>
-                            <div className={styles.mediaAttachmentSize}>
+                            <div className={"solid-field-media-attachment-size"}>
                                 {formatFileSize(fileDetails[0].size)}
                             </div>
                         </div>
@@ -485,20 +485,20 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                         const fileId = file.fileKey;
                         return (
                             <div key={fileId} className={index === fileDetails.length - 1 ? "" : "mb-3"}>
-                                <div className={styles.mediaAttachmentCard}>
-                                    <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
+                                <div className={"solid-field-media-attachment-card"}>
+                                    <div className={`${"solid-field-media-attachment-row"} flex items-center md:gap-2`}>
                                         <FileReaderExt fileDetails={file} />
-                                        <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                                        <div className={`${"solid-field-media-attachment-meta"} w-full`}>
                                             <div className="flex items-start justify-between gap-4">
                                                 <button
                                                     type="button"
-                                                    className={styles.mediaAttachmentName}
+                                                    className={"solid-field-media-attachment-name"}
                                                     onClick={() => handleFileView(file)}
                                                     title={file.name}
                                                 >
                                                     {file.name}
                                                 </button>
-                                                <div className={`${styles.mediaAttachmentActions} flex items-center gap-2`}>
+                                                <div className={`${"solid-field-media-attachment-actions"} flex items-center gap-2`}>
                                                     <button
                                                         type="button"
                                                         className="solid-file-icon-btn"
@@ -514,7 +514,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                                                     </button>
                                                     <button
                                                         type="button"
-                                                        className="solid-file-icon-btn is-danger"
+                                                        className="solid-file-icon-btn solid-field-danger"
                                                         disabled={isFieldDisabled || isFieldReadonly}
                                                         aria-label="Remove file"
                                                         onClick={() => confirmDeleteFile(fileId)}
@@ -523,7 +523,7 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                                                     </button>
                                                 </div>
                                             </div>
-                                            <div className={styles.mediaAttachmentSize}>
+                                            <div className={"solid-field-media-attachment-size"}>
                                                 {formatFileSize(file.size)}
                                             </div>
                                         </div>
@@ -645,20 +645,20 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
     }
 
     const renderMediaFileCard = (file: { name: string; type: string; size: number; id: number | string; fileUrl: string }, className = "") => (
-        <div className={`${styles.mediaAttachmentCard} ${className}`.trim()}>
-            <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
+        <div className={`${"solid-field-media-attachment-card"} ${className}`.trim()}>
+            <div className={`${"solid-field-media-attachment-row"} flex items-center md:gap-2`}>
                 <FileReaderExt fileDetails={file} />
-                <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                <div className={`${"solid-field-media-attachment-meta"} w-full`}>
                     <div className="flex items-start justify-between gap-4">
                         <button
                             type="button"
-                            className={styles.mediaAttachmentName}
+                            className={"solid-field-media-attachment-name"}
                             onClick={() => handleFileView(file)}
                             title={file.name}
                         >
                             {file.name}
                         </button>
-                        <div className={`${styles.mediaAttachmentActions} flex items-center md:gap-2`}>
+                        <div className={`${"solid-field-media-attachment-actions"} flex items-center md:gap-2`}>
                             <button
                                 type="button"
                                 className="solid-file-icon-btn"
@@ -673,7 +673,7 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
                             </button>
                         </div>
                     </div>
-                    <div className={styles.mediaAttachmentSize}>
+                    <div className={"solid-field-media-attachment-size"}>
                         {formatFileSize(file.size)}
                     </div>
                 </div>
@@ -682,15 +682,15 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
     );
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel != false &&
-                <p className={`${styles.fieldViewLabel} form-field-label`}>
+                <p className={`${"solid-field-view-label"} form-field-label`}>
                     {fieldLabel}
                     <SolidFieldTooltip fieldContext={fieldContext} />
                 </p>
             }
             {fileDetails.length > 0 &&
-                renderMediaFileCard(fileDetails[0], styles.mediaAttachmentCardView)
+                renderMediaFileCard(fileDetails[0], "solid-field-media-attachment-card-view")
             }
 
             {fileDetails.length > 1 &&
diff --git a/src/components/core/form/fields/SolidMediaSingleField.tsx b/src/components/core/form/fields/SolidMediaSingleField.tsx
index d2077080..f19c247b 100644
--- a/src/components/core/form/fields/SolidMediaSingleField.tsx
+++ b/src/components/core/form/fields/SolidMediaSingleField.tsx
@@ -28,7 +28,7 @@ import { SolidMediaFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { showToast } from "../../../../redux/features/toastSlice";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 import { SolidIcon } from "../../../shad-cn-ui";
 import { getPersistedMediaId } from "./mediaFieldUtils";
 
@@ -390,9 +390,9 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
 
     return (
         <div style={(isFieldDisabled === true || isFieldReadonly === true) ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
-            <div className={`${styles.fieldWrapper} relative`}>
+            <div className={`${"solid-field-wrapper"} relative`}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
@@ -421,20 +421,20 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
                     <SolidMessage severity="error" text={fileSizeError?.toString()} />
                 }
                 {fileDetails && (
-                    <div className={`${styles.mediaAttachmentCard} mt-4`}>
-                        <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
+                    <div className={`${"solid-field-media-attachment-card"} mt-4`}>
+                        <div className={`${"solid-field-media-attachment-row"} flex items-center md:gap-2`}>
                             <FileReaderExt fileDetails={fileDetails} />
-                            <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                            <div className={`${"solid-field-media-attachment-meta"} w-full`}>
                                 <div className="flex items-start justify-between gap-4">
                                     <button
                                         type="button"
-                                        className={styles.mediaAttachmentName}
+                                        className={"solid-field-media-attachment-name"}
                                         onClick={() => handleFileView(fileDetails)}
                                         title={fileDetails.name}
                                     >
                                         {fileDetails.name}
                                     </button>
-                                    <div className={`${styles.mediaAttachmentActions} flex items-center gap-2`}>
+                                    <div className={`${"solid-field-media-attachment-actions"} flex items-center gap-2`}>
                                         <button
                                             type="button"
                                             className="solid-file-icon-btn"
@@ -450,7 +450,7 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
                                         </button>
                                         <button
                                             type="button"
-                                            className="solid-file-icon-btn is-danger"
+                                            className="solid-file-icon-btn solid-field-danger"
                                             disabled={isFieldDisabled || isFieldReadonly}
                                             aria-label="Remove file"
                                             onClick={() => setDeleteImageDialogVisible(true)}
@@ -459,7 +459,7 @@ export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLigh
                                         </button>
                                     </div>
                                 </div>
-                                <div className={styles.mediaAttachmentSize}>
+                                <div className={"solid-field-media-attachment-size"}>
                                     {fileDetails && formatFileSize(fileDetails.fileSize)}
                                 </div>
                             </div>
@@ -588,28 +588,28 @@ export const DefaultMediaSingleFormViewWidget = ({ formik, fieldContext, setLigh
     }
 
     return (
-        <div className={`${styles.fieldViewWrapper} relative`}>
+        <div className={`${"solid-field-view-wrapper"} relative`}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}
                     <SolidFieldTooltip fieldContext={fieldContext} />
                 </label>
             }
 
             {fileDetails && (
-                <div className={`${styles.mediaAttachmentCard} ${styles.mediaAttachmentCardView} mt-4`}>
-                    <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
+                <div className={`${"solid-field-media-attachment-card"} ${"solid-field-media-attachment-card-view"} mt-4`}>
+                    <div className={`${"solid-field-media-attachment-row"} flex items-center md:gap-2`}>
                         <FileReaderExt fileDetails={fileDetails} />
-                        <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                        <div className={`${"solid-field-media-attachment-meta"} w-full`}>
                             <div className="flex items-start justify-between gap-4">
                                 <button
                                     type="button"
-                                    className={styles.mediaAttachmentName}
+                                    className={"solid-field-media-attachment-name"}
                                     onClick={() => handleFileView(fileDetails)}
                                     title={fileDetails.name}
                                 >
                                     {fileDetails.name}
                                 </button>
-                                <div className={`${styles.mediaAttachmentActions} flex items-center md:gap-2`}>
+                                <div className={`${"solid-field-media-attachment-actions"} flex items-center md:gap-2`}>
                                     <button
                                         type="button"
                                         className="solid-file-icon-btn"
@@ -624,7 +624,7 @@ export const DefaultMediaSingleFormViewWidget = ({ formik, fieldContext, setLigh
                                     </button>
                                 </div>
                             </div>
-                            <div className={styles.mediaAttachmentSize}>
+                            <div className={"solid-field-media-attachment-size"}>
                                 {fileDetails && formatFileSize(fileDetails.fileSize)}
                             </div>
                         </div>
diff --git a/src/components/core/form/fields/SolidPasswordField.tsx b/src/components/core/form/fields/SolidPasswordField.tsx
index 6df41bbf..69fc4d32 100644
--- a/src/components/core/form/fields/SolidPasswordField.tsx
+++ b/src/components/core/form/fields/SolidPasswordField.tsx
@@ -1,5 +1,5 @@
 
-import styles from './solidFields.module.css';
+import './solid-fields.css';
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { SolidButton } from "../../../shad-cn-ui/SolidButton";
@@ -173,12 +173,12 @@ export const DefaultPasswordFormViewWidget = ({ formik, fieldContext }: SolidFor
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const [isText, setIsText] = useState(false)
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
             <div className="flex items-center gap-4">
-                <p className={styles.fieldViewValue}>
+                <p className={"solid-field-view-value"}>
                     {isText ? formik.values[fieldLayoutInfo.attrs.name] : "••••••••"}
                 </p>
                 <SolidIcon
@@ -212,9 +212,9 @@ export const DefaultPasswordFormCreateWidget = ({ formik, fieldContext }: SolidF
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
     return (
         <div>
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500">*</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
@@ -233,12 +233,12 @@ export const DefaultPasswordFormCreateWidget = ({ formik, fieldContext }: SolidF
                     className="w-full"
                 />
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                    <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
                 )}
             </div>
 
-            <div className={styles.fieldWrapper}>
-                <label htmlFor={`${fieldLayoutInfo.attrs.name}Confirm`} className={`${styles.fieldLabel} form-field-label`}>
+            <div className={"solid-field-wrapper"}>
+                <label htmlFor={`${fieldLayoutInfo.attrs.name}Confirm`} className={`${"solid-field-label"} form-field-label`}>
                     Confirm {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                 </label>
@@ -271,7 +271,7 @@ export const DefaultPasswordFormCreateWidget = ({ formik, fieldContext }: SolidF
                     className="w-full"
                 />
                 {((formik.touched[`${fieldLayoutInfo.attrs.name}Confirm`] || formik.submitCount > 0) && formik.errors[`${fieldLayoutInfo.attrs.name}Confirm`]) && (
-                    <p className={styles.fieldError}>{formik?.errors[`${fieldLayoutInfo.attrs.name}Confirm`]?.toString()}</p>
+                    <p className={"solid-field-error"}>{formik?.errors[`${fieldLayoutInfo.attrs.name}Confirm`]?.toString()}</p>
                 )}
             </div>
         </div>
@@ -340,9 +340,9 @@ export const DefaultPasswordFormEditWidget = ({ formik, fieldContext }: SolidFor
     });
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel !== false && (
-                <label htmlFor={fieldName} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldName} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -370,8 +370,8 @@ export const DefaultPasswordFormEditWidget = ({ formik, fieldContext }: SolidFor
                 </SolidDialogHeader>
                 <SolidDialogBody>
                     <form onSubmit={modalFormik.handleSubmit} className="solid-fluid">
-                        <div className={styles.fieldWrapper}>
-                            <label htmlFor={fieldName} className={`${styles.fieldLabel} form-field-label`}>New {fieldLabel}</label>
+                        <div className={"solid-field-wrapper"}>
+                            <label htmlFor={fieldName} className={`${"solid-field-label"} form-field-label`}>New {fieldLabel}</label>
                             <SolidPasswordInput
                                 id={fieldName}
                                 name={fieldName}
@@ -383,12 +383,12 @@ export const DefaultPasswordFormEditWidget = ({ formik, fieldContext }: SolidFor
                                 className="w-full"
                             />
                             {isFormFieldValid(modalFormik, fieldName) && (
-                                <p className={styles.fieldError}>{modalFormik.errors[fieldName]?.toString()}</p>
+                                <p className={"solid-field-error"}>{modalFormik.errors[fieldName]?.toString()}</p>
                             )}
                         </div>
 
-                        <div className={styles.fieldWrapper}>
-                            <label htmlFor={confirmFieldName} className={`${styles.fieldLabel} form-field-label`}>Confirm {fieldLabel}</label>
+                        <div className={"solid-field-wrapper"}>
+                            <label htmlFor={confirmFieldName} className={`${"solid-field-label"} form-field-label`}>Confirm {fieldLabel}</label>
                             <SolidPasswordInput
                                 id={confirmFieldName}
                                 name={confirmFieldName}
@@ -400,7 +400,7 @@ export const DefaultPasswordFormEditWidget = ({ formik, fieldContext }: SolidFor
                                 className="w-full"
                             />
                             {isFormFieldValid(modalFormik, confirmFieldName) && (
-                                <p className={styles.fieldError}>{modalFormik.errors[confirmFieldName]?.toString()}</p>
+                                <p className={"solid-field-error"}>{modalFormik.errors[confirmFieldName]?.toString()}</p>
                             )}
                         </div>
 
diff --git a/src/components/core/form/fields/SolidRichTextField.tsx b/src/components/core/form/fields/SolidRichTextField.tsx
index ca42e5e1..bdb6a5ac 100644
--- a/src/components/core/form/fields/SolidRichTextField.tsx
+++ b/src/components/core/form/fields/SolidRichTextField.tsx
@@ -9,7 +9,7 @@ import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 
 const normalizeQuillRichTextHtml = (html: string): string => {
     if (!html || typeof document === "undefined") {
@@ -194,9 +194,9 @@ export const DefaultRichTextFormEditWidget = ({ formik, fieldContext }: SolidFor
 
 
     return (
-        <div className={`${styles.fieldWrapper} relative`}>
+        <div className={`${"solid-field-wrapper"} relative`}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -222,7 +222,7 @@ export const DefaultRichTextFormEditWidget = ({ formik, fieldContext }: SolidFor
                 style={{ minHeight: 180 }}
             />
             {isFormFieldValid(formik, fieldName) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldName]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldName]?.toString()}</p>
             )}
         </div>
     );
@@ -234,9 +234,9 @@ export const DefaultRichTextFormViewWidget = ({ formik, fieldContext }: SolidFor
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel != false &&
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             }
             <div
                 className="solid-custom-editor solid-custom-editor-view"
diff --git a/src/components/core/form/fields/SolidSelectionDynamicField.tsx b/src/components/core/form/fields/SolidSelectionDynamicField.tsx
index 0cf5bd48..20ba3123 100644
--- a/src/components/core/form/fields/SolidSelectionDynamicField.tsx
+++ b/src/components/core/form/fields/SolidSelectionDynamicField.tsx
@@ -11,7 +11,7 @@ import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { formikValuestoQueryString } from "../../../../helpers/helpers";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 
 type AutoCompleteCompleteEvent = { query: string };
 
@@ -260,9 +260,9 @@ export const DefaultSelectionDynamicFormEditWidget = ({ formik, fieldContext }:
 
 
     return (
-        <div className={`${styles.fieldWrapper} ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? styles.fieldInvalid : ""}`}>
+        <div className={`${"solid-field-wrapper"} ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? "solid-field-invalid" : ""}`}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {isRequired && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -271,7 +271,7 @@ export const DefaultSelectionDynamicFormEditWidget = ({ formik, fieldContext }:
             <SolidAutocomplete
                 multiple={isMultiSelect}
                 field="label"
-                className={`solid-standard-autocomplete ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? styles.fieldInvalidControl : ""}`}
+                className={`solid-standard-autocomplete ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? "solid-field-invalid-control" : ""}`}
                 value={formik.values[fieldLayoutInfo.attrs.name] || (isMultiSelect ? [] : null)}
                 dropdown
                 suggestions={selectionDynamicItems}
@@ -290,7 +290,7 @@ export const DefaultSelectionDynamicFormEditWidget = ({ formik, fieldContext }:
                 // }}
             />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>
+                <p className={"solid-field-error"}>
                     {typeof formik.errors[fieldLayoutInfo?.attrs?.name] === 'object'
                         ? formik.errors[fieldLayoutInfo?.attrs?.name]?.value?.toString()
                         : formik.errors[fieldLayoutInfo?.attrs?.name]?.toString()}
@@ -334,11 +334,11 @@ export const DefaultSelectionDynamicFormViewWidget = ({ formik, fieldContext }:
     }
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>
+            <p className={"solid-field-view-value"}>
                 {isMultiSelect
                     ? (values.length > 0 ? values.join(', ') : 'No selection')
                     : (() => {
diff --git a/src/components/core/form/fields/SolidSelectionStaticField.tsx b/src/components/core/form/fields/SolidSelectionStaticField.tsx
index 15a5d43d..236b9295 100644
--- a/src/components/core/form/fields/SolidSelectionStaticField.tsx
+++ b/src/components/core/form/fields/SolidSelectionStaticField.tsx
@@ -3,7 +3,7 @@ import { SolidAutocomplete } from "../../../shad-cn-ui/SolidAutocomplete";
 import { SolidRadioGroup } from "../../../shad-cn-ui/SolidRadioGroup";
 import { SolidSegmentedControl } from "../../../shad-cn-ui/SolidSegmentedControl";
 import { buildSyntheticChangeEvent } from "./fieldEventUtils";
-import styles from './solidFields.module.css';
+import './solid-fields.css';
 import { useMemo, useState } from "react";
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
@@ -216,9 +216,9 @@ export const DefaultSelectionStaticAutocompleteFormEditWidget = ({ formik, field
     const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
     return (
-        <div className={`${styles.fieldWrapper} ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? styles.fieldInvalid : ""}`}>
+        <div className={`${"solid-field-wrapper"} ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? "solid-field-invalid" : ""}`}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -228,7 +228,7 @@ export const DefaultSelectionStaticAutocompleteFormEditWidget = ({ formik, field
                 multiple={isMultiSelect}
                 dropdown
                 field="label"
-                className={`solid-standard-autocomplete ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? styles.fieldInvalidControl : ""}`}
+                className={`solid-standard-autocomplete ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? "solid-field-invalid-control" : ""}`}
                 value={formik.values[fieldLayoutInfo.attrs.name] || (isMultiSelect ? [] : null)}
                 suggestions={selectionStaticItems}
                 completeMethod={(e) => selectionStaticSearch(e)}
@@ -243,7 +243,7 @@ export const DefaultSelectionStaticAutocompleteFormEditWidget = ({ formik, field
                 // }}
             />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>
+                <p className={"solid-field-error"}>
                     {typeof formik.errors[fieldLayoutInfo?.attrs?.name] === 'object'
                         ? (formik.errors[fieldLayoutInfo?.attrs?.name] as any)?.value?.toString()
                         : formik.errors[fieldLayoutInfo?.attrs?.name]?.toString()}
@@ -278,14 +278,14 @@ export const SolidSelectionStaticRadioFormEditWidget = ({ formik, fieldContext }
 
     if (isMultiSelect) {
         return (
-            <p className={styles.fieldError}>This render mode is not supported for multi select.</p>
+            <p className={"solid-field-error"}>This render mode is not supported for multi select.</p>
         );
     }
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel !== false && (
-                <label htmlFor={fieldName} className={styles.fieldLabel}>
+                <label htmlFor={fieldName} className={"solid-field-label"}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -306,7 +306,7 @@ export const SolidSelectionStaticRadioFormEditWidget = ({ formik, fieldContext }
                 }}
             />
             {isFormFieldValid(formik, fieldName) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldName]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldName]?.toString()}</p>
             )}
         </div>
     );
@@ -332,7 +332,7 @@ export const SolidSelectionStaticSelectButtonFormEditWidget = ({ formik, fieldCo
 
     if (isMultiSelect) {
         return (
-            <p className={styles.fieldError}>This render mode is not supported for multi select.</p>
+            <p className={"solid-field-error"}>This render mode is not supported for multi select.</p>
         );
     }
 
@@ -346,9 +346,9 @@ export const SolidSelectionStaticSelectButtonFormEditWidget = ({ formik, fieldCo
         typeof currentValue === "object" ? currentValue.value : currentValue || null;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel !== false && (
-                <label htmlFor={fieldName} className={styles.fieldLabel}>
+                <label htmlFor={fieldName} className={"solid-field-label"}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                 </label>
@@ -367,7 +367,7 @@ export const SolidSelectionStaticSelectButtonFormEditWidget = ({ formik, fieldCo
                 }}
             />
             {isFormFieldValid(formik, fieldName) && (
-                <p className={styles.fieldError}>{formik.errors[fieldName]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik.errors[fieldName]?.toString()}</p>
             )}
         </div>
     );
@@ -383,11 +383,11 @@ export const DefaultSelectionStaticFormViewWidget = ({ formik, fieldContext }: S
     const isMultiSelect = fieldLayoutInfo.attrs.multiSelect ?? fieldMetadata?.isMultiSelect;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>
+            <p className={"solid-field-view-value"}>
                 {isMultiSelect
                     ? Array.isArray(value)
                         ? value.map((v: any) => v?.label).filter(Boolean).join(', ')
diff --git a/src/components/core/form/fields/SolidShortTextField.tsx b/src/components/core/form/fields/SolidShortTextField.tsx
index 3fc9a4e8..b5a42fe2 100644
--- a/src/components/core/form/fields/SolidShortTextField.tsx
+++ b/src/components/core/form/fields/SolidShortTextField.tsx
@@ -1,6 +1,6 @@
 
 import * as Yup from 'yup';
-import styles from './solidFields.module.css';
+import './solid-fields.css';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps, SolidListFieldWidgetProps } from "../../../../types/solid-core";
@@ -216,9 +216,9 @@ export const DefaultShortTextFormEditWidget = ({ formik, fieldContext }: SolidFo
     const autoComplete = fieldLayoutInfo?.attrs?.autoComplete || 'on';
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -234,11 +234,11 @@ export const DefaultShortTextFormEditWidget = ({ formik, fieldContext }: SolidFo
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => fieldContext.onChange(e, 'onFieldChange')}
                 onBlur={(e: React.FocusEvent<HTMLInputElement>) => fieldContext.onBlur(e, 'onFieldBlur')}
                 value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                className={styles.fieldInput}
+                className={"solid-field-input"}
                 autoComplete={autoComplete}
             />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
@@ -252,11 +252,11 @@ export const DefaultShortTextFormViewWidget = ({ formik, fieldContext }: SolidFo
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const value = formik.values[fieldLayoutInfo.attrs.name];
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>{value && typeof value === "string" ? value : ''}</p>
+            <p className={"solid-field-view-value"}>{value && typeof value === "string" ? value : ''}</p>
         </div>
     );
 }
@@ -281,11 +281,11 @@ export const MaskedShortTextFormViewWidget = ({ formik, fieldContext }: SolidFor
     const maskedValue = rawValue ? '*'.repeat(rawValue.length) : '';
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>{maskedValue}</p>
+            <p className={"solid-field-view-value"}>{maskedValue}</p>
         </div>
     );
 };
@@ -311,9 +311,9 @@ export const MaskedShortTextFormEditWidget = ({ formik, fieldContext }: SolidFor
     const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
     return (
-        <div className={styles.fieldWrapper}>
+        <div className={"solid-field-wrapper"}>
             {showFieldLabel !== false && (
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={styles.fieldLabel}>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={"solid-field-label"}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500">*</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -333,7 +333,7 @@ export const MaskedShortTextFormEditWidget = ({ formik, fieldContext }: SolidFor
                 autoComplete={autoComplete}
             />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <p className={styles.fieldError}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
+                <p className={"solid-field-error"}>{formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}</p>
             )}
         </div>
     );
diff --git a/src/components/core/form/fields/SolidTimeField.tsx b/src/components/core/form/fields/SolidTimeField.tsx
index a7e7a795..0f009edf 100644
--- a/src/components/core/form/fields/SolidTimeField.tsx
+++ b/src/components/core/form/fields/SolidTimeField.tsx
@@ -11,7 +11,7 @@ import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';
-import styles from "./solidFields.module.css";
+import "./solid-fields.css";
 
 
 // Converts multiple time formats into a JavaScript Date object
@@ -176,9 +176,9 @@ export const DefaultTimeFormEditWidget = ({ formik, fieldContext }: SolidFormFie
 
     return (
         <div className="relative">
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
@@ -228,13 +228,13 @@ export const DefaultTimeFormViewWidget = ({
     const displayValue = parsedTime ? (format ? dayjs(parsedTime).format(format) : formatTime(parsedTime)) : "-";
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>
+                <p className={`${"solid-field-view-label"} form-field-label`}>
                     {fieldLabel}
                 </p>
             )}
-            <p className={styles.fieldViewValue}>
+            <p className={"solid-field-view-value"}>
                 <DateFieldViewComponent value={rawValue} format={format} fallback="-"></DateFieldViewComponent>
             </p>
         </div>
diff --git a/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx b/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx
index 3a543808..4817826d 100644
--- a/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx
+++ b/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx
@@ -18,7 +18,7 @@ import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
 import { useRouter } from "../../../../../hooks/useRouter";
 import { usePathname } from "../../../../../hooks/usePathname";
 import { camelCase, capitalize } from "lodash";
-import styles from "../solidFields.module.css";
+import "../solid-fields.css";
 import { SolidListView } from "../../../../core/list/SolidListView";
 import { RenderSolidFormEmbededView } from "./SolidRelationManyToOneField";
 import { buildSyntheticChangeEvent } from "../fieldEventUtils";
@@ -197,9 +197,9 @@ export const DefaultRelationManyToManyAutoCompleteFormEditWidget = ({ formik, fi
 
     return (
         <div className="relative">
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel !== false && (
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
@@ -361,7 +361,7 @@ export const DefaultRelationManyToManyCheckBoxFormEditWidget = ({ formik, fieldC
         <div className="flex items-center gap-4 justify-between">
             <div className="flex items-center gap-4">
                 {showFieldLabel !== false && (
-                    <label className={`${styles.fieldLabel} form-field-label`}>
+                    <label className={`${"solid-field-label"} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
@@ -410,7 +410,7 @@ export const DefaultRelationManyToManyCheckBoxFormEditWidget = ({ formik, fieldC
                                 checked={currentValues.some((s) => s.value === item.value)}
                                 onChange={() => handleCheckboxChange(item)}
                             />
-                            <label htmlFor={item.label} className={`${styles.fieldLabel} form-field-label m-0`}>
+                            <label htmlFor={item.label} className={`${"solid-field-label"} form-field-label m-0`}>
                                 {item.label}
                             </label>
                         </div>
@@ -613,9 +613,9 @@ export const DefaultRelationManyToManyListFormEditWidget = ({ formik, fieldConte
 
     return (
         <div>
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel !== false && (
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
@@ -746,11 +746,11 @@ export const DefaultRelationManyToManyFormViewWidget = ({ fieldContext }: SolidF
     const displayValue = `${visibleValues.join(", ")}${hiddenCount > 0 ? ` +${hiddenCount} more` : ""}`;
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>{displayValue}</p>
+            <p className={"solid-field-view-value"}>{displayValue}</p>
         </div>
     );
 };
diff --git a/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx b/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx
index 7c88ea48..8d5e13ee 100644
--- a/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx
+++ b/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx
@@ -21,7 +21,7 @@ import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
 import { getVirtualScrollerOptions } from "../../../../../helpers/autoCompleteVirtualScroll";
 import { getRelatedRecordDisplayText } from "../../../../../helpers/relationDisplay";
 import { buildSyntheticChangeEvent } from "../fieldEventUtils";
-import styles from "../solidFields.module.css";
+import "../solid-fields.css";
 
 type AutoCompleteCompleteEvent = { query: string };
 
@@ -438,9 +438,9 @@ export const DefaultRelationManyToOneFormEditWidget = ({ formik, fieldContext }:
     }
     return (
         <div className="relative">
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
@@ -578,11 +578,11 @@ export const DefaultRelationManyToOneFormViewWidget = ({ formik, fieldContext }:
     const userKeyField = fieldLayoutInfo?.attrs?.coModelFieldToDisplay ? fieldLayoutInfo?.attrs?.coModelFieldToDisplay : fieldMetadata?.relationModel?.userKeyField?.name;
     const displayValue = getRelatedRecordDisplayText(value, userKeyField);
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel !== false && (
-                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
+                <p className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className={styles.fieldViewValue}>{displayValue || ''}</p>
+            <p className={"solid-field-view-value"}>{displayValue || ''}</p>
         </div>
     );
 }
@@ -992,9 +992,9 @@ export const PseudoRelationManyToOneFormWidget = ({ formik, fieldContext }: Soli
     }
     return (
         <div className="relative" >
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
diff --git a/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx b/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx
index 2c535768..fd54d75d 100644
--- a/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx
+++ b/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx
@@ -14,7 +14,7 @@ import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
 import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogDescription, SolidDialogHeader, SolidDialogTitle } from "../../../../shad-cn-ui/SolidDialog";
 import { SolidMessage } from "../../../../shad-cn-ui/SolidMessage";
 import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
-import styles from "../solidFields.module.css";
+import "../solid-fields.css";
 
 export type FormViewParams = {
     moduleName: any;
@@ -324,9 +324,9 @@ export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }:
 
     return (
         <div>
-            <div className={styles.fieldWrapper}>
+            <div className={"solid-field-wrapper"}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                     </label>
@@ -475,9 +475,9 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
 
 
     return (
-        <div className={styles.fieldViewWrapper}>
+        <div className={"solid-field-view-wrapper"}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-view-label"} form-field-label`}>{fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
                 </label>
@@ -689,7 +689,7 @@ export const PseudoRelationOneToManyFormWidget = ({ formData, field, fieldsMetad
     return (
         <div>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${"solid-field-label"} form-field-label`}>{fieldLabel}
                     {/* {fieldMetadata.required && <span className="text-red-500"> *</span>} */}
                     {/* <SolidFieldTooltip fieldContext={fieldContext} /> */}
                 </label>
diff --git a/src/components/core/form/fields/solidFields.module.css b/src/components/core/form/fields/solid-fields.css
similarity index 78%
rename from src/components/core/form/fields/solidFields.module.css
rename to src/components/core/form/fields/solid-fields.css
index 5c862498..f1e058ee 100644
--- a/src/components/core/form/fields/solidFields.module.css
+++ b/src/components/core/form/fields/solid-fields.css
@@ -1,13 +1,13 @@
 /* === Field UI refresh === */
 
-.fieldWrapper {
+.solid-field-wrapper {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-top: 10px;
 }
 
-.fieldLabel {
+.solid-field-label {
     font-size: 11px;
     color: color-mix(in srgb, var(--muted-foreground) 84%, var(--background) 16%);
     font-weight: 500;
@@ -19,7 +19,7 @@
     letter-spacing: 0.01em;
 }
 
-.fieldInput {
+.solid-field-input {
     width: 100% !important;
     height: 34px !important;
     border-radius: 8px !important;
@@ -32,19 +32,19 @@
     transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
 }
 
-.fieldInput:focus,
-.fieldInput:focus-visible {
+.solid-field-input:focus,
+.solid-field-input:focus-visible {
     outline: none !important;
     border-color: color-mix(in srgb, var(--primary-color, var(--primary)) 65%, var(--border)) !important;
 }
 
-.fieldInput:disabled {
+.solid-field-input:disabled {
     opacity: 0.75 !important;
     cursor: not-allowed !important;
     background: var(--solid-form-control-bg-disabled, color-mix(in srgb, var(--muted) 18%, var(--card) 82%)) !important;
 }
 
-.fieldTextarea {
+.solid-field-textarea {
     width: 100% !important;
     border-radius: 8px !important;
     border: 1px solid var(--border) !important;
@@ -58,32 +58,32 @@
     line-height: 1.5 !important;
 }
 
-.fieldTextarea:focus,
-.fieldTextarea:focus-visible {
+.solid-field-textarea:focus,
+.solid-field-textarea:focus-visible {
     outline: none !important;
     border-color: color-mix(in srgb, var(--primary-color, var(--primary)) 65%, var(--border)) !important;
 }
 
-.fieldTextarea:disabled {
+.solid-field-textarea:disabled {
     opacity: 0.75 !important;
     cursor: not-allowed !important;
     background: var(--solid-form-control-bg-disabled, color-mix(in srgb, var(--muted) 18%, var(--card) 82%)) !important;
 }
 
-.fieldInput:global(.is-invalid),
-.fieldTextarea:global(.is-invalid),
-:global(.is-invalid).fieldInput,
-:global(.is-invalid).fieldTextarea {
+.solid-field-input.is-invalid,
+.solid-field-textarea.is-invalid,
+.is-invalid.solid-field-input,
+.is-invalid.solid-field-textarea {
     border-color: #ef4444 !important;
     box-shadow: 0 0 0 1px #fecaca inset !important;
 }
 
 /* InputNumber wrapper — className lands on the outer span */
-.fieldNumberWrapper {
+.solid-field-number-wrapper {
     width: 100%;
 }
 
-.fieldNumberWrapper :global(.solid-input) {
+.solid-field-number-wrapper .solid-input {
     width: 100% !important;
     height: 34px !important;
     border-radius: 8px !important;
@@ -96,64 +96,53 @@
     transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
 }
 
-.fieldNumberWrapper :global(.solid-input):focus,
-.fieldNumberWrapper :global(.solid-input):focus-visible {
+.solid-field-number-wrapper .solid-input:focus,
+.solid-field-number-wrapper .solid-input:focus-visible {
     outline: none !important;
     border-color: color-mix(in srgb, var(--primary-color, var(--primary)) 65%, var(--border)) !important;
 }
 
-.fieldNumberWrapper :global(.solid-input):disabled {
+.solid-field-number-wrapper .solid-input:disabled {
     opacity: 0.75 !important;
     cursor: not-allowed !important;
     background: var(--solid-form-control-bg-disabled, color-mix(in srgb, var(--muted) 18%, var(--card) 82%)) !important;
 }
 
-.fieldNumberWrapper :global(.is-invalid) {
+.solid-field-number-wrapper .is-invalid {
     border-color: #ef4444 !important;
     box-shadow: 0 0 0 1px #fecaca inset !important;
 }
 
-.fieldError {
+.solid-field-error {
     margin: 2px 0 0;
     color: #ef4444;
     font-size: 11.5px;
     line-height: 1.3;
 }
 
-.fieldHelper {
+.solid-field-helper {
     margin: 2px 0 0;
     color: var(--muted-foreground);
     font-size: 11.5px;
     line-height: 1.35;
 }
 
-.fieldInvalid :global(.solid-autocomplete-control) {
+.solid-field-invalid .solid-autocomplete-control {
     border-color: #ef4444 !important;
     box-shadow: 0 0 0 1px #fecaca inset !important;
 }
 
-.fieldInvalidControl :global(.solid-autocomplete-control) {
+.solid-field-invalid-control .solid-autocomplete-control {
     border-color: #ef4444 !important;
 }
 
-:global(.solid-segmented.is-invalid) {
+.solid-segmented.is-invalid {
     border-color: #ef4444 !important;
     box-shadow: 0 0 0 1px #fecaca inset !important;
     border-radius: 8px;
 }
 
-.fieldErrorBadge {
-    display: inline-flex;
-    align-items: center;
-    color: #ef4444;
-    padding: 2px 0;
-    border: none;
-    background: transparent;
-    font-size: 12px;
-    margin-top: 6px;
-}
-
-:global(.solid-file-icon-btn) {
+.solid-file-icon-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -166,37 +155,37 @@
     transition: all 0.12s ease;
     box-shadow: 0 1px 2px rgba(0,0,0,0.04);
 }
-:global(.solid-file-icon-btn:hover:not(:disabled)) {
+.solid-file-icon-btn:hover:not(:disabled) {
     background: #f3f4f6;
     border-color: #cfd4e3;
     color: #111827;
 }
 
-:global(.solid-file-icon-btn:disabled) {
+.solid-file-icon-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
 }
 
-:global(.solid-file-icon-btn.is-danger) {
+.solid-file-icon-btn.solid-field-danger {
     color: #b91c1c;
     border-color: #f1c1c1;
     background: #fff5f5;
 }
 
-:global(.solid-file-icon-btn.is-danger:hover:not(:disabled)) {
+.solid-file-icon-btn.solid-field-danger:hover:not(:disabled) {
     color: #7f1d1d;
     border-color: #f59fa0;
     background: #ffe9e9;
 }
 
-.fieldViewWrapper {
+.solid-field-view-wrapper {
     display: flex;
     flex-direction: column;
     gap: 2px;
     margin-top: 10px;
 }
 
-.fieldViewLabel {
+.solid-field-view-label {
     margin: 0;
     font-size: 11px;
     color: color-mix(in srgb, var(--muted-foreground) 84%, var(--background) 16%);
@@ -205,7 +194,7 @@
     letter-spacing: 0.01em;
 }
 
-.fieldViewValue {
+.solid-field-view-value {
     margin: 0;
     font-size: 13px;
     color: var(--foreground);
@@ -213,7 +202,7 @@
     line-height: 1.4;
 }
 
-.mediaAttachmentCard {
+.solid-field-media-attachment-card {
     display: flex;
     align-items: center;
     border: 1px solid var(--border);
@@ -223,22 +212,22 @@
     box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
 }
 
-.mediaAttachmentCardView {
+.solid-field-media-attachment-card-view {
     margin-top: 10px;
 }
 
-.mediaAttachmentRow {
+.solid-field-media-attachment-row {
     width: 100%;
 }
 
-.mediaAttachmentMeta {
+.solid-field-media-attachment-meta {
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }
 
-.mediaAttachmentName {
+.solid-field-media-attachment-name {
     appearance: none;
     background: transparent;
     border: 0;
@@ -259,16 +248,16 @@
     transition: color 0.15s ease;
 }
 
-.mediaAttachmentName:hover {
+.solid-field-media-attachment-name:hover {
     color: var(--primary-color, var(--primary));
 }
 
-.mediaAttachmentName:focus-visible {
+.solid-field-media-attachment-name:focus-visible {
     outline: none;
     color: var(--primary-color, var(--primary));
 }
 
-.mediaAttachmentSize {
+.solid-field-media-attachment-size {
     font-size: 11.5px;
     line-height: 1.3;
     font-weight: 500;
@@ -276,6 +265,6 @@
     letter-spacing: 0.01em;
 }
 
-.mediaAttachmentActions {
+.solid-field-media-attachment-actions {
     flex-shrink: 0;
 }
diff --git a/src/components/core/form/solidFormViewShimmerLoading.module.css b/src/components/core/form/solid-form-view-shimmer-loading.css
similarity index 67%
rename from src/components/core/form/solidFormViewShimmerLoading.module.css
rename to src/components/core/form/solid-form-view-shimmer-loading.css
index 8975e1db..02793b51 100644
--- a/src/components/core/form/solidFormViewShimmerLoading.module.css
+++ b/src/components/core/form/solid-form-view-shimmer-loading.css
@@ -1,4 +1,4 @@
-.solidFormViewShimmerLoadingWrapper {
+.solid-form-view-shimmer-loading-wrapper {
     height: calc(100vh - 125px);
     border-top: 1px solid var(--primary-light-color);
 }
\ No newline at end of file
diff --git a/src/components/core/list/SolidColumnSelector/SolidListColumnSelector.tsx b/src/components/core/list/SolidColumnSelector/SolidListColumnSelector.tsx
index ea5d050d..556633d0 100644
--- a/src/components/core/list/SolidColumnSelector/SolidListColumnSelector.tsx
+++ b/src/components/core/list/SolidColumnSelector/SolidListColumnSelector.tsx
@@ -3,8 +3,7 @@ import React, { useState } from 'react'
 import { useDispatch } from 'react-redux';
 import { createSolidEntityApi } from '../../../../redux/api/solidEntityApi';
 import { DragDropContext, DropResult } from '@hello-pangea/dnd';
-import styles from './SolidListColumnSelector.module.css'
-import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+import './solid-list-column-selector.css';import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { showToast } from '../../../../redux/features/toastSlice';
 import { asCompatibleReactNode, CompatibleDraggable, CompatibleDroppable } from '../../common/dndCompat';
 
@@ -161,7 +160,7 @@ export const SolidListColumnSelector = ({ listViewMetaData, onClose }: any) => {
                             <div
                                 {...provided.droppableProps}
                                 ref={provided.innerRef}
-                                className={`flex flex-col cogwheel-column-filter px-0 ${isDragging ? styles.SolidColumnDragContextActive : ''}`}
+                                className={`flex flex-col cogwheel-column-filter px-0 ${isDragging ? "solid-list-column-solid-column-drag-context-active" : ''}`}
                                 style={{ maxHeight: 400, overflowY: 'auto' }}
                             >
                                 {fields.map((column, index) => (
@@ -171,7 +170,7 @@ export const SolidListColumnSelector = ({ listViewMetaData, onClose }: any) => {
                                                 ref={provided.innerRef}
                                                 {...provided.draggableProps}
                                                 {...provided.dragHandleProps}
-                                                className={`flex items-center justify-between gap-4 px-2 py-2 ${snapshot.isDragging ? styles.SolidColumnDraggedActiveElement : ''}`}
+                                                className={`flex items-center justify-between gap-4 px-2 py-2 ${snapshot.isDragging ? "solid-list-column-solid-column-dragged-active-element" : ''}`}
                                                 style={{
                                                     ...provided.draggableProps.style,
                                                 }}
diff --git a/src/components/core/list/SolidColumnSelector/SolidListColumnSelector.module.css b/src/components/core/list/SolidColumnSelector/solid-list-column-selector.css
similarity index 69%
rename from src/components/core/list/SolidColumnSelector/SolidListColumnSelector.module.css
rename to src/components/core/list/SolidColumnSelector/solid-list-column-selector.css
index f3210140..c0761f75 100644
--- a/src/components/core/list/SolidColumnSelector/SolidListColumnSelector.module.css
+++ b/src/components/core/list/SolidColumnSelector/solid-list-column-selector.css
@@ -1,10 +1,10 @@
-.SolidColumnDragContextActive {
+.solid-list-column-solid-column-drag-context-active {
     background: var(--surface-b);
     border-radius: 6px;
     transition: background 0.2s ease;
 }
 
-.SolidColumnDraggedActiveElement {
+.solid-list-column-solid-column-dragged-active-element {
     background-color: var(--surface-c);
     box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
     transition: all 0.2s ease;
diff --git a/src/components/core/list/SolidListView.tsx b/src/components/core/list/SolidListView.tsx
index 4c5ba617..780fb228 100644
--- a/src/components/core/list/SolidListView.tsx
+++ b/src/components/core/list/SolidListView.tsx
@@ -27,7 +27,7 @@ import { hasAnyRole } from "../../../helpers/rolesHelper";
 import { SolidListViewHeaderButton } from "./SolidListViewHeaderButton";
 import { resolveButtonPresentation } from "../../../helpers/buttonPresentation";
 import { useDispatch, useSelector } from "react-redux";
-import styles from "./SolidListViewWrapper.module.css";
+import "./solid-list-view-wrapper.css";
 import { isArchivedListRow } from "./columns/PublishStatusColumnDefaults";
 import { SolidBeforeListDataLoad, SolidListUiEventResponse, SolidLoadList } from "../../../types/solid-core";
 import { getExtensionFunction } from "../../../helpers/registry";
@@ -1404,7 +1404,7 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
   // };
   return (
     <div className={`page-parent-wrapper ${isEmbeddedList ? "solid-list-page-wrapper-embedded" : "solid-list-page-wrapper"} flex ${isEmbeddedList ? "min-h-0 overflow-visible" : "h-full min-h-0 overflow-hidden"}`}>
-      <div className={`solid-list-content flex flex-col ${isEmbeddedList ? "min-h-0" : "flex-grow-1"} ${styles.ListContentWrapper}`}>
+      <div className={`solid-list-content flex flex-col ${isEmbeddedList ? "min-h-0" : "flex-grow-1"} ${"solid-list-view-list-content-wrapper"}`}>
         <div className={`solid-list-surface flex flex-col min-h-0 ${isEmbeddedList ? "" : "flex-1"}`}>
           {solidListViewInitialMetaData &&
             <div className="page-header solid-list-toolbar flex-col lg:flex-row">
@@ -1577,7 +1577,7 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
 
               ) : (
                 <div
-                  className={`solid-datatable-wrapper solid-list-table-area min-h-0 ${isEmbeddedList ? "overflow-visible" : "flex-1 overflow-hidden"} ${styles.listTableArea}`}
+                  className={`solid-datatable-wrapper solid-list-table-area min-h-0 ${isEmbeddedList ? "overflow-visible" : "flex-1 overflow-hidden"}`}
                 >
                   <DataTable
                     value={listViewData}
@@ -1811,7 +1811,7 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
                                 aria-label="Recover record"
                                 title="Recover"
                               >
-                                <RotateCcw size={14} className={styles.retrieveIcon} />
+                                <RotateCcw size={14} className={"solid-list-view-retrieve-icon"} />
                               </button>
                             </div>
                           ) : (
@@ -1828,7 +1828,7 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
                                       solidListViewMetaData={solidListViewMetaData}
                                       params={params}
                                       handleCustomButtonClick={handleCustomButtonClick}
-                                      contentClassName={styles.rowActionsOverlay}
+                                      contentClassName={"solid-list-view-row-actions-overlay"}
                                       onSelectRow={(selectedRow: any) => {
                                         setSelectedSolidViewData(selectedRow);
                                       }}
diff --git a/src/components/core/list/SolidListViewWrapper.module.css b/src/components/core/list/SolidListViewWrapper.module.css
deleted file mode 100644
index 060227a6..00000000
--- a/src/components/core/list/SolidListViewWrapper.module.css
+++ /dev/null
@@ -1,90 +0,0 @@
-.ListContentWrapper {
-  transition: width 0.3s ease;
-  min-width: 0;
-  border-right: 0;
-}
-
-.listTableArea {
-  min-height: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.toastContentGrow {
-  flex: 1;
-}
-
-.retrieveIcon {
-  font-size: 1rem;
-}
-
-.rowActionsOverlay {
-  min-width: 120px;
-}
-
-.chatterResizeHandle {
-  width: 5px;
-  cursor: col-resize;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  height: 100%;
-  z-index: 9;
-}
-
-.chatterSquareButton {
-  width: 30px;
-  height: 30px;
-  aspect-ratio: 1/1;
-}
-
-.chatterNarrowButton {
-  width: 30px;
-}
-
-.SolidXAIFloatingBtn {
-  position: absolute;
-  top: 50%;
-  right: -1px;
-  /* transform: translateY(-50%) rotate(-90deg); */
-  z-index: 1000;
-  font-size: 0.875rem;
-  background-color: #eff1f4;
-  color: var(--secondary-dark-color);
-  white-space: nowrap;
-  padding: 0.75rem 0.5rem;
-  border-radius: 4px 4px 4px 0;
-  border-top: 1px solid var(--primary-light-color);
-  border-right: 1px solid var(--primary-light-color);
-  border-bottom: 1px solid var(--primary-light-color);
-  border-left: none;
-  display: inline-block;
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-  width: 30px;
-  transition: right 0.3s;
-  margin-top: -50px;
-  cursor: pointer;
-  box-shadow:
-    0 -4px 6px -4px rgba(0, 0, 0, 0.1),
-    4px 0 6px -4px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1);
-}
-
-.SolidXAIListPanel {
-  position: fixed !important;
-  top: 0;
-  right: -700px;
-  /* Hidden by default */
-  width: 700px;
-  height: 100vh;
-  transition: right 0.3s ease;
-  z-index: 999;
-  border-left: 1px solid var(--primary-light-color);
-}
-
-.SolidXAIListPanelOpen {
-  right: 0;
-}
diff --git a/src/components/core/list/columns/SolidMediaMultipleColumn.tsx b/src/components/core/list/columns/SolidMediaMultipleColumn.tsx
index 2d45b526..9e4a8e1e 100644
--- a/src/components/core/list/columns/SolidMediaMultipleColumn.tsx
+++ b/src/components/core/list/columns/SolidMediaMultipleColumn.tsx
@@ -11,7 +11,7 @@ import { SolidFileTypeIcon } from '../../../../helpers/fileTypeIcon';
 import { getMediaPreviewKind, isLightboxMediaKind, type MediaPreviewKind } from '../../../../helpers/mediaType';
 import { openMediaInNewTab } from '../../../../helpers/mediaUrl';
 import { downloadMediaFile } from '../../../../helpers/downloadMediaFile';
-import styles from "../../form/fields/solidFields.module.css";
+import "../../form/fields/solid-fields.css";
 
 
 
@@ -169,20 +169,20 @@ export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLigh
     };
 
     const renderMediaFileCard = (file: any, className = "") => (
-        <div className={`${styles.mediaAttachmentCard} ${className}`.trim()}>
-            <div className={`${styles.mediaAttachmentRow} flex items-center md:gap-2`}>
+        <div className={`${"solid-field-media-attachment-card"} ${className}`.trim()}>
+            <div className={`${"solid-field-media-attachment-row"} flex items-center md:gap-2`}>
                 <FileReaderExt fileDetails={file} />
-                <div className={`${styles.mediaAttachmentMeta} w-full`}>
+                <div className={`${"solid-field-media-attachment-meta"} w-full`}>
                     <div className="flex items-start justify-between gap-4">
                         <button
                             type="button"
-                            className={styles.mediaAttachmentName}
+                            className={"solid-field-media-attachment-name"}
                             onClick={() => handleFileView(file)}
                             title={file.name}
                         >
                             {file.name}
                         </button>
-                        <div className={`${styles.mediaAttachmentActions} flex items-center md:gap-2`}>
+                        <div className={`${"solid-field-media-attachment-actions"} flex items-center md:gap-2`}>
                             <button
                                 type="button"
                                 className="solid-file-icon-btn"
@@ -198,7 +198,7 @@ export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLigh
                             </button>
                         </div>
                     </div>
-                    <div className={styles.mediaAttachmentSize}>
+                    <div className={"solid-field-media-attachment-size"}>
                         {formatFileSize(file.size)}
                     </div>
                 </div>
diff --git a/src/components/core/list/solid-list-view-wrapper.css b/src/components/core/list/solid-list-view-wrapper.css
new file mode 100644
index 00000000..23eeb199
--- /dev/null
+++ b/src/components/core/list/solid-list-view-wrapper.css
@@ -0,0 +1,13 @@
+.solid-list-view-list-content-wrapper {
+  transition: width 0.3s ease;
+  min-width: 0;
+  border-right: 0;
+}
+
+.solid-list-view-row-actions-overlay {
+  min-width: 120px;
+}
+
+.solid-list-view-retrieve-icon {
+  font-size: 1rem;
+}
diff --git a/src/components/core/list/widgets/PublishedStatusListViewWidget.tsx b/src/components/core/list/widgets/PublishedStatusListViewWidget.tsx
index b2791f9b..e0334f70 100644
--- a/src/components/core/list/widgets/PublishedStatusListViewWidget.tsx
+++ b/src/components/core/list/widgets/PublishedStatusListViewWidget.tsx
@@ -1,6 +1,6 @@
 import { DateFieldViewComponent } from "../../common/DateFieldViewComponent";
 import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
-import styles from "./PublishedStatusListViewWidget.module.css";
+import "./published-status-list-view-widget.css";
 
 export const PublishedStatusListViewWidget = ({ rowData, column }: SolidListFieldWidgetProps) => {
     const colVal = rowData[column.attrs.name];
@@ -8,12 +8,12 @@ export const PublishedStatusListViewWidget = ({ rowData, column }: SolidListFiel
     const publishedAt = rowData?.publishedAt || (column.attrs.name === 'publishedAt' ? colVal : null);
 
     return (
-        <div className={styles.publishedStatusCell}>
-            <span className={`${styles.publishedStatusPill} ${isPublished ? styles.published : styles.unpublished}`}>
+        <div className={"published-status-published-status-cell"}>
+            <span className={`${"published-status-published-status-pill"} ${isPublished ? "published-status-published" : "published-status-unpublished"}`}>
                 {isPublished ? 'Published' : 'Unpublished'}
             </span>
             {isPublished && publishedAt && (
-                <span className={styles.publishedStatusTime}>
+                <span className={"published-status-published-status-time"}>
                     <DateFieldViewComponent value={publishedAt} showTime fallback="" />
                 </span>
             )}
diff --git a/src/components/core/list/widgets/PublishedStatusListViewWidget.module.css b/src/components/core/list/widgets/published-status-list-view-widget.css
similarity index 68%
rename from src/components/core/list/widgets/PublishedStatusListViewWidget.module.css
rename to src/components/core/list/widgets/published-status-list-view-widget.css
index 24c42e49..631fef7a 100644
--- a/src/components/core/list/widgets/PublishedStatusListViewWidget.module.css
+++ b/src/components/core/list/widgets/published-status-list-view-widget.css
@@ -1,4 +1,4 @@
-.publishedStatusCell {
+.published-status-published-status-cell {
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
@@ -6,7 +6,7 @@
     min-width: 94px;
 }
 
-.publishedStatusPill {
+.published-status-published-status-pill {
     display: inline-flex;
     align-items: center;
     min-height: 22px;
@@ -18,19 +18,19 @@
     line-height: 1;
 }
 
-.publishedStatusPill.published {
+.published-status-published-status-pill.published-status-published {
     color: #166534;
     border-color: #22c55e40;
     background: #dcfce7;
 }
 
-.publishedStatusPill.unpublished {
+.published-status-published-status-pill.published-status-unpublished {
     color: #991b1b;
     border-color: #ef444440;
     background: #fee2e2;
 }
 
-.publishedStatusTime {
+.published-status-published-status-time {
     color: var(--muted-foreground);
     font-size: 10.5px;
     line-height: 1.25;
diff --git a/src/components/core/model/FieldMetaDataForm.tsx b/src/components/core/model/FieldMetaDataForm.tsx
index b338f9bd..ec0078ab 100644
--- a/src/components/core/model/FieldMetaDataForm.tsx
+++ b/src/components/core/model/FieldMetaDataForm.tsx
@@ -31,7 +31,7 @@ import {
   SolidMessage,
   SolidCodeEditor,
 } from "../../shad-cn-ui";
-import styles from "../form/fields/solidFields.module.css";
+import "../form/fields/solid-fields.css";
 import "./FieldMetaDataForm.css";
 
 
@@ -360,12 +360,12 @@ const SelectComputedFieldTriggerValues: React.FC<SelectComputedFieldTriggerValue
       <div className="">
         <label
           htmlFor="moduleName"
-          className={classNames("form-field-label", styles.fieldLabel)}
+          className={classNames("form-field-label", "solid-field-label")}
         >
           Module
         </label>
         <div className={classNames("mt-2 solid-standard-autocomplete", {
-          [styles.fieldInvalidControl]: Boolean(errors?.moduleName),
+          ["solid-field-invalid-control"]: Boolean(errors?.moduleName),
         })}>
           <SolidAutocomplete
             value={triggerModuleField.selectedItem}
@@ -378,19 +378,19 @@ const SelectComputedFieldTriggerValues: React.FC<SelectComputedFieldTriggerValue
           />
         </div>
         {errors?.moduleName && (
-          <p className={styles.fieldError}>{errors.moduleName}</p>
+          <p className={"solid-field-error"}>{errors.moduleName}</p>
         )}
       </div>
 
       <div className="">
         <label
           htmlFor="modelName"
-          className={classNames("form-field-label", styles.fieldLabel)}
+          className={classNames("form-field-label", "solid-field-label")}
         >
           Model
         </label>
         <div className={classNames("mt-2 solid-standard-autocomplete", {
-          [styles.fieldInvalidControl]: Boolean(errors?.modelName),
+          ["solid-field-invalid-control"]: Boolean(errors?.modelName),
         })}>
           <SolidAutocomplete
             value={triggerModelField.selectedItem}
@@ -403,7 +403,7 @@ const SelectComputedFieldTriggerValues: React.FC<SelectComputedFieldTriggerValue
           />
         </div>
         {errors?.modelName && (
-          <p className={styles.fieldError}>{errors.modelName}</p>
+          <p className={"solid-field-error"}>{errors.modelName}</p>
         )}
       </div>
 
@@ -412,7 +412,7 @@ const SelectComputedFieldTriggerValues: React.FC<SelectComputedFieldTriggerValue
       <div>
         <label
           htmlFor="operations"
-          className={classNames("form-field-label", styles.fieldLabel)}
+          className={classNames("form-field-label", "solid-field-label")}
         >
           Operations
         </label>
@@ -432,12 +432,12 @@ const SelectComputedFieldTriggerValues: React.FC<SelectComputedFieldTriggerValue
             }
             placeholder="Select operations"
             className={classNames("solid-standard-autocomplete max-w-16rem", {
-              [styles.fieldInvalidControl]: Boolean(errors?.operations),
+              ["solid-field-invalid-control"]: Boolean(errors?.operations),
             })}
           />
         </div>
         {errors?.operations && (
-          <p className={styles.fieldError}>{errors.operations}</p>
+          <p className={"solid-field-error"}>{errors.operations}</p>
         )}
       </div>
 
@@ -1921,7 +1921,7 @@ const FieldMetaDataForm = ({
                       <div className="flex flex-wrap -mx-2 -mt-2">
                         {currentFields.includes("displayName") && (
                           <div className="field mt-2 min-w-0 basis-full px-2 pt-2 md:basis-1/2">
-                            <label htmlFor="displayName" className={classNames("form-field-label", styles.fieldLabel)}>
+                            <label htmlFor="displayName" className={classNames("form-field-label", "solid-field-label")}>
                               Display Name
                             </label>
                             <SolidInput
@@ -1938,19 +1938,19 @@ const FieldMetaDataForm = ({
                                 }
                               }}
                               value={formik.values.displayName}
-                              className={classNames(styles.fieldInput, {
+                              className={classNames("solid-field-input", {
                                 "is-invalid": isFormFieldValid(formik, "displayName"),
                               })}
                             />
                             {isFormFieldValid(formik, "displayName") && (
-                              <p className={styles.fieldError}>{formik?.errors?.displayName?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.displayName?.toString()}</p>
                             )}
                           </div>
                         )}
 
                         {currentFields.includes("name") && (
                           <div className="field mt-2 min-w-0 basis-full px-2 pt-2 md:mt-0 md:basis-1/2">
-                            <label htmlFor="name" className={classNames("form-field-label", styles.fieldLabel)}>
+                            <label htmlFor="name" className={classNames("form-field-label", "solid-field-label")}>
                               Name
                             </label>
                             <SolidInput
@@ -1960,18 +1960,18 @@ const FieldMetaDataForm = ({
                               name="name"
                               onChange={formik.handleChange}
                               value={formik.values.name}
-                              className={classNames(styles.fieldInput, {
+                              className={classNames("solid-field-input", {
                                 "is-invalid": isFormFieldValid(formik, "name"),
                               })}
                             />
                             {isFormFieldValid(formik, "name") && (
-                              <p className={styles.fieldError}>{formik?.errors?.name?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.name?.toString()}</p>
                             )}
                           </div>
                         )}
                         {currentFields.includes("description") && (
                           <div className="field mt-2 min-w-0 basis-full px-2 pt-2 md:mt-2 md:basis-1/2">
-                            <label htmlFor="description" className={classNames("form-field-label", styles.fieldLabel)}>
+                            <label htmlFor="description" className={classNames("form-field-label", "solid-field-label")}>
                               Description
                             </label>
                             <SolidTextarea
@@ -1981,12 +1981,12 @@ const FieldMetaDataForm = ({
                               onChange={formik.handleChange}
                               value={formik.values.description}
                               rows={5}
-                              className={classNames(styles.fieldTextarea, {
+                              className={classNames("solid-field-textarea", {
                                 "is-invalid": isFormFieldValid(formik, "description"),
                               })}
                             />
                             {isFormFieldValid(formik, "description") && (
-                              <p className={styles.fieldError}>{formik?.errors?.description?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.description?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -2016,7 +2016,7 @@ const FieldMetaDataForm = ({
                             </div>
                             {showColumnName && (
                               <div className="field mt-4 w-full gap-2">
-                                <label htmlFor="columnName" className={classNames("form-field-label", styles.fieldLabel)}>
+                                <label htmlFor="columnName" className={classNames("form-field-label", "solid-field-label")}>
                                   Column Name
                                 </label>
                                 <SolidInput
@@ -2026,12 +2026,12 @@ const FieldMetaDataForm = ({
                                   name="columnName"
                                   onChange={formik.handleChange}
                                   value={formik.values.columnName}
-                                  className={classNames(styles.fieldInput, {
+                                  className={classNames("solid-field-input", {
                                     "is-invalid": isFormFieldValid(formik, "columnName"),
                                   })}
                                 />
                                 {isFormFieldValid(formik, "columnName") && (
-                                  <p className={styles.fieldError}>{formik?.errors?.columnName?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.columnName?.toString()}</p>
                                 )}
                               </div>
                             )}
@@ -2054,10 +2054,10 @@ const FieldMetaDataForm = ({
                         <div className="flex flex-wrap -mx-2 -mt-2">
                           {currentFields.includes("length") && (
                             <div className="field flex w-1/2 flex-col gap-2 px-2 pt-2">
-                              <label htmlFor="length" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="length" className={classNames("form-field-label", "solid-field-label")}>
                                 Length
                               </label>
-                              <div className={styles.fieldNumberWrapper}>
+                              <div className={"solid-field-number-wrapper"}>
                                 <SolidNumberInput
                                   id="length"
                                   name="length"
@@ -2072,7 +2072,7 @@ const FieldMetaDataForm = ({
                                 />
                               </div>
                               {isFormFieldValid(formik, "length") && (
-                                <p className={styles.fieldError}>{formik?.errors?.length?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.length?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2083,7 +2083,7 @@ const FieldMetaDataForm = ({
                               <label
                                 style={{ marginBottom: "0px" }}
                                 htmlFor="defaultValue"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Default Value
                               </label>
@@ -2104,7 +2104,7 @@ const FieldMetaDataForm = ({
                               <label
                                 style={{ marginBottom: "0px" }}
                                 htmlFor="defaultValue"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Default Value
                               </label>
@@ -2116,7 +2116,7 @@ const FieldMetaDataForm = ({
                                   name="defaultValue"
                                   onChange={formik.handleChange}
                                   value={formik.values.defaultValue}
-                                  className={classNames(styles.fieldInput, {
+                                  className={classNames("solid-field-input", {
                                     "is-invalid": isFormFieldValid(
                                       formik,
                                       "defaultValue"
@@ -2125,7 +2125,7 @@ const FieldMetaDataForm = ({
                                 />
                               }
                               {(selectedTypeValue === "float" || selectedTypeValue === "decimal") &&
-                                <div className={styles.fieldNumberWrapper}>
+                                <div className={"solid-field-number-wrapper"}>
                                   <SolidNumberInput
                                     id="defaultValue"
                                     name="defaultValue"
@@ -2139,7 +2139,7 @@ const FieldMetaDataForm = ({
                                 </div>
                               }
                               {(selectedTypeValue === "int" || selectedTypeValue === "bigint") &&
-                                <div className={styles.fieldNumberWrapper}>
+                                <div className={"solid-field-number-wrapper"}>
                                   <SolidNumberInput
                                     id="defaultValue"
                                     name="defaultValue"
@@ -2179,7 +2179,7 @@ const FieldMetaDataForm = ({
                                 );
                               })()}
                               {isFormFieldValid(formik, "defaultValue") && (
-                                <p className={styles.fieldError}>{formik?.errors?.defaultValue?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.defaultValue?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2188,13 +2188,13 @@ const FieldMetaDataForm = ({
                             <div className="field flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2">
                               <label
                                 htmlFor="mediaTypes"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Media Type
                               </label>
                               <div
                                 className={classNames("solid-standard-autocomplete", {
-                                  [styles.fieldInvalidControl]: isFormFieldValid(formik, "mediaTypes"),
+                                  ["solid-field-invalid-control"]: isFormFieldValid(formik, "mediaTypes"),
                                 })}
                               >
                                 <SolidAutocomplete
@@ -2223,7 +2223,7 @@ const FieldMetaDataForm = ({
                                 />
                               </div>
                               {isFormFieldValid(formik, "mediaTypes") && (
-                                <p className={styles.fieldError}>{formik?.errors?.mediaTypes?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.mediaTypes?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2231,11 +2231,11 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:mt-0 md:w-1/2">
                               <label
                                 htmlFor="mediaMaxSizeKb"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Media Max Size (Mb)
                               </label>
-                              <div className={styles.fieldNumberWrapper}>
+                              <div className={"solid-field-number-wrapper"}>
                                 <SolidNumberInput
                                   id="mediaMaxSizeKb"
                                   name="mediaMaxSizeKb"
@@ -2251,7 +2251,7 @@ const FieldMetaDataForm = ({
                               </div>
 
                               {isFormFieldValid(formik, "mediaMaxSizeKb") && (
-                                <p className={styles.fieldError}>{formik?.errors?.mediaMaxSizeKb?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.mediaMaxSizeKb?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2259,13 +2259,13 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2">
                               <label
                                 htmlFor="mediaAllowedExtensions"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Allowed Extensions
                               </label>
                               <div
                                 className={classNames("solid-standard-autocomplete", {
-                                  [styles.fieldInvalidControl]: isFormFieldValid(formik, "mediaAllowedExtensions"),
+                                  ["solid-field-invalid-control"]: isFormFieldValid(formik, "mediaAllowedExtensions"),
                                 })}
                               >
                                 <SolidAutocomplete
@@ -2286,9 +2286,9 @@ const FieldMetaDataForm = ({
                                   className="w-full"
                                 />
                               </div>
-                              <p className={styles.fieldHelper}>Optional. Pick specific extensions from the selected media types.</p>
+                              <p className={"solid-field-helper"}>Optional. Pick specific extensions from the selected media types.</p>
                               {isFormFieldValid(formik, "mediaAllowedExtensions") && (
-                                <p className={styles.fieldError}>{formik?.errors?.mediaAllowedExtensions?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.mediaAllowedExtensions?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2296,13 +2296,13 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2">
                               <label
                                 htmlFor="mediaStorageProviderId"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Media  Storage Provider
                               </label>
 
                               <div className={classNames("solid-standard-autocomplete", {
-                                [styles.fieldInvalidControl]: isFormFieldValid(formik, "mediaStorageProvider"),
+                                ["solid-field-invalid-control"]: isFormFieldValid(formik, "mediaStorageProvider"),
                               })}>
                                 <SolidAutocomplete
                                   value={mediaStorageProviderField.selectedItem}
@@ -2319,7 +2319,7 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "mediaStorageProvider"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.mediaStorageProviderId?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.mediaStorageProviderId?.toString()}</p>
                                 )}
                             </div>
                           )}
@@ -2328,7 +2328,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex w-full flex-col gap-2 px-2 pt-2 md:w-1/2">
                               <label
                                 htmlFor="mediaEmbedded"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Media Embedded
                               </label>
@@ -2359,7 +2359,7 @@ const FieldMetaDataForm = ({
                                 })}
                               />
                               {isFormFieldValid(formik, "mediaEmbedded") && (
-                                <p className={styles.fieldError}>{formik?.errors?.mediaEmbedded?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.mediaEmbedded?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2391,7 +2391,7 @@ const FieldMetaDataForm = ({
                               <label
                                 style={{ marginBottom: "0px" }}
                                 htmlFor="relationType"
-                                className={classNames("form-field-label md:shrink-0", styles.fieldLabel)}
+                                className={classNames("form-field-label md:shrink-0", "solid-field-label")}
                               >
                                 Relation Type
                               </label>
@@ -2410,7 +2410,7 @@ const FieldMetaDataForm = ({
                               />
 
                               {isFormFieldValid(formik, "relationType") && (
-                                <p className={styles.fieldError}>{formik?.errors?.relationType?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.relationType?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2418,7 +2418,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="relationCascade"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Relation Cascade
                               </label>
@@ -2442,7 +2442,7 @@ const FieldMetaDataForm = ({
                                 })}
                               />
                               {isFormFieldValid(formik, "relationCascade") && (
-                                <p className={styles.fieldError}>{formik?.errors?.relationCascade?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.relationCascade?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2451,13 +2451,13 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="relationModelModuleName"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Co-Module Name
                               </label>
 
                               <div className={classNames("solid-standard-autocomplete", {
-                                [styles.fieldInvalidControl]: isFormFieldValid(
+                                ["solid-field-invalid-control"]: isFormFieldValid(
                                   formik,
                                   "relationModelModuleName"
                                 ),
@@ -2498,7 +2498,7 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "relationModelModuleName"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.relationModelModuleName?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.relationModelModuleName?.toString()}</p>
                                 )}
                             </div>
                           )}
@@ -2509,13 +2509,13 @@ const FieldMetaDataForm = ({
                               <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                                 <label
                                   htmlFor="relationCoModelSingularName"
-                                  className={classNames("form-field-label", styles.fieldLabel)}
+                                  className={classNames("form-field-label", "solid-field-label")}
                                 >
                                   Co-Model Name
                                 </label>
 
                                 <div className={classNames("solid-standard-autocomplete", {
-                                  [styles.fieldInvalidControl]: isFormFieldValid(
+                                  ["solid-field-invalid-control"]: isFormFieldValid(
                                     formik,
                                     "relationCoModelSingularName"
                                   ),
@@ -2535,7 +2535,7 @@ const FieldMetaDataForm = ({
                                   formik,
                                   "relationCoModelSingularName"
                                 ) && (
-                                    <p className={styles.fieldError}>{formik?.errors?.relationCoModelSingularName?.toString()}</p>
+                                    <p className={"solid-field-error"}>{formik?.errors?.relationCoModelSingularName?.toString()}</p>
                                   )}
                                 {formik.values.relationType === "one-to-many" &&
                                   <p className="fieldSubTitle">This is the child model.</p>
@@ -2549,7 +2549,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="relationCoModelColumnName"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Relation Co-Model Column Name
                               </label>
@@ -2560,7 +2560,7 @@ const FieldMetaDataForm = ({
                                 onChange={formik.handleChange}
                                 disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationCoModelColumnName}
-                                className={classNames(styles.fieldInput, {
+                                className={classNames("solid-field-input", {
                                   "is-invalid": isFormFieldValid(
                                     formik,
                                     "relationCoModelColumnName"
@@ -2568,7 +2568,7 @@ const FieldMetaDataForm = ({
                                 })}
                               />
                               {isFormFieldValid(formik, "relationCoModelColumnName") && (
-                                <p className={styles.fieldError}>{formik?.errors?.relationCoModelColumnName?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.relationCoModelColumnName?.toString()}</p>
                               )}
                               <p className="fieldSubTitle">Allows you to control the column name of the foreign key. Eg. when adding a country field to state model, by default foreign key column in the state table will be called country_id, use this field to create a foreign key with a different name. </p>
 
@@ -2578,13 +2578,13 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="userKey"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Set User Key
                               </label>
 
                               <div className={classNames("solid-standard-autocomplete", {
-                                [styles.fieldInvalidControl]: isFormFieldValid(
+                                ["solid-field-invalid-control"]: isFormFieldValid(
                                   formik,
                                   "userKey"
                                 ),
@@ -2604,7 +2604,7 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "userKey"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.userKey?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.userKey?.toString()}</p>
                                 )}
                             </div>
                           )}
@@ -2615,7 +2615,7 @@ const FieldMetaDataForm = ({
                               <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                                 <label
                                   htmlFor="relationFieldFixedFilter"
-                                  className={classNames("form-field-label", styles.fieldLabel)}
+                                  className={classNames("form-field-label", "solid-field-label")}
                                 >
                                   Relation Field Fixed Filter
                                 </label>
@@ -2627,7 +2627,7 @@ const FieldMetaDataForm = ({
                                   onChange={formik.handleChange}
                                   value={formik.values.relationFieldFixedFilter}
                                   rows={5}
-                                  className={classNames(styles.fieldTextarea, {
+                                  className={classNames("solid-field-textarea", {
                                     "is-invalid": isFormFieldValid(
                                       formik,
                                       "relationFieldFixedFilter"
@@ -2650,7 +2650,7 @@ const FieldMetaDataForm = ({
                                   })}
                                 /> */}
                                 {isFormFieldValid(formik, "relationFieldFixedFilter") && (
-                                  <p className={styles.fieldError}>{formik?.errors?.relationFieldFixedFilter?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.relationFieldFixedFilter?.toString()}</p>
                                 )}
                                 <p className="fieldSubTitle">Many to one fields are rendered as autocomplete dropdown on the SolidX ui. Use the fixed filter to load a pre-filtered set of records from the co-model. Please note user input entered in the autocomplete is used to apply a dynamic filter.</p>
 
@@ -2659,7 +2659,7 @@ const FieldMetaDataForm = ({
 
                           {currentFields.includes("relationCreateInverse") && (
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
-                              <label htmlFor="relationCreateInverse" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="relationCreateInverse" className={classNames("form-field-label", "solid-field-label")}>
                                 Relation Create Inverse
                               </label>
                               <div className="solid-field-checkbox-row">
@@ -2670,10 +2670,10 @@ const FieldMetaDataForm = ({
                                   disabled={formik.values.relationType === "one-to-many"}
                                   onChange={(event) => formik.setFieldValue("relationCreateInverse", event.currentTarget.checked)}
                                 />
-                                <label htmlFor="relationCreateInverse" className={classNames("ml-2", "form-field-label", styles.fieldLabel)}>Create Inverse</label>
+                                <label htmlFor="relationCreateInverse" className={classNames("ml-2", "form-field-label", "solid-field-label")}>Create Inverse</label>
                               </div>
                               {isFormFieldValid(formik, "relationCreateInverse") && (
-                                <p className={styles.fieldError}>{formik?.errors?.relationCreateInverse?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.relationCreateInverse?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2687,7 +2687,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="relationCoModelFieldName"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Field Name In {formik.values.relationCoModelSingularName} Model
                               </label>
@@ -2698,7 +2698,7 @@ const FieldMetaDataForm = ({
                                 onChange={formik.handleChange}
                                 disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationCoModelFieldName}
-                                className={classNames(styles.fieldInput, {
+                                className={classNames("solid-field-input", {
                                   "is-invalid": isFormFieldValid(
                                     formik,
                                     "relationCoModelFieldName"
@@ -2715,7 +2715,7 @@ const FieldMetaDataForm = ({
                                 <p className="fieldSubTitle">In this case a {formik.values.relationCoModelFieldName} field will be created in the <span style={{ fontWeight: "700" }}>{formik.values.relationCoModelSingularName ?? '{{}}'}</span> when setting create inverse true.</p>
                               }
                               {isFormFieldValid(formik, "relationCoModelFieldName") && (
-                                <p className={styles.fieldError}>{formik?.errors?.relationCoModelFieldName?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.relationCoModelFieldName?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2757,7 +2757,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="relationJoinTableName"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Relation Join Table Name
                               </label>
@@ -2768,7 +2768,7 @@ const FieldMetaDataForm = ({
                                 onChange={formik.handleChange}
                                 disabled={isExistingFieldReadOnly}
                                 value={formik.values.relationJoinTableName}
-                                className={classNames(styles.fieldInput, {
+                                className={classNames("solid-field-input", {
                                   "is-invalid": isFormFieldValid(
                                     formik,
                                     "relationJoinTableName"
@@ -2776,7 +2776,7 @@ const FieldMetaDataForm = ({
                                 })}
                               />
                               {isFormFieldValid(formik, "relationJoinTableName") && (
-                                <p className={styles.fieldError}>{formik?.errors?.relationJoinTableName?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.relationJoinTableName?.toString()}</p>
                               )}
 
                             </div>
@@ -2786,13 +2786,13 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="selectionDynamicProvider"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Selection Dynamic Provider
                               </label>
 
                               <div className={classNames("solid-standard-autocomplete", {
-                                [styles.fieldInvalidControl]: isFormFieldValid(
+                                ["solid-field-invalid-control"]: isFormFieldValid(
                                   formik,
                                   "selectionDynamicProvider"
                                 ),
@@ -2834,7 +2834,7 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "selectionDynamicProvider"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.selectionDynamicProvider?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.selectionDynamicProvider?.toString()}</p>
                                 )}
                             </div>
                           )}
@@ -2842,7 +2842,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="selectionValueType"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Select Value Type
                               </label>
@@ -2870,7 +2870,7 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "selectionValueType"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.selectionValueType?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.selectionValueType?.toString()}</p>
                                 )}
                             </div>
                           )}
@@ -2879,7 +2879,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                               <label
                                 htmlFor="selectionStaticValues"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Selection Static Values
                               </label>
@@ -2914,7 +2914,7 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "selectionStaticValues"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.selectionStaticValues?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.selectionStaticValues?.toString()}</p>
                                 )}
                             </div>
                           )}
@@ -2923,7 +2923,7 @@ const FieldMetaDataForm = ({
                             <div className="field mt-2 flex flex-col gap-2 px-2 pt-2 md:w-1/2">
                               <label
                                 htmlFor="computedFieldValueType"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Computed Field Value Type
                               </label>
@@ -2934,7 +2934,7 @@ const FieldMetaDataForm = ({
                                 field="label"
                                 dropdown
                                 className={classNames("solid-standard-autocomplete", {
-                                  [styles.fieldInvalidControl]: isFormFieldValid(formik, "computedFieldValueType"),
+                                  ["solid-field-invalid-control"]: isFormFieldValid(formik, "computedFieldValueType"),
                                 })}
                                 onChange={(e) => {
                                   setSelectedComputedFieldValueType(e.value);
@@ -2959,7 +2959,7 @@ const FieldMetaDataForm = ({
                                 })}
                               /> */}
                               {isFormFieldValid(formik, "computedFieldValueType") && (
-                                <p className={styles.fieldError}>{formik?.errors?.computedFieldValueType?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.computedFieldValueType?.toString()}</p>
                               )}
                             </div>
                           )}
@@ -2970,12 +2970,12 @@ const FieldMetaDataForm = ({
                               <div className="field mt-2 flex flex-col gap-2 px-2 pt-2 md:w-1/2">
                                 <label
                                   htmlFor="computedFieldValueProvider"
-                                  className={classNames("form-field-label", styles.fieldLabel)}
+                                  className={classNames("form-field-label", "solid-field-label")}
                                 >
                                   Computed Field Provider
                                 </label>
                                 <div className={classNames("solid-standard-autocomplete", {
-                                  [styles.fieldInvalidControl]: isFormFieldValid(
+                                  ["solid-field-invalid-control"]: isFormFieldValid(
                                     formik,
                                     "computedFieldValueProvider"
                                   ),
@@ -2994,7 +2994,7 @@ const FieldMetaDataForm = ({
                                   formik,
                                   "computedFieldValueProvider"
                                 ) && (
-                                    <p className={styles.fieldError}>{formik?.errors?.computedFieldValueProvider?.toString()}</p>
+                                    <p className={"solid-field-error"}>{formik?.errors?.computedFieldValueProvider?.toString()}</p>
                                   )}
                               </div>
                             )}
@@ -3011,7 +3011,7 @@ const FieldMetaDataForm = ({
                                 <div className="flex items-center gap-2">
                                   <label
                                     htmlFor="computedFieldTriggerConfig"
-                                    className={classNames("form-field-label", styles.fieldLabel)}
+                                    className={classNames("form-field-label", "solid-field-label")}
                                   >
                                     Computed Field Trigger Config
                                   </label>
@@ -3044,14 +3044,14 @@ const FieldMetaDataForm = ({
                                     />
                                   ))}
                                 {typeof formik.errors.computedFieldTriggerConfig === 'string' && (
-                                  <p className={styles.fieldError}>{formik.errors.computedFieldTriggerConfig}</p>
+                                  <p className={"solid-field-error"}>{formik.errors.computedFieldTriggerConfig}</p>
                                 )}
                               </div>
                             )}
 
                           {currentFields.includes("selectionDynamicProviderCtxt") && (
                             <div className="field mt-4 flex flex-col gap-2 px-2 pt-2">
-                              <label htmlFor="selectionDynamicProviderCtxt" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="selectionDynamicProviderCtxt" className={classNames("form-field-label", "solid-field-label")}>
                                 Selection Dynamic Provider Context
                               </label>
                               <SolidCodeEditor
@@ -3068,14 +3068,14 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "selectionDynamicProviderCtxt"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.selectionDynamicProviderCtxt?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.selectionDynamicProviderCtxt?.toString()}</p>
                                 )}
                             </div>
                           )}
 
                           {currentFields.includes("computedFieldValueProviderCtxt") && (
                             <div className="field mt-4 flex flex-col gap-2 px-2 pt-2">
-                              <label htmlFor="computedFieldValueProviderCtxt" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="computedFieldValueProviderCtxt" className={classNames("form-field-label", "solid-field-label")}>
                                 Computed Field Value Provider Context
                               </label>
                               <SolidCodeEditor
@@ -3092,7 +3092,7 @@ const FieldMetaDataForm = ({
                                 formik,
                                 "computedFieldValueProviderCtxt"
                               ) && (
-                                  <p className={styles.fieldError}>{formik?.errors?.computedFieldValueProviderCtxt?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.computedFieldValueProviderCtxt?.toString()}</p>
                                 )}
                             </div>
                           )}
@@ -3109,7 +3109,7 @@ const FieldMetaDataForm = ({
                                 <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                                   <label
                                     htmlFor="regexPattern"
-                                    className={classNames("form-field-label", styles.fieldLabel)}
+                                    className={classNames("form-field-label", "solid-field-label")}
                                   >
                                     Password Policy
                                   </label>
@@ -3136,7 +3136,7 @@ const FieldMetaDataForm = ({
                                 <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
                                   <label
                                     htmlFor="regexPattern"
-                                    className={classNames("form-field-label", styles.fieldLabel)}
+                                    className={classNames("form-field-label", "solid-field-label")}
                                   >
                                     Regex Pattern
                                   </label>
@@ -3146,7 +3146,7 @@ const FieldMetaDataForm = ({
                                     name="regexPattern"
                                     onChange={formik.handleChange}
                                     value={formik.values.regexPattern}
-                                    className={classNames(styles.fieldInput, {
+                                    className={classNames("solid-field-input", {
                                       "is-invalid": isFormFieldValid(
                                         formik,
                                         "regexPattern"
@@ -3154,14 +3154,14 @@ const FieldMetaDataForm = ({
                                     })}
                                   />
                                   {isFormFieldValid(formik, "regexPattern") && (
-                                    <p className={styles.fieldError}>{formik?.errors?.regexPattern?.toString()}</p>
+                                    <p className={"solid-field-error"}>{formik?.errors?.regexPattern?.toString()}</p>
                                   )}
                                 </div>
                                 {showRegexFields && (
                                   <div className="field mt-2 mb-3 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:mb-3 md:basis-1/2">
                                     <label
                                       htmlFor="regexPatternNotMatchingErrorMsg"
-                                      className={classNames("form-field-label", styles.fieldLabel)}
+                                      className={classNames("form-field-label", "solid-field-label")}
                                     >
                                       Regex Pattern Not Matching Error Msg
                                     </label>
@@ -3171,7 +3171,7 @@ const FieldMetaDataForm = ({
                                       name="regexPatternNotMatchingErrorMsg"
                                       onChange={formik.handleChange}
                                       value={formik.values.regexPatternNotMatchingErrorMsg}
-                                      className={classNames(styles.fieldInput, {
+                                      className={classNames("solid-field-input", {
                                         "is-invalid": isFormFieldValid(
                                           formik,
                                           "regexPatternNotMatchingErrorMsg"
@@ -3179,7 +3179,7 @@ const FieldMetaDataForm = ({
                                       })}
                                     />
                                     {isFormFieldValid(formik, "regexPatternNotMatchingErrorMsg") && (
-                                      <p className={styles.fieldError}>{formik?.errors?.regexPatternNotMatchingErrorMsg?.toString()}</p>
+                                      <p className={"solid-field-error"}>{formik?.errors?.regexPatternNotMatchingErrorMsg?.toString()}</p>
                                     )}
                                   </div>
                                 )}
@@ -3190,7 +3190,7 @@ const FieldMetaDataForm = ({
                               <>
                                 {showMinFields && (
                                   <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
-                                    <label htmlFor="min" className={classNames("form-field-label", styles.fieldLabel)}>
+                                    <label htmlFor="min" className={classNames("form-field-label", "solid-field-label")}>
                                       Min {(selectedTypeValue !== "int" && selectedTypeValue !== "decimal") && `(Characters Allowed)`}
 
                                     </label>
@@ -3206,7 +3206,7 @@ const FieldMetaDataForm = ({
                               /> */}
                                     {/* <RenderMinValueInput></RenderMinValueInput> */}
 
-                                    <div className={styles.fieldNumberWrapper}>
+                                    <div className={"solid-field-number-wrapper"}>
                                       <SolidNumberInput
                                         id="min"
                                         name="min"
@@ -3223,13 +3223,13 @@ const FieldMetaDataForm = ({
                                       />
                                     </div>
                                     {isFormFieldValid(formik, "min") && (
-                                      <p className={styles.fieldError}>{formik?.errors?.min?.toString()}</p>
+                                      <p className={"solid-field-error"}>{formik?.errors?.min?.toString()}</p>
                                     )}
                                   </div>
                                 )}
                                 {showMaxFields && (
                                   <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
-                                    <label htmlFor="max" className={classNames("form-field-label", styles.fieldLabel)}>
+                                    <label htmlFor="max" className={classNames("form-field-label", "solid-field-label")}>
                                       Max {(selectedTypeValue !== "int" &&
                                         selectedTypeValue !== "decimal") && `(Characters allowed)`}
                                     </label>
@@ -3244,7 +3244,7 @@ const FieldMetaDataForm = ({
                                 })}
                               /> */}
 
-                                    <div className={styles.fieldNumberWrapper}>
+                                    <div className={"solid-field-number-wrapper"}>
                                       <SolidNumberInput
                                         id="max"
                                         name="max"
@@ -3263,7 +3263,7 @@ const FieldMetaDataForm = ({
 
 
                                     {isFormFieldValid(formik, "max") && (
-                                      <p className={styles.fieldError}>{formik?.errors?.max?.toString()}</p>
+                                      <p className={"solid-field-error"}>{formik?.errors?.max?.toString()}</p>
                                     )}
                                   </div>
                                 )}
@@ -3271,7 +3271,7 @@ const FieldMetaDataForm = ({
                             }
                             {showOrmOptions && (
                               <div className="field mt-2 flex min-w-0 basis-full flex-col gap-2 px-2 pt-2 md:basis-1/2">
-                                <label htmlFor="ormType" className={classNames("form-field-label", styles.fieldLabel)}>
+                                <label htmlFor="ormType" className={classNames("form-field-label", "solid-field-label")}>
                                   Type
                                 </label>
 
@@ -3297,7 +3297,7 @@ const FieldMetaDataForm = ({
                                 />
 
                                 {isFormFieldValid(formik, "ormType") && (
-                                  <p className={styles.fieldError}>{formik?.errors?.ormType?.toString()}</p>
+                                  <p className={"solid-field-error"}>{formik?.errors?.ormType?.toString()}</p>
                                 )}
                               </div>
                             )}
@@ -3321,7 +3321,7 @@ const FieldMetaDataForm = ({
                                 checked={formik.values.required}
                                 disabled={formik.values.isPrimaryKey || formik.values.unique}
                               />
-                              <label htmlFor="required" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="required" className={classNames("form-field-label", "solid-field-label")}>
                                 Required {formik.values.isPrimaryKey && "(Auto-enabled for Primary Key)"}
                                 {!formik.values.isPrimaryKey && formik.values.unique && "(Auto-enabled for Unique)"}
                               </label>
@@ -3329,7 +3329,7 @@ const FieldMetaDataForm = ({
                             <p className="text-xs mt-2">You won't be able to create an entry if this field is empty</p>
 
                             {isFormFieldValid(formik, "required") && (
-                              <p className={styles.fieldError}>{formik?.errors?.required?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.required?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3356,14 +3356,14 @@ const FieldMetaDataForm = ({
                                 checked={formik.values.unique}
                                 disabled={formik.values.isPrimaryKey}
                               />
-                              <label htmlFor="unique" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="unique" className={classNames("form-field-label", "solid-field-label")}>
                                 Unique {formik.values.isPrimaryKey && "(Auto-enabled for Primary Key)"}
                               </label>
                             </div>
                             <p className="text-xs mt-2">You won't be able to create an entry if there is an existing entry with identical content</p>
 
                             {isFormFieldValid(formik, "unique") && (
-                              <p className={styles.fieldError}>{formik?.errors?.unique?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.unique?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3378,12 +3378,12 @@ const FieldMetaDataForm = ({
                                 }}
                                 checked={formik.values.index}
                               />
-                              <label htmlFor="index" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="index" className={classNames("form-field-label", "solid-field-label")}>
                                 Index
                               </label>
                             </div>
                             {isFormFieldValid(formik, "index") && (
-                              <p className={styles.fieldError}>{formik?.errors?.index?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.index?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3398,7 +3398,7 @@ const FieldMetaDataForm = ({
                                 }}
                                 checked={formik.values.private}
                               />
-                              <label htmlFor="private" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="private" className={classNames("form-field-label", "solid-field-label")}>
                                 Private
                               </label>
                             </div>
@@ -3406,7 +3406,7 @@ const FieldMetaDataForm = ({
 
 
                             {isFormFieldValid(formik, "private") && (
-                              <p className={styles.fieldError}>{formik?.errors?.private?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.private?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3422,12 +3422,12 @@ const FieldMetaDataForm = ({
                                 }}
                                 checked={formik.values.encrypt}
                               />
-                              <label htmlFor="encrypt" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="encrypt" className={classNames("form-field-label", "solid-field-label")}>
                                 Encrypt
                               </label>
                             </div>
                             {isFormFieldValid(formik, "encrypt") && (
-                              <p className={styles.fieldError}>{formik?.errors?.encrypt?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.encrypt?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3442,12 +3442,12 @@ const FieldMetaDataForm = ({
                                 }}
                                 checked={formik.values.isMultiSelect}
                               />
-                              <label htmlFor="isMultiSelect" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="isMultiSelect" className={classNames("form-field-label", "solid-field-label")}>
                                 Is MultiSelect
                               </label>
                             </div>
                             {isFormFieldValid(formik, "isMultiSelect") && (
-                              <p className={styles.fieldError}>{formik?.errors?.isMultiSelect?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.isMultiSelect?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3462,14 +3462,14 @@ const FieldMetaDataForm = ({
                                 }}
                                 checked={formik.values.enableAuditTracking}
                               />
-                              <label htmlFor="enableAuditTracking" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="enableAuditTracking" className={classNames("form-field-label", "solid-field-label")}>
                                 Enable Audit Tracking
                               </label>
                             </div>
                             <p className="fieldSubTitle">By selecting this option, you are setting audit trail for this field.</p>
 
                             {isFormFieldValid(formik, "enableAuditTracking") && (
-                              <p className={styles.fieldError}>{formik?.errors?.enableAuditTracking?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.enableAuditTracking?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3484,14 +3484,14 @@ const FieldMetaDataForm = ({
                                 }}
                                 checked={formik.values.isUserKey}
                               />
-                              <label htmlFor="isUserKey" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="isUserKey" className={classNames("form-field-label", "solid-field-label")}>
                                 Is Userkey
                               </label>
                             </div>
                             <p className="fieldSubTitle">By selecting this option, you are setting this field as the model's user key. Any existing user key configuration will be overwritten</p>
 
                             {isFormFieldValid(formik, "isUserKey") && (
-                              <p className={styles.fieldError}>{formik?.errors?.isUserKey?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.isUserKey?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3512,14 +3512,14 @@ const FieldMetaDataForm = ({
                                 }}
                                 checked={formik.values.isPrimaryKey}
                               />
-                              <label htmlFor="isPrimaryKey" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="isPrimaryKey" className={classNames("form-field-label", "solid-field-label")}>
                                 Is Primary Key
                               </label>
                             </div>
                             <p className="fieldSubTitle">By selecting this option, you are setting this field as the primary key for this legacy table.</p>
 
                             {isFormFieldValid(formik, "isPrimaryKey") && (
-                              <p className={styles.fieldError}>{formik?.errors?.isPrimaryKey?.toString()}</p>
+                              <p className={"solid-field-error"}>{formik?.errors?.isPrimaryKey?.toString()}</p>
                             )}
                           </div>
                         )}
@@ -3532,7 +3532,7 @@ const FieldMetaDataForm = ({
                             <div className="field flex w-full flex-col gap-2">
                               <label
                                 htmlFor="encryptionType"
-                                className={classNames("form-field-label", styles.fieldLabel)}
+                                className={classNames("form-field-label", "solid-field-label")}
                               >
                                 Encryption Type
                               </label>
@@ -3555,7 +3555,7 @@ const FieldMetaDataForm = ({
                               /> */}
 
                               <div className={classNames("solid-standard-autocomplete", {
-                                [styles.fieldInvalidControl]: isFormFieldValid(formik, "encryptionType"),
+                                ["solid-field-invalid-control"]: isFormFieldValid(formik, "encryptionType"),
                               })}>
                                 <SolidAutocomplete
                                   value={encryptionTypeField.selectedItem}
@@ -3568,13 +3568,13 @@ const FieldMetaDataForm = ({
                                 />
                               </div>
                               {isFormFieldValid(formik, "encryptionType") && (
-                                <p className={styles.fieldError}>{formik?.errors?.encryptionType?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.encryptionType?.toString()}</p>
                               )}
                             </div>
                           </div>
                           <div className="px-2 pt-2 md:w-1/2">
                             <div className="field flex w-full flex-col gap-2">
-                              <label htmlFor="decryptWhen" className={classNames("form-field-label", styles.fieldLabel)}>
+                              <label htmlFor="decryptWhen" className={classNames("form-field-label", "solid-field-label")}>
                                 Decrypt When
                               </label>
                               {/* <SolidAutocomplete
@@ -3593,7 +3593,7 @@ const FieldMetaDataForm = ({
                               /> */}
 
                               <div className={classNames("solid-standard-autocomplete", {
-                                [styles.fieldInvalidControl]: isFormFieldValid(formik, "decryptWhen"),
+                                ["solid-field-invalid-control"]: isFormFieldValid(formik, "decryptWhen"),
                               })}>
                                 <SolidAutocomplete
                                   value={decryptWhenField.selectedItem}
@@ -3606,7 +3606,7 @@ const FieldMetaDataForm = ({
                                 />
                               </div>
                               {isFormFieldValid(formik, "decryptWhen") && (
-                                <p className={styles.fieldError}>{formik?.errors?.decryptWhen?.toString()}</p>
+                                <p className={"solid-field-error"}>{formik?.errors?.decryptWhen?.toString()}</p>
                               )}
                             </div>
                           </div>
diff --git a/src/components/core/model/ModelMetaData.tsx b/src/components/core/model/ModelMetaData.tsx
index d9c6cdc3..ef4cbc20 100644
--- a/src/components/core/model/ModelMetaData.tsx
+++ b/src/components/core/model/ModelMetaData.tsx
@@ -13,7 +13,7 @@ import { showToast } from "../../../redux/features/toastSlice";
 import * as Yup from "yup";
 import { SolidAutocomplete, SolidCheckbox, SolidInput, SolidPanel, SolidTextarea } from "../../shad-cn-ui";
 import { useSolidAutocompleteField } from "../../../hooks/useSolidAutocompleteField";
-import styles from "../form/fields/solidFields.module.css";
+import "../form/fields/solid-fields.css";
 
 const cx = (...parts: Array<string | false | null | undefined | Record<string, boolean>>) => {
   const classes: string[] = [];
@@ -161,7 +161,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
     }
 
     const errorText = Array.isArray(message) ? message.join(", ") : String(message);
-    return <p className={styles.fieldError}>{errorText}</p>;
+    return <p className={"solid-field-error"}>{errorText}</p>;
   };
 
   const formik = useFormik({
@@ -397,14 +397,14 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
           <div className="flex flex-wrap -mx-2 -mt-2">
             <div className="field w-full px-2 pt-2 lg:w-1/2 lg:pr-4">
               <SolidPanel header={"Basic Info"} className="solid-column-panel">
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="moduleId" className={styles.fieldLabel}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="moduleId" className={"solid-field-label"}>
                     Module
                   </label>
                   <div
                     className={cx(
                       "solid-standard-autocomplete w-full",
-                      fieldHasError("module", "moduleId") && styles.fieldInvalidControl
+                      fieldHasError("module", "moduleId") && "solid-field-invalid-control"
                     )}
                   >
                     <SolidAutocomplete
@@ -421,14 +421,14 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   {renderFieldError("module", "moduleId")}
                 </div>
 
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="dataSource" className={styles.fieldLabel}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="dataSource" className={"solid-field-label"}>
                     Data Source
                   </label>
                   <div
                     className={cx(
                       "solid-standard-autocomplete w-full",
-                      fieldHasError("dataSource") && styles.fieldInvalidControl
+                      fieldHasError("dataSource") && "solid-field-invalid-control"
                     )}
                   >
                     <SolidAutocomplete
@@ -489,14 +489,14 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                 </div>
 
                 {showParentModel && (
-                  <div className={styles.fieldWrapper}>
-                    <label htmlFor="parentModelId" className={styles.fieldLabel}>
+                  <div className={"solid-field-wrapper"}>
+                    <label htmlFor="parentModelId" className={"solid-field-label"}>
                       Parent Model
                     </label>
                     <div
                       className={cx(
                         "solid-standard-autocomplete w-full",
-                        fieldHasError("parentModel", "parentModelId") && styles.fieldInvalidControl
+                        fieldHasError("parentModel", "parentModelId") && "solid-field-invalid-control"
                       )}
                     >
                       <SolidAutocomplete
@@ -589,15 +589,15 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
             </div>
             <div className="field w-full px-2 pt-2 lg:w-1/2 lg:pl-4">
               <SolidPanel header={"Basic Settings"} className="solid-column-panel">
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="displayName" className={styles.fieldLabel}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="displayName" className={"solid-field-label"}>
                     Display Name
                   </label>
                   <SolidInput
                     type="text"
                     id="displayName"
                     name="displayName"
-                    className={styles.fieldInput}
+                    className={"solid-field-input"}
                     value={formik.values.displayName}
                     disabled={params.id !== "new"}
                     onChange={(e) => {
@@ -613,15 +613,15 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   {renderFieldError("displayName")}
                 </div>
 
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="singularName" className={styles.fieldLabel}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="singularName" className={"solid-field-label"}>
                     Singular Name
                   </label>
                   <SolidInput
                     type="text"
                     id="singularName"
                     name="singularName"
-                    className={styles.fieldInput}
+                    className={"solid-field-input"}
                     value={formik.values.singularName}
                     disabled
                     onChange={formik.handleChange}
@@ -629,15 +629,15 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   {renderFieldError("singularName")}
                 </div>
 
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="pluralName" className={styles.fieldLabel}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="pluralName" className={"solid-field-label"}>
                     Plural Name
                   </label>
                   <SolidInput
                     type="text"
                     id="pluralName"
                     name="pluralName"
-                    className={styles.fieldInput}
+                    className={"solid-field-input"}
                     value={formik.values.pluralName}
                     disabled
                     onChange={formik.handleChange}
@@ -645,15 +645,15 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   {renderFieldError("pluralName")}
                 </div>
 
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="tableName" className={styles.fieldLabel}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="tableName" className={"solid-field-label"}>
                     Table Name
                   </label>
                   <SolidInput
                     type="text"
                     id="tableName"
                     name="tableName"
-                    className={styles.fieldInput}
+                    className={"solid-field-input"}
                     value={formik.values.tableName}
                     disabled={params.id !== "new"}
                     onChange={formik.handleChange}
@@ -661,14 +661,14 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   {renderFieldError("tableName")}
                 </div>
 
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="description" className={styles.fieldLabel}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="description" className={"solid-field-label"}>
                     Description
                   </label>
                   <SolidTextarea
                     id="description"
                     name="description"
-                    className={styles.fieldTextarea}
+                    className={"solid-field-textarea"}
                     value={formik.values.description}
                     rows={5}
                     disabled={params.id !== "new"}
diff --git a/src/components/core/module/CreateModule.tsx b/src/components/core/module/CreateModule.tsx
index b6cf4563..be36c7f2 100644
--- a/src/components/core/module/CreateModule.tsx
+++ b/src/components/core/module/CreateModule.tsx
@@ -14,7 +14,7 @@ import { showToast } from "../../../redux/features/toastSlice";
 import { useDropzone } from "react-dropzone";
 import * as Yup from "yup";
 import { env } from "../../../adapters/env";
-import styles from "../form/fields/solidFields.module.css";
+import "../form/fields/solid-fields.css";
 import {
   SolidAutocomplete,
   SolidButton,
@@ -331,8 +331,8 @@ const CreateModule = ({ params, data }: any) => {
           <SolidPanel header={"Basic Info"} className="solid-column-panel">
             <div className="mt-3 flex flex-wrap -mx-2 ">
               <div className="field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0">
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="displayName" className={`${styles.fieldLabel} form-field-label`}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="displayName" className={`${"solid-field-label"} form-field-label`}>
                     Display Name <span className="text-red-500">*</span>
                   </label>
                   <SolidInput
@@ -348,16 +348,16 @@ const CreateModule = ({ params, data }: any) => {
                       }
                     }}
                     value={formik.values.displayName}
-                    className={styles.fieldInput}
+                    className={"solid-field-input"}
                   />
                   {isFormFieldValid(formik, "displayName") && (
-                    <p className={styles.fieldError}>{formik?.errors?.displayName?.toString()}</p>
+                    <p className={"solid-field-error"}>{formik?.errors?.displayName?.toString()}</p>
                   )}
                 </div>
               </div>
               <div className="field w-full px-2 pt-2 lg:w-1/2">
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="name" className={`${styles.fieldLabel} form-field-label`}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="name" className={`${"solid-field-label"} form-field-label`}>
                     Name <span className="text-red-500">*</span>
                   </label>
                   <SolidInput
@@ -367,18 +367,18 @@ const CreateModule = ({ params, data }: any) => {
                     name="name"
                     onChange={formik.handleChange}
                     value={formik.values.name}
-                    className={styles.fieldInput}
+                    className={"solid-field-input"}
                   />
                   {isFormFieldValid(formik, "name") && (
-                    <p className={styles.fieldError}>{formik?.errors?.name?.toString()}</p>
+                    <p className={"solid-field-error"}>{formik?.errors?.name?.toString()}</p>
                   )}
                 </div>
               </div>
             </div>
             <div className="mt-4 flex flex-wrap -mx-2 -mt-2">
               <div className="field w-full px-2 pt-2 pb-3 lg:w-1/2 lg:pb-0">
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="menuSequenceNumber" className={`${styles.fieldLabel} form-field-label`}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="menuSequenceNumber" className={`${"solid-field-label"} form-field-label`}>
                     Menu Sequence Number
                   </label>
                   <SolidInput
@@ -387,16 +387,16 @@ const CreateModule = ({ params, data }: any) => {
                     onChange={formik.handleChange}
                     min={0}
                     value={formik.values.menuSequenceNumber}
-                    className={styles.fieldInput}
+                    className={"solid-field-input"}
                   />
                   {isFormFieldValid(formik, "menuSequenceNumber") && (
-                    <p className={styles.fieldError}>{formik?.errors?.menuSequenceNumber?.toString()}</p>
+                    <p className={"solid-field-error"}>{formik?.errors?.menuSequenceNumber?.toString()}</p>
                   )}
                 </div>
               </div>
               <div className="field w-full px-2 pt-2 lg:w-1/2">
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="description" className={`${styles.fieldLabel} form-field-label`}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="description" className={`${"solid-field-label"} form-field-label`}>
                     Description <span className="text-red-500">*</span>
                   </label>
                   <SolidTextarea
@@ -404,20 +404,20 @@ const CreateModule = ({ params, data }: any) => {
                     name="description"
                     onChange={formik.handleChange}
                     value={formik.values.description}
-                    className={styles.fieldTextarea}
+                    className={"solid-field-textarea"}
                     rows={5}
                     cols={30}
                   />
                   {isFormFieldValid(formik, "description") && (
-                    <p className={styles.fieldError}>{formik?.errors?.description?.toString()}</p>
+                    <p className={"solid-field-error"}>{formik?.errors?.description?.toString()}</p>
                   )}
                 </div>
               </div>
             </div>
             <div className="mt-4 flex flex-wrap -mx-2 -mt-2">
               <div className="field w-full px-2 pt-2">
-                <div className={`${styles.fieldWrapper} relative`}>
-                  <label htmlFor="menuIconUrl" className={`${styles.fieldLabel} form-field-label`}>
+                <div className={`${"solid-field-wrapper"} relative`}>
+                  <label htmlFor="menuIconUrl" className={`${"solid-field-label"} form-field-label`}>
                     Menu Icon <small className="text-red-500 helper-text">(only png and jpeg are allowed)</small>
                   </label>
                   <div {...getRootPropsmenuIcon()} className="solid-dropzone-wrapper">
@@ -497,8 +497,8 @@ const CreateModule = ({ params, data }: any) => {
           <SolidPanel header={"Datasource Configuration"} className="solid-column-panel mt-4">
             <div className="mt-3 flex flex-wrap -mx-2 -mt-2">
               <div className="field w-full px-2 pt-2">
-                <div className={styles.fieldWrapper}>
-                  <label htmlFor="defaultDataSource" className={`${styles.fieldLabel} form-field-label`}>
+                <div className={"solid-field-wrapper"}>
+                  <label htmlFor="defaultDataSource" className={`${"solid-field-label"} form-field-label`}>
                     Default Data Source
                   </label>
                   <div className="solid-standard-autocomplete w-full">
@@ -515,7 +515,7 @@ const CreateModule = ({ params, data }: any) => {
                     />
                   </div>
                   {isFormFieldValid(formik, "defaultDataSource") && (
-                    <p className={styles.fieldError}>{formik?.errors?.defaultDataSource?.toString()}</p>
+                    <p className={"solid-field-error"}>{formik?.errors?.defaultDataSource?.toString()}</p>
                   )}
                 </div>
               </div>
diff --git a/src/components/core/solid-ai/SolidAiChat.tsx b/src/components/core/solid-ai/SolidAiChat.tsx
index 89c33b4b..2ce6d940 100644
--- a/src/components/core/solid-ai/SolidAiChat.tsx
+++ b/src/components/core/solid-ai/SolidAiChat.tsx
@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { loadSession } from "../../../adapters/auth/storage";
 import { SolidIcon, type SolidIconMeta, type SolidIconName } from "../../shad-cn-ui";
-import styles from "./SolidAiChat.module.css";
+import "./solid-ai-chat.css";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -17,7 +17,7 @@ interface Message {
     id: string;
     role: "user" | "assistant" | "event";
     content: string;
-    timestamp: Date;
+    aiTimestamp: Date;
     // event messages only
     eventState?: "active" | "done";
     // tool call events only
@@ -31,7 +31,7 @@ interface Message {
     toolOutputRaw?: string;
     // step tracking for dividers
     step?: number;
-    // error flag for styled error bubble
+    // error flag for styled error aiBubble
     isError?: boolean;
 }
 
@@ -88,7 +88,7 @@ function CopyButton({ text }: { text: string }) {
         setTimeout(() => setCopied(false), 2000);
     };
     return (
-        <button className={styles.CopyBtn} onClick={handleCopy} title="Copy" aria-label="Copy message">
+        <button className={"solid-ai-copy-btn"} onClick={handleCopy} title="Copy" aria-label="Copy message">
             <SolidIcon
                 name={copied ? "si-check" : "si-copy"}
                 style={{ fontSize: "11px" }}
@@ -108,10 +108,10 @@ function CodeBlock({ children, className }: { children?: React.ReactNode; classN
         setTimeout(() => setCopied(false), 2000);
     };
     return (
-        <div className={styles.CodeBlockWrapper}>
-            <div className={styles.CodeBlockHeader}>
-                <span className={styles.CodeLang}>{lang || "code"}</span>
-                <button className={styles.CodeCopyBtn} onClick={handleCopy}>
+        <div className={"solid-ai-code-block-wrapper"}>
+            <div className={"solid-ai-code-block-header"}>
+                <span className={"solid-ai-code-lang"}>{lang || "code"}</span>
+                <button className={"solid-ai-code-copy-btn"} onClick={handleCopy}>
                     <SolidIcon
                         name={copied ? "si-check" : "si-copy"}
                         style={{ fontSize: "11px" }}
@@ -120,7 +120,7 @@ function CodeBlock({ children, className }: { children?: React.ReactNode; classN
                     {copied ? "Copied" : "Copy"}
                 </button>
             </div>
-            <pre className={styles.CodePre}><code>{code}</code></pre>
+            <pre className={"solid-ai-code-pre"}><code>{code}</code></pre>
         </div>
     );
 }
@@ -130,16 +130,16 @@ const markdownComponents = {
         // Detect by className — only named fenced blocks (```lang) become CodeBlock.
         // Inline backticks and unnamed fenced blocks render as inline code.
         const isBlock = /language-/.test(className || "");
-        if (!isBlock) return <code className={styles.InlineCode} {...props}>{children}</code>;
+        if (!isBlock) return <code className={"solid-ai-inline-code"} {...props}>{children}</code>;
         return <CodeBlock className={className}>{children}</CodeBlock>;
     },
     pre({ children }: any) { return <>{children}</>; },
     table({ children }: any) {
-        return <div className={styles.MarkdownTableWrapper}><table>{children}</table></div>;
+        return <div className={"solid-ai-markdown-table-wrapper"}><table>{children}</table></div>;
     },
     a({ href, children }: any) {
         return (
-            <a href={href} target="_blank" rel="noopener noreferrer" className={styles.MarkdownLink}>
+            <a href={href} target="_blank" rel="noopener noreferrer" className={"solid-ai-markdown-link"}>
                 {children}
             </a>
         );
@@ -243,7 +243,7 @@ function parseToolResult(output: string): { status: Message["toolStatus"]; text:
 
 /**
  * Detects LLM metadata strings that should not be rendered as chat messages.
- * These include token counts, model info, finish_reason, and message-list summaries.
+ * These include token counts, model info, finish_reason, and solid-ai-message-list summaries.
  */
 function isLlmMetadata(content: string): boolean {
     if (!content) return true;
@@ -255,7 +255,7 @@ function isLlmMetadata(content: string): boolean {
 
 // ── Message grouping ──────────────────────────────────────────────────────────
 // Groups consecutive event + assistant messages into a single AI turn so we can
-// render the avatar once per turn rather than per message.
+// render the solid-ai-avatar once per turn rather than per message.
 
 type MsgGroup =
     | { kind: "user"; msg: Message }
@@ -294,7 +294,7 @@ function processHistoryEvents(backendMsgs: any[]): Message[] {
         const type = m.event_type;
         const data = m.event_data || {};
         const id = `hist-${m.id}`;
-        // The backend ISO timestamp or the current time as fallback.
+        // The backend ISO solid-ai-timestamp or the current time as fallback.
         const ts = m.timestamp ? new Date(m.timestamp) : new Date();
 
         switch (type) {
@@ -303,20 +303,20 @@ function processHistoryEvents(backendMsgs: any[]): Message[] {
                     id,
                     role: "user",
                     content: m.content || data.content || "",
-                    timestamp: ts,
+                    aiTimestamp: ts,
                 });
                 currentEventIdx = null;
                 break;
 
             case "AgentStarted":
             case "StepStarted":
-                // Create a "Thinking…" event row.
+                // Create a "Thinking…" event solid-ai-row.
                 currentEventIdx = result.length;
                 result.push({
                     id,
                     role: "event",
                     content: "Thinking…",
-                    timestamp: ts,
+                    aiTimestamp: ts,
                     eventState: "done",
                 });
                 break;
@@ -329,7 +329,7 @@ function processHistoryEvents(backendMsgs: any[]): Message[] {
                     id,
                     role: "event",
                     content: toolName,
-                    timestamp: ts,
+                    aiTimestamp: ts,
                     eventState: "done",
                     toolName,
                     toolDesc: describeToolArgs(toolArgs),
@@ -388,7 +388,7 @@ function processHistoryEvents(backendMsgs: any[]): Message[] {
                 if (!llmContent || isLlmMetadata(llmContent)) break;
                 const prevAssistantLlm = [...result].reverse().find(r => r.role === "assistant");
                 if (prevAssistantLlm?.content === llmContent) break;
-                result.push({ id, role: "assistant", content: llmContent, timestamp: ts });
+                result.push({ id, role: "assistant", content: llmContent, aiTimestamp: ts });
                 currentEventIdx = null;
                 break;
             }
@@ -397,7 +397,7 @@ function processHistoryEvents(backendMsgs: any[]): Message[] {
                 if (!tcContent) { currentEventIdx = null; break; }
                 const prevAssistantTc = [...result].reverse().find(r => r.role === "assistant");
                 if (prevAssistantTc?.content === tcContent) { currentEventIdx = null; break; }
-                result.push({ id, role: "assistant", content: tcContent, timestamp: ts });
+                result.push({ id, role: "assistant", content: tcContent, aiTimestamp: ts });
                 currentEventIdx = null;
                 break;
             }
@@ -413,21 +413,21 @@ function processHistoryEvents(backendMsgs: any[]): Message[] {
                     id,
                     role: "assistant",
                     content: `Error: ${data.error || m.content || "Unknown error"}`,
-                    timestamp: ts,
+                    aiTimestamp: ts,
                 });
                 currentEventIdx = null;
                 break;
 
             default:
                 if (m.role === "user") {
-                    result.push({ id, role: "user", content: m.content || "", timestamp: ts });
+                    result.push({ id, role: "user", content: m.content || "", aiTimestamp: ts });
                     currentEventIdx = null;
                 } else if (m.role === "assistant") {
                     const fallbackContent = m.content || "";
                     if (fallbackContent && !isLlmMetadata(fallbackContent)) {
                         const prevAst = [...result].reverse().find(r => r.role === "assistant");
                         if (prevAst?.content !== fallbackContent) {
-                            result.push({ id, role: "assistant", content: fallbackContent, timestamp: ts });
+                            result.push({ id, role: "assistant", content: fallbackContent, aiTimestamp: ts });
                         }
                     }
                     currentEventIdx = null;
@@ -572,7 +572,7 @@ export const SolidAiChat: React.FC = () => {
                     return;
                 }
 
-                // Add a new persistent event row, auto-freezing any previous live one.
+                // Add a new persistent event solid-ai-row, auto-freezing any previous live one.
                 // Pass extra fields (toolName, toolDesc, …) for tool card events.
                 const addEvent = (content: string, extra?: Partial<Message>) => {
                     const prevId = liveEventIdRef.current;
@@ -582,7 +582,7 @@ export const SolidAiChat: React.FC = () => {
                         const base = prevId
                             ? prev.map((m) => m.id === prevId ? { ...m, eventState: "done" as const } : m)
                             : prev;
-                        return [...base, { id, role: "event" as const, content, timestamp: new Date(), eventState: "active" as const, ...extra }];
+                        return [...base, { id, role: "event" as const, content, aiTimestamp: new Date(), eventState: "active" as const, ...extra }];
                     });
                 };
 
@@ -633,7 +633,7 @@ export const SolidAiChat: React.FC = () => {
                     case "StepStarted": {
                         const step: number = data.data?.step ?? 1;
                         currentStepRef.current = step;
-                        // Only create a "Thinking…" row when there's no active live event
+                        // Only create a "Thinking…" solid-ai-row when there's no active live event
                         // (e.g. step 2+ after tool results already froze the previous card).
                         if (!liveEventIdRef.current) addEvent("Thinking…", { step });
                         break;
@@ -675,7 +675,7 @@ export const SolidAiChat: React.FC = () => {
                         const delta: string = data.data?.delta ?? "";
                         if (!delta) break;
                         hasStreamedRef.current = true;
-                        // Freeze the live event row on the first token, then stream.
+                        // Freeze the live event solid-ai-row on the first token, then stream.
                         const evtId = liveEventIdRef.current;
                         liveEventIdRef.current = null;
                         setMessages((prev) => {
@@ -686,7 +686,7 @@ export const SolidAiChat: React.FC = () => {
                             if (last?.role === "assistant" && last.id.startsWith("stream-")) {
                                 return [...msgs.slice(0, -1), { ...last, content: last.content + delta }];
                             }
-                            return [...msgs, { id: `stream-${Date.now()}`, role: "assistant", content: delta, timestamp: new Date() }];
+                            return [...msgs, { id: `stream-${Date.now()}`, role: "assistant", content: delta, aiTimestamp: new Date() }];
                         });
                         break;
                     }
@@ -703,7 +703,7 @@ export const SolidAiChat: React.FC = () => {
                                     : prev;
                                 const lastAssistant = [...msgs].reverse().find(m => m.role === "assistant");
                                 if (!lastAssistant || lastAssistant.content !== llmContent) {
-                                    msgs = [...msgs, { id: `llm-${Date.now()}`, role: "assistant" as const, content: llmContent, timestamp: new Date() }];
+                                    msgs = [...msgs, { id: `llm-${Date.now()}`, role: "assistant" as const, content: llmContent, aiTimestamp: new Date() }];
                                 }
                                 return msgs;
                             });
@@ -756,7 +756,7 @@ export const SolidAiChat: React.FC = () => {
                                 const lastAssistant = [...msgs].reverse().find(m => m.role === "assistant");
                                 const alreadyRendered = lastAssistant && lastAssistant.content === content;
                                 if (!hasStreamedRef.current && !alreadyRendered) {
-                                    msgs = [...msgs, { id: `tc-${Date.now()}`, role: "assistant", content, timestamp: new Date() }];
+                                    msgs = [...msgs, { id: `tc-${Date.now()}`, role: "assistant", content, aiTimestamp: new Date() }];
                                 }
                             }
                             return msgs;
@@ -775,7 +775,7 @@ export const SolidAiChat: React.FC = () => {
                             const msgs = evtId
                                 ? prev.map((m) => m.id === evtId ? { ...m, eventState: "done" as const } : m)
                                 : prev;
-                            return [...msgs, { id: `err-${Date.now()}`, role: "assistant" as const, content: errMsg, timestamp: new Date(), isError: true }];
+                            return [...msgs, { id: `err-${Date.now()}`, role: "assistant" as const, content: errMsg, aiTimestamp: new Date(), isError: true }];
                         });
                         break;
                     }
@@ -824,7 +824,7 @@ export const SolidAiChat: React.FC = () => {
         hasStreamedRef.current = false;
         currentStepRef.current = null;
         liveEventIdRef.current = null;
-        setMessages((prev) => [...prev, { id: `u-${Date.now()}`, role: "user", content: trimmed, timestamp: new Date() }]);
+        setMessages((prev) => [...prev, { id: `u-${Date.now()}`, role: "user", content: trimmed, aiTimestamp: new Date() }]);
         wsRef.current?.send(JSON.stringify({ action: "message", session_id: sessionId, content: trimmed }));
         setInput("");
         if (textareaRef.current) {
@@ -922,12 +922,12 @@ export const SolidAiChat: React.FC = () => {
 
     // ── Render ────────────────────────────────────────────────────────────────
     return (
-        <div className={styles.Container}>
+        <div className={"solid-ai-container"}>
 
             {/* ── Header ── */}
-            <header className={styles.Header}>
-                <span className={`${styles.StatusDot} ${isProcessing ? styles.StatusRunning : isConnected ? styles.StatusOnline : styles.StatusOffline}`} />
-                <span className={styles.StatusLabel}>
+            <header className={"solid-ai-header"}>
+                <span className={`${"solid-ai-status-dot"} ${isProcessing ? "solid-ai-status-running" : isConnected ? "solid-ai-status-online" : "solid-ai-status-offline"}`} />
+                <span className={"solid-ai-status-label"}>
                     <SolidIcon
                         name={isConnected ? "si-wifi" : "si-times-circle"}
                         style={{ fontSize: "11px" }}
@@ -936,50 +936,50 @@ export const SolidAiChat: React.FC = () => {
                     {isConnected ? (isProcessing ? "Running…" : sessionId ? "Connected" : "Starting…") : "Offline"}
                 </span>
 
-                <div className={styles.HeaderSpacer} />
+                <div className={"solid-ai-header-spacer"} />
 
-                <button className={styles.NewChatHeaderBtn} onClick={handleNewChat} title="New conversation">
+                <button className={"solid-ai-new-chat-header-btn"} onClick={handleNewChat} title="New conversation">
                     <SolidIcon name="si-plus" style={{ fontSize: "10px" }} aria-hidden />
                     New Chat
                 </button>
 
                 {/* Hamburger + sessions dropdown — rightmost */}
-                <div className={styles.SessionMenuAnchor} ref={sessionMenuRef}>
-                    <button className={styles.HamburgerBtn} onClick={handleToggleSessionMenu} title="Session history" aria-label="Open session history">
+                <div className={"solid-ai-session-menu-anchor"} ref={sessionMenuRef}>
+                    <button className={"solid-ai-hamburger-btn"} onClick={handleToggleSessionMenu} title="Session history" aria-label="Open session history">
                         <SolidIcon name="si-bars" style={{ fontSize: "13px" }} aria-hidden />
                     </button>
 
                     {showSessionMenu && (
-                        <div className={styles.SessionMenu}>
-                            <button className={styles.SessionMenuNewChat} onClick={handleNewChat}>
+                        <div className={"solid-ai-session-menu"}>
+                            <button className={"solid-ai-session-menu-new-chat"} onClick={handleNewChat}>
                                 <SolidIcon name="si-plus" style={{ fontSize: "12px" }} aria-hidden />
                                 New Chat
                             </button>
-                            <div className={styles.SessionMenuSectionLabel}>Recent Sessions</div>
-                            <div className={styles.SessionList}>
+                            <div className={"solid-ai-session-menu-section-label"}>Recent Sessions</div>
+                            <div className={"solid-ai-session-list"}>
                                 {isLoadingSessions ? (
-                                    <div className={styles.SessionMenuLoading}>
+                                    <div className={"solid-ai-session-menu-loading"}>
                                         <SolidIcon name="si-spinner" spin style={{ fontSize: "11px" }} aria-hidden />
                                         Loading…
                                     </div>
                                 ) : sessions.length === 0 ? (
-                                    <div className={styles.SessionMenuEmpty}>No past sessions found</div>
+                                    <div className={"solid-ai-session-menu-empty"}>No past sessions found</div>
                                 ) : (
                                     sessions.map((s) => (
                                         <div
                                             key={s.session_id}
-                                            className={`${styles.SessionItem} ${s.session_id === activeHistoryId ? styles.SessionItemActive : ""}`}
+                                            className={`${"solid-ai-session-item"} ${s.session_id === activeHistoryId ? "solid-ai-session-item-active" : ""}`}
                                             onClick={() => handleSelectSession(s.session_id)}
                                         >
-                                            <div className={styles.SessionItemMain}>
-                                                <span className={styles.SessionItemPreview}>{s.preview || "New conversation"}</span>
-                                                <span className={styles.SessionItemMeta}>
+                                            <div className={"solid-ai-session-item-main"}>
+                                                <span className={"solid-ai-session-item-preview"}>{s.preview || "New conversation"}</span>
+                                                <span className={"solid-ai-session-item-meta"}>
                                                     {formatSessionDate(s.created_at)}
                                                     {s.total_steps > 0 && ` · ${s.total_steps} turn${s.total_steps !== 1 ? "s" : ""}`}
                                                 </span>
                                             </div>
                                             <button
-                                                className={styles.SessionDeleteBtn}
+                                                className={"solid-ai-session-delete-btn"}
                                                 onClick={(e) => handleDeleteSession(e, s.session_id)}
                                                 disabled={isDeletingSessionId === s.session_id}
                                                 title="Delete conversation"
@@ -1002,17 +1002,17 @@ export const SolidAiChat: React.FC = () => {
 
             {/* ── Reconnecting banner ── */}
             {!isConnected && (
-                <div className={styles.ReconnectBanner}>
+                <div className={"solid-ai-reconnect-banner"}>
                     <SolidIcon name="si-spinner" spin style={{ fontSize: "11px" }} aria-hidden />
                     Reconnecting…
                 </div>
             )}
 
             {/* ── Message list ── */}
-            <div className={styles.MessageList} ref={scrollRef}>
+            <div className={"solid-ai-message-list"} ref={scrollRef}>
                 {hasMoreHistory && (
-                    <div className={styles.LoadOlderWrap}>
-                        <button className={styles.LoadOlderBtn} onClick={handleLoadOlder} disabled={isLoadingHistory}>
+                    <div className={"solid-ai-load-older-wrap"}>
+                        <button className={"solid-ai-load-older-btn"} onClick={handleLoadOlder} disabled={isLoadingHistory}>
                             {isLoadingHistory
                                 ? (
                                     <>
@@ -1032,19 +1032,19 @@ export const SolidAiChat: React.FC = () => {
                 )}
 
                 {isLoadingHistory && messages.length === 0 && (
-                    <div className={styles.HistoryLoading}>
+                    <div className={"solid-ai-history-loading"}>
                         <SolidIcon name="si-spinner" spin style={{ fontSize: "16px" }} aria-hidden />
                         <span>Loading conversation…</span>
                     </div>
                 )}
 
                 {messages.length === 0 && !isLoadingHistory && (
-                    <div className={styles.EmptyState}>
-                        <div className={styles.EmptyIcon}>
+                    <div className={"solid-ai-empty-state"}>
+                        <div className={"solid-ai-empty-icon"}>
                             <SolidIcon name="si-comments" style={{ fontSize: "28px" }} aria-hidden />
                         </div>
-                        <p className={styles.EmptyTitle}>How can I help you today?</p>
-                        <p className={styles.EmptySubtitle}>Ask me anything about your SolidX project.</p>
+                        <p className={"solid-ai-empty-title"}>How can I help you today?</p>
+                        <p className={"solid-ai-empty-subtitle"}>Ask me anything about your SolidX project.</p>
                     </div>
                 )}
 
@@ -1053,18 +1053,18 @@ export const SolidAiChat: React.FC = () => {
                     if (group.kind === "user") {
                         const msg = group.msg;
                         return (
-                            <div key={msg.id} className={`${styles.Row} ${styles.RowUser}`}>
+                            <div key={msg.id} className={`${"solid-ai-row"} ${"solid-ai-row-user"}`}>
                                 {/* Avatar first in DOM → rightmost with row-reverse */}
-                                <div className={`${styles.Avatar} ${styles.AvatarUser}`}>
+                                <div className={`${"solid-ai-avatar"} ${"solid-ai-avatar-user"}`}>
                                     <SolidIcon name="si-user" style={{ fontSize: "12px" }} aria-hidden />
                                 </div>
-                                <div className={styles.BubbleGroup}>
-                                    <div className={`${styles.Bubble} ${styles.BubbleUser}`}>
-                                        <p className={styles.UserText}>{msg.content}</p>
+                                <div className={"solid-ai-bubble-group"}>
+                                    <div className={`${"solid-ai-bubble"} ${"solid-ai-bubble-user"}`}>
+                                        <p className={"solid-ai-user-text"}>{msg.content}</p>
                                     </div>
-                                    <div className={`${styles.BubbleMeta} ${styles.BubbleMetaUser}`}>
-                                        <span className={styles.Timestamp}>
-                                            {msg.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                                    <div className={`${"solid-ai-bubble-meta"} ${"solid-ai-bubble-meta-user"}`}>
+                                        <span className={"solid-ai-timestamp"}>
+                                            {msg.aiTimestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                                         </span>
                                         <CopyButton text={msg.content} />
                                     </div>
@@ -1073,13 +1073,13 @@ export const SolidAiChat: React.FC = () => {
                         );
                     }
 
-                    // ── AI turn: avatar once, events + response stacked ─────
+                    // ── AI turn: solid-ai-avatar once, events + response stacked ─────
                     return (
-                        <div key={group.groupKey} className={styles.AiTurnGroup}>
-                            <div className={styles.Avatar}>
+                        <div key={group.groupKey} className={"solid-ai-turn-group"}>
+                            <div className={"solid-ai-avatar"}>
                                 <SolidIcon name="si-android" style={{ fontSize: "12px" }} aria-hidden />
                             </div>
-                            <div className={styles.AiTurnContent}>
+                            <div className={"solid-ai-turn-content"}>
                                 {group.msgs.flatMap((msg) => {
                                     const items: React.ReactNode[] = [];
 
@@ -1089,10 +1089,10 @@ export const SolidAiChat: React.FC = () => {
                                         // ── Tool call card ──────────────────────────────
                                         if (msg.toolName) {
                                             const status = msg.toolStatus || (active ? "running" : "success");
-                                            const cardClass = status === "running" ? styles.ToolCardRunning :
-                                                status === "warning" ? styles.ToolCardWarning :
-                                                    status === "error" ? styles.ToolCardError :
-                                                        styles.ToolCardDone;
+                                            const cardClass = status === "running" ? "solid-ai-tool-card-running" :
+                                                status === "warning" ? "solid-ai-tool-card-warning" :
+                                                    status === "error" ? "solid-ai-tool-card-error" :
+                                                        "solid-ai-tool-card-done";
 
                                             const statusIcon: SolidIconMeta = status === "running"
                                                 ? { name: "si-spinner", spin: true }
@@ -1102,10 +1102,10 @@ export const SolidAiChat: React.FC = () => {
                                                         ? { name: "si-times-circle" }
                                                         : { name: "si-check-circle" };
 
-                                            const statusIconClass = status === "warning" ? styles.ToolCardStatusWarning :
-                                                status === "error" ? styles.ToolCardStatusError :
-                                                    status === "success" ? styles.ToolCardStatusDone :
-                                                        styles.ToolCardStatusIcon;
+                                            const statusIconClass = status === "warning" ? "solid-ai-tool-card-status-warning" :
+                                                status === "error" ? "solid-ai-tool-card-status-error" :
+                                                    status === "success" ? "solid-ai-tool-card-status-done" :
+                                                        "solid-ai-tool-card-status-icon";
 
                                             const hasExpandable = !!msg.toolOutput || !!msg.toolArgs;
                                             const isExpanded = expandedToolIds.has(msg.id);
@@ -1118,9 +1118,9 @@ export const SolidAiChat: React.FC = () => {
                                                 : undefined;
 
                                             items.push(
-                                                <div key={msg.id} className={`${styles.ToolCard} ${cardClass}`}>
+                                                <div key={msg.id} className={`${"solid-ai-tool-card"} ${cardClass}`}>
                                                     <button
-                                                        className={styles.ToolCardHeaderBtn}
+                                                        className={"solid-ai-tool-card-header-btn"}
                                                         onClick={toggleExpand}
                                                         data-expandable={hasExpandable && status !== "running" ? "true" : undefined}
                                                     >
@@ -1132,60 +1132,60 @@ export const SolidAiChat: React.FC = () => {
                                                         />
                                                         <SolidIcon
                                                             name={getToolIconName(msg.toolName ?? "")}
-                                                            className={styles.ToolCardToolIcon}
+                                                            className={"solid-ai-tool-card-tool-icon"}
                                                             aria-hidden
                                                         />
-                                                        <span className={styles.ToolCardName}>{msg.toolName}</span>
-                                                        {msg.toolDesc && <span className={styles.ToolCardDesc} title={msg.toolDesc}>{msg.toolDesc}</span>}
-                                                        <span className={styles.ToolCardBadge}>{getToolCategory(msg.toolName)}</span>
+                                                        <span className={"solid-ai-tool-card-name"}>{msg.toolName}</span>
+                                                        {msg.toolDesc && <span className={"solid-ai-tool-card-desc"} title={msg.toolDesc}>{msg.toolDesc}</span>}
+                                                        <span className={"solid-ai-tool-card-badge"}>{getToolCategory(msg.toolName)}</span>
                                                         {msg.durationMs != null && (
-                                                            <span className={styles.ToolCardDuration}>{formatDuration(msg.durationMs)}</span>
+                                                            <span className={"solid-ai-tool-card-duration"}>{formatDuration(msg.durationMs)}</span>
                                                         )}
                                                         {hasExpandable && status !== "running" && (
                                                             <SolidIcon
                                                                 name="si-chevron-right"
-                                                                className={`${styles.ToolCardChevron} ${isExpanded ? styles.ToolCardChevronOpen : ""}`}
+                                                                className={`${"solid-ai-tool-card-chevron"} ${isExpanded ? "solid-ai-tool-card-chevron-open" : ""}`}
                                                                 aria-hidden
                                                             />
                                                         )}
                                                     </button>
                                                     {/* Progress substeps: always visible */}
                                                     {msg.toolProgress && msg.toolProgress.length > 0 && (
-                                                        <div className={styles.ToolCardProgress}>
+                                                        <div className={"solid-ai-tool-card-progress"}>
                                                             {msg.toolProgress.map((p, i) => (
-                                                                <div key={i} className={`${styles.ToolProgressItem} ${p.status === "running" ? styles.ToolProgressRunning : styles.ToolProgressDone}`}>
+                                                                <div key={i} className={`${"solid-ai-tool-progress-item"} ${p.status === "running" ? "solid-ai-tool-progress-running" : "solid-ai-tool-progress-done"}`}>
                                                                     <SolidIcon
                                                                         name={p.status === "running" ? "si-spinner" : "si-check-circle"}
                                                                         spin={p.status === "running"}
                                                                         style={{ fontSize: "10px" }}
                                                                         aria-hidden
                                                                     />
-                                                                    <span className={styles.ToolProgressLabel}>{p.label}</span>
+                                                                    <span className={"solid-ai-tool-progress-label"}>{p.label}</span>
                                                                     {p.durationMs != null && p.status === "done" && (
-                                                                        <span className={styles.ToolProgressDuration}>{formatDuration(p.durationMs)}</span>
+                                                                        <span className={"solid-ai-tool-progress-duration"}>{formatDuration(p.durationMs)}</span>
                                                                     )}
                                                                 </div>
                                                             ))}
                                                         </div>
                                                     )}
                                                     {isExpanded && (msg.toolArgs || msg.toolOutput) && (
-                                                        <div className={styles.ToolCardExpandable}>
+                                                        <div className={"solid-ai-tool-card-expandable"}>
                                                             {msg.toolArgs && Object.keys(msg.toolArgs).length > 0 && (
-                                                                <div className={styles.ToolCardOutput}>
-                                                                    <div className={styles.ToolOutputHeader}>
+                                                                <div className={"solid-ai-tool-card-output"}>
+                                                                    <div className={"solid-ai-tool-output-header"}>
                                                                         <span>Arguments</span>
                                                                     </div>
-                                                                    <pre className={styles.ToolOutputText}>
+                                                                    <pre className={"solid-ai-tool-output-text"}>
                                                                         {JSON.stringify(msg.toolArgs, null, 2)}
                                                                     </pre>
                                                                 </div>
                                                             )}
                                                             {msg.toolOutput && (
-                                                                <div className={styles.ToolCardOutput}>
-                                                                    <div className={styles.ToolOutputHeader}>
+                                                                <div className={"solid-ai-tool-card-output"}>
+                                                                    <div className={"solid-ai-tool-output-header"}>
                                                                         <span>Result</span>
                                                                     </div>
-                                                                    <pre className={`${styles.ToolOutputText} ${status === "warning" ? styles.ToolOutputWarning : status === "error" ? styles.ToolOutputError : ""}`}>
+                                                                    <pre className={`${"solid-ai-tool-output-text"} ${status === "warning" ? "solid-ai-tool-output-warning" : status === "error" ? "solid-ai-tool-output-error" : ""}`}>
                                                                         {msg.toolOutputRaw || msg.toolOutput}
                                                                     </pre>
                                                                 </div>
@@ -1197,32 +1197,32 @@ export const SolidAiChat: React.FC = () => {
                                             return items;
                                         }
 
-                                        // ── Thinking bubble: only show while active ──────
+                                        // ── Thinking solid-ai-bubble: only show while active ──────
                                         if (active) {
                                             items.push(
-                                                <div key={msg.id} className={styles.ThinkingBubble}>
-                                                    <div className={styles.ThinkingDots}>
-                                                        <span className={styles.ThinkingDot} />
-                                                        <span className={styles.ThinkingDot} />
-                                                        <span className={styles.ThinkingDot} />
+                                                <div key={msg.id} className={"solid-ai-thinking-bubble"}>
+                                                    <div className={"solid-ai-thinking-dots"}>
+                                                        <span className={"solid-ai-thinking-dot"} />
+                                                        <span className={"solid-ai-thinking-dot"} />
+                                                        <span className={"solid-ai-thinking-dot"} />
                                                     </div>
-                                                    <span className={styles.ThinkingLabel}>Thinking…</span>
+                                                    <span className={"solid-ai-thinking-label"}>Thinking…</span>
                                                 </div>
                                             );
                                         }
                                         return items;
                                     }
 
-                                    // ── Error bubble ────────────────────────────────────
+                                    // ── Error solid-ai-bubble ────────────────────────────────────
                                     if (msg.isError) {
                                         items.push(
-                                            <div key={msg.id} className={styles.ErrorBubble}>
-                                                <div className={styles.ErrorIcon}>
+                                            <div key={msg.id} className={"solid-ai-error-bubble"}>
+                                                <div className={"solid-ai-error-icon"}>
                                                     <SolidIcon name="si-exclamation-circle" style={{ fontSize: "13px" }} aria-hidden />
                                                 </div>
-                                                <div className={styles.ErrorContent}>
-                                                    <p className={styles.ErrorTitle}>Error</p>
-                                                    <p className={styles.ErrorText}>{msg.content}</p>
+                                                <div className={"solid-ai-error-content"}>
+                                                    <p className={"solid-ai-error-title"}>Error</p>
+                                                    <p className={"solid-ai-error-text"}>{msg.content}</p>
                                                 </div>
                                             </div>
                                         );
@@ -1232,18 +1232,18 @@ export const SolidAiChat: React.FC = () => {
                                     // ── Assistant message ───────────────────────────────
                                     const isStreaming = msg.id.startsWith("stream-") && isProcessing;
                                     items.push(
-                                        <div key={msg.id} className={styles.BubbleGroup}>
-                                            <div className={`${styles.Bubble} ${styles.BubbleAssistant}`}>
-                                                <div className={styles.MarkdownRoot}>
+                                        <div key={msg.id} className={"solid-ai-bubble-group"}>
+                                            <div className={`${"solid-ai-bubble"} ${"solid-ai-bubble-assistant"}`}>
+                                                <div className={"solid-ai-markdown-root"}>
                                                     <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
                                                         {msg.content}
                                                     </ReactMarkdown>
                                                 </div>
-                                                {isStreaming && <span className={styles.StreamingCursor} />}
+                                                {isStreaming && <span className={"solid-ai-streaming-cursor"} />}
                                             </div>
-                                            <div className={`${styles.BubbleMeta} ${styles.BubbleMetaAssistant}`}>
-                                                <span className={styles.Timestamp}>
-                                                    {msg.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                                            <div className={`${"solid-ai-bubble-meta"} ${"solid-ai-bubble-meta-assistant"}`}>
+                                                <span className={"solid-ai-timestamp"}>
+                                                    {msg.aiTimestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                                                 </span>
                                                 <CopyButton text={msg.content} />
                                             </div>
@@ -1258,11 +1258,11 @@ export const SolidAiChat: React.FC = () => {
             </div>
 
             {/* ── Input area ── */}
-            <div className={styles.InputArea}>
-                <div className={`${styles.InputBox} ${!isConnected || !sessionId ? styles.InputBoxDisabled : ""}`}>
+            <div className={"solid-ai-input-area"}>
+                <div className={`${"solid-ai-input-box"} ${!isConnected || !sessionId ? "solid-ai-input-box-disabled" : ""}`}>
                     <textarea
                         ref={textareaRef}
-                        className={styles.Textarea}
+                        className={"solid-ai-textarea"}
                         placeholder={inputPlaceholder}
                         value={input}
                         onChange={autoResize}
@@ -1271,7 +1271,7 @@ export const SolidAiChat: React.FC = () => {
                         rows={1}
                     />
                     <button
-                        className={`${styles.SendBtn} ${canSend ? styles.SendBtnActive : ""}`}
+                        className={`${"solid-ai-send-btn"} ${canSend ? "solid-ai-send-btn-active" : ""}`}
                         disabled={!canSend}
                         onClick={handleSend}
                         aria-label="Send message"
diff --git a/src/components/core/solid-ai/SolidAiChat.module.css b/src/components/core/solid-ai/solid-ai-chat.css
similarity index 75%
rename from src/components/core/solid-ai/SolidAiChat.module.css
rename to src/components/core/solid-ai/solid-ai-chat.css
index bf39e9b7..b6e5e1ce 100644
--- a/src/components/core/solid-ai/SolidAiChat.module.css
+++ b/src/components/core/solid-ai/solid-ai-chat.css
@@ -5,7 +5,7 @@
 ───────────────────────────────────────────────────────────────────────────── */
 
 /* ── Container ── */
-.Container {
+.solid-ai-container {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -19,7 +19,7 @@
 }
 
 /* ── Header ── */
-.Header {
+.solid-ai-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -31,7 +31,7 @@
     flex-shrink: 0;
 }
 
-.NewChatHeaderBtn {
+.solid-ai-new-chat-header-btn {
     display: inline-flex;
     align-items: center;
     gap: 5px;
@@ -50,52 +50,33 @@
     transition: background 0.12s, color 0.12s, border-color 0.12s;
 }
 
-.NewChatHeaderBtn:hover {
+.solid-ai-new-chat-header-btn:hover {
     background: var(--accent);
     color: var(--accent-foreground);
     border-color: var(--solid-border-strong, var(--border));
 }
 
-.HeaderSpacer {
+.solid-ai-header-spacer {
     flex: 1;
 }
 
-.LogoBadge {
-    width: 26px;
-    height: 26px;
-    border-radius: 7px;
-    background: linear-gradient(135deg, var(--primary), #8b5cf6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--primary-foreground);
-    flex-shrink: 0;
-}
-
-.HeaderTitle {
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-    color: var(--foreground);
-}
-
-.StatusDot {
+.solid-ai-status-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     flex-shrink: 0;
 }
 
-.StatusOnline {
+.solid-ai-status-online {
     background: #22c55e;
     box-shadow: 0 0 5px #22c55e66;
 }
 
-.StatusOffline {
+.solid-ai-status-offline {
     background: #ef4444;
 }
 
-.StatusLabel {
+.solid-ai-status-label {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -104,7 +85,7 @@
 }
 
 /* ── Hamburger button ── */
-.HamburgerBtn {
+.solid-ai-hamburger-btn {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -119,19 +100,19 @@
     flex-shrink: 0;
 }
 
-.HamburgerBtn:hover {
+.solid-ai-hamburger-btn:hover {
     background: var(--accent);
     color: var(--accent-foreground);
     border-color: var(--solid-border-strong, var(--border));
 }
 
 /* ── Sessions menu anchor ── */
-.SessionMenuAnchor {
+.solid-ai-session-menu-anchor {
     position: relative;
 }
 
 /* ── Sessions dropdown ── */
-.SessionMenu {
+.solid-ai-session-menu {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
@@ -157,7 +138,7 @@
     }
 }
 
-.SessionMenuNewChat {
+.solid-ai-session-menu-new-chat {
     display: flex;
     align-items: center;
     gap: 7px;
@@ -174,11 +155,11 @@
     transition: background 0.12s;
 }
 
-.SessionMenuNewChat:hover {
+.solid-ai-session-menu-new-chat:hover {
     background: var(--accent);
 }
 
-.SessionMenuSectionLabel {
+.solid-ai-session-menu-section-label {
     padding: 8px 13px 5px;
     font-size: 10px;
     font-weight: 600;
@@ -187,23 +168,23 @@
     letter-spacing: 0.07em;
 }
 
-.SessionList {
+.solid-ai-session-list {
     max-height: 296px;
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--border) transparent;
 }
 
-.SessionList::-webkit-scrollbar {
+.solid-ai-session-list::-webkit-scrollbar {
     width: 4px;
 }
 
-.SessionList::-webkit-scrollbar-thumb {
+.solid-ai-session-list::-webkit-scrollbar-thumb {
     background: var(--border);
     border-radius: 4px;
 }
 
-.SessionItem {
+.solid-ai-session-item {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -215,15 +196,15 @@
     transition: background 0.12s;
 }
 
-.SessionItem:first-child {
+.solid-ai-session-item:first-child {
     border-top: none;
 }
 
-.SessionItemActive {
+.solid-ai-session-item-active {
     background: var(--accent) !important;
 }
 
-.SessionItemMain {
+.solid-ai-session-item-main {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -235,11 +216,11 @@
     transition: background 0.1s;
 }
 
-.SessionItemMain:hover {
+.solid-ai-session-item-main:hover {
     background: var(--accent);
 }
 
-.SessionItemPreview {
+.solid-ai-session-item-preview {
     font-size: 12px;
     color: var(--foreground);
     white-space: nowrap;
@@ -248,12 +229,12 @@
     max-width: 100%;
 }
 
-.SessionItemMeta {
+.solid-ai-session-item-meta {
     font-size: 10px;
     color: var(--muted);
 }
 
-.SessionDeleteBtn {
+.solid-ai-session-delete-btn {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -269,24 +250,24 @@
     margin-right: 4px;
 }
 
-.SessionDeleteBtn:hover:not(:disabled) {
+.solid-ai-session-delete-btn:hover:not(:disabled) {
     background: rgba(239, 68, 68, 0.1);
     color: #ef4444;
 }
 
-.SessionDeleteBtn:disabled {
+.solid-ai-session-delete-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
 
-.SessionMenuEmpty {
+.solid-ai-session-menu-empty {
     padding: 20px 13px;
     text-align: center;
     font-size: 12px;
     color: var(--muted);
 }
 
-.SessionMenuLoading {
+.solid-ai-session-menu-loading {
     padding: 16px 13px;
     display: flex;
     align-items: center;
@@ -297,7 +278,7 @@
 }
 
 /* ── Reconnecting banner ── */
-.ReconnectBanner {
+.solid-ai-reconnect-banner {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -311,7 +292,7 @@
 }
 
 /* ── Message list ── */
-.MessageList {
+.solid-ai-message-list {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
@@ -323,17 +304,17 @@
     scrollbar-color: var(--border) transparent;
 }
 
-.MessageList::-webkit-scrollbar {
+.solid-ai-message-list::-webkit-scrollbar {
     width: 4px;
 }
 
-.MessageList::-webkit-scrollbar-thumb {
+.solid-ai-message-list::-webkit-scrollbar-thumb {
     background: var(--border);
     border-radius: 4px;
 }
 
 /* ── Empty state ── */
-.EmptyState {
+.solid-ai-empty-state {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -344,7 +325,7 @@
     text-align: center;
 }
 
-.EmptyIcon {
+.solid-ai-empty-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
@@ -358,21 +339,21 @@
     opacity: 0.8;
 }
 
-.EmptyTitle {
+.solid-ai-empty-title {
     font-size: 15px;
     font-weight: 600;
     color: var(--foreground);
     opacity: 0.7;
 }
 
-.EmptySubtitle {
+.solid-ai-empty-subtitle {
     font-size: 12px;
     color: var(--muted-foreground);
     opacity: 0.7;
 }
 
 /* ── AI turn group (avatar once + all events/responses) ── */
-.AiTurnGroup {
+.solid-ai-turn-group {
     display: flex;
     align-items: flex-start;
     gap: 9px;
@@ -380,7 +361,7 @@
     width: 100%;
 }
 
-.AiTurnContent {
+.solid-ai-turn-content {
     display: flex;
     flex-direction: column;
     gap: 5px;
@@ -389,7 +370,7 @@
 }
 
 /* ── Message rows ── */
-.Row {
+.solid-ai-row {
     display: flex;
     align-items: flex-start;
     gap: 9px;
@@ -397,19 +378,14 @@
     width: 100%;
 }
 
-.RowUser {
+.solid-ai-row-user {
     flex-direction: row-reverse;
     align-self: flex-end;
     margin-left: auto;
 }
 
-.RowAssistant {
-    flex-direction: row;
-    align-self: flex-start;
-}
-
 /* ── Avatar ── */
-.Avatar {
+.solid-ai-avatar {
     width: 26px;
     height: 26px;
     border-radius: 7px;
@@ -423,13 +399,13 @@
     margin-top: 2px;
 }
 
-.AvatarUser {
+.solid-ai-avatar-user {
     background: var(--accent);
     color: var(--accent-foreground);
 }
 
 /* ── Bubble group ── */
-.BubbleGroup {
+.solid-ai-bubble-group {
     display: flex;
     flex-direction: column;
     gap: 3px;
@@ -437,7 +413,7 @@
     max-width: calc(100% - 70px);
 }
 
-.Bubble {
+.solid-ai-bubble {
     border-radius: 14px;
     padding: 9px 13px;
     line-height: 1.65;
@@ -445,27 +421,27 @@
     position: relative;
 }
 
-.BubbleUser {
+.solid-ai-bubble-user {
     background: var(--accent);
     border: 1px solid var(--solid-border-strong, var(--border));
     border-bottom-right-radius: 4px;
     color: var(--accent-foreground);
 }
 
-.BubbleAssistant {
+.solid-ai-bubble-assistant {
     background: var(--card);
     border: 1px solid var(--border);
     color: var(--foreground);
 }
 
-.UserText {
+.solid-ai-user-text {
     font-size: 14px;
     margin: 0;
     white-space: pre-wrap;
 }
 
 /* ── Bubble meta ── */
-.BubbleMeta {
+.solid-ai-bubble-meta {
     display: flex;
     align-items: center;
     gap: 5px;
@@ -474,26 +450,26 @@
     height: 18px;
 }
 
-.Row:hover .BubbleMeta,
-.AiTurnGroup:hover .BubbleMeta {
+.solid-ai-row:hover .solid-ai-bubble-meta,
+.solid-ai-turn-group:hover .solid-ai-bubble-meta {
     opacity: 1;
 }
 
-.BubbleMetaUser {
+.solid-ai-bubble-meta-user {
     flex-direction: row-reverse;
 }
 
-.BubbleMetaAssistant {
+.solid-ai-bubble-meta-assistant {
     flex-direction: row;
 }
 
-.Timestamp {
+.solid-ai-timestamp {
     font-size: 10px;
     color: var(--muted);
 }
 
 /* ── Copy button ── */
-.CopyBtn {
+.solid-ai-copy-btn {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -507,57 +483,24 @@
     transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 
-.CopyBtn:hover {
+.solid-ai-copy-btn:hover {
     background: var(--primary);
     color: var(--primary-foreground);
     border-color: var(--primary);
 }
 
 /* ── Typing dots (kept for reference, no longer used in JSX) ── */
-.TypingBubble {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 11px 14px;
-}
 
 /* ── Agent status bubble ── */
-.StatusBubble {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    padding: 7px 12px;
-    color: var(--primary);
-}
-
-.StatusText {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 12px;
-    color: var(--muted-foreground);
-    font-style: italic;
-}
-
-.StatusStep {
-    color: var(--foreground);
-    font-style: normal;
-    font-weight: 500;
-}
-
-.StatusSep {
-    color: var(--muted);
-    font-style: normal;
-}
 
 /* ── Load older messages ── */
-.LoadOlderWrap {
+.solid-ai-load-older-wrap {
     display: flex;
     justify-content: center;
     padding-bottom: 6px;
 }
 
-.LoadOlderBtn {
+.solid-ai-load-older-btn {
     display: flex;
     align-items: center;
     gap: 5px;
@@ -571,19 +514,19 @@
     transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 
-.LoadOlderBtn:hover:not(:disabled) {
+.solid-ai-load-older-btn:hover:not(:disabled) {
     background: var(--accent);
     color: var(--primary);
     border-color: var(--primary);
 }
 
-.LoadOlderBtn:disabled {
+.solid-ai-load-older-btn:disabled {
     opacity: 0.6;
     cursor: default;
 }
 
 /* ── History loading spinner ── */
-.HistoryLoading {
+.solid-ai-history-loading {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -596,34 +539,6 @@
 }
 
 /* ── Tool activity indicator ── */
-.ToolBubble {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    padding: 8px 13px;
-    color: var(--primary);
-}
-
-.ToolLabel {
-    font-size: 12px;
-    color: var(--muted-foreground);
-}
-
-.Dot {
-    width: 5px;
-    height: 5px;
-    background: var(--primary);
-    border-radius: 50%;
-    animation: bounce 1.2s infinite;
-}
-
-.Dot:nth-child(2) {
-    animation-delay: 0.2s;
-}
-
-.Dot:nth-child(3) {
-    animation-delay: 0.4s;
-}
 
 @keyframes bounce {
 
@@ -641,67 +556,67 @@
 }
 
 /* ── Markdown ── */
-.MarkdownRoot {
+.solid-ai-markdown-root {
     font-size: inherit;
     font-family: inherit;
     line-height: 1.65;
     color: inherit;
 }
 
-.MarkdownRoot > *:first-child {
+.solid-ai-markdown-root > *:first-child {
     margin-top: 0 !important;
 }
 
-.MarkdownRoot > *:last-child {
+.solid-ai-markdown-root > *:last-child {
     margin-bottom: 0 !important;
 }
 
-.MarkdownRoot p {
+.solid-ai-markdown-root p {
     margin: 0 0 8px;
 }
 
-.MarkdownRoot p:last-child {
+.solid-ai-markdown-root p:last-child {
     margin-bottom: 0;
 }
 
-.MarkdownRoot h1,
-.MarkdownRoot h2,
-.MarkdownRoot h3 {
+.solid-ai-markdown-root h1,
+.solid-ai-markdown-root h2,
+.solid-ai-markdown-root h3 {
     font-weight: 600;
     margin: 16px 0 4px;
     color: inherit;
     line-height: 1.3;
 }
 
-.MarkdownRoot h1 {
+.solid-ai-markdown-root h1 {
     font-size: 1.15em;
 }
 
-.MarkdownRoot h2 {
+.solid-ai-markdown-root h2 {
     font-size: 1.05em;
 }
 
-.MarkdownRoot h3 {
+.solid-ai-markdown-root h3 {
     font-size: 1em;
     opacity: 0.85;
 }
 
-.MarkdownRoot ul,
-.MarkdownRoot ol {
+.solid-ai-markdown-root ul,
+.solid-ai-markdown-root ol {
     padding-left: 18px;
     margin: 5px 0;
 }
 
-.MarkdownRoot li {
+.solid-ai-markdown-root li {
     margin: 3px 0;
     line-height: 1.55;
 }
 
-.MarkdownRoot li > p {
+.solid-ai-markdown-root li > p {
     margin: 0;
 }
 
-.MarkdownRoot blockquote {
+.solid-ai-markdown-root blockquote {
     border-left: 2px solid var(--border);
     padding: 4px 11px;
     margin: 8px 0;
@@ -709,8 +624,8 @@
     font-style: italic;
 }
 
-.MarkdownRoot a,
-.MarkdownLink {
+.solid-ai-markdown-root a,
+.solid-ai-markdown-link {
     color: var(--primary);
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -718,34 +633,34 @@
     transition: opacity 0.15s;
 }
 
-.MarkdownRoot a:hover,
-.MarkdownLink:hover {
+.solid-ai-markdown-root a:hover,
+.solid-ai-markdown-link:hover {
     opacity: 0.72;
 }
 
-.MarkdownRoot hr {
+.solid-ai-markdown-root hr {
     border: none;
     border-top: 1px solid var(--border);
     margin: 12px 0;
 }
 
 /* ── Markdown table ── */
-.MarkdownTableWrapper {
+.solid-ai-markdown-table-wrapper {
     overflow-x: auto;
     margin: 8px 0;
     border-radius: 7px;
     border: 1px solid var(--border);
 }
 
-.MarkdownRoot table {
+.solid-ai-markdown-root table {
     width: 100%;
     border-collapse: collapse;
     font-size: 13px;
     margin: 0;
 }
 
-.MarkdownRoot th,
-.MarkdownRoot td {
+.solid-ai-markdown-root th,
+.solid-ai-markdown-root td {
     border-bottom: 1px solid var(--border);
     border-right: 1px solid var(--border);
     padding: 6px 12px;
@@ -753,16 +668,16 @@
     vertical-align: top;
 }
 
-.MarkdownRoot th:last-child,
-.MarkdownRoot td:last-child {
+.solid-ai-markdown-root th:last-child,
+.solid-ai-markdown-root td:last-child {
     border-right: none;
 }
 
-.MarkdownRoot tr:last-child td {
+.solid-ai-markdown-root tr:last-child td {
     border-bottom: none;
 }
 
-.MarkdownRoot th {
+.solid-ai-markdown-root th {
     background: var(--accent);
     font-weight: 600;
     font-size: 12px;
@@ -771,12 +686,12 @@
     letter-spacing: 0.03em;
 }
 
-.MarkdownRoot td code {
+.solid-ai-markdown-root td code {
     font-size: 12px;
 }
 
 /* ── Inline code ── */
-.InlineCode {
+.solid-ai-inline-code {
     background: var(--accent);
     border: 1px solid var(--border);
     padding: 1px 5px;
@@ -787,14 +702,14 @@
 }
 
 /* ── Code block ── */
-.CodeBlockWrapper {
+.solid-ai-code-block-wrapper {
     margin: 8px 0;
     border-radius: 8px;
     border: 1px solid var(--border);
     overflow: hidden;
 }
 
-.CodeBlockHeader {
+.solid-ai-code-block-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -803,7 +718,7 @@
     border-bottom: 1px solid var(--border);
 }
 
-.CodeLang {
+.solid-ai-code-lang {
     font-size: 10px;
     font-weight: 600;
     color: var(--muted-foreground);
@@ -811,7 +726,7 @@
     letter-spacing: 0.06em;
 }
 
-.CodeCopyBtn {
+.solid-ai-code-copy-btn {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -825,12 +740,12 @@
     transition: background 0.15s, color 0.15s;
 }
 
-.CodeCopyBtn:hover {
+.solid-ai-code-copy-btn:hover {
     background: var(--accent);
     color: var(--primary);
 }
 
-.CodePre {
+.solid-ai-code-pre {
     margin: 0;
     padding: 13px;
     background: var(--background);
@@ -844,14 +759,14 @@
 }
 
 /* ── Input area ── */
-.InputArea {
+.solid-ai-input-area {
     padding: 10px 14px 14px;
     border-top: 1px solid var(--border);
     background: var(--card);
     flex-shrink: 0;
 }
 
-.InputBox {
+.solid-ai-input-box {
     position: relative;
     display: flex;
     align-items: flex-end;
@@ -862,17 +777,17 @@
     transition: border-color 0.2s, box-shadow 0.2s;
 }
 
-.InputBox:focus-within {
+.solid-ai-input-box:focus-within {
     border-color: var(--primary);
     box-shadow: none !important;
 }
 
-.InputBoxDisabled {
+.solid-ai-input-box-disabled {
     opacity: 0.45;
     pointer-events: none;
 }
 
-.Textarea {
+.solid-ai-textarea {
     flex: 1;
     background: transparent;
     border: none;
@@ -890,16 +805,16 @@
     scrollbar-color: var(--border) transparent;
 }
 
-.Textarea::placeholder {
+.solid-ai-textarea::placeholder {
     color: var(--muted);
 }
 
-.Textarea:focus {
+.solid-ai-textarea:focus {
     outline: none;
 }
 
 /* ── Send button (inside InputBox) ── */
-.SendBtn {
+.solid-ai-send-btn {
     width: 28px;
     height: 28px;
     border-radius: 8px;
@@ -915,23 +830,23 @@
     margin: 0 6px 7px 0;
 }
 
-.SendBtnActive {
+.solid-ai-send-btn-active {
     background: var(--primary);
     color: var(--primary-foreground);
     cursor: pointer;
     border-radius: 8px;
 }
 
-.SendBtnActive:hover {
+.solid-ai-send-btn-active:hover {
     opacity: 0.88;
 }
 
-.SendBtnActive:active {
+.solid-ai-send-btn-active:active {
     transform: scale(0.92);
 }
 
 /* ── Tool call cards ── */
-.ToolCard {
+.solid-ai-tool-card {
     border-radius: 6px;
     border: 1px solid var(--border);
     overflow: hidden;
@@ -941,67 +856,57 @@
     font-size: 11px;
 }
 
-.ToolCardRunning {
+.solid-ai-tool-card-running {
     border-color: rgba(59, 130, 246, 0.25);
     background: rgba(59, 130, 246, 0.02);
 }
 
-.ToolCardDone {
+.solid-ai-tool-card-done {
     border-color: var(--border);
     background: transparent;
     opacity: 0.7;
 }
 
-.ToolCardDone:hover {
+.solid-ai-tool-card-done:hover {
     opacity: 0.9;
 }
 
-.ToolCardWarning {
+.solid-ai-tool-card-warning {
     border-color: rgba(245, 158, 11, 0.5);
     background: rgba(245, 158, 11, 0.04);
 }
 
-.ToolCardError {
+.solid-ai-tool-card-error {
     border-color: rgba(239, 68, 68, 0.5);
     background: rgba(239, 68, 68, 0.04);
 }
 
-.ToolCardHeader {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 10px;
-    font-size: 12px;
-    flex-wrap: nowrap;
-    min-width: 0;
-}
-
-.ToolCardStatusIcon {
+.solid-ai-tool-card-status-icon {
     font-size: 10px;
     color: rgb(59, 130, 246);
     flex-shrink: 0;
 }
 
-.ToolCardStatusDone {
+.solid-ai-tool-card-status-done {
     color: rgb(34, 197, 94);
     opacity: 0.7;
 }
 
-.ToolCardStatusWarning {
+.solid-ai-tool-card-status-warning {
     color: rgb(245, 158, 11);
 }
 
-.ToolCardStatusError {
+.solid-ai-tool-card-status-error {
     color: rgb(239, 68, 68);
 }
 
-.ToolCardToolIcon {
+.solid-ai-tool-card-tool-icon {
     font-size: 10px;
     color: var(--muted);
     flex-shrink: 0;
 }
 
-.ToolCardName {
+.solid-ai-tool-card-name {
     font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
     font-size: 10.5px;
     font-weight: 500;
@@ -1010,7 +915,7 @@
     flex-shrink: 0;
 }
 
-.ToolCardDesc {
+.solid-ai-tool-card-desc {
     font-size: 10.5px;
     color: var(--muted);
     overflow: hidden;
@@ -1021,7 +926,7 @@
     max-width: 260px;
 }
 
-.ToolCardBadge {
+.solid-ai-tool-card-badge {
     font-size: 9px;
     color: var(--muted);
     border: 1px solid var(--border);
@@ -1034,7 +939,7 @@
     opacity: 0.7;
 }
 
-.ToolCardDuration {
+.solid-ai-tool-card-duration {
     font-size: 9px;
     font-variant-numeric: tabular-nums;
     color: var(--muted);
@@ -1042,7 +947,7 @@
     flex-shrink: 0;
 }
 
-.ToolCardProgress {
+.solid-ai-tool-card-progress {
     border-top: 1px solid var(--border);
     padding: 3px 8px 4px;
     display: flex;
@@ -1051,7 +956,7 @@
     background: rgba(0, 0, 0, 0.015);
 }
 
-.ToolProgressItem {
+.solid-ai-tool-progress-item {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -1059,12 +964,12 @@
     color: var(--muted);
 }
 
-.ToolProgressLabel {
+.solid-ai-tool-progress-label {
     flex: 1;
     min-width: 0;
 }
 
-.ToolProgressDuration {
+.solid-ai-tool-progress-duration {
     font-size: 9px;
     font-variant-numeric: tabular-nums;
     color: var(--muted);
@@ -1073,18 +978,18 @@
     margin-left: auto;
 }
 
-.ToolProgressRunning {
+.solid-ai-tool-progress-running {
     color: rgba(59, 130, 246, 0.8);
     font-weight: 500;
 }
 
-.ToolProgressDone {
+.solid-ai-tool-progress-done {
     color: var(--muted);
     opacity: 0.65;
 }
 
 /* ── Tool output preview ── */
-.ToolCardOutput {
+.solid-ai-tool-card-output {
     border-top: 1px solid var(--border);
     padding: 6px 10px;
     background: rgba(0, 0, 0, 0.015);
@@ -1093,7 +998,7 @@
     gap: 4px;
 }
 
-.ToolOutputHeader {
+.solid-ai-tool-output-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1104,7 +1009,7 @@
     letter-spacing: 0.02em;
 }
 
-.ToolOutputText {
+.solid-ai-tool-output-text {
     font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
     font-size: 11px;
     line-height: 1.5;
@@ -1117,53 +1022,18 @@
     margin: 0;
 }
 
-.ToolOutputWarning {
+.solid-ai-tool-output-warning {
     color: rgb(180, 83, 9);
 }
 
-.ToolOutputError {
+.solid-ai-tool-output-error {
     color: rgb(185, 28, 28);
 }
 
 /* ── Persistent event / step rows ── */
-.EventRow {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    padding: 5px 10px;
-    border-radius: 8px;
-    font-size: 12px;
-    font-family: inherit;
-    line-height: 1.4;
-    width: fit-content;
-    max-width: 100%;
-    transition: background 0.15s, color 0.15s;
-}
-
-.EventRowActive {
-    background: var(--accent);
-    border: 1px solid var(--border);
-    color: var(--muted-foreground);
-}
-
-.EventRowActive i {
-    color: var(--primary);
-}
-
-.EventRowDone {
-    background: transparent;
-    border: 1px solid transparent;
-    color: var(--muted);
-    opacity: 0.45;
-}
-
-.EventRowDone i {
-    color: var(--muted-foreground);
-    opacity: 0.6;
-}
 
 /* ── Thinking indicator bubble ── */
-.ThinkingBubble {
+.solid-ai-thinking-bubble {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -1175,13 +1045,13 @@
     width: fit-content;
 }
 
-.ThinkingDots {
+.solid-ai-thinking-dots {
     display: flex;
     gap: 4px;
     align-items: center;
 }
 
-.ThinkingDot {
+.solid-ai-thinking-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
@@ -1189,16 +1059,16 @@
     animation: bounce 1.2s infinite;
 }
 
-.ThinkingDot:nth-child(2) { animation-delay: 0.15s; }
-.ThinkingDot:nth-child(3) { animation-delay: 0.3s; }
+.solid-ai-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
+.solid-ai-thinking-dot:nth-child(3) { animation-delay: 0.3s; }
 
-.ThinkingLabel {
+.solid-ai-thinking-label {
     font-size: 12px;
     color: var(--muted-foreground);
 }
 
 /* ── Streaming cursor ── */
-.StreamingCursor {
+.solid-ai-streaming-cursor {
     display: inline-block;
     width: 2px;
     height: 14px;
@@ -1215,38 +1085,15 @@
 }
 
 /* ── Step divider ── */
-.StepDividerRow {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 0 2px;
-    width: 100%;
-}
-
-.StepDividerLine {
-    flex: 1;
-    height: 1px;
-    background: var(--border);
-}
-
-.StepDividerLabel {
-    font-size: 10px;
-    font-weight: 600;
-    color: var(--muted-foreground);
-    text-transform: uppercase;
-    letter-spacing: 0.07em;
-    white-space: nowrap;
-    opacity: 0.6;
-}
 
 /* ── Error bubble ── */
-.ErrorBubble {
+.solid-ai-error-bubble {
     display: flex;
     gap: 9px;
     align-items: flex-start;
 }
 
-.ErrorIcon {
+.solid-ai-error-icon {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1259,7 +1106,7 @@
     margin-top: 2px;
 }
 
-.ErrorContent {
+.solid-ai-error-content {
     border-radius: 14px;
     border-bottom-left-radius: 4px;
     border: 1px solid rgba(239, 68, 68, 0.3);
@@ -1268,14 +1115,14 @@
     max-width: 85%;
 }
 
-.ErrorTitle {
+.solid-ai-error-title {
     font-size: 11px;
     font-weight: 600;
     color: #ef4444;
     margin: 0 0 3px;
 }
 
-.ErrorText {
+.solid-ai-error-text {
     font-size: 13px;
     color: rgb(185, 28, 28);
     margin: 0;
@@ -1283,46 +1130,20 @@
 }
 
 /* ── Status dot extra states ── */
-.StatusRunning {
+.solid-ai-status-running {
     background: #722ED1;
     box-shadow: 0 0 5px rgba(114, 46, 209, 0.4);
     animation: statusPulse 1.5s ease-in-out infinite;
 }
 
-.StatusConnecting {
-    background: #eab308;
-    box-shadow: 0 0 5px #eab30866;
-    animation: statusPulse 1.5s ease-in-out infinite;
-}
-
 @keyframes statusPulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.5; }
 }
 
 /* ── Tool card collapsible header button ── */
-.ToolCardHeaderBtn {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    width: 100%;
-    padding: 4px 8px;
-    font-size: 11px;
-    flex-wrap: nowrap;
-    min-width: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    text-align: left;
-    font-family: inherit;
-    color: inherit;
-}
-
-.ToolCardHeaderBtn:not([data-expandable="true"]) {
-    cursor: default;
-}
 
-.ToolCardChevron {
+.solid-ai-tool-card-chevron {
     font-size: 10px;
     color: var(--muted-foreground);
     transition: transform 0.2s;
@@ -1330,10 +1151,10 @@
     margin-left: 2px;
 }
 
-.ToolCardChevronOpen {
+.solid-ai-tool-card-chevron-open {
     transform: rotate(90deg);
 }
 
-.ToolCardExpandable {
+.solid-ai-tool-card-expandable {
     border-top: 1px solid var(--border);
 }
diff --git a/src/resources/themes/solid-dark-enterprise/theme.css b/src/resources/themes/solid-dark-enterprise/theme.css
index 66ac37b9..53a36d88 100644
--- a/src/resources/themes/solid-dark-enterprise/theme.css
+++ b/src/resources/themes/solid-dark-enterprise/theme.css
@@ -3,23 +3,23 @@
 
 @layer solid-theme {
   body,
-  #root,
-  .layout-wrapper,
-  .layout-main-container,
-  .main-content,
-  .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-form-page-wrapper {
+#root,
+.layout-wrapper,
+.layout-main-container,
+.main-content,
+.page-parent-wrapper,
+.solid-list-page-wrapper,
+.solid-form-page-wrapper {
     background:
       radial-gradient(circle at top left, rgba(110, 168, 254, 0.08), transparent 18%),
       linear-gradient(180deg, #0b121a 0%, #0f1823 100%);
   }
 
   .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-form-wrapper,
-  .solid-form-section,
-  .solid-list-content {
+.solid-list-page-wrapper,
+.solid-form-wrapper,
+.solid-form-section,
+.solid-list-content {
     background: transparent;
   }
 
@@ -30,9 +30,9 @@
   }
 
   .solid-sidebar,
-  aside.solid-sidebar,
-  .solid-sidebar.is-open,
-  .solid-sidebar.is-collapsed {
+aside.solid-sidebar,
+.solid-sidebar.is-open,
+.solid-sidebar.is-collapsed {
     background: linear-gradient(180deg, #0f1823 0%, #131d2a 58%, #162231 100%) !important;
     color: #e2ebf6 !important;
     border-right: 1px solid #203043 !important;
@@ -40,54 +40,54 @@
   }
 
   .solid-sidebar-header,
-  .solid-sidebar-search-wrap,
-  .solid-sidebar-tree-wrap,
-  .solid-sidebar-footer {
+.solid-sidebar-search-wrap,
+.solid-sidebar-tree-wrap,
+.solid-sidebar-footer {
     background: transparent !important;
     border-color: #203043 !important;
   }
 
   .solid-workspace-trigger,
-  .solid-workspace-menu,
-  .solid-sidebar-search,
-  .solid-sidebar-footer .userProfile,
-  .solid-collapsed-item,
-  .solid-sidebar-mobile-action,
-  .solid-sidebar-external-trigger {
+.solid-workspace-menu,
+.solid-sidebar-search,
+.solid-sidebar-footer .userProfile,
+.solid-collapsed-item,
+.solid-sidebar-mobile-action,
+.solid-sidebar-external-trigger {
     background: rgba(255, 255, 255, 0.025) !important;
     color: #e2ebf6 !important;
     border-color: rgba(110, 168, 254, 0.1) !important;
   }
 
   .solid-workspace-trigger:hover,
-  .solid-sidebar-search:focus,
-  .solid-sidebar-footer .userProfile:hover,
-  .solid-collapsed-item:hover,
-  .solid-sidebar-mobile-action:hover,
-  .solid-sidebar-external-trigger:hover {
+.solid-sidebar-search:focus,
+.solid-sidebar-footer .userProfile:hover,
+.solid-collapsed-item:hover,
+.solid-sidebar-mobile-action:hover,
+.solid-sidebar-external-trigger:hover {
     background: rgba(255, 255, 255, 0.05) !important;
     border-color: rgba(110, 168, 254, 0.18) !important;
   }
 
   .solid-workspace-avatar:not(.has-image),
-  .solid-workspace-item-avatar:not(.has-image),
-  .solid-collapsed-item.is-active {
+.solid-workspace-item-avatar:not(.has-image),
+.solid-collapsed-item.is-active {
     background: #6ea8fe !important;
     color: #08111d !important;
   }
 
   .solid-workspace-label-top,
-  .solid-sidebar-search::placeholder {
+.solid-sidebar-search::placeholder {
     color: rgba(230, 237, 247, 0.56) !important;
   }
 
   .solid-workspace-label,
-  .solid-workspace-item-label,
-  .solid-sidebar-tree-link,
-  .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-toggle,
-  .solid-sidebar-mobile-action,
-  .solid-sidebar-footer .userProfile {
+.solid-workspace-item-label,
+.solid-sidebar-tree-link,
+.solid-sidebar-tree-parent,
+.solid-sidebar-tree-toggle,
+.solid-sidebar-mobile-action,
+.solid-sidebar-footer .userProfile {
     color: #e2ebf6 !important;
   }
 
@@ -99,9 +99,9 @@
   }
 
   .layout-menu,
-  .layout-menu ul,
-  .layout-menu ul a,
-  .solid-sidebar-tree-link {
+.layout-menu ul,
+.layout-menu ul a,
+.solid-sidebar-tree-link {
     color: #eef2f6 !important;
   }
 
@@ -130,141 +130,41 @@
   }
 
   .solid-sidebar-tree-label,
-  .layout-menuitem-root-text {
+.layout-menuitem-root-text {
     color: #e6edf7 !important;
     font-weight: 500 !important;
     letter-spacing: 0.01em;
   }
 
   .view-title,
-  .form-wrapper-title,
-  .solid-list-toolbar .view-title {
+.form-wrapper-title,
+.solid-list-toolbar .view-title {
     color: #f0f5fb;
     font-weight: 700;
     letter-spacing: 0.01em;
   }
 
-  .p-button {
-    border-radius: 10px;
-    border-width: 1px;
-    font-weight: 600;
-    letter-spacing: 0.015em;
-    box-shadow: none;
-  }
-
-  .p-button:not(.p-button-text):not(.p-button-link) {
-    background: linear-gradient(180deg, #7ab1ff 0%, #6ea8fe 100%);
-    border-color: #5e97ea;
-    color: #08111d;
-  }
-
-  .p-button:not(.p-button-text):not(.p-button-link):hover {
-    background: linear-gradient(180deg, #88bbff 0%, #77adff 100%);
-    border-color: #6aa1f4;
-    transform: none;
-  }
-
-  .p-button.p-button-outlined,
-  .p-button.p-button-secondary {
-    box-shadow: none;
-  }
-
-  .p-button.p-button-outlined {
-    background: rgba(18, 27, 39, 0.88);
-    border: 1px solid rgba(110, 168, 254, 0.18);
-    color: #e6edf7;
-  }
-
-  .p-button.p-button-secondary {
-    background: rgba(22, 34, 48, 0.96);
-    border: 1px solid rgba(86, 117, 158, 0.22);
-    color: #d8e4f2;
-  }
-
-  .p-inputtext,
-  .p-dropdown,
-  .p-multiselect,
-  .p-autocomplete .p-autocomplete-multiple-container,
-  .p-calendar .p-inputtext,
-  .p-password-input,
-  .p-inputnumber-input,
-  .p-editor-container .p-editor-toolbar,
-  .p-editor-container .p-editor-content .ql-editor {
-    border-radius: 12px;
-  }
-
-  .p-inputtext,
-  .p-dropdown,
-  .p-multiselect,
-  .p-autocomplete .p-autocomplete-multiple-container,
-  .p-calendar .p-inputtext,
-  .p-password-input,
-  .p-inputnumber-input {
-    background: linear-gradient(180deg, rgba(20, 30, 43, 0.98), rgba(16, 25, 37, 0.98));
-    border: 1px solid rgba(86, 117, 158, 0.28);
-    color: #e1ebf6;
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.03),
-      0 1px 2px rgba(2, 6, 23, 0.16);
-    transition:
-      border-color 140ms ease,
-      box-shadow 140ms ease,
-      background-color 140ms ease,
-      transform 140ms ease;
-  }
-
-  .p-inputtext::placeholder,
-  .p-dropdown .p-dropdown-label.p-placeholder,
-  .p-multiselect .p-multiselect-label.p-placeholder {
-    color: #8fa7c2;
-  }
-
-  .p-inputtext:hover,
-  .p-dropdown:not(.p-disabled):hover,
-  .p-multiselect:not(.p-disabled):hover,
-  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover,
-  .p-calendar:not(.p-calendar-disabled):hover .p-inputtext,
-  .p-password:hover .p-inputtext,
-  .p-inputnumber:hover .p-inputtext {
-    border-color: rgba(110, 168, 254, 0.34);
-    background: linear-gradient(180deg, rgba(22, 33, 47, 0.99), rgba(18, 27, 40, 0.99));
-  }
-
-  .p-dropdown .p-dropdown-trigger,
-  .p-multiselect .p-multiselect-trigger,
-  .p-calendar .p-datepicker-trigger,
-  .p-autocomplete .p-autocomplete-dropdown {
-    color: #9bb2ce;
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-  }
-
-  .p-card,
-  .p-dialog .p-dialog-content,
-  .p-dialog .p-dialog-header,
   .solid-list-surface,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-media-card-widget,
-  .solid-form-section {
+.solid-card-view-card,
+.solid-kanban-card,
+.solid-media-card-widget,
+.solid-form-section {
     border-radius: 14px;
   }
 
-  .p-card,
   .solid-list-surface,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-form-section {
+.solid-card-view-card,
+.solid-kanban-card,
+.solid-form-section {
     background: linear-gradient(180deg, rgba(18, 27, 41, 0.98), rgba(14, 22, 33, 0.99));
     border: 1px solid rgba(86, 117, 158, 0.22);
     position: relative;
   }
 
-  .p-dialog .p-dialog-header,
   .solid-list-toolbar,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-form-section {
+.solid-card-view-card,
+.solid-kanban-card,
+.solid-form-section {
     box-shadow: 0 14px 30px rgba(2, 6, 23, 0.24);
   }
 
@@ -276,7 +176,7 @@
   }
 
   .solid-form-header,
-  .solid-form-toolbar-row {
+.solid-form-toolbar-row {
     background: transparent;
     border-radius: 0;
     padding: 0;
@@ -284,14 +184,14 @@
   }
 
   .solid-form-content,
-  .solid-form-wrapper .solid-form-content.solid-form-view,
-  .solid-form-wrapper .solid-form-content.solid-form-edit {
+.solid-form-wrapper .solid-form-content.solid-form-view,
+.solid-form-wrapper .solid-form-content.solid-form-edit {
     background: linear-gradient(180deg, rgba(13, 21, 31, 0.96), rgba(10, 17, 25, 0.99));
     padding: 1.2rem;
   }
 
   .solid-list-surface::before,
-  .solid-form-section::before {
+.solid-form-section::before {
     content: "";
     position: absolute;
     inset: 0 0 auto 0;
@@ -300,9 +200,9 @@
   }
 
   .solid-list-toolbar .view-title,
-  .solid-form-header .view-title,
-  .solid-form-toolbar-row .view-title,
-  .solid-form-header .form-wrapper-title {
+.solid-form-header .view-title,
+.solid-form-toolbar-row .view-title,
+.solid-form-header .form-wrapper-title {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
@@ -314,8 +214,8 @@
   }
 
   .solid-form-header .view-title,
-  .solid-form-toolbar-row .view-title,
-  .solid-form-header .form-wrapper-title {
+.solid-form-toolbar-row .view-title,
+.solid-form-header .form-wrapper-title {
     padding: 0;
     gap: 0.35rem;
     background: transparent;
@@ -323,24 +223,22 @@
   }
 
   .solid-list-toolbar .view-title::before,
-  .solid-form-header .view-title::before,
-  .solid-form-toolbar-row .view-title::before,
-  .solid-form-header .form-wrapper-title::before {
+.solid-form-header .view-title::before,
+.solid-form-toolbar-row .view-title::before,
+.solid-form-header .form-wrapper-title::before {
     box-shadow: none;
   }
 
   .solid-list-toolbar .solid-global-search-element,
-  .solid-list-toolbar .custom-filter-button,
-  .solid-list-toolbar .solid-icon-button,
-  .solid-form-toolbar-actions .solid-icon-button {
+.solid-list-toolbar .custom-filter-button,
+.solid-list-toolbar .solid-icon-button,
+.solid-form-toolbar-actions .solid-icon-button {
     background: rgba(18, 27, 41, 0.9);
     border: 1px solid rgba(86, 117, 158, 0.2);
     border-radius: 10px;
   }
 
-  .solid-form-toolbar-actions .solid-icon-button,
-  .solid-form-toolbar-row .p-button,
-  .solid-form-header .p-button {
+  .solid-form-toolbar-actions .solid-icon-button {
     min-height: 2.2rem;
   }
 
@@ -348,11 +246,7 @@
     box-shadow: 0 0 0 0.18rem rgba(110, 168, 254, 0.14);
   }
 
-  .solid-list-toolbar .solid-global-search-element input,
-  .solid-form-content .p-inputtext,
-  .solid-form-content .p-dropdown,
-  .solid-form-content .p-multiselect,
-  .solid-form-content .p-inputnumber-input {
+  .solid-list-toolbar .solid-global-search-element input {
     background: linear-gradient(180deg, rgba(20, 30, 43, 0.98), rgba(16, 25, 37, 0.98));
     color: #dfe8f3;
     box-shadow:
@@ -360,14 +254,6 @@
       0 1px 2px rgba(2, 6, 23, 0.16);
   }
 
-  .solid-form-content .p-inputtext,
-  .solid-form-content .p-dropdown,
-  .solid-form-content .p-multiselect,
-  .solid-form-content .p-inputnumber-input,
-  .solid-form-content .p-calendar .p-inputtext {
-    min-height: 2.9rem;
-  }
-
   .form-field-label {
     display: inline-flex;
     align-items: center;
@@ -389,8 +275,6 @@
     opacity: 0.8;
   }
 
-  .solid-form-section .p-field,
-  .solid-form-content .p-field,
   .solid-form-content .grid > [class*="col"] {
     margin-bottom: 1rem;
   }
@@ -400,9 +284,7 @@
   }
 
   .solid-form-section .grid > [class*="col"] > div,
-  .solid-form-section .grid > [class*="col"] > .p-field,
-  .solid-form-content .grid > [class*="col"] > div,
-  .solid-form-content .grid > [class*="col"] > .p-field {
+.solid-form-content .grid > [class*="col"] > div {
     padding: 0.9rem 1rem;
     border-radius: 12px;
     background: linear-gradient(180deg, rgba(20, 30, 44, 0.9), rgba(16, 25, 37, 0.92));
@@ -410,7 +292,7 @@
   }
 
   .solid-datatable-wrapper,
-  .solid-list-table-area {
+.solid-list-table-area {
     background: linear-gradient(180deg, rgba(14, 22, 34, 0.98), rgba(11, 18, 26, 0.995));
     border-top: 1px solid rgba(86, 117, 158, 0.12);
   }
@@ -419,7 +301,6 @@
     overflow: hidden;
   }
 
-  .p-datatable .p-datatable-thead > tr > th,
   .solid-data-table-head {
     background: linear-gradient(180deg, #1a293b 0%, #152131 100%);
     border-bottom: 1px solid rgba(86, 117, 158, 0.22);
@@ -429,200 +310,36 @@
     font-size: 0.78rem;
   }
 
-  .p-datatable .p-datatable-tbody > tr {
-    border-bottom: 1px solid rgba(86, 117, 158, 0.1);
-    transition: background-color 140ms ease, box-shadow 140ms ease;
-  }
-
-  .p-datatable .p-datatable-tbody > tr > td {
-    padding: 0.85rem 1rem;
-    color: #cfe0f3;
-    background: transparent;
-  }
-
-  .p-datatable .p-datatable-tbody > tr > td:first-child {
-    font-weight: 600;
-    color: #edf4fd;
-  }
-
-  .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-    background: rgba(18, 27, 40, 0.72);
-  }
-
-  .p-datatable .p-datatable-tbody > tr:hover {
-    background: rgba(24, 37, 53, 0.98);
-    box-shadow: inset 3px 0 0 #6ea8fe;
-  }
-
-  .p-datatable .p-sortable-column .p-sortable-column-icon,
-  .p-datatable .p-column-filter-menu-button,
-  .p-datatable .p-column-filter-clear-button {
-    color: #9bb2ce;
-  }
-
-  .p-paginator {
-    background: linear-gradient(180deg, rgba(20, 30, 44, 0.99), rgba(15, 23, 34, 0.99));
-    border: 1px solid rgba(86, 117, 158, 0.16);
-    border-radius: 0 0 14px 14px;
-    padding: 0.65rem 0.9rem;
-  }
-
-  .p-paginator .p-paginator-pages .p-paginator-page,
-  .p-paginator .p-paginator-prev,
-  .p-paginator .p-paginator-next,
-  .p-paginator .p-paginator-first,
-  .p-paginator .p-paginator-last {
-    border-radius: 10px;
-    min-width: 2.5rem;
-    height: 2.5rem;
-  }
-
-  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-    background: linear-gradient(180deg, #7ab1ff 0%, #6ea8fe 100%);
-    color: #08111d;
-    border-color: #6ea8fe;
-    box-shadow: 0 6px 14px rgba(110, 168, 254, 0.2);
-  }
-
-  .p-tabview .p-tabview-nav {
-    background: transparent;
-    border: 0;
-    gap: 0.4rem;
-  }
-
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
-    background: rgba(21, 31, 44, 0.98);
-    border: 1px solid rgba(86, 117, 158, 0.2);
-    border-radius: 10px;
-    color: #cfdced;
-  }
-
-  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-    background: linear-gradient(180deg, #7ab1ff 0%, #6ea8fe 100%);
-    border-color: #6ea8fe;
-    color: #08111d;
-  }
-
-  .p-tabview .p-tabview-panels {
-    margin-top: 0.8rem;
-    border-radius: 14px;
-    background: linear-gradient(180deg, rgba(14, 22, 34, 0.98), rgba(11, 18, 26, 0.995));
-    border: 1px solid rgba(86, 117, 158, 0.14);
-    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.22);
-  }
-
-  .p-chip,
-  .p-tag,
-  .p-badge {
-    border-radius: 999px;
-    font-weight: 700;
-    letter-spacing: 0.02em;
-  }
-
-  .p-chip {
-    background: rgba(110, 168, 254, 0.14);
-    color: #dbe9fb;
-    border: 1px solid rgba(110, 168, 254, 0.16);
-  }
-
-  .p-tag,
-  .p-badge {
-    background: linear-gradient(180deg, #7ab1ff 0%, #6ea8fe 100%);
-    color: #08111d;
-    box-shadow: 0 6px 14px rgba(110, 168, 254, 0.18);
-  }
-
-  .solid-list-toolbar .p-multiselect,
-  .solid-list-toolbar .p-dropdown,
-  .solid-list-toolbar .p-inputtext {
-    background: rgba(18, 27, 41, 0.94);
-  }
-
-  .solid-form-content .p-dropdown-panel,
-  .solid-form-content .p-multiselect-panel,
-  .solid-form-content .p-autocomplete-panel {
-    border-radius: 12px;
-    border: 1px solid rgba(86, 117, 158, 0.18);
-    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.26);
-  }
-
-  .p-dialog {
-    border-radius: 18px;
-    overflow: hidden;
-    border: 1px solid rgba(86, 117, 158, 0.16);
-    box-shadow: 0 24px 56px rgba(2, 6, 23, 0.34);
-  }
-
-  .p-dialog .p-dialog-header {
-    position: relative;
-    padding: 1.15rem 1.25rem;
-    background: linear-gradient(180deg, rgba(20, 30, 44, 0.99), rgba(16, 24, 35, 0.99));
-  }
-
-  .p-dialog .p-dialog-header::after {
-    content: "";
-    position: absolute;
-    inset: auto 1.25rem 0 1.25rem;
-    height: 1px;
-    background: rgba(86, 117, 158, 0.16);
-  }
-
-  .p-dialog .p-dialog-content,
-  .p-dialog .p-dialog-footer {
-    background: linear-gradient(180deg, rgba(14, 22, 34, 0.99), rgba(11, 18, 26, 0.995));
-  }
-
-  .p-sidebar,
-  .p-overlaypanel,
   .solid-custom-overlay,
-  .listview-cogwheel-panel,
-  .customize-layout-panel {
+.listview-cogwheel-panel,
+.customize-layout-panel {
     border-radius: 16px;
     overflow: hidden;
   }
 
-  .p-sidebar {
-    background: linear-gradient(180deg, rgba(16, 25, 37, 0.99), rgba(12, 19, 28, 0.995));
-    border-left: 1px solid rgba(86, 117, 158, 0.16);
-    box-shadow: -18px 0 42px rgba(2, 6, 23, 0.28);
-  }
-
-  .p-sidebar .p-sidebar-header {
-    padding: 1rem 1.1rem;
-    border-bottom: 1px solid rgba(86, 117, 158, 0.14);
-    background: rgba(255, 255, 255, 0.02);
-  }
-
-  .p-overlaypanel {
-    background: rgba(13, 20, 31, 0.99);
-    border: 1px solid rgba(86, 117, 158, 0.18);
-    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.28);
-  }
-
-  .p-card,
   .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-media-card-widget {
+.solid-kanban-card,
+.solid-media-card-widget {
     overflow: hidden;
   }
 
   .solid-kanban-card,
-  .solid-media-card-widget,
-  .solid-card-view-card {
+.solid-media-card-widget,
+.solid-card-view-card {
     transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
   }
 
   .solid-kanban-card:hover,
-  .solid-media-card-widget:hover,
-  .solid-card-view-card:hover {
+.solid-media-card-widget:hover,
+.solid-card-view-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 18px 34px rgba(2, 6, 23, 0.28);
     border-color: rgba(110, 168, 254, 0.2);
   }
 
   .solid-kanban-card::after,
-  .solid-media-card-widget::after,
-  .solid-card-view-card::after {
+.solid-media-card-widget::after,
+.solid-card-view-card::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -631,15 +348,15 @@
   }
 
   .custom-filter-button,
-  .solid-list-toolbar .custom-filter-button,
-  .solid-list-toolbar .solid-icon-button {
+.solid-list-toolbar .custom-filter-button,
+.solid-list-toolbar .solid-icon-button {
     position: relative;
     overflow: hidden;
   }
 
   .custom-filter-button::before,
-  .solid-list-toolbar .custom-filter-button::before,
-  .solid-list-toolbar .solid-icon-button::before {
+.solid-list-toolbar .custom-filter-button::before,
+.solid-list-toolbar .solid-icon-button::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -647,115 +364,16 @@
     pointer-events: none;
   }
 
-  .p-panel,
-  .p-accordion .p-accordion-content,
-  .p-fieldset {
-    border-radius: 14px;
-    border: 1px solid rgba(86, 117, 158, 0.14);
-    overflow: hidden;
-    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.2);
-  }
-
-  .p-panel .p-panel-header,
-  .p-accordion .p-accordion-header .p-accordion-header-link,
-  .p-fieldset .p-fieldset-legend {
-    background: linear-gradient(180deg, rgba(20, 30, 44, 0.99), rgba(16, 24, 35, 0.99));
-  }
-
-  .p-panel .p-panel-content,
-  .p-accordion .p-accordion-content,
-  .p-fieldset .p-fieldset-content {
-    background: linear-gradient(180deg, rgba(14, 22, 34, 0.99), rgba(11, 18, 26, 0.995));
-  }
-
-  .p-menu,
-  .p-contextmenu,
-  .p-tieredmenu,
-  .p-slidemenu,
-  .p-megamenu .p-megamenu-panel,
-  .p-menubar .p-submenu-list {
-    border-radius: 14px;
-    border: 1px solid rgba(86, 117, 158, 0.16);
-    background: rgba(13, 20, 31, 0.99);
-    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.28);
-    overflow: hidden;
-  }
-
-  .p-menu .p-menuitem > .p-menuitem-content,
-  .p-contextmenu .p-menuitem > .p-menuitem-content,
-  .p-tieredmenu .p-menuitem > .p-menuitem-content,
-  .p-slidemenu .p-menuitem-link > .p-menuitem-content,
-  .p-menubar .p-menuitem > .p-menuitem-content {
-    border-radius: 10px;
-    margin: 0.2rem 0.35rem;
-  }
-
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    background: rgba(110, 168, 254, 0.12);
-  }
-
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content,
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content,
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content,
-  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content,
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
-    background: linear-gradient(180deg, #7ab1ff 0%, #6ea8fe 100%);
-  }
-
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: #08111d;
-  }
-
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: #08111d;
-  }
-
   .solid-workspace-menu,
-  .solid-header-dropdown-item {
+.solid-header-dropdown-item {
     backdrop-filter: blur(14px);
   }
 
-  .solid-card-view-card .p-card-title,
-  .solid-kanban-card .p-card-title,
-  .solid-media-card-widget .p-card-title,
-  .solid-card-view-card .p-card-subtitle,
-  .solid-kanban-card .p-card-subtitle,
-  .solid-media-card-widget .p-card-subtitle {
-    position: relative;
-    z-index: 1;
-  }
-
-  .solid-card-view-card .p-card-title,
-  .solid-kanban-card .p-card-title,
-  .solid-media-card-widget .p-card-title {
-    color: #edf4fd;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-  }
-
-  .solid-card-view-card .p-card-subtitle,
-  .solid-kanban-card .p-card-subtitle,
-  .solid-media-card-widget .p-card-subtitle {
-    color: #93a9c4;
-  }
-
   .solid-dashboard-welcome-bg,
-  .solid-dashboard-welcome-section,
-  .solid-admin-card,
-  [class*="dashboard-card"],
-  [class*="stat-card"] {
+.solid-dashboard-welcome-section,
+.solid-admin-card,
+[class*="dashboard-card"],
+[class*="stat-card"] {
     border-radius: 16px;
     background: linear-gradient(180deg, rgba(18, 27, 41, 0.99), rgba(13, 20, 31, 0.995));
     border: 1px solid rgba(86, 117, 158, 0.14);
@@ -765,10 +383,10 @@
   }
 
   .solid-dashboard-welcome-bg::before,
-  .solid-dashboard-welcome-section::before,
-  .solid-admin-card::before,
-  [class*="dashboard-card"]::before,
-  [class*="stat-card"]::before {
+.solid-dashboard-welcome-section::before,
+.solid-admin-card::before,
+[class*="dashboard-card"]::before,
+[class*="stat-card"]::before {
     content: "";
     position: absolute;
     inset: 0 auto auto 0;
@@ -777,126 +395,42 @@
     background: linear-gradient(90deg, #6ea8fe 0%, #93c0ff 55%, rgba(147, 192, 255, 0.18) 100%);
   }
 
-  .p-datatable .p-datatable-tbody > tr.p-highlight {
-    background: rgba(110, 168, 254, 0.14);
-    box-shadow: inset 3px 0 0 #6ea8fe;
-  }
-
-  .p-datatable .p-datatable-tbody > tr.p-highlight > td {
-    color: #f0f6fd;
-  }
-
-  .p-datatable .p-datatable-tbody > tr.p-row-expanded,
-  .p-datatable .p-datatable-tbody > tr.p-highlight.p-row-expanded {
-    background: rgba(20, 31, 45, 0.96);
-  }
-
-  .p-datatable .p-row-toggler,
-  .p-datatable .p-row-editor-init,
-  .p-datatable .p-row-editor-save,
-  .p-datatable .p-row-editor-cancel {
-    border-radius: 10px;
-    color: #9bb2ce;
-  }
-
-  .p-datatable .p-row-toggler:hover,
-  .p-datatable .p-row-editor-init:hover,
-  .p-datatable .p-row-editor-save:hover,
-  .p-datatable .p-row-editor-cancel:hover {
-    background: rgba(110, 168, 254, 0.12);
-    color: #6ea8fe;
-  }
-
-  .p-sidebar .p-sidebar-content,
-  .p-dialog .p-dialog-content,
-  .p-overlaypanel .p-overlaypanel-content {
-    padding: 1rem 1.1rem;
-  }
-
-  .p-sidebar .p-sidebar-content .p-menu,
-  .p-overlaypanel .p-menu,
-  .p-dialog .p-menu {
-    box-shadow: none;
-    border-color: rgba(86, 117, 158, 0.12);
-  }
-
   .solid-dashboard-welcome-bg,
-  .solid-dashboard-welcome-section,
-  .solid-admin-card,
-  [class*="dashboard-card"],
-  [class*="stat-card"] {
+.solid-dashboard-welcome-section,
+.solid-admin-card,
+[class*="dashboard-card"],
+[class*="stat-card"] {
     transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
   }
 
   .solid-dashboard-welcome-bg:hover,
-  .solid-dashboard-welcome-section:hover,
-  .solid-admin-card:hover,
-  [class*="dashboard-card"]:hover,
-  [class*="stat-card"]:hover {
+.solid-dashboard-welcome-section:hover,
+.solid-admin-card:hover,
+[class*="dashboard-card"]:hover,
+[class*="stat-card"]:hover {
     transform: translateY(-2px);
     box-shadow: 0 20px 36px rgba(2, 6, 23, 0.28);
     border-color: rgba(110, 168, 254, 0.18);
   }
 
-  .solid-admin-card .p-card-title,
-  [class*="dashboard-card"] .p-card-title,
-  [class*="stat-card"] .p-card-title {
-    color: #edf4fd;
-    font-weight: 700;
-  }
-
-  .solid-admin-card .p-card-subtitle,
-  [class*="dashboard-card"] .p-card-subtitle,
-  [class*="stat-card"] .p-card-subtitle {
-    color: #93a9c4;
-  }
-
-  .p-menu .p-submenu-header,
-  .p-tieredmenu .p-submenu-header,
-  .p-megamenu .p-submenu-header {
-    background: rgba(22, 33, 47, 0.96);
-    color: #b6c9df;
-    font-size: 0.76rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-  }
-
-  .solid-header-dropdown-item,
-  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link,
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link,
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+  .solid-header-dropdown-item {
     min-height: 2.7rem;
     align-items: center;
   }
 
-  .p-menu .p-menuitem-separator,
-  .p-contextmenu .p-menuitem-separator,
-  .p-tieredmenu .p-menuitem-separator {
-    margin: 0.35rem 0.6rem;
-    border-top-color: rgba(86, 117, 158, 0.14);
-  }
-
-  .solid-list-toolbar .p-button,
-  .solid-form-toolbar-row .p-button,
-  .solid-form-header .p-button {
-    min-height: 2.6rem;
-  }
-
   .solid-header-cog-trigger,
-  .layout-topbar .p-link,
-  .layout-topbar button {
+.layout-topbar button {
     border-radius: 10px;
   }
 
   .solid-header-cog-trigger:hover,
-  .layout-topbar .p-link:hover,
-  .layout-topbar button:hover {
+.layout-topbar button:hover {
     background: rgba(110, 168, 254, 0.12);
   }
 
   .solid-custom-overlay,
-  .listview-cogwheel-panel,
-  .customize-layout-panel {
+.listview-cogwheel-panel,
+.customize-layout-panel {
     background: rgba(13, 20, 31, 0.98);
     border: 1px solid rgba(86, 117, 158, 0.3);
     border-radius: 12px;
@@ -908,19 +442,8 @@
   }
 
   .solid-header-dropdown-item:hover,
-  .solid-header-dropdown-item[data-highlighted] {
+.solid-header-dropdown-item[data-highlighted] {
     background: rgba(110, 168, 254, 0.12);
     color: #e3ecf5;
   }
-
-  .p-inputtext:enabled:focus,
-  .p-dropdown:not(.p-disabled).p-focus,
-  .p-multiselect:not(.p-disabled).p-focus,
-  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-    border-color: #6ea8fe;
-    background: linear-gradient(180deg, rgba(23, 35, 50, 1), rgba(18, 28, 41, 1));
-    box-shadow:
-      0 0 0 0.22rem rgba(110, 168, 254, 0.16),
-      0 10px 20px rgba(110, 168, 254, 0.06);
-  }
 }
diff --git a/src/resources/themes/solid-dark-modern/theme.css b/src/resources/themes/solid-dark-modern/theme.css
index a3db0916..82e76d16 100644
--- a/src/resources/themes/solid-dark-modern/theme.css
+++ b/src/resources/themes/solid-dark-modern/theme.css
@@ -7,13 +7,13 @@
   }
 
   body,
-  #root,
-  .layout-wrapper,
-  .layout-main-container,
-  .main-content,
-  .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-form-page-wrapper {
+#root,
+.layout-wrapper,
+.layout-main-container,
+.main-content,
+.page-parent-wrapper,
+.solid-list-page-wrapper,
+.solid-form-page-wrapper {
     background:
       radial-gradient(circle at top right, rgba(249, 115, 22, 0.08), transparent 24%),
       linear-gradient(180deg, #0c1018 0%, #121826 100%);
@@ -27,16 +27,16 @@
   }
 
   .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-form-wrapper,
-  .solid-list-content {
+.solid-list-page-wrapper,
+.solid-form-wrapper,
+.solid-list-content {
     background: transparent;
   }
 
   .solid-sidebar,
-  aside.solid-sidebar,
-  .solid-sidebar.is-open,
-  .solid-sidebar.is-collapsed {
+aside.solid-sidebar,
+.solid-sidebar.is-open,
+.solid-sidebar.is-collapsed {
     background: #111621 !important;
     color: #f2f4f8 !important;
     border-right: 1px solid rgba(51, 61, 84, 0.56) !important;
@@ -44,9 +44,9 @@
   }
 
   .solid-sidebar-header,
-  .solid-sidebar-search-wrap,
-  .solid-sidebar-tree-wrap,
-  .solid-sidebar-footer {
+.solid-sidebar-search-wrap,
+.solid-sidebar-tree-wrap,
+.solid-sidebar-footer {
     background: transparent !important;
     border-color: rgba(58, 68, 92, 0.34) !important;
   }
@@ -56,15 +56,15 @@
   }
 
   .solid-sidebar-search-wrap,
-  .solid-sidebar-footer {
+.solid-sidebar-footer {
     padding-left: 14px;
     padding-right: 14px;
   }
 
   .solid-workspace-trigger,
-  .solid-sidebar-search,
-  .solid-sidebar-footer .userProfile,
-  .solid-sidebar-external-trigger {
+.solid-sidebar-search,
+.solid-sidebar-footer .userProfile,
+.solid-sidebar-external-trigger {
     background: #191f2d !important;
     border: 1px solid rgba(58, 68, 92, 0.56) !important;
     border-radius: 14px !important;
@@ -72,23 +72,23 @@
   }
 
   .solid-workspace-avatar:not(.has-image),
-  .solid-workspace-item-avatar:not(.has-image) {
+.solid-workspace-item-avatar:not(.has-image) {
     background: linear-gradient(135deg, #ffb56b, #f28c28) !important;
     color: #1a120d !important;
   }
 
   .solid-workspace-label-top,
-  .solid-sidebar-search::placeholder {
+.solid-sidebar-search::placeholder {
     color: rgba(171, 180, 201, 0.72) !important;
   }
 
   .solid-workspace-label,
-  .solid-workspace-item-label,
-  .solid-sidebar-tree-link,
-  .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-label,
-  .solid-sidebar-tree-toggle,
-  .solid-sidebar-mobile-action {
+.solid-workspace-item-label,
+.solid-sidebar-tree-link,
+.solid-sidebar-tree-parent,
+.solid-sidebar-tree-label,
+.solid-sidebar-tree-toggle,
+.solid-sidebar-mobile-action {
     color: #eef2f8 !important;
   }
 
@@ -120,9 +120,9 @@
   }
 
   .solid-sidebar-tree-row.is-active .solid-sidebar-tree-label,
-  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-link,
-  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-toggle {
+.solid-sidebar-tree-row.is-active .solid-sidebar-tree-link,
+.solid-sidebar-tree-row.is-active .solid-sidebar-tree-parent,
+.solid-sidebar-tree-row.is-active .solid-sidebar-tree-toggle {
     color: #fff2df !important;
     font-weight: 700 !important;
   }
@@ -161,10 +161,9 @@
   }
 
   .solid-list-surface,
-  .solid-form-section,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .p-card {
+.solid-form-section,
+.solid-card-view-card,
+.solid-kanban-card {
     background: #2c3448;
     border: 1px solid rgba(65, 76, 104, 0.7);
     border-radius: 20px;
@@ -179,8 +178,8 @@
   }
 
   .solid-list-toolbar .view-title,
-  .form-wrapper-title,
-  .view-title {
+.form-wrapper-title,
+.view-title {
     font-size: 1.08rem;
     font-weight: 800;
     line-height: 1.2;
@@ -189,14 +188,14 @@
   }
 
   .solid-list-toolbar .solid-list-toolbar-actions,
-  .solid-form-toolbar-actions,
-  .solid-header-buttons-wrapper {
+.solid-form-toolbar-actions,
+.solid-header-buttons-wrapper {
     gap: 0.6rem !important;
   }
 
   .solid-list-toolbar .solid-global-search-element,
-  .solid-kanban-toolbar .solid-global-search-element,
-  .solid-tree-toolbar .solid-global-search-element {
+.solid-kanban-toolbar .solid-global-search-element,
+.solid-tree-toolbar .solid-global-search-element {
     height: 44px;
     border: 1px solid rgba(65, 76, 104, 0.72);
     border-radius: 12px;
@@ -206,30 +205,30 @@
   }
 
   .solid-list-toolbar .solid-global-search-element:focus-within,
-  .solid-kanban-toolbar .solid-global-search-element:focus-within,
-  .solid-tree-toolbar .solid-global-search-element:focus-within {
+.solid-kanban-toolbar .solid-global-search-element:focus-within,
+.solid-tree-toolbar .solid-global-search-element:focus-within {
     border-color: #f28c28;
     box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.14);
   }
 
   .solid-list-toolbar .solid-global-search-element input,
-  .solid-kanban-toolbar .solid-global-search-element input,
-  .solid-tree-toolbar .solid-global-search-element input {
+.solid-kanban-toolbar .solid-global-search-element input,
+.solid-tree-toolbar .solid-global-search-element input {
     height: 40px;
     font-size: 13px;
     color: #eef2f8;
   }
 
   .solid-list-toolbar .solid-global-search-element input::placeholder,
-  .solid-kanban-toolbar .solid-global-search-element input::placeholder,
-  .solid-tree-toolbar .solid-global-search-element input::placeholder {
+.solid-kanban-toolbar .solid-global-search-element input::placeholder,
+.solid-tree-toolbar .solid-global-search-element input::placeholder {
     color: #aeb6c9;
   }
 
   .solid-list-toolbar .custom-filter-button,
-  .solid-list-toolbar .solid-icon-button,
-  .solid-header-cog-trigger,
-  .solid-form-toolbar-actions .solid-icon-button {
+.solid-list-toolbar .solid-icon-button,
+.solid-header-cog-trigger,
+.solid-form-toolbar-actions .solid-icon-button {
     border: 1px solid rgba(65, 76, 104, 0.72) !important;
     background: #1f2738 !important;
     color: #eef2f8 !important;
@@ -237,120 +236,14 @@
     box-shadow: none;
   }
 
-  .solid-list-toolbar .p-button,
   .solid-list-toolbar .solid-btn,
-  .solid-form-toolbar-actions .p-button,
-  .solid-form-toolbar-actions .solid-btn {
+.solid-form-toolbar-actions .solid-btn {
     height: 40px;
     border-radius: 12px;
     font-size: 12px;
     font-weight: 700;
   }
 
-  .p-button:not(.p-button-text):not(.p-button-link) {
-    background: #f28c28;
-    border-color: #f28c28;
-    color: #1a120d;
-    box-shadow: 0 10px 20px rgba(242, 140, 40, 0.2);
-  }
-
-  .p-button:not(.p-button-text):not(.p-button-link):hover {
-    background: #da7415;
-    border-color: #da7415;
-  }
-
-  .p-button.p-button-secondary,
-  .p-button.p-button-outlined {
-    background: #1f2738;
-    color: #eef2f8;
-    border-color: rgba(65, 76, 104, 0.72);
-    box-shadow: none;
-  }
-
-  .p-inputtext,
-  .p-dropdown,
-  .p-multiselect,
-  .p-inputnumber-input,
-  .p-password-input,
-  .p-inputtextarea,
-  .p-autocomplete .p-inputtext,
-  .p-calendar .p-inputtext,
-  .p-treeselect,
-  .p-cascadeselect {
-    min-height: 46px;
-    border-radius: 12px !important;
-    border: 1px solid rgba(65, 76, 104, 0.72) !important;
-    background: #31384d !important;
-    color: #f3f5fa !important;
-    box-shadow: none !important;
-  }
-
-  .p-inputtext::placeholder,
-  .p-inputtextarea::placeholder,
-  .p-autocomplete-input::placeholder {
-    color: #aeb6c9 !important;
-  }
-
-  .p-inputtext:enabled:hover,
-  .p-dropdown:not(.p-disabled):hover,
-  .p-multiselect:not(.p-disabled):hover,
-  .p-treeselect:not(.p-disabled):hover,
-  .p-cascadeselect:not(.p-disabled):hover {
-    border-color: rgba(242, 140, 40, 0.3) !important;
-  }
-
-  .p-inputtext:enabled:focus,
-  .p-inputtextarea:enabled:focus,
-  .p-dropdown:not(.p-disabled).p-focus,
-  .p-multiselect:not(.p-disabled).p-focus,
-  .p-treeselect:not(.p-disabled).p-focus,
-  .p-cascadeselect:not(.p-disabled).p-focus,
-  .p-autocomplete:not(.p-disabled).p-focus .p-inputtext,
-  .p-calendar:not(.p-disabled).p-focus .p-inputtext {
-    border-color: #f28c28 !important;
-    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.14) !important;
-  }
-
-  .p-dropdown .p-dropdown-trigger,
-  .p-multiselect .p-multiselect-trigger,
-  .p-treeselect .p-treeselect-trigger,
-  .p-cascadeselect .p-cascadeselect-trigger {
-    width: 2.75rem;
-    color: #b7bfd2 !important;
-  }
-
-  .p-dropdown-panel,
-  .p-multiselect-panel,
-  .p-autocomplete-panel,
-  .p-datepicker,
-  .p-datepicker:not(.p-datepicker-inline),
-  .p-treeselect-panel,
-  .p-cascadeselect-panel {
-    background: #2c3448 !important;
-    color: #f3f5fa !important;
-    border: 1px solid rgba(65, 76, 104, 0.72) !important;
-    border-radius: 14px !important;
-    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28) !important;
-  }
-
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item,
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item,
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item,
-  .p-treeselect-panel .p-treeselect-items-wrapper .p-treenode-content,
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
-    border-radius: 10px;
-    margin: 4px 8px;
-    color: #f3f5fa !important;
-  }
-
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
-    background: rgba(242, 140, 40, 0.16) !important;
-    color: #ffd8af !important;
-  }
-
   .solid-form-section {
     --solid-form-control-bg: rgba(255, 255, 255, 0.04);
     --solid-form-control-bg-disabled: rgba(51, 65, 85, 0.24);
@@ -377,8 +270,8 @@
   }
 
   .solid-form-content,
-  .solid-form-wrapper .solid-form-content.solid-form-view,
-  .solid-form-wrapper .solid-form-content.solid-form-edit {
+.solid-form-wrapper .solid-form-content.solid-form-view,
+.solid-form-wrapper .solid-form-content.solid-form-edit {
     padding: 24px;
     background: linear-gradient(180deg, #20283a 0%, #1b2232 100%);
   }
@@ -392,28 +285,13 @@
     margin-bottom: 0.5rem;
   }
 
-  .solid-form-content .p-inputtext,
-  .solid-form-content .p-dropdown,
-  .solid-form-content .p-multiselect,
-  .solid-form-content .p-inputnumber-input,
-  .solid-form-content .solid-standard-autocomplete .p-inputtext,
-  .solid-form-content .solid-standard-autocomplete .p-autocomplete-dropdown.p-button,
   .solid-form-content .react-datepicker-wrapper input,
-  .solid-form-content .solid-input,
-  .solid-form-content .solid-select,
-  .solid-form-content .solid-autocomplete-control {
+.solid-form-content .solid-input,
+.solid-form-content .solid-select,
+.solid-form-content .solid-autocomplete-control {
     min-height: 46px;
   }
 
-  .solid-form-content .p-dropdown:not(.p-disabled).p-focus,
-  .solid-form-content .p-multiselect:not(.p-disabled).p-focus,
-  .solid-form-content .p-inputtext:enabled:focus,
-  .solid-form-content .solid-standard-autocomplete.p-inputwrapper-focus .p-inputtext,
-  .solid-form-content .solid-standard-autocomplete.p-inputwrapper-focus .p-autocomplete-dropdown.p-button {
-    border-color: #f28c28;
-    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.14);
-  }
-
   .solid-notebook-tablist {
     border-bottom: 0;
     gap: 0.4rem;
@@ -483,23 +361,6 @@
     padding-bottom: 0.8rem;
   }
 
-  .solid-datatable-wrapper .p-datatable .p-datatable-thead > tr > th {
-    background: #20283a;
-    color: #b6bed0;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    border-bottom: 1px solid rgba(65, 76, 104, 0.62);
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr {
-    background: rgba(44, 52, 72, 0.96);
-    color: #f3f5fa;
-  }
-
   .solid-data-table-row {
     border-top: 0;
     background: transparent;
@@ -545,7 +406,7 @@
   }
 
   .solid-paginator-btn,
-  .solid-paginator-select {
+.solid-paginator-select {
     border-radius: 12px !important;
   }
 
@@ -563,38 +424,11 @@
   }
 
   .solid-form-content > .flex,
-  .solid-form-content > .p-tabview,
-  .solid-form-content > .p-panel,
-  .solid-form-content > .p-fieldset,
-  .solid-form-content > .solid-layout-accordion {
+.solid-form-content > .solid-layout-accordion {
     background: rgba(44, 52, 72, 0.94);
     border: 1px solid rgba(65, 76, 104, 0.56);
     border-radius: 16px;
     padding: 16px;
     box-shadow: 0 8px 24px rgba(2, 6, 23, 0.16);
   }
-
-  .solid-form-content .p-panel,
-  .solid-form-content .p-fieldset,
-  .solid-form-content .p-accordion .p-accordion-header .p-accordion-header-link,
-  .solid-form-content .p-accordion .p-accordion-content {
-    border-radius: 16px;
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr > td {
-    border-bottom: 1px solid rgba(86, 62, 46, 0.16);
-    padding-top: 0.95rem;
-    padding-bottom: 0.95rem;
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr:hover,
-  .solid-datatable-wrapper .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
-    background: rgba(242, 140, 40, 0.08);
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr.p-highlight,
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr > td.p-highlight {
-    background: rgba(242, 140, 40, 0.16);
-    color: #ffd8af;
-  }
 }
diff --git a/src/resources/themes/solid-dark-purple/theme.css b/src/resources/themes/solid-dark-purple/theme.css
index c1b66cbd..ec40d336 100644
--- a/src/resources/themes/solid-dark-purple/theme.css
+++ b/src/resources/themes/solid-dark-purple/theme.css
@@ -78,13 +78,13 @@
   }
 
   .solid-logo-title,
-  .solid-auth-title,
-  .solid-auth-input-label {
+.solid-auth-title,
+.solid-auth-input-label {
     color: var(--auth-title-color) !important;
   }
 
   .solid-auth-subtitle,
-  .solid-auth-subtitle a {
+.solid-auth-subtitle a {
     color: var(--auth-subtitle-color) !important;
   }
 
@@ -139,13 +139,13 @@
   }
 
   .solid-kanban-card,
-  .solid-media-card {
+.solid-media-card {
     border: none;
     background: transparent;
   }
 
   .solid-kanban-card:hover,
-  .solid-media-card:hover {
+.solid-media-card:hover {
     border: none;
     background: transparent;
   }
@@ -155,8 +155,8 @@
   }
 
   .kanban-image-preview,
-  .kanban-media-image-preview,
-  .kanban-media-view-card {
+.kanban-media-image-preview,
+.kanban-media-view-card {
     background-color: var(--surface-hover);
   }
 
diff --git a/src/resources/themes/solid-light-enterprise/theme.css b/src/resources/themes/solid-light-enterprise/theme.css
index ee037f64..cdb45156 100644
--- a/src/resources/themes/solid-light-enterprise/theme.css
+++ b/src/resources/themes/solid-light-enterprise/theme.css
@@ -3,23 +3,23 @@
 
 @layer solid-theme {
   body,
-  #root,
-  .layout-wrapper,
-  .layout-main-container,
-  .main-content,
-  .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-form-page-wrapper {
+#root,
+.layout-wrapper,
+.layout-main-container,
+.main-content,
+.page-parent-wrapper,
+.solid-list-page-wrapper,
+.solid-form-page-wrapper {
     background:
       radial-gradient(circle at top left, rgba(47, 111, 237, 0.08), transparent 20%),
       linear-gradient(180deg, #f4f7fb 0%, #ebf0f5 100%);
   }
 
   .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-form-wrapper,
-  .solid-form-section,
-  .solid-list-content {
+.solid-list-page-wrapper,
+.solid-form-wrapper,
+.solid-form-section,
+.solid-list-content {
     background: transparent;
   }
 
@@ -30,9 +30,9 @@
   }
 
   .solid-sidebar,
-  aside.solid-sidebar,
-  .solid-sidebar.is-open,
-  .solid-sidebar.is-collapsed {
+aside.solid-sidebar,
+.solid-sidebar.is-open,
+.solid-sidebar.is-collapsed {
     background: linear-gradient(180deg, #edf3f9 0%, #e6eef7 60%, #dde8f3 100%) !important;
     color: #2c425b !important;
     border-right: 1px solid #cfdbe8 !important;
@@ -40,54 +40,54 @@
   }
 
   .solid-sidebar-header,
-  .solid-sidebar-search-wrap,
-  .solid-sidebar-tree-wrap,
-  .solid-sidebar-footer {
+.solid-sidebar-search-wrap,
+.solid-sidebar-tree-wrap,
+.solid-sidebar-footer {
     background: transparent !important;
     border-color: #cfdbe8 !important;
   }
 
   .solid-workspace-trigger,
-  .solid-workspace-menu,
-  .solid-sidebar-search,
-  .solid-sidebar-footer .userProfile,
-  .solid-collapsed-item,
-  .solid-sidebar-mobile-action,
-  .solid-sidebar-external-trigger {
+.solid-workspace-menu,
+.solid-sidebar-search,
+.solid-sidebar-footer .userProfile,
+.solid-collapsed-item,
+.solid-sidebar-mobile-action,
+.solid-sidebar-external-trigger {
     background: rgba(255, 255, 255, 0.76) !important;
     color: #2c425b !important;
     border-color: rgba(47, 111, 237, 0.06) !important;
   }
 
   .solid-workspace-trigger:hover,
-  .solid-sidebar-search:focus,
-  .solid-sidebar-footer .userProfile:hover,
-  .solid-collapsed-item:hover,
-  .solid-sidebar-mobile-action:hover,
-  .solid-sidebar-external-trigger:hover {
+.solid-sidebar-search:focus,
+.solid-sidebar-footer .userProfile:hover,
+.solid-collapsed-item:hover,
+.solid-sidebar-mobile-action:hover,
+.solid-sidebar-external-trigger:hover {
     background: rgba(225, 235, 245, 0.98) !important;
     border-color: rgba(47, 111, 237, 0.12) !important;
   }
 
   .solid-workspace-avatar:not(.has-image),
-  .solid-workspace-item-avatar:not(.has-image),
-  .solid-collapsed-item.is-active {
+.solid-workspace-item-avatar:not(.has-image),
+.solid-collapsed-item.is-active {
     background: #2f6fed !important;
     color: #f8fbff !important;
   }
 
   .solid-workspace-label-top,
-  .solid-sidebar-search::placeholder {
+.solid-sidebar-search::placeholder {
     color: rgba(48, 70, 95, 0.56) !important;
   }
 
   .solid-workspace-label,
-  .solid-workspace-item-label,
-  .solid-sidebar-tree-link,
-  .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-toggle,
-  .solid-sidebar-mobile-action,
-  .solid-sidebar-footer .userProfile {
+.solid-workspace-item-label,
+.solid-sidebar-tree-link,
+.solid-sidebar-tree-parent,
+.solid-sidebar-tree-toggle,
+.solid-sidebar-mobile-action,
+.solid-sidebar-footer .userProfile {
     color: #2c425b !important;
   }
 
@@ -99,9 +99,9 @@
   }
 
   .layout-menu,
-  .layout-menu ul,
-  .layout-menu ul a,
-  .solid-sidebar-tree-link {
+.layout-menu ul,
+.layout-menu ul a,
+.solid-sidebar-tree-link {
     color: #31475e !important;
   }
 
@@ -130,141 +130,41 @@
   }
 
   .solid-sidebar-tree-label,
-  .layout-menuitem-root-text {
+.layout-menuitem-root-text {
     color: #31475e !important;
     font-weight: 500 !important;
     letter-spacing: 0.01em;
   }
 
   .view-title,
-  .form-wrapper-title,
-  .solid-list-toolbar .view-title {
+.form-wrapper-title,
+.solid-list-toolbar .view-title {
     color: #1d3654;
     font-weight: 700;
     letter-spacing: 0.01em;
   }
 
-  .p-button {
-    border-radius: 10px;
-    border-width: 1px;
-    font-weight: 600;
-    letter-spacing: 0.015em;
-    box-shadow: none;
-  }
-
-  .p-button:not(.p-button-text):not(.p-button-link) {
-    background: linear-gradient(180deg, #3677f0 0%, #2f6fed 100%);
-    border-color: #2d67df;
-    color: #f8fbff;
-  }
-
-  .p-button:not(.p-button-text):not(.p-button-link):hover {
-    background: linear-gradient(180deg, #417ff1 0%, #3573e8 100%);
-    border-color: #316ce0;
-    transform: none;
-  }
-
-  .p-button.p-button-outlined,
-  .p-button.p-button-secondary {
-    box-shadow: none;
-  }
-
-  .p-button.p-button-outlined {
-    background: rgba(255, 255, 255, 0.98);
-    border: 1px solid rgba(114, 137, 167, 0.22);
-    color: #27508b;
-  }
-
-  .p-button.p-button-secondary {
-    background: rgba(229, 235, 242, 0.96);
-    border: 1px solid rgba(114, 137, 167, 0.16);
-    color: #32465f;
-  }
-
-  .p-inputtext,
-  .p-dropdown,
-  .p-multiselect,
-  .p-autocomplete .p-autocomplete-multiple-container,
-  .p-calendar .p-inputtext,
-  .p-password-input,
-  .p-inputnumber-input,
-  .p-editor-container .p-editor-toolbar,
-  .p-editor-container .p-editor-content .ql-editor {
-    border-radius: 12px;
-  }
-
-  .p-inputtext,
-  .p-dropdown,
-  .p-multiselect,
-  .p-autocomplete .p-autocomplete-multiple-container,
-  .p-calendar .p-inputtext,
-  .p-password-input,
-  .p-inputnumber-input {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.98));
-    border: 1px solid rgba(114, 137, 167, 0.22);
-    color: #29415b;
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.7),
-      0 1px 2px rgba(15, 23, 42, 0.03);
-    transition:
-      border-color 140ms ease,
-      box-shadow 140ms ease,
-      background-color 140ms ease,
-      transform 140ms ease;
-  }
-
-  .p-inputtext::placeholder,
-  .p-dropdown .p-dropdown-label.p-placeholder,
-  .p-multiselect .p-multiselect-label.p-placeholder {
-    color: #7b8fa6;
-  }
-
-  .p-inputtext:hover,
-  .p-dropdown:not(.p-disabled):hover,
-  .p-multiselect:not(.p-disabled):hover,
-  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover,
-  .p-calendar:not(.p-calendar-disabled):hover .p-inputtext,
-  .p-password:hover .p-inputtext,
-  .p-inputnumber:hover .p-inputtext {
-    border-color: rgba(47, 111, 237, 0.28);
-    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(245, 249, 253, 1));
-  }
-
-  .p-dropdown .p-dropdown-trigger,
-  .p-multiselect .p-multiselect-trigger,
-  .p-calendar .p-datepicker-trigger,
-  .p-autocomplete .p-autocomplete-dropdown {
-    color: #5f7896;
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-  }
-
-  .p-card,
-  .p-dialog .p-dialog-content,
-  .p-dialog .p-dialog-header,
   .solid-list-surface,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-media-card-widget,
-  .solid-form-section {
+.solid-card-view-card,
+.solid-kanban-card,
+.solid-media-card-widget,
+.solid-form-section {
     border-radius: 14px;
   }
 
-  .p-card,
   .solid-list-surface,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-form-section {
+.solid-card-view-card,
+.solid-kanban-card,
+.solid-form-section {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.99));
     border: 1px solid rgba(114, 137, 167, 0.12);
     position: relative;
   }
 
-  .p-dialog .p-dialog-header,
   .solid-list-toolbar,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-form-section {
+.solid-card-view-card,
+.solid-kanban-card,
+.solid-form-section {
     box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
   }
 
@@ -276,7 +176,7 @@
   }
 
   .solid-form-header,
-  .solid-form-toolbar-row {
+.solid-form-toolbar-row {
     background: transparent;
     border-radius: 0;
     padding: 0;
@@ -284,14 +184,14 @@
   }
 
   .solid-form-content,
-  .solid-form-wrapper .solid-form-content.solid-form-view,
-  .solid-form-wrapper .solid-form-content.solid-form-edit {
+.solid-form-wrapper .solid-form-content.solid-form-view,
+.solid-form-wrapper .solid-form-content.solid-form-edit {
     background: linear-gradient(180deg, rgba(252, 253, 255, 0.95), rgba(244, 248, 252, 0.98));
     padding: 1.2rem;
   }
 
   .solid-list-surface::before,
-  .solid-form-section::before {
+.solid-form-section::before {
     content: "";
     position: absolute;
     inset: 0 0 auto 0;
@@ -300,9 +200,9 @@
   }
 
   .solid-list-toolbar .view-title,
-  .solid-form-header .view-title,
-  .solid-form-toolbar-row .view-title,
-  .solid-form-header .form-wrapper-title {
+.solid-form-header .view-title,
+.solid-form-toolbar-row .view-title,
+.solid-form-header .form-wrapper-title {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
@@ -314,8 +214,8 @@
   }
 
   .solid-form-header .view-title,
-  .solid-form-toolbar-row .view-title,
-  .solid-form-header .form-wrapper-title {
+.solid-form-toolbar-row .view-title,
+.solid-form-header .form-wrapper-title {
     padding: 0;
     gap: 0.35rem;
     background: transparent;
@@ -323,24 +223,22 @@
   }
 
   .solid-list-toolbar .view-title::before,
-  .solid-form-header .view-title::before,
-  .solid-form-toolbar-row .view-title::before,
-  .solid-form-header .form-wrapper-title::before {
+.solid-form-header .view-title::before,
+.solid-form-toolbar-row .view-title::before,
+.solid-form-header .form-wrapper-title::before {
     box-shadow: none;
   }
 
   .solid-list-toolbar .solid-global-search-element,
-  .solid-list-toolbar .custom-filter-button,
-  .solid-list-toolbar .solid-icon-button,
-  .solid-form-toolbar-actions .solid-icon-button {
+.solid-list-toolbar .custom-filter-button,
+.solid-list-toolbar .solid-icon-button,
+.solid-form-toolbar-actions .solid-icon-button {
     background: rgba(255, 255, 255, 0.88);
     border: 1px solid rgba(114, 137, 167, 0.16);
     border-radius: 10px;
   }
 
-  .solid-form-toolbar-actions .solid-icon-button,
-  .solid-form-toolbar-row .p-button,
-  .solid-form-header .p-button {
+  .solid-form-toolbar-actions .solid-icon-button {
     min-height: 2.2rem;
   }
 
@@ -348,25 +246,13 @@
     box-shadow: 0 0 0 0.18rem rgba(47, 111, 237, 0.14);
   }
 
-  .solid-list-toolbar .solid-global-search-element input,
-  .solid-form-content .p-inputtext,
-  .solid-form-content .p-dropdown,
-  .solid-form-content .p-multiselect,
-  .solid-form-content .p-inputnumber-input {
+  .solid-list-toolbar .solid-global-search-element input {
     background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 250, 253, 0.98));
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 0.72),
       0 1px 2px rgba(15, 23, 42, 0.03);
   }
 
-  .solid-form-content .p-inputtext,
-  .solid-form-content .p-dropdown,
-  .solid-form-content .p-multiselect,
-  .solid-form-content .p-inputnumber-input,
-  .solid-form-content .p-calendar .p-inputtext {
-    min-height: 2.9rem;
-  }
-
   .form-field-label {
     display: inline-flex;
     align-items: center;
@@ -388,13 +274,6 @@
     opacity: 0.75;
   }
 
-  .solid-form-section .p-fluid,
-  .solid-form-content .p-fluid {
-    display: block;
-  }
-
-  .solid-form-section .p-field,
-  .solid-form-content .p-field,
   .solid-form-content .grid > [class*="col"] {
     margin-bottom: 1rem;
   }
@@ -404,9 +283,7 @@
   }
 
   .solid-form-section .grid > [class*="col"] > div,
-  .solid-form-section .grid > [class*="col"] > .p-field,
-  .solid-form-content .grid > [class*="col"] > div,
-  .solid-form-content .grid > [class*="col"] > .p-field {
+.solid-form-content .grid > [class*="col"] > div {
     padding: 0.9rem 1rem;
     border-radius: 12px;
     background: linear-gradient(180deg, rgba(247, 250, 253, 0.92), rgba(241, 246, 251, 0.92));
@@ -414,12 +291,11 @@
   }
 
   .solid-datatable-wrapper,
-  .solid-list-table-area {
+.solid-list-table-area {
     background: linear-gradient(180deg, rgba(252, 253, 255, 0.97), rgba(245, 248, 252, 0.99));
     border-top: 1px solid rgba(114, 137, 167, 0.08);
   }
 
-  .p-datatable .p-datatable-thead > tr > th,
   .solid-data-table-head {
     background: linear-gradient(180deg, #f2f6fb 0%, #e9f0f7 100%);
     border-bottom: 1px solid rgba(114, 137, 167, 0.16);
@@ -429,204 +305,40 @@
     font-size: 0.78rem;
   }
 
-  .p-datatable .p-datatable-tbody > tr {
-    border-bottom: 1px solid rgba(114, 137, 167, 0.08);
-    transition: background-color 140ms ease, box-shadow 140ms ease;
-  }
-
-  .p-datatable .p-datatable-tbody > tr > td {
-    padding: 0.85rem 1rem;
-    color: #35506d;
-    background: transparent;
-  }
-
-  .p-datatable .p-datatable-tbody > tr > td:first-child {
-    font-weight: 600;
-    color: #233e5b;
-  }
-
   .solid-list-surface {
     overflow: hidden;
   }
 
-  .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-    background: rgba(240, 244, 249, 0.82);
-  }
-
-  .p-datatable .p-datatable-tbody > tr:hover {
-    background: rgba(224, 235, 247, 0.88);
-    box-shadow: inset 3px 0 0 #2f6fed;
-  }
-
-  .p-datatable .p-sortable-column .p-sortable-column-icon,
-  .p-datatable .p-column-filter-menu-button,
-  .p-datatable .p-column-filter-clear-button {
-    color: #55718f;
-  }
-
-  .p-paginator {
-    background: linear-gradient(180deg, rgba(249, 251, 254, 0.99), rgba(241, 246, 251, 0.99));
-    border: 1px solid rgba(114, 137, 167, 0.14);
-    border-radius: 0 0 14px 14px;
-    padding: 0.65rem 0.9rem;
-  }
-
-  .p-paginator .p-paginator-pages .p-paginator-page,
-  .p-paginator .p-paginator-prev,
-  .p-paginator .p-paginator-next,
-  .p-paginator .p-paginator-first,
-  .p-paginator .p-paginator-last {
-    border-radius: 10px;
-    min-width: 2.5rem;
-    height: 2.5rem;
-  }
-
-  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-    background: linear-gradient(180deg, #3d7cf0 0%, #2f6fed 100%);
-    color: #f8fbff;
-    border-color: #2f6fed;
-    box-shadow: 0 6px 14px rgba(47, 111, 237, 0.18);
-  }
-
-  .p-tabview .p-tabview-nav {
-    background: transparent;
-    border: 0;
-    gap: 0.4rem;
-  }
-
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
-    background: rgba(236, 242, 248, 0.98);
-    border: 1px solid rgba(114, 137, 167, 0.14);
-    border-radius: 10px;
-    color: #3a5878;
-  }
-
-  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-    background: linear-gradient(180deg, #3a78ef 0%, #2f6fed 100%);
-    border-color: #2f6fed;
-    color: #f8fbff;
-  }
-
-  .p-tabview .p-tabview-panels {
-    margin-top: 0.8rem;
-    border-radius: 14px;
-    background: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(245, 248, 252, 0.98));
-    border: 1px solid rgba(114, 137, 167, 0.1);
-    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
-  }
-
-  .p-chip,
-  .p-tag,
-  .p-badge {
-    border-radius: 999px;
-    font-weight: 700;
-    letter-spacing: 0.02em;
-  }
-
-  .p-chip {
-    background: rgba(47, 111, 237, 0.1);
-    color: #27508b;
-    border: 1px solid rgba(47, 111, 237, 0.12);
-  }
-
-  .p-tag,
-  .p-badge {
-    background: linear-gradient(180deg, #3d7cf0 0%, #2f6fed 100%);
-    color: #f8fbff;
-    box-shadow: 0 6px 14px rgba(47, 111, 237, 0.16);
-  }
-
-  .solid-list-toolbar .p-multiselect,
-  .solid-list-toolbar .p-dropdown,
-  .solid-list-toolbar .p-inputtext {
-    background: rgba(255, 255, 255, 0.94);
-  }
-
-  .solid-form-content .p-dropdown-panel,
-  .solid-form-content .p-multiselect-panel,
-  .solid-form-content .p-autocomplete-panel {
-    border-radius: 12px;
-    border: 1px solid rgba(114, 137, 167, 0.14);
-    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
-  }
-
-  .p-dialog {
-    border-radius: 18px;
-    overflow: hidden;
-    border: 1px solid rgba(114, 137, 167, 0.14);
-    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16);
-  }
-
-  .p-dialog .p-dialog-header {
-    position: relative;
-    padding: 1.15rem 1.25rem;
-    background: linear-gradient(180deg, rgba(249, 251, 254, 0.99), rgba(242, 247, 252, 0.99));
-  }
-
-  .p-dialog .p-dialog-header::after {
-    content: "";
-    position: absolute;
-    inset: auto 1.25rem 0 1.25rem;
-    height: 1px;
-    background: rgba(114, 137, 167, 0.12);
-  }
-
-  .p-dialog .p-dialog-content,
-  .p-dialog .p-dialog-footer {
-    background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(245, 248, 252, 0.99));
-  }
-
-  .p-sidebar,
-  .p-overlaypanel,
   .solid-custom-overlay,
-  .listview-cogwheel-panel,
-  .customize-layout-panel {
+.listview-cogwheel-panel,
+.customize-layout-panel {
     border-radius: 16px;
     overflow: hidden;
   }
 
-  .p-sidebar {
-    background: linear-gradient(180deg, rgba(248, 251, 254, 0.99), rgba(241, 246, 251, 0.99));
-    border-left: 1px solid rgba(114, 137, 167, 0.14);
-    box-shadow: -18px 0 42px rgba(15, 23, 42, 0.12);
-  }
-
-  .p-sidebar .p-sidebar-header {
-    padding: 1rem 1.1rem;
-    border-bottom: 1px solid rgba(114, 137, 167, 0.12);
-    background: rgba(255, 255, 255, 0.5);
-  }
-
-  .p-overlaypanel {
-    background: rgba(251, 253, 255, 0.99);
-    border: 1px solid rgba(114, 137, 167, 0.14);
-    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
-  }
-
-  .p-card,
   .solid-card-view-card,
-  .solid-kanban-card,
-  .solid-media-card-widget {
+.solid-kanban-card,
+.solid-media-card-widget {
     overflow: hidden;
   }
 
   .solid-kanban-card,
-  .solid-media-card-widget,
-  .solid-card-view-card {
+.solid-media-card-widget,
+.solid-card-view-card {
     transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
   }
 
   .solid-kanban-card:hover,
-  .solid-media-card-widget:hover,
-  .solid-card-view-card:hover {
+.solid-media-card-widget:hover,
+.solid-card-view-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
     border-color: rgba(47, 111, 237, 0.18);
   }
 
   .solid-kanban-card::after,
-  .solid-media-card-widget::after,
-  .solid-card-view-card::after {
+.solid-media-card-widget::after,
+.solid-card-view-card::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -635,15 +347,15 @@
   }
 
   .custom-filter-button,
-  .solid-list-toolbar .custom-filter-button,
-  .solid-list-toolbar .solid-icon-button {
+.solid-list-toolbar .custom-filter-button,
+.solid-list-toolbar .solid-icon-button {
     position: relative;
     overflow: hidden;
   }
 
   .custom-filter-button::before,
-  .solid-list-toolbar .custom-filter-button::before,
-  .solid-list-toolbar .solid-icon-button::before {
+.solid-list-toolbar .custom-filter-button::before,
+.solid-list-toolbar .solid-icon-button::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -651,115 +363,16 @@
     pointer-events: none;
   }
 
-  .p-panel,
-  .p-accordion .p-accordion-content,
-  .p-fieldset {
-    border-radius: 14px;
-    border: 1px solid rgba(114, 137, 167, 0.12);
-    overflow: hidden;
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
-  }
-
-  .p-panel .p-panel-header,
-  .p-accordion .p-accordion-header .p-accordion-header-link,
-  .p-fieldset .p-fieldset-legend {
-    background: linear-gradient(180deg, rgba(248, 251, 254, 0.99), rgba(241, 246, 251, 0.99));
-  }
-
-  .p-panel .p-panel-content,
-  .p-accordion .p-accordion-content,
-  .p-fieldset .p-fieldset-content {
-    background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(245, 248, 252, 0.99));
-  }
-
-  .p-menu,
-  .p-contextmenu,
-  .p-tieredmenu,
-  .p-slidemenu,
-  .p-megamenu .p-megamenu-panel,
-  .p-menubar .p-submenu-list {
-    border-radius: 14px;
-    border: 1px solid rgba(114, 137, 167, 0.14);
-    background: rgba(251, 253, 255, 0.99);
-    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
-    overflow: hidden;
-  }
-
-  .p-menu .p-menuitem > .p-menuitem-content,
-  .p-contextmenu .p-menuitem > .p-menuitem-content,
-  .p-tieredmenu .p-menuitem > .p-menuitem-content,
-  .p-slidemenu .p-menuitem-link > .p-menuitem-content,
-  .p-menubar .p-menuitem > .p-menuitem-content {
-    border-radius: 10px;
-    margin: 0.2rem 0.35rem;
-  }
-
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover,
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-    background: rgba(47, 111, 237, 0.08);
-  }
-
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content,
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content,
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content,
-  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content,
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
-    background: linear-gradient(180deg, #3d7cf0 0%, #2f6fed 100%);
-  }
-
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: #f8fbff;
-  }
-
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-    color: #f8fbff;
-  }
-
   .solid-workspace-menu,
-  .solid-header-dropdown-item {
+.solid-header-dropdown-item {
     backdrop-filter: blur(14px);
   }
 
-  .solid-card-view-card .p-card-title,
-  .solid-kanban-card .p-card-title,
-  .solid-media-card-widget .p-card-title,
-  .solid-card-view-card .p-card-subtitle,
-  .solid-kanban-card .p-card-subtitle,
-  .solid-media-card-widget .p-card-subtitle {
-    position: relative;
-    z-index: 1;
-  }
-
-  .solid-card-view-card .p-card-title,
-  .solid-kanban-card .p-card-title,
-  .solid-media-card-widget .p-card-title {
-    color: #1f3d60;
-    font-weight: 700;
-    letter-spacing: 0.01em;
-  }
-
-  .solid-card-view-card .p-card-subtitle,
-  .solid-kanban-card .p-card-subtitle,
-  .solid-media-card-widget .p-card-subtitle {
-    color: #617d9a;
-  }
-
   .solid-dashboard-welcome-bg,
-  .solid-dashboard-welcome-section,
-  .solid-admin-card,
-  [class*="dashboard-card"],
-  [class*="stat-card"] {
+.solid-dashboard-welcome-section,
+.solid-admin-card,
+[class*="dashboard-card"],
+[class*="stat-card"] {
     border-radius: 16px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 252, 0.99));
     border: 1px solid rgba(114, 137, 167, 0.12);
@@ -769,10 +382,10 @@
   }
 
   .solid-dashboard-welcome-bg::before,
-  .solid-dashboard-welcome-section::before,
-  .solid-admin-card::before,
-  [class*="dashboard-card"]::before,
-  [class*="stat-card"]::before {
+.solid-dashboard-welcome-section::before,
+.solid-admin-card::before,
+[class*="dashboard-card"]::before,
+[class*="stat-card"]::before {
     content: "";
     position: absolute;
     inset: 0 auto auto 0;
@@ -781,126 +394,42 @@
     background: linear-gradient(90deg, #2f6fed 0%, #6aa0ff 55%, #dbe8ff 100%);
   }
 
-  .p-datatable .p-datatable-tbody > tr.p-highlight {
-    background: rgba(47, 111, 237, 0.12);
-    box-shadow: inset 3px 0 0 #2f6fed;
-  }
-
-  .p-datatable .p-datatable-tbody > tr.p-highlight > td {
-    color: #1f3d60;
-  }
-
-  .p-datatable .p-datatable-tbody > tr.p-row-expanded,
-  .p-datatable .p-datatable-tbody > tr.p-highlight.p-row-expanded {
-    background: rgba(234, 242, 250, 0.92);
-  }
-
-  .p-datatable .p-row-toggler,
-  .p-datatable .p-row-editor-init,
-  .p-datatable .p-row-editor-save,
-  .p-datatable .p-row-editor-cancel {
-    border-radius: 10px;
-    color: #55718f;
-  }
-
-  .p-datatable .p-row-toggler:hover,
-  .p-datatable .p-row-editor-init:hover,
-  .p-datatable .p-row-editor-save:hover,
-  .p-datatable .p-row-editor-cancel:hover {
-    background: rgba(47, 111, 237, 0.08);
-    color: #2f6fed;
-  }
-
-  .p-sidebar .p-sidebar-content,
-  .p-dialog .p-dialog-content,
-  .p-overlaypanel .p-overlaypanel-content {
-    padding: 1rem 1.1rem;
-  }
-
-  .p-sidebar .p-sidebar-content .p-menu,
-  .p-overlaypanel .p-menu,
-  .p-dialog .p-menu {
-    box-shadow: none;
-    border-color: rgba(114, 137, 167, 0.1);
-  }
-
   .solid-dashboard-welcome-bg,
-  .solid-dashboard-welcome-section,
-  .solid-admin-card,
-  [class*="dashboard-card"],
-  [class*="stat-card"] {
+.solid-dashboard-welcome-section,
+.solid-admin-card,
+[class*="dashboard-card"],
+[class*="stat-card"] {
     transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
   }
 
   .solid-dashboard-welcome-bg:hover,
-  .solid-dashboard-welcome-section:hover,
-  .solid-admin-card:hover,
-  [class*="dashboard-card"]:hover,
-  [class*="stat-card"]:hover {
+.solid-dashboard-welcome-section:hover,
+.solid-admin-card:hover,
+[class*="dashboard-card"]:hover,
+[class*="stat-card"]:hover {
     transform: translateY(-2px);
     box-shadow: 0 18px 34px rgba(15, 23, 42, 0.09);
     border-color: rgba(47, 111, 237, 0.16);
   }
 
-  .solid-admin-card .p-card-title,
-  [class*="dashboard-card"] .p-card-title,
-  [class*="stat-card"] .p-card-title {
-    color: #1f3d60;
-    font-weight: 700;
-  }
-
-  .solid-admin-card .p-card-subtitle,
-  [class*="dashboard-card"] .p-card-subtitle,
-  [class*="stat-card"] .p-card-subtitle {
-    color: #66809b;
-  }
-
-  .p-menu .p-submenu-header,
-  .p-tieredmenu .p-submenu-header,
-  .p-megamenu .p-submenu-header {
-    background: rgba(237, 243, 249, 0.96);
-    color: #365170;
-    font-size: 0.76rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-  }
-
-  .solid-header-dropdown-item,
-  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link,
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link,
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+  .solid-header-dropdown-item {
     min-height: 2.7rem;
     align-items: center;
   }
 
-  .p-menu .p-menuitem-separator,
-  .p-contextmenu .p-menuitem-separator,
-  .p-tieredmenu .p-menuitem-separator {
-    margin: 0.35rem 0.6rem;
-    border-top-color: rgba(114, 137, 167, 0.12);
-  }
-
-  .solid-list-toolbar .p-button,
-  .solid-form-toolbar-row .p-button,
-  .solid-form-header .p-button {
-    min-height: 2.6rem;
-  }
-
   .solid-header-cog-trigger,
-  .layout-topbar .p-link,
-  .layout-topbar button {
+.layout-topbar button {
     border-radius: 10px;
   }
 
   .solid-header-cog-trigger:hover,
-  .layout-topbar .p-link:hover,
-  .layout-topbar button:hover {
+.layout-topbar button:hover {
     background: rgba(47, 111, 237, 0.08);
   }
 
   .solid-custom-overlay,
-  .listview-cogwheel-panel,
-  .customize-layout-panel {
+.listview-cogwheel-panel,
+.customize-layout-panel {
     background: rgba(251, 253, 255, 0.98);
     border: 1px solid rgba(114, 137, 167, 0.16);
     border-radius: 12px;
@@ -912,19 +441,8 @@
   }
 
   .solid-header-dropdown-item:hover,
-  .solid-header-dropdown-item[data-highlighted] {
+.solid-header-dropdown-item[data-highlighted] {
     background: rgba(47, 111, 237, 0.08);
     color: #27508b;
   }
-
-  .p-inputtext:enabled:focus,
-  .p-dropdown:not(.p-disabled).p-focus,
-  .p-multiselect:not(.p-disabled).p-focus,
-  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-    border-color: #2f6fed;
-    background: #ffffff;
-    box-shadow:
-      0 0 0 0.22rem rgba(47, 111, 237, 0.14),
-      0 8px 18px rgba(47, 111, 237, 0.08);
-  }
 }
diff --git a/src/resources/themes/solid-light-modern/theme.css b/src/resources/themes/solid-light-modern/theme.css
index 33bf904c..2b1c5076 100644
--- a/src/resources/themes/solid-light-modern/theme.css
+++ b/src/resources/themes/solid-light-modern/theme.css
@@ -7,13 +7,13 @@
   }
 
   body,
-  #root,
-  .layout-wrapper,
-  .layout-main-container,
-  .main-content,
-  .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-form-page-wrapper {
+#root,
+.layout-wrapper,
+.layout-main-container,
+.main-content,
+.page-parent-wrapper,
+.solid-list-page-wrapper,
+.solid-form-page-wrapper {
     background:
       radial-gradient(circle at top right, rgba(222, 206, 160, 0.16), transparent 24%),
       linear-gradient(180deg, #f4ede1 0%, #efe6d8 100%) !important;
@@ -38,7 +38,7 @@
   }
 
   .solid-admin-sidebar-trigger,
-  .solid-admin-back-btn {
+.solid-admin-back-btn {
     background: #f8f1e5 !important;
     border-color: var(--solid-border-default) !important;
     color: #5c4b3e !important;
@@ -50,7 +50,7 @@
   }
 
   .solid-admin-crumb,
-  .solid-admin-crumb-sep {
+.solid-admin-crumb-sep {
     color: #8a7a69 !important;
   }
 
@@ -59,8 +59,8 @@
   }
 
   .page-parent-wrapper,
-  .solid-list-page-wrapper,
-  .solid-list-content {
+.solid-list-page-wrapper,
+.solid-list-content {
     background: transparent;
   }
 
@@ -73,9 +73,9 @@
   }
 
   .solid-sidebar,
-  aside.solid-sidebar,
-  .solid-sidebar.is-open,
-  .solid-sidebar.is-collapsed {
+aside.solid-sidebar,
+.solid-sidebar.is-open,
+.solid-sidebar.is-collapsed {
     background: #eee4d2 !important;
     color: #332921 !important;
     border-right: 1px solid var(--solid-border-soft) !important;
@@ -83,9 +83,9 @@
   }
 
   .solid-sidebar-header,
-  .solid-sidebar-search-wrap,
-  .solid-sidebar-tree-wrap,
-  .solid-sidebar-footer {
+.solid-sidebar-search-wrap,
+.solid-sidebar-tree-wrap,
+.solid-sidebar-footer {
     background: transparent !important;
     border-color: var(--solid-border-soft) !important;
   }
@@ -95,15 +95,15 @@
   }
 
   .solid-sidebar-search-wrap,
-  .solid-sidebar-footer {
+.solid-sidebar-footer {
     padding-left: 18px;
     padding-right: 18px;
   }
 
   .solid-workspace-trigger,
-  .solid-sidebar-search,
-  .solid-sidebar-footer .userProfile,
-  .solid-sidebar-external-trigger {
+.solid-sidebar-search,
+.solid-sidebar-footer .userProfile,
+.solid-sidebar-external-trigger {
     background: #f4ecdd !important;
     border: 1px solid var(--solid-border-default) !important;
     border-radius: 14px !important;
@@ -111,23 +111,23 @@
   }
 
   .solid-workspace-avatar:not(.has-image),
-  .solid-workspace-item-avatar:not(.has-image) {
+.solid-workspace-item-avatar:not(.has-image) {
     background: linear-gradient(135deg, #575757, #2e2e2e) !important;
     color: #fffdf8 !important;
   }
 
   .solid-workspace-label-top,
-  .solid-sidebar-search::placeholder {
+.solid-sidebar-search::placeholder {
     color: #8d7c6e !important;
   }
 
   .solid-workspace-label,
-  .solid-workspace-item-label,
-  .solid-sidebar-tree-link,
-  .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-label,
-  .solid-sidebar-tree-toggle,
-  .solid-sidebar-mobile-action {
+.solid-workspace-item-label,
+.solid-sidebar-tree-link,
+.solid-sidebar-tree-parent,
+.solid-sidebar-tree-label,
+.solid-sidebar-tree-toggle,
+.solid-sidebar-mobile-action {
     color: #342a22 !important;
   }
 
@@ -158,16 +158,16 @@
   }
 
   .solid-sidebar-tree-row.is-active .solid-sidebar-tree-label,
-  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-link,
-  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-toggle {
+.solid-sidebar-tree-row.is-active .solid-sidebar-tree-link,
+.solid-sidebar-tree-row.is-active .solid-sidebar-tree-parent,
+.solid-sidebar-tree-row.is-active .solid-sidebar-tree-toggle {
     color: #f6efe2 !important;
     font-weight: 600 !important;
   }
 
   .solid-sidebar-tree-row[data-quick-create="true"],
-  .solid-sidebar-tree-row.solid-sidebar-tree-row--primary,
-  .solid-sidebar-tree-row.quick-create {
+.solid-sidebar-tree-row.solid-sidebar-tree-row--primary,
+.solid-sidebar-tree-row.quick-create {
     background: linear-gradient(180deg, #3e3a36 0%, #2d2a27 100%) !important;
     color: #f6efe2 !important;
     border-color: transparent !important;
@@ -175,17 +175,17 @@
   }
 
   .solid-sidebar-tree-row[data-quick-create="true"] .solid-sidebar-tree-label,
-  .solid-sidebar-tree-row[data-quick-create="true"] .solid-sidebar-tree-link,
-  .solid-sidebar-tree-row[data-quick-create="true"] .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-row[data-quick-create="true"] .solid-sidebar-tree-toggle,
-  .solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-label,
-  .solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-link,
-  .solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-toggle,
-  .solid-sidebar-tree-row.quick-create .solid-sidebar-tree-label,
-  .solid-sidebar-tree-row.quick-create .solid-sidebar-tree-link,
-  .solid-sidebar-tree-row.quick-create .solid-sidebar-tree-parent,
-  .solid-sidebar-tree-row.quick-create .solid-sidebar-tree-toggle {
+.solid-sidebar-tree-row[data-quick-create="true"] .solid-sidebar-tree-link,
+.solid-sidebar-tree-row[data-quick-create="true"] .solid-sidebar-tree-parent,
+.solid-sidebar-tree-row[data-quick-create="true"] .solid-sidebar-tree-toggle,
+.solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-label,
+.solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-link,
+.solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-parent,
+.solid-sidebar-tree-row.solid-sidebar-tree-row--primary .solid-sidebar-tree-toggle,
+.solid-sidebar-tree-row.quick-create .solid-sidebar-tree-label,
+.solid-sidebar-tree-row.quick-create .solid-sidebar-tree-link,
+.solid-sidebar-tree-row.quick-create .solid-sidebar-tree-parent,
+.solid-sidebar-tree-row.quick-create .solid-sidebar-tree-toggle {
     color: #f6efe2 !important;
   }
 
@@ -212,10 +212,9 @@
   }
 
   .solid-list-surface,
-  .solid-form-section,
-  .solid-card-view-card,
-  .solid-kanban-card,
-  .p-card {
+.solid-form-section,
+.solid-card-view-card,
+.solid-kanban-card {
     background: #f6efe2;
     border: 1px solid var(--solid-border-default);
     border-radius: 20px;
@@ -230,8 +229,8 @@
   }
 
   .solid-list-toolbar .view-title,
-  .form-wrapper-title,
-  .view-title {
+.form-wrapper-title,
+.view-title {
     font-size: 1.08rem;
     font-weight: 800;
     line-height: 1.2;
@@ -240,14 +239,14 @@
   }
 
   .solid-list-toolbar .solid-list-toolbar-actions,
-  .solid-form-toolbar-actions,
-  .solid-header-buttons-wrapper {
+.solid-form-toolbar-actions,
+.solid-header-buttons-wrapper {
     gap: 0.6rem !important;
   }
 
   .solid-list-toolbar .solid-global-search-element,
-  .solid-kanban-toolbar .solid-global-search-element,
-  .solid-tree-toolbar .solid-global-search-element {
+.solid-kanban-toolbar .solid-global-search-element,
+.solid-tree-toolbar .solid-global-search-element {
     height: 38px;
     border: 1px solid rgba(191, 176, 151, 0.9);
     border-radius: 10px;
@@ -257,15 +256,15 @@
   }
 
   .solid-list-toolbar .solid-global-search-element:focus-within,
-  .solid-kanban-toolbar .solid-global-search-element:focus-within,
-  .solid-tree-toolbar .solid-global-search-element:focus-within {
+.solid-kanban-toolbar .solid-global-search-element:focus-within,
+.solid-tree-toolbar .solid-global-search-element:focus-within {
     border-color: #2e2e2e;
     box-shadow: 0 0 0 3px rgba(191, 176, 151, 0.32);
   }
 
   .solid-list-toolbar .solid-global-search-element input,
-  .solid-kanban-toolbar .solid-global-search-element input,
-  .solid-tree-toolbar .solid-global-search-element input {
+.solid-kanban-toolbar .solid-global-search-element input,
+.solid-tree-toolbar .solid-global-search-element input {
     height: 36px;
     font-size: 12.5px;
     color: #2e251f;
@@ -273,20 +272,20 @@
   }
 
   .solid-list-toolbar .solid-global-search-element input::placeholder,
-  .solid-kanban-toolbar .solid-global-search-element input::placeholder,
-  .solid-tree-toolbar .solid-global-search-element input::placeholder {
+.solid-kanban-toolbar .solid-global-search-element input::placeholder,
+.solid-tree-toolbar .solid-global-search-element input::placeholder {
     color: #8d7c6e;
   }
 
   .solid-search-overlay-panel,
-  .solid-search-overlay-scroll,
-  .solid-search-overlay-section,
-  .solid-search-overlay-empty,
-  .solid-search-overlay-footer,
-  .solid-search-overlay-footer-action,
-  .solid-search-overlay-footer-action-secondary,
-  .solid-search-overlay-panel-callout,
-  .solid-search-overlay-panel-callout-compact {
+.solid-search-overlay-scroll,
+.solid-search-overlay-section,
+.solid-search-overlay-empty,
+.solid-search-overlay-footer,
+.solid-search-overlay-footer-action,
+.solid-search-overlay-footer-action-secondary,
+.solid-search-overlay-panel-callout,
+.solid-search-overlay-panel-callout-compact {
     background: #f6efe2 !important;
     background-color: #f6efe2 !important;
   }
@@ -299,19 +298,19 @@
   }
 
   .solid-search-overlay-scroll,
-  .solid-search-overlay-footer {
+.solid-search-overlay-footer {
     border-color: var(--solid-border-default) !important;
   }
 
   .solid-search-overlay-option,
-  .solid-search-overlay-footer-action {
+.solid-search-overlay-footer-action {
     background: transparent !important;
     color: #2e251f !important;
   }
 
   .solid-search-overlay-option:hover,
-  .solid-search-overlay-footer-action:hover,
-  .solid-search-overlay-option-active {
+.solid-search-overlay-footer-action:hover,
+.solid-search-overlay-option-active {
     background: #ede2d1 !important;
     color: #2e251f !important;
   }
@@ -331,9 +330,9 @@
   }
 
   .solid-list-toolbar .custom-filter-button,
-  .solid-list-toolbar .solid-icon-button,
-  .solid-header-cog-trigger,
-  .solid-form-toolbar-actions .solid-icon-button {
+.solid-list-toolbar .solid-icon-button,
+.solid-header-cog-trigger,
+.solid-form-toolbar-actions .solid-icon-button {
     border: 1px solid var(--solid-border-default) !important;
     background: #f7f0e3 !important;
     color: #5c4b3e !important;
@@ -342,8 +341,7 @@
   }
 
   .custom-add-button,
-  .custom-add-button.solid-btn,
-  .custom-add-button.p-button {
+.custom-add-button.solid-btn {
     border: 1px solid var(--solid-border-default) !important;
     background: #f3ebdd !important;
     background-color: #f3ebdd !important;
@@ -353,128 +351,21 @@
   }
 
   .custom-add-button:hover:not(:disabled),
-  .custom-add-button.solid-btn:hover:not(:disabled),
-  .custom-add-button.p-button:hover:not(:disabled) {
+.custom-add-button.solid-btn:hover:not(:disabled) {
     background: #ede2d1 !important;
     background-color: #ede2d1 !important;
     border-color: var(--solid-border-default) !important;
     color: #2e2e2e !important;
   }
 
-  .solid-list-toolbar .p-button,
   .solid-list-toolbar .solid-btn,
-  .solid-form-toolbar-actions .p-button,
-  .solid-form-toolbar-actions .solid-btn {
+.solid-form-toolbar-actions .solid-btn {
     height: 38px;
     border-radius: 10px;
     font-size: 12.5px;
     font-weight: 700;
   }
 
-  .p-button:not(.p-button-text):not(.p-button-link) {
-    background: #2e2e2e;
-    border-color: #2e2e2e;
-    color: #f8f1e5;
-    box-shadow: 0 8px 16px rgba(46, 46, 46, 0.12);
-  }
-
-  .p-button:not(.p-button-text):not(.p-button-link):hover {
-    background: #383838;
-    border-color: #383838;
-  }
-
-  .p-button.p-button-secondary,
-  .p-button.p-button-outlined {
-    background: #f7f0e3;
-    color: #5c4b3e;
-    border-color: var(--solid-border-default);
-    box-shadow: none;
-  }
-
-  .p-inputtext,
-  .p-dropdown,
-  .p-multiselect,
-  .p-inputnumber-input,
-  .p-password-input,
-  .p-inputtextarea,
-  .p-autocomplete .p-inputtext,
-  .p-calendar .p-inputtext,
-  .p-treeselect,
-  .p-cascadeselect {
-    min-height: 46px;
-    border-radius: 12px !important;
-    border: 1px solid var(--solid-border-default) !important;
-    background: #f3ebdd !important;
-    color: #2e251f !important;
-    box-shadow: none !important;
-  }
-
-  .p-inputtext::placeholder,
-  .p-inputtextarea::placeholder,
-  .p-autocomplete-input::placeholder {
-    color: #8d7c6e !important;
-  }
-
-  .p-inputtext:enabled:hover,
-  .p-dropdown:not(.p-disabled):hover,
-  .p-multiselect:not(.p-disabled):hover,
-  .p-treeselect:not(.p-disabled):hover,
-  .p-cascadeselect:not(.p-disabled):hover {
-    border-color: rgba(46, 46, 46, 0.24) !important;
-  }
-
-  .p-inputtext:enabled:focus,
-  .p-inputtextarea:enabled:focus,
-  .p-dropdown:not(.p-disabled).p-focus,
-  .p-multiselect:not(.p-disabled).p-focus,
-  .p-treeselect:not(.p-disabled).p-focus,
-  .p-cascadeselect:not(.p-disabled).p-focus,
-  .p-autocomplete:not(.p-disabled).p-focus .p-inputtext,
-  .p-calendar:not(.p-disabled).p-focus .p-inputtext {
-    border-color: #2e2e2e !important;
-    box-shadow: 0 0 0 4px rgba(46, 46, 46, 0.08) !important;
-  }
-
-  .p-dropdown .p-dropdown-trigger,
-  .p-multiselect .p-multiselect-trigger,
-  .p-treeselect .p-treeselect-trigger,
-  .p-cascadeselect .p-cascadeselect-trigger {
-    width: 2.75rem;
-    color: #8d7c6e !important;
-  }
-
-  .p-dropdown-panel,
-  .p-multiselect-panel,
-  .p-autocomplete-panel,
-  .p-datepicker,
-  .p-datepicker:not(.p-datepicker-inline),
-  .p-treeselect-panel,
-  .p-cascadeselect-panel {
-    background: #fbf6ee !important;
-    color: #2e251f !important;
-    border: 1px solid var(--solid-border-default) !important;
-    border-radius: 14px !important;
-    box-shadow: 0 18px 40px rgba(92, 75, 62, 0.1) !important;
-  }
-
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item,
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item,
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item,
-  .p-treeselect-panel .p-treeselect-items-wrapper .p-treenode-content,
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
-    border-radius: 10px;
-    margin: 4px 8px;
-    color: #2e251f !important;
-  }
-
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
-    background: rgba(46, 46, 46, 0.08) !important;
-    color: #2e2e2e !important;
-  }
-
   .solid-form-section {
     --solid-form-control-bg: rgba(255, 255, 255, 0.94);
     --solid-form-control-bg-disabled: #eceff4;
@@ -501,8 +392,8 @@
   }
 
   .solid-form-content,
-  .solid-form-wrapper .solid-form-content.solid-form-view,
-  .solid-form-wrapper .solid-form-content.solid-form-edit {
+.solid-form-wrapper .solid-form-content.solid-form-view,
+.solid-form-wrapper .solid-form-content.solid-form-edit {
     padding: 24px;
     background: #f6efe2;
   }
@@ -516,50 +407,22 @@
     margin-bottom: 0.5rem;
   }
 
-  .solid-form-content .p-inputtext,
-  .solid-form-content .p-dropdown,
-  .solid-form-content .p-multiselect,
-  .solid-form-content .p-inputnumber-input,
-  .solid-form-content .solid-standard-autocomplete .p-inputtext,
-  .solid-form-content .solid-standard-autocomplete .p-autocomplete-dropdown.p-button,
   .solid-form-content .react-datepicker-wrapper input,
-  .solid-form-content .solid-input,
-  .solid-form-content .solid-select,
-  .solid-form-content .solid-autocomplete-control {
+.solid-form-content .solid-input,
+.solid-form-content .solid-select,
+.solid-form-content .solid-autocomplete-control {
     min-height: 46px;
     background: #f3ebdd !important;
     border-color: var(--solid-border-default) !important;
   }
 
-  .solid-form-content .p-dropdown .p-dropdown-label,
-  .solid-form-content .p-multiselect .p-multiselect-label,
-  .solid-form-content .p-inputtext,
-  .solid-form-content .p-inputtextarea,
-  .solid-form-content .p-inputnumber-input,
-  .solid-form-content .solid-standard-autocomplete .p-inputtext,
   .solid-form-content .react-datepicker-wrapper input {
     background: transparent !important;
   }
 
-  .solid-form-content .p-dropdown-trigger,
-  .solid-form-content .p-multiselect-trigger,
-  .solid-form-content .p-treeselect-trigger,
-  .solid-form-content .p-cascadeselect-trigger {
-    background: transparent !important;
-  }
-
-  .solid-form-content .p-dropdown:not(.p-disabled).p-focus,
-  .solid-form-content .p-multiselect:not(.p-disabled).p-focus,
-  .solid-form-content .p-inputtext:enabled:focus,
-  .solid-form-content .solid-standard-autocomplete.p-inputwrapper-focus .p-inputtext,
-  .solid-form-content .solid-standard-autocomplete.p-inputwrapper-focus .p-autocomplete-dropdown.p-button {
-    border-color: #2e2e2e;
-    box-shadow: 0 0 0 4px rgba(46, 46, 46, 0.08);
-  }
-
   .solid-form-content .solid-notebook,
-  .solid-form-section .solid-notebook,
-  .solid-list-surface .solid-notebook {
+.solid-form-section .solid-notebook,
+.solid-list-surface .solid-notebook {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -619,11 +482,11 @@
   }
 
   .chatter-section,
-  .chatter-section.open,
-  .chatter-section .solid-locale-panel,
-  .chatter-section .solid-locale-tabs,
-  .chatter-section .solid-locale-tabs-panel,
-  .chatter-section .solid-locale-tab-content {
+.chatter-section.open,
+.chatter-section .solid-locale-panel,
+.chatter-section .solid-locale-tabs,
+.chatter-section .solid-locale-tabs-panel,
+.chatter-section .solid-locale-tab-content {
     background: #f1e8da !important;
   }
 
@@ -646,7 +509,7 @@
   }
 
   .chatter-section .solid-locale-tabs .solid-tabs-trigger,
-  .chatter-section .solid-locale-tabs .solid-notebook-tab-trigger {
+.chatter-section .solid-locale-tabs .solid-notebook-tab-trigger {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -665,15 +528,15 @@
   }
 
   .chatter-section .solid-locale-tabs .solid-tabs-trigger:hover,
-  .chatter-section .solid-locale-tabs .solid-notebook-tab-trigger:hover {
+.chatter-section .solid-locale-tabs .solid-notebook-tab-trigger:hover {
     background: rgba(244, 236, 221, 0.72) !important;
     color: #332921 !important;
     border-radius: 8px !important;
   }
 
   .chatter-section .solid-locale-tabs .solid-tabs-trigger.is-active,
-  .chatter-section .solid-locale-tabs .solid-notebook-tab-trigger.active,
-  .chatter-section .solid-locale-tabs .solid-notebook-tab-trigger.is-active {
+.chatter-section .solid-locale-tabs .solid-notebook-tab-trigger.active,
+.chatter-section .solid-locale-tabs .solid-notebook-tab-trigger.is-active {
     color: #2f261f !important;
     border: 1px solid var(--solid-border-default) !important;
     border-bottom: 1px solid var(--solid-border-default) !important;
@@ -684,14 +547,14 @@
   }
 
   .chatter-section .solid-locale-tabs-panel,
-  .chatter-section .solid-locale-tab-content,
-  .chatter-section .solid-locale-tab-content > div,
-  .chatter-section .solid-locale-tab-content .solid-chatter-body {
+.chatter-section .solid-locale-tab-content,
+.chatter-section .solid-locale-tab-content > div,
+.chatter-section .solid-locale-tab-content .solid-chatter-body {
     background: #f1e8da !important;
   }
 
   .chatter-section .solid-locale-info-card,
-  .chatter-section .solid-locale-info-row {
+.chatter-section .solid-locale-info-row {
     background: #f6efe2 !important;
     border-color: var(--solid-border-default) !important;
   }
@@ -701,15 +564,15 @@
   }
 
   .chatter-section .solidMessageWrapper,
-  .chatter-section .chatterSelectedFileCard,
-  .chatter-section .emailsTooltip {
+.chatter-section .chatterSelectedFileCard,
+.chatter-section .emailsTooltip {
     background: #f6efe2 !important;
     border-color: var(--solid-border-default) !important;
   }
 
   .chatter-section .solidChatterAttachment,
-  .chatter-section .solidChatterBadge,
-  .chatter-section .chatterDividerContent {
+.chatter-section .solidChatterBadge,
+.chatter-section .chatterDividerContent {
     background: #efe5d6 !important;
     border-color: var(--solid-border-default) !important;
   }
@@ -738,16 +601,15 @@
   }
 
   .solid-list-page-wrapper .solid-list-surface,
-  .solid-list-page-wrapper .solid-list-content,
-  .solid-list-page-wrapper .solid-list-table-area,
-  .solid-list-page-wrapper .solid-datatable-wrapper,
-  .solid-list-page-wrapper .solid-data-table-root {
+.solid-list-page-wrapper .solid-list-content,
+.solid-list-page-wrapper .solid-list-table-area,
+.solid-list-page-wrapper .solid-datatable-wrapper,
+.solid-list-page-wrapper .solid-data-table-root {
     background: #f1e8da !important;
   }
 
   .solid-list-page-wrapper .solid-datatable-wrapper > .solid-data-table-root,
-  .solid-list-page-wrapper .solid-datatable-wrapper > .p-datatable,
-  .solid-list-page-wrapper .solid-datatable-wrapper > div:first-child {
+.solid-list-page-wrapper .solid-datatable-wrapper > div:first-child {
     margin-top: 10px;
     margin-bottom: 10px;
   }
@@ -766,15 +628,13 @@
     background: #f1e8da !important;
   }
 
-  .solid-data-table-viewport > .relative,
-  .solid-datatable-wrapper .p-datatable,
-  .solid-datatable-wrapper .p-datatable-wrapper {
+  .solid-data-table-viewport > .relative {
     background: #f6efe2 !important;
   }
 
   .solid-list-page-wrapper .solid-datatable-wrapper .bg-background,
-  .solid-list-page-wrapper .solid-datatable-wrapper [class*="bg-background"],
-  .solid-list-page-wrapper .solid-datatable-wrapper [class~="bg-background"] {
+.solid-list-page-wrapper .solid-datatable-wrapper [class*="bg-background"],
+.solid-list-page-wrapper .solid-datatable-wrapper [class~="bg-background"] {
     background: #f6efe2 !important;
     background-color: #f6efe2 !important;
   }
@@ -802,37 +662,17 @@
   }
 
   .solid-tree-sticky-cell,
-  .solid-tree-sticky-cell-left,
-  .solid-tree-sticky-cell-right {
+.solid-tree-sticky-cell-left,
+.solid-tree-sticky-cell-right {
     background: #f6efe2 !important;
   }
 
   .solid-data-table-head .solid-tree-sticky-cell,
-  .solid-data-table-head .solid-tree-sticky-cell-left,
-  .solid-data-table-head .solid-tree-sticky-cell-right,
-  .solid-datatable-wrapper .p-datatable .p-datatable-thead > tr > th.solid-tree-sticky-cell,
-  .solid-datatable-wrapper .p-datatable .p-datatable-thead > tr > th.solid-tree-sticky-cell-left,
-  .solid-datatable-wrapper .p-datatable .p-datatable-thead > tr > th.solid-tree-sticky-cell-right {
+.solid-data-table-head .solid-tree-sticky-cell-left,
+.solid-data-table-head .solid-tree-sticky-cell-right {
     background: #d7cebd !important;
   }
 
-  .solid-datatable-wrapper .p-datatable .p-datatable-thead > tr > th {
-    background: #d7cebd !important;
-    color: #3d342d;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.01em;
-    text-transform: none;
-    border-bottom: 1px solid var(--solid-border-strong);
-    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr {
-    background: #f6efe2;
-    color: #3b3029;
-  }
-
   .solid-data-table-row {
     border-top: 0;
     background: transparent;
@@ -864,8 +704,8 @@
   }
 
   .solid-data-table-row:hover .solid-tree-sticky-cell,
-  .solid-data-table-row:hover .solid-tree-sticky-cell-left,
-  .solid-data-table-row:hover .solid-tree-sticky-cell-right {
+.solid-data-table-row:hover .solid-tree-sticky-cell-left,
+.solid-data-table-row:hover .solid-tree-sticky-cell-right {
     background: #f1e8d8 !important;
   }
 
@@ -875,8 +715,8 @@
   }
 
   .solid-data-table-row:has(input[type="checkbox"]:checked) .solid-tree-sticky-cell,
-  .solid-data-table-row:has(input[type="checkbox"]:checked) .solid-tree-sticky-cell-left,
-  .solid-data-table-row:has(input[type="checkbox"]:checked) .solid-tree-sticky-cell-right {
+.solid-data-table-row:has(input[type="checkbox"]:checked) .solid-tree-sticky-cell-left,
+.solid-data-table-row:has(input[type="checkbox"]:checked) .solid-tree-sticky-cell-right {
     background: #ece4d4 !important;
   }
 
@@ -890,24 +730,19 @@
   }
 
   .solid-paginator-btn,
-  .solid-paginator-select {
+.solid-paginator-select {
     border-radius: 12px !important;
   }
 
   .solid-paginator-btn,
-  .solid-paginator-select,
-  .solid-paginator-select .p-dropdown,
-  .solid-paginator-select .p-dropdown-label,
-  .solid-table-paginator .p-button,
-  .solid-table-paginator .p-inputtext {
+.solid-paginator-select {
     background: #f3ebdd !important;
     background-color: #f3ebdd !important;
     border-color: var(--solid-border-default) !important;
   }
 
   .solid-row-menu-trigger,
-  .solid-row-menu-trigger.p-button,
-  .solid-tree-row-menu-trigger {
+.solid-tree-row-menu-trigger {
     background: #f3ebdd !important;
     background-color: #f3ebdd !important;
     border-color: var(--solid-border-default) !important;
@@ -916,33 +751,32 @@
   }
 
   .solid-row-menu-trigger:hover,
-  .solid-row-menu-trigger.p-button:hover,
-  .solid-tree-row-menu-trigger:hover {
+.solid-tree-row-menu-trigger:hover {
     background: #ede2d1 !important;
     background-color: #ede2d1 !important;
     color: #2e2e2e !important;
   }
 
   .solid-shadcn-confirm-dialog,
-  .solid-radix-dialog-content,
-  .solid-dialog,
-  .solid-popup-dialog.solid-radix-dialog-content.solid-common-dialog {
+.solid-radix-dialog-content,
+.solid-dialog,
+.solid-popup-dialog.solid-radix-dialog-content.solid-common-dialog {
     background: #f6efe2 !important;
     border: 1px solid var(--solid-border-default) !important;
     box-shadow: 0 16px 40px rgba(92, 75, 62, 0.12) !important;
   }
 
   .solid-shadcn-dialog-head,
-  .solid-radix-dialog-header,
-  .solid-shadcn-dialog-body,
-  .solid-radix-dialog-body,
-  .solid-shadcn-dialog-actions,
-  .solid-radix-dialog-footer {
+.solid-radix-dialog-header,
+.solid-shadcn-dialog-body,
+.solid-radix-dialog-body,
+.solid-shadcn-dialog-actions,
+.solid-radix-dialog-footer {
     background: #f6efe2 !important;
   }
 
   .solid-shadcn-dialog-sep,
-  .solid-radix-dialog-separator {
+.solid-radix-dialog-separator {
     background: var(--solid-border-default) !important;
     border-color: var(--solid-border-default) !important;
   }
@@ -952,11 +786,7 @@
     border-top: 1px solid var(--solid-border-default) !important;
   }
 
-  .solid-form-footer .p-button,
-  .solid-form-footer .solid-btn,
-  .solid-form-footer .p-inputtext,
-  .solid-form-footer .p-dropdown,
-  .solid-form-footer .p-dropdown-label {
+  .solid-form-footer .solid-btn {
     background-color: #f3ebdd !important;
     border-color: var(--solid-border-default) !important;
   }
@@ -966,10 +796,7 @@
   }
 
   .solid-form-content > .flex,
-  .solid-form-content > .p-tabview,
-  .solid-form-content > .p-panel,
-  .solid-form-content > .p-fieldset,
-  .solid-form-content > .solid-layout-accordion {
+.solid-form-content > .solid-layout-accordion {
     background: rgba(247, 239, 226, 0.98);
     border: 1px solid var(--solid-border-default);
     border-radius: 16px;
@@ -977,30 +804,6 @@
     box-shadow: 0 8px 24px rgba(92, 75, 62, 0.05);
   }
 
-  .solid-form-content .p-panel,
-  .solid-form-content .p-fieldset,
-  .solid-form-content .p-accordion .p-accordion-header .p-accordion-header-link,
-  .solid-form-content .p-accordion .p-accordion-content {
-    border-radius: 16px;
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr > td {
-    border-bottom: 1px solid rgba(126, 110, 95, 0.08);
-    padding-top: 0.95rem;
-    padding-bottom: 0.95rem;
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr:hover,
-  .solid-datatable-wrapper .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
-    background: #efe5d4;
-  }
-
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr.p-highlight,
-  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr > td.p-highlight {
-    background: rgba(46, 46, 46, 0.08);
-    color: #2e2e2e;
-  }
-
   .solid-segmented {
     border: 1px solid var(--solid-border-default) !important;
     border-radius: 14px;
diff --git a/src/resources/themes/solid-light-purple/theme.css b/src/resources/themes/solid-light-purple/theme.css
index 2d403aeb..370eb13d 100644
--- a/src/resources/themes/solid-light-purple/theme.css
+++ b/src/resources/themes/solid-light-purple/theme.css
@@ -62,8 +62,8 @@
   }
 
   .solid-center-layout .solid-logo-title,
-  .solid-auth-title,
-  .solid-auth-input-label {
+.solid-auth-title,
+.solid-auth-input-label {
     color: var(--auth-title-color);
   }
 
@@ -72,7 +72,7 @@
   }
 
   .solid-auth-subtitle,
-  .solid-auth-subtitle a {
+.solid-auth-subtitle a {
     color: var(--auth-subtitle-color) !important;
   }
 
@@ -134,13 +134,13 @@
   }
 
   .solid-kanban-card,
-  .solid-media-card {
+.solid-media-card {
     border: none;
     background: transparent;
   }
 
   .solid-kanban-card:hover,
-  .solid-media-card:hover {
+.solid-media-card:hover {
     border: none;
     background: transparent;
   }
@@ -151,8 +151,8 @@
   }
 
   .kanban-image-preview,
-  .kanban-media-image-preview,
-  .kanban-media-view-card {
+.kanban-media-image-preview,
+.kanban-media-view-card {
     background-color: #fff;
   }
 
diff --git a/src/routes/pages/admin/core/DashboardPage.tsx b/src/routes/pages/admin/core/DashboardPage.tsx
index 0572a2b5..ff8ce268 100644
--- a/src/routes/pages/admin/core/DashboardPage.tsx
+++ b/src/routes/pages/admin/core/DashboardPage.tsx
@@ -26,7 +26,7 @@ import {
 } from "../../../../redux/api/dashboardRuntimeApi";
 import { showToast } from "../../../../redux/features/toastSlice";
 import type { DashboardGridLayoutItem, DashboardWidgetComponentProps } from "../../../../types/dashboard";
-import styles from "./DashboardPage.module.css";
+import "./solid-dashboard.css";
 
 type Option = {
   label: string;
@@ -82,8 +82,8 @@ const toIso = (value: Date | null | undefined): string | null => {
   return value.toISOString();
 };
 
-const getErrorMessage = (error: any, fallback: string): string => {
-  const message = error?.data?.message ?? error?.data?.error ?? error?.message;
+const getErrorMessage = (dashboardError: any, fallback: string): string => {
+  const message = dashboardError?.data?.message ?? dashboardError?.data?.dashboardError ?? dashboardError?.message;
   return Array.isArray(message) ? message.join(", ") : message || fallback;
 };
 
@@ -423,10 +423,10 @@ const isSameFilterValue = (variable: any, left: DashboardVariableValue, right: D
 };
 
 const getDashboardTitle = (definition: any, fallback: string) =>
-  definition?.displayName ?? definition?.title ?? definition?.name ?? fallback;
+  definition?.displayName ?? definition?.dashboardTitle ?? definition?.name ?? fallback;
 
 const getWidgetTitle = (widget: any, fallback: string) =>
-  widget?.displayName ?? widget?.title ?? widget?.name ?? fallback;
+  widget?.displayName ?? widget?.dashboardTitle ?? widget?.name ?? fallback;
 
 const isUnauthorizedWidgetRuntime = (runtime: any): boolean =>
   !!(runtime?.meta?.unauthorized || runtime?.uiHints?.state === "unauthorized");
@@ -777,12 +777,12 @@ export function DashboardPage() {
           life: 3000,
         })
       );
-    } catch (error) {
+    } catch (dashboardError) {
       dispatch(
         showToast({
           severity: "error",
           summary: ERROR_MESSAGES.UPDATE_FAILED,
-          detail: getErrorMessage(error, ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_FAILED),
+          detail: getErrorMessage(dashboardError, ERROR_MESSAGES.DASHBOARD_LAYOUT_UPDATE_FAILED),
           life: 4000,
         })
       );
@@ -801,8 +801,8 @@ export function DashboardPage() {
       const presetOptions = getDatePresetOptions(variable);
       const preset = range?.preset && presetOptions.some((entry) => entry.value === range.preset) ? range.preset : "custom";
       return (
-        <div key={variableName} className={styles.filterField}>
-          <label className={styles.filterLabel}>{label}</label>
+        <div key={variableName} className={"solid-dashboard-filter-field"}>
+          <label className={"solid-dashboard-filter-label"}>{label}</label>
           <SolidSelect
             value={preset}
             options={presetOptions}
@@ -829,7 +829,7 @@ export function DashboardPage() {
             }}
           />
           {preset === "custom" ? (
-          <div className={styles.dateRange}>
+          <div className={"solid-dashboard-date-range"}>
             <SolidDatePicker
               selected={range.start ?? null}
               inputClassName="w-full"
@@ -868,8 +868,8 @@ export function DashboardPage() {
         : toOptions(variable?.selectionStaticValues ?? variable?.options ?? []);
       const selectedValues = Array.isArray(value) ? value : [];
       return (
-        <div key={variableName} className={styles.filterField}>
-          <label className={styles.filterLabel}>{label}</label>
+        <div key={variableName} className={"solid-dashboard-filter-field"}>
+          <label className={"solid-dashboard-filter-label"}>{label}</label>
           <SolidAutocomplete
             multiple
             dropdown
@@ -899,8 +899,8 @@ export function DashboardPage() {
       const selectedOption = options.find((entry) => `${entry.value}` === selectedValue) ?? null;
 
       return (
-        <div key={variableName} className={styles.filterField}>
-          <label className={styles.filterLabel}>{label}</label>
+        <div key={variableName} className={"solid-dashboard-filter-field"}>
+          <label className={"solid-dashboard-filter-label"}>{label}</label>
           <SolidAutocomplete
             dropdown
             field="label"
@@ -927,8 +927,8 @@ export function DashboardPage() {
         : [];
 
     return (
-      <div key={variableName} className={styles.filterField}>
-        <label className={styles.filterLabel}>{label}</label>
+      <div key={variableName} className={"solid-dashboard-filter-field"}>
+        <label className={"solid-dashboard-filter-label"}>{label}</label>
         <SolidSelect
           value={typeof value === "string" ? value : ""}
           options={options}
@@ -945,9 +945,9 @@ export function DashboardPage() {
   const renderWidgetBody = (widgetDefinition: any, runtime: any) => {
     if (isUnauthorizedWidgetRuntime(runtime)) {
       return (
-        <div className={styles.widgetUnauthorizedState}>
-          <AlertTriangle size={18} className={styles.widgetUnauthorizedIcon} />
-          <span className={styles.widgetUnauthorizedText}>
+        <div className={"solid-dashboard-widget-unauthorized-state"}>
+          <AlertTriangle size={18} className={"solid-dashboard-widget-unauthorized-icon"} />
+          <span className={"solid-dashboard-widget-unauthorized-text"}>
             {runtime?.uiHints?.message ?? "Unauthorized"}
           </span>
         </div>
@@ -970,34 +970,34 @@ export function DashboardPage() {
 
   if (definitionLoading) {
     return (
-      <div className={styles.page}>
+      <div className={"solid-dashboard-page"}>
         <SolidSpinner />
       </div>
     );
   }
 
   return (
-    <div className={styles.page}>
-      <div className={styles.header}>
-        <div className={styles.titleBlock}>
-          <h1 className={styles.title}>{getDashboardTitle(definition, dashboardName)}</h1>
-          <p className={styles.subtitle}>{definition?.description ?? `${moduleName} / ${dashboardName}`}</p>
+    <div className={"solid-dashboard-page"}>
+      <div className={"solid-dashboard-header"}>
+        <div className={"solid-dashboard-title-block"}>
+          <h1 className={"solid-dashboard-title"}>{getDashboardTitle(definition, dashboardName)}</h1>
+          <p className={"solid-dashboard-subtitle"}>{definition?.description ?? `${moduleName} / ${dashboardName}`}</p>
         </div>
 
-        <div className={styles.headerActions}>
-          <div className={styles.filterButtonWrap}>
+        <div className={"solid-dashboard-header-actions"}>
+          <div className={"solid-dashboard-filter-button-wrap"}>
             <SolidButton
-              className={styles.iconButton}
+              className={"solid-dashboard-icon-button"}
               leftIcon={<Filter size={16} />}
               onClick={() => setIsFilterDialogOpen(true)}
               tooltip="Filters"
               aria-label="Filters"
             />
-            {appliedFilterCount > 0 ? <span className={styles.filterCountBadge}>{appliedFilterCount}</span> : null}
+            {appliedFilterCount > 0 ? <span className={"solid-dashboard-filter-count-badge"}>{appliedFilterCount}</span> : null}
           </div>
 
           <SolidButton
-            className={styles.iconButton}
+            className={"solid-dashboard-icon-button"}
             leftIcon={<RefreshCw size={16} />}
             onClick={() => void handleRefresh()}
             disabled={dataLoading}
@@ -1006,7 +1006,7 @@ export function DashboardPage() {
           />
 
           <SolidButton
-            className={styles.iconButton}
+            className={"solid-dashboard-icon-button"}
             leftIcon={<Save size={16} />}
             onClick={() => void handleSaveLayout()}
             disabled={saveLayoutLoading || isCompactLayout}
@@ -1020,12 +1020,12 @@ export function DashboardPage() {
         open={isFilterDialogOpen}
         onOpenChange={setIsFilterDialogOpen}
         header="Dashboard Filters"
-        contentClassName={styles.filterDialogContent}
+        contentClassName={"solid-dashboard-filter-dialog-content"}
       >
         <SolidDialogBody>
-          <div className={styles.filterModalColumn}>{variables.map(renderVariable)}</div>
+          <div className={"solid-dashboard-filter-modal-column"}>{variables.map(renderVariable)}</div>
         </SolidDialogBody>
-        <SolidDialogFooter className={styles.filterModalActions}>
+        <SolidDialogFooter className={"solid-dashboard-filter-modal-actions"}>
           <SolidButton variant="outline" onClick={() => void handleClearFilters()}>
             Clear
           </SolidButton>
@@ -1035,17 +1035,17 @@ export function DashboardPage() {
         </SolidDialogFooter>
       </SolidDialog>
 
-      {dataError ? <p className={styles.error}>Failed to load dashboard data.</p> : null}
+      {dataError ? <p className={"solid-dashboard-error"}>Failed to load dashboard data.</p> : null}
 
       {showDashboardLoadingState ? (
-        <div className={styles.dashboardLoadingState}>
+        <div className={"solid-dashboard-loading-state"}>
           <SolidSpinner size={30} label="Loading records" />
-          <p className={styles.dashboardLoadingCopy}>Please wait while dashboard data is loading...</p>
+          <p className={"solid-dashboard-loading-copy"}>Please wait while dashboard data is loading...</p>
         </div>
       ) : (
         <div
           ref={gridRef}
-          className={`grid-stack ${styles.gridStack} ${isCompactLayout ? styles.gridStackCompact : ""}`}
+          className={`solid-dashboard-grid-stack ${"solid-dashboard-grid-stack"} ${isCompactLayout ? "solid-dashboard-grid-stack-compact" : ""}`}
         >
           {orderedWidgets.map((widget: any) => {
             const widgetName = widget?.id ?? widget?.name;
@@ -1064,10 +1064,10 @@ export function DashboardPage() {
                 gs-min-w={slot?.minW ?? 2}
                 gs-min-h={slot?.minH ?? 2}
               >
-                <div className={`grid-stack-item-content ${styles.widgetCard}`}>
-                  <h3 className={styles.widgetTitle}>{getWidgetTitle(widget, widgetName)}</h3>
-                  <div className={styles.widgetBody}>
-                    {runtime ? renderWidgetBody(widget, runtime) : <p className={styles.muted}>No data</p>}
+                <div className={`grid-stack-item-content ${"solid-dashboard-widget-card"}`}>
+                  <h3 className={"solid-dashboard-widget-title"}>{getWidgetTitle(widget, widgetName)}</h3>
+                  <div className={"solid-dashboard-widget-body"}>
+                    {runtime ? renderWidgetBody(widget, runtime) : <p className={"solid-dashboard-muted"}>No data</p>}
                   </div>
                 </div>
               </div>
diff --git a/src/routes/pages/admin/core/DashboardPage.module.css b/src/routes/pages/admin/core/solid-dashboard.css
similarity index 66%
rename from src/routes/pages/admin/core/DashboardPage.module.css
rename to src/routes/pages/admin/core/solid-dashboard.css
index 864de45a..bdb84b6b 100644
--- a/src/routes/pages/admin/core/DashboardPage.module.css
+++ b/src/routes/pages/admin/core/solid-dashboard.css
@@ -1,4 +1,4 @@
-.page {
+.solid-dashboard-page {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
@@ -9,20 +9,20 @@
   overscroll-behavior: contain;
 }
 
-.header {
+.solid-dashboard-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
 }
 
-.headerActions {
+.solid-dashboard-header-actions {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.iconButton {
+.solid-dashboard-icon-button {
   min-width: 36px;
   width: 36px;
   height: 36px;
@@ -32,12 +32,12 @@
   justify-content: center;
 }
 
-.filterButtonWrap {
+.solid-dashboard-filter-button-wrap {
   position: relative;
   display: inline-flex;
 }
 
-.filterCountBadge {
+.solid-dashboard-filter-count-badge {
   position: absolute;
   top: -5px;
   right: -5px;
@@ -54,81 +54,71 @@
   border: 1px solid #fff;
 }
 
-.titleBlock {
+.solid-dashboard-title-block {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.title {
+.solid-dashboard-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
 }
 
-.subtitle {
+.solid-dashboard-subtitle {
   margin: 0;
   color: #6b7280;
   font-size: 0.9rem;
 }
 
-.filterDialogContent {
+.solid-dashboard-filter-dialog-content {
   width: min(540px, calc(100vw - 32px));
 }
 
-.filterModalColumn {
+.solid-dashboard-filter-modal-column {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
 }
 
-.filterModalActions {
+.solid-dashboard-filter-modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 }
 
-.filterField {
+.solid-dashboard-filter-field {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
-.filterLabel {
+.solid-dashboard-filter-label {
   font-size: 0.85rem;
   font-weight: 500;
 }
 
-.dateRange {
+.solid-dashboard-date-range {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
 }
 
-.dateRange :global(.react-datepicker-wrapper),
-.dateRange :global(.react-datepicker__input-container) {
+.solid-dashboard-date-range .react-datepicker-wrapper,
+.solid-dashboard-date-range .react-datepicker__input-container {
   width: 100%;
 }
 
-.multiSelect {
-  width: 100%;
-  min-height: 84px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  background: #fff;
-  padding: 6px;
-  font-size: 0.9rem;
-}
-
-.gridStack {
+.solid-dashboard-grid-stack {
   width: 100%;
 }
 
-.gridStackCompact {
+.solid-dashboard-grid-stack-compact {
   min-height: 0;
 }
 
-.dashboardLoadingState {
+.solid-dashboard-loading-state {
   min-height: calc(100vh - 240px);
   display: flex;
   align-items: center;
@@ -139,14 +129,14 @@
   text-align: center;
 }
 
-.dashboardLoadingCopy {
+.solid-dashboard-loading-copy {
   margin: 0;
   color: #6b7280;
   font-size: 0.9rem;
   font-weight: 500;
 }
 
-.widgetCard {
+.solid-dashboard-widget-card {
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   background: #ffffff;
@@ -156,19 +146,19 @@
   overflow: hidden;
 }
 
-.widgetTitle {
+.solid-dashboard-widget-title {
   margin: 0 0 10px;
   font-size: 1rem;
   font-weight: 600;
 }
 
-.widgetBody {
+.solid-dashboard-widget-body {
   flex: 1;
   min-height: 0;
   display: flex;
 }
 
-.widgetUnauthorizedState {
+.solid-dashboard-widget-unauthorized-state {
   flex: 1;
   width: 100%;
   min-height: 180px;
@@ -181,72 +171,72 @@
   color: #6b7280;
 }
 
-.widgetUnauthorizedIcon {
+.solid-dashboard-widget-unauthorized-icon {
   color: #f59e0b;
 }
 
-.widgetUnauthorizedText {
+.solid-dashboard-widget-unauthorized-text {
   font-size: 0.92rem;
   font-weight: 500;
 }
 
-.error {
+.solid-dashboard-error {
   color: #b91c1c;
   font-size: 0.9rem;
 }
 
-.muted {
+.solid-dashboard-muted {
   color: #6b7280;
   font-size: 0.9rem;
 }
 
-:global(html.dark) .widgetCard,
-:global([data-theme="dark"]) .widgetCard {
+html.dark .solid-dashboard-widget-card,
+[data-theme="dark"] .solid-dashboard-widget-card {
   border-color: color-mix(in srgb, var(--border) 82%, transparent);
   background: var(--card);
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 2%, transparent);
 }
 
-:global(html.dark) .widgetTitle,
-:global([data-theme="dark"]) .widgetTitle {
+html.dark .solid-dashboard-widget-title,
+[data-theme="dark"] .solid-dashboard-widget-title {
   color: var(--foreground);
 }
 
 @media (max-width: 768px) {
-  .page {
+  .solid-dashboard-page {
     padding: 12px;
     gap: 12px;
   }
 
-  .header {
+  .solid-dashboard-header {
     align-items: flex-start;
     flex-direction: column;
   }
 
-  .headerActions {
+  .solid-dashboard-header-actions {
     width: 100%;
     justify-content: flex-end;
     flex-wrap: wrap;
   }
 
-  .title {
+  .solid-dashboard-title {
     font-size: 1.08rem;
   }
 
-  .subtitle {
+  .solid-dashboard-subtitle {
     font-size: 0.82rem;
   }
 
-  .dateRange {
+  .solid-dashboard-date-range {
     grid-template-columns: 1fr;
   }
 
-  .widgetCard {
+  .solid-dashboard-widget-card {
     padding: 10px;
     border-radius: 12px;
   }
 
-  .widgetTitle {
+  .solid-dashboard-widget-title {
     margin-bottom: 8px;
     font-size: 0.94rem;
   }
diff --git a/src/types/css-modules.d.ts b/src/types/css-modules.d.ts
deleted file mode 100644
index d4e9dc74..00000000
--- a/src/types/css-modules.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module "*.module.css" {
-    const classes: { readonly [key: string]: string };
-    export default classes;
-}
-
-declare module "*.css";