diff --git a/src/components/common/AutoComplete.tsx b/src/components/common/AutoComplete.tsx
index fe53d4ab029ec8f9b73dd8daf0e4445509460224..ecdc921444a78dfccec9f079e492b1d1bb07f869 100644
--- a/src/components/common/AutoComplete.tsx
+++ b/src/components/common/AutoComplete.tsx
@@ -353,13 +353,13 @@ const Base = styled.div<{ detached?: boolean }>`
         display: flex;
         font-size: 1em;
         cursor: pointer;
-        border-radius: 6px;
         align-items: center;
         flex-direction: row;
+        font-family: inherit;
         background: transparent;
         color: var(--foreground);
         width: calc(100% - 12px);
-        font-family: inherit;
+        border-radius: var(--border-radius);
 
         span {
             display: grid;
@@ -377,7 +377,7 @@ const Base = styled.div<{ detached?: boolean }>`
             bottom: 8px;
 
             > div {
-                border-radius: 4px;
+                border-radius: var(--border-radius);
             }
         `}
 `;
diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx
index 8898186ce006691d9d8d9efe2b75305bc43144e2..4b58d38096ff531f861d248cceb3dc0ae322662d 100644
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/src/components/common/messaging/MessageBase.tsx
@@ -37,8 +37,8 @@ export default styled.div<BaseMessageProps>`
         props.contrast &&
         css`
             padding: 0.3rem;
-            border-radius: 4px;
             background: var(--hover);
+            border-radius: var(--border-radius);
         `}
 
     ${(props) =>
diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss
index 00888785487ff8e84ee8a31e90479168b83faac7..1b0e862a63594d03d20af81d9616740122f0f45d 100644
--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/src/components/common/messaging/attachments/Attachment.module.scss
@@ -1,7 +1,7 @@
 .attachment {
     display: grid;
-    grid-auto-columns: min(100%, 480px);
     grid-auto-flow: row dense;
+    grid-auto-columns: min(100%, var(--attachment-max-width));
     
     margin: .125rem 0 .125rem;
     width: max-content;
@@ -16,11 +16,10 @@
         gap: 4px;
         padding: 6px;
         display: flex;
-        border-radius: 6px;
+        max-width: 100%;
         flex-direction: column;
+        width: var(--attachment-default-width);
         background: var(--secondary-background);
-        width: 400px;
-        max-width: 100%;
 
         > audio {
             width: 100%;
@@ -29,22 +28,20 @@
 
     &.file {
         > div {
-            width: 400px;
-            max-width: 100%;
             padding: 12px;
+            max-width: 100%;
             user-select: none;
             width: fit-content;
-            border-radius: 6px;
+            border-radius: var(--border-radius);
+            width: var(--attachment-default-width);
         }
     }
 
     &.text {
         width: 100%;
-        max-width: 800px;
         overflow: hidden;
         grid-auto-columns: unset;
-
-        border-radius: 6px;
+        max-width: var(--attachment-max-text-width);
 
         .textContent {
             height: 140px;
@@ -83,10 +80,10 @@
     width: fit-content;
 
     > :first-child {
-        width: min(480px, 100%, var(--width));
+        width: min(var(--attachment-max-width), 100%, var(--width));
     }
 }
 
 .container, .attachment, .image {
-    border-radius: 6px;
+    border-radius: var(--border-radius);
 }
diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx
index abdfde361e23dcdc5634fdbc54914d1bf4d14d69..d391714a86a43084027827e1caec1770d2935d22 100644
--- a/src/components/common/messaging/attachments/Grid.tsx
+++ b/src/components/common/messaging/attachments/Grid.tsx
@@ -3,8 +3,8 @@ import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div`
     display: grid;
