diff --git a/appview/pages/templates/timeline/fragments/timeline.html b/appview/pages/templates/timeline/fragments/timeline.html
index 08ef62a1..49983ca3 100644
--- a/appview/pages/templates/timeline/fragments/timeline.html
+++ b/appview/pages/templates/timeline/fragments/timeline.html
@@ -1,5 +1,5 @@
 {{ define "timeline/fragments/timeline" }}
-    <div id="timeline-feed" class="py-4">
+    <div id="timeline-feed" class="mt-4 py-4">
         <div class="flex items-center justify-between pl-4 pb-4">
           <h3 class="text-base dark:text-white flex items-center gap-2">
             {{ i "gallery-vertical" "size-4 flex-shrink-0" }}
diff --git a/appview/pages/templates/timeline/timeline.html b/appview/pages/templates/timeline/timeline.html
index 478dbddd..40ff036b 100644
--- a/appview/pages/templates/timeline/timeline.html
+++ b/appview/pages/templates/timeline/timeline.html
@@ -8,24 +8,24 @@
 {{ end }}
 
 {{ define "mainLayout" }}
-<div class="flex-grow flex flex-col">
+<div class="flex-grow flex flex-col -mt-4">
     <main class="flex-grow flex flex-col">{{ block "content" . }}{{ end }}</main>
 </div>
 {{ end }}
 
 {{ define "content" }}
-<div id="timeline-grid" class="flex flex-col md:grid md:grid-cols-8 md:items-start">
+<div id="timeline-grid" class="flex flex-col w-full max-w-[1920px] mx-auto md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_minmax(0,1fr)] md:items-start">
 
-    <div class="hidden md:flex md:col-span-2 md:flex-col md:gap-4 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4">
+    <div class="hidden md:flex md:flex-col md:gap-4 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4 md:w-full md:max-w-[400px]">
         {{ template "timeline/fragments/notifications" . }}
         {{ template "timeline/fragments/recents" . }}
     </div>
 
-    <div class="order-2 md:order-none md:col-start-3 md:row-start-1 md:col-span-4">
+    <div class="order-2 md:order-none md:col-start-2 md:row-start-1 md:w-full md:max-w-[600px] md:mx-auto">
         {{ template "timeline/fragments/timeline" . }}
     </div>
 
-    <div class="order-1 md:order-none flex flex-col gap-4 md:col-start-7 md:row-start-1 md:col-span-2 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4">
+    <div class="order-1 md:order-none flex flex-col gap-4 md:col-start-3 md:row-start-1 md:w-full md:max-w-[400px] md:ml-auto md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4">
         {{ if .ShowNewsletter }}
         <div id="newsletter-col" class="order-first md:order-last">
             {{ template "timeline/fragments/newsletterWidget" . }}