diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 000000000..6673a8093
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,65 @@
+name: Build Container Image
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    tags:
+      - "*"
+
+jobs:
+  build:
+    name: Build
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        arch: [amd64, arm64]
+
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/${{ matrix.arch }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set Branch
+        run: |
+          export APPS_JSON='[{"url": "https://github.com/frappe/helpdesk","branch": "main"}]'
+          echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
+          echo "FRAPPE_BRANCH=version-15" >> $GITHUB_ENV
+
+      - name: Set Image Tag
+        run: |
+          echo "IMAGE_TAG=stable" >> $GITHUB_ENV
+
+      - uses: actions/checkout@v4
+        with:
+          repository: frappe/frappe_docker
+          path: builds
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          context: builds
+          file: builds/images/layered/Containerfile
+          tags: >
+            ghcr.io/${{ github.repository }}:${{ github.ref_name }},
+            ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
+          build-args: |
+            "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
+            "APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 5ddfafbda..5e52f71c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ __pycache__/
 *.log
 tags
 node_modules
+.vscode
 
 # Distribution / packaging
 .Python
diff --git a/desk/src/components/BrandLogo.vue b/desk/src/components/BrandLogo.vue
index 632c0fdac..7aa2f4a12 100644
--- a/desk/src/components/BrandLogo.vue
+++ b/desk/src/components/BrandLogo.vue
@@ -1,5 +1,10 @@
 <template>
-  <Avatar v-if="config.brandLogo" size="xl" :image="config.brandLogo" />
+  <img
+    v-if="config.brandLogo"
+    :src="config.brandLogo"
+    alt="Brand Logo"
+    class="h-8 w-8 shrink-0 object-cover"
+  />
   <HDLogo v-else class="h-8 w-8 shrink-0 rounded" />
 </template>
 
diff --git a/desk/src/components/CommentTextEditor.vue b/desk/src/components/CommentTextEditor.vue
index aef0a6583..57979441f 100644
--- a/desk/src/components/CommentTextEditor.vue
+++ b/desk/src/components/CommentTextEditor.vue
@@ -104,6 +104,7 @@ import { AttachmentItem } from "@/components/";
 import { useAgentStore } from "@/stores/agent";
 import { useStorage } from "@vueuse/core";
 import { PreserveVideoControls } from "@/tiptap-extensions";
+import { textEditorMenuButtons } from "@/utils";
 
 const { agents: agentsList } = useAgentStore();
 
@@ -163,42 +164,4 @@ async function submitComment() {
 
   comment.submit();
 }
-
-const textEditorMenuButtons = [
-  "Paragraph",
-  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-  "Separator",
-  "Bold",
-  "Italic",
-  "Separator",
-  "Bullet List",
-  "Numbered List",
-  "Separator",
-  "Align Left",
-  "Align Center",
-  "Align Right",
-  "FontColor",
-  "Separator",
-  "Image",
-  "Video",
-  "Link",
-  "Blockquote",
-  "Code",
-  "Horizontal Rule",
-  [
-    "InsertTable",
-    "AddColumnBefore",
-    "AddColumnAfter",
-    "DeleteColumn",
-    "AddRowBefore",
-    "AddRowAfter",
-    "DeleteRow",
-    "MergeCells",
-    "SplitCell",
-    "ToggleHeaderColumn",
-    "ToggleHeaderRow",
-    "ToggleHeaderCell",
-    "DeleteTable",
-  ],
-];
 </script>
diff --git a/desk/src/components/DiscardButton.vue b/desk/src/components/DiscardButton.vue
new file mode 100644
index 000000000..c74a8f53d
--- /dev/null
+++ b/desk/src/components/DiscardButton.vue
@@ -0,0 +1,40 @@
+<template>
+  <Button :label="label" @click="handleDiscard" />
+</template>
+
+<script setup lang="ts">
+import { confirmDialog } from "frappe-ui";
+
+const emit = defineEmits<{
+  (event: "discard"): void;
+}>();
+
+const {
+  label = "Discard",
+  hideDialog = false,
+  title = "Discard?",
+  message = "Are you sure you want to discard this?",
+} = defineProps<{
+  label?: string;
+  hideDialog?: boolean;
+  title?: string;
+  message?: string;
+}>();
+
+function handleDiscard() {
+  if (hideDialog) {
+    emit("discard");
+    return;
+  }
+  confirmDialog({
+    title: title,
+    message: message,
+    onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+      emit("discard");
+      hideDialog();
+    },
+  });
+}
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
index 184729346..a672eda80 100644
--- a/desk/src/components/EmailEditor.vue
+++ b/desk/src/components/EmailEditor.vue
@@ -157,7 +157,7 @@ import {
   TextEditorFixedMenu,
   createResource,
 } from "frappe-ui";
-import { createToast, validateEmail } from "@/utils";
+import { createToast, validateEmail, textEditorMenuButtons } from "@/utils";
 import {
   MultiSelectInput,
   AttachmentItem,
@@ -298,44 +298,6 @@ function addToReply(
     .run();
 }
 
-const textEditorMenuButtons = [
-  "Paragraph",
-  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-  "Separator",
-  "Bold",
-  "Italic",
-  "Separator",
-  "Bullet List",
-  "Numbered List",
-  "Separator",
-  "Align Left",
-  "Align Center",
-  "Align Right",
-  "FontColor",
-  "Separator",
-  "Image",
-  "Video",
-  "Link",
-  "Blockquote",
-  "Code",
-  "Horizontal Rule",
-  [
-    "InsertTable",
-    "AddColumnBefore",
-    "AddColumnAfter",
-    "DeleteColumn",
-    "AddRowBefore",
-    "AddRowAfter",
-    "DeleteRow",
-    "MergeCells",
-    "SplitCell",
-    "ToggleHeaderColumn",
-    "ToggleHeaderRow",
-    "ToggleHeaderCell",
-    "DeleteTable",
-  ],
-];
-
 const editor = computed(() => {
   return editorRef.value.editor;
 });
diff --git a/desk/src/components/ListRows.vue b/desk/src/components/ListRows.vue
new file mode 100644
index 000000000..afcd843aa
--- /dev/null
+++ b/desk/src/components/ListRows.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="mx-3 mt-2 h-full overflow-y-auto sm:mx-5" v-if="showGroupedRows">
+    <div v-for="group in groupedRows" :key="group.group">
+      <ListGroupHeader :group="group">
+        <div
+          class="my-2 flex items-center gap-2 text-base font-medium text-ink-gray-8 justify-between w-full mr-1"
+        >
+          <div class="flex items-center gap-2 w-full">
+            <component v-if="group.icon" :is="group.icon" />
+            <div v-if="group.group.label == ''">
+              {{ "General" }}
+              <span class="text-xs text-ink-gray-6"
+                >{{
+                  group.rows.length +
+                  " Article" +
+                  (group.rows.length > 1 ? "s" : "")
+                }}
+              </span>
+            </div>
+            <div v-else class="flex items-center gap-1 w-full">
+              <span>{{ group.group.label }}</span>
+              <span class="text-xs text-ink-gray-6"
+                >{{
+                  group.rows.length +
+                  " Article" +
+                  (group.rows.length > 1 ? "s" : "")
+                }}
+              </span>
+            </div>
+          </div>
+          <Dropdown
+            :options="actions(group)"
+            v-if="groupByActions.length > 0 && group.group.label != ''"
+          >
+            <Button variant="ghost">
+              <template #icon>
+                <IconMoreHorizontal class="h-4 w-4" />
+              </template>
+            </Button>
+          </Dropdown>
+        </div>
+      </ListGroupHeader>
+      <ListGroupRows :group="group" id="list-rows">
+        <ListRow
+          v-for="row in group.rows"
+          :key="row.name"
+          v-slot="{ idx, column, item }"
+          :row="row"
+          class="truncate text-base row"
+        >
+          <slot v-bind="{ idx, column, item, row }" />
+        </ListRow>
+      </ListGroupRows>
+    </div>
+  </div>
+  <ListRows class="mx-3 sm:mx-5" v-else id="list-rows">
+    <ListRow
+      v-for="row in groupedRows"
+      :key="row.name"
+      v-slot="{ idx, column, item }"
+      :row="row"
+      class="truncate text-base"
+    >
+      <slot v-bind="{ idx, column, item, row }" />
+    </ListRow>
+  </ListRows>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import {
+  ListRows,
+  ListRow,
+  ListGroupHeader,
+  ListGroupRows,
+  Dropdown,
+  Button,
+} from "frappe-ui";
+
+import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true,
+  },
+  groupByActions: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const groupedRows = ref(props.rows);
+
+const actions = (group) => {
+  const _actions = props.groupByActions.map((action) => {
+    return {
+      ...action,
+      onClick: () => action.onClick(group),
+    };
+  });
+  return _actions;
+};
+
+watch(
+  () => props.rows,
+  (val) => (groupedRows.value = val)
+);
+
+let showGroupedRows = computed(() => {
+  return props.rows.every(
+    (row) => row.group && row.rows && Array.isArray(row.rows)
+  );
+});
+</script>
+
+<style>
+.row > button > span > div > :nth-child(-n + 2) > * {
+  margin-left: 20px;
+}
+</style>
diff --git a/desk/src/components/ListViewBuilder.vue b/desk/src/components/ListViewBuilder.vue
index 427ed2350..d42f224de 100644
--- a/desk/src/components/ListViewBuilder.vue
+++ b/desk/src/components/ListViewBuilder.vue
@@ -1,9 +1,8 @@
 <template>
   <!-- View Controls -->
-  <FadedScrollableDiv
+  <div
     class="flex items-center justify-between gap-2 px-5 pb-4 pt-3"
     v-if="showViewControls"
-    orientation="horizontal"
   >
     <QuickFilters v-if="!isMobileView" />
     <div class="flex items-center gap-2" v-if="!isMobileView">
@@ -18,7 +17,7 @@
         <SortBy :hide-label="isMobileView" />
       </div>
     </div>
-  </FadedScrollableDiv>
+  </div>
 
   <!-- List View -->
   <ListView
@@ -43,32 +42,35 @@
         @columnWidthUpdated="(width) => console.log(width)"
       />
     </ListHeader>
-    <ListRows class="sm:mx-5 mx-3">
-      <ListRow
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ idx, column, item }"
-        :row="row"
-        class="truncate text-base"
-      >
-        <ListRowItem :item="item" :row="row" :column="column">
-          <!-- TODO: filters on click of other columns -->
-          <!-- and not on first column, it should emit the event -->
-          <div v-if="idx === 0" class="truncate">
-            {{ item }}
-          </div>
-          <div v-else-if="column.type === 'Datetime'">
-            {{ dayjs.tz(item).fromNow() }}
-          </div>
-          <div v-else-if="column.type === 'status'">
-            <Badge v-bind="handleStatusColor(item)" />
-          </div>
-          <div v-else class="truncate">
-            {{ item }}
-          </div>
-        </ListRowItem>
-      </ListRow>
+    <ListRows
+      :rows="rows"
+      v-slot="{ idx, column, item, row }"
+      :group-by-actions="props.options.groupByActions"
+    >
+      <ListRowItem :item="item" :row="row" :column="column">
+        <!-- TODO: filters on click of other columns -->
+        <!-- and not on first column, it should emit the event -->
+        <div v-if="idx === 0" class="truncate">
+          {{ item }}
+        </div>
+        <div v-else-if="column.type === 'Datetime'">
+          {{ dayjs.tz(item).fromNow() }}
+        </div>
+        <div v-else-if="column.type === 'status'">
+          <Badge v-bind="handleStatusColor(item)" />
+        </div>
+        <div v-else class="truncate">
+          {{ item }}
+        </div>
+      </ListRowItem>
     </ListRows>
+    <ListSelectBanner v-if="props.options.showSelectBanner">
+      <template #actions="{ selections }">
+        <Dropdown :options="selectBannerOptions(selections)">
+          <Button icon="more-horizontal" variant="ghost" />
+        </Dropdown>
+      </template>
+    </ListSelectBanner>
   </ListView>
 
   <!-- List Footer -->
@@ -100,26 +102,31 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, provide, computed } from "vue";
+import { reactive, provide, computed, h } from "vue";
 import {
   createResource,
   ListView,
   ListFooter,
   ListRowItem,
-  ListRows,
-  ListRow,
   ListHeader,
   ListHeaderItem,
+  ListSelectBanner,
   Badge,
+  FeatherIcon,
+  Dropdown,
 } from "frappe-ui";
 
-import { Filter, SortBy, QuickFilters } from "@/components/view-controls";
+import {
+  Filter,
+  SortBy,
+  QuickFilters,
+  Reload,
+} from "@/components/view-controls";
 import { dayjs } from "@/dayjs";
-import FadedScrollableDiv from "./FadedScrollableDiv.vue";
-import Reload from "./view-controls/Reload.vue";
+import ListRows from "./ListRows.vue";
 import { useScreenSize } from "@/composables/screen";
 import EmptyState from "./EmptyState.vue";
-import { BadgeStatus } from "@/types";
+import { BadgeStatus, View } from "@/types";
 
 interface P {
   options: {
@@ -133,6 +140,10 @@ interface P {
     hideViewControls?: boolean;
     selectable?: boolean;
     statusMap?: Record<string, BadgeStatus>;
+    view?: View;
+    groupByActions?: Array<any>;
+    showSelectBanner?: boolean;
+    selectBannerActions?: Record<string, any>;
   };
 }
 
@@ -147,6 +158,11 @@ const props = withDefaults(defineProps<P>(), {
       doctype: "",
       hideViewControls: false,
       selectable: true,
+      view: {
+        view_type: "list",
+        group_by_field: "owner",
+      },
+      groupByActions: [],
     };
   },
 });
@@ -164,12 +180,22 @@ const defaultParams = reactive({
   order_by: "modified desc",
   page_length: 20,
   page_length_count: 20,
+  view: props.options.view,
 });
 
 const emptyState = computed(() => {
   return props.options?.emptyState || defaultEmptyState;
 });
 
