diff --git a/packages/be-gateway/src/routes/project/index.ts b/packages/be-gateway/src/routes/project/index.ts
index 31eecbbf..e3e6f2db 100644
--- a/packages/be-gateway/src/routes/project/index.ts
+++ b/packages/be-gateway/src/routes/project/index.ts
@@ -271,11 +271,13 @@ router.post('/project', async (req: AuthRequest, res) => {
       console.log('done')
 
       delCache([CKEY.USER_PROJECT, userId])
-      console.log('delete cache done')
+
+      const retData: Project = { ...result, projectViewId: firstProjectView.id }
+      console.log('delete cache done', retData)
 
       res.json({
         status: 200,
-        data: result
+        data: retData
       })
     })
 
diff --git a/packages/ui-app/app/[orgID]/ProjectSidebar.tsx b/packages/ui-app/app/[orgID]/ProjectSidebar.tsx
index 4a2c2faf..58c6137a 100644
--- a/packages/ui-app/app/[orgID]/ProjectSidebar.tsx
+++ b/packages/ui-app/app/[orgID]/ProjectSidebar.tsx
@@ -7,17 +7,17 @@ import ProjectList from '@/features/Project/Nav/index'
 import {
   HiOutlineBriefcase,
   HiOutlineChartPie,
+  HiOutlineChevronLeft,
   HiOutlineServerStack,
-  HiOutlineCog6Tooth,
-  HiOutlineStar,
-  HiOutlineVideoCamera
+  HiOutlineVideoCamera,
 } from 'react-icons/hi2'
 import { Button, Scrollbar } from '@shared/ui'
 import { AiOutlinePlus } from 'react-icons/ai'
 import ProjectAddModal from '@/features/Project/Add/ProjectAddModal'
-import Favorites from '@/features/Favorites'
 import { useMemo, useState } from 'react'
 import { useMenuStore } from '@/store/menu'
