diff --git a/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/chat-arena-index.tsx b/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/chat-arena-index.tsx
index e458ac6..f7d8247 100644
--- a/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/chat-arena-index.tsx
+++ b/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/chat-arena-index.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { useParams, useSearchParams } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 
 import useCreate from '@/hooks/use-create';
 import useQuery from '@/hooks/use-query';
@@ -22,6 +22,7 @@ interface ChatSubmitOptions {
 
 type ChatSubmitHandler = (event?: ChatSubmitEvent, options?: ChatSubmitOptions) => void;
 export default function ChatIndex() {
+    const router = useRouter();
     const [messages, setMessages] = useState<Message[]>([]);
     const [input, setInput] = useState('');
     const [isGenerating, setIsGenerating] = useState(false);
@@ -54,6 +55,7 @@ export default function ChatIndex() {
                 'chat',
                 query
             );
+            // router.push(`/chat/${param.id}?projectId=${projectId}`);
         }
 
         const newMessages = [...messages, userMessage];
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/header-chat.tsx b/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/header-chat.tsx
index 3133a81..8f0ffc9 100644
--- a/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/header-chat.tsx
+++ b/frontend/src/app/[locale]/(protect)/chat/components/chat-arena/header-chat.tsx
@@ -3,13 +3,12 @@
 import { useParams } from 'next/navigation';
 
 import useGet from '@/hooks/use-get';
+import { useListChatStore } from '@/store/chat-list.store';
 
 export default function HeaderChat() {
+    const { selectedChat, setSelectedChat } = useListChatStore();
     const param: { id: string[] } = useParams();
-    let chat: any = null;
-    if (param.id) {
-        chat = useGet('chat-sessions', param.id);
-    }
+    useGet('chat-sessions', param.id, setSelectedChat);
 
-    return <div className='flex-1 text-center'>{chat?.title}</div>;
+    return <div className='flex-1 text-center'>{selectedChat?.title}</div>;
 }
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/document-header.tsx b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/document-header.tsx
deleted file mode 100644
index b513dc5..0000000
--- a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/document-header.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuTrigger
-} from '@/registry/new-york-v4/ui/dropdown-menu';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/registry/new-york-v4/ui/sidebar';
-
-import { FileText } from 'lucide-react';
-
-export default function DocumentHeader() {
-    return (
-        <SidebarMenu>
-            <SidebarMenuItem>
-                <SidebarMenuButton
-                    size='lg'
-                    className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'>
-                    <div className='bg-primary hover:bg-primary/90 text-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg'>
-                        <FileText className='size-4' />
-                    </div>
-                    <div>
-                        <p>Tài Liệu</p>
-                    </div>
-                </SidebarMenuButton>
-            </SidebarMenuItem>
-        </SidebarMenu>
-    );
-}
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/dropdown-menu.jsx b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/dropdown-menu.jsx
deleted file mode 100644
index 065c7fa..0000000
--- a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/dropdown-menu.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuGroup,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuPortal,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuTrigger
-} from '@/registry/new-york-v4/ui/dropdown-menu';
-
-//icon
-import { BookOpen, EllipsisVertical, FilePen, Trash2 } from 'lucide-react';
-
-export function DropdownMenuNav({ setIsDropDownOpen, isDropDownOpen, setShowControls }) {
-    function handleClick(e) {
-        e.stopPropagation();
-        setIsDropDownOpen((open) => !open);
-    }
-
-    const handleOpenChange = (open) => {
-        setIsDropDownOpen(open);
-        if (!open) {
-            setShowControls(false);
-        }
-    };
-
-    return (
-        <DropdownMenu open={isDropDownOpen} onOpenChange={handleOpenChange}>
-            <DropdownMenuTrigger
-                onClick={handleClick}
-                className='flex h-full w-full items-center justify-center border-none text-stone-500'></DropdownMenuTrigger>
-            <DropdownMenuContent align='start' className='w-[200px]'>
-                <DropdownMenuGroup className='text-primary'>
-                    <DropdownMenuItem className='flex items-center gap-2 px-3 py-2'>
-                        <BookOpen className='h-4 w-4' />
-                        View
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className='flex items-center gap-2 px-3 py-2'>
-                        <FilePen className='h-4 w-4' />
-                        Update
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className='flex items-center gap-2 px-3 py-2'>
-                        <Trash2 className='h-4 w-4' />
-                        Delete
-                    </DropdownMenuItem>
-                </DropdownMenuGroup>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-}
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list-item.jsx b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list-item.jsx
index 9b5534a..8256a05 100644
--- a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list-item.jsx
+++ b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list-item.jsx
@@ -11,19 +11,31 @@ export function FileItem({ file }) {
         setOpen(!open);
     }
 
+    function handleClickMoveOut() {
+        console.log(window);
+    }
+
     return (
-        <div className={`relative flex max-h-full w-full items-center justify-between rounded-lg`}>
+        <div className={`shadow-primary relative ml-2 flex max-h-full w-full items-center justify-between rounded-lg`}>
             <div
-                className={`ml-2 flex h-full w-full flex-1/2 items-center rounded-l-lg ${file.type === 'pdf' ? 'bg-orange-400' : 'bg-blue-500'} p-3`}>
-                <div className={`translate-x-[-50%] -rotate-90 font-semibold text-white uppercase`}>{file.type}</div>
+                className={`flex h-full w-full flex-1/2 items-center rounded-l-lg ${file.type === 'pdf' ? 'bg-orange-400' : 'bg-blue-500'} p-3`}>
+                <div className={`translate-x-[-50%] -rotate-90 pt-2 font-semibold text-white uppercase`}>
+                    {file.type}
+                </div>
             </div>
-            <div className='a flex flex-1/2 flex-col items-end gap-2 rounded-r-lg bg-gray-500 px-2 py-2 text-white'>
-                <BookOpen className='h-4 w-4' />
-                <FilePen className='h-4 w-4' />
-                <Trash2 className='h-4 w-4' />
+            <div className='flex flex-1/2 flex-col items-end gap-0.5 rounded-r-lg bg-gray-500 px-1 py-2 text-white'>
+                <div className='p-1 hover:rounded-full hover:bg-white hover:text-black'>
+                    <BookOpen className='h-4 w-4' />
+                </div>
+                <div className='p-1 hover:rounded-full hover:bg-white hover:text-black'>
+                    <FilePen className='h-4 w-4 hover:rounded-full hover:bg-white hover:text-black' />
+                </div>
+                <div className='p-1 hover:rounded-full hover:bg-white hover:text-black'>
+                    <Trash2 className='h-4 w-4 hover:rounded-full hover:bg-white hover:text-black' />
+                </div>
             </div>
             <div
-                className={`absolute right-0 z-50 flex h-full w-[86%] justify-between gap-1 rounded-lg bg-white px-2 ${open ? '-translate-x-6.5' : 'translate-x-0'} transition-all`}>
+                className={`absolute left-0 z-50 flex h-full w-[88%] justify-between gap-1 rounded-lg bg-white px-2 ${open ? '-translate-x-0.5' : 'translate-x-7.5'} transition-all`}>
                 <div className='flex flex-col justify-center'>
                     <p className='text-sm font-medium text-stone-700'>{file.name}</p>
                     <p className='text-xs text-gray-500'>{file.size}</p>
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list.tsx b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list.tsx
index cd6712d..6ddb11a 100644
--- a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list.tsx
+++ b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Checkbox } from '@/registry/new-york-v4/ui/checkbox';
 
 import { FileItem } from './file-list-item';
+import { Trash2 } from 'lucide-react';
 
 // Mock data cho danh sách file
 const mockFiles = [
@@ -21,13 +22,21 @@ const mockFiles = [
 ];
 
 export function FileList() {
+    const [selectAll, setSelectAll] = useState(false);
+
     return (
         <div className='h-full flex-1 overflow-hidden rounded-lg p-4'>
             <div className='flex w-full items-center justify-between p-2 text-sm font-medium'>
                 Library
-                <div className='flex gap-2'>
-                    <Checkbox className='h-5 w-5 border-stone-500 ring-stone-500 data-[state=checked]:border-stone-500' />
-                    <Checkbox className='h-5 w-5 rounded-full border-stone-500 ring-stone-500 data-[state=checked]:border-stone-500' />
+                <div className='flex items-center gap-2'>
+                    <div
+                        className={`rounded-full p-1 transition-all hover:bg-red-500 ${selectAll ? 'visible' : 'invisible'}`}>
+                        <Trash2 className='h-5 w-5 text-red-600 hover:text-white' />
+                    </div>
+                    <Checkbox
+                        onCheckedChange={() => setSelectAll(!selectAll)}
+                        className='h-5 w-5 border-stone-500 ring-stone-500 data-[state=checked]:border-stone-500'
+                    />
                 </div>
             </div>
             <div className='flex h-full flex-col gap-2 overflow-y-scroll p-2'>
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/chat-list.tsx b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/chat-list.tsx
index c956a82..fcc6d8d 100644
--- a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/chat-list.tsx
+++ b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/chat-list.tsx
@@ -178,6 +178,9 @@ export function ChatList() {
                     </CollapsibleContent>
                 </Collapsible>
             ))}
+            <div className='rounded-lg border border-dashed text-gray-500'>
+                <div className={`w-full cursor-pointer rounded-lg border-gray-500 p-2 text-center`}>New Chat</div>
+            </div>
         </div>
     );
 }
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/project-switcher.tsx b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/project-switcher.tsx
index b548893..143fcfe 100644
--- a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/project-switcher.tsx
+++ b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/project-switcher.tsx
@@ -1,28 +1,22 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
-import { CreateProjectAPI, GetAllProjectsAPI } from '@/app/api/client/project-list.api';
-import { ProjectDialogContent } from '@/components/project-dialog';
-import { Dialog, DialogTrigger } from '@/registry/new-york-v4/ui/dialog';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuTrigger
-} from '@/registry/new-york-v4/ui/dropdown-menu';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/registry/new-york-v4/ui/sidebar';
-import { Skeleton } from '@/registry/new-york-v4/ui/skeleton';
+import { description } from '@/components/demo/chart-area-demo';
+import useCreate from '@/hooks/use-create';
+import useGet from '@/hooks/use-get';
+import { parseData } from '@/hooks/use-gets';
+import { Button } from '@/registry/new-york-v4/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/registry/new-york-v4/ui/collapsible';
+import { Input } from '@/registry/new-york-v4/ui/input';
+import { Label } from '@/registry/new-york-v4/ui/label';
+import { Textarea } from '@/registry/new-york-v4/ui/textarea';
 import { ProjectType } from '@/schemas/project-list.schemas';
 import { useListProjectStore } from '@/store/project-list.store';
 