+function selectBannerOptions(selections: Set<string>) {
+  return props.options.selectBannerActions.map((action) => {
+    return {
+      ...action,
+      onClick: () => action.onClick(selections),
+    };
+  });
+}
+
 const list = createResource({
   url: "helpdesk.api.doc.get_list_data",
   params: defaultParams,
@@ -186,9 +212,44 @@ const list = createResource({
   },
 });
 
-const rows = computed(() => list.data?.data);
+const rows = computed(() => {
+  if (!list.data?.data) return [];
+  if (list.data.view_type === "group_by") {
+    if (!list.data?.group_by_field?.name) return [];
+    return getGroupedByRows(list.data.data, list.data.group_by_field);
+  }
+  return list.data?.data;
+});
 const columns = computed(() => list.data?.columns);
 
+function getGroupedByRows(listRows, groupByField) {
+  let groupedRows = [];
+  groupByField.options?.forEach((option) => {
+    let filteredRows = [];
+
+    if (!option.value) {
+      filteredRows = listRows.filter((row) => !row[groupByField.name]);
+    } else {
+      filteredRows = listRows.filter(
+        (row) => row[groupByField.name] == option.value
+      );
+    }
+
+    let groupDetail = {
+      group: option || " ",
+      collapsed: false,
+      rows: filteredRows,
+      icon: h(FeatherIcon, {
+        name: "folder",
+        class: "w-4 h-4",
+        color: "black",
+      }),
+    };
+    groupedRows.push(groupDetail);
+  });
+  return groupedRows || listRows;
+}
+
 function handleFetchFromField(column) {
   if (!column.hasOwnProperty("key")) return column;
   const regex = /([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)/;
@@ -301,9 +362,6 @@ function reload() {
 }
 
 function handlePageLength(count: number, loadMore: boolean = false) {
-  if (count >= list.data?.total_count) {
-    return;
-  }
   defaultParams.page_length_count = count;
   if (loadMore) {
     defaultParams.page_length += count;
diff --git a/desk/src/components/UserAvatar.vue b/desk/src/components/UserAvatar.vue
index 64b415a49..73d0360fb 100644
--- a/desk/src/components/UserAvatar.vue
+++ b/desk/src/components/UserAvatar.vue
@@ -8,9 +8,8 @@
     />
     <span
       v-if="expand"
-      class="truncate"
+      class="truncate capitalize text-base text-ink-gray-9 font-medium"
       :class="{
-        'text-gray-900': strong,
         'font-medium': strong,
       }"
     >
diff --git a/desk/src/components/command-palette/CP.vue b/desk/src/components/command-palette/CP.vue
index effe071b4..daff52ca8 100644
--- a/desk/src/components/command-palette/CP.vue
+++ b/desk/src/components/command-palette/CP.vue
@@ -165,7 +165,7 @@ export default {
           {
             title: "Knowledge Base",
             icon: () => h(LucideBookOpen),
-            route: { name: "DeskKBHome" },
+            route: { name: "AgentKnowledgeBase" },
             condition: () => true,
           },
         ].filter((item) => (item.condition ? item.condition() : true)),
diff --git a/desk/src/components/frappe-ui/Link.vue b/desk/src/components/frappe-ui/Link.vue
index 6fbd696e3..898821a33 100644
--- a/desk/src/components/frappe-ui/Link.vue
+++ b/desk/src/components/frappe-ui/Link.vue
@@ -81,6 +81,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  pageLength: {
+    type: Number,
+    default: 10,
+  },
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
@@ -127,12 +131,13 @@ const options = createResource({
     txt: text.value,
     doctype: props.doctype,
     filters: props.filters,
+    page_length: props.pageLength,
   },
   transform: (data) => {
     let allData = data.map((option) => {
       return {
-        label: option.value,
         value: option.value,
+        label: option?.label || option.value,
       };
     });
     // if (!props.hideMe && props.doctype == 'User') {
@@ -158,6 +163,7 @@ function reload(val) {
       txt: val,
       doctype: props.doctype,
       filters: props.filters,
+      page_length: props.pageLength,
     },
   });
   options.reload();
diff --git a/desk/src/components/knowledge-base-v2/KnowledgeBaseCategory.vue b/desk/src/components/knowledge-base-v2/KnowledgeBaseCategory.vue
deleted file mode 100644
index 9719db900..000000000
--- a/desk/src/components/knowledge-base-v2/KnowledgeBaseCategory.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-  <div
-    class="flex flex-col p-5 px-10 w-full overflow-hidden"
-    v-if="
-      !categoryTreeResource.isLoading &&
-      (!!category.subCategories.length || !!category.articles.length)
-    "
-  >
-    <!-- Top Section -->
-    <section class="flex flex-col gap-3.5 mb-5">
-      <h3 class="text-2xl font-semibold text-gray-800">
-        {{ category.categoryName || "Getting Started" }}
-      </h3>
-      <FormControl
-        type="text"
-        class="w-full"
-        placeholder="Search (title, subtitle, author)"
-        size="md"
-        v-model="categorySearch"
-        @input="searchArticles"
-      >
-        <template #prefix>
-          <Icon icon="lucide:search" class="h-4 w-4 text-gray-500" />
-        </template>
-      </FormControl>
-    </section>
-    <div class="overflow-scroll">
-      <!-- Sub categories Section -->
-      <section
-        class="flex flex-col gap-3 mb-8"
-        v-if="!!category.subCategories.length"
-      >
-        <h3 class="text-lg font-semibold text-gray-900">Sub-categories</h3>
-        <!-- sub category card container-->
-        <div class="flex gap-5 flex-wrap text-lg">
-          <!-- sub category card -->
-          <div
-            v-for="subCategory in category.subCategories"
-            class="border rounded px-3.5 py-3 cursor-pointer max-w-[190px] min-w-[190px] hover:border-gray-500"
-            @click="handleSubCategoryClick(subCategory)"
-          >
-            <h5 class="truncate text-lg">{{ subCategory?.category_name }}</h5>
-            <span class="text-sm text-gray-600">
-              {{ subCategory.articles.length }} articles
-            </span>
-          </div>
-        </div>
-      </section>
-      <!-- Article List View -->
-      <section class="flex flex-col gap-3" v-if="!!_articles.length">
-        <h4 class="text-lg font-semibold text-gray-900">
-          {{ showAllArticles ? "All Articles" : "Articles" }}
-        </h4>
-        <!-- Article Container -->
-        <div class="flex flex-col gap-x-2 divide-y max-w-full">
-          <!-- Article Card -->
-          <ArticleCard
-            v-for="article in _articles"
-            :article="article"
-            :author="category.authors[article.author]"
-            :key="article.name"
-            class="hover:bg-gray-200 transition-all hover:rounded"
-          />
-        </div>
-      </section>
-      <div
-        v-else
-        class="flex items center justify-center h-[300px] w-full text-gray-600"
-      >
-        No articles found
-      </div>
-    </div>
-  </div>
-  <div
-    v-else
-    class="flex items-center justify-center h-[300px] w-full text-gray-600"
-  >
-    No articles found
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, watch, ref, Reactive } from "vue";
-import { createResource, FormControl, createListResource } from "frappe-ui";
-import ArticleCard from "@/components/knowledge-base-v2/ArticleCard.vue";
-import { Article, Author, Category, SubCategory } from "@/types";
-import { Icon } from "@iconify/vue";
-import { useRouter } from "vue-router";
-import { useUserStore } from "@/stores/user";
-
-interface P {
-  categoryId?: string;
-  showAllArticles?: boolean;
-}
-const props = withDefaults(defineProps<P>(), {
-  categoryId: "",
-  showAllArticles: false,
-});
-
-const router = useRouter();
-const userStore = useUserStore();
-
-const category: Reactive<Category> = reactive({
-  categoryName: "",
-  subCategories: [],
-  articles: [],
-  authors: {},
-});
-
-const categorySearch = ref("");
-const _articles = ref([]);
-
-const categoryTreeResource = createResource({
-  url: "helpdesk.api.kbase.get_sub_categories_and_articles",
-  name: props.categoryId,
-  cache: ["category", props.categoryId],
-  params: {
-    category: props.categoryId,
-  },
-  auto: !props.showAllArticles,
-});
-
-const allArticles = createListResource({
-  doctype: "HD Article",
-  fields: [
-    "name",
-    "title",
-    "category",
-    "published_on",
-    "author",
-    "subtitle",
-    "article_image",
-    "_user_tags",
-  ],
-  filters: {
-    status: "Published",
-  },
-  pageLength: 100,
-  auto: props.showAllArticles,
-  onSuccess(articles: Article[]) {
-    category.articles = articles;
-    _articles.value = articles;
-    const authors = [...new Set(articles.map((article) => article.author))];
-    category.authors = authors.reduce((acc, author) => {
-      const authorInfo = userStore.getUser(author);
-      acc[author] = {
-        name: authorInfo.full_name ?? authorInfo.email,
-        image: authorInfo.user_image ?? "",
-      };
-      return acc;
-    }, {});
-  },
-});
-
-function searchArticles() {
-  const search = categorySearch.value.toLowerCase();
-  const articles = category.articles.filter(
-    (article) =>
-      article.title.toLowerCase().includes(search) ||
-      category.authors[article.author].name.toLowerCase().includes(search)
-  );
-  _articles.value = articles;
-}
-
-function handleSubCategoryClick(subCategory: SubCategory) {
-  categoryTreeResource.update({
-    params: {
-      category: subCategory.name,
-    },
-  });
-  categoryTreeResource.reload();
-  router.push({
-    query: {
-      category: categoryTreeResource.data.root_category.category_id,
-      subCategory: subCategory.name,
-    },
-  });
-}
-
-watch(
-  () => router.currentRoute.value.query,
-  () => {
-    const { category, subCategory } = router.currentRoute.value.query as {
-      category: string;
-      subCategory: string;
-    };
-    if (!subCategory && category !== "Explore all articles") {
-      categoryTreeResource.update({
-        params: {
-          category: category,
-        },
-      });
-      categoryTreeResource.reload();
-    }
-  }
-);
-
-watch(
-  async () => categoryTreeResource.data,
-  async () => {
-    const data = await categoryTreeResource.data;
-    category.categoryName = data["root_category"].category_name;
-    category.subCategories = data["sub_categories"];
-    category.articles = data["all_articles"];
-    category.authors = data["authors"];
-    _articles.value = category.articles;
-    return data;
-  }
-);
-
-watch(
-  () => props.categoryId,
-  () => {
-    categoryTreeResource.update({
-      params: {
-        category: props.categoryId,
-      },
-    });
-    categoryTreeResource.reload();
-  }
-);
-</script>
-
-<style scoped></style>
diff --git a/desk/src/components/knowledge-base-v2/KnowledgeBaseSidebar.vue b/desk/src/components/knowledge-base-v2/KnowledgeBaseSidebar.vue
deleted file mode 100644
index f65a7a3f9..000000000
--- a/desk/src/components/knowledge-base-v2/KnowledgeBaseSidebar.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div
-    class="h-full space-y-2 border-r px-3.5 py-2.5"
-    :style="{
-      'min-width': '242px',
-      'max-width': '242px',
-    }"
-  >
-    <div class="flex flex-col gap-1">
-      <div class="text-sm font-medium text-gray-600">Categories</div>
-      <div v-if="!categories.isLoading" class="flex flex-col gap-1">
-        <!-- all categories here -->
-        <SidebarLink
-          v-for="category in categories.data"
-          :key="category.label"
-          :icon="getIcon(category.icon, true)"
-          :is-active="activeCategory === category.name"
-          :is-expanded="true"
-          :label="category.category_name"
-          :bg-color="'bg-gray-100'"
-          :hv-color="'hover:bg-gray-300'"
-          @click="handleClick(category.name)"
-          class="truncate text-ellipsis"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import SidebarLink from "../SidebarLink.vue";
-import { createListResource } from "frappe-ui";
-import { getIcon } from "@/pages/knowledge-base/util";
-const emit = defineEmits(["category-change"]);
-
-const activeCategory = defineModel();
-
-const categories = createListResource({
-  doctype: "HD Article Category",
-  auto: true,
-  fields: ["name", "category_name", "icon", "parent_category"],
-  filters: {
-    parent_category: "",
-  },
-  transform: (data) => {
-    const firstCategory = {
-      name: "Explore all articles",
-      category_name: "Explore all articles",
-      icon: "search",
-    };
-    return [firstCategory, ...data];
-  },
-});
-
-function handleClick(name: string) {
-  if (activeCategory.value === name) return;
-  activeCategory.value = name;
-}
-</script>
-
-<style scoped></style>
diff --git a/desk/src/components/knowledge-base-v2/ArticleCard.vue b/desk/src/components/knowledge-base/ArticleCard.vue
similarity index 96%
rename from desk/src/components/knowledge-base-v2/ArticleCard.vue
rename to desk/src/components/knowledge-base/ArticleCard.vue
index ea7c97e39..51e2e5317 100644
--- a/desk/src/components/knowledge-base-v2/ArticleCard.vue
+++ b/desk/src/components/knowledge-base/ArticleCard.vue
@@ -7,7 +7,7 @@
     <div class="flex p-2 gap-3 flex-1 max-w-[50%]">
       <Avatar label="JD" shape="square" size="2xl" :image="articleImg" />
       <div class="flex flex-col gap-1.5 w-full">
-        <h5 class="text-lg font-semibold text-gray-800">
+        <h5 class="text-lg font-semibold text-gray-800 truncate max-w-[70%]">
           {{ article.title }}
         </h5>
         <div class="text-sm text-gray-600 truncate max-w-[70%]">
diff --git a/desk/src/components/knowledge-base/CategoryFolder.vue b/desk/src/components/knowledge-base/CategoryFolder.vue
new file mode 100644
index 000000000..0d4a5b077
--- /dev/null
+++ b/desk/src/components/knowledge-base/CategoryFolder.vue
@@ -0,0 +1,41 @@
+<template>
+  <router-link
+    class="flex flex-col gap-2 rounded-lg border p-3 w-[162px] sm:w-[172px] border-gray-200 cursor-pointer hover:shadow-xl"
+    :to="{
+      name: 'Articles',
+      params: {
+        categoryId: category.name,
+      },
+    }"
+  >
+    <Tooltip :text="category.category_name">
+      <div>
+        <FeatherIcon
+          name="folder"
+          class="fill-ink-blue-link h-8 w-8 text-blue-400"
+        />
+      </div>
+      <div class="gap-1 flex flex-col">
+        <p class="text-base font-medium text-gray-800 truncate">
+          {{ category.category_name }}
+        </p>
+        <span class="truncate text-sm text-gray-600">
+          {{ dayjs.tz(category.modified).fromNow() }}
+        </span>
+      </div>
+    </Tooltip>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { FeatherIcon, Tooltip } from "frappe-ui";
+import { dayjs } from "@/dayjs";
+const props = defineProps({
+  category: {
+    required: true,
+    type: Object,
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/knowledge-base/CategoryFolderContainer.vue b/desk/src/components/knowledge-base/CategoryFolderContainer.vue
new file mode 100644
index 000000000..8346d0d5a
--- /dev/null
+++ b/desk/src/components/knowledge-base/CategoryFolderContainer.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="flex gap-5 flex-wrap wrap" v-if="!categories.loading">
+    <CategoryFolder v-for="category in categories.data" :category="category" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import CategoryFolder from "./CategoryFolder.vue";
+import { createListResource } from "frappe-ui";
+
+const categories = createListResource({
+  doctype: "HD Article Category",
+  fields: ["name", "category_name", "modified"],
+  auto: true,
+});
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/knowledge-base/CategoryModal.vue b/desk/src/components/knowledge-base/CategoryModal.vue
new file mode 100644
index 000000000..b9088b4e6
--- /dev/null
+++ b/desk/src/components/knowledge-base/CategoryModal.vue
@@ -0,0 +1,87 @@
+<template>
+  <Dialog
+    v-model="showDialog"
+    :options="{ title: dialogTitle, actions: getActionButton() }"
+  >
+    <template #body-content>
+      <div class="flex flex-col flex-1 gap-3">
+        <textarea
+          class="text-base rounded py-1.5 px-2 border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full block"
+          ref="titleRef"
+          placeholder="Support Issues"
+          v-model="newTitle"
+          :rows="1"
+          maxlength="80"
+          autofocus
+          @input="(e: Event) => {
+            const target = e.target as HTMLTextAreaElement;
+            target.style.height = `${target.scrollHeight}px`;
+          }"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Dialog } from "frappe-ui";
+import { ref } from "vue";
+import { watch } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  edit: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update", "create"]);
+
+const showDialog = defineModel<boolean>();
+const newTitle = defineModel<string>("title");
+
+const dialogTitle = computed(() =>
+  props.edit ? "Edit Category" : "Create Category"
+);
+
+const titleRef = ref(null);
+watch(
+  () => titleRef.value,
+  (newVal) => {
+    if (!newVal) return;
+    titleRef.value.style.height =
+      newVal.scrollHeight > newVal.clientHeight
+        ? newVal.scrollHeight + "px"
+        : newVal.scrollHeight + "px";
+  }
+);
+
+function getActionButton() {
+  const action = [];
+  if (props.edit) {
+    action.push({
+      label: "Save",
+      variant: "solid",
+      onClick: () => {
+        emit("update");
+      },
+    });
+  } else {
+    action.push({
+      label: "Create",
+      variant: "solid",
+      onClick: () => {
+        emit("create");
+      },
+    });
+  }
+  return action;
+}
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/knowledge-base/MoveToCategoryModal.vue b/desk/src/components/knowledge-base/MoveToCategoryModal.vue
new file mode 100644
index 000000000..d0aa2b8b3
--- /dev/null
+++ b/desk/src/components/knowledge-base/MoveToCategoryModal.vue
@@ -0,0 +1,40 @@
+<template>
+  <Dialog v-model="showDialog" :options="{ title: 'Move To', actions }">
+    <template #body-content>
+      <div class="flex flex-col flex-1 gap-3">
+        <Link
+          class="form-control"
+          doctype="HD Article Category"
+          placeholder="Select Category"
+          v-model="category"
+          label="Category"
+          :page-length="100"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Dialog } from "frappe-ui";
+import { Link } from "@/components";
+
+const emit = defineEmits(["move"]);
+const showDialog = defineModel<boolean>();
+
+const category = ref("");
+
+const actions = [
+  {
+    label: "Move",
+    variant: "solid",
+    onClick: () => {
+      emit("move", category.value);
+      category.value = "";
+    },
+  },
+];
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/layouts/layoutSettings.ts b/desk/src/components/layouts/layoutSettings.ts
index fa831de67..ff927a243 100644
--- a/desk/src/components/layouts/layoutSettings.ts
+++ b/desk/src/components/layouts/layoutSettings.ts
@@ -11,6 +11,7 @@ import {
   AGENT_PORTAL_CUSTOMER_LIST,
   AGENT_PORTAL_TEAM_LIST,
   AGENT_PORTAL_TICKET_LIST,
+  AGENT_PORTAL_KNOWLEDGE_BASE,
 } from "@/router";
 
 export const agentPortalSidebarOptions = [
@@ -27,7 +28,7 @@ export const agentPortalSidebarOptions = [
   {
     label: "Knowledge base",
     icon: LucideBookOpen,
-    to: "DeskKBHome",
+    to: "AgentKnowledgeBase",
   },
   {
     label: "Teams",
@@ -60,6 +61,6 @@ export const customerPortalSidebarOptions = [
   {
     label: "Knowledge base",
     icon: LucideBookOpen,
-    to: "KnowledgeBasePublicNew",
+    to: "CustomerKnowledgeBase",
   },
 ];
diff --git a/desk/src/components/view-controls/index.ts b/desk/src/components/view-controls/index.ts
index 14149aed3..dba10617e 100644
--- a/desk/src/components/view-controls/index.ts
+++ b/desk/src/components/view-controls/index.ts
@@ -1,3 +1,4 @@
 export { default as Filter } from "./Filter.vue";
 export { default as SortBy } from "./SortBy.vue";
 export { default as QuickFilters } from "./QuickFilters.vue";
+export { default as Reload } from "./Reload.vue";
diff --git a/desk/src/composables/columns.ts b/desk/src/composables/columns.ts
deleted file mode 100644
index ff777033f..000000000
--- a/desk/src/composables/columns.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useRoute } from "vue-router";
-import { useStorage } from "@vueuse/core";
-
-/**
- * @param doctype - The DocType to use
- */
-export function useColumns(doctype: string) {
-  const route = useRoute();
-  const prefix = "hide_columns";
-  const storageKey = [prefix, route.path, doctype].join("_");
-  const storage = useStorage(storageKey, new Set());
-
-  /**
-   * @param key - The column key to toggle
-   * @returns void
-   * @description Toggles the column visibility
-   */
-  function toggle(key: string) {
-    if (!storage.value.delete(key)) {
-      storage.value.add(key);
-    }
-  }
-
-  return {
-    storage,
-    toggle,
-  };
-}
diff --git a/desk/src/pages/HRoot.vue b/desk/src/pages/HRoot.vue
index 925c7df85..1d0ff81a0 100644
--- a/desk/src/pages/HRoot.vue
+++ b/desk/src/pages/HRoot.vue
@@ -2,11 +2,7 @@
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { useConfigStore } from "@/stores/config";
-import {
-  AGENT_PORTAL_LANDING,
-  CUSTOMER_PORTAL_LANDING,
-  KB_PUBLIC,
-} from "@/router";
+import { AGENT_PORTAL_LANDING, CUSTOMER_PORTAL_LANDING } from "@/router";
 
 const router = useRouter();
 const authStore = useAuthStore();
diff --git a/desk/src/pages/KnowledgeBaseArticle.vue b/desk/src/pages/KnowledgeBaseArticle.vue
index 5b808bef4..2bf1bc12d 100644
--- a/desk/src/pages/KnowledgeBaseArticle.vue
+++ b/desk/src/pages/KnowledgeBaseArticle.vue
@@ -110,7 +110,7 @@ import {
   AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY,
   CUSTOMER_PORTAL_NEW_TICKET,
 } from "@/router";
-import { createToast } from "@/utils";
+import { createToast, textEditorMenuButtons } from "@/utils";
 import { useAuthStore } from "@/stores/auth";
 import { useError } from "@/composables/error";
 import { LayoutHeader } from "@/components";
@@ -353,7 +353,9 @@ const insertRes = createResource({
       },
     });
   },
-  onError: useError({ title: "Error creating article" }),
+  onError(err){
+    useError(err);,
+  }
 });
 
 const setValueRes = createResource({
@@ -411,44 +413,6 @@ const backTo = computed(() => ({
   },
 }));
 
-const textEditorMenuButtons = [
-  "Paragraph",
-  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-  "Separator",
-  "Bold",
-  "Italic",
-  "Separator",
-  "Bullet List",
-  "Numbered List",
-  "Separator",
-  "Align Left",
-  "Align Center",
-  "Align Right",
-  "FontColor",
-  "Separator",
-  "Image",
-  "Video",
-  "Link",
-  "Blockquote",
-  "Code",
-  "Horizontal Rule",
-  [
-    "InsertTable",
-    "AddColumnBefore",
-    "AddColumnAfter",
-    "DeleteColumn",
-    "AddRowBefore",
-    "AddRowAfter",
-    "DeleteRow",
-    "MergeCells",
-    "SplitCell",
-    "ToggleHeaderColumn",
-    "ToggleHeaderRow",
-    "ToggleHeaderCell",
-    "DeleteTable",
-  ],
-];
-
 const textEditorContentWithIDs = computed(() =>
   article.data?.content ? addLinksToHeadings(article.data?.content) : null
 );
diff --git a/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue b/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
deleted file mode 100644
index 9c02b4415..000000000
--- a/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <LayoutHeader>
-      <template #left-header>
-        <Breadcrumbs :items="breadcrumbs" />
-      </template>
-    </LayoutHeader>
-    <div class="flex grow overflow-hidden">
-      <KnowledgeBaseSidebar v-model="currentCategory" />
-      <KnowledgeBaseCategory
-        v-if="currentCategory !== 'Explore all articles'"
-        :category-id="currentCategory"
-      />
-      <KnowledgeBaseCategory v-else show-all-articles />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { LayoutHeader } from "@/components";
-import KnowledgeBaseSidebar from "@/components/knowledge-base-v2/KnowledgeBaseSidebar.vue";
-import KnowledgeBaseCategory from "@/components/knowledge-base-v2/KnowledgeBaseCategory.vue";
-import { useRouter } from "vue-router";
-import { Breadcrumbs } from "frappe-ui";
-
-const router = useRouter();
-const defaultCategory = computed(
-  () => router.currentRoute.value.query.category as string
-);
-
-const currentCategory = ref(defaultCategory.value || "Explore all articles");
-
-const breadcrumbs = computed(() => {
-  const { category, subCategory } = router.currentRoute.value.query as {
-    category: string;
-    subCategory: string;
-  };
-  let items = [
-    {
-      label: "Knowledge Base",
-      route: {
-        name: "KnowledgeBasePublicNew",
-        query: { category },
-      },
-    },
-  ];
-  // return items;
-  // TODO: Add category and subcategory name to breadcrumbs
-
-  // if (category) {
-  //   items.push({
-  //     label: category,
-  //     route: {
-  //       name: "KnowledgeBasePublicNew",
-  //       query: { category },
-  //     },
-  //   });
-  // }
-  // if (subCategory) {
-  //   items.push({
-  //     label: subCategory,
-  //     route: { name: "KnowledgeBasePublicNew", query: { subCategory } },
-  //   });
-  // }
-  return items;
-});
-
-watch(
-  () => currentCategory.value,
-  () => {
-    router.push({
-      query: {
-        category: currentCategory.value,
-      },
-    });
-  }
-);
-</script>
-
-<style scoped></style>
diff --git a/desk/src/pages/knowledge-base/Article.vue b/desk/src/pages/knowledge-base/Article.vue
new file mode 100644
index 000000000..6901dc14d
--- /dev/null
+++ b/desk/src/pages/knowledge-base/Article.vue
@@ -0,0 +1,370 @@
+<template>
+  <div>
+    <LayoutHeader>
+      <template #left-header>
+        <div class="flex gap-1 items-center">
+          <Breadcrumbs :items="breadcrumbs" />
+        </div>
+      </template>
+      <template #right-header>
+        <!-- Default Buttons -->
+        <div class="flex gap-2" v-if="!editable">
+          <Button
+            :label="article.data?.status === 'Draft' ? 'Publish' : 'Unpublish'"
+            :iconLeft="article.data?.status !== 'Published' && 'globe'"
+            @click="toggleStatus()"
+          />
+        </div>
+      </template>
+    </LayoutHeader>
+
+    <div
+      class="py-4 mx-auto w-full max-w-3xl px-5 flex"
+      :class="editable && 'overflow-hidden'"
+      v-if="!article.loading"
+    >
+      <!-- article Info -->
+      <div
+        class="flex flex-col gap-3 p-4 w-full"
+        :class="editable && 'border rounded-lg  '"
+      >
+        <!-- Top Element -->
+        <div class="flex flex-col gap-2">
+          <div class="flex gap-1 items-center justify-between">
+            <div class="flex gap-1 items-center">
+              <!-- Avatar -->
+              <div class="flex gap-1 items-center justify-center">
+                <Avatar
+                  :image="article.data.author.image"
+                  :label="article.data.author.name"
+                />
+                <span
+                  class="truncate capitalize text-base text-ink-gray-9 font-medium"
+                >
+                  {{ user.full_name || user.name }}
+                </span>
+              </div>
+              <IconDot class="h-4 w-4 text-gray-600" />
+              <div class="text-xs text-gray-500">
+                {{ dayjs(article.data.modified).short() }}
+              </div>
+            </div>
+            <Dropdown :options="options" v-if="!editable">
+              <Button variant="ghost">
+                <template #icon>
+                  <IconMoreHorizontal class="h-4 w-4" />
+                </template>
+              </Button>
+            </Dropdown>
+            <div class="flex gap-2" v-else>
+              <DiscardButton
+                :hide-dialog="!isDirty"
+                title="Discard changes?"
+                message="Are you sure you want to discard changes?"
+                @discard="handleDiscard"
+              />
+
+              <Button label="Save" @click="handleSave" variant="solid" />
+            </div>
+          </div>
+          <!-- Title -->
+          <textarea
+            ref="titleRef"
+            class="w-full resize-none border-0 text-3xl font-bold placeholder-ink-gray-3 p-0 pb-3 border-b border-gray-200 focus:ring-0 focus:border-gray-200"
+            v-model="title"
+            placeholder="Title"
+            rows="1"
+            wrap="soft"
+            maxlength="140"
+            autofocus
+            :disabled="!editable"
+          />
+        </div>
+        <!-- Article Content -->
+        <TextEditor
+          ref="editorRef"
+          :editor-class="editorClass"
+          :content="content"
+          :editable="editable"
+          @change="(event:string) => {
+			      content = event;
+		      }"
+          placeholder="Write your article here..."
+        >
+          <template #bottom v-if="editable">
+            <TextEditorFixedMenu
+              class="-ml-1 overflow-x-auto w-full"
+              :buttons="textEditorMenuButtons"
+            />
+          </template>
+        </TextEditor>
+      </div>
+    </div>
+    <MoveToCategoryModal v-model="moveToModal" @move="handleMoveToCategory" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, h, watch } from "vue";
+import {
+  Breadcrumbs,
+  debounce,
+  createResource,
+  Avatar,
+  TextEditor,
+  TextEditorFixedMenu,
+  Dropdown,
+  Button,
+  confirmDialog,
+} from "frappe-ui";
+import { useRouter, useRoute } from "vue-router";
+import { dayjs } from "@/dayjs";
+import {
+  updateRes as updateArticle,
+  deleteRes as deleteArticle,
+  moveToCategory,
+} from "@/stores/knowledgeBase";
+import { useUserStore } from "@/stores/user";
+import LayoutHeader from "@/components/LayoutHeader.vue";
+import MoveToCategoryModal from "@/components/knowledge-base/MoveToCategoryModal.vue";
+import DiscardButton from "@/components/DiscardButton.vue";
+import { Resource, Article } from "@/types";
+import IconDot from "~icons/lucide/dot";
+import { createToast, textEditorMenuButtons } from "@/utils";
+import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+
+const props = defineProps({
+  articleId: {
+    type: String,
+    required: true,
+  },
+});
+
+const userStore = useUserStore();
+const user = userStore.getUser();
+
+const router = useRouter();
+const route = useRoute();
+
+const editorRef = ref(null);
+const editable = ref(route.query.isEdit ?? false);
+
+const content = ref("");
+const title = ref("");
+
+const titleRef = ref(null);
+watch(
+  () => titleRef.value,
+  (newVal) => {
+    if (!newVal) return;
+    titleRef.value.style.height =
+      newVal.scrollHeight > newVal.clientHeight
+        ? newVal.scrollHeight + "px"
+        : newVal.scrollHeight + "px";
+  }
+);
+
+const article: Resource<Article> = createResource({
+  url: "helpdesk.api.knowledge_base.get_article",
+  params: {
+    name: props.articleId,
+  },
+  auto: true,
+  onSuccess: (data: Article) => {
+    content.value = data.content;
+    title.value = data.title;
+  },
+});
+
+const toggleStatus = debounce(() => {
+  const status = article.data?.status === "Published" ? "Draft" : "Published";
+  updateArticle.submit(
+    {
+      doctype: "HD Article",
+      name: article.data.name,
+      fieldname: "status",
+      value: status,
+    },
+    {
+      onSuccess: () => {
+        article.reload();
+      },
+    }
+  );
+}, 300);
+const isDirty = ref(false);
+
+const moveToModal = ref(false);
+
+function handleMoveToCategory(category: string) {
+  moveToCategory.submit(
+    {
+      category,
+      articles: [props.articleId],
+    },
+    {
+      onSuccess: () => {
+        article.reload();
+        moveToModal.value = false;
+        createToast({
+          title: "Articles moved successfully",
+          icon: "check",
+          iconClasses: "text-green-600",
+        });
+      },
+      onError: (error: string) => {
+        createToast({
+          title: error,
+          icon: "x",
+          iconClasses: "text-red-600",
+        });
+      },
+    }
+  );
+}
+
+function handleEditMode() {
+  editable.value = true;
+  editorRef.value.editor.chain().focus("start");
+}
+
+function handleDiscard() {
+  editable.value = false;
+  isDirty.value = false;
+  title.value = article.data.title;
+  content.value = article.data.content;
+}
+
+function handleSave() {
+  editable.value = false;
+  handleArticleUpdate();
+}
+
+function handleArticleUpdate() {
+  if (!isDirty.value) return;
+  updateArticle.submit(
+    {
+      doctype: "HD Article",
+      name: article.data.name,
+      fieldname: {
+        content: content.value,
+        title: title.value,
+      },
+    },
+    {
+      onSuccess: () => {
+        createToast({
+          title: "Article updated successfully",
+          icon: "check",
+          iconClasses: "text-green-600",
+        });
+        isDirty.value = false;
+        article.reload();
+      },
+    }
+  );
+}
+
+function handleDelete() {
+  confirmDialog({
+    title: "Delete Article",
+    message: "Are you sure you want to delete this article?",
+    onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+      deleteArticle.submit(
+        {
+          doctype: "HD Article",
+          name: article.data.name,
+        },
+        {
+          onSuccess: () => {
+            createToast({
+              title: "Article deleted successfully",
+              icon: "check",
+              iconClasses: "text-green-600",
+            });
+            router.push({
+              name: "AgentKnowledgeBase",
+            });
+          },
+        }
+      );
+      hideDialog();
+    },
+  });
+}
+
+watch([() => content.value, () => title.value], ([newContent, newTitle]) => {
+  isDirty.value =
+    newContent !== article.data.content || newTitle !== article.data.title;
+});
+
+const editorClass = computed(() => {
+  let basicStyles =
+    "rounded-b-lg max-w-[unset] prose-sm h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)]";
+  if (editable.value) {
+    basicStyles += " overflow-auto";
+  }
+  return basicStyles;
+});
+
+const options = computed(() => [
+  {
+    label: "Edit",
+    icon: "edit",
+    onClick: () => {
+      handleEditMode();
+    },
+  },
+  {
+    label: "Move To",
+    icon: "corner-up-right",
+    onClick: () => (moveToModal.value = true),
+  },
+  // {
+  //   label: article.data?.status === "Draft" ? "Publish" : "Unpublish",
+  //   icon: article.data?.status !== "Published" ? "globe" : "x",
+  //   onClick: toggleStatus,
+  // },
+  {
+    group: "Danger",
+    hideLabel: true,
+    items: [
+      {
+        label: "Delete",
+        component: h(Button, {
+          label: "Delete",
+          variant: "ghost",
+          iconLeft: "trash-2",
+          theme: "red",
+          style: "width: 100%; justify-content: flex-start;",
+          onClick: handleDelete,
+        }),
+      },
+    ],
+  },
+]);
+
+const breadcrumbs = computed(() => {
+  const items = [
+    {
+      label: "Knowledge Base",
+      route: { name: "AgentKnowledgeBase" },
+    },
+  ];
+  if (article.data?.category_name) {
+    items.push({
+      label: article.data?.category_name,
+      route: { name: "AgentKnowledgeBase" },
+    });
+  }
+  if (article.data?.title) {
+    items.push({
+      label: article.data?.title,
+      route: { name: "Article" },
+    });
+  }
+  return items;
+});
+</script>
+
+<style scoped></style>
diff --git a/desk/src/pages/knowledge-base/Articles.vue b/desk/src/pages/knowledge-base/Articles.vue
new file mode 100644
index 000000000..97c3c4f2b
--- /dev/null
+++ b/desk/src/pages/knowledge-base/Articles.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="p-5 px-10 w-full overflow-scroll items-center">
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Knowledge base</div>
+      </template>
+    </LayoutHeader>
+    <div class="max-w-4xl pt-4 sm:px-5 w-full flex flex-col gap-2">
+      {{ categoryId }}
+    </div>
+    <div v-if="articles.data" class="text-wrap flex-1">
+      {{ articles.data }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createListResource } from "frappe-ui";
+import LayoutHeader from "@/components/LayoutHeader.vue";
+const props = defineProps({
+  categoryId: {
+    required: true,
+    type: String,
+  },
+});
+
+const articles = createListResource({
+  doctype: "HD Article",
+  fields: ["author", "title", "modified"],
+  filters: {
+    category: props.categoryId,
+    status: "Published",
+  },
+  auto: true,
+});
+</script>
+
+<style scoped></style>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBase.vue b/desk/src/pages/knowledge-base/KnowledgeBase.vue
deleted file mode 100644
index 1030e6492..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBase.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <LayoutHeader>
-      <template #left-header>
-        <div class="text-lg font-medium text-gray-900">Knowledge base</div>
-      </template>
-    </LayoutHeader>
-    <div class="flex grow">
-      <KnowledgeBaseSidebar />
-      <RouterView :key="$route.fullPath" v-slot="{ Component }">
-        <component :is="Component" v-if="Component" />
-        <EmptyMessage v-else message="Select a category" />
-      </RouterView>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { usePageMeta } from "frappe-ui";
-import EmptyMessage from "@/components/EmptyMessage.vue";
-import KnowledgeBaseSidebar from "./KnowledgeBaseSidebar.vue";
-import LayoutHeader from "@/components/LayoutHeader.vue";
-
-usePageMeta(() => {
-  return {
-    title: "Knowledge base",
-  };
-});
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseAgent.vue b/desk/src/pages/knowledge-base/KnowledgeBaseAgent.vue
new file mode 100644
index 000000000..5a98fef0e
--- /dev/null
+++ b/desk/src/pages/knowledge-base/KnowledgeBaseAgent.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="flex flex-col">
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Knowledge base</div>
+      </template>
+      <template #right-header>
+        <Dropdown :options="headerOptions">
+          <Button label="Add new" variant="solid">
+            <template #prefix>
+              <LucidePlus class="h-4 w-4" />
+            </template>
+          </Button>
+        </Dropdown>
+      </template>
+    </LayoutHeader>
+    <ListViewBuilder
+      ref="listViewRef"
+      :options="options"
+      @row-click="(row) => $router.push(`kb/articles/${row}`)"
+    />
+    <CategoryModal
+      :edit="editTitle"
+      v-model="showCategoryModal"
+      v-model:title="category.title"
+      @update="handleCategoryUpdate"
+      @create="handleCategoryCreate"
+    />
+    <MoveToCategoryModal v-model="moveToModal" @move="handleMoveToCategory" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, ref, reactive, computed } from "vue";
+import {
+  usePageMeta,
+  FeatherIcon,
+  Button,
+  confirmDialog,
+  Dropdown,
+} from "frappe-ui";
+import { useRouter } from "vue-router";
+import {
+  updateCategoryTitle,
+  deleteCategory,
+  newCategory,
+  moveToCategory,
+  deleteArticles,
+} from "@/stores/knowledgeBase";
+import LayoutHeader from "@/components/LayoutHeader.vue";
+import ListViewBuilder from "@/components/ListViewBuilder.vue";
+import CategoryModal from "@/components/knowledge-base/CategoryModal.vue";
+import MoveToCategoryModal from "@/components/knowledge-base/MoveToCategoryModal.vue";
+import { createToast } from "@/utils";
+
+const router = useRouter();
+
+const category = reactive({
+  title: "",
+  id: "",
+});
+const _title = ref("");
+const listViewRef = ref(null);
+const editTitle = ref(false);
+
+// modals state
+const showCategoryModal = ref(false);
+const moveToModal = ref(false);
+
+const headerOptions = [
+  {
+    label: "Category",
+    icon: "folder",
+    onClick: () => {
+      resetState();
+      editTitle.value = false;
+      showCategoryModal.value = true;
+    },
+  },
+  {
+    label: "Article",
+    icon: "file",
+    onClick: () => {
+      router.push({ name: "NewArticle" });
+    },
+  },
+];
+
+const groupByActions = [
+  {
+    label: "Add New Article",
+    icon: "plus",
+    onClick: (groupedRow) => {
+      router.push({
+        name: "NewArticle",
+        query: {
+          category: groupedRow.group.value,
+          title: groupedRow.group.label,
+        },
+      });
+    },
+  },
+  {
+    label: "Edit Title",
+    icon: "edit",
+    onClick: (groupedRow) => {
+      editTitle.value = true;
+      showCategoryModal.value = true;
+      category.title = groupedRow.group.label;
+      category.id = groupedRow.group.value;
+      _title.value = groupedRow.group.label;
+    },
+  },
+  {
+    label: "Delete",
+    icon: "trash-2",
+    onClick: (groupedRow) => {
+      handleCategoryDelete(groupedRow);
+    },
+  },
+];
+const listSelections = ref(new Set());
+const showSelectBanner = ref(true);
+const selectBannerActions = [
+  {
+    label: "Move To",
+    icon: "corner-up-right",
+    onClick: (selections: Set<string>) => {
+      listSelections.value = selections;
+      moveToModal.value = true;
+    },
+  },
+  {
+    label: "Delete",
+    icon: "trash-2",
+    onClick: (selections: Set<string>) => {
+      listSelections.value = selections;
+      confirmDialog({
+        title: "Delete articles?",
+        message: `Are you sure you want to delete these articles?`,
+        onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+          handleDeleteArticles();
+          hideDialog();
+        },
+      });
+    },
+  },
+];
+
+function handleMoveToCategory(category: string) {
+  moveToCategory.submit(
+    {
+      category,
+      articles: Array.from(listSelections.value),
+    },
+    {
+      onSuccess: () => {
+        listViewRef.value.reload();
+        moveToModal.value = false;
+        listSelections.value.clear();
+        createToast({
+          title: "Articles moved successfully",
+          icon: "check",
+          iconClasses: "text-green-600",
+        });
+      },
+      onError: (error: string) => {
+        createToast({
+          title: error,
+          icon: "x",
+          iconClasses: "text-red-600",
+        });
+      },
+    }
+  );
+}
+
+function handleCategoryCreate() {
+  newCategory.submit(
+    {
+      title: category.title,
+    },
+    {
+      onSuccess: (data: any) => {
+        listViewRef.value.reload();
+        showCategoryModal.value = false;
+        router.push({
+          name: "Article",
+          params: {
+            articleId: data.article,
+          },
+          query: {
+            category: data.category,
+            title: category.title,
+            isEdit: 1,
+          },
+        });
+        createToast({
+          title: "Category Created Successfully",
+          icon: "check",
+          iconClasses: "text-green-600",
+        });
+        resetState();
+      },
+      onError: (error: string) => {
+        createToast({
+          title: error,
+          icon: "x",
+          iconClasses: "text-red-600",
+        });
+      },
+    }
+  );
+}
+
+function handleCategoryUpdate() {
+  // if same title do nothing
+  if (category.title === _title.value) {
+    showCategoryModal.value = false;
+    editTitle.value = false;
+    return;
+  }
+  updateCategoryTitle.submit(
+    {
+      doctype: "HD Article Category",
+      name: category.id,
+      fieldname: "category_name",
+      value: category.title,
+    },
+    {
+      onSuccess: () => {
+        listViewRef.value.reload();
+        showCategoryModal.value = false;
+        editTitle.value = false;
+        createToast({
+          title: "Category Updated Successfully",
+          icon: "check",
+          iconClasses: "text-green-600",
+        });
+
+        resetState();
+      },
+      onError: (error: string) => {
+        createToast({
+          title: error,
+          icon: "x",
+          iconClasses: "text-red-600",
+        });
+      },
+    }
+  );
+}
+
+function handleCategoryDelete(groupedRow) {
+  confirmDialog({
+    title: "Delete category?",
+    message: `All articles from this category will be uncatagorized.`,
+    onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+      deleteCategory.submit(
+        {
+          name: groupedRow.group.value,
+        },
+        {
+          onSuccess: () => {
+            createToast({
+              title: "Article deleted successfully",
+              icon: "check",
+              iconClasses: "text-green-600",
+            });
+            listViewRef.value.reload();
+          },
+        }
+      );
+      hideDialog();
+    },
+  });
+}
+
+function handleDeleteArticles() {
+  deleteArticles.submit(
+    {
+      articles: Array.from(listSelections.value),
+    },
+    {
+      onSuccess: () => {
+        listViewRef.value.reload();
+        listSelections.value.clear();
+        createToast({
+          title: "Articles deleted successfully",
+          icon: "check",
+          iconClasses: "text-green-600",
+        });
+      },
+    }
+  );
+}
+
+function resetState() {
+  category.title = "";
+  category.id = "";
+  _title.value = "";
+}
+
+const options = computed(() => {
+  return {
+    doctype: "HD Article",
+    view: {
+      view_type: "group_by",
+      group_by_field: "category",
+    },
+    statusMap: {
+      Published: {
+        label: "Published",
+        theme: "green",
+      },
+      Draft: {
+        label: "Draft",
+        theme: "orange",
+      },
+      Archived: {
+        label: "Archived",
+        theme: "gray",
+      },
+    },
+    columnConfig: {
+      title: {
+        prefix: () => {
+          return h(FeatherIcon, {
+            name: "file-text",
+            class: "w-4 h-4 ",
+          });
+        },
+      },
+    },
+    groupByActions,
+    showSelectBanner: showSelectBanner.value,
+    selectBannerActions,
+  };
+});
+
+usePageMeta(() => {
+  return {
+    title: "Knowledge base",
+  };
+});
+</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsEdit.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsEdit.vue
deleted file mode 100644
index f2715403d..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsEdit.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="flex gap-2">
-    <Button v-bind="secondary">
-      <template #prefix>
-        <IconReset class="h-4 w-4" />
-      </template>
-    </Button>
-    <Button v-bind="primary">
-      <template #prefix>
-        <IconSave class="h-4 w-4" />
-      </template>
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import IconSave from "~icons/lucide/save";
-import IconReset from "~icons/lucide/rotate-ccw";
-
-const emit = defineEmits<{
-  (event: "save"): void;
-  (event: "cancel"): void;
-}>();
-
-const primary = {
-  label: "Save",
-  theme: "gray",
-  variant: "solid",
-  onClick: () => emit("save"),
-};
-
-const secondary = {
-  label: "Cancel",
-  theme: "gray",
-  variant: "subtle",
-  onClick: () => emit("cancel"),
-};
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsNew.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsNew.vue
deleted file mode 100644
index bca4b3dbe..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsNew.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="flex gap-2">
-    <Button v-bind="secondary">
-      <template #prefix>
-        <Icon icon="lucide:x" class="h-4 w-4" />
-      </template>
-    </Button>
-    <Button v-bind="primary">
-      <template #prefix>
-        <Icon icon="lucide:check" class="h-4 w-4" />
-      </template>
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Icon } from "@iconify/vue";
-
-const emit = defineEmits<{
-  (event: "create"): void;
-  (event: "discard"): void;
-}>();
-
-const primary = {
-  label: "Create",
-  theme: "gray",
-  variant: "solid",
-  onClick: () => emit("create"),
-};
-
-const secondary = {
-  label: "Discard",
-  theme: "gray",
-  variant: "subtle",
-  onClick: () => emit("discard"),
-};
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsView.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsView.vue
deleted file mode 100644
index 7d8f8b78c..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseArticleActionsView.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div class="flex gap-2">
-    <Button v-bind="primary" />
-    <Dropdown :options="dropdownOptions">
-      <Button theme="gray" variant="ghost">
-        <template #icon>
-          <IconMoreHorizontal class="h-4 w-4" />
-        </template>
-      </Button>
-    </Dropdown>
-    <Dialog v-model="showDeleteDialog" :options="deleteDialogOptions" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, toRef } from "vue";
-import { Dialog, Dropdown } from "frappe-ui";
-import IconEdit from "~icons/lucide/edit-3";
-import IconMoreHorizontal from "~icons/lucide/more-horizontal";
-import IconTrash from "~icons/lucide/trash-2";
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: false,
-    default: "Draft",
-  },
-});
-
-const emit = defineEmits<{
-  (event: "delete"): void;
-  (event: "toggleEditMode"): void;
-  (event: "toggleStatus"): void;
-}>();
-
-const status = toRef(props, "status");
-const showDeleteDialog = ref(false);
-const primary = computed(() => ({
-  label: status.value === "Published" ? "Unpublish" : "Publish",
-  theme: "gray",
-  variant: "solid",
-  onClick: () => emit("toggleStatus"),
-}));
-const dropdownOptions = [
-  {
-    label: "Edit",
-    icon: IconEdit,
-    onClick: () => emit("toggleEditMode"),
-  },
-  {
-    label: "Delete",
-    icon: IconTrash,
-    onClick: () => (showDeleteDialog.value = !showDeleteDialog.value),
-  },
-];
-const deleteDialogOptions = {
-  title: "Delete",
-  message: "Are you sure you want to delete? This action can not be reversed",
-  icon: {
-    name: "alert-triangle",
-    appearance: "warning",
-  },
-  actions: [
-    {
-      label: "Confirm",
-      theme: "red",
-      variant: "solid",
-      onClick: () => emit("delete"),
-    },
-  ],
-};
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopEdit.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopEdit.vue
deleted file mode 100644
index 50baa61d5..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopEdit.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="mb-4.5 flex items-center justify-between">
-    <div class="flex items-center gap-2">
-      <Avatar :label="authorFullname" :image="authorImage" />
-      <div class="text-base text-gray-800">
-        {{ authorFullname }}
-      </div>
-    </div>
-    <div class="flex items-center gap-2 text-sm text-gray-600">
-      <div class="text-gray-600">Created</div>
-      <div class="text-gray-800">
-        {{ dayjs.tz(creation).fromNow() }}
-      </div>
-      <div class="text-base text-gray-300">|</div>
-      <div class="text-gray-600">Modified</div>
-      <div class="text-gray-800">
-        {{ dayjs.tz(modified).fromNow() }}
-      </div>
-    </div>
-  </div>
-  <div class="border-b pb-3">
-    <FormControl
-      :value="title"
-      type="text"
-      @change="emit('update:title', $event.target.value)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Avatar, FormControl } from "frappe-ui";
-import { dayjs } from "@/dayjs";
-
-interface P {
-  categoryName: string;
-  subCategoryName: string;
-  title: string;
-  authorFullname: string;
-  authorImage: string;
-  creation: string;
-  modified: string;
-  likes?: number;
-  dislikes?: number;
-}
-
-interface E {
-  (event: "update:title", title: string): void;
-}
-
-defineProps<P>();
-const emit = defineEmits<E>();
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopNew.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopNew.vue
deleted file mode 100644
index 7f81167af..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopNew.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="mb-4.5 flex items-center justify-between">
-    <div class="flex items-center gap-2">
-      <Avatar :label="authorFullname" :image="authorImage" />
-      <div class="text-base text-gray-800">
-        {{ authorFullname }}
-      </div>
-    </div>
-  </div>
-  <div class="border-b pb-3">
-    <FormControl
-      type="text"
-      placeholder="Title"
-      @change="emit('update:title', $event.target.value)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Avatar, FormControl } from "frappe-ui";
-
-interface P {
-  title: string;
-  authorFullname: string;
-  authorImage: string;
-}
-
-interface E {
-  (event: "update:title", title: string): void;
-}
-
-defineProps<P>();
-const emit = defineEmits<E>();
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopPublic.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopPublic.vue
deleted file mode 100644
index 4f6adc018..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopPublic.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="mb-8 flex items-center gap-1.5">
-    <RouterLink :to="{ name: KB_PUBLIC }">
-      <Icon icon="lucide:home" class="h-4 w-4 text-gray-800" />
-    </RouterLink>
-    <Icon icon="lucide:chevron-right" class="h-4 w-4 text-gray-600" />
-    <div
-      class="cursor-pointer text-base font-medium text-gray-800"
-      @click="toSubCategory"
-    >
-      {{ subCategoryName }}
-    </div>
-  </div>
-  <div class="border-b pb-3">
-    <div class="text-2xl font-semibold text-gray-900">
-      {{ title }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { KB_PUBLIC, KB_PUBLIC_CATEGORY } from "@/router";
-import { Icon } from "@iconify/vue";
-import { toRefs } from "vue";
-
-const props = defineProps({
-  subCategoryName: {
-    type: String,
-    required: true,
-  },
-  subCategoryId: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-});
-
-const router = useRouter();
-const { subCategoryId } = toRefs(props);
-
-function toSubCategory() {
-  router.push({
-    name: KB_PUBLIC_CATEGORY,
-    params: {
-      categoryId: subCategoryId.value,
-    },
-  });
-}
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopView.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopView.vue
deleted file mode 100644
index 3e32847b8..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopView.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="mb-7 flex items-center justify-between">
-    <div class="flex items-center gap-1">
-      <div class="flex items-center gap-2">
-        <Avatar :label="authorFullname" :image="authorImage" />
-        <div class="text-base text-gray-800">
-          {{ authorFullname }}
-        </div>
-      </div>
-      <IconDot class="h-4 w-4 text-gray-600" />
-      <div class="text-xs text-gray-500">
-        {{ dayjs(creation).short() }}
-      </div>
-      <div v-if="!isCustomerPortal" class="flex items-center justify-center">
-        <IconDot class="h-4 w-4 text-gray-600" />
-        <Badge
-          :theme="status === 'Published' ? 'green' : 'orange'"
-          variant="subtle"
-        >
-          {{ status }}
-        </Badge>
-      </div>
-    </div>
-  </div>
-  <div class="border-b pb-3">
-    <div class="text-2xl font-semibold text-gray-900">
-      {{ title }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Avatar } from "frappe-ui";
-import { dayjs } from "@/dayjs";
-import IconDot from "~icons/lucide/dot";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-const isCustomerPortal: boolean = route.meta.public ?? false;
-
-const props = defineProps({
-  categoryName: {
-    type: String,
-    required: true,
-  },
-  categoryId: {
-    type: String,
-    required: true,
-  },
-  subCategoryName: {
-    type: String,
-    required: true,
-  },
-  subCategoryId: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  status: {
-    type: String,
-    required: true,
-  },
-  authorFullname: {
-    type: String,
-    required: true,
-  },
-  authorImage: {
-    type: String,
-    required: true,
-  },
-  creation: {
-    type: String,
-    required: true,
-  },
-  modified: {
-    type: String,
-    required: true,
-  },
-});
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue
deleted file mode 100644
index 025a2140c..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-  <div class="flex grow flex-col">
-    <KnowledgeBaseCategoryHeader
-      :title="category.doc?.category_name"
-      :description="category.doc?.description"
-    >
-      <template #right>
-        <div class="space-x-2">
-          <Button
-            label="Edit"
-            theme="gray"
-            variant="outline"
-            @click="showEdit = !showEdit"
-          >
-            <template #prefix>
-              <IconEdit class="h-4 w-4" />
-            </template>
-          </Button>
-          <Button
-            label="Add new"
-            theme="gray"
-            variant="solid"
-            @click="showNewSubCategory = !showNewSubCategory"
-          >
-            <template #prefix>
-              <IconPlus class="h-4 w-4" />
-            </template>
-          </Button>
-        </div>
-      </template>
-    </KnowledgeBaseCategoryHeader>
-    <EmptyMessage
-      v-if="isEmpty(subCategories.data)"
-      message="This category is empty"
-    />
-    <div v-else class="gap-4.5 grid grid-cols-3 px-5">
-      <HCard
-        v-for="c in subCategories.data"
-        :key="c.name"
-        :description="c.description"
-        :title="c.category_name"
-        class="w-full place-self-center"
-        @click="toSubcategory(c.name)"
-      >
-        <template #bottom>
-          <div class="text-base text-gray-600">
-            {{ c.article_count + " articles" }}
-          </div>
-        </template>
-      </HCard>
-    </div>
-    <Dialog v-model="showEdit" :options="{ title: 'Edit' }">
-      <template #body-content>
-        <div class="space-y-4">
-          <div class="space-y-2">
-            <div class="text-xs text-gray-700">Title</div>
-            <div class="flex items-center gap-2">
-              <KnowledgeBaseIconSelector
-                :icon="newCategoryIcon || category.doc?.icon"
-                @select="(icon) => (newCategoryIcon = icon)"
-              />
-              <FormControl
-                v-model="category.doc.category_name"
-                placeholder="A brief guide"
-                type="text"
-              />
-            </div>
-          </div>
-          <div class="space-y-2">
-            <div class="text-xs text-gray-700">Description</div>
-            <FormControl
-              v-model="category.doc.description"
-              placeholder="A short description"
-              type="textarea"
-            />
-          </div>
-          <Button
-            class="w-full"
-            label="Save"
-            theme="gray"
-            variant="solid"
-            @click="saveCategory"
-          />
-        </div>
-      </template>
-    </Dialog>
-    <Dialog
-      v-model="showNewSubCategory"
-      :options="{ title: 'New Sub category' }"
-    >
-      <template #body-content>
-        <form @submit.prevent="newSubCategory.submit">
-          <div class="space-y-4">
-            <FormControl
-              v-model="newSubCategoryName"
-              type="text"
-              label="Name"
-              placeholder="Name"
-            />
-            <FormControl
-              v-model="newSubCategoryDescription"
-              type="textarea"
-              label="Description"
-              placeholder="Description"
-            />
-            <Button
-              :disabled="isEmpty(newSubCategoryName)"
-              class="w-full"
-              label="Create"
-              theme="gray"
-              variant="solid"
-            />
-          </div>
-        </form>
-      </template>
-    </Dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, toRef } from "vue";
-import { useRouter } from "vue-router";
-import {
-  createResource,
-  createDocumentResource,
-  debounce,
-  Button as Button,
-  Dialog,
-  FormControl,
-} from "frappe-ui";
-import { isEmpty } from "lodash";
-import { AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY } from "@/router";
-import { createToast } from "@/utils";
-import { useError } from "@/composables/error";
-import { HCard } from "@/components";
-import KnowledgeBaseCategoryHeader from "./KnowledgeBaseCategoryHeader.vue";
-import KnowledgeBaseIconSelector from "./KnowledgeBaseIconSelector.vue";
-import EmptyMessage from "@/components/EmptyMessage.vue";
-import IconEdit from "~icons/lucide/edit-3";
-import IconPlus from "~icons/lucide/plus";
-
-const props = defineProps({
-  categoryId: {
-    type: String,
-    required: true,
-  },
-});
-
-const router = useRouter();
-const categoryId = toRef(props, "categoryId");
-const newSubCategoryName = ref("");
-const newSubCategoryDescription = ref("");
-const showNewSubCategory = ref(false);
-const newCategoryName = ref("");
-const newCategoryDescription = ref("");
-const newCategoryIcon = ref("");
-const showEdit = ref(false);
-
-const category = createDocumentResource({
-  doctype: "HD Article Category",
-  name: categoryId.value,
-  auto: true,
-  setValue: {
-    onSuccess() {
-      createToast({
-        title: "Category updated",
-        icon: "check",
-        iconClasses: "text-green-500",
-      });
-    },
-    onError: useError({ title: "Error updating category" }),
-  },
-});
-
-const saveCategory = debounce(
-  () =>
-    category.setValue.submit({
-      category_name: newCategoryName.value || category.doc.category_name,
-      description: newCategoryDescription.value || category.doc.description,
-      icon: newCategoryIcon.value || category.doc.icon,
-    }),
-  500
-);
-
-const newSubCategory = createResource({
-  url: "frappe.client.insert",
-  debounce: 500,
-  makeParams() {
-    return {
-      doc: {
-        doctype: "HD Article Category",
-        category_name: newSubCategoryName.value,
-        description: newSubCategoryDescription.value,
-        parent_category: category.doc?.name,
-      },
-    };
-  },
-  validate(params) {
-    if (isEmpty(params.doc.category_name)) {
-      return "Category name is required";
-    }
-  },
-  onSuccess() {
-    showNewSubCategory.value = false;
-    subCategories.reload();
-  },
-  onError: useError({ title: "Error creating sub category" }),
-});
-
-const subCategories = createResource({
-  url: "helpdesk.helpdesk.doctype.hd_article_category.api.get_subcategories",
-  params: {
-    parent_category: categoryId.value,
-  },
-  auto: true,
-});
-
-function toSubcategory(subCategoryId: string) {
-  router.push({
-    name: AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY,
-    params: {
-      subCategoryId,
-    },
-  });
-}
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseCategoryHeader.vue b/desk/src/pages/knowledge-base/KnowledgeBaseCategoryHeader.vue
deleted file mode 100644
index 870892f78..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseCategoryHeader.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="space-y-1 px-5 pt-3.5 pb-6">
-    <div class="flex items-center justify-between">
-      <div class="text-xl font-medium text-gray-900">
-        {{ title }}
-      </div>
-      <slot name="right" />
-    </div>
-    <div
-      class="text-base text-gray-700"
-      :style="{
-        width: '770px',
-      }"
-    >
-      {{ description }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface P {
-  title: string;
-  description: string;
-}
-
-defineProps<P>();
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseCategoryNew.vue b/desk/src/pages/knowledge-base/KnowledgeBaseCategoryNew.vue
deleted file mode 100644
index 8ca8bcb67..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseCategoryNew.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <Dialog v-bind="attrs" :options="{ title: 'New category' }">
-    <template #body-content>
-      <form @submit.prevent="newCategoryRes.submit">
-        <div class="space-y-4">
-          <div class="space-y-2">
-            <div class="text-xs text-gray-700">Title</div>
-            <div class="flex items-center gap-2">
-              <KnowledgeBaseIconSelector
-                :icon="newCategoryIcon"
-                @select="(icon) => (newCategoryIcon = icon)"
-              />
-              <FormControl
-                v-model="newCategoryName"
-                placeholder="A brief guide"
-                type="text"
-              />
-            </div>
-          </div>
-          <div class="space-y-2">
-            <div class="text-xs text-gray-700">Description</div>
-            <FormControl
-              v-model="newCategoryDescription"
-              placeholder="A short description"
-              type="textarea"
-            />
-          </div>
-          <Button class="w-full" label="Create" theme="gray" variant="solid" />
-        </div>
-      </form>
-    </template>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-import { createResource, Button, Dialog, FormControl } from "frappe-ui";
-import KnowledgeBaseIconSelector from "./KnowledgeBaseIconSelector.vue";
-
-interface E {
-  (event: "success", id: string): void;
-}
-
-const attrs = useAttrs();
-const emit = defineEmits<E>();
-const newCategoryName = ref("");
-const newCategoryDescription = ref("");
-const newCategoryIcon = ref("");
-
-const resetForm = () => {
-  newCategoryName.value = "";
-  newCategoryDescription.value = "";
-  newCategoryIcon.value = "";
-};
-
-const newCategoryRes = createResource({
-  url: "frappe.client.insert",
-  makeParams() {
-    return {
-      doc: {
-        doctype: "HD Article Category",
-        category_name: newCategoryName.value,
-        description: newCategoryDescription.value,
-        icon: newCategoryIcon.value,
-      },
-    };
-  },
-  validate(params) {
-    const requiredFields = ["category_name", "description", "icon"];
-    for (const f of requiredFields) {
-      if (params.doc[f]) return;
-      const field = f.replace("_", " ").toUpperCase();
-      return `${field} is required`;
-    }
-  },
-  onSuccess(data) {
-    emit("success", data.name);
-    resetForm();
-  },
-});
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseCustomer.vue b/desk/src/pages/knowledge-base/KnowledgeBaseCustomer.vue
new file mode 100644
index 000000000..460426980
--- /dev/null
+++ b/desk/src/pages/knowledge-base/KnowledgeBaseCustomer.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="p-5 px-10 w-full overflow-scroll items-center">
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Knowledge base</div>
+      </template>
+    </LayoutHeader>
+    <div class="max-w-4xl pt-4 sm:px-5 w-full flex flex-col gap-2">
+      <FormControl
+        ref="searchInputRef"
+        type="text"
+        class="w-full"
+        placeholder="Ask a question..."
+        size="lg"
+        v-model="search"
+      >
+        <template #prefix>
+          <Icon icon="lucide:search" class="h-4 w-4 text-gray-500" />
+        </template>
+      </FormControl>
+
+      <!-- Searched Articles -->
+      <div></div>
+
+      <!-- Categories Folder -->
+      <section>
+        <!-- Heading -->
+        <span
+          class="text-base text-gray-600 font-medium leading-6 pl-1 my-0 mb-1"
+        >
+          Categories
+        </span>
+        <CategoryFolderContainer />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { FormControl, usePageMeta, FeatherIcon } from "frappe-ui";
+import { Icon } from "@iconify/vue";
+import { LayoutHeader } from "@/components";
+import CategoryFolderContainer from "@/components/knowledge-base/CategoryFolderContainer.vue";
+
+const search = ref("");
+
+usePageMeta(() => {
+  return {
+    title: "Knowledge base",
+  };
+});
+</script>
+
+<style scoped></style>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseIconSelector.vue b/desk/src/pages/knowledge-base/KnowledgeBaseIconSelector.vue
deleted file mode 100644
index f6e354d02..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseIconSelector.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <Popover>
-    <template #target="{ togglePopover }">
-      <Button @click="togglePopover">
-        <template #icon>
-          <component :is="getIcon(icon)" />
-        </template>
-      </Button>
-    </template>
-    <template #body-main="{ togglePopover }">
-      <div class="grid grid-cols-6 gap-2 p-2">
-        <Button
-          v-for="i in icons"
-          :key="i"
-          class="place-self-center"
-          @click="
-            () => {
-              emit('select', i);
-              togglePopover();
-            }
-          "
-        >
-          <template #icon>
-            <component :is="getIcon(i)" />
-          </template>
-        </Button>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script setup lang="ts">
-import { Popover } from "frappe-ui";
-import { getIcon } from "./util";
-import { icons } from "./data";
-
-interface P {
-  icon: string;
-}
-
-interface E {
-  (event: "select", icon: string): void;
-}
-
-defineProps<P>();
-const emit = defineEmits<E>();
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseSidebar.vue b/desk/src/pages/knowledge-base/KnowledgeBaseSidebar.vue
deleted file mode 100644
index 7875fd72c..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseSidebar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div
-    class="h-full space-y-2 border-r px-3.5 py-2.5"
-    :style="{
-      'min-width': '242px',
-      'max-width': '242px',
-    }"
-  >
-    <div class="flex items-center justify-between">
-      <div class="text-sm font-medium text-gray-600">Categories</div>
-      <Button
-        theme="gray"
-        variant="ghost"
-        @click="showNewDialog = !showNewDialog"
-      >
-        <template #icon>
-          <Icon icon="lucide:plus" class="h-4 w-4" />
-        </template>
-      </Button>
-    </div>
-    <div class="flex flex-col gap-1">
-      <SidebarLink
-        v-for="category in categories.data"
-        :key="category.label"
-        :icon="getIcon(category.icon, true)"
-        :is-active="activeCategory === category.name"
-        :is-expanded="true"
-        :label="category.category_name"
-        :on-click="() => toCategory(category.name)"
-        class="truncate"
-      />
-    </div>
-    <KnowledgeBaseCategoryNew
-      v-model="showNewDialog"
-      @success="onNewCategory"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { createListResource, Button } from "frappe-ui";
-import { Icon } from "@iconify/vue";
-import { AGENT_PORTAL_KNOWLEDGE_BASE_CATEGORY } from "@/router";
-import SidebarLink from "@/components/SidebarLink.vue";
-import KnowledgeBaseCategoryNew from "./KnowledgeBaseCategoryNew.vue";
-import { getIcon } from "./util";
-
-const router = useRouter();
-const route = useRoute();
-const activeCategory = computed(() => route.params.categoryId);
-const categories = createListResource({
-  doctype: "HD Article Category",
-  auto: true,
-  fields: ["name", "category_name", "icon"],
-  filters: {
-    parent_category: "",
-  },
-});
-const showNewDialog = ref(false);
-
-function toCategory(categoryId: string) {
-  router.push({
-    name: AGENT_PORTAL_KNOWLEDGE_BASE_CATEGORY,
-    params: {
-      categoryId,
-    },
-  });
-}
-
-function onNewCategory(categoryId: string) {
-  categories.reload().then(() => {
-    showNewDialog.value = false;
-    toCategory(categoryId);
-  });
-}
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
deleted file mode 100644
index 34f900972..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-  <div class="flex grow flex-col">
-    <KnowledgeBaseCategoryHeader
-      :title="subCategory.doc?.category_name"
-      :description="subCategory.doc?.description"
-    >
-      <template #right>
-        <div class="space-x-2">
-          <Button
-            label="Edit"
-            theme="gray"
-            variant="outline"
-            @click="showEdit = !showEdit"
-          >
-            <template #prefix>
-              <IconEdit class="h-4 w-4" />
-            </template>
-          </Button>
-          <Button
-            label="Add new"
-            theme="gray"
-            variant="solid"
-            @click="toNewArticle"
-          >
-            <template #prefix>
-              <IconPlus class="h-4 w-4" />
-            </template>
-          </Button>
-        </div>
-      </template>
-    </KnowledgeBaseCategoryHeader>
-    <ListViewBuilder
-      :options="options"
-      @row-click="handleClick"
-      @empty-state-action="toNewArticle"
-    />
-    <Dialog v-model="showEdit" :options="{ title: 'Edit' }">
-      <template #body-content>
-        <form @submit.prevent="saveSubCategory">
-          <div class="space-y-4">
-            <FormControl
-              v-model="newSubCategoryName"
-              :placeholder="subCategory.doc.category_name"
-              label="Name"
-              type="text"
-            />
-            <FormControl
-              v-model="newSubCategoryDescription"
-              :placeholder="subCategory.doc.description"
-              label="Description"
-              type="textarea"
-            />
-            <Button
-              :disabled="!newSubCategoryName && !newSubCategoryDescription"
-              class="w-full"
-              label="Save"
-              theme="gray"
-              variant="solid"
-            />
-          </div>
-        </form>
-      </template>
-    </Dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, h } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useUserStore } from "@/stores/user";
-import {
-  createDocumentResource,
-  debounce,
-  Button,
-  Dialog,
-  FormControl,
-  Avatar,
-} from "frappe-ui";
-import { AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE } from "@/router";
-import { useError } from "@/composables/error";
-import KnowledgeBaseCategoryHeader from "./KnowledgeBaseCategoryHeader.vue";
-import IconEdit from "~icons/lucide/edit-3";
-import IconPlus from "~icons/lucide/plus";
-import ListViewBuilder from "@/components/ListViewBuilder.vue";
-const { getUser } = useUserStore();
-const props = defineProps({
-  subCategoryId: {
-    type: String,
-    required: true,
-  },
-});
-
-const router = useRouter();
-const route = useRoute();
-const newSubCategoryName = ref("");
-const newSubCategoryDescription = ref("");
-const showEdit = ref(false);
-
-const subCategory = createDocumentResource({
-  doctype: "HD Article Category",
-  name: props.subCategoryId,
-  auto: true,
-  setValue: {
-    onError: useError({ title: "Error creating sub category" }),
-  },
-});
-
-const saveSubCategory = debounce(
-  () =>
-    subCategory.setValue.submit({
-      category_name: newSubCategoryName.value || subCategory.doc.category_name,
-      description:
-        newSubCategoryDescription.value || subCategory.doc.description,
-    }),
-  500
-);
-
-const options = {
-  doctype: "HD Article",
-  defaultFilters: {
-    category: ["=", props.subCategoryId],
-    status: ["!=", "Archived"],
-  },
-  columnConfig: {
-    author: {
-      prefix: ({ row }) => {
-        return h(Avatar, {
-          shape: "circle",
-          image: getUser(row.author)?.user_image,
-          label: row.author,
-          size: "sm",
-        });
-      },
-    },
-  },
-  statusMap: {
-    Published: {
-      label: "Published",
-      theme: "green",
-    },
-    Draft: {
-      label: "Draft",
-      theme: "gray",
-    },
-  },
-  emptyState: {
-    title: "No Articles Found",
-  },
-  hideViewControls: true,
-  selectable: false,
-};
-
-function handleClick(id: string) {
-  router.push({
-    name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
-    params: {
-      articleId: id,
-    },
-    query: {
-      category: route.params.categoryId,
-      subCategory: route.params.subCategoryId,
-    },
-  });
-}
-
-function toNewArticle() {
-  router.push({
-    name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
-    params: {
-      articleId: "new",
-    },
-    query: {
-      category: route.params.categoryId,
-      subCategory: route.params.subCategoryId,
-    },
-  });
-}
-</script>
diff --git a/desk/src/pages/knowledge-base/NewArticle.vue b/desk/src/pages/knowledge-base/NewArticle.vue
new file mode 100644
index 000000000..c2ade57bb
--- /dev/null
+++ b/desk/src/pages/knowledge-base/NewArticle.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="flex flex-col flex-1">
+    <LayoutHeader>
+      <template #left-header>
+        <Breadcrumbs :items="breadcrumbs" />
+      </template>
+      <template #right-header> </template>
+    </LayoutHeader>
+    <div class="pt-6 mx-auto w-full max-w-4xl px-5">
+      <div class="flex flex-col gap-3 rounded-lg border w-full p-4">
+        <div class="flex justify-between items-center mb-3">
+          <!-- Author Info -->
+          <div
+            class="flex gap-1 items-center flex-1 mr-7 max-w-fit overflow-hidden"
+            v-if="!categoryName"
+          >
+            <UserAvatar :name="user.name" :expand="true" />
+            <span>in</span>
+            <Link
+              class="form-control"
+              doctype="HD Article Category"
+              placeholder="Select Category"
+              v-model="categoryId"
+              :pageLength="100"
+            />
+          </div>
+          <div v-else>
+            <UserAvatar :name="user.name" :expand="true" />
+          </div>
+          <!-- Action Buttons -->
+          <div class="flex gap-2">
+            <Button label="Discard" @click="handleArticleDiscard" />
+            <Button
+              label="Create"
+              variant="solid"
+              @click="handleCreateArticle"
+            />
+          </div>
+        </div>
+        <!-- Title -->
+        <textarea
+          class="w-full resize-none border-0 text-3xl font-bold placeholder-ink-gray-3 p-0 pb-3 border-b border-gray-200 focus:ring-0 focus:border-gray-200"
+          v-model="title"
+          placeholder="Title"
+          rows="1"
+          wrap="soft"
+          maxlength="140"
+          autofocus
+          @input="
+          (e: Event) => {
+            const target = e.target as HTMLTextAreaElement;
+            target.style.height = `${target.scrollHeight}px`;
+          }
+          "
+        />
+        <!-- Article Content -->
+        <TextEditor
+          :content="content"
+          @change="content = $event"
+          placeholder="Write your article here..."
+          editor-class="rounded-b-lg max-w-[unset] prose-sm h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)] overflow-auto"
+        >
+          <template #bottom>
+            <TextEditorFixedMenu
+              class="-ml-1 overflow-x-auto w-full"
+              :buttons="textEditorMenuButtons"
+            />
+          </template>
+        </TextEditor>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import {
+  usePageMeta,
+  TextEditor,
+  TextEditorFixedMenu,
+  confirmDialog,
+  Breadcrumbs,
+} from "frappe-ui";
+import { useRouter, useRoute } from "vue-router";
+import { newArticle } from "@/stores/knowledgeBase";
+import { useUserStore } from "@/stores/user";
+import { LayoutHeader, UserAvatar } from "@/components";
+import { createToast, textEditorMenuButtons } from "@/utils";
+import { Article } from "@/types";
+
+const userStore = useUserStore();
+const user = userStore.getUser();
+const router = useRouter();
+const route = useRoute();
+
+const title = ref("");
+const content = ref("");
+
+const categoryId = ref(route.query.category || null);
+const categoryName = computed(() => (route.query.title as string) || "");
+
+function handleCreateArticle() {
+  newArticle.submit(
+    { title: title.value, content: content.value, category: categoryId.value },
+    {
+      onSuccess: (article: Article) => {
+        createToast({
+          title: "Article created successfully",
+          icon: "check",
+          iconClasses: "text-green-600",
+        });
+        resetState();
+        router.push({
+          name: "Article",
+          params: {
+            articleId: article.name,
+          },
+        });
+      },
+      onError: (error: string) => {
+        createToast({
+          title: error,
+          icon: "x",
+          iconClasses: "text-red-600",
+        });
+      },
+    }
+  );
+}
+function handleArticleDiscard() {
+  if (!title.value && !content.value) {
+    router.push({
+      name: "AgentKnowledgeBase",
+    });
+    return;
+  }
+  confirmDialog({
+    title: "Discard Article",
+    message: "Are you sure you want to discard this article?",
+    onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+      router.push({
+        name: "AgentKnowledgeBase",
+      });
+      resetState();
+      hideDialog();
+    },
+  });
+}
+
+function resetState() {
+  title.value = "";
+  content.value = "";
+}
+
+const breadcrumbs = computed(() => {
+  const options: Array<{ label: string; route?: { name: string } }> = [
+    {
+      label: "Knowledge Base",
+      route: { name: "AgentKnowledgeBase" },
+    },
+  ];
+  if (categoryName.value) {
+    options.push({
+      label: categoryName.value,
+      route: { name: "AgentKnowledgeBase" },
+    });
+  }
+  options.push({
+    label: "New Article",
+  });
+  return options;
+});
+
+usePageMeta(() => {
+  return {
+    title: "New Article",
+  };
+});
+</script>
diff --git a/desk/src/pages/ticket/TicketNewArticles.vue b/desk/src/pages/ticket/TicketNewArticles.vue
index 25d2eda2d..9e1b7c6fc 100644
--- a/desk/src/pages/ticket/TicketNewArticles.vue
+++ b/desk/src/pages/ticket/TicketNewArticles.vue
@@ -8,7 +8,7 @@
       <RouterLink
         class="group cursor-pointer space-x-1 hover:text-gray-900"
         :to="{
