diff --git a/frontend/pages/articles.vue b/frontend/pages/articles.vue
new file mode 100644
index 0000000..078c45c
--- /dev/null
+++ b/frontend/pages/articles.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+
+// import
+
+import useGetArticles from "~/composables/api/blog/useGetArticles";
+
+// state
+
+const page = ref(1);
+const search = ref("");
+const debouncedSearch = refDebounced(search, 700);
+
+const { data: articles, suspense } = useGetArticles(page, debouncedSearch);
+
+// ssr
+
+await useAsyncData(async () => {
+
+    const response = await suspense();
+
+    if (response.isError) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: `Error in categories page prefetch`
+        });
+    }
+});
+</script>
+
+<template>
+    <div class="container" style="margin-top: 80px">
+        <div class="flex items-center justify-between mb-20">
+            <span class="typo-h-4 text-black">
+                مقالات اخیر سایت
+            </span>
+            <Input
+                class="max-w-[400px] w-full rounded-full"
+                variant="outlined"
+                placeholder="جستجو..."
+                v-model="search"
+            >
+                <template #endItem>
+                    <div class="flex items-center gap-1">
+                        <Icon
+                            class="translate-y-[-1px]"
+                            name="ci:search"
+                            size="24"
+                        />
+                    </div>
+                </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>
+        <div class="w-full flex-center pt-24 pb-10">
+            <Pagination :items="[]" :total="100" />
+        </div>
+    </div>
+</template>
\ No newline at end of file