diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx
index 494ee459..36c5e662 100644
--- a/clients/ui/frontend/src/app/App.tsx
+++ b/clients/ui/frontend/src/app/App.tsx
@@ -21,6 +21,7 @@ import {
 import { BarsIcon } from '@patternfly/react-icons';
 import ToastNotifications from '~/shared/components/ToastNotifications';
 import { useSettings } from '~/shared/hooks/useSettings';
+import { isMUITheme, Theme } from '~/shared/utilities/const';
 import NavSidebar from './NavSidebar';
 import AppRoutes from './AppRoutes';
 import { AppContext } from './AppContext';
@@ -34,6 +35,15 @@ const App: React.FC = () => {
     loadError: configError,
   } = useSettings();
 
+  React.useEffect(() => {
+    // Apply the theme based on the value of STYLE_THEME
+    if (isMUITheme()) {
+      document.documentElement.classList.add(Theme.MUI);
+    } else {
+      document.documentElement.classList.remove(Theme.MUI);
+    }
+  }, []);
+
   const contextValue = React.useMemo(
     () =>
       configSettings && userSettings
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx
index 3498f7bc..9cde58d8 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx
@@ -14,6 +14,7 @@ import { CheckIcon, TimesIcon } from '@patternfly/react-icons';
 import { KeyValuePair } from '~/shared/types';
 import { EitherNotBoth } from '~/shared/typeHelpers';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 
 type ModelPropertiesTableRowProps = {
   allExistingKeys: string[];
@@ -90,31 +91,45 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
     setIsEditing(false);
   };
 
+  const propertyKeyInput = (
+    <TextInput
+      data-testid={isAddRow ? `add-property-key-input` : `edit-property-${key}-key-input`}
+      aria-label={
+        isAddRow ? 'Key input for new property' : `Key input for editing property with key ${key}`
+      }
+      isRequired
+      type="text"
+      value={unsavedKey}
+      onChange={(_event, str) => setUnsavedKey(str)}
+      validated={keyValidationError ? 'error' : 'default'}
+    />
+  );
+
+  const propertyValueInput = (
+    <TextInput
+      data-testid={isAddRow ? `add-property-value-input` : `edit-property-${key}-value-input`}
+      aria-label={
+        isAddRow
+          ? 'Value input for new property'
+          : `Value input for editing property with key ${key}`
+      }
+      isRequired
+      type="text"
+      value={unsavedValue}
+      onChange={(_event, str) => setUnsavedValue(str)}
+    />
+  );
+
   return (
     <Tr>
       <Td dataLabel="Key" width={45} modifier="breakWord">
         {isEditing ? (
           <>
-            <FormFieldset
-              className="tr-fieldset-wrapper"
-              component={
-                <TextInput
-                  data-testid={
-                    isAddRow ? `add-property-key-input` : `edit-property-${key}-key-input`
-                  }
-                  aria-label={
-                    isAddRow
-                      ? 'Key input for new property'
-                      : `Key input for editing property with key ${key}`
-                  }
-                  isRequired
-                  type="text"
-                  value={unsavedKey}
-                  onChange={(_event, str) => setUnsavedKey(str)}
-                  validated={keyValidationError ? 'error' : 'default'}
-                />
-              }
-            />
+            {isMUITheme() ? (
+              <FormFieldset className="tr-fieldset-wrapper" component={propertyKeyInput} />
+            ) : (
+              propertyKeyInput
+            )}
 
             {keyValidationError && (
               <FormHelperText>
@@ -130,25 +145,11 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       </Td>
       <Td dataLabel="Value" width={45} modifier="breakWord">
         {isEditing ? (
-          <FormFieldset
-            className="tr-fieldset-wrapper"
-            component={
-              <TextInput
-                data-testid={
-                  isAddRow ? `add-property-value-input` : `edit-property-${key}-value-input`
-                }
-                aria-label={
-                  isAddRow
-                    ? 'Value input for new property'
-                    : `Value input for editing property with key ${key}`
-                }
-                isRequired
-                type="text"
-                value={unsavedValue}
-                onChange={(_event, str) => setUnsavedValue(str)}
-              />
-            }
-          />
+          isMUITheme() ? (
+            <FormFieldset className="tr-fieldset-wrapper" component={propertyValueInput} />
+          ) : (
+            propertyValueInput
+          )
         ) : (
           <ExpandableSection
             variant="truncate"
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx
index 90d3b0be..fd927bdd 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx
@@ -7,6 +7,7 @@ import {
   DropdownList,
   MenuToggle,
   MenuToggleElement,
+  SearchInput,
   TextInput,
   ToolbarContent,
   ToolbarFilter,
@@ -33,6 +34,7 @@ import { asEnumMember } from '~/app/utils';
 import ModelVersionsTable from '~/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable';
 import SimpleSelect from '~/shared/components/SimpleSelect';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 
 type ModelVersionListViewProps = {
   modelVersions: ModelVersion[];
@@ -148,22 +150,35 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
                   />
                 </ToolbarFilter>
                 <ToolbarItem>
-                  <FormFieldset
-                    className="toolbar-fieldset-wrapper"
-                    component={
-                      <TextInput
-                        value={search}
-                        type="text"
-                        onChange={(_, searchValue) => {
-                          setSearch(searchValue);
-                        }}
-                        style={{ minWidth: '200px' }}
-                        data-testid="model-versions-table-search"
-                        aria-label="Search"
-                      />
-                    }
-                    field={`Find by ${searchType.toLowerCase()}`}
-                  />
+                  {isMUITheme() ? (
+                    <FormFieldset
+                      className="toolbar-fieldset-wrapper"
+                      component={
+                        <TextInput
+                          value={search}
+                          type="text"
+                          onChange={(_, searchValue) => {
+                            setSearch(searchValue);
+                          }}
+                          style={{ minWidth: '200px' }}
+                          data-testid="model-versions-table-search"
+                          aria-label="Search"
+                        />
+                      }
+                      field={`Find by ${searchType.toLowerCase()}`}
+                    />
+                  ) : (
+                    <SearchInput
+                      placeholder={`Find by ${searchType.toLowerCase()}`}
+                      value={search}
+                      onChange={(_, searchValue) => {
+                        setSearch(searchValue);
+                      }}
+                      onClear={() => setSearch('')}
+                      style={{ minWidth: '200px' }}
+                      data-testid="model-versions-table-search"
+                    />
+                  )}
                 </ToolbarItem>
               </ToolbarGroup>
             </ToolbarToggleGroup>
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx
index bca18327..097d60f1 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  SearchInput,
   TextInput,
   ToolbarContent,
   ToolbarFilter,
@@ -15,6 +16,7 @@ import { asEnumMember } from '~/app/utils';
 import { filterModelVersions } from '~/app/pages/modelRegistry/screens/utils';
 import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 import ModelVersionsArchiveTable from './ModelVersionsArchiveTable';
 
 type ModelVersionsArchiveListViewProps = {
@@ -74,22 +76,35 @@ const ModelVersionsArchiveListView: React.FC<ModelVersionsArchiveListViewProps>
                 />
               </ToolbarFilter>
               <ToolbarItem>
-                <FormFieldset
-                  className="toolbar-fieldset-wrapper"
-                  component={
-                    <TextInput
-                      value={search}
-                      type="text"
-                      onChange={(_, searchValue) => {
-                        setSearch(searchValue);
-                      }}
-                      style={{ minWidth: '200px' }}
-                      data-testid="model-versions-archive-table-search"
-                      aria-label="Search"
-                    />
-                  }
-                  field={`Find by ${searchType.toLowerCase()}`}
-                />
+                {isMUITheme() ? (
+                  <FormFieldset
+                    className="toolbar-fieldset-wrapper"
+                    component={
+                      <TextInput
+                        value={search}
+                        type="text"
+                        onChange={(_, searchValue) => {
+                          setSearch(searchValue);
+                        }}
+                        style={{ minWidth: '200px' }}
+                        data-testid="model-versions-archive-table-search"
+                        aria-label="Search"
+                      />
+                    }
+                    field={`Find by ${searchType.toLowerCase()}`}
+                  />
+                ) : (
+                  <SearchInput
+                    placeholder={`Find by ${searchType.toLowerCase()}`}
+                    value={search}
+                    onChange={(_, searchValue) => {
+                      setSearch(searchValue);
+                    }}
+                    onClear={() => setSearch('')}
+                    style={{ minWidth: '200px' }}
+                    data-testid="model-versions-archive-table-search"
+                  />
+                )}
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarToggleGroup>
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
index 1261a9df..da8fbf92 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -1,20 +1,22 @@
 import React from 'react';
 import { FormGroup, TextInput } from '@patternfly/react-core';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 
 type PrefilledModelRegistryFieldProps = {
   mrName?: string;
 };
 
-const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => (
-  <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
-    <FormFieldset
-      component={
-        <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
-      }
-      field="Model Registry"
-    />
-  </FormGroup>
-);
+const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => {
+  const mrNameInput = (
+    <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+  );
+
+  return (
+    <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
+      {isMUITheme() ? <FormFieldset component={mrNameInput} field="Model Registry" /> : mrNameInput}
+    </FormGroup>
+  );
+};
 
 export default PrefilledModelRegistryField;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index 0ccedb47..230e9b7c 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -18,6 +18,7 @@ import FormSection from '~/shared/components/pf-overrides/FormSection';
 import ApplicationsPage from '~/shared/components/ApplicationsPage';
 import { modelRegistryUrl, registeredModelUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
 import { ValueOf } from '~/shared/typeHelpers';
+import { isMUITheme } from '~/shared/utilities/const';
 import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterModelData';
 import { isRegisterModelSubmitDisabled, registerModel } from './utils';
 import { useRegistrationCommonState } from './useRegistrationCommonState';
@@ -92,7 +93,11 @@ const RegisterModel: React.FC = () => {
                 isRequired
                 fieldId="mr-name"
               >
-                <FormFieldset component={modelRegistryInput} field="Model Registry" />
+                {isMUITheme() ? (
+                  <FormFieldset component={modelRegistryInput} field="Model Registry" />
+                ) : (
+                  modelRegistryInput
+                )}
               </FormGroup>
             </StackItem>
             <StackItem>
@@ -101,14 +106,22 @@ const RegisterModel: React.FC = () => {
                 description="Provide general details that apply to all versions of this model."
               >
                 <FormGroup label="Model name" isRequired fieldId="model-name">
-                  <FormFieldset component={modelNameInput} field="Model Name" />
+                  {isMUITheme() ? (
+                    <FormFieldset component={modelNameInput} field="Model Name" />
+                  ) : (
+                    modelNameInput
+                  )}
                 </FormGroup>
                 <FormGroup
                   className="model-description"
                   label="Model description"
                   fieldId="model-description"
                 >
-                  <FormFieldset component={modelDescriptionInput} field="Model Description" />
+                  {isMUITheme() ? (
+                    <FormFieldset component={modelDescriptionInput} field="Model Description" />
+                  ) : (
+                    modelDescriptionInput
+                  )}
                 </FormGroup>
               </FormSection>
               <RegistrationCommonFormSections
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
index 73168a80..9ea05f4e 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
@@ -3,6 +3,7 @@ import { FormGroup, TextInput } from '@patternfly/react-core';
 import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
 import { RegisteredModel } from '~/app/types';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 
 type RegisteredModelSelectorProps = {
   registeredModels: RegisteredModel[];
@@ -27,6 +28,17 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
     [registeredModels, registeredModelId],
   );
 
+  const modelNameInput = (
+    <TextInput
+      isDisabled
+      isRequired
+      type="text"
+      id="model-name"
+      name="registered-model-prefilled"
+      value={options.find(({ value }) => value === registeredModelId)?.content}
+    />
+  );
+
   if (isDisabled && registeredModelId) {
     /*
       If we're registering a new version for an existing model, we prefill the model and don't allow it to change.
@@ -36,19 +48,11 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
     */
     return (
       <FormGroup label="Model name" className="form-group-disabled" isRequired fieldId="model-name">
-        <FormFieldset
-          component={
-            <TextInput
-              isDisabled
-              isRequired
-              type="text"
-              id="model-name"
-              name="registered-model-prefilled"
-              value={options.find(({ value }) => value === registeredModelId)?.content}
-            />
-          }
-          field="Model Name"
-        />
+        {isMUITheme() ? (
+          <FormFieldset component={modelNameInput} field="Model Name" />
+        ) : (
+          modelNameInput
+        )}
       </FormGroup>
     );
   }
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
index 1016f560..eb67141c 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
@@ -19,6 +19,7 @@ import { UpdateObjectAtPropAndValue } from '~/shared/types';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 import FormSection from '~/shared/components/pf-overrides/FormSection';
 import { ModelVersion } from '~/app/types';
+import { isMUITheme } from '~/shared/utilities/const';
 import { ModelLocationType, RegistrationCommonFormData } from './useRegisterModelData';
 // import { ConnectionModal } from './ConnectionModal';
 
@@ -173,7 +174,11 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
         }
       >
         <FormGroup label="Version name" isRequired fieldId="version-name">
-          <FormFieldset component={versionNameInput} field="Version Name" />
+          {isMUITheme() ? (
+            <FormFieldset component={versionNameInput} field="Version Name" />
+          ) : (
+            versionNameInput
+          )}
         </FormGroup>
         {latestVersion && (
           <FormHelperText>
@@ -187,16 +192,28 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
           label="Version description"
           fieldId="version-description"
         >
-          <FormFieldset component={versionDescriptionInput} field="Version Description" />
+          {isMUITheme() ? (
+            <FormFieldset component={versionDescriptionInput} field="Version Description" />
+          ) : (
+            versionDescriptionInput
+          )}
         </FormGroup>
         <FormGroup label="Source model format" fieldId="source-model-format">
-          <FormFieldset component={sourceModelFormatInput} field="Source Model Format" />
+          {isMUITheme() ? (
+            <FormFieldset component={sourceModelFormatInput} field="Source Model Format" />
+          ) : (
+            sourceModelFormatInput
+          )}
         </FormGroup>
         <FormGroup label="Source model format version" fieldId="source-model-format-version">
-          <FormFieldset
-            component={sourceModelFormatVersionInput}
-            field="Source Model Format Version"
-          />
+          {isMUITheme() ? (
+            <FormFieldset
+              component={sourceModelFormatVersionInput}
+              field="Source Model Format Version"
+            />
+          ) : (
+            sourceModelFormatVersionInput
+          )}
         </FormGroup>
       </FormSection>
       <FormSection
@@ -237,16 +254,20 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
               isRequired
               fieldId="location-endpoint"
             >
-              <FormFieldset component={endpointInput} field="Endpoint" />
+              {isMUITheme() ? (
+                <FormFieldset component={endpointInput} field="Endpoint" />
+              ) : (
+                endpointInput
+              )}
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Bucket" isRequired fieldId="location-bucket">
-              <FormFieldset component={bucketInput} field="Bucket" />
+              {isMUITheme() ? <FormFieldset component={bucketInput} field="Bucket" /> : bucketInput}
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Region" fieldId="location-region">
-              <FormFieldset component={regionInput} field="Region" />
+              {isMUITheme() ? <FormFieldset component={regionInput} field="Region" /> : regionInput}
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Path" isRequired fieldId="location-path">
-              <FormFieldset component={pathInput} field="Path" />
+              {isMUITheme() ? <FormFieldset component={pathInput} field="Path" /> : pathInput}
             </FormGroup>
             <FormHelperText className="path-helper-text">
               <HelperText>
@@ -273,7 +294,7 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
         {modelLocationType === ModelLocationType.URI && (
           <>
             <FormGroup className={spacing.mlLg} label="URI" isRequired fieldId="location-uri">
-              <FormFieldset component={uriInput} field="URI" />
+              {isMUITheme() ? <FormFieldset component={uriInput} field="URI" /> : uriInput}
             </FormGroup>
           </>
         )}
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
index 9e4dc2d4..4dbfcbeb 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { TextInput, ToolbarFilter, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+import {
+  SearchInput,
+  TextInput,
+  ToolbarFilter,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 import { useNavigate } from 'react-router-dom';
 import { RegisteredModel } from '~/app/types';
@@ -14,6 +20,7 @@ import {
 } from '~/app/pages/modelRegistry/screens/routeUtils';
 import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 import RegisteredModelTable from './RegisteredModelTable';
 import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar';
 
@@ -91,22 +98,35 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
         />
       </ToolbarFilter>
       <ToolbarItem variant="label-group">
-        <FormFieldset
-          className="toolbar-fieldset-wrapper"
-          component={
-            <TextInput
-              value={search}
-              type="text"
-              onChange={(_, searchValue) => {
-                setSearch(searchValue);
-              }}
-              style={{ minWidth: '200px' }}
-              data-testid="registered-model-table-search"
-              aria-label="Search"
-            />
-          }
-          field={`Find by ${searchType.toLowerCase()}`}
-        />
+        {isMUITheme() ? (
+          <FormFieldset
+            className="toolbar-fieldset-wrapper"
+            component={
+              <TextInput
+                value={search}
+                type="text"
+                onChange={(_, searchValue) => {
+                  setSearch(searchValue);
+                }}
+                style={{ minWidth: '200px' }}
+                data-testid="registered-model-table-search"
+                aria-label="Search"
+              />
+            }
+            field={`Find by ${searchType.toLowerCase()}`}
+          />
+        ) : (
+          <SearchInput
+            placeholder={`Find by ${searchType.toLowerCase()}`}
+            value={search}
+            onChange={(_, searchValue) => {
+              setSearch(searchValue);
+            }}
+            onClear={() => setSearch('')}
+            style={{ minWidth: '200px' }}
+            data-testid="registered-model-table-search"
+          />
+        )}
       </ToolbarItem>
     </ToolbarGroup>
   );
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableToolbar.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableToolbar.tsx
index 08ad711b..3209d51e 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableToolbar.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableToolbar.tsx
@@ -45,7 +45,7 @@ const RegisteredModelsTableToolbar: React.FC<RegisteredModelsTableToolbarProps>
             isOpen={isRegisterNewVersionOpen}
             onSelect={() => setIsRegisterNewVersionOpen(false)}
             onOpenChange={(isOpen) => setIsRegisterNewVersionOpen(isOpen)}
-            toggle={(toggleRef) => (
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
                 isFullWidth
                 variant="primary"
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx
index 50da0b1f..74eeb07d 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  SearchInput,
   TextInput,
   ToolbarContent,
   ToolbarFilter,
@@ -15,6 +16,7 @@ import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/component
 import SimpleSelect from '~/shared/components/SimpleSelect';
 import { asEnumMember } from '~/app/utils';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 import RegisteredModelsArchiveTable from './RegisteredModelsArchiveTable';
 
 type RegisteredModelsArchiveListViewProps = {
@@ -79,22 +81,35 @@ const RegisteredModelsArchiveListView: React.FC<RegisteredModelsArchiveListViewP
                 />
               </ToolbarFilter>
               <ToolbarItem>
-                <FormFieldset
-                  className="toolbar-fieldset-wrapper"
-                  component={
-                    <TextInput
-                      value={search}
-                      type="text"
-                      onChange={(_, searchValue) => {
-                        setSearch(searchValue);
-                      }}
-                      style={{ minWidth: '200px' }}
-                      data-testid="registered-models-archive-table-search"
-                      aria-label="Search"
-                    />
-                  }
-                  field={`Find by ${searchType.toLowerCase()}`}
-                />
+                {isMUITheme() ? (
+                  <FormFieldset
+                    className="toolbar-fieldset-wrapper"
+                    component={
+                      <TextInput
+                        value={search}
+                        type="text"
+                        onChange={(_, searchValue) => {
+                          setSearch(searchValue);
+                        }}
+                        style={{ minWidth: '200px' }}
+                        data-testid="registered-models-archive-table-search"
+                        aria-label="Search"
+                      />
+                    }
+                    field={`Find by ${searchType.toLowerCase()}`}
+                  />
+                ) : (
+                  <SearchInput
+                    placeholder={`Find by ${searchType.toLowerCase()}`}
+                    value={search}
+                    onChange={(_, searchValue) => {
+                      setSearch(searchValue);
+                    }}
+                    onClear={() => setSearch('')}
+                    style={{ minWidth: '200px' }}
+                    data-testid="registered-models-archive-table-search"
+                  />
+                )}
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarToggleGroup>
diff --git a/clients/ui/frontend/src/shared/components/DashboardSearchField.tsx b/clients/ui/frontend/src/shared/components/DashboardSearchField.tsx
index c43a2ba8..82f8f435 100644
--- a/clients/ui/frontend/src/shared/components/DashboardSearchField.tsx
+++ b/clients/ui/frontend/src/shared/components/DashboardSearchField.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core';
+import { InputGroup, InputGroupItem, SearchInput } from '@patternfly/react-core';
 import SimpleSelect from '~/shared/components/SimpleSelect';
 import { asEnumMember } from '~/app/utils';
-import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 
 // List all the possible search fields here
 export enum SearchType {
@@ -60,20 +59,14 @@ const DashboardSearchField: React.FC<DashboardSearchFieldProps> = ({
       />
     </InputGroupItem>
     <InputGroupItem>
-      <FormFieldset
-        className="toolbar-fieldset-wrapper"
-        component={
-          <TextInput
-            value={searchValue}
-            type="text"
-            onChange={(_, newSearch) => {
-              onSearchValueChange(newSearch);
-            }}
-            style={{ minWidth: '200px' }}
-            aria-label="Search"
-          />
-        }
-        field={`Find by ${searchType.toLowerCase()}`}
+      <SearchInput
+        placeholder={`Find by ${searchType.toLowerCase()}`}
+        value={searchValue}
+        onChange={(_, newSearch) => {
+          onSearchValueChange(newSearch);
+        }}
+        onClear={() => onSearchValueChange('')}
+        style={{ minWidth: '200px' }}
       />
     </InputGroupItem>
   </InputGroup>
diff --git a/clients/ui/frontend/src/shared/components/EditableTextDescriptionListGroup.tsx b/clients/ui/frontend/src/shared/components/EditableTextDescriptionListGroup.tsx
index 83251020..be1527d7 100644
--- a/clients/ui/frontend/src/shared/components/EditableTextDescriptionListGroup.tsx
+++ b/clients/ui/frontend/src/shared/components/EditableTextDescriptionListGroup.tsx
@@ -4,6 +4,7 @@ import DashboardDescriptionListGroup, {
   DashboardDescriptionListGroupProps,
 } from '~/shared/components/DashboardDescriptionListGroup';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 
 type EditableTextDescriptionListGroupProps = Pick<
   DashboardDescriptionListGroupProps,
@@ -27,6 +28,17 @@ const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGrou
   const [unsavedValue, setUnsavedValue] = React.useState(value);
   const [isSavingEdits, setIsSavingEdits] = React.useState(false);
   const [isTextExpanded, setIsTextExpanded] = React.useState(false);
+
+  const editableTextArea = (
+    <TextArea
+      data-testid={`edit-text-area-${title}`}
+      aria-label={`Text box for editing ${title}`}
+      value={unsavedValue}
+      onChange={(_event, v) => setUnsavedValue(v)}
+      isDisabled={isSavingEdits}
+      rows={24}
+    />
+  );
   return (
     <DashboardDescriptionListGroup
       title={title}
@@ -36,18 +48,7 @@ const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGrou
       isEditing={isEditing}
       isSavingEdits={isSavingEdits}
       contentWhenEditing={
-        <FormFieldset
-          component={
-            <TextArea
-              data-testid={`edit-text-area-${title}`}
-              aria-label={`Text box for editing ${title}`}
-              value={unsavedValue}
-              onChange={(_event, v) => setUnsavedValue(v)}
-              isDisabled={isSavingEdits}
-              rows={24}
-            />
-          }
-        />
+        isMUITheme() ? <FormFieldset component={editableTextArea} /> : editableTextArea
       }
       onEditClick={() => {
         setUnsavedValue(value);
diff --git a/clients/ui/frontend/src/shared/style/MUI-theme.scss b/clients/ui/frontend/src/shared/style/MUI-theme.scss
index c93368d9..9e548857 100644
--- a/clients/ui/frontend/src/shared/style/MUI-theme.scss
+++ b/clients/ui/frontend/src/shared/style/MUI-theme.scss
@@ -1,4 +1,4 @@
-:root {
+.mui-theme:root {
   // Alert
   --mui-alert--BoxShadow: none;
   --mui-alert-warning-text: #663c00;
@@ -106,14 +106,14 @@
   --pf-t--global--font--family--300: Roboto, Courier, monospace;
 }
 
-.pf-v6-c-action-list__item .pf-v6-c-button {
+.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
   --pf-v6-c-button--BorderRadius: 50%;
+  --pf-v6-c-button--PaddingInlineStart: none;
+  --pf-v6-c-button--PaddingInlineEnd: none;
 }
 
-.pf-v6-c-alert {
-  --pf-v6-c-alert--m-warning__title--Color: var(
-    --pf-t--global--text--color--status--warning--default
-  );
+.mui-theme .pf-v6-c-alert {
+  --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default);
   --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
   --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-font-weight);
   --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
@@ -125,15 +125,15 @@
   --pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd);
 }
 
-.pf-v6-c-alert__title {
+.mui-theme .pf-v6-c-alert__title {
   padding-block: var(--mui-spacing);
 }
 
-.pf-v6-c-alert__icon {
+.mui-theme .pf-v6-c-alert__icon {
   --pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
 }
 
-.pf-v6-c-button {
+.mui-theme .pf-v6-c-button {
   --pf-v6-c-button--FontWeight: var(--mui-button-font-weight);
   --pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
   --pf-v6-c-button--PaddingBlockEnd: var(--mui-button--PaddingBlockEnd);
@@ -146,7 +146,7 @@
   letter-spacing: 0.02857em;
 }
 
-.pf-v6-c-button.pf-m-link.pf-m-inline {
+.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
   text-decoration-color: var(--mui-link-underlineColor);
 
@@ -155,45 +155,45 @@
   }
 }
 
-.pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
+.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
   // Keep icon color the same on hover
   color: inherit;
 }
 
-.pf-v6-c-button.pf-m-secondary:hover {
+.mui-theme .pf-v6-c-button.pf-m-secondary:hover {
   --pf-v6-c-button--BorderWidth: var(--mui-button--hover--BorderWidth);
   --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
 }
 
-.pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
+.mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
   align-content: center;
 }
 
-.pf-v6-c-form__group {
+.mui-theme .pf-v6-c-form__group {
   position: relative;
 }
 
-.pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
-.pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
+.mui-theme .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
+.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
   padding-block-start: 10px;
 }
 
-.pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
+.mui-theme .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
   color: var(--mui-palette-text-disabled);
 }
 
-.pf-v6-c-form__helper-text.path-helper-text {
+.mui-theme .pf-v6-c-form__helper-text.path-helper-text {
   margin-inline-start: var(--pf-t--global--spacer--lg);
 }
 
-.pf-v6-c-form__section-title {
+.mui-theme .pf-v6-c-form__section-title {
   --pf-v6-c-form__section-title--MarginBlockStart: 0px;
   --pf-v6-c-form__section-title--MarginInlineStart: 0px;
   --pf-v6-c-form__section-title--MarginBlockEnd: 0.35em;
   --pf-v6-c-form__section-title--MarginInlineEnd: 0px;
 }
 
-.pf-v6-c-form__label {
+.mui-theme .pf-v6-c-form__label {
   position: absolute;
   top: 35%;
   left: 12px;
@@ -209,16 +209,16 @@
   --pf-v6-c-form__label-required--Color: currentColor;
 }
 
-.pf-v6-c-form-control input::placeholder {
+.mui-theme .pf-v6-c-form-control input::placeholder {
   --pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
 }
 
-.pf-v6-c-form-control {
+.mui-theme .pf-v6-c-form-control {
   --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
   --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
 }
 
-.pf-v6-c-form-control {
+.mui-theme .pf-v6-c-form-control {
   // Resize is disabled in MUI.
   resize: none;
   --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
@@ -226,21 +226,21 @@
 }
 
 
-.pf-v6-c-form__section {
+.mui-theme .pf-v6-c-form__section {
   --pf-v6-c-form__section--Gap: 0px;
 }
 
-.toolbar-fieldset-wrapper .pf-v6-c-form-control input {
+.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
   padding: 8px 14px;
 }
 
-.tr-fieldset-wrapper .form-fieldset {
+.mui-theme .tr-fieldset-wrapper .form-fieldset {
   inset: 0px;
 }
 
-.pf-v6-c-form-control {
+.mui-theme .pf-v6-c-form-control {
   // Using CSS property here since PF vars for input padding do not exist.
-   // PF can add custom vars for padding on text input, text area, and form select
+  // PF can add custom vars for padding on text input, text area, and form select
 
   --pf-v6-c-form-control--PaddingBlockStart: 16.5px;
   --pf-v6-c-form-control--PaddingBlockEnd: 16.5px;
@@ -248,28 +248,28 @@
   --pf-v6-c-form-control--PaddingInlineEnd: 14px;
 }
 
-.pf-v6-c-text-input-group {
+.mui-theme .pf-v6-c-text-input-group {
   --pf-v6-c-text-input-group__text-input--PaddingBlockStart: 16.5px;
   --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
   --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: 14px;
   --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
 }
 
-.pf-v6-c-text-input-group {
+.mui-theme .pf-v6-c-text-input-group {
   --pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
 }
 
-.pf-v6-c-form__group-control textarea {
+.mui-theme .pf-v6-c-form__group-control textarea {
   position: relative;
   box-sizing: border-box;
 }
 
-.pf-v6-c-form-control > :is(input, select, textarea):focus {
+.mui-theme .pf-v6-c-form-control> :is(input, select, textarea):focus {
   --pf-v6-c-form-control--OutlineOffset: none;
   outline: none;
 }
 
-.pf-v6-c-text-input-group__text-input:focus {
+.mui-theme .pf-v6-c-text-input-group__text-input:focus {
   --pf-v6-c-form-control--OutlineOffset: none;
   outline: none;
 }
@@ -297,7 +297,7 @@
   border-color: black;
 }
 
-.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
+.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled~.form-fieldset {
   border-color: rgba(0, 0, 0, 0.23);
 }
 
@@ -390,8 +390,8 @@
   --pf-v6-c-form-control--after--BorderColor: transparent !important;
 }
 
-.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
-.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
+.pf-v6-c-form__group .pf-v6-c-form-control:focus-within+.pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown)+.pf-v6-c-form__label {
   color: var(--mui-palette-primary-main);
 }
 
@@ -407,7 +407,7 @@
   color: var(--mui-palette-primary-main);
 }
 
-.pf-v6-c-menu {
+.mui-theme .pf-v6-c-menu {
   --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
   --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);
   --pf-v6-c-menu--PaddingBlockStart: var(--mui-spacing);
@@ -421,12 +421,10 @@
   --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
 }
 
-.pf-v6-c-menu-toggle {
+.mui-theme .pf-v6-c-menu-toggle {
   --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
   --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
-  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
-    --mui-menu-toggle--expanded--BackgroundColor
-  );
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor);
   --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
@@ -434,83 +432,80 @@
   --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
   --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
-  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
-    --pf-t--global--background--color--action--plain--hover
-  );
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
-    --pf-t--global--color--brand--default
-  );
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
-    --mui-palette-primary-dark
-  );
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--mui-palette-primary-dark);
 
   text-transform: var(--mui-text-transform);
   font-weight: var(--mui-button-font-weight);
   letter-spacing: 0.02857em;
 }
 
-.pf-v6-c-menu-toggle__button {
+.mui-theme .pf-v6-c-menu-toggle__button {
   text-transform: var(--mui-text-transform);
   font-weight: var(--mui-button-font-weight);
   letter-spacing: 0.02857em;
   align-self: stretch;
 }
 
-.pf-v6-c-menu-toggle.pf-m-plain {
+.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
   --pf-v6-c-menu-toggle--BorderRadius: 50%;
 }
 
-.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary {
+  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-white);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-primary-dark);
+}
+
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
 }
 
-.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
-  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
-    --mui-palette-primary-dark
-  );
+.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark);
 }
 
-.pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
+.mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
   --pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-spacing-4);
   --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-spacing-4);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
 }
 
-.pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
+.mui-theme .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
   vertical-align: revert;
 }
 
-.pf-v6-c-menu-toggle__toggle-icon {
+.mui-theme .pf-v6-c-menu-toggle__toggle-icon {
   font-size: 20px;
 }
 
-.pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
+.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
   margin-right: calc(var(--mui-spacing) * -1 + 4px);
   margin-left: var(--mui-spacing);
 }
 
-.pf-v6-c-menu-toggle__icon {
+.mui-theme .pf-v6-c-menu-toggle__icon {
   display: block;
 }
 
-.pf-v6-radio {
+.mui-theme .pf-v6-radio {
   --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
 }
 
-.pf-v6-c-radio {
+.mui-theme .pf-v6-c-radio {
   display: flex;
   align-items: center;
   margin: var(--mui-radio--margin);
 }
 
-.pf-v6-c-radio__input {
+.mui-theme .pf-v6-c-radio__input {
   /* Hide default radio button */
   display: none;
 }
 
-.pf-v6-c-radio__label {
+.mui-theme .pf-v6-c-radio__label {
   --pf-v6-c-radio__label--FontSize: 16px;
   padding-left: var(--mui-radio-PaddingLeft);
   position: relative;
@@ -519,7 +514,7 @@
 }
 
 /* Custom radio circle */
-.pf-v6-c-radio__label::before {
+.mui-theme .pf-v6-c-radio__label::before {
   content: '';
   position: absolute;
   left: 0;
@@ -533,13 +528,13 @@
 }
 
 /* When radio is checked */
-.pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::before {
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::before {
   background: var(--mui-palette-common-white);
   border-color: var(--mui-palette-primary-main);
 }
 
 /* Inner dot for checked state */
-.pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after {
+.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::after {
   content: '';
   position: absolute;
   left: 5px;
@@ -553,7 +548,7 @@
   background: var(--mui-palette-primary-main);
 }
 
-.pf-v6-c-table {
+.mui-theme .pf-v6-c-table {
   --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
   --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);
   --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
@@ -569,24 +564,20 @@
   --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
   --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
-  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
-    --mui-table--cell--first-last-child--PaddingInline
-  );
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
   --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
   --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
   --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
-  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
-    --mui-table__sort-indicator--MarginInlineStart
-  );
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
 
   letter-spacing: 0.01071em;
 }
 
-.pf-v6-c-table .pf-m-align-right {
+.mui-theme .pf-v6-c-table .pf-m-align-right {
   text-align: right;
 }
 
-.pf-v6-c-table__sort-indicator {
+.mui-theme .pf-v6-c-table__sort-indicator {
   font-size: 18px;
   opacity: 0;
   transition:
@@ -597,7 +588,7 @@
 }
 
 /* CSS workaround to use MUI icon for sort icon */
-.pf-v6-c-table__sort-indicator::before {
+.mui-theme .pf-v6-c-table__sort-indicator::before {
   display: block;
   width: 1em;
   height: 1em;
@@ -605,32 +596,32 @@
 }
 
 /* Hide PF's default icon for the CSS workaround to use MUI's icon */
-.pf-v6-c-table__sort-indicator svg {
+.mui-theme .pf-v6-c-table__sort-indicator svg {
   display: none;
 }
 
-.pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator,
-.pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator {
+.mui-theme .pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator,
+.mui-theme .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator {
   opacity: 0.6;
 }
 
-.pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
+.mui-theme .pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
   transform: rotate(180deg);
   align-self: end;
 }
 
-.pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
+.mui-theme .pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
   align-self: start;
 }
 
-.pf-v6-c-tab-content {
+.mui-theme .pf-v6-c-tab-content {
   --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 }
 
-.pf-v6-c-tabs {
+.mui-theme .pf-v6-c-tabs {
   --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
   --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
   --pf-v6-c-tabs__item--PaddingBlockEnd: var(--mui-tabs__item--PaddingBlockEnd);
@@ -641,31 +632,29 @@
   --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
   --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
   --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
-  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
-    --mui-tabs__item--m-current__link--after--BorderWidth
-  );
+  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth);
   --pf-v6-c-tabs__link--FontSize: 0.875rem;
 }
 
-.pf-v6-c-tabs__link {
+.mui-theme .pf-v6-c-tabs__link {
   text-transform: var(--mui-text-transform);
   font-weight: var(--mui-button-font-weight);
   line-height: var(--mui-button-line-height);
   letter-spacing: 0.02857em;
 }
 
-.pf-v6-c-tab-content {
+.mui-theme .pf-v6-c-tab-content {
   --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 }
 
-.pf-v6-c-table__td.pf-v6-c-table__action.pf-m-width-10 {
+.mui-theme .pf-v6-c-table__td.pf-v6-c-table__action.pf-m-width-10 {
   align-content: center;
 }
 
-.pf-v6-c-label {
+.mui-theme .pf-v6-c-label {
   --pf-v6-c-label--BorderRadius: 16px;
   --pf-v6-c-label--FontSize: 0.8125rem;
   --pf-v6-c-label--PaddingInlineEnd: var(--mui-spacing-8px);
@@ -675,7 +664,7 @@
   height: 24px;
 }
 
-.pf-v6-c-label.pf-m-overflow {
+.mui-theme .pf-v6-c-label.pf-m-overflow {
   border: 1px solid var(--mui-palette-grey-400);
 
   .pf-v6-c-label__text {
@@ -683,55 +672,62 @@
   }
 }
 
-.pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
-  margin: 0px 5px 0px -6px;
+.mui-theme .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
   --pf-v6-c-button__icon--Color: var(--mui-palette-common-white);
+  --pf-v6-c-button--PaddingInlineStart: var(--mui-spacing-4px);
+  --pf-v6-c-button--PaddingInlineEnd: var(--mui-spacing-4px);
 }
 
-.pf-v6-c-label {
+.mui-theme .pf-v6-c-label {
   --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--inverse);
 }
 
-.pf-v6-c-label-group.pf-m-category {
+.mui-theme .pf-v6-c-label-group.pf-m-category {
   --pf-v6-c-label-group--m-category--BorderWidth: 0px;
   --pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius);
   box-shadow: var(--mui-shadows-1);
 }
 
-.pf-v6-c-label.pf-m-outline {
+.mui-theme .pf-v6-c-label.pf-m-outline {
   --pf-v6-c-label--BorderColor: none;
   --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
   padding: 4px;
 }
 
-.pf-v6-c-modal-box {
+.mui-theme .pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BorderRadius: 0;
   border: 2px solid var(--mui-palette-common-black);
 }
 
-.pf-v6-c-page__main-container {
+.mui-theme .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button--BorderRadius: 50%;
+  --pf-v6-c-button--PaddingInlineStart: none;
+  --pf-v6-c-button--PaddingInlineEnd: none;
+}
+
+.mui-theme .pf-v6-c-page__main-container {
   --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
   box-shadow: var(--mui-shadows-1);
 }
 
-.pf-v6-c-pagination {
+.mui-theme .pf-v6-c-pagination {
   --pf-v6-c-pagination__total-items--Display: block;
 }
 
-.pf-v6-c-pagination__total-items b {
+.mui-theme .pf-v6-c-pagination__total-items b {
   font-weight: normal;
 }
 
-.pf-v6-c-pagination__page-menu {
+.mui-theme .pf-v6-c-pagination__page-menu {
   order: -1;
 }
 
-.pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
+.mui-theme .pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
   --pf-v6-c-menu-toggle--expanded--BackgroundColor: none;
   --pf-v6-c-menu-toggle--hover--BackgroundColor: none;
   text-transform: none;
 }
 
-.pf-v6-c-pagination__page-menu::before {
+.mui-theme .pf-v6-c-pagination__page-menu::before {
   content: 'Rows per page:';
-}
+}
\ No newline at end of file
diff --git a/clients/ui/frontend/src/shared/utilities/const.ts b/clients/ui/frontend/src/shared/utilities/const.ts
index dfd3abed..359a6677 100644
--- a/clients/ui/frontend/src/shared/utilities/const.ts
+++ b/clients/ui/frontend/src/shared/utilities/const.ts
@@ -1,6 +1,16 @@
 // TODO: [Env Handling] Fetch the .env variable here.
 const POLL_INTERVAL = 30000;
 
+export enum Theme {
+  Default = 'default-theme',
+  MUI = 'mui-theme',
+  // Future themes can be added here
+}
+
+export const isMUITheme = (): boolean => STYLE_THEME === Theme.MUI;
+
+export const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI;
+
 export const USER_ACCESS_TOKEN = 'x-forwarded-access-token';
 
 export { POLL_INTERVAL };