diff --git a/packages/frontend/src/components/Sidebar.tsx b/packages/frontend/src/components/Sidebar.tsx
index f8d14cff..5246d4eb 100644
--- a/packages/frontend/src/components/Sidebar.tsx
+++ b/packages/frontend/src/components/Sidebar.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link, NavLink } from 'react-router-dom';
 
+import { Card, CardBody, Typography } from '@material-tailwind/react';
+
 const Sidebar = () => {
   return (
     <div className="flex flex-col h-full p-4">
@@ -10,13 +12,17 @@ const Sidebar = () => {
             <h3 className="text-black text-2xl">Snowball</h3>
           </Link>
         </div>
-        <div>Organization</div>
+        <Card className="-ml-1 my-2">
+          <CardBody className="p-1 py-2">
+            <Typography>Organization</Typography>
+          </CardBody>
+        </Card>
         <div>
           <NavLink
             to="/"
             className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
           >
-            Projects
+            <Typography>Projects</Typography>
           </NavLink>
         </div>
         <div>
@@ -24,7 +30,7 @@ const Sidebar = () => {
             to="/settings"
             className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
           >
-            Settings
+            <Typography>Settings</Typography>
           </NavLink>
         </div>
       </div>
diff --git a/packages/frontend/src/components/projects/ProjectCard.tsx b/packages/frontend/src/components/projects/ProjectCard.tsx
index fa312696..25125700 100644
--- a/packages/frontend/src/components/projects/ProjectCard.tsx
+++ b/packages/frontend/src/components/projects/ProjectCard.tsx
@@ -6,6 +6,7 @@ import {
   MenuHandler,
   MenuList,
   MenuItem,
+  Typography,
 } from '@material-tailwind/react';
 
 import { relativeTime } from '../../utils/time';
@@ -21,10 +22,12 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
       <div className="flex gap-2 p-2 items-center">
         <div>{project.icon}</div>
         <div className="grow">
-          <Link to={`projects/${project.id}`} className="text-sm text-gray-700">
-            {project.name}
+          <Link to={`projects/${project.id}`}>
+            <Typography>{project.name}</Typography>
+            <Typography color="gray" variant="small">
+              {project.domain}
+            </Typography>
           </Link>
-          <p className="text-sm text-gray-400">{project.domain}</p>
         </div>
         <Menu placement="bottom-end">
           <MenuHandler>
@@ -36,12 +39,14 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           </MenuList>
         </Menu>
       </div>
-      <div className="border-slate-200 border-t-2 border-solid p-4 text-gray-500 text-xs">
-        <p>{project.latestCommit.message}</p>
-        <p>
+      <div className="border-slate-200 border-t-2 border-solid p-4 bg-gray-50">
+        <Typography variant="small" color="gray">
+          {project.latestCommit.message}
+        </Typography>
+        <Typography variant="small" color="gray">
           {relativeTime(project.latestCommit.createdAt)} on{' '}
           {project.latestCommit.branch}
-        </p>
+        </Typography>
       </div>
     </div>
   );
diff --git a/packages/frontend/src/components/projects/ProjectSearch.tsx b/packages/frontend/src/components/projects/ProjectSearch.tsx
index b2d5e1fc..baf37937 100644
--- a/packages/frontend/src/components/projects/ProjectSearch.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearch.tsx
@@ -57,12 +57,16 @@ const ProjectSearch = ({ onChange }: ProjectsSearchProps) => {
     <div className="relative">
       <SearchBar {...getInputProps()} />
       <Card
-        className={`absolute w-1/2 max-h-100 overflow-y-scroll ${
+        className={`absolute w-1/2 max-h-100 -mt-1 overflow-y-scroll ${
           !(isOpen && items.length) && 'hidden'
         }`}
       >
-        <p>Suggestions</p>
         <List {...getMenuProps()}>
+          <div className="p-3">
+            <Typography variant="small" color="gray">
+              Suggestions
+            </Typography>
+          </div>
           {items.map((item, index) => (
             <ListItem
               selected={highlightedIndex === index || selectedItem === item}
diff --git a/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx b/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx
index 3b06ac3e..67703f86 100644
--- a/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx
+++ b/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx
@@ -16,7 +16,7 @@ interface ProjectRepoCardProps {
 
 const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
   return (
-    <div className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 m-2">
+    <div className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer">
       <div>^</div>
       <div className="grow">
         <p className="text-black">
diff --git a/packages/frontend/src/components/projects/create/RepositoryList.tsx b/packages/frontend/src/components/projects/create/RepositoryList.tsx
index 63a8e783..a0579a9f 100644
--- a/packages/frontend/src/components/projects/create/RepositoryList.tsx
+++ b/packages/frontend/src/components/projects/create/RepositoryList.tsx
@@ -38,7 +38,7 @@ const RepositoryList = () => {
 
   return (
     <div className="p-4">
-      <div className="flex gap-2">
+      <div className="flex gap-2 mb-2">
         <div className="basis-1/3">
           <Select
             value={selectedUser}
@@ -73,7 +73,6 @@ const RepositoryList = () => {
             <Typography>No repository found</Typography>
             <Button
               className="rounded-full mt-5"
-              color="white"
               size="sm"
               onClick={handleResetFilters}
             >
diff --git a/packages/frontend/src/components/projects/create/TemplateCard.tsx b/packages/frontend/src/components/projects/create/TemplateCard.tsx
index 6033da1f..edb467fb 100644
--- a/packages/frontend/src/components/projects/create/TemplateCard.tsx
+++ b/packages/frontend/src/components/projects/create/TemplateCard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IconButton } from '@material-tailwind/react';
+import { IconButton, Typography } from '@material-tailwind/react';
 
 import { Link } from 'react-router-dom';
 
@@ -15,13 +15,15 @@ interface TemplateCardProps {
 const TemplateCard: React.FC<TemplateCardProps> = ({ framework }) => {
   return (
     <Link to={'/projects/create/template'}>
-      <div className="h-14 group bg-gray-200 text-gray-500 text-xs border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-        <div className="grow">
-          {framework.icon}
-          {framework.framework}
-        </div>
+      <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
+        <Typography className="grow">
+          {framework.icon} {framework.framework}
+        </Typography>
         <div>
-          <IconButton size="sm" className="hidden group-hover:block">
+          <IconButton
+            size="sm"
+            className="rounded-full hidden group-hover:block"
+          >
             {'>'}
           </IconButton>
         </div>
diff --git a/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx b/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx
index 7738b36e..b2e18961 100644
--- a/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx
+++ b/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import toast, { Toaster } from 'react-hot-toast';
 
-import { Collapse, Button } from '@material-tailwind/react';
+import { Collapse, Button, Typography } from '@material-tailwind/react';
 
 import { Stopwatch, setStopWatchOffset } from '../../../../StopWatch';
 import FormatMillisecond from '../../../../FormatMilliSecond';
@@ -61,7 +61,11 @@ const DeployStep = ({
       <Collapse open={collapse}>
         <div className="p-2 text-sm text-gray-500 h-36 overflow-y-scroll">
           {processLogs.map((log, key) => {
-            return <div key={key}>{log}</div>;
+            return (
+              <Typography variant="small" color="gray" key={key}>
+                {log}
+              </Typography>
+            );
           })}
           <div className="sticky bottom-0 left-1/2 flex justify-center">
             <Button
diff --git a/packages/frontend/src/components/projects/project/ActivityCard.tsx b/packages/frontend/src/components/projects/project/ActivityCard.tsx
index 4574084a..4d2b8497 100644
--- a/packages/frontend/src/components/projects/project/ActivityCard.tsx
+++ b/packages/frontend/src/components/projects/project/ActivityCard.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Typography } from '@material-tailwind/react';
+
 import { relativeTime } from '../../../utils/time';
 
 interface ActivityDetails {
@@ -19,12 +21,14 @@ const ActivityCard = ({ activity }: ActivityCardProps) => {
     <div className="flex hover:bg-gray-200 rounded mt-1">
       <div className="w-4">{activity.authorAvatar}</div>
 
-      <div className="grow text-sm text-gray-500">
-        <p className="text-black">{activity.author}</p>
-        <p className="text-xs">
+      <div className="grow">
+        <Typography>{activity.author}</Typography>
+        <Typography variant="small" color="gray">
           {relativeTime(activity.createdAt)} ^ {activity.branch}
-        </p>
-        <p>{activity.message}</p>
+        </Typography>
+        <Typography variant="small" color="gray">
+          {activity.message}
+        </Typography>
       </div>
     </div>
   );
diff --git a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
index 574e1cf9..65a133c5 100644
--- a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Typography } from '@material-tailwind/react';
+
 import ActivityCard from './ActivityCard';
 import activityDetails from '../../../assets/activities.json';
 import { ProjectDetails } from '../../../types/project';
@@ -15,8 +17,10 @@ const OverviewTabPanel = ({ project }: OverviewProps) => (
       <div className="flex items-center gap-2 p-2 ">
         <div>^</div>
         <div className="grow">
-          <p className="text-sm text-gray-700">{project.title}</p>
-          <p className="text-sm text-gray-400">{project.domain}</p>
+          <Typography>{project.name}</Typography>
+          <Typography variant="small" color="gray">
+            {project.domain}
+          </Typography>
         </div>
       </div>
       <div className="flex justify-between p-2 text-sm">
@@ -25,22 +29,22 @@ const OverviewTabPanel = ({ project }: OverviewProps) => (
       </div>
       <div className="flex justify-between p-2 text-sm">
         <p>Source</p>
-        <p>{project.source}</p>
+        <p>^ {project.source}</p>
       </div>
       <div className="flex justify-between p-2 text-sm">
         <p>deployment</p>
-        <p>{project.deployment}</p>
+        <p>{project.deployment} ^</p>
       </div>
       <div className="flex justify-between p-2 text-sm">
         <p>Created</p>
         <p>
-          {relativeTime(project.createdAt)} by {project.createdBy}
+          {relativeTime(project.createdAt)} by ^ {project.createdBy}
         </p>
       </div>
     </div>
     <div className="col-span-2 p-2">
       <div className="flex justify-between">
-        <p>Activity</p>
+        <Typography variant="h6">Activity</Typography>
         <button className="text-xs bg-gray-300 rounded-full p-2">
           See all
         </button>
diff --git a/packages/frontend/src/components/projects/project/ProjectTabs.tsx b/packages/frontend/src/components/projects/project/ProjectTabs.tsx
index b45e572b..ee914ed6 100644
--- a/packages/frontend/src/components/projects/project/ProjectTabs.tsx
+++ b/packages/frontend/src/components/projects/project/ProjectTabs.tsx
@@ -35,7 +35,7 @@ const ProjectTabs = ({ project }: ProjectTabsProps) => {
         'border-b-2 border-gray-900 text-gray-900 focus:outline-none'
       }
     >
-      <TabList className="flex border-b border-gray-300 text-gray-400">
+      <TabList className="flex border-b border-gray-300 text-gray-600">
         <Tab className={'p-2 cursor-pointer'}>Overview</Tab>
         <Tab className={'p-2 cursor-pointer'}>Deployments</Tab>
         <Tab className={'p-2 cursor-pointer'}>Database</Tab>
diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
index d1d7e540..cd87c0d2 100644
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@@ -5,6 +5,7 @@ import {
   MenuHandler,
   MenuList,
   MenuItem,
+  Typography,
 } from '@material-tailwind/react';
 
 import { relativeTime } from '../../../../utils/time';
@@ -28,24 +29,26 @@ interface DeployDetailsCardProps {
 
 const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => {
   return (
-    <div className="grid grid-cols-4 gap-2 text-sm text-gray-600 border-b border-gray-300">
+    <div className="grid grid-cols-4 gap-2 border-b border-gray-300">
       <div className="col-span-2">
         <div className="flex">
-          <p className=" text-gray-900 basis-2/3">{deployment.title}</p>
-          <p className="basis-1/3">{deployment.status}</p>
+          <Typography className=" basis-2/3">{deployment.title}</Typography>
+          <Typography color="gray" className="basis-1/3">
+            {deployment.status}
+          </Typography>
         </div>
-        <p>{deployment.environment}</p>
+        <Typography color="gray">{deployment.environment}</Typography>
       </div>
       <div className="col-span-1">
-        <p>{deployment.branch}</p>
-        <p>
-          {deployment.commit.hash} {deployment.commit.message}
-        </p>
+        <Typography color="gray">^ {deployment.branch}</Typography>
+        <Typography color="gray">
+          ^ {deployment.commit.hash} {deployment.commit.message}
+        </Typography>
       </div>
       <div className="col-span-1 flex items-center">
-        <p className="grow">
+        <Typography color="gray" className="grow">
           {relativeTime(deployment.updatedAt)} ^ {deployment.author}
-        </p>
+        </Typography>
         <Menu placement="bottom-start">
           <MenuHandler>
             <button className="self-start">...</button>
diff --git a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
index b181e8c4..0516aa85 100644
--- a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import toast, { Toaster } from 'react-hot-toast';
 
-import { Button } from '@material-tailwind/react';
-import { Input } from '@material-tailwind/react';
+import { Button, Typography, Input } from '@material-tailwind/react';
 
 const PROJECT_ID = '62f87575-7a2b-4951-8156-9f9821j380d';
 
@@ -32,7 +31,7 @@ const GeneralTabPanel = () => {
   return (
     <form onSubmit={handleSubmit(() => {})}>
       <div className="mb-4">
-        <h4>Project info</h4>
+        <Typography variant="h6">Project info</Typography>
       </div>
       <div className="my-2 w-3/5">
         <label
diff --git a/packages/frontend/src/pages/Projects.tsx b/packages/frontend/src/pages/Projects.tsx
index 0bef140c..f7c4fa08 100644
--- a/packages/frontend/src/pages/Projects.tsx
+++ b/packages/frontend/src/pages/Projects.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Button } from '@material-tailwind/react';
+import { Button, IconButton, Typography } from '@material-tailwind/react';
 
 import ProjectCard from '../components/projects/ProjectCard';
 import HorizontalLine from '../components/HorizontalLine';
@@ -12,17 +12,23 @@ const Projects = () => {
   return (
     <div className="bg-white rounded-3xl h-full">
       <div className="flex p-4">
-        <div className="grow">
+        <div className="grow mr-2">
           <ProjectSearch onChange={() => {}} />
         </div>
-        <div className="text-gray-300">^</div>
-        <div className="text-gray-300">^</div>
-        <div className="text-gray-300">^</div>
+        <IconButton color="blue" className="rounded-full mr-2">
+          <Typography variant="h5">+</Typography>
+        </IconButton>
+        <div className="mr-2 flex items-center">
+          <Typography>^</Typography>
+        </div>
+        <div className="px-2 py-1 bg-blue-gray-50 rounded-lg">
+          <Typography variant="lead">SY</Typography>
+        </div>
       </div>
       <HorizontalLine />
       <div className="flex p-4">
         <div className="grow">
-          <h3 className="text-gray-750 text-2xl">Projects</h3>
+          <Typography variant="h4">Projects</Typography>
         </div>
         <div>
           {/* TODO: Create button component */}
diff --git a/packages/frontend/src/pages/projects/Project.tsx b/packages/frontend/src/pages/projects/Project.tsx
index f6e882b1..2ec96d15 100644
--- a/packages/frontend/src/pages/projects/Project.tsx
+++ b/packages/frontend/src/pages/projects/Project.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Button } from '@material-tailwind/react';
+import { Button, Typography } from '@material-tailwind/react';
 
 import HorizontalLine from '../../components/HorizontalLine';
 import projects from '../../assets/projects.json';
@@ -22,7 +22,7 @@ const Project = () => {
     <div className="bg-white rounded-3xl h-full">
       {project ? (
         <>
-          <div className="flex p-4 gap-4">
+          <div className="flex p-4 gap-4 items-center">
             <Button
               variant="outlined"
               className="rounded-full"
@@ -30,7 +30,9 @@ const Project = () => {
             >
               {'<'}
             </Button>
-            <h3 className="grow">{project?.title} </h3>
+            <Typography variant="h3" className="grow">
+              {project?.title}
+            </Typography>
             <Button className="rounded-full" variant="outlined">
               Open Repo
             </Button>
diff --git a/packages/frontend/src/pages/projects/create/template/index.tsx b/packages/frontend/src/pages/projects/create/template/index.tsx
index 389992cb..ca97f019 100644
--- a/packages/frontend/src/pages/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/projects/create/template/index.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 
+import { Typography } from '@material-tailwind/react';
+
 import Dropdown from '../../../../components/Dropdown';
 
 const USER_OPTIONS = [
@@ -23,10 +25,10 @@ const CreateRepo = () => {
   return (
     <form onSubmit={handleSubmit(() => {})}>
       <div className="mb-2">
-        <h3>Create a repository</h3>
-        <p className="text-sm text-gray-400">
+        <Typography variant="h6">Create a repository</Typography>
+        <Typography color="gray">
           The project will be cloned into this repository
-        </p>
+        </Typography>
       </div>
       <div className="mb-2">
         <h5>Framework</h5>