diff --git a/client/GraphQLQueries.md b/client/GraphQLQueries.md
new file mode 100644
index 0000000..b9bc069
--- /dev/null
+++ b/client/GraphQLQueries.md
@@ -0,0 +1,84 @@
+### Queries
+  
+  - Get Article By Slug
+  ```
+    query GetPostBySlug($slug: String){
+    articleByLink(link: $slug){
+        id
+        title
+        thumbnail
+    }
+    }
+  ```
+
+  - Get all articles
+  ```
+    query GetAllArticle{
+        allArticles{
+            id
+            title
+            content
+            thumbnail
+            link
+            createdAt
+            author{
+                id
+                name
+            }
+            category{
+                id
+            }
+        }
+    }
+  ```
+
+### Mutations
+  - Create category
+  ```
+    mutation CreateCategory{
+    createOrUpdateCategory(name: "Category - 10" ){
+        category{
+        id
+        name
+        }
+    }
+    }
+  ```
+
+  - Create an article with curl 
+  ```
+    curl --location 'http://localhost:8000/graphql/' \
+    --form 'operations="{
+    \"query\": \"mutation ($title: String!, $content: String!, $thumbnail: Upload!, $authorId: ID!, $categoryId: ID!, $id: ID) { createOrUpdateArticle(title: $title, content: $content, thumbnail: $thumbnail, authorId: $authorId, categoryId: $categoryId, id: $id) { article { id title content thumbnail author { id name } category { id name } } } }\",
+    \"variables\": {
+        \"title\": \"Test Article - 10\",
+        \"content\": \"This is a test article\",
+        \"thumbnail\": null,
+        \"authorId\": \"1\",
+        \"categoryId\": \"1\"
+    }
+    }"' \
+    --form 'map="{
+    \"0\": [\"variables.thumbnail\"]
+    }"' \
+    --form '0=@"/home/shayon/Pictures/pexels-daniel-reis-19575513.jpg"'
+  ```
+
+  - Create a comment
+  ```
+    mutation CreateComment{
+        createOrUpdateComment(author: "Md SHayon", email:"eg1@e.com", text: "This is comment 1", articleId: 8){
+            comment{
+                id
+                article{
+                    id
+                    title
+                    link
+                }
+                author
+                email
+                text
+            }
+        }
+    }
+  ```
\ No newline at end of file
diff --git a/client/README.md b/client/README.md
index f5db2a2..48e46c1 100644
--- a/client/README.md
+++ b/client/README.md
@@ -1,75 +1,4 @@
-# Nuxt 3 Minimal Starter
+# Nuxt js blog
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+ - Add article with thumbnail image
+ - Display article content properly according to quill editor
\ No newline at end of file
diff --git a/client/components/article/Article.vue b/client/components/article/Article.vue
index a241864..102ee25 100644
--- a/client/components/article/Article.vue
+++ b/client/components/article/Article.vue
@@ -18,13 +18,13 @@
   </NuxtLink> -->
   <NuxtLink rel="noopener noreferrer" v-bind:to="'http://localhost:3000/' + article.link"
     class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
-    <CldImage v-if="article.thumbnail && article.thumbnail !== ''" v-bind:src="article.thumbnail" width="200" height="200"
+    <CldImage v-if="article.thumbnail && article.thumbnail !== ''" v-bind:src="article.thumbnail" width="400" height="400" class="object-cover w-full rounded h-44 dark:bg-gray-500"
       v-bind:alt="article.title" />
     <img v-else class="object-cover w-full rounded h-44 dark:bg-gray-500"
       src="https://source.unsplash.com/random/480x360?1" />
     <div class="p-6 space-y-2">
       <h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">{{ article.title }}</h3>
-      <!-- <span class="text-xs dark:text-gray-400">{{ article.createdAt }}</span> -->
+      <span class="text-xs dark:text-gray-400">{{ article.createdAt }}</span>
       <p>
         {{ article.content }}
       </p>
diff --git a/client/components/article/ArticleAdd.vue b/client/components/article/ArticleAdd.vue
index 7a66b0e..b462f74 100644
--- a/client/components/article/ArticleAdd.vue
+++ b/client/components/article/ArticleAdd.vue
@@ -4,11 +4,18 @@
     <form class="mb-4" v-on:submit.prevent="handleArticleAdd">
       <div class="input-group mb-3">
         <label for="title">Title</label>