-          name: 'KnowledgeBasePublicNew',
+          name: 'CustomerKnowledgeBase',
         }"
         target="_blank"
       >
@@ -24,7 +24,7 @@
         <RouterLink
           class="group cursor-pointer hover:text-gray-900 flex flex-col gap-2"
           :to="{
-            name: 'KBArticlePublicNew',
+            name: 'ArticlePublic',
             params: {
               articleId: a.name.split('#')[0],
             },
diff --git a/desk/src/router/index.ts b/desk/src/router/index.ts
index ce0eb1e87..18dfe995f 100644
--- a/desk/src/router/index.ts
+++ b/desk/src/router/index.ts
@@ -21,7 +21,6 @@ export const AGENT_PORTAL_KNOWLEDGE_BASE_CATEGORY = "DeskKBCategory";
 export const AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY = "DeskKBSubcategory";
 export const AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE = "DeskKBArticle";
 
-export const KB_PUBLIC = "KBHome";
 export const KB_PUBLIC_ARTICLE = "KBArticlePublic";
 export const KB_PUBLIC_CATEGORY = "KBCategoryPublic";
 
@@ -90,23 +89,23 @@ const routes = [
           },
         ],
       },
-      // handle knowledge base routing
       {
-        path: "knowledge-base-public",
-        children: [
-          {
-            path: "",
-            name: "KnowledgeBasePublicNew",
-            component: () =>
-              import("@/pages/knowledge-base-v2/KnowledgeBasePublic.vue"),
-          },
-          {
-            path: "articles/:articleId?",
-            name: "KBArticlePublicNew",
-            component: () => import("@/pages/KnowledgeBaseArticle.vue"),
-            props: true,
-          },
-        ],
+        path: "kb-public",
+        name: "CustomerKnowledgeBase",
+        component: () =>
+          import("@/pages/knowledge-base/KnowledgeBaseCustomer.vue"),
+      },
+      {
+        path: "kb-public/:categoryId",
+        name: "Articles",
+        component: () => import("@/pages/knowledge-base/Articles.vue"),
+        props: true,
+      },
+      {
+        path: "kb-public/articles/:articleId",
+        name: "ArticlePublic",
+        component: () => import("@/pages/knowledge-base/Article.vue"),
+        props: true,
       },
     ],
   },