-import { Briefcase, ChevronsUpDown, Plus } from 'lucide-react';
-import { toast } from 'sonner';
+import { ChevronsUpDown } from 'lucide-react';
 
 export function ProjectSwitcher() {
     const router = useRouter();
@@ -31,52 +25,27 @@ export function ProjectSwitcher() {
     const { projects, selectedProject, setSelectedProject, setProjects } = useListProjectStore();
     const [isLoading, setIsLoading] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
+    const [isCreate, setIsCreate] = useState(false);
     const projectId = searchParams.get('projectId');
 
-    useEffect(() => {
-        setIsLoading(true);
-        if (!projectId) {
-            router.push('/dashboard');
-
-            return;
-        }
-
-        if (selectedProject?.id === projectId) {
-            setIsLoading(false);
-
-            return;
-        }
-
-        const fetchProjects = async () => {
-            const response = await GetAllProjectsAPI();
-            if (response.success) {
-                setProjects(response.data);
-                const project = response.data.find((p: ProjectType) => p.id === projectId);
-                if (project) {
-                    setSelectedProject(project);
-                    setIsLoading(false);
-                    toast.success('Success', {
-                        description: 'Project fetch success',
-                        duration: 2000
-                    });
-
-                    return;
-                } else {
-                    toast.error('Error', {
-                        description: 'This project was not found.',
-                        duration: 2000
-                    });
-                }
-            }
-            toast.error('Error', {
-                description: response.error?.message,
-                duration: 2000
-            });
-            router.push('/dashboard');
-        };
+    if (!projectId) {
+        router.push('/dashboard');
+    }
+    useGet('projects', projectId, setSelectedProject);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        handleCreateProject({
+            name: formData.get('name') as string,
+            description: formData.get('description') as string
+        });
+    };
 
-        fetchProjects();
-    }, []);
+    const handleCreateProject = async (data: { name: string; description: string }) => {
+        setIsLoading(true);
+        await useCreate('projects', data, projects, setProjects, 'project', null);
+    };
 
     const handleProjectClick = (project: ProjectType) => {
         if (project.id !== selectedProject?.id) {
@@ -85,113 +54,50 @@ export function ProjectSwitcher() {
         }
     };
 
-    const handleCreateProject = async (data: { name: string; description: string }) => {
-        setIsLoading(true);
-        const response = await CreateProjectAPI({
-            title: data.name,
-            description: data.description
-        });
-
-        if (response.success) {
-            setProjects([...projects, response.data]);
-            setSelectedProject(response.data);
-            setIsOpen(false);
-            router.push(`/chat/?projectId=${response.data.id}`);
-            toast.success('Success', {
-                description: 'Project created successfully',
-                duration: 2000
-            });
-        } else {
-            toast.error('Error', {
-                description: response.error?.message || 'Failed to create project',
-                duration: 2000
-            });
-        }
-        setIsLoading(false);
-    };
-
     return (
-        <SidebarMenu className='mt-2'>
-            <SidebarMenuItem>
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <SidebarMenuButton
-                            size='lg'
-                            className='data-[state=open]:bg-primary data-[state=open]:text-primary-foreground hover:bg-primary/90 transition-all duration-200'>
-                            {isLoading ? (
-                                <div className='flex w-full flex-row items-center gap-2'>
-                                    <div className='bg-primary hover:bg-primary/90 text-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg'>
-                                        <Briefcase className='size-4' />
-                                    </div>
-                                    <div className='flex-1 space-y-2'>
-                                        <Skeleton className='h-4 w-3/4' />
-                                        <Skeleton className='h-3 w-1/2' />
-                                    </div>
-                                    <Skeleton className='h-4 w-4' />
-                                </div>
-                            ) : (
-                                <>
-                                    <div className='bg-primary hover:bg-primary/90 text-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg'>
-                                        <Briefcase className='size-4' />
-                                    </div>
-                                    <div className='grid flex-1 text-left text-sm leading-tight'>
-                                        <span className='truncate font-medium'>{selectedProject?.title || ''}</span>
-                                        <span className='truncate text-xs'>{selectedProject?.description || ''}</span>
-                                    </div>
-                                    <ChevronsUpDown className='ml-auto' />
-                                </>
-                            )}
-                        </SidebarMenuButton>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                        className='w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg border-none shadow-lg outline-hidden'
-                        align='start'
-                        // side={isMobile ? 'bottom' : 'right'}
-                        sideOffset={4}>
-                        <DropdownMenuLabel className='text-muted-foreground text-xs'>Dự án</DropdownMenuLabel>
-                        {isLoading ? (
-                            Array(3)
-                                .fill(0)
-                                .map((_, i) => (
-                                    <div key={i} className='p-2'>
-                                        <Skeleton className='h-6 w-full' />
-                                    </div>
-                                ))
-                        ) : (
-                            <>
-                                {projects.map((project, index) => (
-                                    <DropdownMenuItem
-                                        className={`hover:bg-primary/90 gap-2 p-2 ${project.id === selectedProject?.id ? 'bg-primary/10' : ''}`}
-                                        key={project.id}
-                                        onClick={() => handleProjectClick(project)}>
-                                        {project.title}
-                                        <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
-                                    </DropdownMenuItem>
-                                ))}
-                                <DropdownMenuSeparator />
-                                <Dialog open={isOpen} onOpenChange={setIsOpen}>
-                                    <DialogTrigger asChild>
-                                        <div className='hover:bg-primary/50 flex cursor-pointer flex-row gap-2 rounded-sm p-2'>
-                                            <div className='bg-background flex size-6 items-center justify-center rounded-md border'>
-                                                <Plus className='size-4' />
-                                            </div>
-                                            <div className='font-medium'>Thêm dự án</div>
-                                        </div>
-                                    </DialogTrigger>
-                                    <ProjectDialogContent
-                                        title='Tạo dự án mới'
-                                        description='Nhập thông tin cho dự án mới của bạn'
-                                        onSubmit={handleCreateProject}
-                                        isOpen={isOpen}
-                                        onOpenChange={setIsOpen}
-                                        isLoading={isLoading}
-                                    />
-                                </Dialog>
-                            </>
-                        )}
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </SidebarMenuItem>
-        </SidebarMenu>
+        <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+            <div className='flex justify-between px-2 py-4'>
+                <h3>Select Project</h3>
+                <CollapsibleTrigger asChild>
+                    <button>
+                        <ChevronsUpDown />
+                    </button>
+                </CollapsibleTrigger>
+            </div>
+            <div className={`mb-4 cursor-pointer px-4 py-2 font-mono text-sm ${isOpen && 'hidden'}`}>
+                {selectedProject?.name}
+            </div>
+            <CollapsibleContent className='mb-4'>
+                {projects.map((item: ProjectType) => (
+                    <div
+                        key={item.id}
+                        onClick={() => handleProjectClick(item)}
+                        className='cursor-pointer px-4 py-2 font-mono text-sm'>
+                        {item.name}
+                    </div>
+                ))}
+            </CollapsibleContent>
+            <div className='rounded-lg border border-dashed text-gray-500'>
+                <div
+                    onClick={() => setIsCreate(!isCreate)}
+                    className={`w-full rounded-lg ${isCreate && 'border-b border-dashed'} cursor-pointer border-gray-500 p-2 text-center`}>
+                    New Project
+                </div>
+                {isCreate && (
+                    <form onSubmit={handleSubmit} className='flex flex-col gap-2 p-2'>
+                        <div className=''>
+                            <Label>Title</Label>
+                            <Input id='name' name='name' placeholder='nhập tên dự án' />
+                        </div>
+
+                        <div className=''>
+                            <Label>description</Label>
+                            <Textarea id='description' name='description' placeholder='nhập mô tả dự án' />
+                        </div>
+                        <Button>Create</Button>
+                    </form>
+                )}
+            </div>
+        </Collapsible>
     );
 }
diff --git a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar.tsx b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar.tsx
index 1843efc..0aafa67 100644
--- a/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar.tsx
+++ b/frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar.tsx
@@ -5,6 +5,7 @@ import { ReactNode, createContext, useContext, useState } from 'react';
 import { FileList } from './sidebar-document-right/file-list';
 import { FileUploader } from './sidebar-document-right/file-uploader';
 import { ChatList } from './sidebar-function-left/chat-list';
+import { ProjectSwitcher } from './sidebar-function-left/project-switcher';
 import {
     Briefcase,
     ChevronRight,
@@ -86,21 +87,25 @@ export function SidebarTrigger({ side, className }: { side: string; className: s
 
 export function SidebarLeft() {
     const { expandedLeft } = useSidebar();
+    const [select, setSelect] = useState('History Chat');
 
     return (
         <div className='flex h-full'>
             <nav className='flex h-full w-20 flex-col rounded-lg bg-transparent'>
-                <div className='flex w-full cursor-pointer items-center justify-between rounded-xl p-6 pb-6 transition-all duration-200'>
-                    <div className='flex size-8 items-center justify-center rounded-lg text-gray-600'>
-                        <Briefcase className='size-4' />
+                <div
+                    onClick={() => setSelect('Project Switcher')}
+                    className='flex w-full cursor-pointer items-center justify-between rounded-xl p-6 pb-6'>
+                    <div className='flex size-8 items-center justify-center rounded-lg text-gray-600 shadow-2xl'>
+                        <Briefcase className='size-5' />
                     </div>
                 </div>
                 <div className='flex flex-1 items-center justify-center'>
                     <ul>
                         {config_item.map((item) => (
                             <li
+                                onClick={() => setSelect(item.title)}
                                 key={item.title}
-                                className='group relative m-2 flex flex-col items-center gap-2 px-4 py-4 text-gray-600 hover:rounded-lg hover:bg-[#424242]'>
+                                className='group relative m-2 flex flex-col items-center gap-2 px-4 py-4 text-gray-600 hover:rounded-lg hover:bg-[#424242] hover:text-white'>
                                 <div className={`px-1 transition-all duration-200 group-hover:-translate-y-2`}>
                                     <item.icon />
                                 </div>
@@ -113,8 +118,14 @@ export function SidebarLeft() {
                 </div>
             </nav>
             <div className='flex h-full rounded-lg bg-white shadow-sm'>
-                <div className={`overflow-hidden transition-all ${expandedLeft ? 'ml-2 w-50' : 'm-0 w-0'}`}>
-                    <ChatList />
+                <div className={`overflow-hidden transition-all ${expandedLeft ? 'mx-2 w-50' : 'm-0 w-0'}`}>
+                    {select === 'History Chat' ? (
+                        <ChatList />
+                    ) : select === 'Project Switcher' ? (
+                        <ProjectSwitcher />
+                    ) : (
+                        ''
+                    )}
                 </div>
             </div>
         </div>
diff --git a/frontend/src/app/[locale]/globals.css b/frontend/src/app/[locale]/globals.css
index 7c69dab..41c763a 100644
--- a/frontend/src/app/[locale]/globals.css
+++ b/frontend/src/app/[locale]/globals.css
@@ -122,6 +122,10 @@
     }
 }
 
+@theme {
+    --shadow-primary: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
+    --shadow-choose: rgba(240, 46, 170, 0.2) 0px 3px 3px 0px;
+}
 @layer base {
     body {
         background-color: var(--background);
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
index f869149..51a1583 100644
--- a/frontend/src/components/header.tsx
+++ b/frontend/src/components/header.tsx
@@ -6,6 +6,7 @@ import { useSelectedLayoutSegment } from 'next/navigation';
 import { LanguageSwitcher } from '@/components/language-switcher';
 import { NavUser } from '@/components/nav-user';
 import { ThemeSwitcher } from '@/components/theme-switcher';
+import { useUser } from '@/context/user-context';
 import { cn } from '@/registry/new-york-v4/lib/utils';
 import { Button } from '@/registry/new-york-v4/ui/button';
 import {
@@ -17,8 +18,6 @@ import {
 import { Input } from '@/registry/new-york-v4/ui/input';
 import { Skeleton } from '@/registry/new-york-v4/ui/skeleton';
 
-// import { useUser } from '@/context/user-context';
-
 import { Menu, Search } from 'lucide-react';
 
 const DASHBOARD_LINKS = [
@@ -29,7 +28,7 @@ const DASHBOARD_LINKS = [
 
 export function Header() {
     const segment = useSelectedLayoutSegment();
-    // const { user } = useUser();
+    const { user } = useUser();
 
     const renderNavLinks = () => {
         return DASHBOARD_LINKS.map((link) => {
@@ -103,7 +102,7 @@ export function Header() {
             </div>
 
             {/* Right section */}
-            <div className='flex items-center gap-4 text-gray-600'>
+            <div className='mr-4 flex items-center gap-4 text-gray-600'>
                 {/* Desktop Search */}
                 <div className='relative hidden max-w-sm sm:block'>
                     <Search className='text-muted-foreground absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 transform' />
@@ -111,15 +110,17 @@ export function Header() {
                 </div>
                 <LanguageSwitcher />
                 <ThemeSwitcher />
-                {/* {user ? (
-                    <NavUser user={{
-                        name: user.name || user.username,
-                        email: user.email,
-                        avatar: user.profile_image_url
-                    }} />
+                {user ? (
+                    <NavUser
+                        user={{
+                            name: user.name || user.username,
+                            email: user.email,
+                            avatar: user.profile_image_url
+                        }}
+                    />
                 ) : (
-                    <Skeleton className="h-8 w-8 rounded-full" />
-                )} */}
+                    <Skeleton className='h-8 w-8 rounded-full' />
+                )}
             </div>
         </header>
     );
diff --git a/frontend/src/components/nav-user.tsx b/frontend/src/components/nav-user.tsx
index b0a91b6..bfc3800 100644
--- a/frontend/src/components/nav-user.tsx
+++ b/frontend/src/components/nav-user.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useUser } from '@/context/user-context';
 import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york-v4/ui/avatar';
 import {
     DropdownMenu,
@@ -10,8 +11,8 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger
 } from '@/registry/new-york-v4/ui/dropdown-menu';
+
 import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles } from 'lucide-react';
-import { useUser } from '@/context/user-context';
 
 export function NavUser({
     user
@@ -22,56 +23,56 @@ export function NavUser({
         avatar: string;
     };
 }) {
-    const { logout, } = useUser();
+    const { logout } = useUser();
 
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Avatar className="h-8 w-8 cursor-pointer">
+                <Avatar className='h-8 w-8 cursor-pointer'>
                     <AvatarImage src={user.avatar} alt={user.name} />
                     <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                 </Avatar>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-                <DropdownMenuLabel className="p-0 font-normal">
-                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                        <Avatar className="h-8 w-8">
+            <DropdownMenuContent align='end' className='w-56'>
+                <DropdownMenuLabel className='p-0 font-normal'>
+                    <div className='flex items-center gap-2 px-1 py-1.5 text-left text-sm'>
+                        <Avatar className='h-8 w-8'>
                             <AvatarImage src={user.avatar} alt={user.name} />
                             <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                         </Avatar>
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                            <span className="truncate font-medium">{user.name}</span>
-                            <span className="truncate text-xs">{user.email}</span>
+                        <div className='grid flex-1 text-left text-sm leading-tight'>
+                            <span className='truncate font-medium'>{user.name}</span>
+                            <span className='truncate text-xs'>{user.email}</span>
                         </div>
                     </div>
                 </DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
                     <DropdownMenuItem>
-                        <Sparkles className="mr-2 h-4 w-4" />
+                        <Sparkles className='mr-2 h-4 w-4' />
                         Upgrade to Pro
                     </DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
                     <DropdownMenuItem>
-                        <BadgeCheck className="mr-2 h-4 w-4" />
+                        <BadgeCheck className='mr-2 h-4 w-4' />
                         Account
                     </DropdownMenuItem>
                     <DropdownMenuItem>
-                        <CreditCard className="mr-2 h-4 w-4" />
+                        <CreditCard className='mr-2 h-4 w-4' />
                         Billing
                     </DropdownMenuItem>
                     <DropdownMenuItem>
-                        <Bell className="mr-2 h-4 w-4" />
+                        <Bell className='mr-2 h-4 w-4' />
                         Notifications
                     </DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
-                {/* <DropdownMenuItem onClick={logout}>
-                    <LogOut className="mr-2 h-4 w-4" />
+                <DropdownMenuItem onClick={logout}>
+                    <LogOut className='mr-2 h-4 w-4' />
                     Log out
-                </DropdownMenuItem> */}
+                </DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>
     );
diff --git a/frontend/src/hooks/use-create.ts b/frontend/src/hooks/use-create.ts
index 4f16f97..324c123 100644
--- a/frontend/src/hooks/use-create.ts
+++ b/frontend/src/hooks/use-create.ts
@@ -17,7 +17,6 @@ export default async function useCreate(
     }
 ) {
     const queryString = tranQueryToSting(query);
-    console.log(queryString);
     const response = await http.post(`/${path}${store === 'chat' ? `?${queryString}` : ''}`, data, config);
 
     const newData =
diff --git a/frontend/src/hooks/use-get.ts b/frontend/src/hooks/use-get.ts
index 9c46f0f..5d187a9 100644
--- a/frontend/src/hooks/use-get.ts
+++ b/frontend/src/hooks/use-get.ts
@@ -1,23 +1,27 @@
 import { useEffect, useState } from 'react';
 
+import { parseData } from '@/hooks/use-gets';
 import { http } from '@/lib/http';
+import { Select } from '@/registry/new-york-v4/ui/select';
+
+import { description } from './../registry/new-york-v4/charts/chart-line-linear';
 
 export default function useGet(
     path: string,
     id: any,
+    setSelectData: (value: any) => void,
     config = {
         withCredentials: true
     }
 ) {
-    const [data, setData] = useState(null);
     useEffect(() => {
         const fetch = async () => {
             const response = await http.get(`/${path}/${id}`, config);
-            console.log(response);
-            setData(response.data);
+            if (!id) {
+                setSelectData({});
+            }
+            setSelectData(response.data);
         };
         fetch();
     }, [path, id]);
-
-    return data;
 }
diff --git a/frontend/src/hooks/use-gets.ts b/frontend/src/hooks/use-gets.ts
index 98966d5..5ce3dc9 100644
--- a/frontend/src/hooks/use-gets.ts
+++ b/frontend/src/hooks/use-gets.ts
@@ -5,6 +5,7 @@ import { useListChatStore } from '@/store/chat-list.store';
 import { useListProjectStore } from '@/store/project-list.store';
 
 import useNotification from './use-notification';
+import { setDate } from 'date-fns';
 
 export default function useGets(
     path: string,
@@ -16,47 +17,26 @@ export default function useGets(
     const { projects, setProjects } = useListProjectStore();
     const { chats, setChats } = useListChatStore();
 
-    const parseData = (data: []) => {
-        const newData: Array<any> = [];
-
-        data.map((item: any) => {
-            if (store === 'project') {
-                const newProject = {
-                    id: item.uuid,
-                    name: item.name,
-                    description: item.description,
-                    createAt: ''
-                };
-                newData.push(newProject);
-            }
-            if (store === 'chat') {
-                const newChat = {
-                    id: item.uuid,
-                    title: item.title,
-                    favorite: false
-                };
-
-                newData.push(newChat);
-            }
-        });
-
-        return newData;
-    };
-
     useEffect(() => {
         const fetchList = async () => {
             const queryString = new URLSearchParams(query).toString(); //chuyen query thanh string
             const res = await http.get(`/${path}/?${queryString}`, config);
             if (store === 'project') {
+                if (!res.success) {
+                    setProjects([]);
+                }
                 if (projects.length === 0 && res.success) {
-                    const newProjects = parseData(res.data);
+                    const newProjects = parseData(store, res.data);
                     setProjects(newProjects);
                     useNotification('projects', res, 'fetch');
                 }
             }
             if (store === 'chat') {
+                if (!res.success) {
+                    setChats([]);
+                }
                 if (chats.length === 0 && res.success) {
-                    const newChats = parseData(res.data);
+                    const newChats = parseData(store, res.data);
                     setChats(newChats);
                     useNotification('chats', res, 'fetch');
                 }
@@ -66,3 +46,30 @@ export default function useGets(
         fetchList();
     }, [path, JSON.stringify(query), JSON.stringify(config)]);
 }
+
+export const parseData = (store: string, data: []) => {
+    const newData: Array<any> = [];
+
+    data.map((item: any) => {
+        if (store === 'project') {
+            const newProject = {
+                id: item.uuid,
+                name: item.name,
+                description: item.description,
+                createAt: ''
+            };
+            newData.push(newProject);
+        }
+        if (store === 'chat') {
+            const newChat = {
+                id: item.uuid,
+                title: item.title,
+                favorite: false
+            };
+
+            newData.push(newChat);
+        }
+    });
+
+    return newData;
+};