diff --git a/src/app/page.tsx b/src/app/page.tsx
index 41ec1ea..6ba1657 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -41,6 +41,29 @@ export default function Home() {
                 </div>
               </div>
             </Link>
+            {/*Ziyaudheen's Card */}
+             <Link href="/ziyaudheen-ms" className="group">
+              <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-200 dark:border-gray-700 hover:scale-105">
+                <div className="flex items-center space-x-4">
+                  <div className="flex-shrink-0">
+                    <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
+                      Z
+                    </div>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                      Ziyaudheen MS
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Computer Science Student
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                      Age: 18 • First Year
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </Link>
 
           </div>
         </main>
diff --git a/src/app/ziyaudheen-ms/page.tsx b/src/app/ziyaudheen-ms/page.tsx
new file mode 100644
index 0000000..3553d74
--- /dev/null
+++ b/src/app/ziyaudheen-ms/page.tsx
@@ -0,0 +1,184 @@
+import Navbar from "@/components/Navbar";
+
+
+
+ const ziyaudheenProjects = [
+  {
+    id:1,
+    projectTitle: "VIDMEET : THE COMPLETE VIDEO CONFERENCE APPLICATION",
+    projectType: "FULL STACK DEVELOPMENT",
+    projectDescription: "After a significant period of learning, implementation, and debugging, I successfully launched a full-stack video conferencing platform. This project, VIDMEET, was built entirely using Next.js and TypeScript, which deepened my skills in server components ('use server'), custom hooks, and powerful authentication with Clerk.",
+    Technologies: ["NextJs" , "Stream" , "Tailwind CSS", ],
+  },
+
+  {
+    id:2,
+    projectTitle: "PARLEZ AI : YOUR VIRTUAL INTERVIEWER",
+    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
+    projectDescription: "Introducing your personal virtual interviewer, powered by an LLM for a knowledge-based, serious interview experience. To ensure relevance and realism, simply provide the job description and expectations; you can then practice any interview as many times as you need.",
+    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Vapi Agent" , "Google Gemini"],
+  },
+  {
+    id:3 ,
+    projectTitle: "CLAUDCANVAS : TRANSFORM ANYTHING AS YOU NEED",
+    projectType: "FULL STACK DEVELOPMENT WITH AI INTEGRATION",
+    projectDescription: "CLAUDCANVAS makes complex media transformations easy for everyone. Powered by Cloudinary's AI, the platform lets you effortlessly edit, optimize, and transform your images, videos, and audio. Manage all your content and creations from an intuitive dashboard.",
+    Technologies: ["NextJs" , "Python Django" , "Tailwind CSS", "Claudinary AI"],
+  },
+  
+];
+
+
+
+export default function page() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      <Navbar />
+      <div className="container mx-auto px-4 py-12">
+
+        {/* Person Profile */}
+        <div className="max-w-4xl mx-auto">
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            {/* Header */}
+            <div className="bg-gradient-to-r from-green-500 to-blue-600 px-8 py-12">
+              <div className="flex items-center space-x-6 flex-col md:flex-row">
+                <div className="flex-shrink-0">
+                  <div className="w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold text-4xl">
+                    Z {/* First letter of your name */}
+                  </div>
+                </div>
+                <div className="flex-1 ">
+                  <h1 className="text-3xl text-center md:text-left md:text-4xl font-bold text-white mb-2">
+                    Ziyaudheen MS
+                  </h1>
+                  <p className="text-lg text-center md:text-left md:text-xl text-blue-100 mb-2">Full Stack Software Developer</p>
+                  <p className="text-blue-200 text-center md:text-left">Age: 18 •  Doing btech CSE first year.</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Content */}
+            <div className="p-8">
+              {/* Bio Section */}
+              <div className="mb-8">
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  About
+                </h2>
+                <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+                  Myself I am Ziyaudheen MS. Currently  doing Computer Science and Engineering (S1). I am a full Stack software developer with experience in Various Tech frameworks. Working as a Master Tutor by training 100+ students in a digital initiative STEYP. Looking forward to learn more about dev and possibilities of AI/ML in web development.  Also looking forward to contribute in open source projects.Interested in collaborating with all to build something great together. </p>
+              </div>
+
+              {/* Skills Section */}
+              <div className="mb-8">
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  Skills & Interests
+                </h2>
+                <div className="flex flex-wrap gap-3">
+                  <span className="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium">
+                    Javascript
+                  </span>
+                  <span className="px-4 py-2 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm font-medium">
+                    React Js
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded-full text-sm font-medium">
+                    Next JS
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full text-sm font-medium">
+                    Python
+                  </span>
+                   <span className="px-4 py-2 bg-purple-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full text-sm font-medium">
+                    Node Js
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-fuchsia-900 text-fuchsia-800 dark:text-fuchsia-200 rounded-full text-sm font-medium">
+                    AI/ML
+                  </span>
+                  <span className="px-4 py-2 bg-purple-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-full text-sm font-medium">
+                    Full Stack Development
+                  </span>
+                  {/* Add more skills/interests as needed */}
+                </div>
+              </div>
+                <div className="mb-8">
+                    <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  Personal Projects
+                </h2>
+                <div className="flex flex-col gap-3">
+                {
+                  ziyaudheenProjects.map((item) => (
+                 <div key={item.id} className="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-800">
+            <div className="flex flex-col items-start space-y-4">
+                <div className="flex-1 mb-4">
+                    <h3 className=" text-lg md:text-xl font-bold text-blue-700 dark:text-blue-300 mb-2">
+                        {item.projectTitle}
+                    </h3>
+                    <p className="text-base text-gray-700 dark:text-gray-300 mb-3">
+                        {item.projectDescription}
+                    </p>
+                    <button
+                        type="button"
+                        className="inline-block border-2 border-blue-600 dark:border-blue-400 bg-transparent text-blue-700 dark:text-blue-300 p-1 md:px-4 md:py-1 rounded-lg text-sm font-semibold mb-2 shadow hover:bg-blue-50 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-400"
+                    >
+                        Domain: <span className="font-normal text-[14px]">{item.projectType}</span>
+                    </button>
+                </div>
+                <div className="w-full">
+                    <div className="flex flex-wrap gap-2">
+                        {item.Technologies.map((tech, idx) => (
+                            <span
+                                key={idx}
+                                className={`px-3 py-1 rounded-full text-sm font-medium ${
+                                    [
+                                        "bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-200",
+                                        "bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-200",
+                                        "bg-purple-100 text-purple-900 dark:bg-purple-900 dark:text-purple-200",
+                                        "bg-yellow-100 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200",
+                                        "bg-pink-100 text-pink-900 dark:bg-pink-900 dark:text-pink-200",
+                                        "bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-200",
+                                        "bg-indigo-100 text-indigo-900 dark:bg-indigo-900 dark:text-indigo-200",
+                                        "bg-teal-100 text-teal-900 dark:bg-teal-900 dark:text-teal-200"
+                                    ][idx % 8]
+                                }`}
+                            >
+                                {tech}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+                  ))
+                }
+                </div>
+                </div>
+              {/* Contact Section */}
+              <div className="mb-8">
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+                  Get in Touch
+                </h2>
+                <div className="space-y-3">
+                  <div className="flex items-center space-x-3">
+                    <span className="text-gray-600 dark:text-gray-400">📧</span>
+                    <span className="text-gray-700 dark:text-gray-300">msharafudeen193@gmail.com</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <span className="text-gray-600 dark:text-gray-400">🔗</span>
+                    <a href="https://www.linkedin.com/in/ziyaudheen-ms-b73a75337" className="text-blue-600 dark:text-blue-400 hover:underline">
+                      LinkedIn Profile
+                    </a>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <span className="text-gray-600 dark:text-gray-400">🐙</span>
+                    <a href="https://github.com/ziyaudheenms" className="text-blue-600 dark:text-blue-400 hover:underline">
+                      GitHub Profile
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file