diff --git a/apps/platform/src/app/(main)/page.tsx b/apps/platform/src/app/(main)/page.tsx
index 58539509..e4ab3ac8 100644
--- a/apps/platform/src/app/(main)/page.tsx
+++ b/apps/platform/src/app/(main)/page.tsx
@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { useRouter } from 'next/navigation'
-import { AddSVG } from '@public/svg/shared'
+import Image from 'next/image'
 import ProjectCard from '@/components/dashboard/projectCard'
 import {
   Sheet,
@@ -27,6 +27,7 @@ import {
   DialogTrigger
 } from '@/components/ui/dialog'
 import { Projects } from '@/lib/api-functions/projects'
+import fileIcon from '../../assets/Group 12.png'
 
 export default function Index(): JSX.Element {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
@@ -78,83 +79,6 @@ 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>
-
-        <Dialog>
-          <DialogTrigger>
-            <Button>
-              {' '}
-              <AddSVG /> Create a new Project
-            </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>Create a new project</DialogHeader>
-            <DialogDescription>
-              Fill in the details to create a new project
-            </DialogDescription>
-            <div className="flex flex-col gap-y-8">
-              <div className="flex w-full flex-col gap-y-4">
-                <div className="flex flex-col items-start gap-4">
-                  <Label className="text-right" htmlFor="name">
-                    Name
-                  </Label>
-                  <Input
-                    className="col-span-3"
-                    id="name"
-                    onChange={(e) => {
-                      setNewProjectData((prev) => ({
-                        ...prev,
-                        name: e.target.value
-                      }))
-                    }}
-                    placeholder="Enter the name"
-                  />
-                </div>
-                <div className="flex flex-col items-start gap-4">
-                  <Label className="text-right" htmlFor="name">
-                    Description
-                  </Label>
-                  <Input
-                    className="col-span-3"
-                    id="name"
-                    onChange={(e) => {
-                      setNewProjectData((prev) => ({
-                        ...prev,
-                        description: e.target.value
-                      }))
-                    }}
-                    placeholder="Enter the name"
-                  />
-                </div>
-                {/* {isNameEmpty ? (
-                  <span className="ml-[3.5rem] mt-1 text-red-500">
-                    Name cannot be empty
-                  </span>
-                ) : null} */}
-              </div>
-            </div>
-            <div className="flex w-full justify-end">
-              <Button
-                onClick={() => {
-                  Projects.createProject(newProjectData, currentWorkspace.id)
-                    .then(() => {
-                      toast.success('New project added successfully')
-                      router.refresh()
-                    })
-                    .catch(() => {
-                      toast.error('Failed to add new project')
-                    })
-                }}
-                variant="secondary"
-              >
-                Add project
-              </Button>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
-
       {projects.length !== 0 ? (
         <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) => {
@@ -173,8 +97,92 @@ 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="border-2px mt-[10vh] flex justify-center">
+          <div className="flex flex-col items-center gap-3 text-center">
+            <Image alt="" height={100} src={fileIcon} width={100} />
+            <h1 className="text-[1.4rem] font-normal">
+              Start your First Project
+            </h1>
+            <p className="font-medium">
+              Create a file and start setting up your environment and secret
+              keys
+            </p>
+            <Dialog>
+              <DialogTrigger>
+                <Button className="border-2px bg-white text-black hover:text-white">
+                  {' '}
+                  Create project
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>Create a new project</DialogHeader>
+                <DialogDescription>
+                  Fill in the details to create a new project
+                </DialogDescription>
+                <div className="flex flex-col gap-y-8">
+                  <div className="flex w-full flex-col gap-y-4">
+                    <div className="flex flex-col items-start gap-4">
+                      <Label className="text-right" htmlFor="name">
+                        Name
+                      </Label>
+                      <Input
+                        className="col-span-3"
+                        id="name"
+                        onChange={(e) => {
+                          setNewProjectData((prev) => ({
+                            ...prev,
+                            name: e.target.value
+                          }))
+                        }}
+                        placeholder="Enter the name"
+                      />
+                    </div>
+                    <div className="flex flex-col items-start gap-4">
+                      <Label className="text-right" htmlFor="name">
+                        Description
+                      </Label>
+                      <Input
+                        className="col-span-3"
+                        id="name"
+                        onChange={(e) => {
+                          setNewProjectData((prev) => ({
+                            ...prev,
+                            description: e.target.value
+                          }))
+                        }}
+                        placeholder="Enter the name"
+                      />
+                    </div>
+                    {/* {isNameEmpty ? (
+                  <span className="ml-[3.5rem] mt-1 text-red-500">
+                    Name cannot be empty
+                  </span>
+                ) : null} */}
+                  </div>
+                </div>
+                <div className="flex w-full justify-end">
+                  <Button
+                    onClick={() => {
+                      Projects.createProject(
+                        newProjectData,
+                        currentWorkspace.id
+                      )
+                        .then(() => {
+                          toast.success('New project added successfully')
+                          router.refresh()
+                        })
+                        .catch(() => {
+                          toast.error('Failed to add new project')
+                        })
+                    }}
+                    variant="secondary"
+                  >
+                    Add project
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
         </div>
       )}
 
diff --git a/apps/platform/src/assets/Group 12.png b/apps/platform/src/assets/Group 12.png
new file mode 100644
index 00000000..9a4bbbfc
Binary files /dev/null and b/apps/platform/src/assets/Group 12.png differ
diff --git a/apps/web/src/components/hero/index.tsx b/apps/web/src/components/hero/index.tsx
index 7fca0013..da553bea 100644
--- a/apps/web/src/components/hero/index.tsx
+++ b/apps/web/src/components/hero/index.tsx
@@ -20,7 +20,7 @@ function Hero(): React.JSX.Element {
 
     if (!result.success) {
       toast.custom(() => (
-        <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-errorRed p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
+        <div className="text-brandBlue border-brandBlue/20 bg-errorRed w-[90vw] rounded-lg border p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
           <p className="text-sm">Please enter a valid email address </p>
         </div>
       ))
@@ -28,12 +28,14 @@ function Hero(): React.JSX.Element {
     }
 
     const dataInStorage: string | null = localStorage.getItem('waitlistData')
-    const emailsInWaitlist: string[] = dataInStorage ? (JSON.parse(dataInStorage) as string[]) : []
-  
+    const emailsInWaitlist: string[] = dataInStorage
+      ? (JSON.parse(dataInStorage) as string[])
+      : []
+
     // actual logic where we are checking if this email is already in waitlisted users or not
     if (emailsInWaitlist.includes(email)) {
       toast.custom(() => (
-        <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-errorRed p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
+        <div className="text-brandBlue border-brandBlue/20 bg-errorRed w-[90vw] rounded-lg border p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
           <p className="text-sm">
             You have been already added to the waitlist. We will notify you once
             we launch.
@@ -60,13 +62,11 @@ function Hero(): React.JSX.Element {
               launch
             </p>
           </div>
-
-        ))    
+        ))
 
         emailsInWaitlist.push(email)
         localStorage.setItem('waitlistData', JSON.stringify(emailsInWaitlist))
         setEmail('')
-
       } catch (error) {
         // eslint-disable-next-line no-console -- chill
         console.error(error)