diff --git a/apps/ui/src/components/forms/createProject/select-repo-box.tsx b/apps/ui/src/components/forms/createProject/select-repo-box.tsx
index 3d66b3d..28a17ca 100644
--- a/apps/ui/src/components/forms/createProject/select-repo-box.tsx
+++ b/apps/ui/src/components/forms/createProject/select-repo-box.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { getRepositories } from '../../../api/services/integration.service';
+import Props from './props.type';
 import RepoSelectItem from './repo-select-item';
 
-const SelectRepoBox: React.FC = () => {
+const SelectRepoBox: React.FC = (props: Props) => {
 
     const [repos, setRepos] = useState<any[]>([]);
 
diff --git a/apps/ui/src/components/modals/project/create-project-modal.tsx b/apps/ui/src/components/modals/project/create-project-modal.tsx
index e3cfa1b..b13dd72 100644
--- a/apps/ui/src/components/modals/project/create-project-modal.tsx
+++ b/apps/ui/src/components/modals/project/create-project-modal.tsx
@@ -4,41 +4,74 @@ import SelectRepoStage from './stages/select-repo-stage';
 import SocialLinksStage from './stages/social-links-stage';
 
 const CreateProjectModal: React.FC = () => {
+
+    type RepositoryData = {
+        title: string,
+        description: string,
+        slug: string,
+        technologies: [
+            string
+        ],
+    }
+
     const [selectedStage, setSelectedStage] = React.useState<number>(0);
-    const [stage, setStage] = React.useState([<SelectRepoStage setStage={setSelectedStage} />, <ProjectDetailsStage setStage={setSelectedStage} />, <SocialLinksStage setStage={setSelectedStage} />])
+
+    /**
+     * Handle repository selection
+     */
+    const [repository, setRepository] = React.useState<RepositoryData | null>(null);
+    const handleSelectRepo = (selectedRepository: RepositoryData) => {
+        setRepository(selectedRepository);
+        setSelectedStage(selectedStage + 1);
+    };
+
+
+    const stages = [
+        {
+            title: "Submit Product",
+            description: "Let's change the world with your amazing project",
+            component: <SelectRepoStage onSelectRepo={handleSelectRepo} />
+        },
+        {
+            title: "Submit Product",
+            description: "Let's change the world with your amazing project",
+            component: <ProjectDetailsStage />
+        },
+        {
+            title: "Product / Links",
+            description: "Add all the places that link to your product",
+            component: <SocialLinksStage />
+        }
+    ];
+
+
     return (
         <div className="p-5 pl-8 pr-8 w-[550px] h-full bg-base-gradient rounded-md">
-            {selectedStage == 0 || selectedStage == 1 ? (
+            {(selectedStage === 0 || selectedStage === 1) && (
                 <div className="flex flex-col gap-1 mb-5">
                     <div className="text-xl font-semibold text-white">
-                        Submit Product
+                        {stages[selectedStage].title}
                     </div>
                     <div className="text-s font-regular text-info">
-                        Let's change the world with your amazing project
+                        {stages[selectedStage].description}
                     </div>
                 </div>
-            ) : (
-                <></>
             )}
 
-            {selectedStage == 2 ? (
+            {selectedStage === 2 && (
                 <div className="flex flex-col gap-1 mb-5">
                     <div className="text-xl font-semibold text-white">
-                        Product / Links
+                        {stages[selectedStage].title}
                     </div>
                     <div className="text-s font-regular text-info">
-                        Add all the places that link to your product
+                        {stages[selectedStage].description}
                     </div>
                 </div>
-            ) : (
-                <></>
             )}
 
-            <div>
-                {stage[selectedStage]}
-            </div>
+            <div>{stages[selectedStage].component}</div>
         </div>
-    )
-}
+    );
+};
 
 export default CreateProjectModal;
diff --git a/apps/ui/src/components/modals/project/stages/select-repo-stage.tsx b/apps/ui/src/components/modals/project/stages/select-repo-stage.tsx
index 928ed61..c84ca87 100644
--- a/apps/ui/src/components/modals/project/stages/select-repo-stage.tsx
+++ b/apps/ui/src/components/modals/project/stages/select-repo-stage.tsx
@@ -4,8 +4,18 @@ import { Button } from '../../../../packages/ui/components/buttons/Button';
 import ContentSearchInput from '../../../../packages/ui/components/forms/inputs/ContentSearchInput';
 import SelectRepoBox from '../../../forms/createProject/select-repo-box';
 
+type RepositoryData = {
+    title: string,
+    description: string,
+    slug: string,
+    technologies: [
+        string
+    ],
+}
+
 type Props = {
-    setStage: () => void
+    setStage: () => void;
+    handleSelectRepo: (selectedRepository: RepositoryData) => void;
 }
 
 const SelectRepoStage: React.FC = (props: Props) => {
@@ -14,7 +24,7 @@ const SelectRepoStage: React.FC = (props: Props) => {
             <ContentSearchInput
                 searchInputPlaceholder="Search Repo's..."
             />
-            <SelectRepoBox />
+            <SelectRepoBox onSelectRepo={props.handleSelectRepo} />
             <div className="w-full p-2 flex flex-row gap-2 items-center justify-center">
                 <Button variant="button" color="primary" size="base" onClick={() => props.setStage(1)}>
                     <div className="flex flex-row items-center gap-2">
@@ -29,4 +39,4 @@ const SelectRepoStage: React.FC = (props: Props) => {
     )
 }
 
-export default SelectRepoStage;
\ No newline at end of file
+export default SelectRepoStage;
diff --git a/apps/ui/src/components/navigation/index.tsx b/apps/ui/src/components/navigation/index.tsx
index 634236d..aa38dc0 100644
--- a/apps/ui/src/components/navigation/index.tsx
+++ b/apps/ui/src/components/navigation/index.tsx
@@ -7,6 +7,7 @@ import { Button } from '../../packages/ui/components/buttons/Button';
 import AnimatedDialog from '../../packages/ui/components/dialog/AnimatedDialog';
 import { SearchInput } from '../../packages/ui/components/forms/inputs/SearchInput';
 import AuthenticationModal from '../modals/authentication/authentication-modal';
+import CreateProjectModal from '../modals/project/create-project-modal';
 
 
 const Navigation: React.FC = () => {
@@ -77,12 +78,17 @@ const Navigation: React.FC = () => {
                             </nav>
                         </div>
                         <div className="flex flex-row items-center gap-2">
-                            <Button color="fun" size="base">
-                                <div className="flex flex-row gap-1 items-center">
-                                    <GiArrowCursor />
-                                    <span>Submit Project</span>
-                                </div>
-                            </Button>
+                            <AnimatedDialog
+                                dialogTrigger={
+                                    <Button color="fun" size="lg">
+                                        <div className="flex flex-row gap-1 items-center">
+                                            <GiArrowCursor />
+                                            <span>Submit Project</span>
+                                        </div>
+                                    </Button>
+                                }
+                                dialogContent={<CreateProjectModal />}
+                            />
                             {token ? (
                                 <DropdownMenu.Root>
                                     <DropdownMenu.Trigger asChild>
diff --git a/apps/ui/src/components/view/filters/filter-item.tsx b/apps/ui/src/components/view/filters/filter-item.tsx
index af0337b..6b9b611 100644
--- a/apps/ui/src/components/view/filters/filter-item.tsx
+++ b/apps/ui/src/components/view/filters/filter-item.tsx
@@ -1,8 +1,10 @@
-import * as React from 'react'
-import * as Checkbox from '@radix-ui/react-checkbox'
+import * as Checkbox from '@radix-ui/react-checkbox';
+import * as React from 'react';
+import { useState } from 'react';
 import { GoCheck } from 'react-icons/go';
 
 const FilterItem: React.FC = () => {
+    const [checked, setChecked] = useState(false);
     return (
         <div className="w-full pt-1 pb-1 flex flex-row items-center gap-2">
             <Checkbox.Root
@@ -13,7 +15,7 @@ const FilterItem: React.FC = () => {
                     <GoCheck />
                 </Checkbox.Indicator>
             </Checkbox.Root>
-            <span className="text-s font-medium">Boostrapped</span>
+            <span className="text-s font-medium">Bootstrapped</span>
         </div>
     )
 }
diff --git a/apps/ui/src/components/view/filters/filter-sidebar.tsx b/apps/ui/src/components/view/filters/filter-sidebar.tsx
index 5e8e6e2..dc4b4f7 100644
--- a/apps/ui/src/components/view/filters/filter-sidebar.tsx
+++ b/apps/ui/src/components/view/filters/filter-sidebar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from 'react';
 import FilterItem from './filter-item';
 
 const FilterSidebar: React.FC = () => {
@@ -8,28 +8,30 @@ const FilterSidebar: React.FC = () => {
                 Filters
             </div>
             <div className="flex flex-col gap-3">
-                <div className="flex flex-col gap-2">
-                <div className="text-m font-semibold pt-2 pb-2 uppercas">
-                    Project Type
+                <div className="flex flex-col gap-2 ml-2">
+                    <div className="text-base font-semibold pt-2 pb-2 uppercase ml-2">
+                        Project Type
+                    </div>
+                    <div className="flex flex-col gap-2 ml-4 text-sm">
+                        <FilterItem />
+                        <FilterItem />
+                        <FilterItem />
+                    </div>
                 </div>
-                <div className="flex flex-col gap-2">
-                    <FilterItem />
-                    <FilterItem />
-                    <FilterItem />
+                <div className="flex flex-col gap-2 ml-2">
+                    <div className="text-base font-semibold pt-2 pb-2 uppercase ml-2">
+                        Languages
+                    </div>
+                    <div className="flex flex-col gap-2 ml-4 text-sm">
+                        <FilterItem />
+                        <FilterItem />
+                        <FilterItem />
+                    </div>
                 </div>
             </div>
-            <div className="flex flex-col gap-2">
-                <div className="text-m font-semibold pt-2 pb-2 uppercas">
-                    Languages
-                </div>
-                <div className="flex flex-col gap-2">
-                    <FilterItem />
-                    <FilterItem />
-                    <FilterItem />
-                </div>
-            </div>
-            </div>
         </div>
+
+
     )
 }
 
diff --git a/apps/ui/src/packages/ui/components/forms/inputs/SearchInput.tsx b/apps/ui/src/packages/ui/components/forms/inputs/SearchInput.tsx
index 18c08aa..6bf297d 100644
--- a/apps/ui/src/packages/ui/components/forms/inputs/SearchInput.tsx
+++ b/apps/ui/src/packages/ui/components/forms/inputs/SearchInput.tsx
@@ -5,21 +5,26 @@ import { InputProps } from "./type";
 import { GoSearch } from "react-icons/go";
 
 export const SearchInput = React.forwardRef<HTMLInputElement, InputProps>(function SearchInput(
-  { isFullWidth = true, ...props },
-  ref
+    { isFullWidth = true, ...props },
+    ref
 ) {
-  return (
-    <div
-      {...props}
-      ref={ref}
-      className={classNames(
-        "hover:border-emphasis dark:focus:border-emphasis border-[primary-lighter] bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default block h-9 rounded-md px-3 py-5 text-sm leading-4 transition focus:border-neutral-300 outline-none disabled:cursor-not-allowed bg-primary-lighter flex flex-row items-center gap-2",
-        isFullWidth && "w-full",
-        props.className
-      )}
-    >
-      <GoSearch size={15} />
-      <span>{props.placeholder}</span>
-    </div>
-  );
+    return (
+        <div
+            {...props}
+            ref={ref}
+            className={classNames(
+                "hover:border-emphasis dark:focus:border-emphasis border-[primary-lighter] bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default block h-9 rounded-md px-3 py-5 text-sm leading-4 transition focus:border-neutral-300 outline-none disabled:cursor-not-allowed bg-primary-lighter flex flex-row items-center gap-2",
+                isFullWidth && "w-full",
+                props.className
+            )}
+        >
+            <GoSearch size={15} />
+            <input
+                type="text"
+                placeholder={props.placeholder}
+                className="bg-transparent border-none outline-none flex-grow"
+                disabled={props.disabled}
+            />
+        </div>
+    );
 });