diff --git a/apps/platform/public/svg/dashboard/folder.svg b/apps/platform/public/svg/dashboard/folder.svg
new file mode 100644
index 00000000..80a51e43
--- /dev/null
+++ b/apps/platform/public/svg/dashboard/folder.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="100" cy="100" r="100" fill="#1F1F1F"/>
+<path d="M141.667 95.8333V120.833C141.667 137.5 137.5 141.667 120.833 141.667H79.1668C62.5002 141.667 58.3335 137.5 58.3335 120.833V79.1667C58.3335 62.5 62.5002 58.3333 79.1668 58.3333H85.4168C91.6668 58.3333 93.0418 60.1667 95.4168 63.3333L101.667 71.6667C103.25 73.75 104.167 75 108.333 75H120.833C137.5 75 141.667 79.1667 141.667 95.8333Z" fill="#71717A"/>
+</svg>
diff --git a/apps/platform/public/svg/dashboard/index.ts b/apps/platform/public/svg/dashboard/index.ts
index 8c0d73cc..9354166a 100644
--- a/apps/platform/public/svg/dashboard/index.ts
+++ b/apps/platform/public/svg/dashboard/index.ts
@@ -1,5 +1,6 @@
 import EnvironmentSVG from './environment.svg'
 import ConfigSVG from './config.svg'
 import SecretSVG from './secret.svg'
+import FolderSVG from './folder.svg'
 
-export { EnvironmentSVG, ConfigSVG, SecretSVG }
+export { EnvironmentSVG, ConfigSVG, SecretSVG, FolderSVG }
diff --git a/apps/platform/src/app/(main)/page.tsx b/apps/platform/src/app/(main)/page.tsx
index 58539509..33071a39 100644
--- a/apps/platform/src/app/(main)/page.tsx
+++ b/apps/platform/src/app/(main)/page.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { useRouter } from 'next/navigation'
 import { AddSVG } from '@public/svg/shared'
+import { FolderSVG } from '@public/svg/dashboard'
 import ProjectCard from '@/components/dashboard/projectCard'
 import {
   Sheet,
@@ -30,6 +31,7 @@ import { Projects } from '@/lib/api-functions/projects'
 
 export default function Index(): JSX.Element {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
+  const [isProjectEmpty, setIsProjectEmpty] = useState(true)
   const [projects, setProjects] = useState<ProjectWithoutKeys[] | []>([])
   const [newProjectData, setNewProjectData] = useState<NewProject>({
     name: '',
@@ -68,6 +70,7 @@ export default function Index(): JSX.Element {
       .then((data: ProjectWithoutKeys[] | [] | undefined) => {
         if (data) {
           setProjects(data)
+          setIsProjectEmpty(data.length === 0)
         }
       })
       .catch((error) => {
@@ -79,15 +82,20 @@ export default function Index(): JSX.Element {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
-        <h1 className="text-[1.75rem] font-semibold ">My Projects</h1>
+        {!isProjectEmpty && (
+          <h1 className="text-[1.75rem] font-semibold ">My Projects</h1>
+        )}
 
         <Dialog>
-          <DialogTrigger>
-            <Button>
-              {' '}
-              <AddSVG /> Create a new Project
-            </Button>
-          </DialogTrigger>
+          {!isProjectEmpty && (
+            <DialogTrigger>
+              <Button>
+                {' '}
+                <AddSVG /> Create a new Project
+              </Button>
+            </DialogTrigger>
+          )}
+
           <DialogContent>
             <DialogHeader>Create a new project</DialogHeader>
             <DialogDescription>
@@ -155,7 +163,7 @@ export default function Index(): JSX.Element {
         </Dialog>
       </div>
 
-      {projects.length !== 0 ? (
+      {!isProjectEmpty ? (
         <div className="grid h-[70vh] gap-6 overflow-y-auto scroll-smooth p-2 md:grid-cols-2 2xl:grid-cols-3">
           {projects.map((project: ProjectWithoutKeys) => {
             return (
@@ -173,8 +181,13 @@ export default function Index(): JSX.Element {
           })}
         </div>
       ) : (
-        <div className="mt-[10vh] flex justify-center">
-          <div>No projects yet? Get started by creating a new project.</div>
+        <div className="mt-[10vh] flex h-[40vh] flex-col items-center justify-center gap-y-4">
+          <FolderSVG width="150" />
+          <div className="text-4xl">Start your First Project</div>
+          <div>
+            Create a file and start setting up your environment and secret keys
+          </div>
+          <Button variant="secondary">Create project</Button>
         </div>
       )}