-    max-width: min(480px, 100%, var(--width));
-    max-height: min(640px, var(--height));
+    max-width: min(var(--attachment-max-width), 100%, var(--width));
+    max-height: min(var(--attachment-max-height), var(--height));
     aspect-ratio: var(--aspect-ratio);
 
     img, video {
diff --git a/src/components/common/messaging/bars/FilePreview.tsx b/src/components/common/messaging/bars/FilePreview.tsx
index b33edcaaaee3b68aebc7e8ea25903fcf727a86db..eb5110a1ada7f081a9065d3906edf023bd7bd5d5 100644
--- a/src/components/common/messaging/bars/FilePreview.tsx
+++ b/src/components/common/messaging/bars/FilePreview.tsx
@@ -68,7 +68,7 @@ const Divider = styled.div`
     width: 4px;
     height: 130px;
     flex-shrink: 0;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     background: var(--tertiary-background);
 `;
 
@@ -78,8 +78,8 @@ const EmptyEntry = styled.div`
     display: grid;
     flex-shrink: 0;
     cursor: pointer;
-    border-radius: 4px;
     place-items: center;
+    border-radius: var(--border-radius);
     background: var(--primary-background);
     transition: 0.1s ease background-color;
 
@@ -93,12 +93,10 @@ const PreviewBox = styled.div`
     grid-template: "main" 100px / minmax(100px, 1fr);
     justify-items: center;
 
-    background: var(--primary-background);
-
-    overflow: hidden;
-
     cursor: pointer;
-    border-radius: 4px;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    background: var(--primary-background);
 
     .icon,
     .overlay {
diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx
index 1fdea46d07d8f432c8215caf751daf67a4b0cf85..b5248cd3b0324184acc1706f89b4e9eb1b370f41 100644
--- a/src/components/common/messaging/bars/JumpToBottom.tsx
+++ b/src/components/common/messaging/bars/JumpToBottom.tsx
@@ -17,18 +17,18 @@ const Bar = styled.div`
         height: 28px;
         width: 100%;
         position: absolute;
-        border-radius: 4px 4px 0 0;
         display: flex;
         align-items: center;
         cursor: pointer;
         font-size: 13px;
         padding: 0 8px;
         user-select: none;
-        color: var(--secondary-foreground);
-        background: var(--secondary-background);
         justify-content: space-between;
+        color: var(--secondary-foreground);
         transition: color ease-in-out 0.08s;
-
+        background: var(--secondary-background);
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+        
         > div {
             display: flex;
             align-items: center;
diff --git a/src/components/common/messaging/embed/Embed.module.scss b/src/components/common/messaging/embed/Embed.module.scss
index 5493b96b951074b0a3f6e3f4709c72acdd306a7e..0ab26edd1727e4a9bc09edd239a6e9e80a8ae5a1 100644
--- a/src/components/common/messaging/embed/Embed.module.scss
+++ b/src/components/common/messaging/embed/Embed.module.scss
@@ -3,7 +3,7 @@
 
     iframe {
         border: none;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
     }
 
     &.image {
@@ -27,8 +27,8 @@
 
         padding: 12px;
         width: fit-content;
-        border-radius: 4px;
         background: var(--primary-header);
+        border-radius: var(--border-radius);
 
         .siteinfo {
             display: flex;
@@ -91,7 +91,7 @@
         img.image {
             cursor: pointer;
             object-fit: contain;
-            border-radius: 3px;
+            border-radius: var(--border-radius);
         }
     }
 }
diff --git a/src/components/markdown/Markdown.module.scss b/src/components/markdown/Markdown.module.scss
index 202ce12edde7c4561ce07162fa31584fb698e235..60056cf524bcbda9a57fadcf124e6f34dcd0bd02 100644
--- a/src/components/markdown/Markdown.module.scss
+++ b/src/components/markdown/Markdown.module.scss
@@ -26,9 +26,9 @@
         &[data-type="mention"] {
             padding: 0 6px;
             font-weight: 600;
-            border-radius: 12px;
             display: inline-block;
             background: var(--secondary-background);
+            border-radius: calc(var(--border-radius) * 2);
 
             &:hover {
                 text-decoration: none;
@@ -61,8 +61,8 @@
     blockquote {
         margin: 2px 0;
         padding: 2px 0;
-        border-radius: 4px;
         background: var(--hover);
+        border-radius: var(--border-radius);
         border-inline-start: 4px solid var(--tertiary-background);
 
         > * {
@@ -72,9 +72,8 @@
 
     pre {
         padding: 1em;
-        border-radius: 4px;
         overflow-x: scroll;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         background: var(--block) !important;
     }
 
@@ -85,8 +84,8 @@
     code {
         color: white;
         font-size: 90%;
-        border-radius: 4px;
         background: var(--block);
+        border-radius: var(--border-radius);
         font-family: var(--monoscape-font), monospace;
     }
 
@@ -113,9 +112,9 @@
         padding: 0 2px;
         cursor: pointer;
         user-select: none;
-        border-radius: 4px;
         color: transparent;
         background: #151515;
+        border-radius: var(--border-radius);
 
         > * {
             opacity: 0;
@@ -137,14 +136,10 @@
         font-family: var(--monoscape-font), monospace;
 
         :global(.lang) {
-            // height: 8px;
-            // position: relative;
-
+            width: fit-content;
+            padding-bottom: 8px;
+            
             div {
-                // margin-left: -5px;
-                // margin-top: -16px;
-                // position: absolute;
-
                 color: #111;
                 cursor: pointer;
                 padding: 2px 6px;
@@ -163,10 +158,6 @@
                     box-shadow: 0 1px #787676;
                 }
             }
-
-            // ! FIXME: had to change this temporarily due to overflow
-            width: fit-content;
-            padding-bottom: 8px;
         }
     }
 
@@ -187,10 +178,10 @@
         font-size: 10px;
         margin-right: 6px;
         line-height: 12px;
-        position: relative;
-        border-radius: 4px;
         background: white;
+        position: relative;
         display: inline-block;
+        border-radius: var(--border-radius);
     }
 
     input[type="checkbox"][checked="true"] + label:before {
diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index 04e705b7432f8cb005fcd5c660120a6bd12c557d..123aa74321b2171ff5806c9192c80cdfe8ffc518 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/src/components/navigation/items/Item.module.scss
@@ -3,8 +3,8 @@
     display: flex;
     padding: 0 8px;
     user-select: none;
-    border-radius: 6px;
     margin-bottom: 2px;
+    border-radius: var(--border-radius);
 
     gap: 8px;
     align-items: center;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 6fd41b2eeddb6e0caa39d697ef5de016e4a71c05..0fefdab314b6f45236519e3a4d4762b7d71baf40 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -30,7 +30,7 @@ export default styled.button<Props>`
     background: var(--primary-background);
     color: var(--foreground);
 
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     border: none;
 
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
index 26e531d573536adebcba56bfd92a94f5080ad425..8f52ac1b96bb2ef04c99da6a8fe485b070a70f0f 100644
--- a/src/components/ui/Checkbox.tsx
+++ b/src/components/ui/Checkbox.tsx
@@ -4,12 +4,12 @@ import styled, { css } from "styled-components";
 import { Children } from "../../types/Preact";
 
 const CheckboxBase = styled.label`
-    margin-top: 20px;
     gap: 4px;
     z-index: 1;
     display: flex;
-    border-radius: 4px;
+    margin-top: 20px;
     align-items: center;
+    border-radius: var(--border-radius);
 
     cursor: pointer;
     font-size: 18px;
@@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
     height: 24px;
     display: grid;
     flex-shrink: 0;
-    border-radius: 4px;
     place-items: center;
     transition: 0.2s ease all;
+    border-radius: var(--border-radius);
     background: var(--secondary-background);
 
     svg {
diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index b34c914e3b436df36d298f84d6bc198b60f764df..49951a2e11ba30803068b5511b194ef418171872 100644
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -63,7 +63,7 @@ const SwatchesBase = styled.div`
 const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
     flex-shrink: 0;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     background-color: ${(props) => props.colour};
 
     display: grid;
diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx
index 44d100c21d880fed79f4cd066a809548eeb22c9d..b0b36087990537bbfb9245557ae71b7431dce245 100644
--- a/src/components/ui/ComboBox.tsx
+++ b/src/components/ui/ComboBox.tsx
@@ -1,18 +1,20 @@
 import styled from "styled-components";
 
 export default styled.select`
+    width: 100%;
     padding: 10px;
-    border-radius: 6px;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    
     font-family: inherit;
+    font-size: var(--text-size);
     color: var(--secondary-foreground);
     background: var(--secondary-background);
-    font-size: var(--text-size);
+
     border: none;
     outline: 2px solid transparent;
-    transition: outline-color 0.2s ease-in-out;
     transition: box-shadow 0.2s ease-in-out;
-    cursor: pointer;
-    width: 100%;
+    transition: outline-color 0.2s ease-in-out;
 
     &:focus {
         box-shadow: 0 0 0 1.5pt var(--accent);
diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx
index 56aef02578cb7b7739ae8689da3fb767ef4b891e..e8ccdb6c437f5a7bd79ab334c000572217a09779 100644
--- a/src/components/ui/InputBox.tsx
+++ b/src/components/ui/InputBox.tsx
@@ -6,9 +6,9 @@ interface Props {
 
 export default styled.input<Props>`
     z-index: 1;
-    padding: 8px 16px;
-    border-radius: 6px;
     font-size: 1rem;
+    padding: 8px 16px;
+    border-radius: var(--border-radius);
 
     font-family: inherit;
     color: var(--foreground);
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index d9c9a1004b184479de26c66a68569f79bd19cc82..28c6dfa7d1a4acf70e9ca3a7caf753af2d3ca2a0 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -60,8 +60,8 @@ const ModalBase = styled.div`
 
 const ModalContainer = styled.div`
     overflow: hidden;
-    border-radius: 8px;
     max-width: calc(100vw - 20px);
+    border-radius: var(--border-radius);
 
     animation-name: ${zoomIn};
     animation-duration: 0.25s;
@@ -71,8 +71,8 @@ const ModalContainer = styled.div`
 const ModalContent = styled.div<
     { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
 >`
-    border-radius: 8px;
     text-overflow: ellipsis;
+    border-radius: var(--border-radius);
 
     h3 {
         margin-top: 0;
@@ -98,13 +98,13 @@ const ModalContent = styled.div<
     ${(props) =>
         props.attachment &&
         css`
-            border-radius: 8px 8px 0 0;
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
         `}
 
     ${(props) =>
         props.border &&
         css`
-            border-radius: 10px;
+            border-radius: var(--border-radius);
             border: 2px solid var(--secondary-background);
         `}
 `;
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index bf194cc096c8ce1a2e5113b7c773baa7b3b425b2..9912fd5deae52387d17cebbe19d7edf8d01a4625 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -27,8 +27,8 @@ const RadioBase = styled.label<BaseProps>`
     font-size: 1rem;
     font-weight: 600;
     user-select: none;
-    border-radius: 4px;
     transition: 0.2s ease all;
+    border-radius: var(--border-radius);
 
     &:hover {
         background: var(--hover);
diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx
index 31a01fc5b4800dee5699cd8a026371e3986658eb..2469415f5de255df269911a966ec10e1c2e2566d 100644
--- a/src/components/ui/TextArea.tsx
+++ b/src/components/ui/TextArea.tsx
@@ -30,7 +30,7 @@ export default styled.textarea<TextAreaProps>`
     ${(props) =>
         !props.hideBorder &&
         css`
-            border-radius: 4px;
+            border-radius: var(--border-radius);
             transition: border-color 0.2s ease-in-out;
             border: var(--input-border-width) solid transparent;
         `}
diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx
index 053af1c59286215f7d7f69a53ddb5e44cd1f131f..23621168c77249a94db191e48ac7b84b2d3f97d2 100644
--- a/src/components/ui/Tip.tsx
+++ b/src/components/ui/Tip.tsx
@@ -22,8 +22,8 @@ export const TipBase = styled.div<Props>`
     align-items: center;
 
     font-size: 14px;
-    border-radius: 7px;
     background: var(--primary-header);
+    border-radius: var(--border-radius);
     border: 2px solid var(--secondary-header);
 
     a {
diff --git a/src/context/intermediate/modals/Onboarding.module.scss b/src/context/intermediate/modals/Onboarding.module.scss
index 93f5e4b99aba6d183f95753181b9e797b0ff549b..ea1a13ce00230b5834e17375358474945a3fe230 100644
--- a/src/context/intermediate/modals/Onboarding.module.scss
+++ b/src/context/intermediate/modals/Onboarding.module.scss
@@ -26,7 +26,7 @@
                 margin: auto;
                 display: block;
                 max-height: 420px;
-                border-radius: 8px;
+                border-radius: var(--border-radius);
             }
 
             input {
diff --git a/src/context/intermediate/popovers/UserProfile.module.scss b/src/context/intermediate/popovers/UserProfile.module.scss
index 06b8ebe1fd77c88be11166fe9208dcff2c64a5bc..e1819b5c17831152f650d1d925582727d6479ba3 100644
--- a/src/context/intermediate/popovers/UserProfile.module.scss
+++ b/src/context/intermediate/popovers/UserProfile.module.scss
@@ -7,7 +7,7 @@
 
 .header {
     background-size: cover;
-    border-radius: 8px 8px 0 0;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
     background-position: center;
     background-color: var(--secondary-background);
 
@@ -140,11 +140,11 @@
         padding: 12px;
         display: flex;
         cursor: pointer;
-        border-radius: 4px;
         align-items: center;
+        transition: background-color .1s;
         color: var(--secondary-foreground);
+        border-radius: var(--border-radius);
         background-color: var(--secondary-background);
-        transition: background-color .1s;
 
         &:hover {
             background-color: var(--primary-background);
diff --git a/src/context/revoltjs/FileUploads.module.scss b/src/context/revoltjs/FileUploads.module.scss
index 2d5a3b394bb02fd38c1fcee661d9b98f4bf285cc..929c45aea817342e39b1cd2ba1504dfae7221be6 100644
--- a/src/context/revoltjs/FileUploads.module.scss
+++ b/src/context/revoltjs/FileUploads.module.scss
@@ -10,7 +10,7 @@
 
     &.banner {
         .image {
-            border-radius: 4px;
+            border-radius: var(--border-radius);
         }
 
         .modify {
diff --git a/src/pages/channels/messaging/MessageEditor.tsx b/src/pages/channels/messaging/MessageEditor.tsx
index ba93b91b10ba5f3955985a7ca21b9832c157623a..305ca42dc0d1b23b4ef075051fde1e0b6aad0b02 100644
--- a/src/pages/channels/messaging/MessageEditor.tsx
+++ b/src/pages/channels/messaging/MessageEditor.tsx
@@ -23,9 +23,9 @@ const EditorBase = styled.div`
     textarea {
         resize: none;
         padding: 12px;
-        border-radius: 3px;
         white-space: pre-wrap;
         font-size: var(--text-size);
+        border-radius: var(--border-radius);
         background: var(--secondary-header);
     }
 
diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx
index 016391ed641fb778198c9d5d67bf8b39e693f801..deed4fa7c56bc0f68e43221555e41835fb903f77 100644
--- a/src/pages/channels/voice/VoiceHeader.tsx
+++ b/src/pages/channels/voice/VoiceHeader.tsx
@@ -27,18 +27,20 @@ const VoiceBase = styled.div`
     background: var(--secondary-background);
 
     .status {
-        position: absolute;
-        color: var(--success);
-        background: var(--primary-background);
+        flex: 1 0;
         display: flex;
+        position: absolute;
         align-items: center;
+        
         padding: 10px;
         font-size: 14px;
         font-weight: 600;
-        border-radius: 7px;
-        flex: 1 0;
         user-select: none;
 
+        color: var(--success);
+        border-radius: var(--border-radius);
+        background: var(--primary-background);
+
         svg {
             margin-inline-end: 4px;
             cursor: help;
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 1144a14fb635ce74e4f59773f93d6e5eb0dd31b7..81e3ff0911136236877287e2d7a184bb9256c542 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -18,7 +18,7 @@
     &[data-empty="true"] {
         img {
             height: 120px;
-            border-radius: 8px;
+            border-radius: var(--border-radius);
         }
 
         gap: 16px;
@@ -35,12 +35,12 @@
 }
 
 .friend {
-    padding: 0 10px;
     height: 60px;
     display: flex;
-    border-radius: 5px;
-    align-items: center;
+    padding: 0 10px;
     cursor: pointer;
+    align-items: center;
+    border-radius: var(--border-radius);
 
     &:hover {
         background: var(--secondary-background);
@@ -110,9 +110,9 @@
     display: flex;
     cursor: pointer;
     margin-top: 1em;
-    border-radius: 7px;
     align-items: center;
     flex-direction: row;
+    border-radius: var(--border-radius);
     background: var(--secondary-background);
 
     svg {
diff --git a/src/pages/invite/Invite.module.scss b/src/pages/invite/Invite.module.scss
index 58814516539e8c91e091675a8f89885d2f3c4b8b..36b50dddb9d9079b19ed86ccd2bcaf6f015adca4 100644
--- a/src/pages/invite/Invite.module.scss
+++ b/src/pages/invite/Invite.module.scss
@@ -34,10 +34,10 @@
 
     .details {
         text-align: center;
-        border-radius: 3px;
         align-self: center;
         padding: 32px 16px 16px 16px;
         background: rgba(0, 0, 0, 0.6);
+        border-radius: var(--border-radius);
         
         h1 {
             margin: 0;
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 6f058da1f0a732223a32f054f56f1e5ca664b79d..f90ba442c039d0f98b87ed3481a9f706e2d219bc 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -4,10 +4,10 @@
         width: 100%;
         padding: 1em;
         display: flex;
-        border-radius: 6px;
+        overflow: hidden;
         align-items: center;
         background: var(--secondary-header);
-        overflow: hidden;
+        border-radius: var(--border-radius);
 
         .avatar {
             cursor: pointer;
@@ -144,7 +144,7 @@
 
         img {
             cursor: pointer;
-            border-radius: 8px;
+            border-radius: var(--border-radius);
             transition: border 0.3s;
             border: 3px solid transparent;
 
@@ -195,10 +195,10 @@
             place-items: center;
 
             cursor: pointer;
-            border-radius: 8px;
             transition: border 0.3s;
             background: var(--hover);
             border: 3px solid transparent;
+            border-radius: var(--border-radius);
 
             img {
                 max-width: 100%;
@@ -262,8 +262,8 @@
             min-width: 0;
             flex-grow: 1;
             padding: 8px;
-            border-radius: 4px;
             font-family: var(--codeblock-font);
+            border-radius: var(--border-radius);
             background: var(--secondary-background);
 
             > div {
@@ -285,8 +285,8 @@
         .entry {
             padding: 12px;
             margin-top: 8px;
-            border-radius: 6px;
             border: 1px solid black;
+            border-radius: var(--border-radius);
 
             span {
                 flex: 1;
@@ -312,8 +312,8 @@
                     height: 38px;
                     display: grid;
                     cursor: pointer;
-                    border-radius: 6px;
                     place-items: center;
+                    border-radius: var(--border-radius);
                     background: var(--primary-background);
                 }
 
@@ -339,29 +339,6 @@
                     top: 48px;
                 }
             }
-
-            /*.override {
-                display: flex;
-            }
-
-
-            .picker {
-                width: 30px;
-                height: 30px;
-                flex-shrink: 0;
-                border-radius: 4px;
-                overflow: hidden;
-                margin-inline-end: 4px;
-
-                //TOFIX - Looks wonky on Chromium
-                border: 1px solid black;
-
-            }
-
-            .text {
-                border-radius: 4px;
-                padding: 0 4px 0;
-            }*/
         }
     }
 }
@@ -383,11 +360,11 @@
     }
 
     .entry {
-        margin: 10px 0;
         padding: 16px;
         display: flex;
-        border-radius: 6px;
+        margin: 10px 0;
         flex-direction: column;
+        border-radius: var(--border-radius);
         background: var(--secondary-header);
 
         &[data-active="true"] {
diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss
index 55f82c174cdc331b90ca88ec171eb90bdbaff6b8..31d4b23f924e22fe7fd10ec5ca1069664eb461af 100644
--- a/src/styles/_context-menu.scss
+++ b/src/styles/_context-menu.scss
@@ -3,9 +3,9 @@
     min-width: 190px;
     padding: 6px 8px;
     user-select: none;
-    border-radius: 4px;
     font-size: .875rem;
     color: var(--secondary-foreground);
+    border-radius: var(--border-radius);
     background: var(--primary-background) !important;
     box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05);
 
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 83daa2bac9582d887054cc0c562202fbb731cfe4..4966a4900674055f2456c61af0632422ccab4319 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,19 +1,34 @@
 :root {
+    /**
+     * Appearance
+     */
     --ligatures: none;
     --text-size: 14px;
     --font: "Open Sans";
-    --app-height: 100vh;
     --codeblock-font: "Fira Code";
     --sidebar-active: var(--secondary-background);
-
-    --background-rgb: (25,25,25); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
-    --background-rgba: rgba(var(--background-rgb), .8); //make the opacity also customizable
+    
+    /**
+     * Layout
+     */
+    --app-height: 100vh;
+    --border-radius: 6px;
     
     --input-border-width: 2px;
-
     --textarea-padding: 16px;
     --textarea-line-height: 20px;
     --message-box-padding: 14px 14px 14px 0;
 
+    --attachment-max-width: 480px;
+    --attachment-max-height: 640px;
+    --attachment-default-width: 400px;
+    --attachment-max-text-width: 800px;
+
     --bottom-navigation-height: 50px;
+
+    /**
+     * Experimental
+     */
+    --background-rgb: (25,25,25); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
+    --background-rgba: rgba(var(--background-rgb), .8); //make the opacity also customizable
 }