diff --git a/.vscode/settings.json b/.vscode/settings.json
index 56f3e77..ec9b9b0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,7 @@
     "*.css": "tailwindcss"
   },
   "cSpell.words": [
+    "headlessui",
     "heroicons",
     "wailsjs"
   ]
diff --git a/frontend/components/project/Main.tsx b/frontend/components/project/Main.tsx
index 0986a7b..65ba38e 100644
--- a/frontend/components/project/Main.tsx
+++ b/frontend/components/project/Main.tsx
@@ -17,7 +17,7 @@ const MainProject = () => {
   const [isProjectListModal, setIsProjectListModal] = useState(false)
   const [canPopoverBeOpen, setCanPopoverBeOpen] = useState(true)
 
-  const [avalibleProjects, setAvalibleProjects] = useState<entities.Project[]>([])
+  const [availableProjects, setAvailableProjects] = useState<entities.Project[]>([])
   const { createNewProject, requestSelectProjectByName } = useProject()
   const { setSelectedMainPage } = useNavigation()
 
@@ -39,7 +39,7 @@ const MainProject = () => {
         setCanPopoverBeOpen(false)
         GetAllLocalProjects().then(response => {
           console.log(response)
-          setAvalibleProjects(response)
+          setAvailableProjects(response)
           setIsProjectListModal(true)
         })
       },
@@ -73,7 +73,7 @@ const MainProject = () => {
 
     {isNewProjectModalOpen ? <NewProjectModal onCreateNewProjectHandler={onCreateNewProjectHandler} /> : ''}
 
-    {isProjectListModal ? <ProjectListModal onSelectProjectHandler={onSelectProjectHandler} projects={avalibleProjects} /> : '' }
+    {isProjectListModal ? <ProjectListModal onSelectProjectHandler={onSelectProjectHandler} projects={availableProjects} /> : '' }
 
     <div className="py-20 px-6 sm:px-6 sm:py-32 lg:px-8">
       <div className="mx-auto max-w-2xl text-center">