diff --git a/frontend/pages/articles.vue b/frontend/pages/articles.vue
index 078c45c..abae37c 100644
--- a/frontend/pages/articles.vue
+++ b/frontend/pages/articles.vue
@@ -3,6 +3,7 @@
 // import
 
 import useGetArticles from "~/composables/api/blog/useGetArticles";
+import ArticlesList from "~/components/articles/ArticlesList.vue";
 
 // state
 
@@ -14,17 +15,15 @@ const { data: articles, suspense } = useGetArticles(page, debouncedSearch);
 
 // ssr
 
-await useAsyncData(async () => {
+const response = await suspense();
 
-    const response = await suspense();
+if (response.isError) {
+    throw createError({
+        statusCode: 500,
+        statusMessage: `Error in categories page prefetch`
+    });
+}
 
-    if (response.isError) {
-        throw createError({
-            statusCode: 500,
-            statusMessage: `Error in categories page prefetch`
-        });
-    }
-});
 </script>
 
 <template>
@@ -50,50 +49,13 @@ await useAsyncData(async () => {
                 </template>
             </Input>
         </div>
-        <div class="flex gap-12">
-            <div class="flex-1 flex flex-col gap-12">
-                <BlogPost
-                    image="/img/blog-1.jpeg"
-                    description="aaasd"
-                    title="asd"
-                    :comments="2"
-                    link="#"
-                    date="2020-06-10"
-                    tag="asdsa"
-                />
-                <BlogPost
-                    image="/img/blog-2.jpeg"
-                    description="aaasd"
-                    title="asd"
-                    :comments="2"
-                    link="#"
-                    date="2020-06-10"
-                    tag="asdsa"
-                />
-            </div>
-            <div class="flex-[0.8] flex flex-col">
-                <BlogPost
-                    image="/img/blog-3.jpeg"
-                    description="aaasd"
-                    title="asd"
-                    :comments="2"
-                    link="#"
-                    date="2020-06-10"
-                    tag="asdsa"
-                    variant="sm"
-                />
-                <BlogPost
-                    image="/img/blog-4.jpeg"
-                    description="aaasd"
-                    title="asd"
-                    :comments="2"
-                    link="#"
-                    date="2020-06-10"
-                    tag="asdsa"
-                    variant="sm"
-                />
-            </div>
-        </div>
+
+        <!-- This is for masonry js package -->
+
+        <ClientOnly>
+            <ArticlesList :articles="articles!.results" />
+        </ClientOnly>
+
         <div class="w-full flex-center pt-24 pb-10">
             <Pagination :items="[]" :total="100" />
         </div>