diff --git a/ui/src/app/metadata/component/MetadataDetail.js b/ui/src/app/metadata/component/MetadataDetail.js
index cb475e60c..7b8e14e9f 100644
--- a/ui/src/app/metadata/component/MetadataDetail.js
+++ b/ui/src/app/metadata/component/MetadataDetail.js
@@ -18,7 +18,7 @@ export function MetadataDetail ({ children }) {
                                 <Link to="/dashboard"><Translate value="action.dashboard">Dashboard</Translate></Link>
                             </li>
                             <li className="breadcrumb-item active" aria-current="page">
-                                <span className="lead">
+                                <span className="">
                                     { metadata.serviceProviderName || metadata.name }
                                 </span>
                             </li>
diff --git a/ui/src/app/metadata/component/MetadataHeader.js b/ui/src/app/metadata/component/MetadataHeader.js
index fd657cb7e..566ff0c32 100644
--- a/ui/src/app/metadata/component/MetadataHeader.js
+++ b/ui/src/app/metadata/component/MetadataHeader.js
@@ -8,6 +8,7 @@ import { useMetadataEntity } from '../hooks/api';
 import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications';
 import { useTranslator } from '../../i18n/hooks';
 import { useMetadataLoader } from '../hoc/MetadataSelector';
+import Form from 'react-bootstrap/Form';
 
 export function MetadataHeader ({ showGroup, model, current = true, enabled = true, children, ...props }) {
 
@@ -57,9 +58,11 @@ export function MetadataHeader ({ showGroup, model, current = true, enabled = tr
                         {isAdmin && showGroup &&
                         <GroupsProvider>
                             {(groups, removeGroup, loadingGroups) =>
-                                <div className="form-inline">
-                                    <label className="me-2" htmlFor={`group-${model.serviceProviderName}`}><Translate value="action.source-group">Group</Translate>: </label>
-                                    <select
+                                <div className="form-inline" style={{maxWidth: '50%'}}>
+                                    <label className="me-2 mb-2" htmlFor={`group-${model.serviceProviderName}`}>
+                                        <Translate value="action.source-group">Group</Translate>:
+                                    </label>
+                                    <Form.Select
                                         id={`group-${model.id}`}
                                         name={`group-${model.id}`}
                                         className="form-control form-control-sm"
@@ -71,8 +74,7 @@ export function MetadataHeader ({ showGroup, model, current = true, enabled = tr
                                         {groups.map((g, ridx) => (
                                             <option key={ridx} value={g.resourceId}>{g.name}</option>
                                         ))}
-                                    </select>
-
+                                    </Form.Select>
                                 </div>
                             }
                         </GroupsProvider>
diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
index cb0cfdade..e6d9b7729 100644
--- a/ui/src/app/metadata/editor/MetadataEditor.js
+++ b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -28,6 +28,8 @@ export function MetadataEditor ({ restore, current, reload }) {
 
     const { type, id, section } = useParams();
 
+    console.log(type, id);
+
     const { update, loading } = useMetadataUpdater(`${ API_BASE_PATH }${getMetadataPath(type)}`, current, reload);
 
     const notificationDispatch = useNotificationDispatcher();