diff --git a/app/_components/Project/ImageCard.tsx b/app/_components/Project/ImageCard.tsx
new file mode 100644
index 0000000..a055523
--- /dev/null
+++ b/app/_components/Project/ImageCard.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { TProject } from "@/app/types";
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+import { ArrowUpRight, Github } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+export default function ImageCard({
+  isOdd,
+  project,
+}: {
+  isOdd: boolean;
+  project: TProject;
+}) {
+  const [activeCard, setActiveCard] = React.useState(false);
+
+  const handleMouseEnter = () => {
+    setActiveCard(true);
+  };
+
+  const handleMouseLeave = () => {
+    setActiveCard(false);
+  };
+
+  return (
+    <>
+      {project.linkToGH ? (
+        <motion.div
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            "relative lg:flex hidden bg-gray-50 w-[50%] h-full rounded-xl z-10 group overflow-hidden border shadow-md dark:bg-black dark:border-gray-800",
+            isOdd && "order-2"
+          )}
+        >
+          <motion.div
+            initial={{ width: "100%", height: "100%" }}
+            animate={{
+              width: activeCard ? "60%" : "100%",
+              height: activeCard ? "100%" : "100%",
+            }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            className="relative z-10"
+          >
+            <Image
+              fill
+              sizes="100%"
+              priority={false}
+              src={project.image}
+              alt={project.title}
+              className="object-cover object-center"
+            />
+          </motion.div>
+          <div className="absolute inset-0 flex justify-end w-full h-full border">
+            <div className="mr-6 flex flex-col justify-center items-center gap-4">
+              <Link
+                target="_blank"
+                href={project.linkToGH ?? "/"}
+                className="flex items-start gap-2 text-sm hover:underline underline-offset-2 w-full"
+              >
+                <Github size={20} />
+                View on Github
+              </Link>
+              <Link
+                target="_blank"
+                href={project.link ?? "/"}
+                className="flex items-start gap-2 text-sm hover:underline underline-offset-2 w-full"
+              >
+                <ArrowUpRight size={20} />
+                Live Url Here
+              </Link>
+            </div>
+          </div>
+        </motion.div>
+      ) : (
+        <Link
+          href={project.link}
+          target="_blank"
+          className={cn(
+            "relative hidden lg:block bg-gray-50 w-[50%] h-full rounded-xl z-10 group overflow-clip",
+            isOdd && "order-2"
+          )}
+        >
+          <Image
+            fill
+            sizes="100%"
+            priority={false}
+            src={project.image}
+            alt={project.title}
+            className="grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-500 object-cover object-center"
+          />
+        </Link>
+      )}
+    </>
+  );
+}
diff --git a/app/_components/Project/ProjectCard.tsx b/app/_components/Project/ProjectCard.tsx
index 17b82a7..b46070d 100644
--- a/app/_components/Project/ProjectCard.tsx
+++ b/app/_components/Project/ProjectCard.tsx
@@ -2,9 +2,9 @@
 import React from "react";
 import Image from "next/image";
 import TiltCard from "../Utils/TiltCard";
-import { cn } from "@/lib/utils";
 import { TProject } from "../../types";
 import Link from "next/link";
