diff --git a/webapp/src/routes/__layout.svelte b/webapp/src/routes/__layout.svelte
index 204a63a..11bf3aa 100644
--- a/webapp/src/routes/__layout.svelte
+++ b/webapp/src/routes/__layout.svelte
@@ -61,7 +61,7 @@
 			</div>
 		</div>
 
-		<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 ">
+		<div class="container mx-auto max-w-4xl mx-auto mt-6 md:mt-12 px-4 2xl:px-0 ">
 			<slot />
 			<div class="mt-12">
 				<Footer />
diff --git a/webapp/src/routes/note/[id].svelte b/webapp/src/routes/note/[id].svelte
index 8a9ec8a..62296fa 100644
--- a/webapp/src/routes/note/[id].svelte
+++ b/webapp/src/routes/note/[id].svelte
@@ -79,12 +79,17 @@
 
 {#if plaintext}
 	<div class="max-w-2xl mx-auto">
-		<p class="mb-4 text-sm flex justify-between text-zinc-500 dark:text-zinc-400">
+		<p
+			class="mb-4 text-sm flex gap-2 flex-col md:gap-0 md:flex-row justify-between text-zinc-500 dark:text-zinc-400"
+		>
 			<span class="flex gap-1.5 items-center uppercase">
 				<span class="h-5"><IconEncrypted /></span>
 				<span>e2e encrypted | <span>Shared {timeString} ago</span></span>
 			</span>
-			<button on:click={toggleRaw} class="flex gap-1.5 uppercase items-center hover:underline">
+			<button
+				on:click={toggleRaw}
+				class="flex flex-row-reverse justify-end md:flex-row underline md:no-underline gap-1.5 uppercase items-center hover:underline"
+			>
 				{#if showRaw}
 					<span class="h-6"><LogoDocument /> </span>
 					<span>Render Document</span>