diff --git a/app/pages/projects/index.vue b/app/pages/projects/index.vue
index ff1651f..abaff63 100644
--- a/app/pages/projects/index.vue
+++ b/app/pages/projects/index.vue
@@ -61,7 +61,7 @@ const { data: projects } = await useAsyncData('all-projects', () => {
               </h3>
             </div>
           </article>
-          <div class="flex items-center justify-between gap-2 mt-4">
+          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mt-2">
             <div
               class="text-sm text-neutral-500 flex items-center gap-1"
             >
diff --git a/app/pages/writings/index.vue b/app/pages/writings/index.vue
index 252c6f1..cb508fb 100644
--- a/app/pages/writings/index.vue
+++ b/app/pages/writings/index.vue
@@ -49,7 +49,7 @@ const { data: writings } = await useAsyncData('all-writings', () => {
               {{ writing.description }}
             </h3>
           </article>
-          <div class="flex justify-between items-center mt-2">
+          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mt-2">
             <div
               class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
             >