diff --git a/ui/src/app/dashboard/view/Dashboard.js b/ui/src/app/dashboard/view/Dashboard.js
index ab125e7e5..a91987ed9 100644
--- a/ui/src/app/dashboard/view/Dashboard.js
+++ b/ui/src/app/dashboard/view/Dashboard.js
@@ -17,6 +17,7 @@ import API_BASE_PATH from '../../App.constant';
 import { useNonAdminSources } from '../../metadata/hooks/api';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import Badge from 'react-bootstrap/esm/Badge';
 
 export function Dashboard () {
 
@@ -89,7 +90,7 @@ export function Dashboard () {
                     <Nav.Item>
                         <NavLink className="nav-link d-flex align-items-center" to={`${path}/admin/actions`}>
                             <Translate value="label.action-required">Action Required</Translate>
-                            <span className="badge badge-pill badge-danger ms-1">{actions}</span>
+                            <Badge pill bg="danger" className="ms-1">{actions}</Badge>
                         </NavLink>
                     </Nav.Item>
                 </>
diff --git a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
index 2856899d2..e92fc667a 100644
--- a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
+++ b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import Button from 'react-bootstrap/Button';
 import ListGroup from 'react-bootstrap/ListGroup';
+import Badge from "react-bootstrap/esm/Badge";
 
 const selectValue = (value, selected, all) => {
     const at = all.indexOf(value);
@@ -117,10 +118,10 @@ const AttributeReleaseWidget = ({
                         >
                         <strong><Translate value="label.bundle-disp" params={{name: option.label}}></Translate></strong>
                         <p id={`bundle-descr-${i}`} className="sr-only">Bundled attributes: {option.value.join(', ')}</p>
-                        <span className={`${option.selected ? 'badge-primary' : 'badge-light'} badge border p-2`}>
+                        <Badge bg={ option.selected ? 'primary' : 'light' } className={`border p-2`}>
                             <Translate value="action.select-bundle">Select Bundle</Translate>
                             <FontAwesomeIcon icon={faCheck} className="ms-1" />
-                        </span>
+                        </Badge>
                     </ListGroup.Item>
                 ))}
             </ListGroup>
diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
index e6eceb4c4..903c6d8b4 100644
--- a/ui/src/app/form/component/widgets/TextWidget.js
+++ b/ui/src/app/form/component/widgets/TextWidget.js
@@ -51,6 +51,7 @@ const TextWidget = ({
             </Form.Label>
             <Form.Control
                 id={id}
+                name=""
                 placeholder={placeholder}
                 autoFocus={autofocus}
                 required={required}
diff --git a/ui/src/app/metadata/component/MetadataHeader.js b/ui/src/app/metadata/component/MetadataHeader.js
index 566ff0c32..47647301f 100644
--- a/ui/src/app/metadata/component/MetadataHeader.js
+++ b/ui/src/app/metadata/component/MetadataHeader.js
@@ -9,6 +9,7 @@ import { createNotificationAction, NotificationTypes, useNotificationDispatcher
 import { useTranslator } from '../../i18n/hooks';
 import { useMetadataLoader } from '../hoc/MetadataSelector';
 import Form from 'react-bootstrap/Form';
+import Badge from 'react-bootstrap/esm/Badge';
 
 export function MetadataHeader ({ showGroup, model, current = true, enabled = true, children, ...props }) {
 
@@ -84,13 +85,13 @@ export function MetadataHeader ({ showGroup, model, current = true, enabled = tr
                 </div>
 
                 <p className="card-text">
-                    <span className={`badge badge-${enabled ? 'primary' : 'danger' }`}>
+                    <Badge bg={ enabled ? 'primary' : 'danger' }>
                         <Translate value={`value.${enabled ? 'enabled' : 'disabled'}`}>Enabled</Translate>
-                    </span>
+                    </Badge>
                     &nbsp;
-                    <span className={`badge badge-${current ? 'primary' : 'warning'}`}>
+                    <Badge bg={ enabled ? 'primary' : 'warning' }>
                         <Translate value={`value.${current ? 'current' : 'not-current'}`}>Current</Translate>
-                    </span>
+                    </Badge>
                 </p>
 
             </div>
diff --git a/ui/src/app/metadata/view/MetadataUpload.js b/ui/src/app/metadata/view/MetadataUpload.js
index 28b953ff4..ab4ea74ee 100644
--- a/ui/src/app/metadata/view/MetadataUpload.js
+++ b/ui/src/app/metadata/view/MetadataUpload.js
@@ -108,7 +108,7 @@ export function MetadataUpload() {
                         </li>
                     </ul>
                     <fieldset className="bg-light border rounded p-4">
-                        <div className="form-group">
+                        <div className="form-group mb-3">
                             <label htmlFor="serviceProviderName">
                                 <Translate value="label.service-resolver-name-dashboard-display-only">Service Resolver Name (Dashboard Display Only)</Translate>
                                 <FontAwesomeIcon icon={faAsterisk} className="text-danger" />
@@ -122,8 +122,9 @@ export function MetadataUpload() {
                                 </Translate>
                             </small>}
                         </div>
-                        <div className="form-group">
-                            <Form.File
+                        <div className="form-group mb-3">
+                            <Form.Control
+                                type="file"
                                 id="custom-file"
                                 disabled={watchUrl}
                                 accept={'.xml'}
@@ -141,7 +142,7 @@ export function MetadataUpload() {
                             <Translate value="label.or">OR</Translate>
                             &mdash;
                         </div>
-                        <div className="form-group">
+                        <div className="form-group mb-3">
                             <label htmlFor="url"><Translate value="label.service-resolver-metadata-url">Service Resolver Metadata URL</Translate></label>
                             <input id="url" disabled={ watchFile && watchFile.length > 0 } type="text" className="form-control"{...register('url')} />
                         </div>
diff --git a/ui/src/app/metadata/view/MetadataWizard.js b/ui/src/app/metadata/view/MetadataWizard.js
index d0d54e07e..a95ca777c 100644
--- a/ui/src/app/metadata/view/MetadataWizard.js
+++ b/ui/src/app/metadata/view/MetadataWizard.js
@@ -20,11 +20,17 @@ export function MetadataWizard ({type, data, onCallback}) {
 
     const [blocking, setBlocking] = React.useState(false);
 
+    const gotoDetail = () => {
+        setTimeout(() => {
+            history.push(`/dashboard/metadata/manager/${type === 'source' ? 'resolvers' : 'providers'}`);
+        }, 1);
+    };
+
     async function save(metadata) {
         await post('', metadata);
         if (response.ok) {
             setBlocking(false);
-            history.push(`/dashboard/metadata/manager/${type === 'source' ? 'resolvers' : 'providers'}`);
+            gotoDetail();
         } else {
             let msg;
             if (response.status) {
diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
index bbd4523b8..78c38f7fb 100644
--- a/ui/src/setupProxy.js
+++ b/ui/src/setupProxy.js
@@ -3,7 +3,7 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function (app) {
 
-    const port = 8080;
+    const port = 10101;
 
     app.use(
         '/api',
diff --git a/ui/src/theme/variables.scss b/ui/src/theme/variables.scss
index 2e1741558..90025b956 100644
--- a/ui/src/theme/variables.scss
+++ b/ui/src/theme/variables.scss
@@ -86,4 +86,6 @@ $theme-color-interval: 8%;
 $font-size-xs:   .75rem !default;
 $fa-font-path: "~font-awesome/fonts";
 
-$body-bg: $gray-100;
\ No newline at end of file
+$body-bg: $gray-100;
+
+$link-decoration: none;