-        <input type="text" class="border outline-none bg-gray-300" name="title" id="title" />
+        <input type="text" class="border outline-none bg-gray-300" name="title" id="title" v-model="articleState.title" />
+      </div>
+      <div class="input-group flex mb-3 flex-col items-start gap-2">
+        <label for="thumbnail">Thumbnail</label>
+        <input type="file" class="border outline-none bg-gray-300" name="thumbnail" id="thumbnail"
+          v-on:change="handleFileChange" />
+          <img v-if="imgUrl" v-bind:src="imgUrl" class="w-full h-36 object-cover object-center" />
       </div>
       <div class="input-group mb-3">
         <label for="content">Content</label>
-        <QuillEditor v-model:content="state.content" theme="snow" v-bind:options="options" v-on:editorChange="handleContentChange" contentType="delta" />
+        <QuillEditor v-model:content="state.content" theme="snow" :options="options" @editorChange="handleContentChange"
+          contentType="delta" />
         <!-- <div class="border border-green-500">
           <h2>Display content</h2>
           <QuillEditor v-model="initialContent" :options="options" />
@@ -20,19 +27,19 @@
       </div>
       <div class="input-group mb-3">
         <label for="category">Category</label>
-        <select name="category" id="category">
+        <select name="category" id="category" v-model="articleState.category">
           <option v-for="cat in props.categories" v-bind:value="cat.id">{{ cat.name }}</option>
         </select>
       </div>
       <div class="input-group mb-3">
         <label for="author">Author</label>
-        <select name="author" id="author">
+        <select name="author" id="author" v-model="articleState.author">
           <option v-for="a in props.authors" v-bind:value="a.id">{{ a.name }}</option>
         </select>
       </div>
       <div class="input-group mb-3">
         <label for="link">Link</label>
-        <input type="text" class="border outline-none bg-gray-300" name="link" id="link" />
+        <input type="text" class="border outline-none bg-gray-300" name="link" id="link" v-model="articleState.link" />
       </div>
       <div class="input-group">
         <button type="submit">Add</button>
@@ -48,25 +55,92 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 
 const isReadOnly = true;
 
+const articleState = reactive({
+  title: '',
+  category: '',
+  author: '',
+  link: '',
+});
+
+const uploadedImg = ref<File | null>(null);
+const imgUrl = ref<string | null>(null);
+
 const options = {
   debug: "info",
   modules: {
     toolbar: isReadOnly ? false : ["bold", "italic", "underline"],
   },
   placeholder: "Compose an epic...",
-  readOnly: true,
+  readOnly: false,
   theme: "snow",
 };
 
+const initialContent = new Delta([
+  {
+    insert: "sdsdssdds\n\nhhg\nhello\n\n\nho\n\ngoal",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "sure",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "be",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "wit",
+  },
+  {
+    insert: "\n",
+    attributes: {
+      list: "ordered",
+    },
+  },
+]);
+
 
 const state = reactive({ content: initialContent });
 const props = defineProps(["categories", "authors"]);
 
