diff --git a/packages/frontend/src/assets/projects.json b/packages/frontend/src/assets/projects.json
new file mode 100644
index 00000000..450c401a
--- /dev/null
+++ b/packages/frontend/src/assets/projects.json
@@ -0,0 +1,42 @@
+[
+  {
+    "icon": "^",
+    "title": "iglotools",
+    "domain": "iglotools.com",
+    "latestCommit": {
+      "message": "Subscription added",
+      "time": "2023-12-11T04:20:00",
+      "branch": "main"
+    }
+  },
+  {
+    "icon": "^",
+    "title": "iglotools",
+    "domain": "iglotools.com",
+    "latestCommit": {
+      "message": "404 added",
+      "time": "2023-12-11T04:20:00",
+      "branch": "staging"
+    }
+  },
+  {
+    "icon": "^",
+    "title": "iglotools",
+    "domain": "iglotools.com",
+    "latestCommit": {
+      "message": "Design system integrated",
+      "time": "2023-12-11T04:20:00",
+      "branch": "main"
+    }
+  },
+  {
+    "icon": "^",
+    "title": "watcher-tool",
+    "domain": "azimuth-watcher.com",
+    "latestCommit": {
+      "message": "Listen for subscription",
+      "time": "2023-12-10T04:20:00",
+      "branch": "prod"
+    }
+  }
+]
diff --git a/packages/frontend/src/assets/repository.json b/packages/frontend/src/assets/repositories.json
similarity index 100%
rename from packages/frontend/src/assets/repository.json
rename to packages/frontend/src/assets/repositories.json
diff --git a/packages/frontend/src/assets/template.json b/packages/frontend/src/assets/templates.json
similarity index 100%
rename from packages/frontend/src/assets/template.json
rename to packages/frontend/src/assets/templates.json
diff --git a/packages/frontend/src/components/Card.tsx b/packages/frontend/src/components/Card.tsx
deleted file mode 100644
index e84801c3..00000000
--- a/packages/frontend/src/components/Card.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-const Card = () => {
-  return (
-    <div className="bg-white border border-gray-200 rounded-lg shadow">
-      <div className="flex gap-2 p-2 items-center">
-        <div>^</div>
-        <div className="grow">
-          <p className="text-sm text-gray-750">iglotools</p>
-          <p className="text-sm text-gray-400">iglotools.com</p>
-        </div>
-        <div>...</div>
-      </div>
-      <div className="border-slate-200 border-t-2 border-solid p-4 text-gray-500 text-xs">
-        <p>Hello world</p>
-        <p>3 day ago main</p>
-      </div>
-    </div>
-  );
-};
-
-export default Card;
diff --git a/packages/frontend/src/components/ConnectAccount.tsx b/packages/frontend/src/components/ConnectAccount.tsx
new file mode 100644
index 00000000..105125fe
--- /dev/null
+++ b/packages/frontend/src/components/ConnectAccount.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const ConnectAccount = () => {
+  return (
+    <div className="bg-gray-100 flex flex-col p-4 justify-end items-center text-center text-sm h-60 rounded-2xl">
+      <div>^</div>
+      <div>
+        <p>Connect to your git account</p>
+        <p>
+          Once connected, you can create projects by importing repositories
+          under the account
+        </p>
+      </div>
+      <div>
+        <button className="bg-gray-300 rounded-full mx-2">
+          Connect to Github
+        </button>
+        <button className="bg-gray-300 rounded-full mx-2">
+          Connect to Gitea
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ConnectAccount;
diff --git a/packages/frontend/src/components/HorizontalLine.tsx b/packages/frontend/src/components/HorizontalLine.tsx
new file mode 100644
index 00000000..204d8b03
--- /dev/null
+++ b/packages/frontend/src/components/HorizontalLine.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const HorizontalLine = () => {
+  return <hr className="h-px bg-slate-200 border-0" />;
+};
+
+export default HorizontalLine;
diff --git a/packages/frontend/src/components/ProjectCard.tsx b/packages/frontend/src/components/ProjectCard.tsx
new file mode 100644
index 00000000..86f2f47a
--- /dev/null
+++ b/packages/frontend/src/components/ProjectCard.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { DateTime } from 'luxon';
+
+interface projectDetails {
+  icon: string;
+  title: string;
+  domain: string;
+  latestCommit: {
+    [key: string]: string;
+  };
+}
+
+interface ProjectCardProps {
+  project: projectDetails;
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
+  return (
+    <div className="bg-white border border-gray-200 rounded-lg shadow">
+      <div className="flex gap-2 p-2 items-center">
+        <div>{project.icon}</div>
+        <div className="grow">
+          <p className="text-sm text-gray-750">{project.title}</p>
+          <p className="text-sm text-gray-400">{project.domain}</p>
+        </div>
+        <div>...</div>
+      </div>
+      <div className="border-slate-200 border-t-2 border-solid p-4 text-gray-500 text-xs">
+        <p>{project.latestCommit.message}</p>
+        <p>
+          {DateTime.fromISO(project.latestCommit.time).toRelative()} on{' '}
+          {project.latestCommit.branch}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;
diff --git a/packages/frontend/src/components/ProjectRepoCard.tsx b/packages/frontend/src/components/ProjectRepoCard.tsx
index 684da84f..5b9bdd40 100644
--- a/packages/frontend/src/components/ProjectRepoCard.tsx
+++ b/packages/frontend/src/components/ProjectRepoCard.tsx
@@ -5,6 +5,7 @@ interface RepositoryDetails {
   title: string;
   updatedTime: string;
 }
+
 interface ProjectRepoCardProps {
   repository: RepositoryDetails;
 }
diff --git a/packages/frontend/src/components/RepositoryList.tsx b/packages/frontend/src/components/RepositoryList.tsx
index 4b2cf24d..9c3f02bf 100644
--- a/packages/frontend/src/components/RepositoryList.tsx
+++ b/packages/frontend/src/components/RepositoryList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import SearchBar from './SearchBar';
 import ProjectRepoCard from './ProjectRepoCard';
-import repositoryDetails from '../assets/repository.json';
+import repositoryDetails from '../assets/repositories.json';
 
 const RepositoryList = () => {
   return (
diff --git a/packages/frontend/src/pages/Projects.tsx b/packages/frontend/src/pages/Projects.tsx
index e5d9181e..0d43f4af 100644
--- a/packages/frontend/src/pages/Projects.tsx
+++ b/packages/frontend/src/pages/Projects.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import SearchBar from '../components/SearchBar';
-import Card from '../components/Card';
+import ProjectCard from '../components/ProjectCard';
+import HorizontalLine from '../components/HorizontalLine';
+import projectsDetail from '../assets/projects.json';
 
 const Projects = () => {
   return (
@@ -15,7 +17,7 @@ const Projects = () => {
         <div className="text-gray-300">^</div>
         <div className="text-gray-300">^</div>
       </div>
-      <hr className="h-px bg-slate-200 border-0" />
+      <HorizontalLine />
       <div className="flex p-4">
         <div className="grow">
           <h3 className="text-gray-750 text-2xl">Projects</h3>
@@ -30,10 +32,9 @@ const Projects = () => {
         </div>
       </div>
       <div className="grid grid-cols-3 gap-5 p-5">
-        <Card />
-        <Card />
-        <Card />
-        <Card />
+        {projectsDetail.map((project, key) => {
+          return <ProjectCard project={project} key={key} />;
+        })}
       </div>
     </div>
   );
diff --git a/packages/frontend/src/pages/projects/CreateProject.tsx b/packages/frontend/src/pages/projects/Create.tsx
similarity index 79%
rename from packages/frontend/src/pages/projects/CreateProject.tsx
rename to packages/frontend/src/pages/projects/Create.tsx
index c80054d0..a491bb5c 100644
--- a/packages/frontend/src/pages/projects/CreateProject.tsx
+++ b/packages/frontend/src/pages/projects/Create.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import templateDetails from '../../assets/template.json';
+import templateDetails from '../../assets/templates.json';
 import TemplateCard from '../../components/TemplateCard';
 import RepositoryList from '../../components/RepositoryList';
+import ConnectAccount from '../../components/ConnectAccount';
+
+const isGitAuth = false;
 
 const CreateProject = () => {
   return (
-    <div className="bg-white rounded-3xl h-full">
+    <div className="bg-white rounded-3xl h-full p-4">
       <div className="flex p-2">
         <div className="grow p-4">
           <h3 className="text-gray-750 text-2xl">Create new project</h3>
@@ -28,7 +31,7 @@ const CreateProject = () => {
         })}
       </div>
       <h5 className="mt-4 ml-4">Import a repository</h5>
-      <RepositoryList />
+      {isGitAuth ? <RepositoryList /> : <ConnectAccount />}
     </div>
   );
 };
diff --git a/packages/frontend/src/pages/projects/routes.tsx b/packages/frontend/src/pages/projects/routes.tsx
index 6a5ea20e..f988e0b7 100644
--- a/packages/frontend/src/pages/projects/routes.tsx
+++ b/packages/frontend/src/pages/projects/routes.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import CreateProject from './CreateProject';
+import CreateProject from './Create';
 import Project from './Project';
 
 export const projectsRoutes = [