diff --git a/README.md b/README.md
index b4f065e..a95c8e2 100644
--- a/README.md
+++ b/README.md
@@ -67,3 +67,7 @@
  - pip install pre-commit
  - pip freeze > requirements.txt
  - pre-commit install
+
+
+### Requirements
+ - Create a mail services for **contact@webdevlab.com**
diff --git a/client/assets/sass/HomePage.scss b/client/assets/sass/HomePage.scss
index 17cd8e8..d91eeed 100644
--- a/client/assets/sass/HomePage.scss
+++ b/client/assets/sass/HomePage.scss
@@ -1,26 +1,26 @@
-#feature-card {
-    height: 60vh;
+// #feature-card {
+//     height: 60vh;
 
-    img {
-        max-height: none !important;
-        max-width: none !important;
-        height: 100% !important;
-    }
-}
+//     img {
+//         max-height: none !important;
+//         max-width: none !important;
+//         height: 100% !important;
+//     }
+// }
 
-#latest-posts {
-    .latest-post-card {
-        max-height: none !important;
-        max-width: none !important;
-        height: 6.9rem;
+// #latest-posts {
+//     .latest-post-card {
+//         max-height: none !important;
+//         max-width: none !important;
+//         height: 6.9rem;
 
-    }
+//     }
 
-    .card {
-        border: none !important;
+//     .card {
+//         border: none !important;
 
-        .card-body{
-            padding: 0 !important;
-        }
-    }
-}
\ No newline at end of file
+//         .card-body{
+//             padding: 0 !important;
+//         }
+//     }
+// }
\ No newline at end of file
diff --git a/client/components/article/ArticleCard.vue b/client/components/article/ArticleCard.vue
deleted file mode 100644
index cc340bc..0000000
--- a/client/components/article/ArticleCard.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
diff --git a/client/components/article/ArticleThumbCard.vue b/client/components/article/ArticleThumbCard.vue
new file mode 100644
index 0000000..c79b211
--- /dev/null
+++ b/client/components/article/ArticleThumbCard.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="card mb-3" style="width: 100%;">
+        <div class="row g-0">
+            <div class="col-md-4">
+                <CldImage v-if="props.article.thumbnail" :src="props.article.thumbnail" width="800" height="800"
+                    class="card-img img-fluid rounded-start" :alt="props.article.title" />
+            </div>
+            <div class="col-md-8">
+                <div class="card-body">
+                    <h5 class="card-title">{{ props.article.title }}</h5>
+                    <p class="card-text">{{ shortDesc(props.article.content, 200) }}</p>
+                    <p class="card-text"><small class="text-body-secondary">{{
+                    props.article.createdAt &&
+                    formatReadableDate(props.article.createdAt)
+                            }}</small></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps(['article']);
+</script>
\ No newline at end of file
diff --git a/client/components/category/CategoryAdd.vue b/client/components/category/CategoryAdd.vue
index 20d4273..0ec1931 100644
--- a/client/components/category/CategoryAdd.vue
+++ b/client/components/category/CategoryAdd.vue
@@ -1,10 +1,18 @@
 <!-- components/CategoryForm.vue -->
 <template>
-  <form @submit.prevent="addCategory">
-    <label for="categoryName">Category Name:</label>
-    <input id="categoryName" v-model="categoryName" type="text" required >
-
-    <button type="submit">Add</button>
+  <form @submit.prevent="addCategory" class="container mt-5">
+    <div class="form-group">
+      <label for="categoryName">Category Name:</label>
+      <input
+        id="categoryName"
+        v-model="categoryName"
+        type="text"
+        class="form-control"
+        required
+        placeholder="Enter category name"
+      >
+    </div>
+    <button type="submit" class="btn btn-primary mt-3">Add Category</button>
   </form>
 </template>
 
@@ -13,16 +21,11 @@ import { CREATE_CATEGORY } from '~/graphql/categories';
 
 const categoryName = ref('');
 
