diff --git a/frontend/public/global.css b/frontend/public/global.css
index 344c663..837ff12 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -166,17 +166,24 @@ body {
 	flex-direction: column;
 	background-color: var(--background-color-1);
 	border-radius: var(--radius-lg);
-	padding: var(--space-md);
 }
 
 .modal-header {
-	margin-bottom: var(--space-md);
-	text-align: center;
+	font-weight: bold;
+	padding: var(--space-md);
+}
+
+.modal-content {
+	padding: var(--space-md);
+	padding-top: 0;
 }
 
 .modal-footer {
 	margin-top: auto;
-	padding-top: var(--space-lg);
+	padding: var(--space-md);
+	background-color: var(--background-color-0);
+	border-bottom-right-radius: var(--radius-lg);
+	border-bottom-left-radius: var(--radius-lg);
 }
 
 .modal-primary-action {
@@ -191,14 +198,18 @@ body {
 	.modal {
 		width: 100%;
 		border-radius: var(--radius-xl);
+	}
+	.modal, .modal-footer {
 		border-bottom-left-radius: 0;
 		border-bottom-right-radius: 0;
 	}
+
 	.modal-backdrop {
 		align-items: flex-end;
 		justify-content: center;
 		backdrop-filter: unset;
 	}
+
 	.modal-backdrop-opaque {
 		display: block;
 	}
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index 148481a..cdd2dfc 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -66,10 +66,6 @@
     }
 
     .sidebar-channel-buttons {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: row;
         flex-shrink: 0;
         margin-left: auto;
     }
diff --git a/frontend/src/components/overlays/CreateAccount.svelte b/frontend/src/components/overlays/CreateAccount.svelte
index 7d46a29..55be79c 100644
--- a/frontend/src/components/overlays/CreateAccount.svelte
+++ b/frontend/src/components/overlays/CreateAccount.svelte
@@ -58,17 +58,19 @@
             <span class="h4">Create an Account</span>
         </div>
 
-        <label class="input-label">
-            Username
-            <input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
-        </label>
-
-        <div class="separator" />
-
-        <label class="input-label">
-            Password
-            <input class="input full-width" minlength="8" type="password" bind:value={ password } />
-        </label>
+        <div class="modal-content">
+            <label class="input-label">
+                Username
+                <input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
+            </label>
+    
+            <div class="separator" />
+    
+            <label class="input-label">
+                Password
+                <input class="input full-width" minlength="8" type="password" bind:value={ password } />
+            </label>
+        </div>
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ loginInstead }">Log in instead</button>
diff --git a/frontend/src/components/overlays/CreateChannel.svelte b/frontend/src/components/overlays/CreateChannel.svelte
index 85ec7f2..232f1a9 100644
--- a/frontend/src/components/overlays/CreateChannel.svelte
+++ b/frontend/src/components/overlays/CreateChannel.svelte
@@ -38,10 +38,12 @@
             <span class="h4">Create Channel</span>
         </div>
 
-        <label class="input-label">
-            Channel Name
-            <input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
-        </label>
+        <div class="modal-content">
+            <label class="input-label">
+                Channel Name
+                <input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
+            </label>
+        </div>
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
diff --git a/frontend/src/components/overlays/EditChannel.svelte b/frontend/src/components/overlays/EditChannel.svelte
index 47191aa..fb35b9a 100644
--- a/frontend/src/components/overlays/EditChannel.svelte
+++ b/frontend/src/components/overlays/EditChannel.svelte
@@ -52,10 +52,12 @@
             <span class="h4">Edit Channel</span>
         </div>
 
-        <label class="input-label">
-            Channel Name
-            <input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
-        </label>
+        <div class="modal-content">
+            <label class="input-label">
+                Channel Name
+                <input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
+            </label>
+        </div>
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
diff --git a/frontend/src/components/overlays/EditMessage.svelte b/frontend/src/components/overlays/EditMessage.svelte
index c285411..ec4f280 100644
--- a/frontend/src/components/overlays/EditMessage.svelte
+++ b/frontend/src/components/overlays/EditMessage.svelte
@@ -52,10 +52,12 @@
             <span class="h4">Edit Message</span>
         </div>
 
-        <label class="input-label">
-            Content
-            <input class="input full-width" minlength="1" bind:value={ messageContent } />
-        </label>
+        <div class="modal-content">
+            <label class="input-label">
+                Content
+                <input class="input full-width" minlength="1" bind:value={ messageContent } />
+            </label>
+        </div>
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
diff --git a/frontend/src/components/overlays/Login.svelte b/frontend/src/components/overlays/Login.svelte
index d54d1e0..e4b535c 100644
--- a/frontend/src/components/overlays/Login.svelte
+++ b/frontend/src/components/overlays/Login.svelte
@@ -62,17 +62,19 @@
             <span class="h4">Welcome back!</span>
         </div>
 
-        <label class="input-label">
-            Username
-            <input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
-        </label>
+        <div class="modal-content">
+            <label class="input-label">
+                Username
+                <input class="input full-width" minlength="1" maxlength="32" bind:value={ username } />
+            </label>
 
-        <div class="separator" />
+            <div class="separator" />
 