+import OrgSection from 'packages/ui-app/layouts/OrgSection'
+import { getLocalCache } from '@shared/libs'
 
 function ViewAllBtn() {
   return (
@@ -44,32 +44,24 @@ function ProjectSidebarContainer({ orgID }: { orgID: string }) {
   const { setVisible: setMenuVisible } = useMenuStore()
   const pathname = usePathname()
   const { push } = useRouter()
-  const [open, setOpen] = useState(false)
 
   if (pathname.includes('/sign-in') || pathname.includes('/sign-up')) {
     return null
   }
 
   const menus = [
+    // {
+    //   title: 'Back',
+    //   href: `/organization`,
+    //   icon: HiArrowLeft,
+    //   active: false
+    // },
     {
       title: 'My works',
       href: `/${orgID}/my-works`,
       icon: HiOutlineBriefcase,
       active: pathname.includes('/my-works')
     },
-    {
-      title: 'Meeting',
-      href: `/${orgID}/meeting`,
-      icon: HiOutlineVideoCamera,
-      active: pathname.includes('/meeting')
-    },
-    {
-      title: 'Favorites',
-      // href: `/${orgID}/favorites`,
-      icon: HiOutlineStar,
-      active: pathname.includes('/favorites'),
-      children: Favorites
-    },
     {
       title: 'Projects',
       href: `/${orgID}/project`,
@@ -78,27 +70,45 @@ function ProjectSidebarContainer({ orgID }: { orgID: string }) {
       active: pathname.includes('/project/') || pathname.includes('/project'),
       children: ProjectList
     },
+    {
+      title: 'Meeting',
+      href: `/${orgID}/meeting`,
+      icon: HiOutlineVideoCamera,
+      active: pathname.includes('/meeting')
+    },
+    // {
+    //   title: 'Favorites',
+    //   // href: `/${orgID}/favorites`,
+    //   icon: HiOutlineStar,
+    //   active: pathname.includes('/favorites'),
+    //   children: Favorites
+    // },
     {
       title: 'Reports',
       href: `/${orgID}/report`,
       icon: HiOutlineChartPie,
       active: pathname.includes(`${orgID}/report`)
     },
-    {
-      title: 'Settings',
-      href: `/${orgID}/setting/people`,
-      icon: HiOutlineCog6Tooth,
-      active: pathname.includes(`${orgID}/setting`)
-    }
+    // {
+    //   title: 'Settings',
+    //   href: `/${orgID}/setting/people`,
+    //   icon: HiOutlineCog6Tooth,
+    //   active: pathname.includes(`${orgID}/setting`)
+    // }
   ]
 
   return (
     <>
-      <aside className={`root-sidebar`}>
-        <RootSidebar />
-        <nav className="secondary-sidebar">
-          <UserSection />
-          <Scrollbar style={{ height: `calc(100vh - 79px)` }}>
+      <aside className={`root-sidebar relative`}>
+        {/* <RootSidebar /> */}
+        <nav className={`secondary-sidebar`}>
+          {/* <div className='absolute -right-[12px] bottom-[71px] z-10'> */}
+          {/*   <div className='w-6 h-6 flex items-center justify-center rounded-full bg-gray-50 dark:bg-gray-900 border dark:border-gray-700 dark:text-gray-400'> */}
+          {/*     <HiOutlineChevronLeft /> */}
+          {/*   </div> */}
+          {/* </div> */}
+          <OrgSection />
+          <Scrollbar style={{ height: `calc(100vh - 141px)` }}>
             <section className="side-nav">
               {menus.map((menu, mindex) => {
                 const Icon = menu.icon
@@ -127,6 +137,8 @@ function ProjectSidebarContainer({ orgID }: { orgID: string }) {
               })}
             </section>
           </Scrollbar>
+
+          <UserSection />
         </nav>
       </aside>
     </>
diff --git a/packages/ui-app/app/[orgID]/layout.tsx b/packages/ui-app/app/[orgID]/layout.tsx
index d347a598..d7b0e8cb 100644
--- a/packages/ui-app/app/[orgID]/layout.tsx
+++ b/packages/ui-app/app/[orgID]/layout.tsx
@@ -27,7 +27,7 @@ export default function ProjectLayout({
       <ProjectSidebar />
       <main
         className="main-content w-full"
-        style={{ width: 'calc(100% - 308px)' }}>
+        style={{ width: 'calc(100% - 251px)' }}>
         <HamburgerMenu />
         {children}
       </main>
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/ProjectNav.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/ProjectNav.tsx
index ab462936..fcf8b3e4 100644
--- a/packages/ui-app/app/[orgID]/project/[projectId]/ProjectNav.tsx
+++ b/packages/ui-app/app/[orgID]/project/[projectId]/ProjectNav.tsx
@@ -110,12 +110,13 @@ export default function ProjectNav() {
     <div className="project-nav">
       <div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
         <h2 className="text-xl pb-2 sm:pb-0 dark:text-gray-200 font-bold px-4 pt-2 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Link
-              href={`${params.orgID}/project`}
-              className="hidden sm:inline-block p-2 border rounded-md bg-white text-sm text-gray-500 hover:bg-gray-50 dark:bg-slate-900 dark:border-gray-700 dark:hover:bg-slate-800">
-              <AiOutlineArrowLeft />
-            </Link>
+          <div className="flex items-center gap-2 mb-1">
+            {/* <Link */}
+            {/*   href={`${params.orgID}/project`} */}
+            {/*   className="hidden sm:inline-block p-2 border rounded-md bg-white text-sm text-gray-500 hover:bg-gray-50 dark:bg-slate-900 dark:border-gray-700 dark:hover:bg-slate-800"> */}
+            {/*   <AiOutlineArrowLeft /> */}
+            {/* </Link> */}
+
             {selectedProject?.icon ? (
               <img
                 alt={selectedProject.icon}
@@ -124,7 +125,7 @@ export default function ProjectNav() {
               />
             ) : null}
             {selectedProject?.name || (
-              <span className="text-transparent animate-pulse bg-gray-100 dark:bg-gray-700 rounded-md">
+              <span className="text-transparent animate-pulse h-7 bg-gray-100 dark:bg-gray-700 rounded-md">
                 Project
               </span>
             )}
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx
index e5f055d9..3e6520af 100644
--- a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx
+++ b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx
@@ -84,7 +84,7 @@ export default function BoardContainer() {
           return (
             <div
               className="board-container overflow-y-auto custom-scrollbar"
-              style={{ width: 'calc(100vw - 309px)' }}
+              style={{ width: 'calc(100vw - 269px)' }}
               {...provided.droppableProps}
               ref={provided.innerRef}>
               {groupByItems.map((group, groupIndex) => {
diff --git a/packages/ui-app/app/[orgID]/setting/SettingTab.tsx b/packages/ui-app/app/[orgID]/setting/SettingTab.tsx
index fae34fdb..a26abcd0 100644
--- a/packages/ui-app/app/[orgID]/setting/SettingTab.tsx
+++ b/packages/ui-app/app/[orgID]/setting/SettingTab.tsx
@@ -27,24 +27,24 @@ export default function SettingTabLayout() {
       active: pathname.includes('/setting/people'),
       enable: true
     },
+    // {
+    //   title: 'Projects',
+    //   name: 'projects',
+    //   href: '#',
+    //   icon: HiOutlineServerStack,
+    //   active: false,
+    //   enable: true
+    // },
+    // {
+    //   title: 'Apps',
+    //   name: 'apps',
+    //   href: '#',
+    //   icon: AiOutlineAppstoreAdd,
+    //   active: false,
+    //   enable: true
+    // },
     {
-      title: 'Projects',
-      name: 'projects',
-      href: '#',
-      icon: HiOutlineServerStack,
-      active: false,
-      enable: true
-    },
-    {
-      title: 'Apps',
-      name: 'apps',
-      href: '#',
-      icon: AiOutlineAppstoreAdd,
-      active: false,
-      enable: true
-    },
-    {
-      title: 'Export/import',
+      title: 'Export',
       name: 'export-import',
       href: '#',
       icon: AiOutlineCloudDownload,
diff --git a/packages/ui-app/app/[orgID]/setting/layout.tsx b/packages/ui-app/app/[orgID]/setting/layout.tsx
index 7a6d9671..c99851f8 100644
--- a/packages/ui-app/app/[orgID]/setting/layout.tsx
+++ b/packages/ui-app/app/[orgID]/setting/layout.tsx
@@ -5,7 +5,7 @@ export default function SettingLayout({ children }: { children: ReactNode }) {
   return (
     <div className="project-nav">
       <div className="bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-700">
-        <h2 className="text-xl font-bold px-4 py-2">Settings</h2>
+        <h2 className="text-xl font-bold px-4 py-2 pb-[4px]">Settings</h2>
 
         <SettingTabLayout />
       </div>
diff --git a/packages/ui-app/app/_components/EmojiInput/index.tsx b/packages/ui-app/app/_components/EmojiInput/index.tsx
index c68fdf0c..ad7f458c 100644
--- a/packages/ui-app/app/_components/EmojiInput/index.tsx
+++ b/packages/ui-app/app/_components/EmojiInput/index.tsx
@@ -102,6 +102,7 @@ export default function EmojiInput({
                 const emojiUrl = emoji.getImageUrl(EmojiStyle.TWITTER)
                 // const emojiNative = emoji.emoji
                 setSelected(emojiUrl)
+                setVisible(false)
                 onChange && onChange(emojiUrl)
               }}
             />
diff --git a/packages/ui-app/app/_components/StatusSelectMultiple.tsx b/packages/ui-app/app/_components/StatusSelectMultiple.tsx
index 2e057273..87309b0c 100644
--- a/packages/ui-app/app/_components/StatusSelectMultiple.tsx
+++ b/packages/ui-app/app/_components/StatusSelectMultiple.tsx
@@ -104,7 +104,7 @@ export default function StatusSelectMultiple({
         }}>
         <List.Button>
           {!selectedList || !selectedList.length ? <span className='text-transparent'>Option</span> : null}
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="flex flex-wrap items-center gap-1">
             {slicedList.map(item => {
               const stt = statuses.find(stt => stt.id === item.id)
               const isAllOption = item.id === 'ALL' ? bgOfAll : stt?.color
diff --git a/packages/ui-app/app/_features/Automation/AutomateMenu.tsx b/packages/ui-app/app/_features/Automation/AutomateMenu.tsx
index 21922a04..af364f05 100644
--- a/packages/ui-app/app/_features/Automation/AutomateMenu.tsx
+++ b/packages/ui-app/app/_features/Automation/AutomateMenu.tsx
@@ -40,7 +40,7 @@ export default function AutomateMenu() {
   const SelectedContent = asides.find(s => s.active)?.content
 
   return (
-    <div className="pt-8 w-[1200px] ml-8">
+    <div className="pt-8 w-[1024px] ml-8">
       <div className="org">
         <div className="aside-content">
           <aside className="aside-menu">
diff --git a/packages/ui-app/app/_features/MyWorks/MyWorkContainer.tsx b/packages/ui-app/app/_features/MyWorks/MyWorkContainer.tsx
index 01b4886b..437241fa 100644
--- a/packages/ui-app/app/_features/MyWorks/MyWorkContainer.tsx
+++ b/packages/ui-app/app/_features/MyWorks/MyWorkContainer.tsx
@@ -29,8 +29,8 @@ export default function MyworkContainer() {
         setProjectId
       }}>
       <div id="my-work">
-        <div className="py-4 sm:py-3 bg-white dark:bg-gray-900 border-b dark:border-gray-800">
-          <div className="sm:w-[1120px] mx-4 sm:mx-auto">
+        <div className="py-4 sm:py-[15px] bg-white dark:bg-gray-900 border-b dark:border-gray-800">
+          <div className="sm:w-[1120px] mx-4 px-4 sm:mx-auto">
             <h2 className="text-gray-600 dark:text-gray-300 font-bold text-xl">
               My works board
             </h2>
@@ -43,7 +43,7 @@ export default function MyworkContainer() {
 
         <div
           className="bg-indigo-50/50 dark:bg-[#182031] overflow-y-auto"
-          style={{ height: 'calc(100vh - 73px)' }}>
+          style={{ height: 'calc(100vh - 79px)' }}>
           <div className="sm:w-[1120px] sm:mx-auto pt-5 px-4 sm:pt-10 grid grid-cols-1 sm:grid-cols-4 gap-6">
             <div className="grid grid-cols-1 sm:grid-cols-2 col-span-3 sm:gap-6">
               <div>
diff --git a/packages/ui-app/app/_features/Project/List/ProjectAvailable.tsx b/packages/ui-app/app/_features/Project/List/ProjectAvailable.tsx
index fad7de07..ef5eb963 100644
--- a/packages/ui-app/app/_features/Project/List/ProjectAvailable.tsx
+++ b/packages/ui-app/app/_features/Project/List/ProjectAvailable.tsx
@@ -1,32 +1,63 @@
 import { projectGet } from '@/services/project'
 import { useProjectStore } from '@/store/project'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import ProjectItem from './ProjectItem'
 import { useParams } from 'next/navigation'
+import { motion } from 'framer-motion'
+
+
+function LoadingSkeleton({ enabled }: { enabled: boolean }) {
+  if (!enabled) return null
+  return <>{[1, 2, 3].map(item => {
+    return <motion.div
+      key={item}
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      className="">
+      <div className="project-item group relative">
+        <div className='w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-700 animate-pulse'></div>
+        <div className="overflow-hidden">
+          <h2 className="text-lg text-transparent bg-gray-100 dark:bg-gray-700 animate-pulse rounded-md h-[20px] w-[100px]" >No title</h2>
+          <p className="text-xs text-transparent bg-gray-100 dark:bg-gray-700 animate-pulse rounded-md mt-[9px] w-[70px]">
+            <span className="flex items-center gap-1">notitle</span>
+          </p>
+        </div>
+      </div>
+    </motion.div>
+
+  })}</>
+}
 
 export default function ProjectAvailable() {
   const { projects, addAllProject } = useProjectStore(state => state)
-  const {orgID} = useParams()
+  const { orgID } = useParams()
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     if (!projects.length) {
+      setLoading(true)
       projectGet({
-        orgId: orgID, 
+        orgId: orgID,
         isArchive: false
       }).then(result => {
+        setLoading(false)
         const { data, status } = result.data
         // const projects = data as Project[]
         if (status !== 200) return
 
         addAllProject(data)
+      }).catch(err => {
+        console.log(err)
+        setLoading(false)
       })
     }
   }, [JSON.stringify(projects)])
   return (
     <div>
-      <h2 className="text-lg mb-3 text-gray-500">Select one to go</h2>
+      <h2 className="text-lg mb-3 text-gray-500">Available projects</h2>
       <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
-        {projects.map(project => {
+        <LoadingSkeleton enabled={loading} />
+        {!loading && projects.map(project => {
           return <ProjectItem key={project.id} project={project} />
         })}
       </div>
diff --git a/packages/ui-app/app/_features/Project/List/index.tsx b/packages/ui-app/app/_features/Project/List/index.tsx
index 1cec0610..0caf76b9 100644
--- a/packages/ui-app/app/_features/Project/List/index.tsx
+++ b/packages/ui-app/app/_features/Project/List/index.tsx
@@ -15,7 +15,7 @@ import ProjectAvailable from './ProjectAvailable'
 export default function ProjectList() {
   return (
     <div className="bg-indigo-50/50 dark:bg-[#182031]">
-      <div className="bg-white py-3 border-b dark:bg-gray-900 dark:border-gray-700">
+      <div className="bg-white py-[15px] border-b dark:bg-gray-900 dark:border-gray-700">
         <div className="px-5 sm:w-[1120px] mx-auto">
           <h2 className="text-gray-600 dark:text-gray-300 font-bold text-xl">
             Your projects
diff --git a/packages/ui-app/app/_features/Project/Nav/ProjectNavItem.tsx b/packages/ui-app/app/_features/Project/Nav/ProjectNavItem.tsx
index 9ead9fae..b77f48e2 100644
--- a/packages/ui-app/app/_features/Project/Nav/ProjectNavItem.tsx
+++ b/packages/ui-app/app/_features/Project/Nav/ProjectNavItem.tsx
@@ -8,6 +8,7 @@ import Badge from '@/components/Badge'
 import Tooltip from 'packages/shared-ui/src/components/Tooltip'
 import { useProjectViewStore } from '@/store/projectView'
 import { useTaskStore } from '@/store/task'
+import { GoDot, GoDotFill } from 'react-icons/go'
 
 export default function ProjectNavItem({
   pinned = false,
@@ -73,15 +74,14 @@ export default function ProjectNavItem({
 
   return (
     <div
-      className={`${active ? 'active' : ''} nav-item group ${
-        visible ? 'opacity-100' : 'opacity-0'
-      } transition-all duration-300`}
+      className={`${active ? 'active' : ''} nav-item group ${visible ? 'opacity-100' : 'opacity-0'
+        } transition-all duration-300`}
       onClick={() => {
         onSelectItem(href)
       }}
       title={name}>
       <div className="left">
-        <HiChevronRight className="text-gray-400 shrink-0" />
+        <GoDot className="ml-0.5 text-gray-400 dark:text-gray-500 shrink-0" />
         <img className="w-5 h-5" src={icon || ''} />
         <span className="whitespace-nowrap truncate">{name}</span>
         {showBadges()}
diff --git a/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx b/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
index 901a74b2..80e878a1 100644
--- a/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
+++ b/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
@@ -10,6 +10,7 @@ import ProjectViewFilterByCalendar from '../ProjectViewFilter/CalendarFilter'
 import ProjectViewFilterByGoal from '../ProjectViewFilter/GoalFilter'
 import ProjectViewFilterByTeam from '../ProjectViewFilter/TeamFilter'
 import ProjectViewFilterByDashboard from '../ProjectViewFilter/DashboardFilter'
+import { Loading } from '@shared/ui'
 
 export default function ProjectViewModalForm({
   type,
@@ -48,11 +49,15 @@ export default function ProjectViewModalForm({
       })
       .finally(() => {
         hideModal()
+        setTimeout(() => {
+          setLoading(false)
+        }, 200)
       })
   }
 
   return (
     <div className="min-h-[500px]">
+      <Loading.Absolute enabled={loading} title='Creating view' className='rounded-md' />
       <ProjectViewFilterByBoard type={type} desc={desc} onAdd={onAdd} />
       <ProjectViewFilterByList type={type} desc={desc} onAdd={onAdd} />
       <ProjectViewFilterByCalendar type={type} desc={desc} onAdd={onAdd} />
diff --git a/packages/ui-app/app/_features/Report/ReportLayout.tsx b/packages/ui-app/app/_features/Report/ReportLayout.tsx
index 01a37104..82442f1d 100644
--- a/packages/ui-app/app/_features/Report/ReportLayout.tsx
+++ b/packages/ui-app/app/_features/Report/ReportLayout.tsx
@@ -6,7 +6,7 @@ import ReportTotalTask from './ReportTotalTask'
 export default function ReportLayout() {
   return (
     <div className="h-screen bg-indigo-50/50">
-      <header className="bg-white dark:bg-gray-900 border-b border-gray-800 py-3">
+      <header className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 py-[15px]">
         <div className="w-[900px] mx-auto">
           <h2 className="text-gray-600 dark:text-gray-300 font-bold text-xl">
             Report section
diff --git a/packages/ui-app/app/_features/TaskFilter/index.tsx b/packages/ui-app/app/_features/TaskFilter/index.tsx
index 6659b46c..43b59d25 100644
--- a/packages/ui-app/app/_features/TaskFilter/index.tsx
+++ b/packages/ui-app/app/_features/TaskFilter/index.tsx
@@ -166,6 +166,7 @@ export default function TaskFilter({
 
         {isShowStatusFilter ? (
           <StatusSelectMultiple
+            noName={true}
             maxDisplay={2}
             value={statusIds}
             onChange={val => {
diff --git a/packages/ui-app/app/global.css b/packages/ui-app/app/global.css
index 1101dedf..008ae62a 100644
--- a/packages/ui-app/app/global.css
+++ b/packages/ui-app/app/global.css
@@ -45,6 +45,10 @@
   }
 }
 
+[data-radix-popper-content-wrapper] div {
+  outline: none;
+}
+
 .custom-scrollbar::-webkit-scrollbar {
   width: 6px;
   height: 8px;
@@ -82,6 +86,47 @@
   @apply flex flex-col justify-between h-screen border-r dark:border-r-gray-800;
 }
 
+.compact-menu {
+  .secondary-sidebar{
+    width: 60px;
+  }
+
+  .org-section-popup {
+    @apply hidden;
+  }
+
+  .org-section-container {
+    @apply flex-col gap-2;
+  }
+
+  .org-section-info {
+    @apply hidden;
+  }
+
+  .secondary-sidebar .scroll-root {
+    height: calc(100vh - 150px) important;
+  }
+
+  .side-nav .nav-item .right,  
+  .side-nav .nav-item .left svg,
+  .side-nav .nav-item .left span,
+  .side-title span,
+  .nav .section
+  {
+    @apply hidden;
+  }
+
+  .main-content {
+    width: calc(100% - 61px) !important;
+  }
+
+  .main-content .board-container {
+    width: calc(100vw - 74px) !important;
+  }
+}
+
+
+
 .root-sidebar .main-nav-icon {
   @apply m-2 p-3 w-10 h-10 text-gray-400 rounded-lg cursor-pointer;
   @apply hover:text-gray-600 hover:bg-gray-100;
@@ -149,6 +194,7 @@
 
 .nav .nav-item.active {
   @apply bg-indigo-50 text-indigo-600;
+  /* @apply bg-zinc-100 text-gray-600; */
   @apply dark:bg-indigo-50/10 dark:text-indigo-400;
 }
 
diff --git a/packages/ui-app/app/layout.tsx b/packages/ui-app/app/layout.tsx
index b9c60088..1dd835b6 100644
--- a/packages/ui-app/app/layout.tsx
+++ b/packages/ui-app/app/layout.tsx
@@ -5,10 +5,9 @@ import './style/index.css'
 import { Inter } from 'next/font/google'
 import RootLayoutComp from '../layouts/RootLayout'
 import { GoalieProvider } from '@goalie/nextjs'
-import Head from 'next/head'
 
 import dynamic from 'next/dynamic'
-const inter = Inter({ subsets: ['latin'], display: 'swap' })
+const inter = Inter({ subsets: ['latin'] })
 
 const PushNotification = dynamic(
   () => import('./_components/PushNotification'),
diff --git a/packages/ui-app/app/organization/OrgList.tsx b/packages/ui-app/app/organization/OrgList.tsx
index e0b5f3bf..ee65c18b 100644
--- a/packages/ui-app/app/organization/OrgList.tsx
+++ b/packages/ui-app/app/organization/OrgList.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useTransition } from 'react'
 import { useRouter } from 'next/navigation'
 import { Organization } from '@prisma/client'
 import Link from 'next/link'
@@ -7,14 +7,52 @@ import { AiOutlinePlus } from 'react-icons/ai'
 import { orgGet } from '../../services/organization'
 import { dateFormat } from '@shared/libs'
 import { formatDistanceToNowStrict } from 'date-fns'
+import { setOrgInfo } from 'packages/ui-app/layouts/OrgSection'
+import { motion } from "framer-motion";
+
+function LoadingSkeleton({ enabled }: { enabled: boolean }) {
+  if (!enabled) return null
+  return <>{[1, 2, 3].map(item => {
+    return <motion.div
+      key={item}
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      className="box px-8 border dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900 flex h-[100px] gap-5 items-center cursor-pointer hover:border-indigo-300 text-indigo-800 dark:text-indigo-400">
+      <div
+        className="animate-pulse w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded-md"
+      />
+      <div className='flex flex-col gap-1 text-zinc-700 dark:text-zinc-400'>
+        <h2 className='font-medium bg-gray-100 h-[15px] w-[100px] dark:bg-gray-700 rounded-md animate-pulse text-transparent'>No title</h2>
+        <small className='text-xs h-[10px] w-[70px] animate-pulse text-transparent bg-gray-100 dark:bg-gray-700 rounded-md'>No title</small>
+      </div>
+    </motion.div>
+
+  })}</>
+}
+
+function CreateOrgBtn() {
+  return <Link href={`/organization/create`}>
+    <div className="box border dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900 flex h-[100px] gap-3 items-center justify-center cursor-pointer hover:border-indigo-300 text-indigo-800 dark:text-indigo-400">
+      <AiOutlinePlus className="w-5 h-5 -ml-4" />
+      <h2>Create organization</h2>
+    </div>
+  </Link>
+}
 
 export default function OrgList() {
   // const { push } = useRouter()
   const [orgs, setOrgs] = useState<Organization[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const clearLoading = () => setTimeout(() => {
+    setLoading(false)
+  }, 200)
 
   useEffect(() => {
+    setLoading(true)
     orgGet().then(res => {
       const { data, status } = res.data
+      clearLoading()
       if (status !== 200) {
         return
       }
@@ -26,6 +64,9 @@ export default function OrgList() {
       }
 
       setOrgs(data)
+    }).catch(err => {
+      console.log(err)
+      clearLoading()
     })
   }, [])
 
@@ -40,27 +81,33 @@ export default function OrgList() {
         </p>
 
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6">
-          <Link href={`/organization/create`}>
-            <div className="box border dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900 flex h-[100px] gap-3 items-center justify-center cursor-pointer hover:border-indigo-300 text-indigo-800 dark:text-indigo-400">
-              <AiOutlinePlus className="w-5 h-5 -ml-4" />
-              <h2>Create organization</h2>
-            </div>
-          </Link>
-          {orgs.map(org => {
+          <CreateOrgBtn />
+
+          <LoadingSkeleton enabled={loading} />
+
+          {!loading && orgs.map(org => {
             const createdAt = org.createdAt ? formatDistanceToNowStrict(new Date(org.createdAt), { addSuffix: true }) : null
             return (
-              <Link key={org.id} href={`/${org.id}/my-works`}>
-                <div className="box px-8 border dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900 flex h-[100px] gap-5 items-center cursor-pointer hover:border-indigo-300 text-indigo-800 dark:text-indigo-400">
+              <Link onClick={() => {
+                setOrgInfo({
+                  name: org.name,
+                  cover: org.cover || ''
+                })
+              }} key={org.id} href={`/${org.id}/my-works`}>
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  whileInView={{ opacity: 1 }}
+                  className="box px-8 border dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900 flex h-[100px] gap-5 items-center cursor-pointer hover:border-indigo-300 text-indigo-800 dark:text-indigo-400">
                   <img
                     className="w-10 h-10 rounded-md"
                     alt='Organization cover'
                     src={org.cover || ''}
                   />
-                  <div className='text-zinc-700 dark:text-zinc-400'>
+                  <div className='flex flex-col text-zinc-700 dark:text-zinc-400'>
                     <h2 className='font-medium'>{org.name}</h2>
                     <small className='text-xs text-zinc-400 dark:text-zinc-600'>{createdAt}</small>
                   </div>
-                </div>
+                </motion.div>
               </Link>
             )
           })}
diff --git a/packages/ui-app/app/organization/create/CreateOrganization.tsx b/packages/ui-app/app/organization/create/CreateOrganization.tsx
index ac3e0775..0692acf6 100644
--- a/packages/ui-app/app/organization/create/CreateOrganization.tsx
+++ b/packages/ui-app/app/organization/create/CreateOrganization.tsx
@@ -25,6 +25,11 @@ export default function CreateOrganization() {
         return
       }
 
+      if (values.name.length > 17) {
+        messageError('Title must less than or equal 17 characters')
+        return
+      }
+
       setLoading(true)
 
       orgCreate(values).then(res => {
diff --git a/packages/ui-app/layouts/OrgSection.tsx b/packages/ui-app/layouts/OrgSection.tsx
new file mode 100644
index 00000000..f40b3ca8
--- /dev/null
+++ b/packages/ui-app/layouts/OrgSection.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { useDebounce } from "@/hooks/useDebounce"
+import { orgGetById } from "@/services/organization"
+import { useOrgMemberStore } from "@/store/orgMember"
+import { Organization } from "@prisma/client"
+import { getLocalCache, setLocalCache } from "@shared/libs"
+import { Loading, Popover, Tooltip } from "@shared/ui"
+import Link from "next/link"
+import { useParams } from "next/navigation"
+import { useState } from "react"
+import { AiOutlineCloudDownload } from "react-icons/ai"
+import { HiArrowLeft, HiOutlineBuildingOffice, HiOutlineChevronDown, HiOutlineCog6Tooth, HiOutlineInformationCircle, HiOutlineUserPlus } from "react-icons/hi2"
+
+export const setOrgInfo = ({ name, cover }: { name: string, cover: string }) => {
+  name && setLocalCache('ORG_NAME', name)
+  cover && setLocalCache('ORG_COVER', cover)
+}
+
+const getOrgInfo = () => {
+  const name = getLocalCache('ORG_NAME') || ''
+  const cover = getLocalCache('ORG_COVER') || ''
+
+  return { name, cover }
+}
+
+function OrgInfo({ id }: { id: string }) {
+  const { name, cover } = getOrgInfo()
+  const { orgMembers } = useOrgMemberStore()
+  const [org, setOrg] = useState({ cover, name })
+
+  console.log('org', org)
+  const len = orgMembers.length
+
+  useDebounce(() => {
+    orgGetById(id).then(res => {
+      const { data } = res.data
+      const { name, cover } = data as Organization
+
+      setOrgInfo({
+        name,
+        cover: cover || ''
+      })
+
+      setOrg({
+        name,
+        cover: cover || ''
+      })
+    })
+  }, [id])
+
+  return <div className="flex items-center gap-2">
+    <div className="w-9 h-9 relative p-1 rounded-md bg-zinc-100 dark:bg-gray-800 dark:border-gray-700">
+      {/* <img className="w-full h-full" src="/logo132x132.svg" alt="Cover organization" /> */}
+      {/* {org.cover ? */}
+      {/*   <img className="w-4 h-4 absolute border -bottom-[1px] -right-[1px] z-10 p-0.5 bg-zinc-100 rounded" src={org.cover} alt="Cover organization" /> : <Loading.Absolute className="rounded-md" title="" />} */}
+
+      {org.cover ?
+        <img className="w-full h-full p-1 rounded" src={org.cover} alt="Cover organization" /> : <Loading.Absolute className="rounded-md" title="" />}
+    </div>
+    <div className="flex flex-col org-section-info">
+      <span className="text-gray-700 dark:text-gray-400 text-sm truncate">{org.name ? org.name : <span className="h-2 bg-slate-200 dark:bg-slate-700 rounded animate-pulse text-transparent">No title</span>}</span>
+      <span className="text-[11px] text-gray-400 dark:text-gray-500">There {len > 2 ? "are" : 'is'} {len} member{len > 1 ? 's' : ''}</span>
+    </div>
+  </div>
+}
+
+function OrgPopMenu({ id }: { id: string }) {
+
+  const menus = [
+    {
+      icon: HiOutlineBuildingOffice,
+      link: `/organization`,
+      title: 'My organizations'
+    },
+    {
+      icon: HiOutlineUserPlus,
+      link: `/${id}/setting/people`,
+      title: 'Members'
+    },
+    {
+      icon: AiOutlineCloudDownload,
+      link: `/${id}/setting/export-import`,
+      title: 'Export'
+    },
+    {
+      icon: HiOutlineInformationCircle,
+      link: `/${id}/setting/about`,
+      title: 'About'
+    }
+  ]
+
+  return <div className="org-section-popup">
+    <Popover
+      triggerBy={<div className="w-7 h-7 rounded-md p-1 group cursor-pointer  dark:border-gray-700 hover:bg-zinc-100 dark:hover:bg-gray-800 flex items-center justify-center">
+        <HiOutlineChevronDown className="text-gray-400 group-hover:text-gray-500" />
+      </div>}
+      content={<div className="border rounded-md bg-white dark:bg-gray-900 dark:border-gray-700 shadow-sm py-1.5 w-[150px] mt-1">
+        {menus.map((menu, midx) => {
+          const Icon = menu.icon
+          return <Link key={midx} href={menu.link} className="flex items-center gap-2 py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-800">
+            <Icon className="text-gray-500 dark:text-gray-400 w-4 h-4" />
+            <span className="text-xs text-gray-700 dark:text-gray-500">{menu.title}</span>
+          </Link>
+        })}
+      </div>}
+    />
+  </div>
+}
+
+export default function OrgSection() {
+  const { orgID } = useParams()
+
+  return <section className="nav-org-section border-b dark:border-gray-800 px-3 pt-[20px] pb-[21px]">
+    <div className="org-section-container flex items-center justify-between">
+      <OrgInfo id={orgID} />
+      <OrgPopMenu id={orgID} />
+    </div>
+  </section>
+}
diff --git a/packages/ui-app/layouts/RootLayout.tsx b/packages/ui-app/layouts/RootLayout.tsx
index f4f0e57e..213fb91a 100644
--- a/packages/ui-app/layouts/RootLayout.tsx
+++ b/packages/ui-app/layouts/RootLayout.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { getLocalCache } from '@shared/libs'
 import { ThemeProvider } from 'next-themes'
 import { pdfjs } from 'react-pdf'
 
@@ -13,9 +14,12 @@ export default function RootLayoutComp({
 }: {
   children: React.ReactNode
 }) {
+  // const compactMode = getLocalCache('COMPACT_MENU') ? 'compact-menu' : ''
+  const compactMode = ''
+
   return (
     <ThemeProvider attribute="class" defaultTheme="system">
-      <div className="root-container">{children}</div>
+      <div className={`root-container ${compactMode}`}>{children}</div>
     </ThemeProvider>
   )
 }
diff --git a/packages/ui-app/layouts/ThemeSelection.tsx b/packages/ui-app/layouts/ThemeSelection.tsx
index 7f001c53..04799afe 100644
--- a/packages/ui-app/layouts/ThemeSelection.tsx
+++ b/packages/ui-app/layouts/ThemeSelection.tsx
@@ -3,19 +3,35 @@ import { useTheme } from 'next-themes'
 
 export default function ThemeSelection() {
   const { setTheme, theme } = useTheme()
+  const isDarkMode = theme === 'dark' ? true : false
+  const isLightMode = !isDarkMode
   return (
-    <section className="">
-      {theme === 'dark' ? (
+    <section className="cursor-pointer">
+
+      <div className='rounded-full flex items-center bg-gray-100 dark:bg-gray-700 dark:border-gray-700'>
         <HiOutlineSun
-          className="main-nav-icon"
+          className={`main-nav-icon w-7 h-5 py-0.5 rounded-full ${isLightMode ? 'bg-indigo-400 text-white' : ''}`}
           onClick={() => setTheme('light')}
         />
-      ) : (
+
         <HiOutlineMoon
-          className="main-nav-icon"
+          className={`main-nav-icon w-7 h-5 p-1 rounded-full ${isDarkMode ? 'bg-indigo-600' : ''}`}
           onClick={() => setTheme('dark')}
         />
-      )}
+
+      </div>
+
+      {/* {theme === 'dark' ? ( */}
+      {/*   <HiOutlineSun */}
+      {/*     className="main-nav-icon" */}
+      {/*     onClick={() => setTheme('light')} */}
+      {/*   /> */}
+      {/* ) : ( */}
+      {/*   <HiOutlineMoon */}
+      {/*     className="main-nav-icon" */}
+      {/*     onClick={() => setTheme('dark')} */}
+      {/*   /> */}
+      {/* )} */}
     </section>
   )
 }
diff --git a/packages/ui-app/layouts/UserSection.tsx b/packages/ui-app/layouts/UserSection.tsx
index 80ee7e6f..6fde824f 100644
--- a/packages/ui-app/layouts/UserSection.tsx
+++ b/packages/ui-app/layouts/UserSection.tsx
@@ -1,14 +1,31 @@
 import { useUser } from '@goalie/nextjs'
-import { Avatar } from '@shared/ui'
+import { Avatar, Popover } from '@shared/ui'
 import ThemeSelection from './ThemeSelection'
-import { HiOutlineCog, HiOutlineCog6Tooth } from 'react-icons/hi2'
+import { HiOutlineChevronUp, HiOutlineCog, HiOutlineCog6Tooth, HiOutlineUser, HiOutlineUserPlus } from 'react-icons/hi2'
 import Link from 'next/link'
+import { IoMdLogOut } from 'react-icons/io'
+import { TbUserCircle } from 'react-icons/tb'
+import { HiOutlineColorSwatch, HiOutlineDotsVertical } from 'react-icons/hi'
+import { AiOutlineCloudDownload } from 'react-icons/ai'
 
 export default function UserSection() {
   const { user } = useUser()
 
+  const menus = [
+    {
+      icon: TbUserCircle,
+      link: `/profile/${user?.id}`,
+      title: 'Update profile'
+    },
+    {
+      icon: IoMdLogOut,
+      link: `/sign-out`,
+      title: 'Log out'
+    }
+  ]
+
   return (
-    <section className="flex gap-2 items-center justify-between py-[21px] px-3 border-b dark:border-b-gray-800">
+    <section className="flex gap-2 items-center justify-between py-3 px-3 border-t dark:border-t-gray-800">
       <div className="flex gap-2 items-center">
         <Avatar src={user?.photo || ''} name={user?.name || ''} />
         <div className="flex flex-col text-sm">
@@ -20,9 +37,53 @@ export default function UserSection() {
       </div>
 
       <div>
-        <Link href={`/profile/${user?.id}`}>
-          <HiOutlineCog6Tooth className="w-6 h-6 p-0.5 border border-transparent bg-transparent dark:hover:bg-gray-800 dark:hover:border-gray-700 hover:bg-gray-50 hover:border-gray-100 cursor-pointer rounded-md text-gray-500" />
-        </Link>
+        {/* <Link href={`/profile/${user?.id}`}> */}
+        <Popover
+          triggerBy={<div>
+            <HiOutlineDotsVertical className="w-6 h-6 p-0.5 border border-transparent bg-transparent dark:hover:bg-gray-800 dark:hover:border-gray-700 hover:bg-gray-50 hover:border-gray-100 cursor-pointer rounded-md text-gray-500" />
+          </div>}
+          content={<div className="border rounded-md bg-white dark:bg-gray-900 dark:border-gray-700 shadow-sm py-1.5 w-[200px] mb-1">
+            <div className="flex items-center justify-between gap-2 py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-800">
+              <div className='flex items-center gap-2'>
+                <HiOutlineColorSwatch className="text-gray-500 dark:text-gray-400 w-4 h-4" />
+                <span className="text-xs text-gray-700 dark:text-gray-500">Appearance</span>
+              </div>
+              <ThemeSelection />
+            </div>
+            {menus.map((menu, midx) => {
+              const Icon = menu.icon
+              return <Link key={midx} href={menu.link} className="flex items-center gap-2 py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-800">
+                <Icon className="text-gray-500 dark:text-gray-400 w-4 h-4" />
+                <span className="text-xs text-gray-700 dark:text-gray-500">{menu.title}</span>
+              </Link>
+            })}
+          </div>}
+        />
+
+        {/* <Popover triggerBy={<div> */}
+        {/*   <HiOutlineDotsVertical className="w-6 h-6 p-0.5 border border-transparent bg-transparent dark:hover:bg-gray-800 dark:hover:border-gray-700 hover:bg-gray-50 hover:border-gray-100 cursor-pointer rounded-md text-gray-500" /> */}
+        {/* </div> */}
+        {/* } */}
+        {/*   content={ */}
+        {/*     <div className='border rounded-md bg-white shadow-sm py-1.5 w-[150px]'> */}
+        {/*       <div className='flex items-center gap-2'> */}
+        {/*         <ThemeSelection /> */}
+        {/*         <span className='text-sm'>Theme</span> */}
+        {/*       </div> */}
+        {/**/}
+        {/*       <Link className='flex items-center gap-2' href={`/profile/${user?.id}`}> */}
+        {/*         <TbUserCircle /> */}
+        {/*         <span className='text-sm'>Update profile</span> */}
+        {/*       </Link> */}
+        {/**/}
+        {/*       <Link className='flex items-center gap-2' href={`/sign-out`}> */}
+        {/*         <IoMdLogOut /> */}
+        {/*         <span className='text-sm'>Log out</span> */}
+        {/*       </Link> */}
+        {/*     </div> */}
+        {/*   } */}
+        {/* /> */}
+        {/* </Link> */}
       </div>
     </section>
   )
diff --git a/packages/ui-app/store/project.ts b/packages/ui-app/store/project.ts
index ce645966..641b6fb7 100644
--- a/packages/ui-app/store/project.ts
+++ b/packages/ui-app/store/project.ts
@@ -74,6 +74,7 @@ export const useProjectStore = create<ProjectState>(set => ({
   addProject: (data: Project) =>
     set(
       produce((state: ProjectState) => {
+        console.log('new project added', data)
         state.projects.push(data)
       })
     ),