@@ -150,30 +149,20 @@ const routes = [
       },
       {
         path: "kb",
-        name: AGENT_PORTAL_KNOWLEDGE_BASE,
-        component: () => import("@/pages/knowledge-base/KnowledgeBase.vue"),
-        children: [
-          {
-            path: ":categoryId",
-            name: AGENT_PORTAL_KNOWLEDGE_BASE_CATEGORY,
-            props: true,
-            component: () =>
-              import("@/pages/knowledge-base/KnowledgeBaseCategory.vue"),
-          },
-          {
-            path: ":categoryId/:subCategoryId",
-            name: AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY,
-            props: true,
-            component: () =>
-              import("@/pages/knowledge-base/KnowledgeBaseSubcategory.vue"),
-          },
-        ],
+        name: "AgentKnowledgeBase",
+        component: () =>
+          import("@/pages/knowledge-base/KnowledgeBaseAgent.vue"),
       },
       {
         path: "kb/articles/:articleId",
-        name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
+        name: "Article",
+        component: () => import("@/pages/knowledge-base/Article.vue"),
         props: true,
-        component: () => import("@/pages/KnowledgeBaseArticle.vue"),
+      },
+      {
+        path: "articles/new",
+        name: "NewArticle",
+        component: () => import("@/pages/knowledge-base/NewArticle.vue"),
       },
       {
         path: "customers",
diff --git a/desk/src/stores/knowledgeBase.ts b/desk/src/stores/knowledgeBase.ts
new file mode 100644
index 000000000..d10ccd1a6
--- /dev/null
+++ b/desk/src/stores/knowledgeBase.ts
@@ -0,0 +1,86 @@
+import { createResource } from "frappe-ui";
+
+// Title
+export const newArticle = createResource({
+  url: "frappe.client.insert",
+  makeParams({ title, content, category }) {
+    return {
+      doc: {
+        doctype: "HD Article",
+        title,
+        content,
+        category,
+      },
+    };
+  },
+  validate({ doc }) {
+    if (!doc.title) throw "Title is required";
+    if (!doc.content) throw "Content is required";
+  },
+});
+
+export const updateRes = createResource({
+  url: "frappe.client.set_value",
+});
+
+export const deleteRes = createResource({
+  url: "frappe.client.delete",
+});
+
+export const deleteArticles = createResource({
+  url: "helpdesk.api.knowledge_base.delete_articles",
+  makeParams({ articles }) {
+    return {
+      articles,
+    };
+  },
+  validate({ articles }) {
+    if (!articles) throw "Articles are required";
+  },
+});
+
+// Category
+export const newCategory = createResource({
+  url: "helpdesk.api.knowledge_base.create_category",
+  makeParams({ title }) {
+    return {
+      title,
+    };
+  },
+  validate(title: string) {
+    if (!title) throw "Title is required";
+  },
+});
+
+export const updateCategoryTitle = createResource({
+  url: "frappe.client.set_value",
+  validate({ name, value }) {
+    if (!value) throw "Title is required";
+  },
+});
+
+export const deleteCategory = createResource({
+  url: "helpdesk.api.knowledge_base.delete_category",
+  makeParams({ name }) {
+    return {
+      name,
+    };
+  },
+  validate({ name }) {
+    if (!name) throw "Category is required";
+  },
+});
+
+export const moveToCategory = createResource({
+  url: "helpdesk.api.knowledge_base.move_to_category",
+  makeParams({ category, articles }) {
+    return {
+      category,
+      articles,
+    };
+  },
+  validate({ category, articles }) {
+    if (!category) throw "Category is required";
+    if (!articles) throw "Articles are required";
+  },
+});
diff --git a/desk/src/types.ts b/desk/src/types.ts
index 79e031d72..b6b288095 100644
--- a/desk/src/types.ts
+++ b/desk/src/types.ts
@@ -1,9 +1,9 @@
 import { Component } from "vue";
 
-export interface Resource<A = unknown> {
+export interface Resource<T = unknown> {
   auto: boolean;
   loading: boolean;
-  data: A;
+  data: T;
   pageLength: number;
   totalCount: number;
   hasNextPage: boolean;
@@ -216,12 +216,17 @@ export interface RootCategory {
 export interface Article {
   name: string;
   title: string;
-  category: string;
+  category_name: string;
+  category_id: string;
   published_on: string;
-  author: string;
+  author: Author;
   subtitle: string;
   article_image: string | null;
   _user_tags: string | null;
+  status: string;
+  creation: string;
+  content: string;
+  modified: string;
 }
 
 export interface SubCategory {
@@ -234,7 +239,7 @@ export interface SubCategory {
 export interface Author {
   name: string;
   image: string | null;
-  email?: string;
+  email: string;
 }
 
 export interface Category {
@@ -254,3 +259,8 @@ export interface BadgeStatus {
 }
 
 export type FeedbackAction = 0 | 1 | 2; // 0: neutral, 1: like, 2: dislike
+
+export interface View {
+  view_type: string;
+  group_by_field: string;
+}
diff --git a/desk/src/utils.ts b/desk/src/utils.ts
index 9241aa645..9560501ab 100644
--- a/desk/src/utils.ts
+++ b/desk/src/utils.ts
@@ -1,5 +1,6 @@
 import { useClipboard, useDateFormat, useTimeAgo } from "@vueuse/core";
 import { toast } from "frappe-ui";
+import { RouteLocation } from "vue-router";
 import zod from "zod";
 /**
  * Wrapper to create toasts, supplied with default options.
@@ -116,3 +117,44 @@ export function setupCustomActions(data, obj) {
 
   data._customActions = actions;
 }
+
+export const isCustomerPortal = (route: RouteLocation) =>
+  route.meta.public ?? false;
+
+export const textEditorMenuButtons = [
+  "Paragraph",
+  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
+  "Separator",
+  "Bold",
+  "Italic",
+  "Separator",
+  "Bullet List",
+  "Numbered List",
+  "Separator",
+  "Align Left",
+  "Align Center",
+  "Align Right",
+  "FontColor",
+  "Separator",
+  "Image",
+  "Video",
+  "Link",
+  "Blockquote",
+  "Code",
+  "Horizontal Rule",
+  [
+    "InsertTable",
+    "AddColumnBefore",
+    "AddColumnAfter",
+    "DeleteColumn",
+    "AddRowBefore",
+    "AddRowAfter",
+    "DeleteRow",
+    "MergeCells",
+    "SplitCell",
+    "ToggleHeaderColumn",
+    "ToggleHeaderRow",
+    "ToggleHeaderCell",
+    "DeleteTable",
+  ],
+];
diff --git a/frappe-ui b/frappe-ui
index c04c9feaa..c2ff9c9d4 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit c04c9feaa0e009e754903666d2c6bfe12328b96e
+Subproject commit c2ff9c9d49cdbbfcaea3cf96c72adecf0bbe1e14
diff --git a/helpdesk/api/doc.py b/helpdesk/api/doc.py
index 96313de50..cf366d1e5 100644
--- a/helpdesk/api/doc.py
+++ b/helpdesk/api/doc.py
@@ -125,9 +125,13 @@ def get_list_data(
     columns=None,
     rows=None,
     show_customer_portal_fields=False,
+    view=None,
 ):
     is_default = True
 
+    view_type = view.get("view_type") if view else None
+    group_by_field = view.get("group_by_field") if view else None
+
     if columns or rows:
         is_default = False
         columns = frappe.parse_json(columns)
@@ -153,17 +157,17 @@ def get_list_data(
     # 	rows = frappe.parse_json(list_view_settings.rows)
     # 	is_default = False
     # else:
-    list = get_controller(doctype)
+    _list = get_controller(doctype)
 
     # flake8: noqa
     if is_default:
-        if hasattr(list, "default_list_data"):
+        if hasattr(_list, "default_list_data"):
             columns = (
-                list.default_list_data(show_customer_portal_fields).get("columns")
+                _list.default_list_data(show_customer_portal_fields).get("columns")
                 if doctype == "HD Ticket"
-                else list.default_list_data().get("columns")
+                else _list.default_list_data().get("columns")
             )
-            rows = list.default_list_data().get("rows")
+            rows = _list.default_list_data().get("rows")
 
     if rows is None:
         rows = []
@@ -173,6 +177,9 @@ def get_list_data(
         if column.get("key") not in rows:
             rows.append(column.get("key"))
 
+    if group_by_field and group_by_field not in rows:
+        rows.append(group_by_field)
+
     rows.append("name") if "name" not in rows else rows
     data = (
         frappe.get_list(
@@ -221,12 +228,60 @@ def get_list_data(
     if show_customer_portal_fields:
         fields = get_customer_portal_fields(doctype, fields)
 
+    if group_by_field and view_type == "group_by":
+
+        def get_options(fieldtype, options):
+            if fieldtype == "Select":
+                return [option for option in options.split("\n")]
+            else:
+                has_empty_values = any([not d.get(group_by_field) for d in data])
+                options = list(set([d.get(group_by_field) for d in data]))
+                options = [u for u in options if u]
+                options = [category_name for category_name in options if category_name]
+                options = [
+                    {
+                        "label": frappe.db.get_value(
+                            "HD Article Category", option, "category_name"
+                        ),
+                        "value": option,
+                    }
+                    for option in options
+                    if option
+                ]
+                if has_empty_values:
+                    options.append({"label": "", "value": ""})
+
+                if order_by and group_by_field in order_by:
+                    order_by_fields = order_by.split(",")
+                    order_by_fields = [
+                        (field.split(" ")[0], field.split(" ")[1])
+                        for field in order_by_fields
+                    ]
+                    if (group_by_field, "asc") in order_by_fields:
+                        options.sort(key=lambda x: x.get("label"))
+                    elif (group_by_field, "desc") in order_by_fields:
+                        options.sort(reverse=True, key=lambda x: x.get("label"))
+                else:
+                    options.sort(key=lambda x: x.get("label"))
+                return options
+
+        for field in fields:
+            if field.get("value") == group_by_field:
+                group_by_field = {
+                    "label": field.get("label"),
+                    "name": field.get("value"),
+                    "type": field.get("type"),
+                    "options": get_options(field.get("type"), field.get("options")),
+                }
+
     return {
         "data": data,
         "columns": columns,
         "fields": fields if doctype == "HD Ticket" else [],
         "total_count": len(frappe.get_list(doctype, filters=filters)),
         "row_count": len(data),
+        "group_by_field": group_by_field,
+        "view_type": view_type,
     }
 
 
diff --git a/helpdesk/api/kbase.py b/helpdesk/api/kbase.py
index 65929085b..e5e51dc48 100644
--- a/helpdesk/api/kbase.py
+++ b/helpdesk/api/kbase.py
@@ -65,17 +65,14 @@ def get_sub_categories_and_articles(category):
         }
         category_tree["sub_categories"].append(sub_cat_tree)
 
-    # add all articles to the main tree
-
+    all_articles = []
     for sub_cat in category_tree["sub_categories"]:
-        category_tree["all_articles"].extend(sub_cat["articles"])
+        all_articles.extend(sub_cat["articles"])
 
     # get author details
-    for article in category_tree["all_articles"]:
+    for article in all_articles:
         author = article["author"]
         if author not in category_tree["authors"]:
             category_tree["authors"][author] = get_user_info_for_avatar(author)
 
-    category_tree["children"] = direct_articles + category_tree["sub_categories"]
-
     return category_tree
diff --git a/helpdesk/api/knowledge_base.py b/helpdesk/api/knowledge_base.py
new file mode 100644
index 000000000..7d9f1fc33
--- /dev/null
+++ b/helpdesk/api/knowledge_base.py
@@ -0,0 +1,65 @@
+import frappe
+from frappe import _
+from frappe.utils import get_user_info_for_avatar
+
+from helpdesk.utils import is_agent
+
+
+@frappe.whitelist(allow_guest=True)
+def get_article(name: str):
+    article = frappe.get_doc("HD Article", name).as_dict()
+
+    if not is_agent() and article["status"] != "Published":
+        frappe.throw(_("Access denied"), frappe.PermissionError)
+
+    author = get_user_info_for_avatar(article["author"])
+
+    return {
+        "name": article.name,
+        "title": article.title,
+        "content": article.content,
+        "author": author,
+        "creation": article.creation,
+        "status": article.status,
+        "published_on": article.published_on,
+        "modified": article.modified,
+        "category_name": frappe.db.get_value(
+            "HD Article Category", article.category, "category_name"
+        ),
+        "category_id": article.category,
+    }
+
+    return article
+
+
+@frappe.whitelist()
+def delete_articles(articles):
+    for article in articles:
+        frappe.delete_doc("HD Article", article)
+
+
+@frappe.whitelist()
+def create_category(title: str):
+    category = frappe.new_doc("HD Article Category", category_name=title).insert()
+    article = frappe.new_doc(
+        "HD Article", title="New Article", category=category.name
+    ).insert()
+    return {"article": article.name, "category": category.name}
+
+
+@frappe.whitelist()
+def delete_category(name: str):
+    try:
+        articles = frappe.get_all("HD Article", filters={"category": name})
+        for article in articles:
+            frappe.db.set_value("HD Article", article.name, "category", None)
+
+        frappe.delete_doc("HD Article Category", name)
+    except Exception as e:
+        frappe.db.rollback()
+
+
+@frappe.whitelist()
+def move_to_category(category, articles):
+    for article in articles:
+        frappe.db.set_value("HD Article", article, "category", category)
diff --git a/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py b/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py
index d3c06dc21..f632835ca 100644
--- a/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py
+++ b/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py
@@ -41,7 +41,7 @@ def default_list_data():
                 "type": "Datetime",
             },
         ]
-        rows = ["modified"]
+        rows = ["modified", "user.user_image"]
         # modified row is needed because
         # we have a link table for HD Agent to User
         # and sql gets confused which modified to take from those 2 tables
diff --git a/helpdesk/helpdesk/doctype/hd_article/api.py b/helpdesk/helpdesk/doctype/hd_article/api.py
deleted file mode 100644
index a509b46fa..000000000
--- a/helpdesk/helpdesk/doctype/hd_article/api.py
+++ /dev/null
@@ -1,38 +0,0 @@
-import frappe
-from frappe import _
-
-from helpdesk.utils import is_agent
-
-
-@frappe.whitelist(allow_guest=True)
-def get_article(name: str):
-    article = frappe.get_doc("HD Article", name).as_dict()
-
-    if not is_agent() and article["status"] != "Published":
-        frappe.throw(_("Access denied"), frappe.PermissionError)
-
-    author = frappe.get_cached_doc("User", article["author"])
-    sub_category = frappe.get_cached_doc("HD Article Category", article["category"])
-    category = frappe.get_cached_doc(
-        "HD Article Category", sub_category.parent_category or article["category"]
-    )
-
-    user = frappe.session.user
-    # TODO: views count increment with views field in HD Article
-    # if not is_agent() and user != author.name:
-    # frappe.db.set_value("HD Article", name, "views", article["views"] + 1)
-
-    user_feedback = int(
-        frappe.db.get_value(
-            "HD Article Feedback", {"user": user, "article": name}, "feedback"
-        )
-        or 0
-    )
-
-    return {
-        **article,
-        "author": author,
-        "category": category,
-        "sub_category": sub_category,
-        "user_feedback": user_feedback,
-    }
diff --git a/helpdesk/helpdesk/doctype/hd_article/hd_article.json b/helpdesk/helpdesk/doctype/hd_article/hd_article.json
index df87fc7b7..c80bacdd7 100644
--- a/helpdesk/helpdesk/doctype/hd_article/hd_article.json
+++ b/helpdesk/helpdesk/doctype/hd_article/hd_article.json
@@ -33,7 +33,6 @@
    "fieldname": "category",
    "fieldtype": "Link",
    "in_list_view": 1,
-   "in_standard_filter": 1,
    "label": "Category",
    "options": "HD Article Category"
   },
@@ -79,6 +78,7 @@
    "default": "Draft",
    "fieldname": "status",
    "fieldtype": "Select",
+   "in_standard_filter": 1,
    "label": "Status",
    "options": "Published\nDraft\nArchived"
   },
@@ -101,7 +101,7 @@
  ],
  "links": [],
  "make_attachments_public": 1,
- "modified": "2024-11-25 13:02:28.644492",
+ "modified": "2025-01-07 00:59:35.927067",
  "modified_by": "Administrator",
  "module": "Helpdesk",
  "name": "HD Article",
diff --git a/helpdesk/helpdesk/doctype/hd_article/hd_article.py b/helpdesk/helpdesk/doctype/hd_article/hd_article.py
index 1678d46d0..f8fa7ebec 100644
--- a/helpdesk/helpdesk/doctype/hd_article/hd_article.py
+++ b/helpdesk/helpdesk/doctype/hd_article/hd_article.py
@@ -59,7 +59,7 @@ def default_list_data():
                 "label": "Title",
                 "type": "Data",
                 "key": "title",
-                "width": "17rem",
+                "width": "20rem",
             },
             {
                 "label": "Status",
diff --git a/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py b/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py
index f24f8f4ce..dfdd166e6 100644
--- a/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py
+++ b/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py
@@ -19,24 +19,3 @@ def before_save(self):
                     "HD Article Category", {"parent_category": self.parent_category}
                 )
             )
-
-    def archive(self):
-        self.idx = -1
-        self.status = "Archived"
-        self.save()
-
-    def unarchive(self):
-        self.status = "Published"
-        self.save()
-
-    def get_breadcrumbs(self):
-        breadcrumbs = [{"name": self.name, "label": self.category_name}]
-        current_category = self
-        while current_category.parent_category:
-            current_category = frappe.get_doc(
-                "HD Article Category", current_category.parent_category
-            )
-            breadcrumbs.append(
-                {"name": current_category.name, "label": current_category.category_name}
-            )
-        return breadcrumbs[::-1]