diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss
deleted file mode 100644
index ef5179ef2..000000000
--- a/stylesheets/_emoji.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-span.emoji {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  width: 1em;
-  height: 1em;
-  background-size: 1em;
-  background-repeat: no-repeat;
-  text-indent: -9999px;
-  background-position: 50%, 50%;
-  background-size: contain;
-}
-
-span.emoji-sizer {
-  line-height: 0.81em;
-  font-size: 1em;
-  margin: -2px 0;
-}
-
-span.emoji-outer {
-  display: -moz-inline-box;
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-}
-
-span.emoji-inner {
-  display: -moz-inline-box;
-  display: inline-block;
-  text-indent: -9999px;
-  width: 100%;
-  height: 100%;
-  vertical-align: baseline;
-}
-
-img.emoji {
-  width: 1em;
-  height: 1em;
-  margin-bottom: -1px;
-}
-
-img.emoji.small {
-  width: 1.1em;
-  height: 1.1em;
-}
-img.emoji.medium {
-  width: 1.3em;
-  height: 1.3em;
-}
-img.emoji.large {
-  width: 1.7em;
-  height: 1.7em;
-}
-img.emoji.jumbo {
-  width: 2em;
-  height: 2em;
-}
-
-// we need these, or we'll make conversation items too big in the left-nav
-.conversations img.emoji.small {
-  width: 1em;
-  height: 1em;
-}
-.conversations img.emoji.medium {
-  width: 1em;
-  height: 1em;
-}
-.conversations img.emoji.large {
-  width: 1em;
-  height: 1em;
-}
-.conversations img.emoji.jumbo {
-  width: 1em;
-  height: 1em;
-}
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index d77a6aa3b..445c056e1 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -6,6 +6,7 @@ html {
   height: 100%;
   // Default theme is Classic Dark
   background-color: #1b1b1b;
+  font-size: 14px;
 }
 
 body {
@@ -14,7 +15,6 @@ body {
   width: 100%;
   margin: 0;
   font-family: $session-font-default;
-  font-size: 14px;
   letter-spacing: 0.3px;
 }
 
@@ -102,7 +102,7 @@ a {
   .message {
     -webkit-user-select: text;
     user-select: text;
-    max-width: 35em;
+    max-width: 35rem;
   }
 
   .dot {
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index f48a4bac0..377b3f550 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -31,7 +31,7 @@
 
   .module-avatar {
     display: block;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
   }
 
   .avatar-center {
@@ -52,7 +52,7 @@
 .section-conversations-container {
   display: flex;
   flex-direction: row;
-  margin-inline-end: 3em;
+  margin-inline-end: 3rem;
   align-items: center;
 
   h4 {
diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index e65308f8a..2f12235d6 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -13,7 +13,7 @@
     position: relative;
     max-width: 350px;
     margin: 100px auto;
-    padding: 1em;
+    padding: 1rem;
     background-color: var(--modal-background-content-color);
     border-radius: var(--border-radius);
     overflow: auto;
@@ -23,7 +23,7 @@
 
 /* remove scroll bars */
 .loki-dialog .add-moderators-dialog .content {
-  padding: 1.1em;
+  padding: 1.1rem;
 }
 
 .session-modal {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index bca667803..31f2aa42d 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -420,7 +420,7 @@
 
   .session-button {
     width: 160px;
-    margin: 1em auto;
+    margin: 1rem auto;
   }
 }
 
@@ -957,7 +957,7 @@
   font-size: 14px;
 
   overflow: hidden;
-  height: 2.4em;
+  height: 2.4rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index 8750cc95e..e3f82e22a 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -69,7 +69,7 @@
       font-size: 14px;
       font-weight: 700;
       line-height: 14px;
-      padding-top: 2em;
+      padding-top: 2rem;
       text-align: center;
     }
 
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 14fcfa59a..65e16951a 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -15,7 +15,6 @@
 // Components
 @import 'modal';
 @import 'lightbox';
-@import 'emoji';
 @import 'mentions';
 @import 'avatar';
 
diff --git a/ts/components/AboutView.tsx b/ts/components/AboutView.tsx
index 8f7cb71cd..bea3ff915 100644
--- a/ts/components/AboutView.tsx
+++ b/ts/components/AboutView.tsx
@@ -15,7 +15,7 @@ const StyledContent = styled.div`
 
   img {
     padding: 12px;
-    margin-top: 1em;
+    margin-top: 1rem;
   }
 
   a {
diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx
index 80a654f65..ee8a87317 100644
--- a/ts/components/DebugLogView.tsx
+++ b/ts/components/DebugLogView.tsx
@@ -17,8 +17,8 @@ const StyledContent = styled.div`
   height: 100%;
 
   .session-button {
-    margin: 1em auto 1em 0;
-    padding: 1em;
+    margin: 1rem auto 1rem 0;
+    padding: 1rem;
     width: fit-content;
   }
 
diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx
index 903bbf672..54dd01adc 100644
--- a/ts/components/basic/YourSessionIDPill.tsx
+++ b/ts/components/basic/YourSessionIDPill.tsx
@@ -4,14 +4,14 @@ import { UserUtils } from '../../session/utils';
 
 const StyledPillDividerLine = styled.div`
   border-bottom: 1px solid var(--border-color);
-  line-height: 0.1em;
+  line-height: 0.1rem;
   flex-grow: 1;
   height: 1px;
   align-self: center;
 `;
 
 const StyledPillSpan = styled.span`
-  padding: 5px 15px;
+  padding: 6px 15px 5px;
   border-radius: 50px;
   color: var(--text-primary-color);
   border: 1px solid var(--border-color);
diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx
index 66f6aaf77..e86717a4a 100644
--- a/ts/components/conversation/Emojify.tsx
+++ b/ts/components/conversation/Emojify.tsx
@@ -41,5 +41,5 @@ export const Emojify = (props: Props): JSX.Element => {
     default:
   }
 
-  return <span style={{ fontSize: `${size}em`, userSelect: 'inherit' }}>{rendered}</span>;
+  return <span style={{ fontSize: `${size}rem`, userSelect: 'inherit' }}>{rendered}</span>;
 };
diff --git a/ts/components/conversation/SessionFileDropzone.tsx b/ts/components/conversation/SessionFileDropzone.tsx
index 108ca7735..9a6b87430 100644
--- a/ts/components/conversation/SessionFileDropzone.tsx
+++ b/ts/components/conversation/SessionFileDropzone.tsx
@@ -12,8 +12,8 @@ const DropZoneContainer = styled.div`
 `;
 
 const DropZoneWithBorder = styled.div`
-  border: dashed 4px var(--primary-color);
-  background-color: var(--message-link-preview-background-color);
+  border: dashed 4px var(--file-dropzone-border-color);
+  background-color: var(--file-dropzone-background-color);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -29,7 +29,11 @@ export const SessionFileDropzone = () => {
     <DropZoneContainer>
       <DropZoneWithBorder>
         <Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
-          <SessionIcon iconColor="var(--primary-color)" iconSize={'max'} iconType="circlePlus" />
+          <SessionIcon
+            iconColor="var(--file-dropzone-border-color)"
+            iconSize={'max'}
+            iconType="circlePlus"
+          />
         </Flex>
       </DropZoneWithBorder>
     </DropZoneContainer>
diff --git a/ts/components/conversation/composition/EmojiQuickResult.tsx b/ts/components/conversation/composition/EmojiQuickResult.tsx
index 7b7450d65..c1c1e3b51 100644
--- a/ts/components/conversation/composition/EmojiQuickResult.tsx
+++ b/ts/components/conversation/composition/EmojiQuickResult.tsx
@@ -6,6 +6,8 @@ import { SearchIndex } from 'emoji-mart';
 import { searchSync } from '../../../util/emoji.js';
 
 const EmojiQuickResult = styled.span`
+  display: flex;
+  align-items: center;
   width: 100%;
   padding-inline-end: 20px;
   padding-inline-start: 10px;
@@ -13,7 +15,7 @@ const EmojiQuickResult = styled.span`
 const EmojiQuickResultIcon = styled.span`
   padding-inline-end: 20px;
   padding-inline-start: 10px;
-  font-size: 1.4em;
+  font-size: 1.4rem;
 `;
 const EmojiQuickResultText = styled.span``;
 
diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
index 742050313..1f49a35ae 100644
--- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
+++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
@@ -115,7 +115,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   display: flex;
   align-items: center;
   width: 100%;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.03rem;
   padding: var(--margins-xs) var(--margins-lg) 0;
 
   &.message-highlighted {
diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx
index 99da0b924..26281b828 100644
--- a/ts/components/icon/SessionNotificationCount.tsx
+++ b/ts/components/icon/SessionNotificationCount.tsx
@@ -8,9 +8,10 @@ type Props = {
 const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
   position: absolute;
   font-size: 18px;
+  line-height: 1.2;
   top: 27px;
-  right: 8px;
-  padding: 0 6px;
+  left: 28px;
+  padding: 1px 4px;
   opacity: 1;
   display: flex;
   align-items: center;
diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx
index 7c4a71587..494f6c04b 100644
--- a/ts/components/leftpane/MessageRequestsBanner.tsx
+++ b/ts/components/leftpane/MessageRequestsBanner.tsx
@@ -48,7 +48,7 @@ const StyledUnreadCounter = styled.div`
   margin-left: var(--margins-sm);
   min-width: 20px;
   height: 20px;
-  line-height: 25px;
+  line-height: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index f04171d44..323ebcb03 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -64,7 +64,7 @@ export const classicDark: ThemeColorVariables = {
   '--button-icon-stroke-selected-color': 'var(--text-primary-color)',
 
   '--conversation-tab-background-color': 'var(--background-primary-color)',
-  '--conversation-tab-background-hover-color': THEMES.CLASSIC_DARK.COLOR2,
+  '--conversation-tab-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,
   '--conversation-tab-background-selected-color': THEMES.CLASSIC_DARK.COLOR3,
   '--conversation-tab-background-unread-color': THEMES.CLASSIC_DARK.COLOR2,
   '--conversation-tab-text-color': 'var(--text-secondary-color)',
@@ -153,4 +153,7 @@ export const classicDark: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--primary-color)',
 };
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index 931ec4838..87584cd38 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -153,4 +153,7 @@ export const classicLight: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index 2de8563e6..fe9908591 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -154,4 +154,7 @@ export const oceanDark: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': THEMES.OCEAN_DARK.COLOR7!,
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--primary-color)',
 };
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index fd2e30f6e..4cf2d064d 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -154,4 +154,7 @@ export const oceanLight: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx
index 0d18afb29..105825bc5 100644
--- a/ts/themes/variableColors.tsx
+++ b/ts/themes/variableColors.tsx
@@ -189,6 +189,10 @@ export type ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': string;
   '--call-buttons-dropdown-color': string;
   '--call-buttons-dropdown-shadow': string;
+
+  /* File Dropzone */
+  '--file-dropzone-background-color': string;
+  '--file-dropzone-border-color': string;
 };
 
 export function loadThemeColors(variables: ThemeColorVariables) {