+import ImageCard from "./ImageCard";
 
 const ProjectCard = ({
   isOdd,
@@ -23,31 +23,9 @@ const ProjectCard = ({
 
 export default ProjectCard;
 
-function ImageCard({ isOdd, project }: { isOdd: boolean; project: TProject }) {
-  return (
-    <Link
-      href={project.link}
-      target="_blank"
-      className={cn(
-        "relative hidden lg:block bg-gray-50 w-[50%] h-full rounded-xl z-10 group overflow-clip",
-        isOdd && "order-2"
-      )}
-    >
-      <Image
-        fill
-        sizes="100%"
-        priority={false}
-        src={project.image}
-        alt={project.title}
-        className="grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-500 object-cover object-center"
-      />
-    </Link>
-  );
-}
-
 function InfoCardWithTilt({ project }: { project: TProject }) {
   return (
-    <TiltCard className="lg:w-[50%] lg:aspect-[16/9] bg-gray-50 shadow-2xl dark:bg-gray-900 z-10">
+    <TiltCard className="lg:w-[50%] lg:aspect-[16/9] min-h-[250px] bg-gray-50 shadow-2xl dark:bg-gray-900 z-10">
       <Link
         target="_blank"
         href={project.link}
diff --git a/app/constants.ts b/app/constants.ts
index 9dcf298..45cf081 100644
--- a/app/constants.ts
+++ b/app/constants.ts
@@ -74,6 +74,7 @@ export const projects: TProject[] = [
       "This innovative app harnesses the power of the TMDB (The Movie Database) API to bring film enthusiasts a wealth of movie information at their fingertips. Users can explore a vast catalog of films, accessing details like cast, crew, ratings, and synopses. With its sleek interface and comprehensive movie data, this app is a must-have for anyone looking to enhance their cinematic experience.",
     image: "/projects/movie.png",
     link: "https://piimovie.pnoya.com",
+    linkToGH: "https://github.com/Phingaz/piimovie",
   },
   {
     title: "Kojo Support Project",
@@ -81,6 +82,14 @@ export const projects: TProject[] = [
       "The support dashboard offers a streamlined interface for accessing company data. Users can query the database through a clean, filterable, and sortable table, making it easy to find relevant information. Each entry can display specific customer details and also view agent information, including their performance metrics and assigned tickets. The dashboard prioritizes simplicity, ensuring quick and efficient access to both customer and agent data for seamless support management.",
     image: "/projects/kojo.png",
     link: "https://kojo-dashboard.pnoya.com",
+    linkToGH: "https://github.com/Phingaz/kojo-support-project",
+  },
+  {
+    title: "Loja Frank Mills",
+    description:
+      "At Frank Mills, they offer a wide selection of stylish leather bags and backpacks to suit every occasion. The user-friendly app ensures that all orders go directly to WhatsApp for quick and easy communication. Plus, with the admin dashboard, the admins can easily manage products, track inventory, and update their selections—all from their device. Discover the perfect blend of style and convenience at Frank Mills today!",
+    image: "/projects/fm.png",
+    link: "https://frankmills.pnoya.com",
   },
   {
     title: "My Porfolio V1",
@@ -88,5 +97,6 @@ export const projects: TProject[] = [
       "My Portfolio V1 is the initial version of a personal portfolio showcasing my skills, projects, and achievements. It provides an overview of my work, including web development projects, and serves as a hub for connecting with potential clients or collaborators. The design is clean and user-friendly, allowing visitors to easily navigate through various sections like About Me, Projects, and Contact.",
     image: "/projects/portfolio.png",
     link: "https://pii.netlify.app",
+    linkToGH: "https://github.com/Phingaz/myPortfolio",
   },
 ];
diff --git a/app/globals.css b/app/globals.css
index 3087055..2575a6b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -48,6 +48,14 @@ body {
   font-family: var(--font-sora), sans-serif;
 }
 
+.backface-hidden {
+  backface-visibility: hidden;
+}
+
+.preserve-3d {
+  transform-style: preserve-3d;
+}
+
 ::selection {
   background: light-dark(var(--dark), var(--light));
   color: light-dark(var(--light), var(--dark));
diff --git a/app/types.ts b/app/types.ts
index b4e2235..3cb4983 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -1,12 +1,13 @@
-export type TJob = {
-  title: string;
-  text: string;
-  time: string;
-};
-
-export type TProject = {
-  title: string;
-  description: string;
-  image: string;
-  link: string;
-};
+export type TJob = {
+  title: string;
+  text: string;
+  time: string;
+};
+
+export type TProject = {
+  title: string;
+  description: string;
+  image: string;
+  link: string;
+  linkToGH?: string;
+};
diff --git a/public/projects/fm.png b/public/projects/fm.png
new file mode 100644
index 0000000..25f8723
Binary files /dev/null and b/public/projects/fm.png differ
diff --git a/service/email.ts b/service/email.ts
new file mode 100644
index 0000000..e69de29