diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5c14a16..e26fc25 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,8 @@ import { useState, useEffect, useRef} from 'react';
 import NavigationBar from "@/components/navigation/navbar";
 import AboutSection from "@/components/aboutsection/about";
 import TechSection from "@/components/techsection/tech";
+import ProjectsSection from '@/components/projectsection/project';
+
 
 // Design Utility
 import MouseHoverCircle from "@/components/utilities/mousecirclehover";
@@ -15,6 +17,7 @@ export default function Home() {
 	// Here we're going to declare separate section ref on each section to behave indepedently
 	const aboutSectionRef = useRef<HTMLElement | null>(null);
 	const techSectionRef = useRef<HTMLElement | null>(null);
+    const projectSectionRef = useRef<HTMLElement | null>(null);
 
 	// Now we use useEffect to observe each sections intersct with users view
     useEffect(() => {
@@ -30,11 +33,12 @@ export default function Home() {
 					  }
                 });
             },
-            { rootMargin: "-50px", threshold: 0.2 }
+            { rootMargin: "0px", threshold: 0.2 }
         );
 
 		const aboutSection = aboutSectionRef.current;
         const techSection = techSectionRef.current;
+        const projectSection = projectSectionRef.current;
 
         if (aboutSection) {
             observer.observe(aboutSection);
@@ -42,6 +46,9 @@ export default function Home() {
         if (techSection) {
             observer.observe(techSection);
         }
+        if (projectSection) {
+            observer.observe(projectSection);
+        }
 
         return () => {
             if (aboutSection) {
@@ -50,6 +57,9 @@ export default function Home() {
             if (techSection) {
                 observer.unobserve(techSection);
             }
+            if (projectSection) {
+                observer.unobserve(projectSection);
+            }
         };
     }, []);
   return (
@@ -66,6 +76,8 @@ export default function Home() {
 			{/* TechSection Section Components */}
 			<TechSection sectionRef={techSectionRef} />
 
+            <ProjectsSection sectionRef={projectSectionRef}/>
+
 			<div className="fixed bottom-0 left-0 right-0 bg-gray-500 dark:bg-gray-800 text-white text-center py-2">
 				I&apos;m building my personal website right now. Thanks for visiting and check back soon!
 			</div>
diff --git a/src/components/navigation/navbar.tsx b/src/components/navigation/navbar.tsx
index ffd0392..46a6818 100644
--- a/src/components/navigation/navbar.tsx
+++ b/src/components/navigation/navbar.tsx
@@ -61,7 +61,7 @@ const NavigationBar = (props: NavigationProps) => {
 
 
   return (
-    <nav className="py-5 flex justify-between shadow-md sm:px-10 fixed w-full top-0 bg-white dark:bg-gray-800 z-10">
+    <nav className="py-5 flex justify-between shadow-md sm:px-10 fixed w-full top-0 bg-white dark:bg-gray-800 z-nav">
         <div className='flex flex-col p-0 m-0'>
           <span className="hidden sm:block md:text-4xl text-gray-500 dark:text-gray-300">DEV.ejc</span>
           <span className="hidden sm:block md:text-md text-gray-500 dark:text-gray-300">clemente@eubiejay.dev</span>
diff --git a/src/components/projectsection/project.tsx b/src/components/projectsection/project.tsx
new file mode 100644
index 0000000..7b189b5
--- /dev/null
+++ b/src/components/projectsection/project.tsx
@@ -0,0 +1,185 @@
+import { useState, RefObject, useEffect } from 'react';
+import { MdOpenInNew } from 'react-icons/md';
+
+type ProjectProps = {
+    sectionRef: RefObject<HTMLElement>;
+};
+
+type Project = {
+    title: string;
+    description: string;
+    imageUrl: string;
+    projectUrl: string;
+    techStack: string[];
+};
+
+const projects: Project[] = [
+    {
+        title: "Survival Z Mini Game",
+        description: "A Game that was developed in C# Language Windows Form from the scratch in just 5 days! without any Game Engine Involved.",
+        imageUrl: "https://github.com/eksqtr/Survival-Z-Mini-Game-Master/blob/master/Screenshots/mainmenu.png?raw=true",
+        projectUrl: "https://github.com/eksqtr/Survival-Z-Mini-Game-Master",
+        techStack: ["C#", ".Net"]
+    },
+    {
+        title: "EJC-SMS",
+        description: "EJC Short Message Service Library based on C# Language and VB .Net in ability to add SMS Feature on your existing project in just few lines of code.",
+        imageUrl: "https://github.com/eksqtr/EJC-SMS/blob/master/Screenshots/Inbox_Dashboard.png?raw=true",
+        projectUrl: "https://github.com/eksqtr/EJC-SMS",
+        techStack: ["C#", "VB.Net"]
+    },
+    // Add more projects here
+];
+
+const ProjectsSection = (props: ProjectProps) => {
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const [isClosing, setIsClosing] = useState<boolean>(false);
+
+    const handleCardClick = (index: number) => {
+        setIsClosing(false);
+        setActiveIndex(index);
+    };
+
+    const handleCloseModal = () => {
+        setIsClosing(true);
+        setTimeout(() => {
+            setActiveIndex(null);
+            setIsClosing(false);
+        }, 500); // Match the duration of the slide-out animation
+    };
+
+    const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target === e.currentTarget) {
+            handleCloseModal();
+        }
+    };
+
+    useEffect(() => {
+        const handleEscKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                handleCloseModal();
+            }
+        };
+
+        document.addEventListener('keydown', handleEscKey);
+        return () => {
+            document.removeEventListener('keydown', handleEscKey);
+        };
+    }, []);
+
+    return (
+        <section className={`md:p-16 sm:px-5 dark:bg-gray-900 lg:h-screen ${activeIndex !== null ? 'z-modal' : ''}`} id="project" ref={props.sectionRef}>
+            <h2 className="md:mt-20 text-4xl md:text-5xl py-4 text-teal-600 font-medium text-center md:text-left">
+                Projects
+            </h2>
+            <div className="relative overflow-hidden">
+                <div className="flex snap-x snap-mandatory overflow-x-auto space-x-6 pb-8">
+                    {projects.map((project, index) => (
+                        <div
+                            key={index}
+                            className={`flex-none w-80 cursor-pointer  duration-300 hover:shadow-teal-400 transition-all ease-in-out ${
+                                index === activeIndex ? 'transform scale-105 z-10' : ''
+                            }`}
+                            onClick={() => handleCardClick(index)}
+                        >
+                            <div className="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                                <img
+                                    src={project.imageUrl}
+                                    alt={project.title}
+                                    className="w-full h-48 object-cover"
+                                />
+                                <div className="p-4">
+                                    <h3 className="text-2xl font-semibold dark:text-white truncate">
+                                        {project.title}
+                                    </h3>
+                                    <p className="text-gray-600 dark:text-gray-300 mt-2 truncate">
+                                        {project.description}
+                                    </p>
+                                    <div className="mt-4">
+                                        <h4 className="text-lg font-medium dark:text-gray-300">
+                                            Tech Stack
+                                        </h4>
+                                        <div className="flex flex-wrap gap-2 mt-2">
+                                            {project.techStack.map((tech, index) => (
+                                                <span
+                                                    key={index}
+                                                    className="text-sm bg-teal-600 text-white py-1 px-2 rounded-md dark:bg-teal-700 dark:white"
+                                                >
+                                                    {tech}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    </div>
+                                    <a
+                                        href={project.projectUrl}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="mt-4 flex items-center text-teal-600 transition-colors hover:text-teal-500"
+                                    >
+                                        View Project <MdOpenInNew className="ml-2" />
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {activeIndex !== null && (
+                <div
+                    className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-30"
+                    onClick={handleOverlayClick}
+                >
+                    <div
+                        className={`bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-3xl w-full p-8 relative transition-transform duration-500 ${isClosing ? 'animate-slide-out' : 'animate-slide-in'}`}
+                    >
+                        <button
+                            onClick={handleCloseModal}
+                            className="absolute top-4 right-4 text-xl text-gray-600 dark:text-gray-300 hover:!text-red-500 dark:hover:text-gray-200 transition-colors"
+                        >
+                            &times;
+                        </button>
+                        <div className="w-full h-80 relative">
+                            <img
+                                src={projects[activeIndex].imageUrl}
+                                alt={projects[activeIndex].title}
+                                className="w-full h-full object-cover rounded-lg"
+                            />
+                        </div>
+                        <h3 className="text-3xl font-semibold mt-4 dark:text-white">
+                            {projects[activeIndex].title}
+                        </h3>
+                        <p className="text-gray-600 dark:text-gray-300 mt-2">
+                            {projects[activeIndex].description}
+                        </p>
+                        <div className="mt-4">
+                            <h4 className="text-lg font-medium dark:text-gray-300">
+                                Tech Stack
+                            </h4>
+                            <div className="flex flex-wrap gap-2 mt-2">
+                                {projects[activeIndex].techStack.map((tech, index) => (
+                                    <span
+                                        key={index}
+                                        className="text-sm bg-teal-600 text-white py-1 px-2 rounded-md dark:bg-teal-700 dark:white"
+                                    >
+                                        {tech}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                        <a
+                            href={projects[activeIndex].projectUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="mt-4 flex items-center text-teal-600 hover:text-teal-400 transition-colors"
+                        >
+                            View Project <MdOpenInNew className="ml-2" />
+                        </a>
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default ProjectsSection;
diff --git a/src/components/techsection/tech.tsx b/src/components/techsection/tech.tsx
index 7a990fc..5f81cc1 100644
--- a/src/components/techsection/tech.tsx
+++ b/src/components/techsection/tech.tsx
@@ -48,7 +48,7 @@ const TechSection = (props: TechProps) => {
           id="tech-stack"
         >
           {/* Tabs */}
-          <div className="mt-20 flex justify-center md:justify-start mb-8">
+          <div className="md:mt-20 flex justify-center md:justify-start mb-8">
             <button
               className={`px-4 text-lg font-medium ${activeTab === 'tech' ? 'text-teal-600 border-b-2 border-teal-600' : 'text-gray-600 dark:text-gray-300'}`}
               onClick={() => handleTabChange('tech')}
diff --git a/tailwind.config.js b/tailwind.config.js
index a1665a1..564d39c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,10 @@ module.exports = {
   ],
   theme: {
     extend: {
+      zIndex: {
+        'modal': 999,
+        'nav': 10,
+      },
       keyframes: {
           fadeIn: {
               '0%': { opacity: "0" },
@@ -19,11 +23,21 @@ module.exports = {
           fadeOut: {
             '0%': { opacity: "1" },
             '100%': { opacity: "0" },
-        },
+          },
+          'slide-in': {
+              '0%': { transform: 'translateY(100%)', opacity: '0' },
+              '100%': { transform: 'translateY(0)', opacity: '1' },
+          },
+          'slide-out': {
+              '0%': { transform: 'translateY(0)', opacity: '1' },
+              '100%': { transform: 'translateY(100%)', opacity: '0' },
+          },
       },
       animation: {
           fadeIn: 'fadeIn 1.2s ease-in-out forwards',
           fadeOut: 'fadeOut 1.2s ease-in-out forwards',
+          'slide-in': 'slide-in 0.3s ease-out forwards',
+          'slide-out': 'slide-out 0.3s ease-in forwards',
       },
     },
   },