diff --git a/src/Components/Contact.jsx b/src/Components/Contact.jsx
new file mode 100644
index 0000000..ed1221f
--- /dev/null
+++ b/src/Components/Contact.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {ContactCard} from "./index"
+const Contact = () => {
+  return (
+    <div className="content w-full min-h-screen pt-24 px-10 flex md:flex-row items-center justify-center flex-col gap-4">
+      <div className="leftbox w-full h-full md:w-[30%]  md:h-screen flex-col items-center justify-center gap-0">
+        <h1 className='text-slate-900/90 text-3xl font-bold text-center py-2 px-4 my-4'> Talk to me </h1>
+        <div className="talkcards w-full h-auto flex-wrap flex justify-center px-4 py-2 ">
+
+        <ContactCard link={"mailto:kkharoliya20@gmail.com"} linkicon={"i"} linktype={"Email"} linkid={"kkharoliya20@gmail.com"} />
+        <ContactCard link={"https://wa.me/919728541543"} linktype={"Whatsapp"} linkid={"+ 91-9728541543"} />
+        <ContactCard link={"https://linkedin.com/in/kuldeep-kumar-a4b71a258"} linktype={"LinkedIn"} linkid={"kuldeep-kumar-a4b71a258"} />
+      </div>
+        </div>
+      <div className="rightbox bg-blue-300 md:w-[70%] w-full md:h-auto h-screen">
+      <h1 className='text-slate-900/90 text-3xl font-bold text-center py-2 px-4 my-4'> Contact me </h1>        
+      <div className="contenttocontact w-full flex-col "></div>
+      </div>
+    </div>
+  )
+}
+
+export default Contact
diff --git a/src/Components/ContactCard.jsx b/src/Components/ContactCard.jsx
new file mode 100644
index 0000000..8415d5e
--- /dev/null
+++ b/src/Components/ContactCard.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+const ContactCard = ({linkicon,link,linktype,linkid}) => {
+  return link && linkid && (
+    <Link to={link} className= "border border-gray-900 flex flex-col rounded-lg px-2 py-4 m-2 text-center justify-between w-auto md:w-[180px] md:max-h-[145px]  ">
+      {linkicon ? 
+      <span className="block icons text-lg font-bold p-2 text-black/90">{linkicon}</span> : ""
+    }
+    {linktype ? 
+      <span className="block linktype text-base font-semibold text-slate-800/80">
+        {linktype}
+      </span>: ""
+      }
+
+      <span className="block linkid text-sm font-semibold text-slate-800/50">
+      {linkid}
+      </span>
+      <p className="pointer  text-xs font-semibold text-slate-800/50">write me 👉</p>
+    </Link>
+  );
+};
+
+export default ContactCard;
diff --git a/src/Components/Contect.jsx b/src/Components/Contect.jsx
deleted file mode 100644
index 5c5cdc2..0000000
--- a/src/Components/Contect.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Contect = () => {
-  return (
-    <div>
-      
-    </div>
-  )
-}
-
-export default Contect
diff --git a/src/Components/ContectCard.jsx b/src/Components/ContectCard.jsx
deleted file mode 100644
index 113638f..0000000
--- a/src/Components/ContectCard.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const ContectCard = () => {
-  return (
-    <div>
-      
-    </div>
-  )
-}
-
-export default ContectCard
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
index c711da4..92bff84 100644
--- a/src/Components/Header/Header.jsx
+++ b/src/Components/Header/Header.jsx
@@ -8,7 +8,7 @@ const Header = () => {
     { url: "/skills", name: "Skills" },
     { url: "/education", name: "Education" },
     { url: "/projects", name: "Projects" },
-    { url: "/contect", name: "Contect" }, 
+    { url: "/contact", name: "Contact" }, 
   ];
 
   const [onHam, setOnHam] = useState(false);
diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index fab74ee..a0ecb08 100644
--- a/src/Components/Home.jsx
+++ b/src/Components/Home.jsx
@@ -22,7 +22,7 @@ const Home = () => {
       <div className="rightside w-full my-8  sm:w-1/2 sm:my-4 h-full flex items-center justify-center">
         <div className="image w-[250px] h-[250px] bg-black/20 rounded-[40%] rotate-[35deg] p-4 border-8 border-black shadow-2xl shadow-slate-950 ">
           <img
-            src="/vite.svg"
+            src="/webicon.svg"
             alt="kuldeep image"
             className="w-full h-full object-cover -rotate-[35deg] p-2"
           />
diff --git a/src/Components/SkillCard.jsx b/src/Components/SkillCard.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Components/index.js b/src/Components/index.js
index ecfb1c2..ba3477c 100644
--- a/src/Components/index.js
+++ b/src/Components/index.js
@@ -1,6 +1,6 @@
 import BigButton from "./BigButton.jsx";
 import ClientCard from "./ClientCard.jsx";
-import ContectCard from "./ContectCard.jsx";
+import ContactCard from "./ContactCard.jsx";
 import Education from "./Education.jsx";
 import Home from "./Home.jsx";
 import Input from "./InputCom.jsx";
@@ -9,7 +9,7 @@ import Header from "./Header/Header.jsx";
 import Footer from "./Footer/Footer.jsx";
 import ProjectCard from "./ProjectCard.jsx";
 import About from "./About.jsx";
-import Contect from "./Contect.jsx";
+import Contact from "./Contact.jsx";
 import Logo from "./Logo.jsx";
 import Projects from "./Projects.jsx";
 
@@ -20,10 +20,10 @@ export {
   ClientCard,
   BigButton,
   Input,
-  ContectCard,
+  ContactCard,
   ProjectCard,
   About,
-  Contect,
+  Contact,
   Header,
   Projects,
   Logo,
diff --git a/src/main.jsx b/src/main.jsx
index ec3a8b1..f0ba703 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,7 +6,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
   Home,
   About,
-  Contect,
+  Contact,
   Projects,
   Skills,
   Education,
@@ -25,8 +25,8 @@ const router = createBrowserRouter([
         element: <About />,
       },
       {
-        path: "/contect",
-        element: <Contect />,
+        path: "/contact",
+        element: <Contact />,
       },
       {
         path: "/projects",