-const { mutate: addComment } = useMutation(CREATE_CATEGORY);
+const { mutate: addArticleCategory } = useMutation(CREATE_CATEGORY);
 const addCategory = async () => {
   try {
-    const response = await addComment({
-      variables: {
-        name: categoryName.value,
-      },
-      context: {
-        clientName: 'default', // Provide the client name explicitly
-      },
+    const response = await addArticleCategory({
+      name: categoryName.value,
     });
 
     // Handle response as needed
diff --git a/client/components/home/HomePage.backup.vue b/client/components/home/HomePage.backup.vue
new file mode 100644
index 0000000..97de956
--- /dev/null
+++ b/client/components/home/HomePage.backup.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="container">
+    <section class="section section-1">
+      <div class="row">
+        <!-- Left side / Top side on mobile start  -->
+        <div class="col-12 col-md-8">
+          <NuxtLink v-if="state.latestArticles && state.latestArticles.length > 0" class="card text-bg-dark text-decoration-none" id="feature-card" :to="state.latestArticles[0].link">
+            <CldImage :src="state.latestArticles[1].thumbnail" width="800" height="800" class="card-img"
+              :alt="state.latestArticles[1].title" />
+            <div class="card-img-overlay d-flex flex-column justify-content-end">
+              <h1 class="card-title">{{ state.latestArticles[1].title }}</h1>
+              <p class="card-text">
+                {{ shortDesc(state.latestArticles[1].content, 200) }}
+              </p>
+              <p class="card-text">
+                <small>{{
+            state.latestArticles[1].createdAt &&
+            formatReadableDate(state.latestArticles[1].createdAt)
+          }}</small>
+              </p>
+            </div>
+          </NuxtLink>
+        </div>
+        <!-- Left side / Top side on mobile end  -->
+
+        <!-- Right side / bottom side on the mobile start  -->
+        <div class="col-12 col-md-4">
+          <p class="text-uppercase">This week's</p>
+          <h2>Trending Posts</h2>
+
+          <div v-if="state.trendingArticles && state.trendingArticles.length > 0" class="d-flex flex-column"
+            id="latest-posts">
+            <NuxtLink v-for="trendingArticle in state.trendingArticles.slice(0, 4)" :key="trendingArticle.id"
+              class="card mb-3 latest-post-card border border-bottom text-decoration-none" :to="trendingArticle.link" style="max-width: 540px">
+              <div class="row">
+                <div class="col-4">
+                  <CldImage :src="trendingArticle.thumbnail" width="400" height="400" class="img-fluid rounded-start"
+                    :alt="trendingArticle.title" />
+                </div>
+                <div class="col-8">
+                  <div class="card-body">
+                    <h2 class="card-title">{{ trendingArticle.title }}</h2>
+                    <!-- <p class="card-text">{{ shortDesc(article.content, 200) }}</p>
+                    <p class="card-text">
+                      <small class="text-body-secondary">{{
+                        article.createdAt && formatRelativeDate(article.createdAt)
+                      }}</small>
+                    </p> -->
+                  </div>
+                </div>
+              </div>
+            </NuxtLink>
+          </div>
+        </div>
+        <!-- Right side / bottom side on the mobile end  -->
+      </div>
+    </section>
+
+    <section class="section section-2">
+      <div class="row">
+        <p class="text-uppercase">Popular</p>
+        <h2>Tutorial</h2>
+      </div>
+      <div class="row">
+        <NuxtLink class="col-md-4 text-decoration-none" v-if="state.tutorialArticles && state.tutorialArticles.length > 0"
+              v-for="tutorialArticle in state.tutorialArticles.slice(1, 5)" :key="tutorialArticle.id" v-bind:to="tutorialArticle.link" >
+          <ArticleThumbCard :article="tutorialArticle" />
+        </NuxtLink>
+      </div>
+    </section>
+
+    <section class="section section-3">
+      <div class="row">
+        <p class="text-uppercase">Popular</p>
+        <h2>Tech News</h2>
+      </div>
+      <div class="row">
+        <div class="col-md-5">
+          <div v-if="state.newsArticles && state.newsArticles.length > 0 && state.newsArticles[1]" class="card text-bg-dark">
+            <CldImage v-if="state.newsArticles[1]" :src="state.newsArticles[1].thumbnail" width="800" height="800" class="card-img"
+              :alt="state.newsArticles[1].title" />
+            <div class="card-img-overlay d-flex flex-column justify-content-end">
+              <h1 class="card-title">{{ state.newsArticles[1].title }}</h1>
+              <p class="card-text">
+                {{ shortDesc(state.newsArticles[1].content, 200) }}
+              </p>
+              <p class="card-text">
+                <small>{{
+            state.newsArticles[1].createdAt &&
+            formatReadableDate(state.newsArticles[1].createdAt)
+          }}</small>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-7">
+          <div class="row">
+            <NuxtLink v-if="state.newsArticles && state.newsArticles.length > 0"
+              v-for="newsArticle in state.newsArticles.slice(1, 5)" :to="newsArticle.link" :key="newsArticle.id" class="col-md-6 text-decoration-none">
+              <div class="card text-bg-dark">
+                <CldImage :src="newsArticle.thumbnail" width="800" height="800" class="card-img"
+                  :alt="newsArticle.title" />
+                <div class="card-img-overlay d-flex flex-column justify-content-end">
+                  <h1 class="card-title">{{ newsArticle.title }}</h1>
+                  <p class="card-text">
+                    {{ shortDesc(newsArticle.content, 200) }}
+                  </p>
+                  <p class="card-text">
+                    <small>{{
+            newsArticle.createdAt &&
+            formatReadableDate(newsArticle.createdAt)
+                      }}</small>
+                  </p>
+                </div>
+              </div>
+            </NuxtLink>
+            <div class="col-md-6">
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+import type { IArticle } from '../../types/Article';
+import { GET_ARTICLES } from '~/graphql/articles';
+
+interface IStateProps {
+  allArticles: IArticle[];
+  latestArticles: IArticle[];
+  newsArticles: IArticle[];
+  tutorialArticles: IArticle[];
+  trendingArticles: IArticle[];
+}
+
+const state = reactive<IStateProps>({
+  allArticles: [],
+  latestArticles: [],
+  newsArticles: [],
+  tutorialArticles: [],
+  trendingArticles: [],
+});
+
+type ArticlesResult = {
+  allArticles: IArticle[];
+};
+
+
+
+// Fetch articles
+const { data, error } = await useAsyncQuery<ArticlesResult>(GET_ARTICLES, { start: 1, limit: 50 });
+// console.log({ articles: data.value?.allArticles });
+
+// Log data in a nice-looking format
+// const articles: Ref<IArticle[]> = ref([]);
+if (data) {
+  const allArticles: IArticle[] = data?.value?.allArticles ? data?.value?.allArticles : [];
+  state.allArticles = allArticles;
+
+  const latestArticles = [], newsArticles = [], tutorialArticles = [], trendingArticles = [];
+  // Seperate all category
+  for (let i = 0; i < allArticles.length; i += 1) {
+    const element = allArticles[i];
+    if (element.category.name.toUpperCase() === "LATEST") {
+      latestArticles.push(element);
+    } else if (element.category.name.toUpperCase() === "NEWS") {
+      newsArticles.push(element);
+    } else if (element.category.name.toUpperCase() === "TUTORIAL") {
+      tutorialArticles.push(element);
+    } else if (element.category.name.toUpperCase() === "TRENDING") {
+      trendingArticles.push(element);
+    }
+  }
+
+  state.latestArticles = latestArticles;
+  state.newsArticles = newsArticles;
+  state.tutorialArticles = tutorialArticles;
+  state.trendingArticles = trendingArticles;
+}
+
+// Handle error
+if (error) {
+  console.error('Error fetching articles:', error);
+}
+</script>
diff --git a/client/components/home/HomePage.vue b/client/components/home/HomePage.vue
index 56645d3..b28be12 100644
--- a/client/components/home/HomePage.vue
+++ b/client/components/home/HomePage.vue
@@ -1,205 +1,173 @@
 <template>
   <div class="container">
-    <section class="section section-1">
-      <div class="row">
-        <!-- Left side / Top side on mobile start  -->
-        <div class="col-12 col-md-8">
-          <NuxtLink v-if="state.latestArticles && state.latestArticles.length > 0" class="card text-bg-dark text-decoration-none" id="feature-card" :to="state.latestArticles[0].link">
-            <CldImage :src="state.latestArticles[1].thumbnail" width="800" height="800" class="card-img"
-              :alt="state.latestArticles[1].title" />
-            <div class="card-img-overlay d-flex flex-column justify-content-end">
-              <h1 class="card-title">{{ state.latestArticles[1].title }}</h1>
-              <p class="card-text">
-                {{ shortDesc(state.latestArticles[1].content, 200) }}
-              </p>
-              <p class="card-text">
-                <small>{{
-            state.latestArticles[1].createdAt &&
-            formatReadableDate(state.latestArticles[1].createdAt)
-          }}</small>
-              </p>
-            </div>
-          </NuxtLink>
-        </div>
-        <!-- Left side / Top side on mobile end  -->
-
-        <!-- Right side / bottom side on the mobile start  -->
-        <div class="col-12 col-md-4">
-          <p class="text-uppercase">This week's</p>
-          <h2>Trending Posts</h2>
-
-          <div v-if="state.trendingArticles && state.trendingArticles.length > 0" class="d-flex flex-column"
-            id="latest-posts">
-            <NuxtLink v-for="trendingArticle in state.trendingArticles.slice(0, 4)" :key="trendingArticle.id"
-              class="card mb-3 latest-post-card border border-bottom text-decoration-none" :to="trendingArticle.link" style="max-width: 540px">
-              <div class="row">
-                <div class="col-4">
-                  <CldImage :src="trendingArticle.thumbnail" width="400" height="400" class="img-fluid rounded-start"
-                    :alt="trendingArticle.title" />
-                </div>
-                <div class="col-8">
-                  <div class="card-body">
-                    <h2 class="card-title">{{ trendingArticle.title }}</h2>
-                    <!-- <p class="card-text">{{ shortDesc(article.content, 200) }}</p>
-                    <p class="card-text">
-                      <small class="text-body-secondary">{{
-                        article.createdAt && formatRelativeDate(article.createdAt)
-                      }}</small>
-                    </p> -->
-                  </div>
-                </div>
-              </div>
-            </NuxtLink>
-          </div>
-        </div>
-        <!-- Right side / bottom side on the mobile end  -->
-      </div>
+    <!-- Hero Section -->
+    <section class="hero-section">
+      <h1 class="display-4">Welcome to WebDevLab</h1>
+      <p class="lead">Your Partner for Web Development and Web3 Solutions</p>
+      <a href="#contact" class="btn btn-primary btn-lg">Get in Touch</a>
     </section>
 
-    <section class="section section-2">
-      <div class="row">
-        <p class="text-uppercase">Popular</p>
-        <h2>Tutorial</h2>
-      </div>
-      <div class="row">
-        <NuxtLink class="col-md-4 text-decoration-none" v-if="state.tutorialArticles && state.tutorialArticles.length > 0"
-              v-for="tutorialArticle in state.tutorialArticles.slice(1, 5)" :key="tutorialArticle.id" v-bind:to="tutorialArticle.link" >
-          <div class="card mb-3" style="width: 100%;"  >
-            <div class="row g-0">
-              <div class="col-md-4">
-                <CldImage :src="tutorialArticle.thumbnail" width="800" height="800" class="card-img img-fluid rounded-start"
-                  :alt="tutorialArticle.title" />
+    <!-- Services Section -->
+    <section id="services" class="services-section">
+      <div class="container text-center">
+        <h2 class="mb-5">Our Services</h2>
+        <div class="row">
+          <div class="col-md-4">
+            <div class="card service-card">
+              <div class="card-body">
+                <h5 class="card-title">Web Development</h5>
+                <p class="card-text">Custom websites, responsive design, and full-stack development to bring your ideas
+                  to life.</p>
               </div>
-              <div class="col-md-8">
-                <div class="card-body">
-                  <h5 class="card-title">{{ tutorialArticle.title }}</h5>
-                  <p class="card-text">{{ shortDesc(tutorialArticle.content, 200) }}</p>
-                  <p class="card-text"><small class="text-body-secondary">{{
-            tutorialArticle.createdAt &&
-            formatReadableDate(tutorialArticle.createdAt)
-                      }}</small></p>
-                </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card service-card">
+              <div class="card-body">
+                <h5 class="card-title">Web3 Solutions</h5>
+                <p class="card-text">Build decentralized applications and integrate blockchain technology into your
+                  business.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="card service-card">
+              <div class="card-body">
+                <h5 class="card-title">Consulting</h5>
+                <p class="card-text">Expert advice on Web3, blockchain, and digital transformation strategies.</p>
               </div>
             </div>
           </div>
-        </NuxtLink>
+        </div>
       </div>
     </section>
 
-    <section class="section section-3">
-      <div class="row">
-        <p class="text-uppercase">Popular</p>
-        <h2>Tech News</h2>
+    <!-- YouTube Section -->
+    <section class="youtube-section bg-light py-5">
+      <div class="container text-center">
+        <h2 class="mb-4">Check out our YouTube Channel</h2>
+        <p class="lead">Learn more about Web Development and Web3 through our tutorials and insights.</p>
+        <a href="https://www.youtube.com/@web-dev-lab" class="btn btn-danger btn-lg">Visit our YouTube Channel</a>
       </div>
-      <div class="row">
-        <div class="col-md-5">
-          <div v-if="state.newsArticles && state.newsArticles.length > 0" class="card text-bg-dark">
-            <CldImage :src="state.newsArticles[1].thumbnail" width="800" height="800" class="card-img"
-              :alt="state.newsArticles[1].title" />
-            <div class="card-img-overlay d-flex flex-column justify-content-end">
-              <h1 class="card-title">{{ state.newsArticles[1].title }}</h1>
-              <p class="card-text">
-                {{ shortDesc(state.newsArticles[1].content, 200) }}
-              </p>
-              <p class="card-text">
-                <small>{{
-            state.newsArticles[1].createdAt &&
-            formatReadableDate(state.newsArticles[1].createdAt)
-          }}</small>
+    </section>
+
+    <!-- Contact Us Section -->
+    <section id="contact" class="contact-section py-5">
+      <div class="container text-center">
+        <h2 class="mb-5 display-6">Get in Touch</h2>
+        <p class="lead text-muted">We’d love to hear from you! Whether you have a project in mind or just want to ask a
+          question, reach out to us.</p>
+
+        <!-- Contact Details -->
+        <div class="row text-center mb-5">
+          <div class="col-md-4 mb-4">
+            <div class="p-4 border rounded shadow-sm bg-light">
+              <i class="bi bi-envelope-fill fs-2 mb-3 text-primary"></i>
+              <h5>Email</h5>
+              <p class="text-muted"><a href="mailto:mdsamsuzzoha5222@gmail.com"
+                  class="text-decoration-none text-dark">mdsamsuzzoha5222@gmail.com</a></p>
+            </div>
+          </div>
+          <div class="col-md-4 mb-4">
+            <div class="p-4 border rounded shadow-sm bg-light">
+              <i class="bi bi-telephone-fill fs-2 mb-3 text-primary"></i>
+              <h5>Phone</h5>
+              <p class="text-muted"><a href="tel:+8801889171929" class="text-decoration-none text-dark">+8801889171929</a>
               </p>
             </div>
           </div>
+          <div class="col-md-4 mb-4">
+            <div class="p-4 border rounded shadow-sm bg-light">
+              <i class="bi bi-geo-alt-fill fs-2 mb-3 text-primary"></i>
+              <h5>Address</h5>
+              <p class="text-muted">58-Gha, West Rajabazaar, Dhaka, Bangladesh</p>
+            </div>
+          </div>
         </div>
-        <div class="col-md-7">
-          <div class="row">
-            <NuxtLink v-if="state.newsArticles && state.newsArticles.length > 0"
-              v-for="newsArticle in state.newsArticles.slice(1, 5)" :to="newsArticle.link" :key="newsArticle.id" class="col-md-6 text-decoration-none">
-              <div class="card text-bg-dark">
-                <CldImage :src="newsArticle.thumbnail" width="800" height="800" class="card-img"
-                  :alt="newsArticle.title" />
-                <div class="card-img-overlay d-flex flex-column justify-content-end">
-                  <h1 class="card-title">{{ newsArticle.title }}</h1>
-                  <p class="card-text">
-                    {{ shortDesc(newsArticle.content, 200) }}
-                  </p>
-                  <p class="card-text">
-                    <small>{{
-            newsArticle.createdAt &&
-            formatReadableDate(newsArticle.createdAt)
-                      }}</small>
-                  </p>
+
+        <!-- Contact Form -->
+        <div class="row">
+          <div class="col-md-8 offset-md-2">
+            <div class="p-4 border rounded shadow-lg bg-light">
+              <h5 class="mb-4">Send Us a Message</h5>
+              <form class="contact-form">
+                <div class="mb-3">
+                  <input type="text" class="form-control" placeholder="Your Name" required>
                 </div>
-              </div>
-            </NuxtLink>
-            <div class="col-md-6">
+                <div class="mb-3">
+                  <input type="email" class="form-control" placeholder="Your Email" required>
+                </div>
+                <div class="mb-3">
+                  <textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary btn-lg px-5">Send Message</button>
+              </form>
             </div>
           </div>
         </div>
       </div>
     </section>
+
+
+    <!-- Footer -->
+    <footer>
+      <p>© 2024 WebDevLab | Web Development & Web3 Agency | <a href="mailto:mdsamsuzzoha5222@gmail.com"
+          style="color: #fff;">mdsamsuzzoha5222@gmail.com</a> | 58-Gha, West Rajabazaar, Dhaka, Bangladesh</p>
+    </footer>
+
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from 'vue';
-import type { IArticle } from '../../types/Article';
-import { GET_ARTICLES } from '~/graphql/articles';
-
-interface IStateProps {
-  allArticles: IArticle[];
-  latestArticles: IArticle[];
-  newsArticles: IArticle[];
-  tutorialArticles: IArticle[];
-  trendingArticles: IArticle[];
+
+</script>
+
+
+<style lang="scss">
+body {
+  font-family: 'Arial', sans-serif;
 }
 
-const state = reactive<IStateProps>({
-  allArticles: [],
-  latestArticles: [],
-  newsArticles: [],
-  tutorialArticles: [],
-  trendingArticles: [],
-});
-
-type ArticlesResult = {
-  allArticles: IArticle[];
-};
-
-
-
-// Fetch articles
-const { data, error } = await useAsyncQuery<ArticlesResult>(GET_ARTICLES, { start: 1, limit: 50 });
-// console.log({ articles: data.value?.allArticles });
-
-// Log data in a nice-looking format
-// const articles: Ref<IArticle[]> = ref([]);
-if (data) {
-  const allArticles: IArticle[] = data?.value?.allArticles ? data?.value?.allArticles : [];
-  state.allArticles = allArticles;
-
-  const latestArticles = [], newsArticles = [], tutorialArticles = [], trendingArticles = [];
-  // Seperate all category
-  for (let i = 0; i < allArticles.length; i += 1) {
-    const element = allArticles[i];
-    if (element.category.name.toUpperCase() === "LATEST") {
-      latestArticles.push(element);
-    } else if (element.category.name.toUpperCase() === "NEWS") {
-      newsArticles.push(element);
-    } else if (element.category.name.toUpperCase() === "TUTORIAL") {
-      tutorialArticles.push(element);
-    } else if (element.category.name.toUpperCase() === "TRENDING") {
-      trendingArticles.push(element);
-    }
-  }
-
-  state.latestArticles = latestArticles;
-  state.newsArticles = newsArticles;
-  state.tutorialArticles = tutorialArticles;
-  state.trendingArticles = trendingArticles;
+.hero-section {
+  height: 50vh;
+  background: linear-gradient(to right, #6a11cb, #2575fc);
+  color: white;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
-// Handle error
-if (error) {
-  console.error('Error fetching articles:', error);
+.services-section,
+.contact-section {
+  padding: 60px 0;
 }
-</script>
+
+.service-card {
+  border: none;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s;
+}
+
+.service-card:hover {
+  transform: translateY(-10px);
+}
+
+.contact-form input,
+.contact-form textarea {
+  border-radius: 0;
+}
+
+footer {
+  background-color: #333;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}
+
+.btn-primary {
+  background-color: #6a11cb;
+  border-color: #6a11cb;
+}
+</style>
diff --git a/client/layouts/default.backup.vue b/client/layouts/default.backup.vue
new file mode 100644
index 0000000..c227371
--- /dev/null
+++ b/client/layouts/default.backup.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="admin-layout p-0 m-0 overflow-x-hidden">
+    <div class="row">
+      <div v-if="state.showMenu" class="col-md-2 bg-dark text-capitalize">
+        <div class="menu-wrapper w-full d-flex justify-content-end me-3 mt-3">
+          <Icon :name="iName.close" :size="iDesign.smSize" :color="iColor.light" role="presentation"
+            @click.prevent="handleToggleMenu(false)" />
+        </div>
+        <ul v-if="state.showMenu" class="nav flex-column">
+          <li v-for="(item, index) in userMenuList" :key="index" class="nav-item">
+            <NuxtLink :to="item.link" class="nav-link text-light">
+              <span class="me-2">
+                <Icon :name="item.iconName" :size="iDesign.smSize" :color="iColor.light" />
+              </span>
+              <span>{{ item.text }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+      <div :class="`${state.showMenu ? 'col-md-10' : 'col-md-12'} `">
+        <AdminNavbar :show-menu="state.showMenu" :handle-toggle-menu="handleToggleMenu" />
+        <main>
+          <slot />
+        </main>
+      </div>
+    </div>
+    <Footer :allCategories="state.allCategories" :userMenuList="userMenuList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { userMenuList } from '~/assets/js/staticData';
+import { GET_CATEGORIES } from '~/graphql/categories';
+import type { ICategory } from '~/types';
+
+interface IStateProps {
+  showMenu: boolean;
+  allCategories: ICategory[];
+}
+
+const state = reactive<IStateProps>({ showMenu: false, allCategories: [] });
+
+try {
+  const { data } = await useAsyncQuery(GET_CATEGORIES);
+  state.allCategories = data.value?.allCategories || [];
+
+} catch (error) {
+  console.log(error);
+
+}
+
+
+const handleToggleMenu = (showMenu: boolean) => {
+  state.showMenu = showMenu;
+};
+</script>
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index a157032..01ce50b 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -1,56 +1,9 @@
 <template>
-  <div class="admin-layout p-0 m-0 overflow-x-hidden">
-    <div class="row">
-      <div v-if="state.showMenu" class="col-md-2 bg-dark text-capitalize">
-        <div class="menu-wrapper w-full d-flex justify-content-end me-3 mt-3">
-          <Icon :name="iName.close" :size="iDesign.smSize" :color="iColor.light" role="presentation"
-            @click.prevent="handleToggleMenu(false)" />
-        </div>
-        <ul v-if="state.showMenu" class="nav flex-column">
-          <li v-for="(item, index) in userMenuList" :key="index" class="nav-item">
-            <NuxtLink :to="item.link" class="nav-link text-light">
-              <span class="me-2">
-                <Icon :name="item.iconName" :size="iDesign.smSize" :color="iColor.light" />
-              </span>
-              <span>{{ item.text }}</span>
-            </NuxtLink>
-          </li>
-        </ul>
-      </div>
-      <div :class="`${state.showMenu ? 'col-md-10' : 'col-md-12'} `">
-        <AdminNavbar :show-menu="state.showMenu" :handle-toggle-menu="handleToggleMenu" />
-        <main>
-          <slot />
-        </main>
-      </div>
-    </div>
-    <Footer :allCategories="state.allCategories" :userMenuList="userMenuList" />
-  </div>
+
+  <main>
+    <slot />
+  </main>
 </template>
 
 <script setup lang="ts">
-import { userMenuList } from '~/assets/js/staticData';
-import { GET_CATEGORIES } from '~/graphql/categories';
-import type { ICategory } from '~/types';
-
-interface IStateProps {
-  showMenu: boolean;
-  allCategories: ICategory[];
-}
-
-const state = reactive<IStateProps>({ showMenu: false, allCategories: [] });
-
-try {
-  const { data } = await useAsyncQuery(GET_CATEGORIES);
-  state.allCategories = data.value?.allCategories || [];
-  
-} catch (error) {
-  console.log(error);
-
-}
-
-
-const handleToggleMenu = (showMenu: boolean) => {
-  state.showMenu = showMenu;
-};
 </script>
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index 30db24c..9f7ad2e 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -2,6 +2,7 @@
 
 export default defineNuxtConfig({
   ssr: false,
+  target: 'static',
   devtools: { enabled: true },
   app: {
     // <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
diff --git a/client/pages/admin/category.vue b/client/pages/admin/category.vue
index cfa730b..0666b88 100644
--- a/client/pages/admin/category.vue
+++ b/client/pages/admin/category.vue
@@ -1,33 +1,37 @@
 <template>
   <ClientOnly>
     <h1>Category</h1>
-    <Category v-for="cat in data.allCategories" :key="cat.id" :category="cat" />
+    <!-- <Category v-for="cat in data.allCategories" :key="cat.id" :category="cat" /> -->
+     <ul class="list-group">
+      <li class="list-group-item" v-for="cat in state.allCategories" :key="cat.id">{{ cat.name }}</li>
+     </ul>
     <CategoryAdd />
   </ClientOnly>
 </template>
 
 <script setup lang="ts">
+import { GET_CATEGORIES } from '~/graphql/categories';
+import type { ICategory } from '~/types';
+
 definePageMeta({
   layout: 'admin',
 });
 
-const query = gql`
-  query AllCategories {
-    allCategories {
-      id
-      name
-    }
-  }
-`;
-
-interface ICategory {
-  id: number;
-  name: string;
+interface IStateProps{
+  allCategories: ICategory[];
 }
 
+const state = reactive<IStateProps>({allCategories: []});
+
 type Category = {
   allCategories: ICategory[];
 };
-const { data } = await useAsyncQuery<Category>(query);
-// console.log(data.value);
+
+try {
+  const { data } = await useAsyncQuery<Category>(GET_CATEGORIES);
+  state.allCategories = data.value?.allCategories || [];
+} catch (error) {
+  console.log(error);
+
+}
 </script>
diff --git a/client/pages/category/[categoryId].vue b/client/pages/category/[categoryId].vue
index 84840b7..e83cad6 100644
--- a/client/pages/category/[categoryId].vue
+++ b/client/pages/category/[categoryId].vue
@@ -1,32 +1,60 @@
 <template>
     <div class="container">
-        <!-- <ArticleExpand :post-link="$route.params.categoryId" /> -->
-         List of article
-         <!-- <p v-for="art in state.category.articleSet">{{ art.name }}</p> -->
+        <div class="category w-full" v-if="state.category">
+            <div class="row">
+                <div class="col">
+                    <p class="text-uppercase">Browsing Category</p>
+                    <h1>{{ state.category?.name || 'None' }}</h1>
+                </div>
+                <!-- <p v-for="art in state.allArticles">{{ art.title }}</p> -->
+            </div>
+            <div class="row">
+                <div class="col-md-8">
+                    <div class="row">
+                        <NuxtLink class="col-12 text-decoration-none"
+                            v-if="state.allArticles && state.allArticles.length > 0"
+                            v-for="tutorialArticle in state.allArticles" :key="tutorialArticle.id"
+                            v-bind:to="tutorialArticle.link">
+                            <ArticleThumbCard :article="tutorialArticle" />
+                        </NuxtLink>
+                    </div>
+                </div>
+                <div class="col-md-4 d-flex flex-column">
+                    <div class="sticky-top">
+                        <h3>Top posts of the category</h3>
+                        <p>Twitter feed</p>
+                        <p>YouTube Feed</p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { GET_CATEGORY_WITH_ARTICLES } from '../../graphql/categories';
-import type { ICategoryWithArticle } from '~/types';
+import type { IArticle, ICategory, ICategoryWithArticle } from '~/types';
 const route = useRoute();
 
-interface IStateProps{
-    category: ICategoryWithArticle;
+interface IStateProps {
+    category: ICategory | null;
+    allArticles: IArticle[];
 }
 
-const state = reactive({category: null})
+const state = reactive<IStateProps>({ category: null, allArticles: [] })
 
 // Get all article of a category
 try {
-    const { data } = await useAsyncQuery(GET_CATEGORY_WITH_ARTICLES, {variables: {id: route.params.categoryId}});
-    console.log(data.value);
-    if(data.value && data.value.categoryById){
-        state.category = data.value;
+    const { data } = await useAsyncQuery(GET_CATEGORY_WITH_ARTICLES, { id: route.params.categoryId });
+    if (data.value && data.value.categoryById) {
+        console.log(data.value);
+        state.category = data.value.categoryById;
+        state.allArticles = data.value?.categoryById?.articleSet || [];
     }
 } catch (error) {
     console.log(error);
-    
+
 }
 
 </script>
\ No newline at end of file
diff --git a/client/types/Category.ts b/client/types/Category.ts
index cb0ba21..5c69165 100644
--- a/client/types/Category.ts
+++ b/client/types/Category.ts
@@ -9,5 +9,5 @@ export interface ICategory {
 export interface ICategoryWithArticle extends ICategory {
   id: number;
   name: string;
-  articleSet: IArticle[];
+  allArticles: IArticle[];
 }