diff --git a/extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx b/extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
index f8d521008..69c303469 100644
--- a/extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
+++ b/extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
@@ -24,7 +24,7 @@ function callInputDialog(uiDialogService, label, callback) {
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter Segment Label',
+        title: 'Segment',
         value: { label },
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
@@ -35,24 +35,23 @@ function callInputDialog(uiDialogService, label, callback) {
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
-              <Input
-                autoFocus
-                className="mt-2 bg-black border-primary-main"
-                type="text"
-                containerClassName="mr-2"
-                value={value.label}
-                onChange={event => {
-                  event.persist();
-                  setValue(value => ({ ...value, label: event.target.value }));
-                }}
-                onKeyPress={event => {
-                  if (event.key === 'Enter') {
-                    onSubmitHandler({ value, action: { id: 'save' } });
-                  }
-                }}
-              />
-            </div>
+            <Input
+              label="Enter the segment label"
+              labelClassName="text-white text-[14px] leading-[1.2]"
+              autoFocus
+              className="bg-black border-primary-main"
+              type="text"
+              value={value.label}
+              onChange={event => {
+                event.persist();
+                setValue(value => ({ ...value, label: event.target.value }));
+              }}
+              onKeyPress={event => {
+                if (event.key === 'Enter') {
+                  onSubmitHandler({ value, action: { id: 'save' } });
+                }
+              }}
+            />
           );
         },
       },
diff --git a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
index bcbdcec58..d07eee68f 100644
--- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
+++ b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
@@ -97,7 +97,7 @@ const DicomUploadProgressItem = memo(
               )}
               <div className="flex cursor-pointer ml-auto">
                 <Icon
-                  className="w-6 h-6 self-center text-primary-active"
+                  className="self-center text-primary-active"
                   name="close"
                   onClick={cancelUpload}
                 />
diff --git a/extensions/cornerstone/src/utils/callInputDialog.tsx b/extensions/cornerstone/src/utils/callInputDialog.tsx
index bd59a7bef..b141ece63 100644
--- a/extensions/cornerstone/src/utils/callInputDialog.tsx
+++ b/extensions/cornerstone/src/utils/callInputDialog.tsx
@@ -27,8 +27,8 @@ function callInputDialog(
       : data.label
     : '';
   const {
-    dialogTitle = 'Enter your annotation',
-    inputLabel = '',
+    dialogTitle = 'Annotation',
+    inputLabel = 'Enter your annotation',
     validateFunc = value => true,
   } = dialogConfig;
 
@@ -66,27 +66,24 @@ function callInputDialog(
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
-              <Input
-                autoFocus
-                className="mt-2 bg-black border-primary-main"
-                type="text"
-                id="annotation"
-                containerClassName="mr-2"
-                label={inputLabel}
-                labelClassName="text-primary-light"
-                value={value.label}
-                onChange={event => {
-                  event.persist();
-                  setValue(value => ({ ...value, label: event.target.value }));
-                }}
-                onKeyPress={event => {
-                  if (event.key === 'Enter') {
-                    onSubmitHandler({ value, action: { id: 'save' } });
-                  }
-                }}
-              />
-            </div>
+            <Input
+              autoFocus
+              className="bg-black border-primary-main"
+              type="text"
+              id="annotation"
+              label={inputLabel}
+              labelClassName="text-white text-[14px] leading-[1.2]"
+              value={value.label}
+              onChange={event => {
+                event.persist();
+                setValue(value => ({ ...value, label: event.target.value }));
+              }}
+              onKeyPress={event => {
+                if (event.key === 'Enter') {
+                  onSubmitHandler({ value, action: { id: 'save' } });
+                }
+              }}
+            />
           );
         },
       },