-        <label class="input-label">
-            Password
-            <input class="input full-width" minlength="8" type="password" bind:value={ password } />
-        </label>
+            <label class="input-label">
+                Password
+                <input class="input full-width" minlength="8" type="password" bind:value={ password } />
+            </label>
+        </div>
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ createAccountInstead }">Create an account instead</button>
diff --git a/frontend/src/components/overlays/Prompt.svelte b/frontend/src/components/overlays/Prompt.svelte
index fe33120..f917570 100644
--- a/frontend/src/components/overlays/Prompt.svelte
+++ b/frontend/src/components/overlays/Prompt.svelte
@@ -39,10 +39,12 @@
             <span class="h4">{ heading }</span>
         </div>
 
-        <label class="input-label">
-            { valueName }
-            <input class="input full-width" bind:value={ userInput } />
-        </label>
+        <div class="modal-content">
+            <label class="input-label">
+                { valueName }
+                <input class="input full-width" bind:value={ userInput } />
+            </label>
+        </div>
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ closePrompt }">Cancel</button>
diff --git a/frontend/src/components/overlays/Settings.svelte b/frontend/src/components/overlays/Settings.svelte
index 9183b05..a38e627 100644
--- a/frontend/src/components/overlays/Settings.svelte
+++ b/frontend/src/components/overlays/Settings.svelte
@@ -66,6 +66,12 @@
         align-items: center;
         justify-content: left;
         padding: var(--space-md);
+        border-radius: var(--radius-lg);
+        border: 1px solid var(--background-color-2);
+    }
+
+    .selection-option {
+        border: 1px solid var(--background-color-2);
     }
 
     .selection-option.selected {
@@ -74,13 +80,13 @@
 
     .horizontal-selections {
         display: grid;
-        gap: var(--space-md);
+        gap: var(--space-sm);
         grid-template-columns: repeat(2, 1fr);
     }
 
     .large-settings {
         min-width: 540px;
-        min-height: 420px;
+        padding-bottom: var(--space-xs);
     }
 
     .account-buttons {
@@ -90,33 +96,35 @@
 
 <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
     <div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalScale on:click|stopPropagation>
-        <span class="input-label" on:click={ doDeveloper }>Account</span>
-        <div class="settings-card full-width">
-            <span class="material-icons-outlined">alternate_email</span>
-            <span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>
-            <div class="account-buttons">
-                <button class="button button-red" on:click="{ doLogout }">Log Out</button>
+        <div class="modal-header">
+            <span class="h4">Settings</span>
+        </div>
+
+        <div class="modal-content">
+            <span class="input-label" on:click={ doDeveloper }>Account</span>
+            <div class="settings-card full-width">
+                <span class="material-icons-outlined">alternate_email</span>
+                <span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>
+                <div class="account-buttons">
+                    <button class="button button-red" on:click="{ doLogout }">Log Out</button>
+                </div>
+            </div>
+    
+            <div class="separator" />
+    
+            <span class="input-label">Theme</span>
+            <div class="horizontal-selections">
+                <button class="button selection-option full-width selected" class:selected="{ $theme === "dark" }" on:click="{ () => theme.set('dark') }">Dark</button>
+                <button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
+            </div>
+    
+            <div class="separator" />
+    
+            <span class="input-label">Animations</span>
+            <div class="horizontal-selections">
+                <button class="button selection-option full-width" class:selected="{ $doAnimations === true }" on:click="{ () => doAnimations.set(true) }">Enabled</button>
+                <button class="button selection-option full-width selected" class:selected="{ $doAnimations === false }" on:click="{ () => doAnimations.set(false) }">Disabled</button>
             </div>
-        </div>
-
-        <div class="separator" />
-
-        <span class="input-label">Theme</span>
-        <div class="horizontal-selections">
-            <button class="button selection-option full-width selected" class:selected="{ $theme === "dark" }" on:click="{ () => theme.set('dark') }">Dark</button>
-            <button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
-        </div>
-
-        <div class="separator" />
-
-        <span class="input-label">Animations</span>
-        <div class="horizontal-selections">
-            <button class="button selection-option full-width selected" class:selected="{ $doAnimations === false }" on:click="{ () => doAnimations.set(false) }">Disabled</button>
-            <button class="button selection-option full-width" class:selected="{ $doAnimations === true }" on:click="{ () => doAnimations.set(true) }">Enabled</button>
-        </div>
- 
-        <div class="modal-footer">
-            <button class="button modal-secondary-action" on:click="{ close }">Close</button>
         </div>
     </div>
 </div>
diff --git a/frontend/src/components/overlays/UserInfo.svelte b/frontend/src/components/overlays/UserInfo.svelte
index a3a9de0..f36d994 100644
--- a/frontend/src/components/overlays/UserInfo.svelte
+++ b/frontend/src/components/overlays/UserInfo.svelte
@@ -27,7 +27,7 @@
             <span class="h4">{ presenceEntry.user.username }</span>
         </div>
 
-        <div>
+        <div class="modal-content">
             {#if presenceEntry.bridgesTo}
                 <div class="user-info-row">
                     <span class="material-icons-outlined">cloud_sync</span>