-const handleArticleAdd = (e) => {
-  console.log({ state: state.content });
+const handleArticleAdd = (e: Event) => {
+  e.preventDefault();
+  const formData = {
+    title: articleState.title,
+    content: state.content,
+    category: articleState.category,
+    author: articleState.author,
+    link: articleState.link,
+  };
+  console.log(formData);
 };
 
-const handleContentChange = (e: EventListener) => {
+const handleFileChange = (e: Event) => {
+  e.preventDefault();
+  const inputEl = e.target as HTMLInputElement;
+  if (inputEl.files && inputEl.files.length > 0) {
+    uploadedImg.value = inputEl.files[0];
+    const objectUrl = URL.createObjectURL(inputEl.files[0]);
+    imgUrl.value = objectUrl;;
+  }
+}
+
+const handleContentChange = (e: Delta) => {
   console.log(e);
 };
 </script>
@@ -75,10 +149,12 @@ const handleContentChange = (e: EventListener) => {
 :deep(.ql-editor) {
   min-height: 200px;
 }
+
 :deep(.ql-toolbar.ql-snow) {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
+
 :deep(.ql-container.ql-snow) {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
diff --git a/client/components/article/ArticleExpand.vue b/client/components/article/ArticleExpand.vue
index 15f2ac9..7e9bc5b 100644
--- a/client/components/article/ArticleExpand.vue
+++ b/client/components/article/ArticleExpand.vue
@@ -1,30 +1,35 @@
 <template>
   <main className="continer mx-auto px-4">
-    <div class="relative w-full h-80">
+    <div class="relative w-full h-80" v-if="data?.articleByLink">
       <div class="static h-full">
+        <CldImage v-if="data?.articleByLink && data.articleByLink.thumbnail && data.articleByLink.thumbnail !== ''" v-bind:src="data.articleByLink.thumbnail" width="400"
+          height="400" class="w-full h-full object-cover object-center" v-bind:alt="data.articleByLink.title" />
         <img
+          v-else
           src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
-          alt="thumbnail"
-          class="w-full h-full object-cover object-center"
-        />
+          alt="thumbnail" class="w-full h-full object-cover object-center" />
       </div>
       <div class="absolute bottom-2 left-2">
         <h1 className="text-4xl font-semibold text-gray-100 leading-tight">
           {{ data.articleByLink.title }}
         </h1>
-        <img class="img-wrapper w-12 h-12 rounded-full border-4 border-gray-200" src="https://randomuser.me/api/portraits/men/97.jpg" alt="author" />
+        <img class="img-wrapper w-12 h-12 rounded-full border-4 border-gray-200"
+          src="https://randomuser.me/api/portraits/men/97.jpg" alt="author" />
         <p className="font-semibold text-gray-200 text-sm">{{ data.articleByLink.author.name }}</p>
-        <p className="font-semibold text-gray-400 text-xs">{{ data.articleByLink.createdAt }}</p>
+        <p className="font-semibold text-gray-400 text-xs">{{ data.articleByLink?.createdAt }}</p>
       </div>
     </div>
+    <div class="no-article-found" v-else>
+      <p class="text-text-red-700">No article found!</p>
+    </div>
+    <!-- <p>{{ data.articleByLink.content }}</p> -->
     <!-- <QuillEditor v-model="initialContent" :options="options" /> -->
-    <p>{{ data.articleByLink.content }}</p>
   </main>
 </template>
 
 <script lang="ts" setup>
 // @ts-ignore
-import {Delta} from '@vueup/vue-quill';
+// import {Delta} from '@vueup/vue-quill';
 import type { IArticle } from "../../types/Article";
 
 const props = defineProps(["postLink"]);
@@ -33,10 +38,11 @@ const query = gql`
   query ArticleByLink($link: String) {
     articleByLink(link: $link) {
       content
-      createdAt
       id
       link
       title
+      thumbnail
+      createdAt
       author {
         name
         id
@@ -51,54 +57,54 @@ const query = gql`
 
 const isReadOnly = true;
 
-const options = {
-  debug: "info",
-  modules: {
-    toolbar: isReadOnly ? false : ["bold", "italic", "underline"],
-  },
-  placeholder: "Compose an epic...",
-  readOnly: true,
-  theme: "snow",
-};
+// const options = {
+//   debug: "info",
+//   modules: {
+//     toolbar: isReadOnly ? false : ["bold", "italic", "underline"],
+//   },
+//   placeholder: "Compose an epic...",
+//   readOnly: true,
+//   theme: "snow",
+// };
 
-const initialContent = new Delta([
-  {
-    insert: "sdsdssdds\n\nhhg\nhello\n\n\nho\n\ngoal",
-  },
-  {
-    attributes: {
-      list: "ordered",
-    },
-    insert: "\n",
-  },
-  {
-    insert: "sure",
-  },
-  {
-    attributes: {
-      list: "ordered",
-    },
-    insert: "\n",
-  },
-  {
-    insert: "be",
-  },
-  {
-    attributes: {
-      list: "ordered",
-    },
-    insert: "\n",
-  },
-  {
-    insert: "wit",
-  },
-  {
-    insert: "\n",
-    attributes: {
-      list: "ordered",
-    },
-  },
-]);
+// const initialContent = new Delta([
+//   {
+//     insert: "sdsdssdds\n\nhhg\nhello\n\n\nho\n\ngoal",
+//   },
+//   {
+//     attributes: {
+//       list: "ordered",
+//     },
+//     insert: "\n",
+//   },
+//   {
+//     insert: "sure",
+//   },
+//   {
+//     attributes: {
+//       list: "ordered",
+//     },
+//     insert: "\n",
+//   },
+//   {
+//     insert: "be",
+//   },
+//   {
+//     attributes: {
+//       list: "ordered",
+//     },
+//     insert: "\n",
+//   },
+//   {
+//     insert: "wit",
+//   },
+//   {
+//     insert: "\n",
+//     attributes: {
+//       list: "ordered",
+//     },
+//   },
+// ]);
 
 type ArticlesResult = {
   articleByLink: IArticle;
@@ -106,5 +112,5 @@ type ArticlesResult = {
 
 const variables = { link: props.postLink };
 const { data } = await useAsyncQuery<ArticlesResult>(query, variables);
-console.log(data);
+console.log({ ...data });
 </script>
diff --git a/client/components/home/Home.vue b/client/components/home/Home.vue
index 5e29df9..95550b6 100644
--- a/client/components/home/Home.vue
+++ b/client/components/home/Home.vue
@@ -23,6 +23,7 @@
         content
         thumbnail
         link
+        createdAt
         author {
           id
           name
diff --git a/client/components/home/Posts.vue b/client/components/home/Posts.vue
index ce630a8..e615d56 100644
--- a/client/components/home/Posts.vue
+++ b/client/components/home/Posts.vue
@@ -1,13 +1,15 @@
 <template>
   <section class="dark:bg-gray-800 dark:text-gray-100">
-    <div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
+    <div class="container mx-auto px-4">
       <Article v-bind:first="true" v-bind:article="firstArticle" />
-      <div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      <!-- grid justify-between grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 content-between -->
+      <div class="flex justify-between flex-wrap items-center gap-4">
         <Article v-for="article in allArticles" :key="article.id" v-bind:first="false" v-bind:article="article" />
-
       </div>
-      <div class="flex justify-center">
-        <button type="button" class="px-6 py-3 text-sm rounded-md hover:underline dark:bg-gray-900 dark:text-gray-400">Load more posts...</button>
+      <div class="flex justify-center mt-4">
+        <button type="button"
+          class="px-6 py-3 text-sm rounded-md hover:underline dark:bg-gray-900 dark:text-gray-400">Load more
+          posts...</button>
       </div>
     </div>
   </section>
diff --git a/client/pages/admin/article.vue b/client/pages/admin/article.vue
index 40a0412..5bb09a5 100644
--- a/client/pages/admin/article.vue
+++ b/client/pages/admin/article.vue
@@ -1,7 +1,7 @@
 <template>
   <ClientOnly>
-    <h1>Article</h1>
     <ArticleAdd v-bind:categories="data.allCategories" v-bind:authors="data.allAuthors" />
+    <h1 class="mt-8">All articles</h1>
     <Article v-for="article in data.allArticles" v-bind:key="article.id" v-bind:article="article" />
   </ClientOnly>
 </template>
diff --git a/client/types/Article.ts b/client/types/Article.ts
index 837f63c..9717207 100644
--- a/client/types/Article.ts
+++ b/client/types/Article.ts
@@ -6,7 +6,8 @@ export interface IArticle {
   title: string;
   content: string;
   link: string;
-  createdAt: string;
+  thumbnail: string;
+  createdAt?: string;
   category: ICategory;
   author: IAuthor;
 }
diff --git a/server/.idea/misc.xml b/server/.idea/misc.xml
index faee1c1..37fc9e2 100644
--- a/server/.idea/misc.xml
+++ b/server/.idea/misc.xml
@@ -1,5 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.10 (server)" />
+  </component>
   <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.10 (server)" project-jdk-type="Python SDK" />
   <component name="PyCharmProfessionalAdvertiser">
     <option name="shown" value="true" />
diff --git a/server/blog/resolvers/mutations.py b/server/blog/resolvers/mutations.py
index 46b2512..e3e5b59 100644
--- a/server/blog/resolvers/mutations.py
+++ b/server/blog/resolvers/mutations.py
@@ -1,12 +1,13 @@
 import graphene
 from graphene_django import DjangoObjectType
-from ..models import Category, Article
-from .queryTypes import CategoryType, ArticleType
+from ..models import Category, Article, Comment
+from .queryTypes import CategoryType, ArticleType, CommentType
 from core.settings import cloudinary
 from graphene_file_upload.scalars import Upload
 from datetime import datetime
 import os
 
+
 class CategoryMutation(graphene.Mutation):
     class Arguments:
         name = graphene.String(required=True)
@@ -32,13 +33,14 @@ class Arguments:
         thumbnail = Upload(required=True)
         author_id = graphene.ID()
         category_id = graphene.ID()
+        created_at = graphene.DateTime(required=False)
         id = graphene.ID()
 
     success = graphene.Boolean()
     article = graphene.Field(ArticleType)
 
     @classmethod
-    def mutate(cls, root, info, title, content, thumbnail, author_id, category_id, id=None):
+    def mutate(cls, root, info, title, content, thumbnail, author_id, category_id, created_at=None, id=None):
 
         # Upload the image to Cloudinary
         options = {
@@ -67,23 +69,42 @@ def mutate(cls, root, info, title, content, thumbnail, author_id, category_id, i
                 article.category_id = category_id
             article.save()
         else:
-            article = Article.objects.create(title=title, content=content, thumbnail=thumbnail_url, created_at=current_date_time, author_id=author_id,
+            article = Article.objects.create(title=title, content=content, thumbnail=thumbnail_url,
+                                             created_at=current_date_time, author_id=author_id,
                                              category_id=category_id)
         return ArticleMutation(article=article)
 
 
+class CommentMutation(graphene.Mutation):
+    class Arguments:
+        id = graphene.ID()
+        author = graphene.String(required=True)  # Who made the comment
+        email = graphene.String(required=True)
+        text = graphene.String(required=True)
+        created_at = graphene.DateTime(required=False)
+        article_id = graphene.ID()
+
+    comment = graphene.Field(CommentType)
+
+    @classmethod
+    def mutate(cls, root, info, author, email, text, article_id, created_at=None, id=None):
+        current_date_time = datetime.now()
+        if id:
+            comment = Comment.objects.get(pk=id)
+            comment.author = author
+            comment.created_at = current_date_time
+            comment.text = text
+            comment.email = email
+            if article_id:
+                comment.article_id = article_id
+            comment.save()
+        else:
+            comment = Comment.objects.create(author=author, email=email, text=text, article_id=article_id,
+                                             created_at=current_date_time)
+        return CommentMutation(comment=comment)
+
+
 class Mutation(graphene.ObjectType):
     create_or_update_category = CategoryMutation.Field()
     create_or_update_article = ArticleMutation.Field()
-
-
-# {
-#   "query": "mutation ($title: String!, $content: String!, $thumbnail: Upload, $authorId: ID!, $categoryId: ID!, $id: ID) { createOrUpdateArticle(title: $title, content: $content, thumbnail: $thumbnail, authorId: $authorId, categoryId: $categoryId, id: $id) { article { id title content thumbnail author { id name } category { id name } } } }",
-#   "variables": {
-#     "title": "Test Article",
-#     "content": "This is a test article",
-#     "thumbnail": null,
-#     "authorId": "1",
-#     "categoryId": "1"
-#   }
-# }
\ No newline at end of file
+    create_or_update_comment = CommentMutation.Field()
diff --git a/server/blog/resolvers/queryTypes.py b/server/blog/resolvers/queryTypes.py
index 5596377..2216186 100644
--- a/server/blog/resolvers/queryTypes.py
+++ b/server/blog/resolvers/queryTypes.py
@@ -15,13 +15,11 @@ class Meta:
 class ArticleType(DjangoObjectType):
     class Meta:
         model = Article
-        exclude = ("created_at",)
 
 
 class CommentType(DjangoObjectType):
     class Meta:
         model = Comment
-        exclude = ("created_at",)
 
 
 class TagType(DjangoObjectType):
diff --git a/server/db.sqlite3 b/server/db.sqlite3
index 79bba6b..1bbd0f1 100644
Binary files a/server/db.sqlite3 and b/server/db.sqlite3 differ