diff --git a/extensions/default/src/Panels/PanelMeasurementTable.tsx b/extensions/default/src/Panels/PanelMeasurementTable.tsx
index e00b2d679..200218146 100644
--- a/extensions/default/src/Panels/PanelMeasurementTable.tsx
+++ b/extensions/default/src/Panels/PanelMeasurementTable.tsx
@@ -160,7 +160,7 @@ export default function PanelMeasurementTable({
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: 'Annotation',
         noCloseButton: true,
         value: { label: measurement.label || '' },
         body: ({ value, setValue }) => {
@@ -175,18 +175,17 @@ export default function PanelMeasurementTable({
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
-              <Input
-                autoFocus
-                id="annotation"
-                className="mt-2 bg-black border-primary-main"
-                type="text"
-                containerClassName="mr-2"
-                value={value.label}
-                onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
-              />
-            </div>
+            <Input
+              label="Enter your annotation"
+              labelClassName="text-white text-[14px] leading-[1.2]"
+              autoFocus
+              id="annotation"
+              className="bg-black border-primary-main"
+              type="text"
+              value={value.label}
+              onChange={onChangeHandler}
+              onKeyPress={onKeyPressHandler}
+            />
           );
         },
         actions: [
diff --git a/extensions/default/src/Panels/createReportDialogPrompt.tsx b/extensions/default/src/Panels/createReportDialogPrompt.tsx
index 531d24ed7..51289287c 100644
--- a/extensions/default/src/Panels/createReportDialogPrompt.tsx
+++ b/extensions/default/src/Panels/createReportDialogPrompt.tsx
@@ -11,7 +11,7 @@ export default function createReportDialogPrompt(
   uiDialogService,
   { extensionManager }
 ) {
-  return new Promise(function (resolve, reject) {
+  return new Promise(function(resolve, reject) {
     let dialogId = undefined;
 
     const _handleClose = () => {
@@ -73,7 +73,7 @@ export default function createReportDialogPrompt(
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
-        title: 'Provide a name for your report',
+        title: 'Create Report',
         value: {
           label: '',
           dataSourceName: extensionManager.activeDataSource,
@@ -102,38 +102,34 @@ export default function createReportDialogPrompt(
           };
           return (
             <>
-              <div className="p-4 bg-primary-dark">
-                {dataSourcesOpts.length > 1 && (
-                  <Select
-                    closeMenuOnSelect={true}
-                    className="mr-2 bg-black border-primary-main"
-                    options={dataSourcesOpts}
-                    placeholder={
-                      dataSourcesOpts.find(
-                        option => option.value === value.dataSourceName
-                      ).placeHolder
-                    }
-                    value={value.dataSourceName}
-                    onChange={evt => {
-                      setValue(v => ({ ...v, dataSourceName: evt.value }));
-                    }}
-                    isClearable={false}
-                  />
-                )}
-              </div>
-              <div className="p-4 bg-primary-dark">
-                <Input
-                  autoFocus
-                  className="mt-2 bg-black border-primary-main"
-                  type="text"
-                  placeholder="Enter Report Name"
-                  containerClassName="mr-2"
-                  value={value.label}
-                  onChange={onChangeHandler}
-                  onKeyPress={onKeyPressHandler}
-                  required
+              {dataSourcesOpts.length > 1 && (
+                <Select
+                  closeMenuOnSelect={true}
+                  className="mr-2 bg-black border-primary-main"
+                  options={dataSourcesOpts}
+                  placeholder={
+                    dataSourcesOpts.find(
+                      option => option.value === value.dataSourceName
+                    ).placeHolder
+                  }
+                  value={value.dataSourceName}
+                  onChange={evt => {
+                    setValue(v => ({ ...v, dataSourceName: evt.value }));
+                  }}
+                  isClearable={false}
                 />
-              </div>
+              )}
+              <Input
+                autoFocus
+                label="Enter the report name"
+                labelClassName="text-white text-[14px] leading-[1.2]"
+                className="bg-black border-primary-main"
+                type="text"
+                value={value.label}
+                onChange={onChangeHandler}
+                onKeyPress={onKeyPressHandler}
+                required
+              />
             </>
           );
         },
diff --git a/extensions/dicom-microscopy/src/getCommandsModule.ts b/extensions/dicom-microscopy/src/getCommandsModule.ts
index db8210623..7126ad6e5 100644
--- a/extensions/dicom-microscopy/src/getCommandsModule.ts
+++ b/extensions/dicom-microscopy/src/getCommandsModule.ts
@@ -31,7 +31,6 @@ export default function getCommandsModule({
 
       callInputDialog({
         uiDialogService,
-        title: 'Enter your annotation',
         defaultValue: '',
         callback: (value: string, action: string) => {
           switch (action) {
diff --git a/extensions/dicom-microscopy/src/utils/callInputDialog.tsx b/extensions/dicom-microscopy/src/utils/callInputDialog.tsx
index bffc2a627..2b6554944 100644
--- a/extensions/dicom-microscopy/src/utils/callInputDialog.tsx
+++ b/extensions/dicom-microscopy/src/utils/callInputDialog.tsx
@@ -12,7 +12,7 @@ import { Input, Dialog } from '@ohif/ui';
  */
 export default function callInputDialog({
   uiDialogService,
-  title = 'Enter your annotation',
+  title = 'Annotation',
   defaultValue = '',
   callback = (value: string, action: string) => {}
 }) {
@@ -49,27 +49,26 @@ export default function callInputDialog({
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
-              <Input
-                autoFocus
-                className="mt-2 bg-black border-primary-main"
-                type="text"
-                containerClassName="mr-2"
-                value={value.defaultValue}
-                onChange={event => {
-                  event.persist();
-                  setValue(value => ({ ...value, value: event.target.value }));
-                }}
-                onKeyPress={event => {
-                  if (event.key === 'Enter') {
-                    onSubmitHandler({ value, action: { id: 'save' } });
-                  }
-                }}
-              />
-            </div>
+            <Input
+              label="Enter your annotation"
+              labelClassName="text-white text-[14px] leading-[1.2]"
+              autoFocus
+              className="bg-black border-primary-main"
+              type="text"
+              value={value.defaultValue}
+              onChange={event => {
+                event.persist();
+                setValue(value => ({ ...value, value: event.target.value }));
+              }}
+              onKeyPress={event => {
+                if (event.key === 'Enter') {
+                  onSubmitHandler({ value, action: { id: 'save' } });
+                }
+              }}
+            />
           );
         },
       },
     });
   }
-}
\ No newline at end of file
+}
diff --git a/extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx b/extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx
index 397ad1810..f206e6c14 100644
--- a/extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx
+++ b/extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx
@@ -38,7 +38,7 @@ export default function createReportDialogPrompt(uiDialogService) {
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
-        title: 'Provide a name for your report',
+        title: 'Create Report',
         value: { label: '' },
         noCloseButton: true,
         onClose: _handleClose,
@@ -60,12 +60,13 @@ export default function createReportDialogPrompt(uiDialogService) {
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
+            <div className="">
               <Input
+                label="Enter the report name"
+                labelClassName="text-white grow leading-[1.2] text-[14px]"
                 autoFocus
-                className="mt-2 bg-black border-primary-main"
+                className="bg-black border-primary-main grow"
                 type="text"
-                containerClassName="mr-2"
                 value={value.label}
                 onChange={onChangeHandler}
                 onKeyPress={onKeyPressHandler}
diff --git a/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx b/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
index 4006e016d..75ccba025 100644
--- a/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
+++ b/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
@@ -188,7 +188,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: 'Annotation',
         noCloseButton: true,
         value: { label: measurement.label || '' },
         body: ({ value, setValue }) => {
@@ -203,18 +203,17 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
-              <Input
-                autoFocus
-                id="annotation"
-                className="mt-2 bg-black border-primary-main"
-                type="text"
-                containerClassName="mr-2"
-                value={value.label}
-                onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
-              />
-            </div>
+            <Input
+              label="Enter your annotation"
+              labelClassName="text-white grow text-[14px] leading-[1.2]"
+              autoFocus
+              id="annotation"
+              className="bg-black border-primary-main"
+              type="text"
+              value={value.label}
+              onChange={onChangeHandler}
+              onKeyPress={onKeyPressHandler}
+            />
           );
         },
         actions: [
diff --git a/platform/app/public/config/local_orthanc.js b/platform/app/public/config/local_orthanc.js
index 80469a291..3153408b0 100644
--- a/platform/app/public/config/local_orthanc.js
+++ b/platform/app/public/config/local_orthanc.js
@@ -33,7 +33,7 @@ window.config = {
         supportsWildcard: true,
         dicomUploadEnabled: true,
         bulkDataURI: {
-          enabled: false,
+          enabled: true,
         },
       },
     },
diff --git a/platform/docs/docs/deployment/docker.md b/platform/docs/docs/deployment/docker.md
index 689ea7322..02a7ba813 100644
--- a/platform/docs/docs/deployment/docker.md
+++ b/platform/docs/docs/deployment/docker.md
@@ -43,3 +43,11 @@ The Dockerfile and entry point use the `${PORT}` environment variable as the por
 ```sh
 docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
 ```
+
+### Configuring the OHIF config file
+
+The OHIF [config file](../configuration/configurationFiles.md) to use can be specified by mounting it as a volume for the Docker container using the `-v` flag. If the OHIF config file is on the local file system then it can be specified as below. Note that depending on the version of Docker, an absolute path to the config file might be required.
+
+```sh
+docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/app-config.js --name ohif-viewer-container ohif-viewer-image
+```
diff --git a/platform/ui/src/assets/icons/close.svg b/platform/ui/src/assets/icons/close.svg
deleted file mode 100644
index 03181c71f..000000000
--- a/platform/ui/src/assets/icons/close.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
-    <g fill="currentColor" fill-rule="evenodd">
-        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
-            <path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
-        </g>
-    </g>
-</svg>
diff --git a/platform/ui/src/assets/icons/closeIcon.svg b/platform/ui/src/assets/icons/closeIcon.svg
new file mode 100644
index 000000000..4760717a4
--- /dev/null
+++ b/platform/ui/src/assets/icons/closeIcon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 1.05 10.95 0 6 4.95 1.05 0 0 1.05 4.95 6 0 10.95 1.05 12 6 7.05 10.95 12 12 10.95 7.05 6z" fill="currentColor" fill-rule="evenodd"/>
+</svg>
diff --git a/platform/ui/src/components/AboutModal/AboutModal.tsx b/platform/ui/src/components/AboutModal/AboutModal.tsx
index 84d055cf7..a973c29e3 100644
--- a/platform/ui/src/components/AboutModal/AboutModal.tsx
+++ b/platform/ui/src/components/AboutModal/AboutModal.tsx
@@ -49,7 +49,11 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
 
   const renderRowTitle = title => (
     <div className="pb-3 mb-3 border-b-2 border-black">
-      <Typography variant="h6" className="text-primary-light">
+      <Typography
+        variant="inherit"
+        color="primaryLight"
+        className="text-[16px] font-semibold !leading-[1.2]"
+      >
         {title}
       </Typography>
     </div>
diff --git a/platform/ui/src/components/Dialog/Body.tsx b/platform/ui/src/components/Dialog/Body.tsx
index 31fe0d36a..a534791f2 100644
--- a/platform/ui/src/components/Dialog/Body.tsx
+++ b/platform/ui/src/components/Dialog/Body.tsx
@@ -8,11 +8,13 @@ const Body = ({ text, className }) => {
   const theme = 'bg-primary-dark';
   return (
     <div className={classNames('relative flex-auto', theme, className)}>
-      <div className="p-6">
-        <Typography variant="body" className="my-4 leading-relaxed">
-          {text}
-        </Typography>
-      </div>
+      <Typography
+        variant="inherit"
+        color="initial"
+        className="text-[14px] !leading-[1.2]"
+      >
+        {text}
+      </Typography>
     </div>
   );
 };
diff --git a/platform/ui/src/components/Dialog/Dialog.tsx b/platform/ui/src/components/Dialog/Dialog.tsx
index 09354f20a..7a0785f8f 100644
--- a/platform/ui/src/components/Dialog/Dialog.tsx
+++ b/platform/ui/src/components/Dialog/Dialog.tsx
@@ -22,12 +22,13 @@ const Dialog = ({
 }) => {
   const [value, setValue] = useState(defaultValue);
 
-  const theme = 'bg-secondary-light';
+  const theme = 'bg-primary-dark';
   const flex = 'flex flex-col';
-  const border = 'border-0 rounded-lg drop-shadow-lg';
+  const border = 'border-0 rounded';
   const outline = 'outline-none focus:outline-none';
   const position = 'relative';
   const width = 'w-full';
+  const padding = 'px-[20px] pb-[20px] pt-[13px]';
 
   useEffect(() => {
     if (onShow) {
@@ -36,7 +37,17 @@ const Dialog = ({
   }, [onShow]);
 
   return (
-    <div className={classNames(theme, flex, border, outline, position, width)}>
+    <div
+      className={classNames(
+        theme,
+        flex,
+        border,
+        outline,
+        position,
+        width,
+        padding
+      )}
+    >
       <HeaderComponent
         title={title}
         noCloseButton={noCloseButton}
diff --git a/platform/ui/src/components/Dialog/Footer.tsx b/platform/ui/src/components/Dialog/Footer.tsx
index e725c61a6..73c343ea3 100644
--- a/platform/ui/src/components/Dialog/Footer.tsx
+++ b/platform/ui/src/components/Dialog/Footer.tsx
@@ -6,12 +6,10 @@ import { Button } from '..';
 
 const Footer = ({ actions, className, onSubmit, value }) => {
   const flex = 'flex items-center justify-end';
-  const border = 'border-t-2 border-solid border-black rounded-b';
-  const spacing = 'p-6';
-  const theme = 'bg-primary-dark';
+  const padding = 'pt-[20px]';
 
   return (
-    <div className={classNames(flex, border, spacing, theme, className)}>
+    <div className={classNames(flex, padding, className)}>
       {actions.map((action, index) => {
         const isFirst = index === 0;
         const isPrimary = action.type === 'primary';
diff --git a/platform/ui/src/components/Dialog/Header.tsx b/platform/ui/src/components/Dialog/Header.tsx
index 86c71f11c..bba74bef3 100644
--- a/platform/ui/src/components/Dialog/Header.tsx
+++ b/platform/ui/src/components/Dialog/Header.tsx
@@ -10,7 +10,7 @@ const CloseButton = ({ onClick }) => {
       data-cy="close-button"
       onClick={onClick}
       name="close"
-      className="cursor-pointer text-primary-active w-6 h-6"
+      className="cursor-pointer text-primary-active"
     />
   );
 };
@@ -20,14 +20,13 @@ CloseButton.propTypes = {
 };
 
 const Header = ({ title, noCloseButton, onClose }) => {
-  const theme = 'bg-secondary-main';
+  const theme = 'bg-primary-dark';
   const flex = 'flex items-center justify-between';
-  const border = 'border-b-2 border-solid border-black rounded-t';
-  const spacing = 'p-4';
+  const padding = 'pb-[20px]';
 
   return (
-    <div className={classNames(theme, flex, border, spacing)}>
-      <Typography variant="h6" color="primaryActive">
+    <div className={classNames(theme, flex, padding)}>
+      <Typography variant="h6" color="primaryLight" className="!leading-[1.2]">
         {title}
       </Typography>
       {!noCloseButton && <CloseButton onClick={onClose} />}
diff --git a/platform/ui/src/components/Icon/getIcon.js b/platform/ui/src/components/Icon/getIcon.js
index 34a64595f..18a802435 100644
--- a/platform/ui/src/components/Icon/getIcon.js
+++ b/platform/ui/src/components/Icon/getIcon.js
@@ -8,7 +8,7 @@ import arrowRightSmall from './../../assets/icons/arrow-right-small.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
 import clipboard from './../../assets/icons/clipboard.svg';
-import close from './../../assets/icons/close.svg';
+import close from './../../assets/icons/closeIcon.svg';
 import dottedCircle from './../../assets/icons/dotted-circle.svg';
 import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';
diff --git a/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx b/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
index 465368888..6170b9bd1 100644
--- a/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
+++ b/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
@@ -62,7 +62,7 @@ const LegacyCinePlayer = ({
         className="mr-3 border rounded-full text-primary-active border-primary-active"
         onClick={onClose}
       >
-        <Icon name="close" width="15px" height="15px" />
+        <Icon name="close" />
       </IconButton>
     </div>
   );
diff --git a/platform/ui/src/components/Modal/Modal.tsx b/platform/ui/src/components/Modal/Modal.tsx
index 0aa409f49..c330d6b31 100644
--- a/platform/ui/src/components/Modal/Modal.tsx
+++ b/platform/ui/src/components/Modal/Modal.tsx
@@ -29,10 +29,11 @@ const Modal = ({
   const renderHeader = () => {
     return (
       title && (
-        <header className="flex items-center p-4 border-b-2 border-black bg-secondary-dark rounded-tl rounded-tr">
+        <header className="flex items-center px-[20px] py-[13px] bg-primary-dark rounded-tl rounded-tr">
           <Typography
-            variant="h4"
-            className="flex grow text-primary-light font-light"
+            variant="h6"
+            color="primaryLight"
+            className="flex grow !leading-[1.2]"
             data-cy="modal-header"
           >
             {title}
@@ -41,7 +42,7 @@ const Modal = ({
             <Icon
               onClick={onClose}
               name="close"
-              className="cursor-pointer text-primary-active w-6 h-6"
+              className="cursor-pointer text-primary-active"
             />
           )}
         </header>
@@ -60,7 +61,7 @@ const Modal = ({
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
     >
       {renderHeader()}
-      <section className="ohif-scrollbar modal-content overflow-y-auto px-4 py-6 rounded-bl rounded-br bg-primary-dark">
+      <section className="ohif-scrollbar modal-content overflow-y-auto px-[20px] pt-2 pb-[20px] rounded-bl rounded-br bg-primary-dark">
         {children}
       </section>
     </ReactModal>
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
index 89a010db5..dfad3d10f 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
@@ -66,7 +66,7 @@ const SegmentItem = ({
         {isSegmentIndexHovering && showSegmentDelete ? (
           <Icon
             name="close"
-            className={classnames('w-5 h-5 pr-2')}
+            className={classnames('pr-0.5')}
             onClick={e => {
               e.stopPropagation();
               onDelete(segmentationId, segmentIndex);
diff --git a/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx b/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
index 4fbe6dff8..9ed370975 100644
--- a/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
+++ b/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
@@ -55,7 +55,7 @@ const SegmentationItem = ({
           <Icon
             name="close"
             className={classnames(
-              'w-5 transition duration-500 text-center hover:opacity-80',
+              'w-[10px] transition duration-500 text-center hover:opacity-80',
               {
                 'bg-primary-light text-black': isActive,
                 'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
diff --git a/platform/ui/src/components/Snackbar/SnackbarItem.tsx b/platform/ui/src/components/Snackbar/SnackbarItem.tsx
index 7ed192ffd..4eccb315c 100644
--- a/platform/ui/src/components/Snackbar/SnackbarItem.tsx
+++ b/platform/ui/src/components/Snackbar/SnackbarItem.tsx
@@ -56,7 +56,7 @@ const SnackbarItem = ({ options, onClose }) => {
           onClick={handleClose}
           className="w-5 h-5 rounded-full flex items-center justify-center self-start ml-auto relative left-[3px] top-[-3px] text-[#0944b3]"
         >
-          <Icon name="close" className="w-5 h-5 text-black" />
+          <Icon name="close" className="text-black" />
         </div>
       </div>
     </div>
diff --git a/platform/ui/src/components/Typography/Typography.tsx b/platform/ui/src/components/Typography/Typography.tsx
index b1904b941..d7753d3ed 100644
--- a/platform/ui/src/components/Typography/Typography.tsx
+++ b/platform/ui/src/components/Typography/Typography.tsx
@@ -46,6 +46,7 @@ const classes = {
     inherit: 'text-inherit',
     primary: 'text-primary-main',
     primaryActive: 'text-primary-active',
+    primaryLight: 'text-primary-light',
     secondary: 'text-common-light',
     error: 'text-red-600',
   },
@@ -133,7 +134,7 @@ Typography.propTypes = {
     'primaryActive',
     'secondary',
     'error',
-    'primaryActive',
+    'primaryLight',
   ]),
   className: PropTypes.string,
   children: PropTypes.node,
diff --git a/platform/ui/src/components/UserPreferences/UserPreferences.tsx b/platform/ui/src/components/UserPreferences/UserPreferences.tsx
index f914d97af..f99902085 100644
--- a/platform/ui/src/components/UserPreferences/UserPreferences.tsx
+++ b/platform/ui/src/components/UserPreferences/UserPreferences.tsx
@@ -63,8 +63,9 @@ const UserPreferences = ({
     <>
       <div className="border-b-2 border-black mb-2">
         <Typography
-          variant="h5"
-          className="flex grow text-primary-light font-light pb-2"
+          variant="inherit"
+          color="primaryLight"
+          className="flex text-[16px] font-semibold pb-2 !leading-[1.2]"
         >
           {title}
         </Typography>
@@ -74,7 +75,7 @@ const UserPreferences = ({
   );
 
   return (
-    <div className="p-2">
+    <>
       <Section title={t('General')}>
         <div className="flex flex-row justify-center items-center w-72">
           <Typography variant="subtitle" className="mr-5 text-right h-full">
@@ -122,7 +123,7 @@ const UserPreferences = ({
           </Button>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/platform/ui/src/contextProviders/DialogProvider.tsx b/platform/ui/src/contextProviders/DialogProvider.tsx
index 2c62ee98a..b397b53d6 100644
--- a/platform/ui/src/contextProviders/DialogProvider.tsx
+++ b/platform/ui/src/contextProviders/DialogProvider.tsx
@@ -219,7 +219,7 @@ const DialogProvider = ({ children, service }) => {
               isDragging && 'dragging',
               isDraggable && 'draggable'
             )}
-            style={{ zIndex: '999', position: 'absolute' }}
+            style={{ zIndex: '999', position: 'absolute', width: '350px' }}
             onClick={() => _bringToFront(id)}
           >
             <DialogContent {...dialog} {...contentProps} />