diff --git a/src/componants/contact/Contact.jsx b/src/componants/contact/Contact.jsx
new file mode 100644
index 0000000..978b18c
--- /dev/null
+++ b/src/componants/contact/Contact.jsx
@@ -0,0 +1,37 @@
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import useScrollOnMount from "src/Hooks/App/useScrollOnMount";
+import PagesHistory from "../Shared/MiniComponents/PagesHistory/PagesHistory";
+import s from "./Contact.module.scss";
+import ContactCardInfo from "./ContactCardSection/ContactCardInfo";
+import ContactForm from "./ContactForm/ContactForm";
+
+const Contact = () => {
+  const { t } = useTranslation();
+
+  useScrollOnMount(0);
+
+  return (
+    <>
+      <Helmet>
+        <title>Contact</title>
+        <meta
+          name="description"
+          content="Get in touch with Exclusive's customer support team for assistance with your orders, inquiries, or feedback. We're here to help you with any questions you may have."
+        />
+      </Helmet>
+
+      <div className="container">
+        <main className={s.contactPage}>
+          <PagesHistory history={["/", t("nav.contact")]} />
+
+          <div className={s.contactContent} id="contact-page">
+            <ContactCardInfo />
+            <ContactForm />
+          </div>
+        </main>
+      </div>
+    </>
+  );
+};
+export default Contact;
diff --git a/src/componants/contact/Contact.module.scss b/src/componants/contact/Contact.module.scss
new file mode 100644
index 0000000..6299357
--- /dev/null
+++ b/src/componants/contact/Contact.module.scss
@@ -0,0 +1,17 @@
+@import "src/Styles/mixins";
+
+.contactPage {
+  margin: 60px 0;
+}
+
+.contactContent {
+  display: flex;
+  gap: 30px;
+  margin-top: 100px;
+}
+
+@include medium {
+  .contactContent {
+    flex-direction: column;
+  }
+}
\ No newline at end of file