diff --git a/components/list/ListUI.tsx b/components/list/ListUI.tsx
index 3b369cd..86a1757 100644
--- a/components/list/ListUI.tsx
+++ b/components/list/ListUI.tsx
@@ -3,9 +3,11 @@ import React from "react";
 import { useLocal } from "@/lib/utils/use-local";
 import get from "lodash.get";
 import { ListBetter } from "../tablelist/List";
+import { cn } from "@/lib/utils";
 export const ListUI: React.FC<any> = ({
   tabHeader,
   className,
+  classNameScrollArea,
   name,
   modeTab,
   column,
@@ -29,6 +31,7 @@ export const ListUI: React.FC<any> = ({
   tab,
   onTab,
   breadcrumb,
+  classNameContainer,
   content,
   ready = true,
 }) => {
@@ -50,7 +53,7 @@ export const ListUI: React.FC<any> = ({
   }
   return (
     <div
-      className={cx(
+      className={cn(
         "flex flex-col flex-grow  rounded-lg border border-gray-200 py-2 overflow-hidden",
         className
       )}
@@ -70,6 +73,8 @@ export const ListUI: React.FC<any> = ({
           <div className="w-full flex flex-row flex-grow  overflow-hidden ">
             <ListBetter
               name={name}
+              classNameScrollArea={classNameScrollArea}
+              classNameContainer={classNameContainer}
               content={content}
               onLoad={onLoad}
               onCount={async (params: any) => {
diff --git a/components/partials/SidebarBetter.tsx b/components/partials/SidebarBetter.tsx
index 3ff4a76..9c472bc 100644
--- a/components/partials/SidebarBetter.tsx
+++ b/components/partials/SidebarBetter.tsx
@@ -25,6 +25,9 @@ import {
   TooltipTrigger,
 } from "../ui/tooltip";
 import ImageBetter from "../ui/Image";
+import { ListUI } from "../list/ListUI";
+import { apix } from "@/lib/utils/apix";
+import { getNumber } from "@/lib/utils/getNumber";
 
 interface TreeMenuItem {
   title: string;
@@ -527,7 +530,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
             <Popover
               classNameTrigger={cx("flex flex-row justify-center flex-grow")}
               popoverClassName={cx(
-                "max-w-[24rem]  bg-white shadow-lg rounded-lg"
+                "w-[24rem] h-[32rem] bg-white shadow-lg rounded-lg"
               )}
               placement={"right-start"}
               arrow={false}
@@ -537,79 +540,62 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
               }}
               open={notification}
               content={
-                <div className="max-w-[24rem]">
+                <div className="flex-grow w-full h-full flex flex-col">
                   <div className="block rounded-t-xl bg-gray-50 py-2 px-4 text-center text-base font-medium text-gray-700">
                     Notifications
                   </div>
-                  <div className="flex flex-col">
-                    <a
-                      href="#"
-                      className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
-                    >
-                      <div className="w-full pl-3">
-                        <div className="mb-1.5 text-md font-normal text-gray-500 ">
-                          New message from&nbsp;
-                          <span className="font-semibold text-gray-900 ">
-                            Bonnie Green
-                          </span>
-                          : "Hey, what's up? All set for the presentation?"
-                        </div>
-                        <div className="text-md font-medium text-primary-700 ">
-                          a few moments ago
-                        </div>
-                      </div>
-                    </a>
-                    <a
-                      href="#"
-                      className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
-                    >
-                      <div className="w-full pl-3">
-                        <div className="mb-1.5 text-md font-normal text-gray-500 ">
-                          New message from&nbsp;
-                          <span className="font-semibold text-gray-900 ">
-                            Bonnie Green
-                          </span>
-                          : "Hey, what's up? All set for the presentation?"
-                        </div>
-                        <div className="text-md font-medium text-primary-700 ">
-                          a few moments ago
-                        </div>
-                      </div>
-                    </a>
-                    <a
-                      href="#"
-                      className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
-                    >
-                      <div className="w-full pl-3">
-                        <div className="mb-1.5 text-md font-normal text-gray-500 ">
-                          New message from&nbsp;
-                          <span className="font-semibold text-gray-900 ">
-                            Bonnie Green
-                          </span>
-                          : "Hey, what's up? All set for the presentation?"
-                        </div>
-                        <div className="text-md font-medium text-primary-700 ">
-                          a few moments ago
-                        </div>
-                      </div>
-                    </a>
-                    <a
-                      href="#"
-                      className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
-                    >
-                      <div className="w-full pl-3">
-                        <div className="mb-1.5 text-md font-normal text-gray-500 ">
-                          New message from&nbsp;
-                          <span className="font-semibold text-gray-900 ">
-                            Bonnie Green
-                          </span>
-                          : "Hey, what's up? All set for the presentation?"
-                        </div>
-                        <div className="text-md font-medium text-primary-700 ">
-                          a few moments ago
-                        </div>
-                      </div>
-                    </a>
+                  <div className="flex flex-col flex-grow">
+                    <ListUI
+                      className={"border-none py-0"}
+                      classNameContainer={"gap-y-0"}
+                      classNameScrollArea={"p-0"}
+                      name="todo"
+                      content={({ item }: any) => {
+                        return (
+                          <>
+                            <a
+                              href="#"
+                              className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
+                            >
+                              <div className="w-full pl-3">
+                                <div className="mb-1.5 text-md font-normal text-gray-500 ">
+                                  New message from&nbsp;
+                                  <span className="font-semibold text-gray-900 ">
+                                    Bonnie Green
+                                  </span>
+                                  : "Hey, what's up? All set for the
+                                  presentation?"
+                                </div>
+                                <div className="text-md font-medium text-primary-700 ">
+                                  a few moments ago
+                                </div>
+                              </div>
+                            </a>
+                          </>
+                        );
+                      }}
+                      onLoad={async (param: any) => {
+                        const params = await events("onload-param", {
+                          ...param,
+                        });
+                        const result: any = await apix({
+                          port: "recruitment",
+                          value: "data.data.job_postings",
+                          path: `/api/job-postings${params}`,
+                          validate: "array",
+                        });
+                        return result;
+                      }}
+                      onCount={async () => {
+                        const result: any = await apix({
+                          port: "recruitment",
+                          value: "data.data.total",
+                          path: `/api/job-postings?page=1&page_size=1`,
+                          validate: "object",
+                        });
+                        return getNumber(result);
+                      }}
+                    />
                   </div>
                   <a
                     href="#"
diff --git a/components/tablelist/List.tsx b/components/tablelist/List.tsx
index 34f6ae9..44a6f6e 100644
--- a/components/tablelist/List.tsx
+++ b/components/tablelist/List.tsx
@@ -5,8 +5,11 @@ import { toast } from "sonner";
 import { Loader2 } from "lucide-react";
 import { ScrollArea } from "../ui/scroll-area";
 import get from "lodash.get";
+import { cn } from "@/lib/utils";
 
 export const ListBetter: React.FC<any> = ({
+  classNameContainer,
+  classNameScrollArea,
   autoPagination = true,
   name,
   column,
@@ -279,7 +282,10 @@ export const ListBetter: React.FC<any> = ({
     <>
       <div className="tbl-wrapper flex flex-grow flex-col">
         <ScrollArea
-          className="w-full h-full flex flex-col gap-y-4 p-4"
+          className={cn(
+            "w-full h-full flex flex-col gap-y-4 p-4",
+            classNameScrollArea
+          )}
           reload={reload}
         >
           {!local.ready ? (
@@ -289,7 +295,12 @@ export const ListBetter: React.FC<any> = ({
               </div>
             </>
           ) : (
-            <div className="flex-grow flex flex-col gap-y-4">
+            <div
+              className={cn(
+                "flex-grow flex flex-col gap-y-4",
+                classNameContainer
+              )}
+            >
               {Array.isArray(local.data) && local.data?.length ? (
                 local.data?.map((e, idx) => {
                   return (