diff --git a/.husky/pre-commit b/.husky/pre-commit
index 8033d4c..603c844 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,3 +1,2 @@
 pnpm pre-commit
-pnpm typecheck
 git add .
diff --git a/lint-staged.config.js b/lint-staged.config.js
index 4c31120..722b709 100644
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -1,4 +1,4 @@
 /** @type {import('./lib/types').Configuration} */
 export default {
-  '*': ['pnpm format', 'pnpm lint', 'tsc-files --noEmit']
+  '*': ['pnpm format', 'pnpm lint', 'tsc-files --noEmit -p tsconfig.json --composite false']
 }
diff --git a/src/renderer/src/components/home/components/note-list.tsx b/src/renderer/src/components/home/components/note-list.tsx
index 718fc5e..acdd068 100644
--- a/src/renderer/src/components/home/components/note-list.tsx
+++ b/src/renderer/src/components/home/components/note-list.tsx
@@ -13,7 +13,7 @@ export function NoteList({ items }: NoteListProps): React.JSX.Element {
   const { pathname } = useLocation()
   const noteId = pathname.replace('/', '')
   return (
-    <ScrollArea className="h-screen">
+    <ScrollArea className="h-screen !overflow-y-auto">
       <div className="flex flex-col gap-2 p-4 pt-0">
         {items.map((item) => (
           <Link params={{ noteId: String(item.id) }} key={item.id} to="/$noteId">
@@ -52,6 +52,8 @@ export function NoteList({ items }: NoteListProps): React.JSX.Element {
           </Link>
         ))}
       </div>
+      {/* TODO - make this component animate that automatically decrease its height to h-8 when it is on view this will create a stretchy effect on list */}
+      <div className="h-96" />
     </ScrollArea>
   )
 }
diff --git a/src/renderer/src/components/home/index.tsx b/src/renderer/src/components/home/index.tsx
index 903232f..22f7833 100644
--- a/src/renderer/src/components/home/index.tsx
+++ b/src/renderer/src/components/home/index.tsx
@@ -3,7 +3,15 @@ import { Separator } from '../ui/separator'
 import { TooltipProvider } from '../ui/tooltip'
 import { NoteInterface } from '@renderer/types/notes'
 import { NoteList } from './components/note-list'
-import { Outlet } from '@tanstack/react-router'
+import { Outlet, useNavigate } from '@tanstack/react-router'
+import { Button } from '../ui/button'
+import { PlusIcon } from 'lucide-react'
+import { SimpleTooltip } from '../shared/simple-tooltip'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { allNoteKey } from '@renderer/constants/query-keys'
+import { mutationKeys } from '@renderer/constants/mutation-keys'
+import { toast } from '@renderer/hooks/use-toast'
+import { noteTitleDescription } from '@renderer/utils'
 
 interface NoteProps {
   readonly Notes: NoteInterface[]
@@ -11,7 +19,38 @@ interface NoteProps {
   readonly defaultCollapsed?: boolean
 }
 
+interface FormValues {
+  title: string
+  description: string
+}
+const defaultNoteValues = { title: 'Untitled', description: 'no description available' }
 export function Note({ Notes, defaultLayout = [12, 32, 48] }: NoteProps): React.JSX.Element {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  const { mutate } = useMutation({
+    mutationKey: [mutationKeys['create-note']],
+    mutationFn: (values: FormValues & { content: object | unknown[] }) =>
+      window.api.createNote(values),
+    async onSettled(data) {
+      await queryClient.cancelQueries({ queryKey: allNoteKey })
+      if (!data) throw Error('Returned Data is Empty')
+      queryClient.setQueryData<NoteInterface[]>(allNoteKey, (previousEntities) => {
+        // Ensure previousEntities is an array, defaulting to an empty array if it's undefined
+        const entities = previousEntities || []
+        const createdNote = data || {}
+        return [...entities, createdNote]
+      })
+      toast({ title: 'New Note Created 🎉' })
+      navigate({ to: `/${data.id}` })
+    },
+    onError(error) {
+      toast({
+        title: 'Failed to create note ❌ ',
+        description: error.message,
+        variant: 'destructive'
+      })
+    }
+  })
   return (
     <TooltipProvider delayDuration={0}>
       <ResizablePanelGroup
@@ -22,11 +61,25 @@ export function Note({ Notes, defaultLayout = [12, 32, 48] }: NoteProps): React.
         }}
       >
         <ResizablePanel defaultSize={defaultLayout[0]} minSize={30}>
-          <div className="flex items-center px-4 py-2">
+          <div className="flex items-center px-4 py-2 justify-between">
             <h1 className="text-xl font-bold">All Notes</h1>
+            <SimpleTooltip content="Create New Note">
+              <Button
+                onClick={() =>
+                  mutate({
+                    ...defaultNoteValues,
+                    content: noteTitleDescription(defaultNoteValues)
+                  })
+                }
+                variant={'ghost'}
+                size="icon"
+              >
+                <PlusIcon size={18} />
+              </Button>
+            </SimpleTooltip>
           </div>
           <Separator />
-          <div className="bg-background/95 p-4 backdrop-blur-sm supports-backdrop-filter:bg-background/60"></div>
+          <div className="bg-background/95 p-4 backdrop-blur-sm supports-backdrop-filter:bg-background/60" />
           <NoteList items={Notes} />
         </ResizablePanel>
         <ResizableHandle withHandle />
diff --git a/src/renderer/src/components/modals/create-note-modal.tsx b/src/renderer/src/components/modals/create-note-modal.tsx
index caafc2a..69b0cc6 100644
--- a/src/renderer/src/components/modals/create-note-modal.tsx
+++ b/src/renderer/src/components/modals/create-note-modal.tsx
@@ -32,7 +32,14 @@ interface FormValues {
   title: string
   description: string
 }
-
+/**
+ * TODO - remove this component once the create note method is improved in production
+ * @deprecated Create note modal is now deprecated for better UI we are going to do something like
+ * - user click on create new note
+ * - then a new Note will Immediately created with default configs like
+ *  - title --- untitled note
+ *  - description --- (empty)
+ */
 export function CreateNoteModal(): React.JSX.Element {
   const queryClient = useQueryClient()
   const form = useForm<FormValues>()
@@ -74,10 +81,8 @@ export function CreateNoteModal(): React.JSX.Element {
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Create new Note 📒</DialogTitle>
-
           <DialogDescription>Begin creating a brand new one.</DialogDescription>
         </DialogHeader>
-
         <div className="w-full max-w-md mx-auto p-4">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -87,36 +92,28 @@ export function CreateNoteModal(): React.JSX.Element {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Username</FormLabel>
-
                     <FormControl>
                       <Input placeholder="title" {...field} />
                     </FormControl>
-
                     <FormDescription>Title for the note.</FormDescription>
-
                     <FormMessage />
                   </FormItem>
                 )}
               />
-
               <FormField
                 control={form.control}
                 name="description"
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Description</FormLabel>
-
                     <FormControl>
                       <Textarea {...field} />
                     </FormControl>
-
                     <FormDescription>Description for the note.</FormDescription>
-
                     <FormMessage />
                   </FormItem>
                 )}
               />
-
               <Button type="submit" className="w-full">
                 Create
               </Button>
diff --git a/src/renderer/src/components/shared/create-note-button.tsx b/src/renderer/src/components/shared/create-note-button.tsx
index 0073c2d..42b0fe2 100644
--- a/src/renderer/src/components/shared/create-note-button.tsx
+++ b/src/renderer/src/components/shared/create-note-button.tsx
@@ -4,6 +4,10 @@ import { FilePenLineIcon } from 'lucide-react'
 import { modalStore } from '@renderer/store/modal-store'
 import { SimpleTooltip } from './simple-tooltip'
 
+/**
+ *
+ * @deprecated for more see `CreateNoteModal` component
+ */
 export function CreateNoteButton(): React.JSX.Element {
   const { openModal } = modalStore()
   return (
diff --git a/src/renderer/src/store/copy-widget-store.ts b/src/renderer/src/store/copy-widget-store.ts
index 836b9ca..06f5f2e 100644
--- a/src/renderer/src/store/copy-widget-store.ts
+++ b/src/renderer/src/store/copy-widget-store.ts
@@ -1,8 +1,5 @@
 import { create } from 'zustand'
 
-// const [popoverState, setPopoverState] = useState<PopoverStates>({ index: 0, open: false })
-// const [search, setSearch] = useState('')
-
 interface PopoverInterface {
   index: number
   isOpen: boolean
diff --git a/src/renderer/src/store/modal-store.ts b/src/renderer/src/store/modal-store.ts
index 561a81d..95b7c66 100644
--- a/src/renderer/src/store/modal-store.ts
+++ b/src/renderer/src/store/modal-store.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 
 // Define the keys for each modal (you can add more as needed)
-export const modalKeys = ['create-note-modal', 'update-note-modal'] as const
+export const modalKeys = ['create-note-modal'] as const
 
 // Define the type for modal keys
 type ModalKey = (typeof modalKeys)[number]