diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
index 6cbff4e14f..6cbde8f2be 100755
--- a/packages/client-core/i18n/en/editor.json
+++ b/packages/client-core/i18n/en/editor.json
@@ -209,6 +209,7 @@
       "lbl-exportOptions": "Export Options",
       "lbl-export": "Export Prefab",
       "lbl-load": "Load Into Scene",
+      "lbl-loadOptions": "Load Options",
       "lbl-unload": "Unload",
       "lbl-reload": "Reload"
     },
@@ -226,6 +227,8 @@
       "pausetitle": "Pause",
       "resettitle": "Reset",
       "lbl-controls": "controls",
+      "lbl-paused": "Paused",
+      "info-paused": "Toggle media playback",
       "info-controls": "Toggle the visibility of the media controls.",
       "lbl-autoplay": "Autoplay",
       "info-autoplay": "Toggle whether this video autoplays",
@@ -259,7 +262,10 @@
       "error-url": "Error Loading From URL"
     },
     "collider": {
+      "name": "Collider",
       "description": "An invisible box that objects will bounce off of or rest on top of.\nWithout colliders, objects will fall through floors and go through walls.",
+      "lbl-type": "Type",
+      "lbl-shape": "Shape",
       "lbl-isTrigger": "Trigger"
     },
     "camera": {
@@ -486,7 +492,14 @@
       "mesh": "Particle Mesh",
       "blending": "Blending",
       "transparent": "Transparent",
-      "world-space": "Use World Space"
+      "world-space": "Use World Space",
+      "burst": {
+        "time":"Burst Time",
+        "count":"Burst Count",
+        "cycle":"Burst Cycle",
+        "interval":"Burst Interval",
+        "probability":"Burst Probability"
+      }
     },
     "clouds": {
       "name": "Cloud",
diff --git a/packages/client-core/package.json b/packages/client-core/package.json
index 1fb497e846..9ee29d70fb 100755
--- a/packages/client-core/package.json
+++ b/packages/client-core/package.json
@@ -42,7 +42,6 @@
     "@mui/icons-material": "5.11.11",
     "@mui/lab": "5.0.0-alpha.94",
     "@mui/material": "5.11.13",
-    "@mui/styled-engine-sc": "5.11.11",
     "@mui/x-date-pickers": "6.9.2",
     "@vladmandic/face-api": "^1.7.9",
     "apexcharts": "^3.37.1",
@@ -75,7 +74,6 @@
     "react-router-dom": "6.9.0",
     "recovery": "^0.2.6",
     "save-as": "^0.1.8",
-    "styled-components": "5.3.9",
     "tick-tock": "^1.0.0",
     "typescript": "5.0.2",
     "util": "^0.12.5",
@@ -88,7 +86,6 @@
     "@types/node": "18.15.5",
     "@types/react": "18.0.28",
     "@types/react-router-dom": "5.3.3",
-    "@types/styled-components": "5.1.26",
     "@types/three": "0.157.0",
     "css-modules-require-hook": "4.2.3",
     "esbuild": "0.17.12",
diff --git a/packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx b/packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx
index cc152d9d95..ff2ae2a92b 100755
--- a/packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx
+++ b/packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx
@@ -505,7 +505,7 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
           <Button
             className={styles.gradientButton}
             startIcon={<Icon type="Portrait" />}
-            sx={{ marginLeft: 1, width: '250px' }}
+            sx={{ width: '250px' }}
             title={t('admin:components.avatar.saveThumbnailTooltip')}
             disabled={!state.avatarFile.value || avatarLoading.value}
             onClick={handleGenerateFileThumbnail}
@@ -552,14 +552,21 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
 
       <Box
         className={styles.preview}
-        style={{ width: '100px', height: '100px', position: 'relative', marginBottom: 15 }}
+        style={{ display: 'flex', justifyContent: 'center', position: 'relative', marginBottom: 15 }}
       >
-        <img src={thumbnailSrc} crossOrigin="anonymous" />
+        <img
+          src={thumbnailSrc}
+          crossOrigin="anonymous"
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+        />
         {((state.source.value === 'file' && !state.thumbnailFile.value) ||
           (state.source.value === 'url' && !state.thumbnailUrl.value)) && (
           <Typography
             sx={{
-              position: 'absolute',
+              position: 'relative',
               top: 0,
               display: 'flex',
               justifyContent: 'center',
diff --git a/packages/client-core/src/admin/components/Project/ProjectFields.tsx b/packages/client-core/src/admin/components/Project/ProjectFields.tsx
index 71b243d5a7..e3810d2a66 100644
--- a/packages/client-core/src/admin/components/Project/ProjectFields.tsx
+++ b/packages/client-core/src/admin/components/Project/ProjectFields.tsx
@@ -394,7 +394,9 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
               onBlur={handleChangeDestinationRepo}
             />
           ) : (
-            <div className={styles.textAlign}>{t('admin:components.project.needsGithubProvider')}</div>
+            <div className={classNames(styles.textAlign, styles.defaultFont)}>
+              {t('admin:components.project.needsGithubProvider')}
+            </div>
           )}
 
           {!projectUpdateStatus.value?.destinationProcessing &&
@@ -448,7 +450,9 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
                   </Tooltip>
                 </div>
               ) : (
-                <div className={styles.textAlign}>{t('admin:components.project.needsGithubProvider')}</div>
+                <div className={classNames(styles.textAlign, styles.defaultFont)}>
+                  {t('admin:components.project.needsGithubProvider')}
+                </div>
               )}
 
               {!processing &&
@@ -523,21 +527,22 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
             projectUpdateStatus.value?.selectedSHA.length > 0 &&
             projectUpdateStatus.value?.commitData.length > 0 &&
             !matchesEngineVersion && (
-              <div className={styles.projectMismatchWarning}>
+              <div className={classNames(styles.projectMismatchWarning)}>
                 <Icon type="WarningAmber" />
                 {t('admin:components.project.mismatchedProjectWarning')}
               </div>
             )}
 
           {projectUpdateStatus.value?.sourceVsDestinationError.length > 0 && (
-            <div className={styles.errorText}>{projectUpdateStatus.value?.sourceVsDestinationError}</div>
+            <div className={classNames(styles.errorText)}>{projectUpdateStatus.value?.sourceVsDestinationError}</div>
           )}
 
           <div
             className={classNames({
               [styles.validContainer]: true,
               [styles.valid]: projectUpdateStatus.value?.destinationValid,
-              [styles.invalid]: !projectUpdateStatus.value?.destinationValid
+              [styles.invalid]: !projectUpdateStatus.value?.destinationValid,
+              [styles.defaultFont]: true
             })}
           >
             {projectUpdateStatus.value?.destinationValid && <Icon type="CheckCircle" />}
@@ -550,7 +555,8 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
               className={classNames({
                 [styles.validContainer]: true,
                 [styles.valid]: projectUpdateStatus.value?.sourceValid,
-                [styles.invalid]: !projectUpdateStatus.value?.sourceValid
+                [styles.invalid]: !projectUpdateStatus.value?.sourceValid,
+                [styles.defaultFont]: true
               })}
             >
               {projectUpdateStatus.value?.sourceValid && <Icon type="CheckCircle" />}
@@ -564,7 +570,8 @@ const ProjectFields = ({ inputProject, existingProject = false, changeDestinatio
               className={classNames({
                 [styles.validContainer]: true,
                 [styles.valid]: projectUpdateStatus.value?.sourceProjectMatchesDestination,
-                [styles.invalid]: !projectUpdateStatus.value?.sourceProjectMatchesDestination
+                [styles.invalid]: !projectUpdateStatus.value?.sourceProjectMatchesDestination,
+                [styles.defaultFont]: true
               })}
             >
               {projectUpdateStatus.value?.sourceProjectMatchesDestination && <Icon type="CheckCircle" />}
diff --git a/packages/client-core/src/admin/components/Server/ServerLogs.tsx b/packages/client-core/src/admin/components/Server/ServerLogs.tsx
index 9c98de5d2d..7997f5c041 100755
--- a/packages/client-core/src/admin/components/Server/ServerLogs.tsx
+++ b/packages/client-core/src/admin/components/Server/ServerLogs.tsx
@@ -151,7 +151,7 @@ const ServerLogs = ({
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       <Box sx={{ display: 'flex', alignItems: 'center', margin: '15px 0' }}>
-        <h5 style={{ fontSize: '18px' }}>
+        <h5 style={{ fontSize: '18px', fontWeight: 'normal' }}>
           {t('admin:components.server.logs')}: {podName.value!}
         </h5>
 
@@ -202,7 +202,7 @@ const ServerLogs = ({
         />
       </Box>
       <Box sx={{ overflow: 'auto' }}>
-        <pre style={{ fontSize: '14px' }}>{serverLogs}</pre>
+        <pre style={{ fontSize: '14px', fontFamily: 'var(--lato)' }}>{serverLogs}</pre>
         <pre ref={logsEndRef} />
       </Box>
     </Box>
diff --git a/packages/client-core/src/admin/components/Setting/ClientTheme/DemoStyle.tsx b/packages/client-core/src/admin/components/Setting/ClientTheme/DemoStyle.tsx
index 8ca6081c11..dcd18bd275 100644
--- a/packages/client-core/src/admin/components/Setting/ClientTheme/DemoStyle.tsx
+++ b/packages/client-core/src/admin/components/Setting/ClientTheme/DemoStyle.tsx
@@ -111,6 +111,7 @@ const DemoStyle = ({ theme }: DemoStyleProps) => {
         font-size: 16px;
         color: ${theme.textHeading};
         margin-bottom: 10px;
+        font-family: var(--lato);
       }
 
       .textSubheading {
@@ -121,11 +122,13 @@ const DemoStyle = ({ theme }: DemoStyleProps) => {
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
+        font-family: var(--lato);
       }
 
       .textDescription {
         font-size: 12px;
         color: ${theme.textDescription};
+        font-family: var(--lato);
       }
 
       .panelCardContainer {
diff --git a/packages/client-core/src/admin/styles/admin.module.scss b/packages/client-core/src/admin/styles/admin.module.scss
index 518279a863..3e5a0dcd5c 100644
--- a/packages/client-core/src/admin/styles/admin.module.scss
+++ b/packages/client-core/src/admin/styles/admin.module.scss
@@ -1,5 +1,12 @@
 @import "@etherealengine/client-core/src/styles/imports.module.scss";
 
+
+
+.defaultFont {
+  font-family: var(--lato);
+  font-size: 12px;
+}
+
 .openModalBtn {
   height: 50px;
   width: 100%;
@@ -9,6 +16,7 @@
 
   &:hover {
     opacity: 0.8;
+    background-color: var(--buttonFilled);
   }
 
   &:disabled {
@@ -69,6 +77,7 @@
 .gradientButton {
   background: linear-gradient(90deg, var(--buttonGradientStart), var(--buttonGradientEnd));
   color: var(--buttonTextColor) !important;
+  width:100%;
 
   &.forceVaporwave {
     background: linear-gradient(90deg, #5236ff, #c20560);
@@ -88,6 +97,7 @@
   background: transparent;
   border: solid 1px var(--buttonOutlined);
   color: var(--buttonTextColor) !important;
+  width:100%;
 
   &:hover {
     opacity: 0.7;
@@ -325,7 +335,9 @@
 }
 
 .textAlign {
+  display: flex;
   text-align: center;
+  justify-content: center;
 }
 
 .mb10px {
@@ -677,6 +689,8 @@
   text-align: center;
   display: flex;
   align-items: center;
+  font-family: var(--lato);
+  font-size: 12px;
 
   & > svg {
     font-size: 2.5em;
@@ -693,6 +707,8 @@
 
 .validContainer {
   display: flex;
+  text-align: center;
+  align-items: center;
 
   &.valid > svg {
     color: var(--green);
@@ -709,10 +725,14 @@
 
 .errorText {
   color: var(--red);
+  font-family: var(--lato);
+  font-size: 12px;
 }
 
 .projectVersion {
   color: var(--yellow);
+  font-family: var(--lato);
+  font-size: 12px;
 }
 
 .projectSelector {
@@ -820,11 +840,23 @@
   color: var(--textColor);
   text-align: center;
   margin-bottom: 10px;
-  font-weight: 300;
   font-size: 18px;
   display: flex;
+  font-family: var(--lato);
 
   a {
     margin-left: 2px;
   }
 }
+
+a {
+  color: var(--textColor);
+
+  &:hover{
+    color: var(--blueHover);
+  }
+
+  & :active {
+    color: var(--bluePressed);
+  }
+}
\ No newline at end of file
diff --git a/packages/client-core/src/admin/styles/settings.module.scss b/packages/client-core/src/admin/styles/settings.module.scss
index 513c21d6cc..4123a1fa4f 100644
--- a/packages/client-core/src/admin/styles/settings.module.scss
+++ b/packages/client-core/src/admin/styles/settings.module.scss
@@ -229,11 +229,13 @@
 
   label:nth-child(1) {
     margin-right: 20px;
+    font-family: var(--lato);
   }
 
   label:nth-child(3) {
     margin-left: 10px;
     margin-right: 10px;
+    font-family: var(--lato);
   }
 }
 
diff --git a/packages/client-core/src/admin/styles/table.module.scss b/packages/client-core/src/admin/styles/table.module.scss
index 492922744c..90f40a701d 100644
--- a/packages/client-core/src/admin/styles/table.module.scss
+++ b/packages/client-core/src/admin/styles/table.module.scss
@@ -4,6 +4,7 @@
   flex-direction: column;
   flex-grow: 1;
   min-height: 0;
+  
 }
 
 .tableCellHeader {
@@ -16,6 +17,7 @@
   }
 }
 
+
 .tableCellBody {
   border-bottom: 1px solid var(--mainBackground) !important;
   color: var(--textColor) !important;
diff --git a/packages/client-core/src/common/components/AutoComplete/index.tsx b/packages/client-core/src/common/components/AutoComplete/index.tsx
index b3beed7240..d692cec177 100644
--- a/packages/client-core/src/common/components/AutoComplete/index.tsx
+++ b/packages/client-core/src/common/components/AutoComplete/index.tsx
@@ -93,7 +93,7 @@ const AutoComplete = ({ data, label, disabled, onChange, value = [] }: Props) =>
             {value.map((option: AutoCompleteData, index: number) => (
               <Tag className={styles.tag} label={option.type} disabled={disabled} {...getTagProps({ index })} />
             ))}
-            <input disabled={disabled} {...getInputProps()} />
+            <input style={{ margin: 0 }} disabled={disabled} {...getInputProps()} />
           </div>
         </div>
         {groupedOptions.length > 0 && (
diff --git a/packages/client-core/src/common/components/AutoCompleteSingle/index.tsx b/packages/client-core/src/common/components/AutoCompleteSingle/index.tsx
index 1640afe6eb..e4b8eb2ca6 100644
--- a/packages/client-core/src/common/components/AutoCompleteSingle/index.tsx
+++ b/packages/client-core/src/common/components/AutoCompleteSingle/index.tsx
@@ -102,6 +102,7 @@ const AutoComplete = ({ data, label, disabled, error, onChange, value = '', free
               </legend>
             </fieldset>
             <input
+              style={{ margin: 0 }}
               disabled={disabled}
               {...getInputProps()}
               onBlur={(event: any) => {
diff --git a/packages/client-core/src/common/components/Avatar/index.tsx b/packages/client-core/src/common/components/Avatar/index.tsx
index 921bec027e..dabb7a65a7 100644
--- a/packages/client-core/src/common/components/Avatar/index.tsx
+++ b/packages/client-core/src/common/components/Avatar/index.tsx
@@ -107,7 +107,17 @@ const Avatar = ({
         className={`${commonStyles.preview} ${styles.avatarThumbnail} ${className}`}
         sx={{ width: `${size}px`, height: `${size}px`, ...sx }}
       >
-        <img alt={alt} src={imageSrc} crossOrigin="anonymous" width={`${size}px`} height={`${size}px`} />
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          alt={alt}
+          src={imageSrc}
+          crossOrigin="anonymous"
+          width={`${size}px`}
+          height={`${size}px`}
+        />
         {!imageSrc && (
           <Text className={commonStyles.previewText} variant="body2">
             {t('admin:components.avatar.thumbnailPreview')}
@@ -123,7 +133,15 @@ const Avatar = ({
       id={id}
       sx={{ width: `${size}px`, height: `${size}px`, ...sx }}
     >
-      <img alt={alt} src={imageSrc} crossOrigin="anonymous" />
+      <img
+        style={{
+          height: '100%',
+          maxWidth: '100%'
+        }}
+        alt={alt}
+        src={imageSrc}
+        crossOrigin="anonymous"
+      />
       {showChangeButton && (
         <IconButton
           disableRipple
diff --git a/packages/client-core/src/common/components/ErrorBoundary.tsx b/packages/client-core/src/common/components/ErrorBoundary.tsx
index 755010b0ed..f31ec8f1b5 100644
--- a/packages/client-core/src/common/components/ErrorBoundary.tsx
+++ b/packages/client-core/src/common/components/ErrorBoundary.tsx
@@ -31,8 +31,8 @@ const ErrorBoundary = createErrorBoundary(function error(props, error?: Error) {
   if (error) {
     return (
       <div className="error-screen">
-        <h2>An error has occured</h2>
-        <h4>{error.message}</h4>
+        <h2 style={{ fontSize: '100%', fontWeight: 'normal' }}>An error has occured</h2>
+        <h4 style={{ fontSize: '100%', fontWeight: 'normal' }}>{error.message}</h4>
       </div>
     )
   } else {
diff --git a/packages/client-core/src/common/components/InputFile/index.tsx b/packages/client-core/src/common/components/InputFile/index.tsx
index 59c56b3f0c..a5fa5a0338 100644
--- a/packages/client-core/src/common/components/InputFile/index.tsx
+++ b/packages/client-core/src/common/components/InputFile/index.tsx
@@ -30,7 +30,7 @@ const InputFile = React.forwardRef(
     props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     ref: React.LegacyRef<HTMLInputElement> | undefined
   ) => {
-    return <input ref={ref} style={{ display: 'none' }} type="file" {...props} />
+    return <input ref={ref} style={{ display: 'none', margin: 0 }} type="file" {...props} />
   }
 )
 
diff --git a/packages/client-core/src/components/ConferenceMode/ConferenceModeParticipant.tsx b/packages/client-core/src/components/ConferenceMode/ConferenceModeParticipant.tsx
index 31b0d6bbcb..538c2a029f 100644
--- a/packages/client-core/src/components/ConferenceMode/ConferenceModeParticipant.tsx
+++ b/packages/client-core/src/components/ConferenceMode/ConferenceModeParticipant.tsx
@@ -85,7 +85,16 @@ const ConferenceModeParticipant = ({ peerID, type }: Props): JSX.Element => {
         })}
       >
         {(videoStream == null || videoStreamPaused || videoProducerPaused || videoProducerGlobalMute) && (
-          <img src={avatarThumbnail} alt="" crossOrigin="anonymous" draggable={false} />
+          <img
+            style={{
+              height: 'auto',
+              maxWidth: '100%'
+            }}
+            src={avatarThumbnail}
+            alt=""
+            crossOrigin="anonymous"
+            draggable={false}
+          />
         )}
         <span key={peerID + '-video-container'} id={peerID + '-video-container'} />
       </div>
diff --git a/packages/client-core/src/components/Debug/StatsPanel.tsx b/packages/client-core/src/components/Debug/StatsPanel.tsx
index 99ab9a6697..17de5933a8 100644
--- a/packages/client-core/src/components/Debug/StatsPanel.tsx
+++ b/packages/client-core/src/components/Debug/StatsPanel.tsx
@@ -87,10 +87,10 @@ export const StatsPanel = (props: { show: boolean }) => {
         {renderInfoState.visible.value ? 'Hide' : 'Show'}
       </button>
       {info && (
-        <ul>
+        <ul style={{ listStyle: 'none' }}>
           <li>
             {t('editor:viewport.state.memory')}
-            <ul>
+            <ul style={{ listStyle: 'none' }}>
               <li>
                 {t('editor:viewport.state.geometries')}: {info.geometries}
               </li>
@@ -101,7 +101,7 @@ export const StatsPanel = (props: { show: boolean }) => {
           </li>
           <li>
             {t('editor:viewport.state.render')}:
-            <ul>
+            <ul style={{ listStyle: 'none' }}>
               <li>
                 {t('editor:viewport.state.FPS')}: {Math.round(info.fps)}
               </li>
diff --git a/packages/client-core/src/components/Debug/index.tsx b/packages/client-core/src/components/Debug/index.tsx
index d6cfa5b042..af6829b6e1 100755
--- a/packages/client-core/src/components/Debug/index.tsx
+++ b/packages/client-core/src/components/Debug/index.tsx
@@ -310,6 +310,7 @@ export const Debug = ({ showingStateRef }: { showingStateRef: React.MutableRefOb
               <>
                 <input
                   type="checkbox"
+                  style={{ margin: 0 }}
                   checked={value ? true : false}
                   onChange={() => {
                     if (Engine.instance.activeSystems.has(system.uuid)) {
diff --git a/packages/client-core/src/components/Debug/styles.module.scss b/packages/client-core/src/components/Debug/styles.module.scss
index c9640b6049..e91fdaafc5 100644
--- a/packages/client-core/src/components/Debug/styles.module.scss
+++ b/packages/client-core/src/components/Debug/styles.module.scss
@@ -7,6 +7,13 @@
   padding: 7px;
   width: calc(100vw - 50px);
   max-width: 450px;
+  font-family: var(--lato);
+  font-size: 12px;
+
+  h1{
+    font-size: 100%;
+    font-weight: normal;
+  }
 
   & > * + * {
     margin-top: 10px;
@@ -22,7 +29,7 @@
   background: var(--panelBackground);
   padding: 10px;
   border-radius: 5px;
-
+ 
   .optionBlock {
     display: flex;
     justify-content: space-between;
@@ -46,7 +53,8 @@
   flex-shrink: 0;
   height: 30px;
   border-radius: 3px;
-
+  margin:0;
+  
   &:hover,
   &:focus-visible {
     opacity: 0.8;
@@ -123,3 +131,8 @@
     margin-left: 0 !important;
   }
 }
+
+h1 {
+  font-size: '100%';
+  font-weight: 'normal';
+}
diff --git a/packages/client-core/src/components/Fullscreen/index.module.scss b/packages/client-core/src/components/Fullscreen/index.module.scss
index 42ef27eab6..735cd5912e 100755
--- a/packages/client-core/src/components/Fullscreen/index.module.scss
+++ b/packages/client-core/src/components/Fullscreen/index.module.scss
@@ -23,7 +23,8 @@
   border-radius: 50%;
   opacity: 0.99;
   pointer-events: auto;
-
+  margin:0;
+  
   &:hover {
     box-shadow: 0 1rem 2rem rgba(#000, 0.2);
     opacity: 1;
diff --git a/packages/client-core/src/components/InstanceChat/index.module.scss b/packages/client-core/src/components/InstanceChat/index.module.scss
index 3c6588c0e4..82fa9b1c43 100755
--- a/packages/client-core/src/components/InstanceChat/index.module.scss
+++ b/packages/client-core/src/components/InstanceChat/index.module.scss
@@ -29,7 +29,6 @@
       top: 0;
       bottom: 0;
       position: fixed;
-      width: 100vw;
       z-index: 10;
       flex: none;
     }
@@ -331,6 +330,9 @@
   line-height: 1.3;
   white-space: pre-wrap;
   word-break: break-word;
+  font-family: var(--lato);
+  margin: 0;
+  padding: 0;
 }
 
 .shadowText {
@@ -338,6 +340,7 @@
   text-shadow: 1px 1px 2px grey, 0 0 1em grey, 0 0 1em grey;
   font-size: 0.7rem;
   white-space: pre-wrap;
+  font-family: var(--lato);
 }
 
 .animateTop {
@@ -360,6 +363,8 @@
   color: var(--textColor);
   font-weight: bold;
   margin-bottom: 5px;
+  font-size:100%;
+  font-family: var(--lato);
 }
 
 .avatar {
@@ -413,6 +418,7 @@
     color: white;
     text-shadow: 1px 1px 2px grey, 0 0 1em grey, 0 0 1em grey;
     font-size: 0.7rem;
+    font-family: var(--lato);
   }
 }
 
diff --git a/packages/client-core/src/components/MediaIconsBox/index.module.scss b/packages/client-core/src/components/MediaIconsBox/index.module.scss
index 5f9bc61220..28ec4bbf93 100755
--- a/packages/client-core/src/components/MediaIconsBox/index.module.scss
+++ b/packages/client-core/src/components/MediaIconsBox/index.module.scss
@@ -21,7 +21,7 @@
     justify-content: center;
     align-items: center;
     pointer-events: auto;
-
+    
     &::before {
       content: " ";
       position: absolute;
diff --git a/packages/client-core/src/components/Shelves/index.module.scss b/packages/client-core/src/components/Shelves/index.module.scss
index d41ba5e4b9..bc1415e34e 100755
--- a/packages/client-core/src/components/Shelves/index.module.scss
+++ b/packages/client-core/src/components/Shelves/index.module.scss
@@ -26,12 +26,14 @@
   position: fixed;
   top: 10px;
   left: 8px;
+  margin:0;
 }
 
 .showIcon {
   position: fixed;
   bottom: 20px;
   left: 8px;
+  margin:0;
 }
 
 .rotate {
@@ -88,7 +90,7 @@
   padding: 0;
   border-radius: 50%;
   opacity: 0.99;
-
+  
   &:hover {
     box-shadow: 0 1rem 2rem rgba(#000, 0.2);
     opacity: 1;
diff --git a/packages/client-core/src/components/UserMediaWindow/index.module.scss b/packages/client-core/src/components/UserMediaWindow/index.module.scss
index a9726c19a8..693fdbec4c 100755
--- a/packages/client-core/src/components/UserMediaWindow/index.module.scss
+++ b/packages/client-core/src/components/UserMediaWindow/index.module.scss
@@ -100,6 +100,9 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-family: var(--lato);
+    font-size: 12px;
+
   }
 
   .border-lit {
diff --git a/packages/client-core/src/components/UserMediaWindow/index.tsx b/packages/client-core/src/components/UserMediaWindow/index.tsx
index 8ff5ab4950..74e9953c67 100755
--- a/packages/client-core/src/components/UserMediaWindow/index.tsx
+++ b/packages/client-core/src/components/UserMediaWindow/index.tsx
@@ -596,6 +596,7 @@ export const UserMediaWindow = ({ peerID, type }: Props): JSX.Element => {
                   value={volume}
                   onChange={adjustVolume}
                   aria-labelledby="continuous-slider"
+                  style={{ color: 'var(--textColor)' }}
                 />
               </div>
             )}
@@ -666,11 +667,21 @@ export const UserMediaWindowWidget = ({ peerID, type }: Props): JSX.Element => {
       xr-layer="true"
     >
       {videoStream == null || videoStreamPaused || videoProducerPaused || videoProducerGlobalMute ? (
-        <img src={avatarThumbnail} alt="" crossOrigin="anonymous" draggable={false} xr-layer="true" />
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src={avatarThumbnail}
+          alt=""
+          crossOrigin="anonymous"
+          draggable={false}
+          xr-layer="true"
+        />
       ) : (
         <video
           xr-layer="true"
-          style={{ maxWidth: '100px' }}
+          style={{ height: 'auto', maxWidth: '100px' }}
           ref={ref}
           key={peerID + '-video-container'}
           id={peerID + '-video-container-xrui'}
@@ -678,7 +689,7 @@ export const UserMediaWindowWidget = ({ peerID, type }: Props): JSX.Element => {
       )}
       <div
         style={{
-          fontFamily: "'Roboto', sans-serif",
+          fontFamily: 'var(--lato)',
           textAlign: 'center',
           width: '100%',
           margin: '14px 0',
@@ -690,7 +701,7 @@ export const UserMediaWindowWidget = ({ peerID, type }: Props): JSX.Element => {
         xr-layer="true"
       >
         {username}
-        <button style={{}} onClick={toggleAudio} xr-layer="true">
+        <button style={{ margin: 0 }} onClick={toggleAudio} xr-layer="true">
           <Icon
             xr-layer="true"
             type={isSelf ? (audioStreamPaused ? 'MicOff' : 'Mic') : audioStreamPaused ? 'VolumeOff' : 'VolumeUp'}
diff --git a/packages/client-core/src/systems/components/XRIconButton/index.tsx b/packages/client-core/src/systems/components/XRIconButton/index.tsx
index 9fc93fc9ec..4996818924 100644
--- a/packages/client-core/src/systems/components/XRIconButton/index.tsx
+++ b/packages/client-core/src/systems/components/XRIconButton/index.tsx
@@ -53,7 +53,7 @@ const XRIconButton = (props) => {
       <button
         className={`iconButtonContainer ${className} ${variant} ${size}`}
         {...buttonProps}
-        style={backgroundColor ? { backgroundColor: backgroundColor } : {}}
+        style={backgroundColor ? { backgroundColor: backgroundColor, margin: 0 } : { margin: 0 }}
       >
         {content}
       </button>
diff --git a/packages/client-core/src/systems/ui/AvatarDetailView/index.scss b/packages/client-core/src/systems/ui/AvatarDetailView/index.scss
index f35a3f27ab..7a0b06b2ff 100644
--- a/packages/client-core/src/systems/ui/AvatarDetailView/index.scss
+++ b/packages/client-core/src/systems/ui/AvatarDetailView/index.scss
@@ -16,4 +16,6 @@
 .typingIndicator {
   margin: 0;
   padding: 0;
+  font-size: 100%;
+  font-weight: normal;
 }
diff --git a/packages/client-core/src/systems/ui/LoadingDetailView/style.tsx b/packages/client-core/src/systems/ui/LoadingDetailView/style.tsx
index 80e0a245f0..da9f472c97 100644
--- a/packages/client-core/src/systems/ui/LoadingDetailView/style.tsx
+++ b/packages/client-core/src/systems/ui/LoadingDetailView/style.tsx
@@ -44,6 +44,8 @@ const LoadingDetailViewStyle = () => {
         transform: translate(-50%, -50%);
         filter: blur(5px);
         color: #FFFFFF;
+        height: 'auto';
+        max-width: '100%;
       }
 
       #loading-ui {
diff --git a/packages/client-core/src/systems/ui/RecordingsWidgetUI.tsx b/packages/client-core/src/systems/ui/RecordingsWidgetUI.tsx
index 6abe3eab88..d71314bcf9 100755
--- a/packages/client-core/src/systems/ui/RecordingsWidgetUI.tsx
+++ b/packages/client-core/src/systems/ui/RecordingsWidgetUI.tsx
@@ -50,7 +50,7 @@ const Checkbox = (props: { label: string; disabled?: boolean; checked: boolean;
     <div style={{ display: 'flex', flexDirection: 'row' }} className="flex flex-row">
       <input
         type="checkbox"
-        style={{ width: '20px', height: '20px' }}
+        style={{ margin: 0, width: '20px', height: '20px' }}
         checked={props.checked}
         disabled={props.disabled}
         onChange={() => {
@@ -66,6 +66,7 @@ const Button = (props: { label: string | JSX.Element; onClick: () => void }) =>
   return (
     <button
       style={{
+        margin: 0,
         padding: '6px 12px',
         border: '0px',
         borderRadius: '20px',
@@ -232,11 +233,15 @@ export const RecordingPeerList = () => {
           onClick={() => onToggleRecording()}
         />
       </div>
-      <table style={{ display: 'table', width: '100%' }}>
+      <table style={{ borderCollapse: 'collapse', borderSpacing: 0, display: 'table', width: '100%' }}>
         <thead>
           <tr>
-            <th>Peer</th>
-            <th>Actions</th>
+            <th style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
+              Peer
+            </th>
+            <th style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
+              Actions
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -244,10 +249,10 @@ export const RecordingPeerList = () => {
             .filter((peerID) => peerMediaChannelState[peerID].value)
             .map((peerID) => (
               <tr key={peerID}>
-                <td>
+                <td style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
                   <div style={{ width: '200px', overflowWrap: 'break-word' }}>{peerID}</div>
                 </td>
-                <td>
+                <td style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
                   <div className="">
                     {/* a button to play back the recording */}
                     <RecordingPeer peerID={peerID} />
@@ -335,18 +340,18 @@ const RecordingsList = () => {
     const duration = (new Date(recording.updatedAt).getTime() - new Date(recording.createdAt).getTime()) / 1000
     return (
       <tr key={recording.id} style={{ height: '33px' }}>
-        <td>
+        <td style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
           <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '200px' }}>
             {recording.id}
           </div>
         </td>
-        <td>
+        <td style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
           <div>{time}</div>
         </td>
-        <td>
+        <td style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
           <div>{duration}s</div>
         </td>
-        <td>
+        <td style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
           <div key={recording.id} style={{ display: 'flex' }}>
             <Button
               onClick={() => {
@@ -380,13 +385,21 @@ const RecordingsList = () => {
 
   return (
     <div style={{ width: '100%' }}>
-      <table style={{ display: 'table', width: '100%' }}>
+      <table style={{ borderCollapse: 'collapse', borderSpacing: 0, display: 'table', width: '100%' }}>
         <thead>
           <tr>
-            <th>Recording</th>
-            <th>Time</th>
-            <th>Duration</th>
-            <th>Actions</th>
+            <th style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
+              Recording
+            </th>
+            <th style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
+              Time
+            </th>
+            <th style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
+              Duration
+            </th>
+            <th style={{ padding: 0, textAlign: 'left' }} className="p-0 text-left">
+              Actions
+            </th>
           </tr>
         </thead>
         <tbody>
diff --git a/packages/client-core/src/systems/ui/UserMenuView/index.tsx b/packages/client-core/src/systems/ui/UserMenuView/index.tsx
index 6f0fe666e8..c4f6eef6a4 100644
--- a/packages/client-core/src/systems/ui/UserMenuView/index.tsx
+++ b/packages/client-core/src/systems/ui/UserMenuView/index.tsx
@@ -39,7 +39,7 @@ import { useUserAvatarThumbnail } from '../../../user/functions/useUserAvatarThu
 import { AuthState } from '../../../user/services/AuthService'
 import { AvatarMenus } from '../../AvatarUISystem'
 import XRTextButton from '../../components/XRTextButton'
-import styleString from './index.scss?inline'
+import styles from './index.scss'
 
 export const AvatarUIContextMenuState = defineState({
   name: 'AvatarUISystem',
@@ -105,12 +105,20 @@ const AvatarContextMenu = () => {
 
   return (
     <>
-      <style>{styleString}</style>
       {user?.userId && (
-        <div className="rootContainer">
-          <img className="ownerImage" src={userThumbnail} alt="" crossOrigin="anonymous" />
-          <div className="buttonContainer">
-            <section className="buttonSection">
+        <div className={styles.rootContainer}>
+          <img
+            style={{
+              height: 'auto',
+              maxWidth: '100%'
+            }}
+            className={styles.ownerImage}
+            src={userThumbnail}
+            alt=""
+            crossOrigin="anonymous"
+          />
+          <div className={styles.buttonContainer}>
+            <section className={styles.buttonSection}>
               {!isFriend && !isRequested && !isPending && !isBlocked && !isBlocking && (
                 <XRTextButton onClick={() => FriendService.requestFriend(selfId, user?.userId)}>
                   {t('user:personMenu.addAsFriend')}
diff --git a/packages/client-core/src/theme.tsx b/packages/client-core/src/theme.tsx
deleted file mode 100755
index faea3bac36..0000000000
--- a/packages/client-core/src/theme.tsx
+++ /dev/null
@@ -1,483 +0,0 @@
-/*
-CPAL-1.0 License
-
-The contents of this file are subject to the Common Public Attribution License
-Version 1.0. (the "License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
-The License is based on the Mozilla Public License Version 1.1, but Sections 14
-and 15 have been added to cover use of software over a computer network and 
-provide for limited attribution for the Original Developer. In addition, 
-Exhibit A has been modified to be consistent with Exhibit B.
-
-Software distributed under the License is distributed on an "AS IS" basis,
-WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
-specific language governing rights and limitations under the License.
-
-The Original Code is Ethereal Engine.
-
-The Original Developer is the Initial Developer. The Initial Developer of the
-Original Code is the Ethereal Engine team.
-
-All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
-Ethereal Engine. All Rights Reserved.
-*/
-
-import { useTheme as styledUseTheme } from 'styled-components'
-
-import { createTheme } from '@mui/material/styles'
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: 'rgba(128, 128, 128, 50%)'
-    },
-    secondary: {
-      main: 'rgba(128, 128, 128, 50%)'
-    }
-  },
-  components: {
-    MuiListSubheader: {
-      styleOverrides: {
-        root: {
-          'background-color': 'rgba(0,0,0,0)'
-        }
-      }
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          color: 'inherit',
-          opacity: 0.7
-        }
-      }
-    },
-    // MuiTypography: {
-    //   styleOverrides: {
-    //     h1: {
-    //       fontSize: 24,
-    //       margin: '15px 0px',
-    //       display: 'flex',
-    //       alignItems: 'center'
-    //     },
-    //     h2: {
-    //       fontSize: 16,
-    //       fontWeight: 'bold',
-    //       margin: '5px 0px',
-    //       cursor: 'pointer',
-    //       display: 'flex',
-    //       alignItems: 'center',
-    //       '&.MuiTypography-colorSecondary': {
-    //         color: '#FFD600'
-    //       }
-    //     },
-    //     h3: {
-    //       fontSize: 14,
-    //       margin: '5px 0px',
-    //       fontWeight: 'bold',
-    //       cursor: 'pointer',
-    //       display: 'flex',
-    //       alignItems: 'center',
-    //       '&.MuiTypography-colorSecondary': {
-    //         color: '#FFD600'
-    //       }
-    //     },
-    //     h4: {
-    //       fontSize: 14,
-    //       margin: '5px 0px',
-    //       cursor: 'pointer',
-    //       display: 'flex',
-    //       alignItems: 'center',
-    //       '&.MuiTypography-colorSecondary': {
-    //         color: '#FFD600'
-    //       }
-    //     },
-    //     alignRight: {
-    //       textAlign: 'right',
-    //       justifyContent: 'flex-end',
-    //       alignItems: 'right'
-    //     },
-    //     alignLeft: {
-    //       textAlign: 'left',
-    //       justifyContent: 'flex-start',
-    //       alignItems: 'left'
-    //     },
-    //     alignCenter: {
-    //       textAlign: 'center',
-    //       justifyContent: 'center',
-    //       alignItems: 'center'
-    //     }
-    //   }
-    // },
-    // MuiDialog: {
-    //   styleOverrides: {
-    //     paperWidthSm: {
-    //       maxWidth: '40%',
-    //       width: '40%',
-    //       margin: '0 auto',
-    //       fontSize: 16,
-    //       textAlign: 'center',
-    //       '@media (max-width: 768px)': {
-    //         maxWidth: '90%',
-    //         width: '90%'
-    //       }
-    //     }
-    //   }
-    // },
-    // MuiDialogTitle: {
-    //   styleOverrides: {
-    //     root: {
-    //       backgroundColor: 'rgba(0, 0, 0, 0.9)',
-    //       display: 'flex',
-    //       flexDirection: 'row-reverse',
-    //       alignItems: 'center'
-    //     }
-    //   }
-    // },
-    // MuiDialogContent: {
-    //   styleOverrides: {
-    //     root: {
-    //       backgroundColor: 'rgba(0, 0, 0, 0.9)',
-    //       textAlign: 'justify',
-    //       padding: ' 0 24px 24px 24px'
-    //     }
-    //   }
-    // },
-    // MuiButtonBase: {
-    //   styleOverrides: {
-    //     root: {
-    //       backgroundColor: 'rgba(0, 0, 0, 0.9)',
-    //       color: '#000000',
-    //       fontSize: 16,
-    //       textAlign: 'center'
-    //     }
-    //     // colorPrimary:{
-    //     //   backgroundColor: 'transparent',
-    //     //   color: '#FFFFFF',
-    //     //   '&:hover':{
-    //     //     backgroundColor: '#5151FF',
-    //     //   },
-    //     // },
-    //   }
-    // },
-    // MuiIconButton: {
-    //   styleOverrides: {
-    //     root: {
-    //       color: '#000000',
-    //       '&:hover': {
-    //         backgroundColor: 'transparent'
-    //       }
-    //     },
-    //     colorPrimary: {
-    //       backgroundColor: '#5151FF',
-    //       color: '#FFFFFF',
-    //       '&:hover': {
-    //         backgroundColor: '#5151FF'
-    //       }
-    //     },
-    //     colorSecondary: {
-    //       backgroundColor: 'transparent',
-    //       color: '#FFFFFF',
-    //       '&:hover': {
-    //         backgroundColor: '#5151FF'
-    //       }
-    //     }
-    //   }
-    // },
-    // MuiSlider: {
-    //   styleOverrides: {
-    //     root: {
-    //       color: '#484848'
-    //     },
-    //     thumb: {
-    //       height: '24px',
-    //       width: '24px',
-    //       marginTop: '-10px',
-    //       boxSizing: 'border-box'
-    //     },
-    //     thumbColorPrimary: {
-    //       background: 'rgba(0, 0, 0, 0.8)',
-    //       border: '2px solid #A8A8FF'
-    //     }
-    //   }
-    // },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          '&:hover': {
-            backgroundColor: 'var(--dropdownMenuHoverBackground)'
-          },
-          '&.Mui-selected': {
-            backgroundColor: 'var(--dropdownMenuSelectedBackground)',
-            '&:hover': {
-              backgroundColor: 'var(--dropdownMenuSelectedBackground)'
-            }
-          }
-        }
-      }
-    },
-    // MuiSnackbar: {
-    //   styleOverrides: {
-    //     root: {
-    //       maxWidth: '80%',
-    //       minWidth: '40%',
-    //       width: 'auto',
-    //       left: '30%',
-    //       right: '30%',
-    //       userSelect: 'none',
-    //       borderRadius: '8px',
-    //       fontSize: 16,
-    //       backgroundColor: 'rgba(0,0,0,0.9)',
-    //       boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)',
-    //       padding: '20px',
-    //       boxSizing: 'border-box',
-    //       '@media (max-width: 768px)': {
-    //         maxWidth: '90%',
-    //         width: '90%',
-    //         left: '5%',
-    //         right: '5%'
-    //       },
-    //       MuiSvgIcon: {
-    //         root: {
-    //           height: '7em',
-    //           width: 'auto',
-    //           color: '#000000'
-    //         }
-    //       }
-    //     },
-    //     anchorOriginTopCenter: {
-    //       top: '10%'
-    //       // '@media (max-width: 768px)': {
-    //       //   top: '10%',
-    //       // },
-    //     },
-    //     anchorOriginBottomCenter: {
-    //       bottom: '60px',
-    //       left: '50%',
-    //       transform: 'translate(-50%, 20px)'
-    //     },
-    //     anchorOriginTopLeft: {
-    //       left: '0px',
-    //       top: '24px',
-    //       width: '52%',
-    //       maxWidth: '80%',
-    //       '@media (max-width: 768px)': {
-    //         width: '90%'
-    //       },
-    //       '@media (min-width: 600px)': {
-    //         left: '0px'
-    //       }
-    //     }
-    //   }
-    // },
-    // MuiSnackbarContent: {
-    //   styleOverrides: {
-    //     root: {
-    //       color: '#FFFFFF',
-    //       backgroundColor: 'rgba(0, 0, 0, 0.9)',
-    //       minWidth: '0px',
-    //       '@media (min-width: 600px)': {
-    //         minWidth: '0px'
-    //       }
-    //     }
-    //   }
-    // },
-    // MuiDrawer: {
-    //   styleOverrides: {
-    //     paper: {
-    //       padding: '20px',
-    //       backgroundColor: 'rgba(0,0,0,0.85)'
-    //     },
-    //
-    //     paperAnchorRight: {
-    //       width: '25%',
-    //       '@media (max-width: 1280px)': {
-    //         width: '33%'
-    //       },
-    //       '@media (max-width: 1024px)': {
-    //         width: '40%'
-    //       },
-    //       '@media (orientation: portrait)': {
-    //         width: '100vw'
-    //       }
-    //     }
-    //   }
-    // },
-    // MuiCardMedia: {
-    //   styleOverrides: {
-    //     media: {
-    //       '&:hover': {
-    //         backgroundColor: '#A8A8FF'
-    //       }
-    //     }
-    //   }
-    // },
-    // MuiList: {
-    //   styleOverrides: {
-    //     root: {
-    //       background: 'rgba(206,206,206,0.1)',
-    //       color: '#FFFFFF'
-    //     }
-    //   }
-    // },
-    MuiListItem: {
-      styleOverrides: {
-        root: {
-          '&:hover': {
-            backgroundColor: 'var(--dropdownMenuHoverBackground)'
-          },
-          '&.Mui-selected': {
-            backgroundColor: 'var(--dropdownMenuSelectedBackground)',
-            '&:hover': {
-              backgroundColor: 'var(--dropdownMenuSelectedBackground)'
-            }
-          }
-        }
-      }
-    },
-    // MuiListItemText: {
-    //   styleOverrides: {
-    //     root: {
-    //       background: 'rgba(0, 0, 0, .5)',
-    //       borderRadius: '5px',
-    //       padding: '5px 10px',
-    //       width: 'fit-content',
-    //       flex: 'inherit',
-    //       wordBreak: 'break-all'
-    //     }
-    //   }
-    // },
-    // MuiCardContent: {
-    //   styleOverrides: {
-    //     root: {
-    //       '&:last-child': {
-    //         paddingBottom: '0px',
-    //         paddingLeft: '0px',
-    //         paddingRight: '0px',
-    //         paddingTop: '0px'
-    //       }
-    //     }
-    //   }
-    // },
-    // MuiPaper: {
-    //   styleOverrides: {
-    //     root: {
-    //       backgroundColor: 'rgba(0,0,0,0.8)'
-    //     }
-    //   }
-    // },
-    // MuiInputBase: {
-    //   styleOverrides: {
-    //     input: {
-    //       color: '#FFFFFF'
-    //     }
-    //   }
-    // },
-    // MuiFormLabel: {
-    //   styleOverrides: {
-    //     root: {
-    //       color: '#FFFFFF'
-    //     }
-    //   }
-    // },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          width: '220px',
-          margin: '10px auto',
-          cursor: 'pointer',
-          fontSize: 16,
-          color: 'var(--textColor)'
-        },
-        //@ts-ignore
-        label: {
-          textTransform: 'capitalize'
-        },
-        outlined: {
-          backgroundColor: 'transparent',
-          borderColor: 'var(--buttonOutlined)',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            borderColor: 'var(--buttonOutlined)'
-          }
-        },
-        contained: {
-          backgroundColor: 'var(--buttonFilled)',
-
-          '&:hover': {
-            opacity: 0.8,
-            backgroundColor: 'var(--buttonFilled)'
-          }
-        },
-        outlinedPrimary: {
-          '&:hover': {
-            boxShadow: '0 0 10px var(--buttonOutlined)'
-          }
-        },
-        outlinedSecondary: {
-          '&:hover': {
-            boxShadow: '0 0 10px var(--buttonOutlined)'
-          }
-        }
-      }
-    }
-    // MuiSvgIcon: {
-    //   styleOverrides: {
-    //     colorPrimary: {
-    //       color: '#A8A8FF'
-    //     }
-    //   }
-    // },
-    // MuiFab: {
-    //   styleOverrides: {
-    //     root: {
-    //       height: '3em',
-    //       width: 'fit-content',
-    //       padding: '10px',
-    //       margin: '0px 5px',
-    //       display: 'flex',
-    //       alignItems: 'center',
-    //       textTransform: 'capitalize',
-    //       text: {
-    //         color: '#FFFFFF'
-    //       }
-    //     },
-    //     primary: {
-    //       backgroundColor: 'rgba(0,0,0,0.8)',
-    //       borderRadius: '8px'
-    //     }
-    //   }
-    // },
-    // MuiFormGroup: {
-    //   styleOverrides: {
-    //     root: {
-    //       display: 'flex',
-    //       flexWrap: 'wrap',
-    //       flexDirection: 'row'
-    //     }
-    //   }
-    // },
-    // MuiBadge: {
-    //   styleOverrides: {
-    //     // anchorOriginTopLeftRectangle: {
-    //     //   left: '6px'
-    //     // },
-    //     dot: {
-    //       height: '12px',
-    //       width: '12px',
-    //       borderRadius: '50%'
-    //     },
-    //     colorPrimary: {
-    //       backgroundColor: '#7AFF64'
-    //     }
-    //   }
-    // }
-  }
-})
-
-export { theme }
-export type Theme = typeof theme
-
-export function useTheme() {
-  return styledUseTheme() as Theme
-}
diff --git a/packages/client-core/src/user/components/UserMenu/index.module.scss b/packages/client-core/src/user/components/UserMenu/index.module.scss
index aff9957cd8..01a81ce60c 100755
--- a/packages/client-core/src/user/components/UserMenu/index.module.scss
+++ b/packages/client-core/src/user/components/UserMenu/index.module.scss
@@ -77,6 +77,8 @@
   display: flex;
   align-items: center;
   margin-top: 5px;
+  height: 'auto';
+  max-width: '100%'
 }
 
 .tutorialImage {
diff --git a/packages/client-core/src/user/components/UserMenu/menus/AvatarContextMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/AvatarContextMenu.tsx
index b6d9d7bf51..80d9784f1c 100755
--- a/packages/client-core/src/user/components/UserMenu/menus/AvatarContextMenu.tsx
+++ b/packages/client-core/src/user/components/UserMenu/menus/AvatarContextMenu.tsx
@@ -114,7 +114,10 @@ const AvatarContextMenu = ({ onBack }: Props): JSX.Element => {
       }}
     >
       {userId && (
-        <Box className={styles.menuContent} display={'flex'} flexDirection={'column'}>
+        <Box
+          className={styles.menuContent}
+          style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '10px' }}
+        >
           <Avatar imageSrc={userThumbnail} size={150} sx={{ margin: '0 auto' }} />
 
           <Text variant="h6" align="center" mt={2} mb={1}>
diff --git a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx
index f1e547f596..d6c17b93c9 100644
--- a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx
+++ b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx
@@ -111,7 +111,7 @@ const AvatarMenu = () => {
       open
       showBackButton
       actions={
-        <Box display="flex" width="100%">
+        <Box display="flex" width="100%" justifyContent="center">
           {avatarLoading.value ? (
             <LoadingCircle />
           ) : (
diff --git a/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.module.scss b/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.module.scss
index 30f07c0069..46fadfcfc4 100644
--- a/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.module.scss
+++ b/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.module.scss
@@ -59,7 +59,8 @@
         top: 18px;
         right: 3px;
         transform: rotate(-45deg);
-
+        margin:0;
+        
         @media (max-width: 360px) {
           top: 13px;
         }
diff --git a/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.tsx
index e80794769b..2e8b92bf5e 100644
--- a/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.tsx
+++ b/packages/client-core/src/user/components/UserMenu/menus/EmoteMenu.tsx
@@ -58,61 +58,151 @@ export const useEmoteMenuHooks = () => {
 
   let [items, setItems] = useState([
     {
-      body: <img src="/static/Wave.svg" alt="Wave" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Wave.svg"
+          alt="Wave"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.wave)
       }
     },
     {
-      body: <img src="/static/clap1.svg" alt="Clap" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/clap1.svg"
+          alt="Clap"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.clap)
       }
     },
     {
-      body: <img src="/static/Dance1.svg" alt="Dance 1" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Dance1.svg"
+          alt="Dance 1"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.dance1)
       }
     },
     {
-      body: <img src="/static/Dance2.svg" alt="Dance 2" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Dance2.svg"
+          alt="Dance 2"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.dance2)
       }
     },
     {
-      body: <img src="/static/Dance3.svg" alt="Dance 3" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Dance3.svg"
+          alt="Dance 3"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.dance3)
       }
     },
     {
-      body: <img src="/static/Dance4.svg" alt="Dance 4" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Dance4.svg"
+          alt="Dance 4"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.dance4)
       }
     },
     {
-      body: <img src="/static/Kiss.svg" alt="Kiss" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Kiss.svg"
+          alt="Kiss"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.kiss)
       }
     },
     {
-      body: <img src="/static/Cry.svg" alt="Cry" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Cry.svg"
+          alt="Cry"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.cry)
       }
     },
     {
-      body: <img src="/static/Laugh.svg" alt="Laugh" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Laugh.svg"
+          alt="Laugh"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.laugh)
       }
     },
     {
-      body: <img src="/static/Defeat.svg" alt="Defeat" />,
+      body: (
+        <img
+          style={{
+            height: 'auto',
+            maxWidth: '100%'
+          }}
+          src="/static/Defeat.svg"
+          alt="Defeat"
+        />
+      ),
       containerProps: {
         onClick: () => runAnimation(animationStates.defeat)
       }
diff --git a/packages/client-core/src/user/components/UserMenu/menus/MessagesMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/MessagesMenu.tsx
index 64ff807958..cff434d9ba 100755
--- a/packages/client-core/src/user/components/UserMenu/menus/MessagesMenu.tsx
+++ b/packages/client-core/src/user/components/UserMenu/menus/MessagesMenu.tsx
@@ -80,14 +80,15 @@ const MessagesMenu = (props: { channelID: ChannelID; name: string }): JSX.Elemen
               border: '2px solid #E1E1E1',
               color: 'black',
               backgroundColor: '#E1E1E1',
-              padding: '3px'
+              padding: '3px',
+              fontFamily: 'var(--lato)'
             }}
           >
             {props.message.text}
           </p>
         </div>
         <img
-          style={{ borderRadius: '38px', width: '36px', height: '36px', objectFit: 'cover' }}
+          style={{ maxWidth: '100%', borderRadius: '38px', width: '36px', height: '36px', objectFit: 'cover' }}
           alt=""
           src={userThumbnail}
         />
@@ -97,12 +98,13 @@ const MessagesMenu = (props: { channelID: ChannelID; name: string }): JSX.Elemen
 
   const OtherMessage = (props: { message: (typeof messages)[0] }) => {
     const systemMessage = !props.message.sender
+
     const userThumbnail = useUserAvatarThumbnail(props.message.sender?.id)
     return (
       <div style={{ display: 'flex', flexWrap: 'wrap', marginLeft: systemMessage ? 'auto' : '', marginRight: 'auto' }}>
         {!systemMessage && (
           <img
-            style={{ borderRadius: '38px', width: '36px', height: '36px', objectFit: 'cover' }}
+            style={{ maxWidth: '100%', borderRadius: '38px', width: '36px', height: '36px', objectFit: 'cover' }}
             alt=""
             src={userThumbnail}
           />
@@ -114,7 +116,8 @@ const MessagesMenu = (props: { channelID: ChannelID; name: string }): JSX.Elemen
               border: systemMessage ? '' : '2px solid #F8F8F8',
               color: 'black',
               backgroundColor: systemMessage ? '' : '#F8F8F8',
-              padding: '3px'
+              padding: '3px',
+              fontFamily: 'var(--lato)'
             }}
           >
             {props.message.text}
@@ -161,7 +164,7 @@ const MessagesMenu = (props: { channelID: ChannelID; name: string }): JSX.Elemen
           endIcon={<Icon type="Send" />}
           startIcon={
             <img
-              style={{ borderRadius: '38px', width: '36px', height: '36px', objectFit: 'cover' }}
+              style={{ maxWidth: '100%', borderRadius: '38px', width: '36px', height: '36px', objectFit: 'cover' }}
               alt=""
               src={userThumbnail}
             />
diff --git a/packages/client-core/src/user/components/UserMenu/menus/ProfileMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/ProfileMenu.tsx
index a3f8c40f92..da2153bc7e 100755
--- a/packages/client-core/src/user/components/UserMenu/menus/ProfileMenu.tsx
+++ b/packages/client-core/src/user/components/UserMenu/menus/ProfileMenu.tsx
@@ -673,7 +673,13 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
             )}
           </>
         )}
-        <div className={styles.center}>
+        <div
+          className={styles.center}
+          style={{
+            fontFamily: 'var(--lato)',
+            fontSize: '12px'
+          }}
+        >
           <a href={clientSetting?.privacyPolicy}>{t('user:usermenu.profile.privacyPolicy')}</a>
         </div>
       </Box>
diff --git a/packages/client-core/src/user/components/UserMenu/menus/ReadyPlayerMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/ReadyPlayerMenu.tsx
index 31bc2aefc7..77ce56579e 100755
--- a/packages/client-core/src/user/components/UserMenu/menus/ReadyPlayerMenu.tsx
+++ b/packages/client-core/src/user/components/UserMenu/menus/ReadyPlayerMenu.tsx
@@ -171,7 +171,9 @@ const ReadyPlayerMenu = () => {
               margin: -24,
               width: '100%',
               height: '100%',
-              zIndex: 2
+              zIndex: 2,
+              maxWidth: '100%',
+              border: 0
             }}
             src={config.client.readyPlayerMeUrl}
           />
diff --git a/packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx
index b0cf3c2557..520e5aa207 100755
--- a/packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx
+++ b/packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx
@@ -35,8 +35,6 @@ import Text from '@etherealengine/client-core/src/common/components/Text'
 import { AuthService, AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
 import { defaultThemeModes, defaultThemeSettings } from '@etherealengine/common/src/constants/DefaultThemeSettings'
 import capitalizeFirstLetter from '@etherealengine/common/src/utils/capitalizeFirstLetter'
-import InputGroup from '@etherealengine/editor/src/components/inputs/InputGroup'
-import SelectInput from '@etherealengine/editor/src/components/inputs/SelectInput'
 import { AudioState } from '@etherealengine/engine/src/audio/AudioState'
 import {
   AvatarAxesControlScheme,
@@ -185,6 +183,13 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
     }
   })
 
+  const shadowMapResolutionSchemesMenu: InputMenuItem[] = ShadowMapResolutionOptions.map((el) => {
+    return {
+      label: el.label,
+      value: String(el.value)
+    }
+  })
+
   const handleQualityLevelChange = (value) => {
     rendererState.qualityLevel.set(value)
     rendererState.automatic.set(false)
@@ -474,17 +479,6 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
               onChange={handleQualityLevelChange}
             />
 
-            <InputGroup
-              name="Shadow Map Resolution"
-              label={t('editor:properties.directionalLight.lbl-shadowmapResolution')}
-            >
-              <SelectInput
-                options={ShadowMapResolutionOptions}
-                value={rendererState.shadowMapResolution.value}
-                onChange={(resolution: number) => rendererState.shadowMapResolution.set(resolution)}
-              />
-            </InputGroup>
-
             <Grid container spacing={{ xs: 0, sm: 2 }}>
               <Grid item xs={12} sm={4}>
                 <InputCheck
@@ -510,6 +504,16 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
                 />
               </Grid>
             </Grid>
+            {rendererState.useShadows.value && (
+              <InputSelect
+                label={t('editor:properties.directionalLight.lbl-shadowmapResolution')}
+                value={rendererState.shadowMapResolution.value}
+                menu={shadowMapResolutionSchemesMenu}
+                onChange={(event) => {
+                  ;(resolution: number) => rendererState.shadowMapResolution.set(Number(resolution))
+                }}
+              />
+            )}
           </>
         )}
       </Box>
diff --git a/packages/client-core/src/util/GlobalStyle.css b/packages/client-core/src/util/GlobalStyle.css
new file mode 100644
index 0000000000..5e64f9d06e
--- /dev/null
+++ b/packages/client-core/src/util/GlobalStyle.css
@@ -0,0 +1,32 @@
+  /*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
+  html {
+    box-sizing: border-box;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+  
+  /** User Text Highlight Selection **/
+  ::selection {
+    color: var(--textColor);
+    background-color: var(--dropdownMenuHoverBackground);
+  }
+
+  /*
+  .sentry-error-embed {
+    .form-field {
+      margin-top: 20px;
+    }
+
+    .form-field:not(:last-child) {
+      display: none;
+    }
+  }*/
\ No newline at end of file
diff --git a/packages/client-core/src/util/GlobalStyle.tsx b/packages/client-core/src/util/GlobalStyle.tsx
deleted file mode 100755
index 2bd2a1fc68..0000000000
--- a/packages/client-core/src/util/GlobalStyle.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/*
-CPAL-1.0 License
-
-The contents of this file are subject to the Common Public Attribution License
-Version 1.0. (the "License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
-The License is based on the Mozilla Public License Version 1.1, but Sections 14
-and 15 have been added to cover use of software over a computer network and 
-provide for limited attribution for the Original Developer. In addition, 
-Exhibit A has been modified to be consistent with Exhibit B.
-
-Software distributed under the License is distributed on an "AS IS" basis,
-WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
-specific language governing rights and limitations under the License.
-
-The Original Code is Ethereal Engine.
-
-The Original Developer is the Initial Developer. The Initial Developer of the
-Original Code is the Ethereal Engine team.
-
-All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
-Ethereal Engine. All Rights Reserved.
-*/
-
-import { createGlobalStyle } from 'styled-components'
-
-/**
- * GlobalStyle component used to provide common styles all over application.
- *
- * @type {styled component}
- */
-const GlobalStyle = createGlobalStyle<{ theme: any }>`
-  /*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
-  html,
-  body,
-  p,
-  ol,
-  ul,
-  li,
-  dl,
-  dt,
-  dd,
-  blockquote,
-  figure,
-  fieldset,
-  legend,
-  textarea,
-  pre,
-  iframe,
-  hr,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-    padding: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: 100%;
-    font-weight: normal;
-  }
-
-  ul {
-    list-style: none;
-  }
-
-  button,
-  input,
-  select,
-  textarea {
-    margin: 0;
-  }
-
-  html {
-    box-sizing: border-box;
-  }
-
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-
-  img,
-  embed,
-  iframe,
-  object,
-  video {
-    height: auto;
-    max-width: 100%;
-  }
-
-  audio {
-    max-width: 100%;
-  }
-
-  iframe {
-    border: 0;
-  }
-
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-
-  td,
-  th {
-    padding: 0;
-    text-align: left;
-  }
-
-  /* scrollbar-width is not inherited so apply to all elements. */
-  * {
-    scrollbar-width: thin;
-  }
-
-  ::selection {
-    color: var(--textColor);
-    background-color: var(--dropdownMenuHoverBackground);
-  }
-
-  a {
-    color: var(--textColor);
-
-    &:hover {
-      color: var(--blueHover);
-    }
-
-    &:active {
-      color: var(--bluePressed);
-    }
-  }
-
-  html, body {
-    width: 100%;
-    height: 100%;
-  }
-
-  #app {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-  }
-
-  main {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-
-  body {
-    font-family: var(--lato);
-    font-size: 12px;
-    color: var(--textColor);
-    background-color: var(--background);
-    scrollbar-color: #282c31 #5d646c;
-  }
-
-  .sentry-error-embed {
-    .form-field {
-      margin-top: 20px;
-    }
-
-    .form-field:not(:last-child) {
-      display: none;
-    }
-  }
-`
-export default GlobalStyle
diff --git a/packages/client-core/tsconfig.json b/packages/client-core/tsconfig.json
index 55b7422646..c5693ee9df 100755
--- a/packages/client-core/tsconfig.json
+++ b/packages/client-core/tsconfig.json
@@ -6,9 +6,6 @@
       "dom",
       "dom.iterable"
     ],
-    "paths": {
-      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
-    },
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
diff --git a/packages/client/defaultDeps.json b/packages/client/defaultDeps.json
deleted file mode 100644
index b1b6a295e2..0000000000
--- a/packages/client/defaultDeps.json
+++ /dev/null
@@ -1,241 +0,0 @@
-{
-  "dependencies": [
-    "@feathersjs/client",
-    "@hookstate/core",
-    "@iconify/react",
-    "@mui/icons-material",
-    "@mui/icons-material/AccountCircle",
-    "@mui/icons-material/AccountTree",
-    "@mui/icons-material/Add",
-    "@mui/icons-material/Adjust",
-    "@mui/icons-material/Analytics",
-    "@mui/icons-material/ArrowBack",
-    "@mui/icons-material/ArrowDropDown",
-    "@mui/icons-material/ArrowLeft",
-    "@mui/icons-material/ArrowRight",
-    "@mui/icons-material/Attractions",
-    "@mui/icons-material/Autorenew",
-    "@mui/icons-material/Bolt",
-    "@mui/icons-material/Brightness7",
-    "@mui/icons-material/Cached",
-    "@mui/icons-material/CameraAlt",
-    "@mui/icons-material/Cancel",
-    "@mui/icons-material/ChatBubble",
-    "@mui/icons-material/Check",
-    "@mui/icons-material/Close",
-    "@mui/icons-material/Cloud",
-    "@mui/icons-material/CloudUpload",
-    "@mui/icons-material/ContentCopy",
-    "@mui/icons-material/Delete",
-    "@mui/icons-material/Description",
-    "@mui/icons-material/DirectionsRun",
-    "@mui/icons-material/Email",
-    "@mui/icons-material/EmojiPeople",
-    "@mui/icons-material/ExpandLess",
-    "@mui/icons-material/ExpandMore",
-    "@mui/icons-material/Extension",
-    "@mui/icons-material/Face",
-    "@mui/icons-material/Facebook",
-    "@mui/icons-material/FirstPage",
-    "@mui/icons-material/Folder",
-    "@mui/icons-material/GitHub",
-    "@mui/icons-material/Grain",
-    "@mui/icons-material/GridOn",
-    "@mui/icons-material/GridView",
-    "@mui/icons-material/Group",
-    "@mui/icons-material/Height",
-    "@mui/icons-material/HelpOutline",
-    "@mui/icons-material/Inventory2",
-    "@mui/icons-material/KeyboardArrowLeft",
-    "@mui/icons-material/KeyboardArrowRight",
-    "@mui/icons-material/Language",
-    "@mui/icons-material/LastPage",
-    "@mui/icons-material/Lightbulb",
-    "@mui/icons-material/Link",
-    "@mui/icons-material/LinkOff",
-    "@mui/icons-material/LinkedIn",
-    "@mui/icons-material/LocationCity",
-    "@mui/icons-material/Lock",
-    "@mui/icons-material/LockOutlined",
-    "@mui/icons-material/Looks",
-    "@mui/icons-material/MailOutline",
-    "@mui/icons-material/MeetingRoom",
-    "@mui/icons-material/Menu",
-    "@mui/icons-material/MoreVert",
-    "@mui/icons-material/MultipleStop",
-    "@mui/icons-material/OpenWith",
-    "@mui/icons-material/PanTool",
-    "@mui/icons-material/Pause",
-    "@mui/icons-material/PermIdentity",
-    "@mui/icons-material/Person",
-    "@mui/icons-material/PhotoSizeSelectActual",
-    "@mui/icons-material/PlayArrow",
-    "@mui/icons-material/Public",
-    "@mui/icons-material/RemoveFromQueue",
-    "@mui/icons-material/Search",
-    "@mui/icons-material/Settings",
-    "@mui/icons-material/SportsEsports",
-    "@mui/icons-material/SportsGolf",
-    "@mui/icons-material/Square",
-    "@mui/icons-material/SsidChart",
-    "@mui/icons-material/Streetview",
-    "@mui/icons-material/SupervisedUserCircle",
-    "@mui/icons-material/Sync",
-    "@mui/icons-material/Tune",
-    "@mui/icons-material/Twitter",
-    "@mui/icons-material/VerifiedUser",
-    "@mui/icons-material/Videocam",
-    "@mui/icons-material/ViewCompact",
-    "@mui/icons-material/ViewInAr",
-    "@mui/icons-material/ViewModule",
-    "@mui/icons-material/VolumeUp",
-    "@mui/icons-material/Water",
-    "@mui/icons-material/WbSunnyOutlined",
-    "@mui/material",
-    "@mui/material/Accordion",
-    "@mui/material/AccordionDetails",
-    "@mui/material/AccordionSummary",
-    "@mui/material/Alert",
-    "@mui/material/AlertTitle",
-    "@mui/material/AppBar",
-    "@mui/material/Autocomplete",
-    "@mui/material/Avatar",
-    "@mui/material/Badge",
-    "@mui/material/Box",
-    "@mui/material/Button",
-    "@mui/material/Card",
-    "@mui/material/CardContent",
-    "@mui/material/CardMedia",
-    "@mui/material/Checkbox",
-    "@mui/material/Chip",
-    "@mui/material/CircularProgress",
-    "@mui/material/ClickAwayListener",
-    "@mui/material/Collapse",
-    "@mui/material/Container",
-    "@mui/material/CssBaseline",
-    "@mui/material/Dialog",
-    "@mui/material/DialogActions",
-    "@mui/material/DialogContent",
-    "@mui/material/DialogContentText",
-    "@mui/material/DialogTitle",
-    "@mui/material/Divider",
-    "@mui/material/Drawer",
-    "@mui/material/Fab",
-    "@mui/material/Fade",
-    "@mui/material/FormControl",
-    "@mui/material/FormControlLabel",
-    "@mui/material/FormGroup",
-    "@mui/material/FormHelperText",
-    "@mui/material/Grid",
-    "@mui/material/Grow",
-    "@mui/material/IconButton",
-    "@mui/material/InputAdornment",
-    "@mui/material/InputBase",
-    "@mui/material/InputLabel",
-    "@mui/material/List",
-    "@mui/material/ListItem",
-    "@mui/material/ListItemAvatar",
-    "@mui/material/ListItemIcon",
-    "@mui/material/ListItemSecondaryAction",
-    "@mui/material/ListItemText",
-    "@mui/material/ListSubheader",
-    "@mui/material/MenuItem",
-    "@mui/material/MenuList",
-    "@mui/material/Modal",
-    "@mui/material/Paper",
-    "@mui/material/Popover",
-    "@mui/material/Popper",
-    "@mui/material/Radio",
-    "@mui/material/RadioGroup",
-    "@mui/material/Select",
-    "@mui/material/Skeleton",
-    "@mui/material/Slider",
-    "@mui/material/Snackbar",
-    "@mui/material/SvgIcon",
-    "@mui/material/Switch",
-    "@mui/material/Tab",
-    "@mui/material/Table",
-    "@mui/material/TableBody",
-    "@mui/material/TableCell",
-    "@mui/material/TableContainer",
-    "@mui/material/TableFooter",
-    "@mui/material/TableHead",
-    "@mui/material/TablePagination",
-    "@mui/material/TableRow",
-    "@mui/material/TableSortLabel",
-    "@mui/material/Tabs",
-    "@mui/material/TextField",
-    "@mui/material/ToggleButton",
-    "@mui/material/ToggleButtonGroup",
-    "@mui/material/Toolbar",
-    "@mui/material/Tooltip",
-    "@mui/material/Typography",
-    "@mui/material/colors",
-    "@mui/material/styles",
-    "@mui/styles/createStyles",
-    "@mui/styles/makeStyles",
-    "@tweenjs/tween.js",
-    "axios",
-    "bitecs",
-    "classnames",
-    "clsx",
-    "comlink",
-    "credential-handler-polyfill",
-    "detect-browser",
-    "draco3dgltf",
-    "emailjs-com",
-    "events",
-    "hls.js",
-    "i18next",
-    "i18next-browser-languagedetector",
-    "idb-keyval",
-    "lodash",
-    "material-ui-confirm",
-    "mediasoup-client",
-    "mousetrap",
-    "postprocessing",
-    "prop-types",
-    "querystring",
-    "notistack",
-    "rc-dock",
-    "rc-slider/es/Slider",
-    "react",
-    "react-apexcharts",
-    "react-color/lib/Sketch",
-    "react-dnd",
-    "react-dnd-html5-backend",
-    "react-dom",
-    "react-full-screen",
-    "react-ga4",
-    "react-hot-keys",
-    "react-i18next",
-    "react-json-tree",
-    "react-material-ui-form-validator",
-    "react-router",
-    "react-router-dom",
-    "react-select",
-    "react-select/creatable",
-    "react-virtualized-auto-sizer",
-    "react-window",
-    "semantic-ui-react",
-    "simplex-noise",
-    "styled-components",
-    "three",
-    "three-mesh-bvh",
-    "ts-matches",
-    "uuid",
-    "web-worker",
-    "yup",
-    "@mui/base/AutocompleteUnstyled",
-    "@mui/icons-material/CleaningServices",
-    "@mui/icons-material/ErrorOutline",
-    "@mui/icons-material/Refresh",
-    "@mui/icons-material/SelectAll",
-    "@mui/icons-material/ShoppingCart",
-    "@mui/icons-material/SquareFoot",
-    "@mui/icons-material/Timeline",
-    "@mui/material/Menu",
-    "@pixiv/three-vrm",
-    "image-palette-core"
-  ]
-}
\ No newline at end of file
diff --git a/packages/client/package.json b/packages/client/package.json
index f15ce02cc5..a04c5a7340 100755
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -41,7 +41,6 @@
     "@hookstate/core": "4.0.0-rc21",
     "@mui/icons-material": "5.11.11",
     "@mui/material": "5.11.13",
-    "@mui/styled-engine-sc": "5.11.11",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@swc/core": "1.3.41",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
diff --git a/packages/client/src/pages/404.tsx b/packages/client/src/pages/404.tsx
index 9d1f29ca31..cd6c8d16c6 100755
--- a/packages/client/src/pages/404.tsx
+++ b/packages/client/src/pages/404.tsx
@@ -36,7 +36,7 @@ export const Custom404 = (): any => {
   })
   return (
     <Fragment>
-      <h1>{t('404.msg')}</h1>
+      <h1 style={{ fontSize: '100%', fontWeight: 'normal' }}>{t('404.msg')}</h1>
     </Fragment>
   )
 }
diff --git a/packages/client/src/pages/503.tsx b/packages/client/src/pages/503.tsx
index 30fd60c689..09c4644ad2 100755
--- a/packages/client/src/pages/503.tsx
+++ b/packages/client/src/pages/503.tsx
@@ -31,7 +31,13 @@ export const Custom503 = (): any => {
   return (
     <>
       <h1 style={{ color: 'black' }}>{t('503.msg')}</h1>
-      <img src="/static/etherealengine.png" />
+      <img
+        style={{
+          height: 'auto',
+          maxWidth: '100%'
+        }}
+        src="/static/etherealengine.png"
+      />
     </>
   )
 }
diff --git a/packages/client/src/pages/_app.tsx b/packages/client/src/pages/_app.tsx
index c1066fff97..910460891a 100755
--- a/packages/client/src/pages/_app.tsx
+++ b/packages/client/src/pages/_app.tsx
@@ -33,14 +33,13 @@ import { NotificationState } from '@etherealengine/client-core/src/common/servic
 import { ProjectService, ProjectState } from '@etherealengine/client-core/src/common/services/ProjectService'
 import Debug from '@etherealengine/client-core/src/components/Debug'
 import InviteToast from '@etherealengine/client-core/src/components/InviteToast'
-import { theme } from '@etherealengine/client-core/src/theme'
 import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
-import GlobalStyle from '@etherealengine/client-core/src/util/GlobalStyle'
+import '@etherealengine/client-core/src/util/GlobalStyle.css'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { loadWebappInjection } from '@etherealengine/projects/loadWebappInjection'
 
-import { StyledEngineProvider, Theme, ThemeProvider } from '@mui/material/styles'
+import { StyledEngineProvider, Theme } from '@mui/material/styles'
 
 import { projectsPath } from '@etherealengine/engine/src/schemas/projects/projects.schema'
 import RouterComp from '../route/public'
@@ -104,24 +103,25 @@ const AppPage = ({ route }: { route: string }) => {
     <>
       <ThemeContextProvider>
         <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <SnackbarProvider
-              ref={notistackRef as any}
-              maxSnack={7}
-              anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-              action={defaultAction}
-            >
-              <GlobalStyle />
-              <div style={{ pointerEvents: 'auto' }}>
-                <InviteToast />
-                <Debug />
-              </div>
-              <RouterComp route={route} />
-              {projectComponents.map((Component, i) => (
-                <Component key={i} />
-              ))}
-            </SnackbarProvider>
-          </ThemeProvider>
+          <SnackbarProvider
+            ref={notistackRef as any}
+            maxSnack={7}
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            action={defaultAction}
+            style={{
+              fontFamily: 'var(--lato)',
+              fontSize: '12px'
+            }}
+          >
+            <div style={{ pointerEvents: 'auto' }}>
+              <InviteToast />
+              <Debug />
+            </div>
+            <RouterComp route={route} />
+            {projectComponents.map((Component, i) => (
+              <Component key={i} />
+            ))}
+          </SnackbarProvider>
         </StyledEngineProvider>
       </ThemeContextProvider>
     </>
diff --git a/packages/client/src/pages/index.tsx b/packages/client/src/pages/index.tsx
index e3327f10f6..016fc77eab 100755
--- a/packages/client/src/pages/index.tsx
+++ b/packages/client/src/pages/index.tsx
@@ -76,7 +76,17 @@ export const HomePage = (): any => {
         </MetaTags>
         <div className="main-background">
           <div className="img-container">
-            {clientSetting?.appBackground && <img src={clientSetting.appBackground} alt="" crossOrigin="anonymous" />}
+            {clientSetting?.appBackground && (
+              <img
+                style={{
+                  height: 'auto',
+                  maxWidth: '100%'
+                }}
+                src={clientSetting.appBackground}
+                alt=""
+                crossOrigin="anonymous"
+              />
+            )}
           </div>
         </div>
         <nav className="navbar">
@@ -126,7 +136,14 @@ export const HomePage = (): any => {
             {clientSetting?.appSocialLinks?.length > 0 &&
               clientSetting.appSocialLinks.map((social, index) => (
                 <a key={index} target="_blank" className="icon" href={social.link}>
-                  <img src={social.icon} alt="" />
+                  <img
+                    style={{
+                      height: 'auto',
+                      maxWidth: '100%'
+                    }}
+                    src={social.icon}
+                    alt=""
+                  />
                 </a>
               ))}
           </div>
diff --git a/packages/client/src/pages/styles.scss b/packages/client/src/pages/styles.scss
index 39812efeac..63c825bc21 100755
--- a/packages/client/src/pages/styles.scss
+++ b/packages/client/src/pages/styles.scss
@@ -175,10 +175,11 @@
 ::selection {
   /* Code for Firefox */
   background: #000;
+  
 }
 
 ::-webkit-scrollbar {
-  width: auto;
+  width: .5rem;
 }
 
 ::-webkit-scrollbar-track {
@@ -488,3 +489,9 @@ vite-error-overlay {
     height: 100%;
   }
 }
+
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index c564f51bfb..55f6c3c2e5 100755
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -318,8 +318,7 @@ export default defineConfig(async () => {
     ].filter(Boolean),
     resolve: {
       alias: {
-        'react-json-tree': 'react-json-tree/lib/umd/react-json-tree',
-        '@mui/styled-engine': '@mui/styled-engine-sc/'
+        'react-json-tree': 'react-json-tree/lib/umd/react-json-tree'
       }
     },
     build: {
diff --git a/packages/editor/package.json b/packages/editor/package.json
index bef54985fd..f8f28617f9 100755
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -59,7 +59,6 @@
     "react-virtualized-auto-sizer": "1.0.7",
     "react-window": "1.8.8",
     "reactflow": "^11.6.1",
-    "styled-components": "5.3.9",
     "typescript": "5.0.2",
     "use-http": "1.0.27",
     "uuid": "9.0.0"
@@ -70,7 +69,6 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/react-router-dom": "5.3.3",
-    "@types/styled-components": "5.1.26",
     "@types/three": "0.157.0",
     "@types/uuid": "^9.0.1",
     "mocha": "10.2.0",
diff --git a/packages/editor/src/components/EditorContainer.css b/packages/editor/src/components/EditorContainer.css
index 2d1fdf2790..a3a8f6d7ab 100755
--- a/packages/editor/src/components/EditorContainer.css
+++ b/packages/editor/src/components/EditorContainer.css
@@ -1,7 +1,21 @@
+/* this is basically style for the editor page*/
+/* we can drill down furthur if needed*/
+
+
 .dock-panel {
   background: transparent;
   pointer-events: auto;
   border: none;
+  color: var(--textColor); 
+  scrollbar-width: none;  /*firefox */
+  -ms-overflow-style: none; /*edge*/
+  font-family: var(--lato);
+  font-size: 12px;
+  background-color: var(--background);
+  ::-webkit-scrollbar{/* Hide scrollbar for Chrome, Safari and Opera */
+    display: none;
+  }
+  
 }
 
 .dock-panel:first-child {
diff --git a/packages/editor/src/components/EditorContainer.tsx b/packages/editor/src/components/EditorContainer.tsx
index 0a9d95a1d8..bc1ae914bc 100755
--- a/packages/editor/src/components/EditorContainer.tsx
+++ b/packages/editor/src/components/EditorContainer.tsx
@@ -91,7 +91,7 @@ const logger = multiLogger.child({ component: 'editor:EditorContainer' })
 /**
  *component used as dock container.
  */
-export const DockContainer = ({ children, id = 'dock', dividerAlpha = 0 }) => {
+export const DockContainer = ({ children, id = 'editor-dock', dividerAlpha = 0 }) => {
   const dockContainerStyles = {
     '--dividerAlpha': dividerAlpha
   }
diff --git a/packages/editor/src/components/assets/AssetDropZone.tsx b/packages/editor/src/components/assets/AssetDropZone.tsx
index 424488df0c..34c14de6b7 100755
--- a/packages/editor/src/components/assets/AssetDropZone.tsx
+++ b/packages/editor/src/components/assets/AssetDropZone.tsx
@@ -52,7 +52,8 @@ const dropZoneBackgroundStyle = {
 
 const h3Style = {
   fontSize: '1.5em',
-  marginTop: '12px'
+  marginTop: '12px',
+  fontWeight: 'normal'
 }
 
 export function AssetDropZone() {
diff --git a/packages/editor/src/components/assets/AssetPreviewPanels/ImagePreviewPanel.tsx b/packages/editor/src/components/assets/AssetPreviewPanels/ImagePreviewPanel.tsx
index 6e3445dc96..964c8eb67c 100644
--- a/packages/editor/src/components/assets/AssetPreviewPanels/ImagePreviewPanel.tsx
+++ b/packages/editor/src/components/assets/AssetPreviewPanels/ImagePreviewPanel.tsx
@@ -29,7 +29,9 @@ const imageStyles = {
   display: 'block',
   marginLeft: 'auto',
   marginRight: 'auto',
-  maxHeight: '100%'
+  maxHeight: '100%',
+  height: 'auto',
+  maxWidth: '100%'
 }
 
 /**
diff --git a/packages/editor/src/components/assets/AssetPreviewPanels/VideoPreviewPanel.tsx b/packages/editor/src/components/assets/AssetPreviewPanels/VideoPreviewPanel.tsx
index 5c15b8b2ea..69739b8b47 100644
--- a/packages/editor/src/components/assets/AssetPreviewPanels/VideoPreviewPanel.tsx
+++ b/packages/editor/src/components/assets/AssetPreviewPanels/VideoPreviewPanel.tsx
@@ -29,7 +29,8 @@ const videoStyles = {
   display: 'block',
   marginLeft: 'auto',
   marginRight: 'auto',
-  maxWidth: '500px'
+  maxWidth: '500px',
+  height: 'auto'
 }
 
 /**
diff --git a/packages/editor/src/components/assets/ScenesPanel.tsx b/packages/editor/src/components/assets/ScenesPanel.tsx
index f8a99a1385..e3c77de59b 100644
--- a/packages/editor/src/components/assets/ScenesPanel.tsx
+++ b/packages/editor/src/components/assets/ScenesPanel.tsx
@@ -187,7 +187,12 @@ export default function ScenesPanel({ loadScene, newScene }) {
               <div className={styles.sceneContainer} key={scene.name}>
                 <a onClick={(e) => onClickExisting(e, scene)}>
                   <div className={styles.thumbnailContainer}>
-                    <img src={thumbnails.get(scene.name)} alt="" crossOrigin="anonymous" />
+                    <img
+                      style={{ height: 'auto', maxWidth: '100%' }}
+                      src={thumbnails.get(scene.name)}
+                      alt=""
+                      crossOrigin="anonymous"
+                    />
                   </div>
                   <div className={styles.detailBlock}>
                     {activeScene === scene && isRenaming ? (
diff --git a/packages/editor/src/components/controlText/styles.module.scss b/packages/editor/src/components/controlText/styles.module.scss
index d7f18f24c6..f00145dfd8 100644
--- a/packages/editor/src/components/controlText/styles.module.scss
+++ b/packages/editor/src/components/controlText/styles.module.scss
@@ -9,4 +9,7 @@
   width: 100vw;
   z-index: 1000;
   text-align: center;
+  font-family: var(--lato);
+  font-size: 12px;
+  background-color: var(--background);
 }
diff --git a/packages/editor/src/components/dialogs/Dialog.tsx b/packages/editor/src/components/dialogs/Dialog.tsx
index c2d78b7584..03e790c72e 100755
--- a/packages/editor/src/components/dialogs/Dialog.tsx
+++ b/packages/editor/src/components/dialogs/Dialog.tsx
@@ -31,7 +31,7 @@ const dialogContainerStyles = {
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '4px',
-  backgroundColor: '#282c31',
+  backgroundColor: 'var(--dockBackground)',
   maxWidth: '800px',
   minWidth: '250px',
   minHeight: '150px',
@@ -59,18 +59,22 @@ const dialogContentStyles = {
   flexDirection: 'row',
   overflow: 'hidden',
   padding: '8px',
-  minHeight: '100px'
+  minHeight: '100px',
+  fontFamily: 'var(--lato)',
+  fontSize: '12px',
+  backgroundColor: 'var(--background)'
 }
 
 const dialogBottomNavStyles = {
   display: 'flex',
+
   padding: '8px',
-  margin: 'auto',
   marginBottom: '10px'
 }
 
 const buttonStyles = {
-  minWidth: '84px'
+  minWidth: '75px',
+  margin: '10px'
 }
 
 const DialogForm = ({ tag, onSubmit, children }) => {
diff --git a/packages/editor/src/components/element/ElementList.tsx b/packages/editor/src/components/element/ElementList.tsx
index 0d62ffc92d..cf3ba5aba4 100644
--- a/packages/editor/src/components/element/ElementList.tsx
+++ b/packages/editor/src/components/element/ElementList.tsx
@@ -190,12 +190,13 @@ export function ElementList() {
     setAnchorPosition(undefined)
   }
 
-  const searchBarState = useState('')
+  const searchBarState = useState<string>('')
 
   const validElements = useState(ComponentShelfCategories)
 
   useEffect(() => {
     const result: Record<string, Component[]> = {}
+    console.log('searchBarState', searchBarState, searchBarState.value)
     if (searchBarState.value === '') {
       validElements.set(ComponentShelfCategories)
     } else {
diff --git a/packages/editor/src/components/element/styles.module.scss b/packages/editor/src/components/element/styles.module.scss
index c5f1fda1f4..3a5312cff6 100644
--- a/packages/editor/src/components/element/styles.module.scss
+++ b/packages/editor/src/components/element/styles.module.scss
@@ -14,6 +14,12 @@
   background: var(--dockBackground);
   padding: 5px;
   border-radius: 5px;
+  scrollbar-width: none;  
+  
+  &::-webkit-scrollbar{/* Hide scrollbar for Chrome, Safari and Opera */
+    display: none;
+  }
+
 }
 
 .searchContainer {
diff --git a/packages/editor/src/components/graph/ee-behave-flow/styles.module.scss b/packages/editor/src/components/graph/ee-behave-flow/styles.module.scss
index 1b21d6a07a..b65b3f861d 100644
--- a/packages/editor/src/components/graph/ee-behave-flow/styles.module.scss
+++ b/packages/editor/src/components/graph/ee-behave-flow/styles.module.scss
@@ -142,6 +142,7 @@
       font-size: large;
       text-align: center;
       font-style: bold;
+      font-weight: normal;
     }
   }
 
diff --git a/packages/editor/src/components/graph/ee-flow/components/InputSocket.tsx b/packages/editor/src/components/graph/ee-flow/components/InputSocket.tsx
index 41d96a3d65..03af0818ac 100644
--- a/packages/editor/src/components/graph/ee-flow/components/InputSocket.tsx
+++ b/packages/editor/src/components/graph/ee-flow/components/InputSocket.tsx
@@ -59,7 +59,8 @@ const InputFieldForValue = ({
     userDrag: 'none',
     marginRight: '0.5rem',
     WebkitUserDrag: 'none',
-    MozUserDrag: 'none'
+    MozUserDrag: 'none',
+    margin: 0
   }
   if (showChoices)
     return (
diff --git a/packages/editor/src/components/graph/ee-flow/components/modals/LoadModal.tsx b/packages/editor/src/components/graph/ee-flow/components/modals/LoadModal.tsx
index e2f0a07865..0e6fec754c 100644
--- a/packages/editor/src/components/graph/ee-flow/components/modals/LoadModal.tsx
+++ b/packages/editor/src/components/graph/ee-flow/components/modals/LoadModal.tsx
@@ -96,7 +96,8 @@ export const LoadModal: React.FC<LoadModalProps> = ({ open = false, onClose, set
           width: '100%',
           padding: '0.5rem',
           height: '8rem',
-          verticalAlign: 'top'
+          verticalAlign: 'top',
+          margin: 0
         }}
         placeholder="Paste JSON here"
         value={value}
@@ -112,7 +113,8 @@ export const LoadModal: React.FC<LoadModalProps> = ({ open = false, onClose, set
           borderRadius: '0.25rem',
           display: 'block',
           width: '100%',
-          padding: '0.75rem'
+          padding: '0.75rem',
+          margin: 0
         }}
         onChange={(e) => setSelected(e.target.value)}
         value={selected}
diff --git a/packages/editor/src/components/graph/ee-flow/components/modals/SaveModal.tsx b/packages/editor/src/components/graph/ee-flow/components/modals/SaveModal.tsx
index 730cb4ec56..271a0542cf 100644
--- a/packages/editor/src/components/graph/ee-flow/components/modals/SaveModal.tsx
+++ b/packages/editor/src/components/graph/ee-flow/components/modals/SaveModal.tsx
@@ -69,7 +69,13 @@ export const SaveModal: React.FC<SaveModalProps> = ({ open = false, onClose, spe
     >
       <textarea
         ref={ref}
-        style={{ border: '1px solid #cbd5e0', width: '100%', padding: '0.5rem', height: '8rem' }}
+        style={{
+          border: '1px solid #cbd5e0',
+          width: '100%',
+          padding: '0.5rem',
+          height: '8rem',
+          margin: 0
+        }}
         defaultValue={jsonString}
       ></textarea>
     </Modal>
diff --git a/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx b/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx
index 2ce80344da..101697e85c 100644
--- a/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx
+++ b/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx
@@ -53,8 +53,8 @@ import { Checkbox } from '@mui/material'
 import MenuItem from '@mui/material/MenuItem'
 import { PopoverPosition } from '@mui/material/Popover'
 
+import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { UUIDComponent } from '@etherealengine/engine/src/scene/components/UUIDComponent'
-import Button from '@etherealengine/ui/src/primitives/mui/Button'
 import { EditorCameraState } from '../../classes/EditorCameraState'
 import { ItemTypes, SupportedFileTypes } from '../../constants/AssetTypes'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
@@ -65,6 +65,7 @@ import { EditorState } from '../../services/EditorServices'
 import { SelectionState } from '../../services/SelectionServices'
 import Search from '../Search/Search'
 import useUpload from '../assets/useUpload'
+import { PropertiesPanelButton } from '../inputs/Button'
 import { ContextMenu } from '../layout/ContextMenu'
 import { updateProperties } from '../properties/Util'
 import { HeirarchyTreeCollapsedNodeType, HeirarchyTreeNodeType, heirarchyTreeWalker } from './HeirarchyTreeWalker'
@@ -528,10 +529,12 @@ export default function HierarchyPanel() {
           </div>
           <Search elementsName="hierarchy" handleInputChange={setSearchHierarchy} />
         </div>
-        <div style={{ height: '100%', width: '100%' }}>
-          <AutoSizer onResize={HierarchyList}>{HierarchyList}</AutoSizer>
-        </div>
-        <Button
+        {Engine.instance.scene && (
+          <div style={{ height: '100%' }}>
+            <AutoSizer onResize={HierarchyList}>{HierarchyList}</AutoSizer>
+          </div>
+        )}
+        <PropertiesPanelButton
           variant="contained"
           // TODO see why we have to specify capitalize here
           style={{
@@ -544,7 +547,7 @@ export default function HierarchyPanel() {
           onClick={() => EditorControlFunctions.createObjectFromSceneElement()}
         >
           {t('editor:hierarchy.lbl-addEntity')}
-        </Button>
+        </PropertiesPanelButton>
       </div>
       <ContextMenu open={open} anchorEl={anchorEl} anchorPosition={anchorPosition} onClose={handleClose}>
         <MenuItem onClick={() => onRenameNode(contextSelectedItem!)}>{t('editor:hierarchy.lbl-rename')}</MenuItem>
diff --git a/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx b/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx
index 7d0427831b..b5379f3da4 100755
--- a/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx
+++ b/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx
@@ -71,8 +71,8 @@ export function NodeIssuesIcon({ node }) {
   const renderInfo = useCallback(() => {
     return (
       <div style={issuesTooltipContainerStyles as React.CSSProperties}>
-        <h6>{t('editor:hierarchy.isseus')}</h6>
-        <ul>
+        <h6 style={{ fontSize: '100%', fontWeight: 'normal' }}>{t('editor:hierarchy.isseus')}</h6>
+        <ul style={{ listStyle: 'none' }}>
           {node.map((issue, i) => {
             return (
               <li key={i}>
diff --git a/packages/editor/src/components/hierarchy/styles.module.scss b/packages/editor/src/components/hierarchy/styles.module.scss
index 605c957ff0..3023c777c0 100644
--- a/packages/editor/src/components/hierarchy/styles.module.scss
+++ b/packages/editor/src/components/hierarchy/styles.module.scss
@@ -82,6 +82,7 @@
       padding: 2px 4px;
       outline: none;
       border-radius: 3px;
+      margin:0;
     }
   }
 
@@ -124,7 +125,8 @@
   border: none;
   background: transparent;
   color: var(--textColor);
-
+  margin:0;
+  
   &:hover {
     opacity: 0.8;
     color: var(--textColor);
diff --git a/packages/editor/src/components/inputs/ArrayInputGroup.tsx b/packages/editor/src/components/inputs/ArrayInputGroup.tsx
index 889641bda8..a050bc88df 100755
--- a/packages/editor/src/components/inputs/ArrayInputGroup.tsx
+++ b/packages/editor/src/components/inputs/ArrayInputGroup.tsx
@@ -46,6 +46,29 @@ export interface ArrayInputGroupState {
   values: string[]
 }
 
+const onChangeSize = (textSize: string, values: string[], onChange?: any) => {
+  // copy the array to prevent https://hookstate.js.org/docs/exceptions/#hookstate-202
+  const valuesCopy = [...values] as string[]
+  const preCount = valuesCopy.length
+  const count = parseInt(textSize)
+  if (isNaN(count) || preCount === count) return
+  if (preCount > count) {
+    valuesCopy.splice(count)
+  } else {
+    for (let i = 0; i < count - preCount; i++) {
+      valuesCopy.push('')
+    }
+  }
+  onChange?.(valuesCopy)
+}
+
+const onChangeText = (text: string, index: number, values: string[], onChange?: any) => {
+  // copy the array to prevent https://hookstate.js.org/docs/exceptions/#hookstate-202
+  const valuesCopy = [...values]
+  valuesCopy[index] = text
+  onChange?.(valuesCopy)
+}
+
 const ArrayInputGroup = ({
   prefix,
   label,
diff --git a/packages/editor/src/components/inputs/BooleanInput.css b/packages/editor/src/components/inputs/BooleanInput.css
index 3744fb653b..3174871733 100755
--- a/packages/editor/src/components/inputs/BooleanInput.css
+++ b/packages/editor/src/components/inputs/BooleanInput.css
@@ -1,5 +1,6 @@
 .StyledBooleanInput {
   display: none;
+  margin:0;
 }
 
 .checkbox .BooleanInputLabel {
diff --git a/packages/editor/src/components/inputs/Button.css b/packages/editor/src/components/inputs/Button.css
index 2bd40de9b8..ce96ea33fb 100755
--- a/packages/editor/src/components/inputs/Button.css
+++ b/packages/editor/src/components/inputs/Button.css
@@ -16,6 +16,7 @@
   padding: 1px 6px;
   width: 150px;
   margin-right: 15px;
+  margin:0;
 }
 
 .button:hover {
diff --git a/packages/editor/src/components/inputs/ColorInput.css b/packages/editor/src/components/inputs/ColorInput.css
index 033e7f1884..f51c6c6409 100755
--- a/packages/editor/src/components/inputs/ColorInput.css
+++ b/packages/editor/src/components/inputs/ColorInput.css
@@ -9,6 +9,7 @@
   display: flex;
   flex: 1;
   align-items: center;
+  overflow-x :hidden;
 }
 
 .StyledColorInput:focus-visible { 
@@ -16,7 +17,6 @@
 }
 
 .ColorPreview {
-  width: 32px;
   height: auto;
   border-radius: 2px;
   padding: 6px;
@@ -25,6 +25,7 @@
 
 .ColorText {
   padding-top: 2px;
+  overflow: hidden;
 }
 
 .ColorInputPopover {
diff --git a/packages/editor/src/components/inputs/Input.css b/packages/editor/src/components/inputs/Input.css
index 722385ee4e..7a61e7b252 100755
--- a/packages/editor/src/components/inputs/Input.css
+++ b/packages/editor/src/components/inputs/Input.css
@@ -11,6 +11,7 @@
   color: var(--textColor);
   height: 24px;
   padding: 6px 8px;
+  margin:0;
 }
 
 .Input:hover {
diff --git a/packages/editor/src/components/inputs/NumericInput.css b/packages/editor/src/components/inputs/NumericInput.css
index e1acc82e98..4741fb5631 100755
--- a/packages/editor/src/components/inputs/NumericInput.css
+++ b/packages/editor/src/components/inputs/NumericInput.css
@@ -7,6 +7,7 @@
   border-radius: 4px;
   height: 24px;
   overflow: hidden;
+  align-items: center;
 }
 
 .NumericInputContainer:hover {
diff --git a/packages/editor/src/components/inputs/NumericInput.tsx b/packages/editor/src/components/inputs/NumericInput.tsx
index 118f5ebd32..139d086287 100755
--- a/packages/editor/src/components/inputs/NumericInput.tsx
+++ b/packages/editor/src/components/inputs/NumericInput.tsx
@@ -81,10 +81,21 @@ export interface NumericInputProp {
   convertTo?: any
 }
 
-const StyledNumericInput = ({ className = '', ...rest }) => {
-  return <input className={`StyledNumericInput ${className}`} {...rest} />
+export interface styledNumericInputProp {
+  className?: string
+  value?: number
+  onKeyUp?: any
+  onKeyDown?: any
+  onChange?: any
+  onFocus?: any
+  onBlur?: any
+  unit?: string
 }
 
+const StyledNumericInput = React.forwardRef(({ className = '', ...rest }: styledNumericInputProp, ref) => {
+  return <input ref={ref as any} className={`StyledNumericInput ${className}`} {...rest} />
+})
+
 const NumericInput = React.forwardRef(
   ({
     className,
diff --git a/packages/editor/src/components/inputs/NumericInputGroup.tsx b/packages/editor/src/components/inputs/NumericInputGroup.tsx
index 788e0b9607..f4bd66537e 100755
--- a/packages/editor/src/components/inputs/NumericInputGroup.tsx
+++ b/packages/editor/src/components/inputs/NumericInputGroup.tsx
@@ -58,14 +58,14 @@ function BaseNumericInputGroup({ name, className, label, ...rest }: NumericInput
   return (
     <InputGroupContainer>
       <Grid container spacing="10px">
-        <Grid item xs={3} display="flex" alignItems="center" justifyContent="end">
-          <InfoTooltip className="tooltip" title={label ?? name}>
+        <Grid item xs={4} display="flex" alignItems="center" justifyContent="end">
+          <InfoTooltip className="tooltip" title={label ?? name} style={{ textAlign: 'end', overflow: 'hidden' }}>
             <Scrubber onChange={onChange} value={value} {...scrubberProps}>
               {label}
             </Scrubber>
           </InfoTooltip>
         </Grid>
-        <Grid item xs={9}>
+        <Grid item xs={8}>
           <InputGroupContent>
             <NumericInput {...rest} />
           </InputGroupContent>
diff --git a/packages/editor/src/components/inputs/NumericStepperInput.tsx b/packages/editor/src/components/inputs/NumericStepperInput.tsx
index 8e4f1d17a5..3274f1eb6f 100755
--- a/packages/editor/src/components/inputs/NumericStepperInput.tsx
+++ b/packages/editor/src/components/inputs/NumericStepperInput.tsx
@@ -47,7 +47,8 @@ const stepperButtonStyle = {
   border: '1px solid var(--inputOutline)',
   color: 'var(--textColor)',
   width: '20px',
-  padding: '0'
+  padding: '0',
+  margin: 0
 }
 
 const leftStepperButtonStyle = {
diff --git a/packages/editor/src/components/inputs/Scrubber.css b/packages/editor/src/components/inputs/Scrubber.css
deleted file mode 100755
index 9267d93b70..0000000000
--- a/packages/editor/src/components/inputs/Scrubber.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.Cursor {
-  position: absolute;
-  width: 20px;
-}
-
-.Cursor path {
-  stroke: white;
-  stroke-width: 20px;
-  fill: black;
-}
diff --git a/packages/editor/src/components/inputs/Scrubber.tsx b/packages/editor/src/components/inputs/Scrubber.tsx
index 9a039fff50..ff2606b1ac 100755
--- a/packages/editor/src/components/inputs/Scrubber.tsx
+++ b/packages/editor/src/components/inputs/Scrubber.tsx
@@ -24,7 +24,6 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import React, { ReactNode, useEffect, useRef } from 'react'
-import './Scrubber.css'
 
 import { clamp } from '@etherealengine/engine/src/common/functions/MathLerpFunctions'
 
@@ -58,7 +57,19 @@ type CursorProps = {
 }
 
 const Cursor = ({ x, y }: CursorProps) => {
-  return <MultipleStopIcon className="Cursor" style={{ transform: `translate(${x}px,${y}px)` }} />
+  return (
+    <MultipleStopIcon
+      className="Cursor"
+      style={{
+        position: 'absolute',
+        width: '20px',
+        transform: `translate(${x}px,${y}px)`,
+        stroke: 'white',
+        strokeWidth: '20px',
+        fill: 'black'
+      }}
+    />
+  )
 }
 
 type ScrubberProps = {
diff --git a/packages/editor/src/components/inputs/StringInput.tsx b/packages/editor/src/components/inputs/StringInput.tsx
index 5bb80783e3..654528a460 100755
--- a/packages/editor/src/components/inputs/StringInput.tsx
+++ b/packages/editor/src/components/inputs/StringInput.tsx
@@ -29,7 +29,8 @@ import './Input.css'
 
 const inputStyle = {
   display: 'flex',
-  width: '100%'
+  width: '100%',
+  margin: 0
 }
 
 interface StyledNumericInputProps {
diff --git a/packages/editor/src/components/inputs/selectInput.module.scss b/packages/editor/src/components/inputs/selectInput.module.scss
index cdafc1139e..e1a94683f4 100644
--- a/packages/editor/src/components/inputs/selectInput.module.scss
+++ b/packages/editor/src/components/inputs/selectInput.module.scss
@@ -73,6 +73,7 @@
   padding: 2px 7px;
   font-size: 11px;
   color: var(--textColor);
+  
 }
 
 .icon {
@@ -89,6 +90,7 @@
   color: var(--textColor);
   max-height: 120px;
   overflow: auto;
+  
 }
 
 .menuItem {
diff --git a/packages/editor/src/components/layout/List.tsx b/packages/editor/src/components/layout/List.tsx
index 3f7ab9f150..d64d6c5241 100755
--- a/packages/editor/src/components/layout/List.tsx
+++ b/packages/editor/src/components/layout/List.tsx
@@ -83,5 +83,5 @@ export function IconListItem({ iconComponent, children, ...rest }) {
 }
 
 export function List({ children }) {
-  return <ul style={{ height: '100%', overflowY: 'auto' }}>{children}</ul>
+  return <ul style={{ listStyle: 'none', height: '100%', overflowY: 'auto' }}>{children}</ul>
 }
diff --git a/packages/editor/src/components/layout/Tooltip.tsx b/packages/editor/src/components/layout/Tooltip.tsx
index d14154e807..873a4dacd2 100755
--- a/packages/editor/src/components/layout/Tooltip.tsx
+++ b/packages/editor/src/components/layout/Tooltip.tsx
@@ -25,7 +25,8 @@ Ethereal Engine. All Rights Reserved.
 
 import React from 'react'
 
-import { createStyles, Tooltip, TooltipProps } from '@mui/material'
+import { Tooltip, TooltipProps } from '@mui/material'
+import createStyles from '@mui/styles/createStyles'
 import makeStyles from '@mui/styles/makeStyles'
 
 const useStyles = makeStyles<any, any, any>((theme: any) => {
@@ -58,7 +59,7 @@ export function InfoTooltip(props: TooltipProps & { info?: string }) {
   return (
     <Tooltip {...props} title={title} classes={{ tooltip: styles.tooltip }} arrow disableInteractive>
       {/* Span is required to trigger events like hover in safari for disabled elements */}
-      {props.children}
+      <span>{props.children}</span>
     </Tooltip>
   )
 }
diff --git a/packages/editor/src/components/projects/styles.module.scss b/packages/editor/src/components/projects/styles.module.scss
index 96197f28bb..2527d2c2c3 100644
--- a/packages/editor/src/components/projects/styles.module.scss
+++ b/packages/editor/src/components/projects/styles.module.scss
@@ -52,9 +52,14 @@
 .projectPage {
   width: 100%;
   display: flex;
+  flex-direction: column;
+  flex: 1;
+  font-family: var(--lato);
+  font-size: 12px;
   background-color: var(--mainBackground);
   pointer-events: auto;
   max-height: 100%;
+  color: var(--textColor);
 }
 
 .projectPageContainer {
@@ -86,6 +91,7 @@
 
       h2 {
         font-size: 24px;
+        font-weight: normal;
       }
 
       .buttonContainer {
@@ -193,8 +199,12 @@
           }
 
           h3 {
+            margin:0;
+            padding:0;
             line-height: 30px;
             margin-left: -5px;
+            font-size:100%;
+            font-weight:normal;
           }
         }
 
@@ -206,6 +216,16 @@
 
         .expansionDetail {
           padding: 8px 0;
+
+          ul{
+            margin: 0;
+            padding: 0;
+          }
+
+          h3{
+            margin:0;
+            padding:0;
+          }
         }
       }
 
@@ -339,6 +359,7 @@
       text-align: center;
       margin-top: 10px;
       color: var(--textColor);
+      font-weight: normal;
     }
 
     button {
@@ -422,6 +443,8 @@
   .errorMessage {
     color: var(--red);
     margin: 5px 2px;
+    font-size: 100%;
+    font-weight: normal;
   }
 
   .secondaryText {
@@ -558,7 +581,7 @@
 }
 
 .deleteDialog {
-  background: var(--popupBackground);
+  background: var(--dockBackground);
   color: var(--textColor);
   width: 300px;
 
@@ -571,8 +594,6 @@
       height: 35px !important;
       width: 85px !important;
       font-size: 14px !important;
-      background: transparent !important;
-      color: var(--blue) !important;
 
       &:hover,
       &:focus-visible {
@@ -622,4 +643,5 @@
   font-size: 14px;
   background-color: var(--popupBackground) !important;
   color: var(--textColor) !important;
-}
\ No newline at end of file
+}
+
diff --git a/packages/editor/src/components/properties/ColliderNodeEditor.tsx b/packages/editor/src/components/properties/ColliderNodeEditor.tsx
index 09f2e7725c..55eb140b19 100755
--- a/packages/editor/src/components/properties/ColliderNodeEditor.tsx
+++ b/packages/editor/src/components/properties/ColliderNodeEditor.tsx
@@ -194,7 +194,11 @@ export const ColliderNodeEditor: EditorComponentType = (props) => {
   }, [props.entity])
 
   return (
-    <NodeEditor {...props} description={t('editor:properties.collider.description')}>
+    <NodeEditor
+      {...props}
+      name={t('editor:properties.collider.name')}
+      description={t('editor:properties.collider.description')}
+    >
       <InputGroup name="Type" label={t('editor:properties.collider.lbl-type')}>
         <SelectInput
           options={bodyTypeOptions}
diff --git a/packages/editor/src/components/properties/NodeEditor.tsx b/packages/editor/src/components/properties/NodeEditor.tsx
index 93d49148fb..1c09d1b7d1 100755
--- a/packages/editor/src/components/properties/NodeEditor.tsx
+++ b/packages/editor/src/components/properties/NodeEditor.tsx
@@ -62,7 +62,7 @@ class NodeEditorErrorBoundary extends React.Component<NodeErrorProps, NodeErrorS
     if (this.state.error) {
       return (
         <div style={{ margin: 10, color: '#ff0000', overflow: 'auto', backgroundColor: '#222222' }}>
-          <h1>
+          <h1 style={{ fontSize: '100%', fontWeight: 'normal' }}>
             <b>
               [{this.props.name}] {this.state.error.message}`
             </b>
diff --git a/packages/editor/src/components/properties/Object3DNodeEditor.tsx b/packages/editor/src/components/properties/Object3DNodeEditor.tsx
index 7f87bd4cb3..848a1c6637 100755
--- a/packages/editor/src/components/properties/Object3DNodeEditor.tsx
+++ b/packages/editor/src/components/properties/Object3DNodeEditor.tsx
@@ -76,7 +76,6 @@ type Object3DProps = {
  */
 export const Object3DNodeEditor = (props: Object3DProps) => {
   const { t } = useTranslation()
-  console.log(props)
   const scene: Scene = Engine.instance.scene
   const selectionState = useHookstate(getMutableState(SelectionState))
   const materialLibrary = getState(MaterialLibraryState)
diff --git a/packages/editor/src/components/properties/ParticleSystemNodeEditor.tsx b/packages/editor/src/components/properties/ParticleSystemNodeEditor.tsx
index 961307c0e9..ff142ee28c 100644
--- a/packages/editor/src/components/properties/ParticleSystemNodeEditor.tsx
+++ b/packages/editor/src/components/properties/ParticleSystemNodeEditor.tsx
@@ -182,7 +182,7 @@ const ParticleSystemNodeEditor: EditorComponentType = (props) => {
       name={t('editor:properties.particle-system.name')}
       description={t('editor:properties.particle-system.description')}
     >
-      <h4>Options</h4>
+      <h4 style={{ fontSize: '100%', fontWeight: 'normal' }}>Options</h4>
       <InputGroup name="Looping" label={t('editor:properties.particle-system.looping')}>
         <BooleanInput value={particleSystem.systemParameters.looping} onChange={onSetSystemParm('looping')} />
       </InputGroup>
@@ -418,7 +418,7 @@ const ParticleSystemNodeEditor: EditorComponentType = (props) => {
       <InputGroup name="World Space" label={t('editor:properties.particle-system.world-space')}>
         <BooleanInput value={particleSystem.systemParameters.worldSpace} onChange={onSetSystemParm('worldSpace')} />
       </InputGroup>
-      <h4>Behaviors</h4>
+      <h4 style={{ fontSize: '100%', fontWeight: 'normal' }}>Behaviors</h4>
       <Button onClick={onAddBehavior}>Add Behavior</Button>
       <PaginatedList
         list={particleSystemState.behaviorParameters}
diff --git a/packages/editor/src/components/styles.module.scss b/packages/editor/src/components/styles.module.scss
index 0128313865..c8eb16be1c 100755
--- a/packages/editor/src/components/styles.module.scss
+++ b/packages/editor/src/components/styles.module.scss
@@ -7,6 +7,11 @@
   position: fixed;
   pointer-events: none;
   background: var(--background2);
+
+  &::selection {
+    color: var(--textColor);
+    background-color: var(--dropdownMenuHoverBackground);
+  }
 }
 
 .propertyContainer {
@@ -77,7 +82,6 @@
 .bgImageBlock {
   display: flex;
   justify-content: center;
-  align-items: center;
   width: 100%;
   height: 100%;
   flex-direction: column;
@@ -91,10 +95,11 @@
 
   h2 {
     width: 100%;
-    font-size: 20px;
     text-align: center;
     color: var(--textColor);
     margin-top: 30px;
+    font-size: 100%;
+    font-weight: normal;
   }
 }
 
diff --git a/packages/editor/src/components/toolbar/ToolButton.css b/packages/editor/src/components/toolbar/ToolButton.css
index ae970ac960..cdf64bda7a 100755
--- a/packages/editor/src/components/toolbar/ToolButton.css
+++ b/packages/editor/src/components/toolbar/ToolButton.css
@@ -9,6 +9,7 @@
   color: var(--iconButtonColor);
   cursor: pointer;
   position: relative;
+  margin:0;
   background-color: var(--toolbar);
 }
 
diff --git a/packages/editor/src/components/toolbar/styles.module.scss b/packages/editor/src/components/toolbar/styles.module.scss
index b7fc369dc9..752fe43db4 100644
--- a/packages/editor/src/components/toolbar/styles.module.scss
+++ b/packages/editor/src/components/toolbar/styles.module.scss
@@ -13,7 +13,7 @@
 
 .statsContainer {
   position: absolute;
-  top: 70px;
+  top: 60px;
   z-index: 1000;
   left: 20px;
   color: var(--white);
@@ -22,15 +22,20 @@
   opacity: 0.88;
   backdrop-filter: blur(1px);
   border-radius: 4px;
-  width: 150px;
-
+  width: 130px;
+  font-family: var(--lato);
+  font-size: 12px;
+  
   h3 {
     font-size: 14px;
+    font-weight :normal;
   }
 
   & > ul {
-    margin: 8px 4px;
-
+    margin-block-start: 2px;
+    margin-block-end: 2px;
+    padding-inline-start: 4px;
+    
     & > li {
       font: 12px;
       color: var(--textColor);
@@ -40,8 +45,9 @@
       }
 
       ul {
-        margin-left: 5px;
         color: var(--white);
+        padding-inline-start: 8px;
+
       }
     }
   }
@@ -49,42 +55,24 @@
 
 .settingsContainer {
   position: absolute;
-  top: 70px;
+  top: 60px;
   z-index: 1000;
-  right: 100px;
+  right: 450px;
   color: var(--white);
   padding: 8px;
   background-color: var(--popupBackground);
   opacity: 0.88;
   backdrop-filter: blur(1px);
   border-radius: 4px;
-  width: 500px;
-
-  h3 {
-    font-size: 14px;
-  }
-
-  & > ul {
-    margin: 8px 4px;
-
-    & > li {
-      font: 12px;
-      color: var(--textColor);
-
-      & + li {
-        margin-top: 5px;
-      }
-
-      ul {
-        margin-left: 5px;
-        color: var(--white);
-      }
-    }
-  }
+  width: 400px;
+  font-family: var(--lato);
+  font-size: 12px;
 }
 
 .toolbarNumericStepperInput {
   width: 120px;
+  font-family: var(--lato);
+  font-size: 12px;
 
   input {
     border-width: 0 !important;
@@ -130,6 +118,7 @@
     position: relative;
     background-color: var(--toolbar);
     border-radius: 4px;
+    margin:0;
 
     &:hover {
       background-color: var(--iconButtonHoverColor);
diff --git a/packages/editor/src/components/toolbar/tools/StatsTool.tsx b/packages/editor/src/components/toolbar/tools/StatsTool.tsx
index 77098ab269..892cee2d6e 100644
--- a/packages/editor/src/components/toolbar/tools/StatsTool.tsx
+++ b/packages/editor/src/components/toolbar/tools/StatsTool.tsx
@@ -66,10 +66,10 @@ const StatsTool = () => {
         <div className={styles.statsContainer}>
           <h3>{t('editor:viewport.state.header')}</h3>
           {info && (
-            <ul>
+            <ul style={{ listStyle: 'none' }}>
               <li>
                 {t('editor:viewport.state.memory')}
-                <ul>
+                <ul style={{ listStyle: 'none' }}>
                   <li>
                     {t('editor:viewport.state.geometries')}: {info.geometries}
                   </li>
@@ -80,7 +80,7 @@ const StatsTool = () => {
               </li>
               <li>
                 {t('editor:viewport.state.render')}:
-                <ul>
+                <ul style={{ listStyle: 'none' }}>
                   <li>
                     {t('editor:viewport.state.FPS')}: {Math.round(info.fps)}
                   </li>
diff --git a/packages/hyperflux/tsconfig.json b/packages/hyperflux/tsconfig.json
index e8078384f0..e17784b09c 100755
--- a/packages/hyperflux/tsconfig.json
+++ b/packages/hyperflux/tsconfig.json
@@ -6,9 +6,6 @@
       "dom",
       "dom.iterable"
     ],
-    "paths": {
-      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
-    },
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
diff --git a/packages/ui/src/components/Chat/ChannelsList.tsx b/packages/ui/src/components/Chat/ChannelsList.tsx
index 743f5640b5..b2ac6a2f5d 100644
--- a/packages/ui/src/components/Chat/ChannelsList.tsx
+++ b/packages/ui/src/components/Chat/ChannelsList.tsx
@@ -90,7 +90,11 @@ export const ChannelsList = () => {
             }`}
             onClick={() => selectedChannelId.set(props.channel.id)}
           >
-            <img className="mt-3 ml-5 rounded-8xs w-11 h-11 object-cover" alt="" src={UserIcon /**userThumbnail */} />
+            <img
+              className="max-w-full mt-3 ml-5 rounded-8xs w-11 h-11 object-cover"
+              alt=""
+              src={UserIcon /**userThumbnail */}
+            />
             <div className="mt-3 justify-start w-[200px] whitespace-nowrap overflow-hidden text-ellipsis">
               <p className="font-bold text-[#3F3960]">{getChannelName(props.channel)}</p>
               <p className="h-4 text-xs text-[#787589]">{latestMessage}</p>
@@ -105,7 +109,7 @@ export const ChannelsList = () => {
     <>
       <div className="w-full h-[10vh] flex justify-center items-center">
         <button
-          className="cursor-pointer rounded-[20px] p-0 bg-[#3F3960] w-[120px] h-8"
+          className="m-0 cursor-pointer rounded-[20px] p-0 bg-[#3F3960] w-[120px] h-8"
           onClick={() => isDrawerOpen.set(true)}
         >
           <div className="[text-align-last:center] rounded-2xl text-[16px] text-sm font-segoe-ui text-white text-left">
diff --git a/packages/ui/src/components/Chat/ChatSection.tsx b/packages/ui/src/components/Chat/ChatSection.tsx
index 33fcfd837e..3ffef1e9fb 100644
--- a/packages/ui/src/components/Chat/ChatSection.tsx
+++ b/packages/ui/src/components/Chat/ChatSection.tsx
@@ -108,11 +108,11 @@ export const ChatSection = () => {
               <b className="text-3xl">Chats</b>
             </div>
             <div className="flex justify-center gap-2">
-              <button className="">
-                <img className="w-6 h-6 overflow-hidden" alt="" src={NotificationIcon} />
+              <button className="m-0">
+                <img className="max-w-full w-6 h-6 overflow-hidden" alt="" src={NotificationIcon} />
               </button>
-              <button className="">
-                <img className="w-6 h-6 overflow-hidden" alt="" src={BoxSearch} />
+              <button className="m-0">
+                <img className="max-w-full w-6 h-6 overflow-hidden" alt="" src={BoxSearch} />
               </button>
               <button onClick={() => openModal(1)}>
                 <img className="w-6 h-6 overflow-hidden" alt="" src={AddSquare} />
@@ -133,7 +133,7 @@ export const ChatSection = () => {
             <ChannelsList />
           </div>
           <div className="absolute bottom-0 w-full h-[75px] gap-4 flex flex-wrap justify-center bg-[#ECECEC]">
-            <img className="rounded-[38px] mt-3 w-11 h-11 object-cover" alt="" src={userThumbnail} />
+            <img className="max-w-full rounded-[38px] mt-3 w-11 h-11 object-cover" alt="" src={userThumbnail} />
             <div className="mt-3">
               <p className="font-bold text-[#3F3960]">{userName}</p>
               <div className="flex flex-wrap gap-1">
@@ -147,7 +147,7 @@ export const ChatSection = () => {
               <div className="relative">
                 <input
                   type="checkbox"
-                  className="hidden"
+                  className="m-0 hidden"
                   checked={checked}
                   onChange={handleToggle}
                   onClick={switchToggle}
@@ -164,8 +164,8 @@ export const ChatSection = () => {
                 ></div>
               </div>
             </label>
-            <button className="">
-              <img className="w-6 h-6 overflow-hidden" alt="" src={SettingIcon} />
+            <button className="m-0">
+              <img className="max-w-full w-6 h-6 overflow-hidden" alt="" src={SettingIcon} />
             </button>
           </div>
         </div>
diff --git a/packages/ui/src/components/Chat/Create.tsx b/packages/ui/src/components/Chat/Create.tsx
index 1e55960518..621ccced8d 100644
--- a/packages/ui/src/components/Chat/Create.tsx
+++ b/packages/ui/src/components/Chat/Create.tsx
@@ -88,7 +88,7 @@ export const Create = () => {
         <div className="w-[368px] h-[100%] bg-[#15171B] ml-[-108px]">
           <div className="w-[350px] flex flex-wrap justify-start ml-5 mt-4 my-4 gap-[9px] ">
             <button
-              className={`cursor-pointer rounded-[20px] border-dashed box-border border-[1px] p-0 w-[87px] h-6 ${
+              className={`m-0 cursor-pointer rounded-[20px] border-dashed box-border border-[1px] p-0 w-[87px] h-6 ${
                 activeButton === 1 ? 'bg-[#935CFF] text-white border-[#935CFF]' : 'text-[#A0A0B2] border-[#595C60]'
               }`}
               onClick={() => handleButtonClick(1)}
@@ -99,7 +99,7 @@ export const Create = () => {
               </div>
             </button>
             <button
-              className={`cursor-pointer rounded-[20px] border-dashed box-border border-[1px] p-0 w-[86px] h-6 ${
+              className={`m-0 cursor-pointer rounded-[20px] border-dashed box-border border-[1px] p-0 w-[86px] h-6 ${
                 activeButton === 2 ? 'bg-[#935CFF] text-white border-[#935CFF]' : 'text-[#A0A0B2] border-[#595C60]'
               }`}
               onClick={() => handleButtonClick(2)}
@@ -110,7 +110,7 @@ export const Create = () => {
               </div>
             </button>
             <button
-              className={`cursor-pointer rounded-[20px] border-dashed box-border border-[1px] p-0 w-[111px] h-6 ${
+              className={`m-0 cursor-pointer rounded-[20px] border-dashed box-border border-[1px] p-0 w-[111px] h-6 ${
                 activeButton === 3 ? 'bg-[#935CFF] text-white border-[#935CFF]' : 'text-[#A0A0B2] border-[#595C60]'
               }`}
               onClick={() => handleButtonClick(3)}
@@ -127,13 +127,13 @@ export const Create = () => {
                   <div className="w-[305px] h-[40px] mt-[2px] ml-[0.5px] mr-[0.5px]">
                     <input
                       type="text"
-                      className="rounded-[5px] focus:outline-none focus:border-[#15171B] border-[#15171B] border-2 text-[#ffff] bg-[#15171B] p-[9.5px] w-full font-normal "
+                      className="m-0 rounded-[5px] focus:outline-none focus:border-[#15171B] border-[#15171B] border-2 text-[#ffff] bg-[#15171B] p-[9.5px] w-full font-normal "
                       placeholder="Your@domain.com"
                     />
                   </div>
                 </div>
               </div>
-              <div className="w-[305px] flex justify-end mt-5  items-center">
+              <div className="m-0 w-[305px] flex justify-end mt-5  items-center">
                 <button className="cursor-pointer rounded-[20px] p-0 bg-[#935CFF] w-[60px] h-6">
                   <div className="[text-align-last:center] rounded-2xl text-[16px] text-sm font-segoe-ui text-white text-left">
                     Send
diff --git a/packages/ui/src/components/Chat/DrawerCreateChannel.tsx b/packages/ui/src/components/Chat/DrawerCreateChannel.tsx
index 61299d8bbd..341c6a0f34 100644
--- a/packages/ui/src/components/Chat/DrawerCreateChannel.tsx
+++ b/packages/ui/src/components/Chat/DrawerCreateChannel.tsx
@@ -66,7 +66,7 @@ export const DrawerCreateChannel = () => {
           onClick={() => selectedFriends.merge([props.friend.id])}
         >
           <div className="w-[230px] flex flex-wrap gap-5 justify-start">
-            <img className="mt-3 rounded-8xs w-11 h-11 object-cover" alt="" src={userThumbnail} />
+            <img className="max-w-full mt-3 rounded-8xs w-11 h-11 object-cover" alt="" src={userThumbnail} />
             <div className="mt-3 justify-start">
               <p className="font-bold text-[#3F3960]">{props.friend.name}</p>
             </div>
@@ -87,7 +87,7 @@ export const DrawerCreateChannel = () => {
       ))}
       {selectedFriends.value && (
         <div className="w-[330px] flex justify-start ml-9 mt-9 items-center">
-          <button className="cursor-pointer rounded-[20px] p-0 bg-[#3F3960] w-[120px] h-8" onClick={createChannel}>
+          <button className="m-0 cursor-pointer rounded-[20px] p-0 bg-[#3F3960] w-[120px] h-8" onClick={createChannel}>
             <div className="[text-align-last:center] rounded-2xl text-[16px] text-sm font-segoe-ui text-white text-left">
               Create Now
             </div>
diff --git a/packages/ui/src/components/Chat/Invitation.tsx b/packages/ui/src/components/Chat/Invitation.tsx
index 73f11adc85..e8bd44fbea 100644
--- a/packages/ui/src/components/Chat/Invitation.tsx
+++ b/packages/ui/src/components/Chat/Invitation.tsx
@@ -44,7 +44,7 @@ export const Invitation = () => {
   return (
     <div className="w-[460px] h-[70%] absolute flex-1 bg-[#15171B] flex flex-wrap">
       <div className="w-full h-[70px] bg-[#15171B] flex flex-wrap gap-3">
-        <button>
+        <button className="m-0">
           <div
             className={`mr-[50px] ml-[80px] ${activeButton === 1 ? 'text-[#935CFF]' : 'text-[#ffff]'}`}
             onClick={() => {
@@ -56,7 +56,7 @@ export const Invitation = () => {
           </div>
         </button>
         <div className="box-border mr-8 w-[70px] border-t-[1px] mt-7 border-solid border-[#f6f7f8] rotate-90" />
-        <button>
+        <button className="m-0">
           <div
             className={`ml-[20px] ${activeButton === 2 ? 'text-[#935CFF]' : 'text-[#ffff]'}`}
             onClick={() => {
diff --git a/packages/ui/src/components/Chat/InvitationReceived.tsx b/packages/ui/src/components/Chat/InvitationReceived.tsx
index 8a0fc89fde..2342eeeb07 100644
--- a/packages/ui/src/components/Chat/InvitationReceived.tsx
+++ b/packages/ui/src/components/Chat/InvitationReceived.tsx
@@ -44,7 +44,7 @@ export const InvitationReceived = () => {
           return (
             <div className="rounded-[10px] bg-[#15171B] w-[450px] h-[45px] flex flex-wrap mt-1 ml-4">
               <div className="rounded-full ml-4 my-2 bg-[#26282B] w-[30px] h-[30px] justify-between">
-                <img className="w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserIcon} />
+                <img className="max-w-full w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserIcon} />
               </div>
               <div className="justify-items-start ml-1">
                 <p className="text-[12px] w-[120px] font-bold text-white mt-[9px] justify-items-start">{item.name}</p>
@@ -52,12 +52,12 @@ export const InvitationReceived = () => {
               </div>
               <div className="ml-[175px] flex flex-wrap gap-3 mt-1">
                 <div className="rounded-full  my-2 bg-[#26282B] w-[24px] h-[24px] justify-between">
-                  <button className="w-[30px] ">
+                  <button className="m-0 w-[30px] ">
                     <ImCross className="w-[13px] h-[12px] ml-[6.1px] mx-1 mt-[6px] fill-[#DD3333] overflow-hidden" />
                   </button>
                 </div>
                 <div className="rounded-full  my-2 bg-[#26282B] w-[24px] h-[24px] justify-between">
-                  <button className="w-[30px] ">
+                  <button className="m-0 w-[30px] ">
                     <TiTick className="w-[24px] h-[24px] ml-[0px] mx-1  fill-[#57C290] overflow-hidden" />
                   </button>
                 </div>
diff --git a/packages/ui/src/components/Chat/InvitationSent.tsx b/packages/ui/src/components/Chat/InvitationSent.tsx
index 673c60f4ef..d1e8d7b96d 100644
--- a/packages/ui/src/components/Chat/InvitationSent.tsx
+++ b/packages/ui/src/components/Chat/InvitationSent.tsx
@@ -41,14 +41,14 @@ export const InvitationSent = () => {
           return (
             <div className="rounded-[10px] bg-[#15171B] w-[450px] h-[45px] flex flex-wrap mt-1 ml-4">
               <div className="rounded-full ml-4 my-2 bg-[#26282B] w-[30px] h-[30px] justify-between">
-                <img className="w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserIcon} />
+                <img className="max-w-full w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserIcon} />
               </div>
               <div className="justify-items-start ml-1">
                 <p className="text-[12px] w-[120px] font-bold text-white mt-[9px] justify-items-start">{item.name}</p>
                 <p className="text-[8px] w-[80px] font-normal text-white justify-items-start">{item.date}</p>
               </div>
               <div className="ml-[144px] flex flex-wrap gap-3 mt-2">
-                <button className="cursor-pointer rounded-[20px] p-0 bg-[#3C3230] w-[98px] h-7">
+                <button className="m-0 cursor-pointer rounded-[20px] p-0 bg-[#3C3230] w-[98px] h-7">
                   <div className="[text-align-last:center] rounded-2xl text-[11px] text-sm font-segoe-ui text-[#DD3333] text-left">
                     UNINVITE
                   </div>
diff --git a/packages/ui/src/components/Chat/Media.tsx b/packages/ui/src/components/Chat/Media.tsx
index 40744e92a9..e8014e7bc1 100644
--- a/packages/ui/src/components/Chat/Media.tsx
+++ b/packages/ui/src/components/Chat/Media.tsx
@@ -68,14 +68,14 @@ export const Media = () => {
             {DownloadImages.map((item) => {
               return (
                 <img
-                  className="rounded-8xs w-[120px] h-[84.94px] object-cover"
+                  className="max-w-full rounded-8xs w-[120px] h-[84.94px] object-cover"
                   alt=""
                   src={item.image}
                   key={item.image}
                 />
               )
             })}
-            <button className="cursor-pointer bg-[transparent] w-[120px] h-[84.94px]">
+            <button className="m-0 cursor-pointer bg-[transparent] w-[120px] h-[84.94px]">
               <div className="w-[120px] h-[84.94px] rounded bg-[#5B598B] flex flex-col shadow-[0px_0px_4px_rgba(0,_0,_0,_0.1)]">
                 <p className="text-[18px] font-semibold font-segoe-ui mt-3 my-[-10px] text-[#EEEEEE] text-center">
                   120
@@ -99,15 +99,15 @@ export const Media = () => {
                       </div>
                     </div>
                   </div>
-                  <button>
-                    <img className="w-6 h-6 mt-[6px] overflow-hidden" alt="" src={item.image} />
+                  <button className="m-0">
+                    <img className="max-w-full w-6 h-6 mt-[6px] overflow-hidden" alt="" src={item.image} />
                   </button>
                 </div>
               )
             })}
           </div>
           <div className="w-[330px] flex justify-center items-center mt-4">
-            <button className="cursor-pointer rounded-[20px] p-0 bg-[#3F3960] w-[120px] h-8">
+            <button className="m-0 cursor-pointer rounded-[20px] p-0 bg-[#3F3960] w-[120px] h-8">
               <div className="text-align-last:center rounded-2xl text-[16px] text-sm font-segoe-ui text-white">
                 View more
               </div>
diff --git a/packages/ui/src/components/Chat/Message.tsx b/packages/ui/src/components/Chat/Message.tsx
index 1c8e680c5c..4a10fca8cb 100644
--- a/packages/ui/src/components/Chat/Message.tsx
+++ b/packages/ui/src/components/Chat/Message.tsx
@@ -101,9 +101,7 @@ export const MessageList = (props: { channelID: ChannelID }) => {
                 {props.message.text}
               </p>
             </div>
-            <div className="w-max-[50px] min-w-0 mr-[55px]">
-              <img className="rounded-[38px] w-9 h-9 object-cover" alt="" src={userThumbnail} />
-            </div>
+            <img className="rounded-[38px]  w-9 h-9 object-cover" alt="" src={userThumbnail} />
           </div>
         </Resizable>
       </>
@@ -130,7 +128,7 @@ export const MessageList = (props: { channelID: ChannelID }) => {
           maxWidth={600}
         >
           <div className="flex flex-wrap">
-            <img className="rounded-[38px]  w-9 h-9 object-cover" alt="" src={userThumbnail} />
+            <img className="max-w-full rounded-[38px]  w-9 h-9 object-cover" alt="" src={userThumbnail} />
             <div className="h-[20px] ml-5">
               <p className="rounded-3xl border-[#F8F8F8] border-2 text-black bg-[#F8F8F8] p-[3px]">
                 {props.message.text}
@@ -156,24 +154,24 @@ export const MessageList = (props: { channelID: ChannelID }) => {
     }
 
     return (
-      <div className="relative w-max-[600px] w-min-[460px] bottom-0 h-[70px]  gap-5 flex flex-wrap justify-center bg-[#ffffff]">
+      <div className="relative w-full bottom-0 h-[70px]  gap-5 flex flex-wrap justify-center bg-[#ffffff]">
         <button className="">
           <img className="w-[30px] rounded-full font-bold h-[30px] overflow-hidden" alt="" src={AttachFileIcon} />
         </button>
         <div className="mt-3 rounded-3xl bg-[#d7d7d7] w-[80%] h-[45px] flex flex-wrap">
           <div className="rounded-full ml-4 my-2 bg-white w-[30px] h-[30px] justify-between">
-            <img className="w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserSvg} />
+            <img className="max-w-full w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserSvg} />
           </div>
-          <div className="w-max-[525px] h-[30px] ml-1 mt-[2.5px]">
+          <div className="w-[525px] h-[30px] ml-1 mt-[2.5px]">
             <input
               type="text"
-              className="rounded-3xl focus:outline-none focus:border-[#d7d7d7] border-[#d7d7d7] border-2 text-black bg-[#d7d7d7] p-2 w-full "
+              className="m-0 rounded-3xl focus:outline-none focus:border-[#d7d7d7] border-[#d7d7d7] border-2 text-black bg-[#d7d7d7] p-2 w-full "
               value={composingMessage.value}
               onChange={(e) => composingMessage.set(e.target.value)}
             />
           </div>
         </div>
-        <button className="mr-3" onClick={sendMessage}>
+        <button className="" onClick={sendMessage}>
           <img className="w-[30px] h-[30px]" alt="" src={SendIcon} />
         </button>
       </div>
@@ -236,7 +234,7 @@ const MessageHeader = (props: { selectedChannelID: ChannelID }) => {
         {mediaConnected && (
           <>
             <button
-              className="w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
+              className="m-0 w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
               onClick={toggleWebcamPaused}
             >
               {isCamVideoEnabled ? (
@@ -246,7 +244,7 @@ const MessageHeader = (props: { selectedChannelID: ChannelID }) => {
               )}
             </button>
             <button
-              className="w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
+              className="m-0 w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
               onClick={toggleMicrophonePaused}
             >
               {isCamAudioEnabled ? (
@@ -256,7 +254,7 @@ const MessageHeader = (props: { selectedChannelID: ChannelID }) => {
               )}
             </button>
             <button
-              className="w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
+              className="m-0 w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
               onClick={toggleScreenshare}
             >
               {isScreenVideoEnabled ? (
@@ -268,7 +266,7 @@ const MessageHeader = (props: { selectedChannelID: ChannelID }) => {
           </>
         )}
         <button
-          className="w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
+          className="m-0 w-[38px] h-[38px] flex flex-wrap justify-center rounded-[5px] bg-[#EDEEF0]"
           onClick={() => {
             startMediaCall()
           }}
diff --git a/packages/ui/src/components/Chat/VideoCall.tsx b/packages/ui/src/components/Chat/VideoCall.tsx
index ead26a0abf..989d737442 100644
--- a/packages/ui/src/components/Chat/VideoCall.tsx
+++ b/packages/ui/src/components/Chat/VideoCall.tsx
@@ -176,7 +176,7 @@ export const UserMedia = (props: { peerID: PeerID; type: 'cam' | 'screen' }) =>
             alt=""
             crossOrigin="anonymous"
             draggable={false}
-            className="rounded-full w-[40px] h-[40px]"
+            className="max-w-full rounded-full w-[40px] h-[40px]"
             id={peerID + '-thumbnail'}
           />
         ) : (
@@ -193,7 +193,7 @@ export const UserMedia = (props: { peerID: PeerID; type: 'cam' | 'screen' }) =>
           </p>
         </div>
         <button
-          className="absolute bottom-1 right-1 w-[20px] h-[20px] flex px-1 justify-center  items-center rounded-full bg-[#EDEEF0]"
+          className="m-0 absolute bottom-1 right-1 w-[20px] h-[20px] flex px-1 justify-center  items-center rounded-full bg-[#EDEEF0]"
           onClick={toggleAudio}
         >
           {audioStreamPaused ? (
diff --git a/packages/ui/src/components/Chat/ViewMember.tsx b/packages/ui/src/components/Chat/ViewMember.tsx
index e6aaf44a96..6177eeba6d 100644
--- a/packages/ui/src/components/Chat/ViewMember.tsx
+++ b/packages/ui/src/components/Chat/ViewMember.tsx
@@ -49,11 +49,11 @@ export const ViewMember = () => {
           return (
             <div className="rounded-[10px] bg-[#15171B] w-[350px] h-[45px] flex flex-wrap">
               <div className="rounded-full ml-4 my-2 bg-[#26282B] w-[30px] h-[30px] justify-between">
-                <img className="w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserIcon} />
+                <img className="max-w-full w-[13.64px] mx-2 h-[28.64px] overflow-hidden" alt="" src={UserIcon} />
               </div>
               <p className="text-[12px] w-[220px] ml-3 font-bold text-white mt-3.5">{item.name}</p>
               <div className="rounded-full  my-2 bg-[#26282B] w-[30px] h-[30px] justify-between">
-                <button className=" w-[40px] ">
+                <button className="m-0 w-[40px] ">
                   <MdDelete className="w-[22px] h-[30px] mx-1 fill-[#DD3333] overflow-hidden" />
                 </button>
               </div>
diff --git a/packages/ui/src/components/tailwind/Header/index.tsx b/packages/ui/src/components/tailwind/Header/index.tsx
index ab7991367f..ff8df8a5b0 100644
--- a/packages/ui/src/components/tailwind/Header/index.tsx
+++ b/packages/ui/src/components/tailwind/Header/index.tsx
@@ -68,14 +68,18 @@ const Header = (props: { mode: State<'playback' | 'capture'> }) => {
             <div className="avatar">
               <div className="w-8 rounded-full">
                 {avatarDetails?.thumbnailResource?.url ? (
-                  <img src={avatarDetails.thumbnailResource?.url} crossOrigin="anonymous" className="w-auto h-8" />
+                  <img
+                    src={avatarDetails.thumbnailResource?.url}
+                    crossOrigin="anonymous"
+                    className="max-w-full w-auto h-8"
+                  />
                 ) : (
                   <UserCircleIcon className="w-8 h-8" />
                 )}
               </div>
             </div>
           </label>
-          <ul tabIndex={0} className="menu dropdown-content p-2 shadow bg-base-100 rounded-box w-52 mt-4">
+          <ul tabIndex={0} className="list-none menu dropdown-content p-2 shadow bg-base-100 rounded-box w-52 mt-4">
             <li>
               <a href="/" target="_blank">
                 Sign in
diff --git a/packages/ui/src/components/tailwind/ThemeSwitcher/index.tsx b/packages/ui/src/components/tailwind/ThemeSwitcher/index.tsx
index 9471bf2d21..4c49be0d84 100644
--- a/packages/ui/src/components/tailwind/ThemeSwitcher/index.tsx
+++ b/packages/ui/src/components/tailwind/ThemeSwitcher/index.tsx
@@ -36,7 +36,10 @@ const ThemeSwitcher = () => {
       <label tabIndex={0} className="btn btn-ghost btn-square">
         <SwatchIcon className="h-6 w-6" />
       </label>
-      <ul tabIndex={1} className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
+      <ul
+        tabIndex={1}
+        className="list-none menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
+      >
         {themeNames.map((key) => {
           return (
             <li key={key} onClick={() => setTheme(key)}>
diff --git a/packages/ui/src/primitives/mui/Dashboard/index.module.scss b/packages/ui/src/primitives/mui/Dashboard/index.module.scss
index 3f2a9ac04b..08b877606a 100644
--- a/packages/ui/src/primitives/mui/Dashboard/index.module.scss
+++ b/packages/ui/src/primitives/mui/Dashboard/index.module.scss
@@ -98,6 +98,7 @@
 
 .appBar {
   z-index: 1000;
+  background: var(--mainBackground);
 }
 
 .drawer {
@@ -108,6 +109,13 @@
   position: fixed;
   height: "100vh";
   pointer-events: auto;
+  
+  ::-webkit-scrollbar{/* Hide scrollbar for Chrome, Safari and Opera */
+    display: none;
+  }
+
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .drawerOpen {
@@ -147,6 +155,9 @@
   padding: 24px;
   background-color: var(--mainBackground);
   height: calc(100vh - 50px);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .contentWidthDrawerOpen {
diff --git a/packages/ui/src/primitives/tailwind/Button/index.tsx b/packages/ui/src/primitives/tailwind/Button/index.tsx
index 67386a76f1..bc591dc480 100644
--- a/packages/ui/src/primitives/tailwind/Button/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Button/index.tsx
@@ -47,7 +47,7 @@ interface ButtonProps {
 }
 
 const Button = ({ icon, title, showLabel, labelPosition, className, ...props }: ButtonProps & any): JSX.Element => (
-  <button className={twMerge('btn h-auto tooltip', className)} {...props} data-tip={title}>
+  <button className={twMerge('m-0 btn h-auto tooltip', className)} {...props} data-tip={title}>
     {labelPosition === 'above' ? (
       <span className="flex flex-col items-center">
         {showLabel === true ? <span className="mb-1">{title}</span> : null}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 39423fc116..13cce4c2ad 100755
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -6,9 +6,6 @@
       "dom",
       "dom.iterable"
     ],
-    "paths": {
-      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
-    },
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,