diff --git a/frontend/src/lib/components/quib.svelte b/frontend/src/lib/components/quib.svelte
index a7ad1d24..b4051c54 100644
--- a/frontend/src/lib/components/quib.svelte
+++ b/frontend/src/lib/components/quib.svelte
@@ -106,7 +106,7 @@
 <div
   class={cn(
     viewStore.state === 'compact' && 'transition-colors hover:bg-base-200',
-    'relative flex flex-col overflow-hidden rounded-2xl border border-neutral bg-base-300'
+    'relative flex flex-col overflow-hidden border-neutral bg-base-300 md:rounded-2xl md:border'
   )}
 >
   {#if viewStore.state === 'card'}
@@ -116,7 +116,9 @@
       <h2 class="text-xl font-bold text-info">{quib.title}</h2>
       {@render content_or_cover()}
     </div>
-    <div class="flex items-center gap-4 border-t border-neutral px-4 py-2.5">
+    <div
+      class="flex items-center gap-4 border-neutral px-4 pb-2.5 pt-0 md:border-t md:pt-2.5"
+    >
       {@render vote_comment_share()}
     </div>
   {:else}
diff --git a/frontend/src/lib/components/quibs_header.svelte b/frontend/src/lib/components/quibs_header.svelte
index fce4ba66..9820dfed 100644
--- a/frontend/src/lib/components/quibs_header.svelte
+++ b/frontend/src/lib/components/quibs_header.svelte
@@ -40,7 +40,7 @@
   let active_view_icon = $derived(mapping.view[active_mapping.view]);
 </script>
 
-<div class="flex items-center justify-between">
+<div class="flex items-center justify-between px-4 py-3 md:p-0">
   <div class="flex gap-3">
     {#each Object.entries(mapping.filters) as [key, item]}
       {@const is_active = active_mapping.filter === key}
diff --git a/frontend/src/routes/(app)/+page.svelte b/frontend/src/routes/(app)/+page.svelte
index 249d38d0..d1d291e4 100644
--- a/frontend/src/routes/(app)/+page.svelte
+++ b/frontend/src/routes/(app)/+page.svelte
@@ -15,9 +15,11 @@
   <title>Quibble - Delve into real conversations.</title>
 </svelte:head>
 
-<div class="flex h-max flex-1 flex-col gap-4 p-4">
+<div class="flex h-max flex-1 flex-col md:gap-4 md:p-4">
   <QuibsHeader />
-  <div class="flex flex-1 flex-col gap-4">
+  <div
+    class="flex flex-1 flex-col divide-y border-y border-neutral md:gap-4 md:divide-y-0 md:border-none"
+  >
     {#if data.quibs}
       {#each data.quibs as quib}
         <Quib {...quib} />