diff --git a/apps/app/components/project/card.tsx b/apps/app/components/project/card.tsx
deleted file mode 100644
index 8100379d4..000000000
--- a/apps/app/components/project/card.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-// ui
-// icons
-import {
-  CalendarDaysIcon,
-  CheckIcon,
-  PencilIcon,
-  PlusIcon,
-  TrashIcon,
-  ClipboardDocumentListIcon,
-} from "@heroicons/react/24/outline";
-// types
-// ui
-import { Button } from "components/ui";
-// hooks
-import useProjectMembers from "hooks/use-project-members";
-// helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
-// types
-import type { IProject } from "types";
-
-export type ProjectCardProps = {
-  workspaceSlug: string;
-  project: IProject;
-  setToJoinProject: (id: string | null) => void;
-  setDeleteProject: (id: string | null) => void;
-};
-
-export const ProjectCard: React.FC<ProjectCardProps> = (props) => {
-  const { workspaceSlug, project, setToJoinProject, setDeleteProject } = props;
-  // router
-  const router = useRouter();
-  // fetching project members information
-  const { members, isMember, canDelete, canEdit } = useProjectMembers(workspaceSlug, project.id);
-
-  if (!members) {
-    return (
-      <div className="flex h-36 w-full flex-col rounded-md bg-white px-4 py-3">
-        <div className="h-full w-full animate-pulse bg-gray-50" />
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="flex h-full w-full flex-col rounded-md border bg-white px-4 py-3">
-        <div className="flex items-center justify-between">
-          <div className="flex gap-2  text-lg font-medium">
-            <Link href={`/${workspaceSlug}/projects/${project.id}/issues`}>
-              <a className="flex items-center gap-x-3">
-                {project.icon && (
-                  <span className="text-base">{String.fromCodePoint(parseInt(project.icon))}</span>
-                )}
-                <span className=" w-auto max-w-[220px] text-ellipsis whitespace-nowrap overflow-hidden">
-                  {project.name}
-                </span>
-              </a>
-            </Link>
-          </div>
-          {isMember ? (
-            <div className="flex">
-              {canEdit && (
-                <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
-                  <a className="grid h-7 w-7 cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-gray-100">
-                    <PencilIcon className="h-4 w-4" />
-                  </a>
-                </Link>
-              )}
-              {canDelete && (
-                <button
-                  type="button"
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
-                  onClick={() => setDeleteProject(project.id)}
-                >
-                  <TrashIcon className="h-4 w-4 text-red-500" />
-                </button>
-              )}
-            </div>
-          ) : null}
-        </div>
-        <div className="mt-2">
-          <p className="text-sm">{project.description}</p>
-        </div>
-        <div className="mt-3 flex h-full items-end justify-between">
-          <div className="flex gap-2">
-            <Button
-              theme="secondary"
-              className="flex items-center gap-1"
-              onClick={() => router.push(`/${workspaceSlug}/projects/${project.id}/issues`)}
-            >
-              <ClipboardDocumentListIcon className="h-3 w-3" />
-              Open Project
-            </Button>
-            {!isMember ? (
-              <button
-                type="button"
-                onClick={() => {
-                  setToJoinProject(project.id);
-                }}
-                className="flex cursor-pointer items-center gap-1 rounded border p-2 text-xs font-medium duration-300 hover:bg-gray-100"
-              >
-                <PlusIcon className="h-3 w-3" />
-                <span>Select to Join</span>
-              </button>
-            ) : (
-              <div className="flex items-center gap-1 text-xs">
-                <CheckIcon className="h-3 w-3" />
-                Member
-              </div>
-            )}
-          </div>
-          <div className="mb-1 flex items-center gap-1 text-xs">
-            <CalendarDaysIcon className="h-4 w-4" />
-            {renderShortNumericDateFormat(project.created_at)}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/project/index.ts b/apps/app/components/project/index.ts
index c36630d8f..bf18fe07d 100644
--- a/apps/app/components/project/index.ts
+++ b/apps/app/components/project/index.ts
@@ -1,4 +1,4 @@
-export * from "./card";
+export * from "./single-project-card";
 export * from "./create-project-modal";
 export * from "./join-project";
 export * from "./sidebar-list";
diff --git a/apps/app/components/project/join-project-modal.tsx b/apps/app/components/project/join-project-modal.tsx
index df05f1309..60530e8a7 100644
--- a/apps/app/components/project/join-project-modal.tsx
+++ b/apps/app/components/project/join-project-modal.tsx
@@ -13,9 +13,7 @@ type TJoinProjectModalProps = {
   onJoin: () => Promise<void>;
 };
 
-export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
-  const { onClose, onJoin, data } = props;
-
+export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, onJoin, data }) => {
   const [isJoiningLoading, setIsJoiningLoading] = useState(false);
 
   const handleJoin = () => {
@@ -36,7 +34,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
 
   return (
     <Transition.Root show={Boolean(data)} as={React.Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={handleClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -49,7 +47,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
@@ -71,8 +69,8 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                   </p>
                   <div className="space-y-3" />
                 </div>
-                <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                  <Button theme="secondary" onClick={handleClose}>
+                <div className="mt-5 flex justify-end gap-2">
+                  <Button type="button" theme="secondary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button type="submit" onClick={handleJoin} disabled={isJoiningLoading}>
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
new file mode 100644
index 000000000..b29c9e8a9
--- /dev/null
+++ b/apps/app/components/project/single-project-card.tsx
@@ -0,0 +1,234 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+import Image from "next/image";
+
+import { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// hooks
+import useProjectMembers from "hooks/use-project-members";
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, Loader, Tooltip } from "components/ui";
+// icons
+import { CalendarDaysIcon, PencilIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { StarIcon } from "@heroicons/react/20/solid";
+// helpers
+import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import type { IProject } from "types";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
+
+export type ProjectCardProps = {
+  project: IProject;
+  setToJoinProject: (id: string | null) => void;
+  setDeleteProject: (id: string | null) => void;
+};
+
+export const SingleProjectCard: React.FC<ProjectCardProps> = ({
+  project,
+  setToJoinProject,
+  setDeleteProject,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  // fetching project members information
+  const { members, hasJoined, isOwner, isMember } = useProjectMembers(
+    workspaceSlug as string,
+    project.id
+  );
+
+  const handleAddToFavourites = () => {
+    if (!workspaceSlug) return;
+
+    projectService
+      .addProjectToFavourites(workspaceSlug as string, {
+        project: project.id,
+      })
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favourite: p.id === project.id ? true : p.is_favourite,
+            })),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the project to favourites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favourites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavourites = () => {
+    if (!workspaceSlug || !project) return;
+
+    projectService
+      .removeProjectFromFavourites(workspaceSlug as string, project.id)
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favourite: p.id === project.id ? false : p.is_favourite,
+            })),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the project from favourites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favourites. Please try again.",
+        });
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Project link copied to clipboard.",
+      });
+    });
+  };
+
+  return (
+    <>
+      {members ? (
+        <div className="flex flex-col shadow rounded-[10px]">
+          <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+            <a>
+              <div className="relative h-32 w-full rounded-t-[10px]">
+                <Image
+                  src={
+                    project.cover_image ??
+                    "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+                  }
+                  alt={project.name}
+                  layout="fill"
+                  objectFit="cover"
+                  className="rounded-t-[10px]"
+                />
+                <div className="absolute left-7 bottom-4 flex items-center gap-3 text-white">
+                  {!hasJoined ? (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setToJoinProject(project.id);
+                      }}
+                      className="flex cursor-pointer items-center gap-1 bg-green-600 px-2 py-1 rounded text-xs"
+                    >
+                      <PlusIcon className="h-3 w-3" />
+                      <span>Select to Join</span>
+                    </button>
+                  ) : (
+                    <span className="bg-green-600 px-2 py-1 rounded text-xs">Member</span>
+                  )}
+                  {project.is_favourite && (
+                    <span className="bg-orange-400 h-6 w-9 grid place-items-center rounded">
+                      <StarIcon className="h-3 w-3" />
+                    </span>
+                  )}
+                </div>
+              </div>
+            </a>
+          </Link>
+          <div className="flex flex-col px-7 py-4 rounded-b-[10px] h-full">
+            <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+              <a>
+                <div className="flex items-center gap-1">
+                  <h3 className="text-1.5xl font-semibold">{project.name}</h3>
+                  {project.icon && (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {String.fromCodePoint(parseInt(project.icon))}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-3.5 mb-7">{truncateText(project.description ?? "", 100)}</p>
+              </a>
+            </Link>
+            <div className="flex justify-between items-end h-full">
+              <Tooltip
+                tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
+                position="bottom"
+                theme="dark"
+              >
+                <div className="flex items-center gap-1.5 text-xs">
+                  <CalendarDaysIcon className="h-4 w-4" />
+                  {renderShortNumericDateFormat(project.created_at)}
+                </div>
+              </Tooltip>
+              {hasJoined ? (
+                <div className="flex items-center">
+                  {(isOwner || isMember) && (
+                    <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
+                      <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-gray-100">
+                        <PencilIcon className="h-4 w-4" />
+                      </a>
+                    </Link>
+                  )}
+                  <CustomMenu width="auto" verticalEllipsis>
+                    {isOwner && (
+                      <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
+                        Delete project
+                      </CustomMenu.MenuItem>
+                    )}
+                    {project.is_favourite ? (
+                      <CustomMenu.MenuItem onClick={handleRemoveFromFavourites}>
+                        Remove from favourites
+                      </CustomMenu.MenuItem>
+                    ) : (
+                      <CustomMenu.MenuItem onClick={handleAddToFavourites}>
+                        Add to favourites
+                      </CustomMenu.MenuItem>
+                    )}
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      Copy project link
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <Loader>
+          <Loader.Item height="144px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index d82a1a347..64fa11338 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -11,6 +11,7 @@ type Props = {
   label?: string | JSX.Element;
   className?: string;
   ellipsis?: boolean;
+  verticalEllipsis?: boolean;
   width?: "sm" | "md" | "lg" | "xl" | "auto";
   textAlignment?: "left" | "center" | "right";
   noBorder?: boolean;
@@ -31,6 +32,7 @@ const CustomMenu = ({
   label,
   className = "",
   ellipsis = false,
+  verticalEllipsis = false,
   width = "auto",
   textAlignment,
   noBorder = false,
@@ -38,44 +40,40 @@ const CustomMenu = ({
   customButton,
 }: Props) => (
   <Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
-    {customButton ? (
-      <Menu.Button as="div">{customButton}</Menu.Button>
-    ) : (
-      <div>
-        {ellipsis ? (
-          <Menu.Button className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
-            <EllipsisHorizontalIcon className="h-4 w-4" />
-          </Menu.Button>
-        ) : (
-          <Menu.Button
-            className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
-              textAlignment === "right"
-                ? "text-right"
-                : textAlignment === "center"
-                ? "text-center"
-                : "text-left"
-            } ${
-              noBorder
-                ? "rounded"
-                : "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-            } ${
-              width === "sm"
-                ? "w-10"
-                : width === "md"
-                ? "w-20"
-                : width === "lg"
-                ? "w-32"
-                : width === "xl"
-                ? "w-48"
-                : "w-full"
-            }`}
-          >
-            {label}
-            {!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
-          </Menu.Button>
-        )}
-      </div>
-    )}
+    <div>
+      {ellipsis || verticalEllipsis ? (
+        <Menu.Button className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
+          <EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
+        </Menu.Button>
+      ) : (
+        <Menu.Button
+          className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
+            textAlignment === "right"
+              ? "text-right"
+              : textAlignment === "center"
+              ? "text-center"
+              : "text-left"
+          } ${
+            noBorder
+              ? "rounded"
+              : "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          } ${
+            width === "sm"
+              ? "w-10"
+              : width === "md"
+              ? "w-20"
+              : width === "lg"
+              ? "w-32"
+              : width === "xl"
+              ? "w-48"
+              : "w-full"
+          }`}
+        >
+          {label}
+          {!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+        </Menu.Button>
+      )}
+    </div>
 
     <Transition
       as={React.Fragment}
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
index 6651702f5..f6a32a563 100644
--- a/apps/app/components/ui/tooltip.tsx
+++ b/apps/app/components/ui/tooltip.tsx
@@ -24,6 +24,7 @@ type Props = {
   children: JSX.Element;
   disabled?: boolean;
   className?: string;
+  theme?: "light" | "dark";
 };
 
 export const Tooltip: React.FC<Props> = ({
@@ -33,21 +34,18 @@ export const Tooltip: React.FC<Props> = ({
   children,
   disabled = false,
   className = "",
+  theme = "light",
 }) => (
   <Tooltip2
     disabled={disabled}
     content={
       <div
-        className={`flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md text-left ${className}`}
+        className={`${className} flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md p-2 shadow-md text-left ${
+          theme === "light" ? "bg-white text-gray-700" : "bg-black text-white"
+        }`}
       >
-        {tooltipHeading ? (
-          <>
-            <h5 className="font-medium">{tooltipHeading}</h5>
-            <p className="text-gray-700">{tooltipContent}</p>
-          </>
-        ) : (
-          <p className="text-gray-700">{tooltipContent}</p>
-        )}
+        {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
+        <p>{tooltipContent}</p>
       </div>
     }
     position={position}
diff --git a/apps/app/hooks/use-project-members.tsx b/apps/app/hooks/use-project-members.tsx
index 5f3519610..9764ade75 100644
--- a/apps/app/hooks/use-project-members.tsx
+++ b/apps/app/hooks/use-project-members.tsx
@@ -13,20 +13,24 @@ const useProjectMembers = (workspaceSlug: string, projectId: string) => {
     projectService.projectMembers(workspaceSlug, projectId)
   );
 
-  const isMember = members?.some((item: any) => item.member.id === (user as any)?.id);
+  const hasJoined = members?.some((item: any) => item.member.id === (user as any)?.id);
 
-  const canEdit = members?.some(
-    (item) => (item.member.id === (user as any)?.id && item.role === 20) || item.role === 15
+  const isOwner = members?.some((item) => item.member.id === (user as any)?.id && item.role === 20);
+  const isMember = members?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 15
   );
-  const canDelete = members?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 20
+  const isViewer = members?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 10
   );
+  const isGuest = members?.some((item) => item.member.id === (user as any)?.id && item.role === 5);
 
   return {
     members,
+    hasJoined,
+    isOwner,
     isMember,
-    canEdit,
-    canDelete,
+    isViewer,
+    isGuest,
   };
 };
 
diff --git a/apps/app/hooks/use-projects.tsx b/apps/app/hooks/use-projects.tsx
index f9583eea8..6b4a8b413 100644
--- a/apps/app/hooks/use-projects.tsx
+++ b/apps/app/hooks/use-projects.tsx
@@ -1,10 +1,8 @@
 import useSWR from "swr";
 import { useRouter } from "next/router";
-// types
-import { IProject } from "types";
 // services
 import projectService from "services/project.service";
-// constants
+// fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 
 const useProjects = () => {
@@ -12,7 +10,7 @@ const useProjects = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // api fetching
-  const { data: projects, mutate: mutateProjects } = useSWR<IProject[]>(
+  const { data: projects, mutate: mutateProjects } = useSWR(
     workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
     workspaceSlug ? () => projectService.getProjects(workspaceSlug as string) : null
   );
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 8b8d0408a..4569552ac 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -10,7 +10,7 @@ import useWorkspaces from "hooks/use-workspaces";
 import AppLayout from "layouts/app-layout";
 // components
 import { JoinProjectModal } from "components/project/join-project-modal";
-import { ProjectCard } from "components/project";
+import { SingleProjectCard } from "components/project";
 import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
 // ui
 import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
@@ -57,6 +57,7 @@ const ProjectsPage: NextPage = () => {
         onJoin={async () => {
           const project = projects?.find((item) => item.id === selectedProjectToJoin);
           if (!project) return;
+
           await projectService
             .joinProject(workspaceSlug as string, {
               project_ids: [project.id],
@@ -101,18 +102,15 @@ const ProjectsPage: NextPage = () => {
               </EmptySpace>
             </div>
           ) : (
-            <div className="h-full w-full space-y-5">
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {projects.map((item) => (
-                  <ProjectCard
-                    key={item.id}
-                    project={item}
-                    workspaceSlug={(activeWorkspace as any)?.slug}
-                    setToJoinProject={setSelectedProjectToJoin}
-                    setDeleteProject={setDeleteProject}
-                  />
-                ))}
-              </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-9">
+              {projects.map((project) => (
+                <SingleProjectCard
+                  key={project.id}
+                  project={project}
+                  setToJoinProject={setSelectedProjectToJoin}
+                  setDeleteProject={setDeleteProject}
+                />
+              ))}
             </div>
           )}
         </>
diff --git a/apps/app/services/project.service.ts b/apps/app/services/project.service.ts
index 1172f8823..702298880 100644
--- a/apps/app/services/project.service.ts
+++ b/apps/app/services/project.service.ts
@@ -222,7 +222,7 @@ class ProjectServices extends APIService {
   }
 
   async syncGiuthubRepository(
-    slug: string,
+    workspaceSlug: string,
     projectId: string,
     workspaceIntegrationId: string,
     data: {
@@ -233,7 +233,7 @@ class ProjectServices extends APIService {
     }
   ): Promise<any> {
     return this.post(
-      `/api/workspaces/${slug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
       data
     )
       .then((response) => response?.data)
@@ -255,6 +255,27 @@ class ProjectServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async addProjectToFavourites(
+    workspaceSlug: string,
+    data: {
+      project: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favourite-projects/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeProjectFromFavourites(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favourite-projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectServices();
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index ccb9ea2f1..abc50d9dc 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .text-1\.5xl {
+    font-size: 1.375rem;
+    line-height: 1.875rem;
+  }
+}
+
 @layer base {
   html {
     font-family: "Inter", sans-serif;
@@ -24,7 +31,7 @@
 }
 
 .scrollbar-enable::-webkit-scrollbar {
-  display: block ;
+  display: block;
 }
 
 /* Scrollbar style */
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 7364682a8..af5012f2c 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -10,6 +10,7 @@ export interface IProject {
   icon: string;
   id: string;
   identifier: string;
+  is_favourite: boolean;
   module_view: boolean;
   name: string;
   network: number;