diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 00000000..ac87c5ac
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,14 @@
+import Contact2 from '~/components/widgets/Contact2';
+import Features2 from '~/components/widgets/Features2';
+import { featuresData1 } from '~/shared/data';
+
+const Page = () => {
+  return (
+    <>
+      <Contact2 />
+      <Features2 {...featuresData1} />
+    </>
+  );
+};
+
+export default Page;
diff --git a/app/page.tsx b/app/page.tsx
index 93f19d7a..a98e1034 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,7 +8,7 @@ import FAQs2 from '~/components/widgets/FAQs2';
 import Pricing from '~/components/widgets/Pricing';
 import Team from '~/components/widgets/Team';
 import CallToAction2 from '~/components/widgets/CallToAction2';
-import { content2Data, contentData } from '~/shared/data';
+import { content2Data, contentData, featuresData } from '~/shared/data';
 import Contact from '~/components/widgets/Contact';
 
 export default function Page() {
@@ -16,7 +16,7 @@ export default function Page() {
     <>
       <Hero />
       <SocialProof />
-      <Features3 />
+      <Features3 {...featuresData} />
       <Content {...contentData} />
       <Content {...content2Data} />
       <Steps />
diff --git a/src/components/common/Form.tsx b/src/components/common/Form.tsx
new file mode 100644
index 00000000..7d69a577
--- /dev/null
+++ b/src/components/common/Form.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import { FormProps } from '../../shared/types';
+
+const Form = ({ title, description, inputs, radioBtns, textarea, checkboxes, btn, btnPosition }: FormProps) => {
+  const [inputValues, setInputValues] = useState([]);
+  const [radioBtnValue, setRadioBtnValue] = useState('');
+  const [textareaValues, setTextareaValues] = useState('');
+  const [checkedState, setCheckedState] = useState<boolean[]>(new Array(checkboxes && checkboxes.length).fill(false));
+
+  // Update the value of the entry fields
+  const changeInputValueHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+
+    setInputValues({
+      ...inputValues,
+      [name]: value,
+    });
+  };
+
+  // Update checked radio buttons
+  const changeRadioBtnsHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRadioBtnValue(event.target.value);
+  };
+
+  // Update the textarea value
+  const changeTextareaHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTextareaValues(event.target.value);
+  };
+
+  // Update checkbox radio buttons
+  const changeCheckboxHandler = (index: number) => {
+    setCheckedState((prevValues) => {
+      const newValues = [...(prevValues as boolean[])];
+      newValues.map(() => {
+        newValues[index] = !checkedState[index];
+      });
+      return newValues;
+    });
+  };
+
+  return (
+    <div className="card h-fit max-w-6xl p-5 md:p-12" id="form">
+      {title && <h2 className={`${description ? 'mb-2' : 'mb-4'} text-2xl font-bold`}>{title}</h2>}
+      {description && <p className="mb-4">{description}</p>}
+      <form id="contactForm">
+        <div className="mb-6">
+          {/* Inputs */}
+          <div className="mx-0 mb-1 sm:mb-4">
+            {inputs.map(({ type, label, name, placeholder }, index) => (
+              <div key={`item-input-${index}`} className="mx-0 mb-1 sm:mb-4">
+                <label htmlFor={name} className="pb-1 text-xs uppercase tracking-wider">
+                  {label}
+                </label>
+                <input
+                  type={type}
+                  name={name}
+                  value={inputValues[index]}
+                  onChange={changeInputValueHandler}
+                  placeholder={placeholder}
+                  className="mb-2 w-full rounded-md border border-gray-400 py-2 pl-2 pr-4 shadow-md dark:text-gray-300 sm:mb-0"
+                />
+              </div>
+            ))}
+          </div>
+          {/* Radio buttons */}
+          {radioBtns && (
+            <div className="mx-0 mb-1 sm:mb-3">
+              <label className="pb-1 text-xs uppercase tracking-wider">{radioBtns?.label}</label>
+              <div className="flex flex-wrap">
+                {radioBtns.radios.map(({ label }, index) => (
+                  <div key={`radio-btn-${index}`} className="mr-4 items-baseline">
+                    <input
+                      type="radio"
+                      name={label}
+                      value={`value${index}`}
+                      checked={radioBtnValue === `value${index}`}
+                      onChange={changeRadioBtnsHandler}
+                      className="cursor-pointer"
+                    />
+                    <label className="ml-2">{label}</label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          {/* Textarea */}
+          {textarea && (
+            <div className={`mx-0 mb-1 sm:mb-4`}>
+              <label htmlFor={textarea.name} className="pb-1 text-xs uppercase tracking-wider">
+                {textarea.label}
+              </label>
+              <textarea
+                name={textarea.name}
+                cols={textarea.cols}
+                rows={textarea.rows}
+                value={textareaValues}
+                onChange={(e) => changeTextareaHandler(e)}
+                placeholder={textarea.placeholder}
+                className="mb-2 w-full rounded-md border border-gray-400 py-2 pl-2 pr-4 shadow-md dark:text-gray-300 sm:mb-0"
+              />
+            </div>
+          )}
+          {/* Checkboxes */}
+          {checkboxes && (
+            <div className="mx-0 mb-1 sm:mb-4">
+              {checkboxes.map(({ label }, index) => (
+                <div key={`checkbox-${index}`} className="mx-0 my-1 flex items-baseline">
+                  <input
+                    type="checkbox"
+                    name={label}
+                    checked={checkedState[index]}
+                    onChange={() => changeCheckboxHandler(index)}
+                    className="cursor-pointer"
+                  />
+                  <label className="ml-2">{label}</label>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div
+          className={`${btnPosition === 'left' ? 'text-left' : btnPosition === 'right' ? 'text-right' : 'text-center'}`}
+        >
+          <button type={btn.type} className="btn btn-primary sm:mb-0">
+            {btn.title}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default Form;
diff --git a/src/components/widgets/Contact.tsx b/src/components/widgets/Contact.tsx
index 6c8c9d18..c99c9b68 100644
--- a/src/components/widgets/Contact.tsx
+++ b/src/components/widgets/Contact.tsx
@@ -1,4 +1,5 @@
 import { contactData } from '~/shared/data';
+import Form from '../common/Form';
 import HeaderWidget from '../common/HeaderWidget';
 
 const Contact = () => {
@@ -9,7 +10,7 @@ const Contact = () => {
       <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
         {header && <HeaderWidget header={header} titleClassname="text-3xl sm:text-5xl" />}
         <div className="flex items-stretch justify-center">
-          <div className="grid md:grid-cols-2 md:items-center">
+          <div className="grid md:grid-cols-2">
             <div className="h-full pr-6">
               {content && <p className="mt-3 mb-12 text-lg text-gray-600 dark:text-slate-400">{content}</p>}
               <ul className="mb-6 md:mb-0">
@@ -37,40 +38,7 @@ const Contact = () => {
                 ))}
               </ul>
             </div>
-            <div className="card h-full p-5 md:p-8">
-              <h2 className="text-2xl font-bold">{form.title}</h2>
-              <p>{form.description}</p>
-              <form id="contactForm" className="mt-4">
-                <div className="mb-4">
-                  <div className="my-1 grid grid-cols-1 md:my-0">
-                    {form.inputs.map(({ type, name, placeholder }, index) => (
-                      <div key={`item-input-${index}`} className="my-1 mx-0">
-                        <input
-                          type={type}
-                          name={name}
-                          placeholder={placeholder}
-                          className="w-full rounded-md border border-gray-400 py-2 pl-2 pr-4 shadow-md dark:text-gray-300"
-                        />
-                        <div className="invalid-feedback" style={{ display: 'block' }}></div>
-                      </div>
-                    ))}
-                    <div className="mx-0 my-1">
-                      <textarea
-                        name="text"
-                        cols={30}
-                        rows={5}
-                        placeholder="Write your message..."
-                        className="w-full rounded-md border border-gray-400 py-2 pl-2 pr-4 shadow-md dark:text-gray-300"
-                      ></textarea>
-                      <div className="invalid-feedback" style={{ display: 'block' }}></div>
-                    </div>
-                  </div>
-                </div>
-                <button type={form.btn.type} className="btn btn-primary sm:mb-0">
-                  {form.btn.title}
-                </button>
-              </form>
-            </div>
+            <Form {...form} btnPosition="center" />
           </div>
         </div>
       </div>
diff --git a/src/components/widgets/Contact2.tsx b/src/components/widgets/Contact2.tsx
new file mode 100644
index 00000000..b30e3701
--- /dev/null
+++ b/src/components/widgets/Contact2.tsx
@@ -0,0 +1,20 @@
+import { contact2Data } from '~/shared/data';
+import Form from '../common/Form';
+import HeaderWidget from '../common/HeaderWidget';
+
+const Contact2 = () => {
+  const { header, form } = contact2Data;
+
+  return (
+    <section className="bg-primary-50 dark:bg-slate-800" id="contactTwo">
+      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
+        {header && <HeaderWidget header={header} titleClassname="text-3xl sm:text-5xl" />}
+        <div className="flex items-stretch justify-center">
+          <Form {...form} btnPosition="right" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Contact2;
diff --git a/src/components/widgets/Content.tsx b/src/components/widgets/Content.tsx
index 39872b1f..4791e61b 100644
--- a/src/components/widgets/Content.tsx
+++ b/src/components/widgets/Content.tsx
@@ -1,11 +1,10 @@
-import { FC } from 'react';
 import Image from 'next/image';
 import { IconCheck } from '@tabler/icons-react';
 
 import { ContentProps } from '~/shared/types';
 import HeaderWidget from '../common/HeaderWidget';
 
-const Content: FC<ContentProps> = ({ header, content, items, image, isReversed, isAfterContent }) => (
+const Content = ({ header, content, items, image, isReversed, isAfterContent }: ContentProps) => (
   <section className="bg-primary-50 dark:bg-slate-800">
     <div
       className={`mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 ${isAfterContent ? 'pt-1 pb-16 md:pb-20' : 'py-16 md:py-20'}`}
diff --git a/src/components/widgets/Features.tsx b/src/components/widgets/Features.tsx
index faa20d11..a08eea71 100644
--- a/src/components/widgets/Features.tsx
+++ b/src/components/widgets/Features.tsx
@@ -1,33 +1,29 @@
-import { featuresData } from '~/shared/data';
+import { FeaturesProps } from '~/shared/types';
 import HeaderWidget from '../common/HeaderWidget';
 
-const Features = () => {
-  const { header, items } = featuresData;
-
-  return (
-    <section className="scroll-mt-16" id="features">
-      <div className="mx-auto max-w-6xl px-4 py-16 lg:px-8 lg:py-20">
-        {header && <HeaderWidget header={header} titleClassname="text-4xl md:text-5xl" />}
-        <div className="mx-auto grid space-y-6 md:grid-cols-2 md:space-y-0">
-          {items.map(({ title, description, icon: Icon }, index) => (
-            <div key={`item-feature-${index}`} className="space-y-8 sm:px-8">
-              <div className="flex md:max-w-md">
-                <div className="mb-4 mr-4">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary-500 dark:bg-primary-700">
-                    {Icon && <Icon className="icon-light h-6 w-6 text-white" />}
-                  </div>
-                </div>
-                <div className="mb-0 md:mb-8">
-                  <h3 className="mb-3 text-xl font-bold">{title}</h3>
-                  <p className="text-gray-600 dark:text-slate-400">{description}</p>
+const Features = ({ header, items }: FeaturesProps) => (
+  <section className="scroll-mt-16" id="features">
+    <div className="mx-auto max-w-6xl px-4 py-16 lg:px-8 lg:py-20">
+      {header && <HeaderWidget header={header} titleClassname="text-4xl md:text-5xl" />}
+      <div className="mx-auto grid space-y-6 md:grid-cols-2 md:space-y-0">
+        {items.map(({ title, description, icon: Icon }, index) => (
+          <div key={`item-feature-${index}`} className="space-y-8 sm:px-8">
+            <div className="flex md:max-w-md">
+              <div className="mb-4 mr-4">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary-500 dark:bg-primary-700">
+                  {Icon && <Icon className="icon-light h-6 w-6 text-white" />}
                 </div>
               </div>
+              <div className="mb-0 md:mb-8">
+                <h3 className="mb-3 text-xl font-bold">{title}</h3>
+                <p className="text-gray-600 dark:text-slate-400">{description}</p>
+              </div>
             </div>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
-    </section>
-  );
-};
+    </div>
+  </section>
+);
 
 export default Features;
diff --git a/src/components/widgets/Features2.tsx b/src/components/widgets/Features2.tsx
index 33ea7178..4c34162e 100644
--- a/src/components/widgets/Features2.tsx
+++ b/src/components/widgets/Features2.tsx
@@ -1,31 +1,44 @@
-import { featuresData } from '~/shared/data';
+import { Fragment } from 'react';
+import { FeaturesProps } from '~/shared/types';
 import HeaderWidget from '../common/HeaderWidget';
 
-const Features2 = () => {
-  const { header, items } = featuresData;
-
-  return (
-    <section className="relative py-16 lg:py-20" id="features2">
-      <div className="pointer-events-none absolute inset-0 mb-36 bg-primary-50 dark:bg-slate-800"></div>
-      <div className="relative mx-auto -mb-12 max-w-6xl px-4 sm:px-6">
-        {header && <HeaderWidget header={header} titleClassname="text-4xl md:text-5xl" />}
-        <div className={`my-12 grid items-stretch gap-6 dark:text-white sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3`}>
-          {items.map(({ title, description, icon: Icon }, index) => (
-            <div
-              key={`item-feature2-${index}`}
-              className="relative flex flex-col rounded border border-transparent bg-white p-6 shadow-lg transition hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
-            >
-              <div className="flex items-center">
-                {Icon && <Icon className="h-10 w-10" />}
-                <div className="ml-4 text-xl font-bold">{title}</div>
+const Features2 = ({ header, items }: FeaturesProps) => (
+  <section className="relative py-16 lg:py-20" id="features2">
+    <div className="pointer-events-none absolute inset-0 mb-36 bg-primary-50 dark:bg-slate-800"></div>
+    <div className="relative mx-auto -mb-12 max-w-6xl px-4 sm:px-6">
+      {header && <HeaderWidget header={header} titleClassname="text-4xl md:text-5xl" />}
+      <div
+        className={`my-12 ${
+          items.length > 2 ? 'grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3' : 'flex justify-center'
+        } items-stretch gap-6`}
+      >
+        {items.map(({ title, description, icon: Icon, link }, index) => (
+          <Fragment key={`item-feature2-${index}`}>
+            {link ? (
+              <a
+                href={link.href}
+                className="relative flex min-w-[22em] flex-col rounded border border-transparent bg-white p-6 shadow-lg transition hover:shadow-md dark:border-slate-800 dark:bg-slate-900  dark:text-white dark:shadow-[0_4px_10px_4px_rgba(30,41,59,0.3)]"
+              >
+                <div className="flex items-center">
+                  {Icon && <Icon className="h-10 w-10" />}
+                  <div className="ml-4 text-xl font-bold">{title}</div>
+                </div>
+                {description && <p className="text-md mt-4 text-gray-500 dark:text-gray-400">{description}</p>}
+              </a>
+            ) : (
+              <div className="relative flex min-w-[22em] flex-col rounded border border-transparent bg-white p-6 shadow-lg transition hover:shadow-md dark:border-slate-800 dark:bg-slate-900">
+                <div className="flex items-center">
+                  {Icon && <Icon className="h-10 w-10" />}
+                  <div className="ml-4 text-xl font-bold">{title}</div>
+                </div>
+                {description && <p className="text-md mt-4 text-gray-500 dark:text-gray-400">{description}</p>}
               </div>
-              {description && <p className="text-md mt-4 text-gray-500 dark:text-gray-400">{description}</p>}
-            </div>
-          ))}
-        </div>
+            )}
+          </Fragment>
+        ))}
       </div>
-    </section>
-  );
-};
+    </div>
+  </section>
+);
 
 export default Features2;
diff --git a/src/components/widgets/Features3.tsx b/src/components/widgets/Features3.tsx
index 26b782f5..2059a875 100644
--- a/src/components/widgets/Features3.tsx
+++ b/src/components/widgets/Features3.tsx
@@ -1,48 +1,41 @@
-import { featuresData } from '~/shared/data';
+import { FeaturesProps } from '~/shared/types';
 import HeaderWidget from '../common/HeaderWidget';
 
-const Features3 = () => {
-  const { header, items } = featuresData;
-
-  return (
-    <section className="scroll-mt-16" id="features3">
-      <div className="mx-auto max-w-6xl px-4 py-16 lg:px-8 lg:py-20">
-        {header && <HeaderWidget header={header} titleClassname="text-4xl md:text-5xl" />}
-        <div className="mb-0 grid grid-cols-3 items-start gap-6 dark:text-white sm:grid-cols-2 md:my-12 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
-          {items.map(({ title, description, icon: Icon, callToAction }, index) => (
-            <div
-              key={`item-feature3-${index}`}
-              className="col-span-3 pb-6 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1"
-            >
-              <div className="flex-flow flex">
-                <div className="mb-4 mr-4">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary-900">
-                    {Icon && <Icon className="h-6 w-6 text-white dark:text-slate-200" />}
-                  </div>
-                </div>
-                <div className="flex flex-col justify-between">
-                  <>
-                    <h3 className="mb-3 text-xl font-bold">{title}</h3>
-                    <p className="text-gray-600 dark:text-slate-400">{description}</p>
-                  </>
-                  {callToAction && (
-                    <div className="pt-2">
-                      <a
-                        className="flex font-bold text-blue-600 hover:underline dark:text-gray-200"
-                        href={callToAction.href}
-                      >
-                        {callToAction.text}
-                      </a>
-                    </div>
-                  )}
+const Features3 = ({ header, items }: FeaturesProps) => (
+  <section className="scroll-mt-16" id="features3">
+    <div className="mx-auto max-w-6xl px-4 py-16 lg:px-8 lg:py-20">
+      {header && <HeaderWidget header={header} titleClassname="text-4xl md:text-5xl" />}
+      <div className="mb-0 grid grid-cols-3 items-start gap-6 dark:text-white sm:grid-cols-2 md:my-12 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
+        {items.map(({ title, description, icon: Icon, link }, index) => (
+          <div
+            key={`item-feature3-${index}`}
+            className="col-span-3 pb-6 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1"
+          >
+            <div className="flex-flow flex">
+              <div className="mb-4 mr-4">
+                <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary-900">
+                  {Icon && <Icon className="h-6 w-6 text-white dark:text-slate-200" />}
                 </div>
               </div>
+              <div className="flex flex-col justify-between">
+                <>
+                  <h3 className="mb-3 text-xl font-bold">{title}</h3>
+                  <p className="text-gray-600 dark:text-slate-400">{description}</p>
+                </>
+                {link && (
+                  <div className="pt-2">
+                    <a className="flex font-bold text-blue-600 hover:underline dark:text-gray-200" href={link.href}>
+                      {link.label}
+                    </a>
+                  </div>
+                )}
+              </div>
             </div>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
-    </section>
-  );
-};
+    </div>
+  </section>
+);
 
 export default Features3;
diff --git a/src/shared/data.tsx b/src/shared/data.tsx
index 63f7c399..de7a94f7 100644
--- a/src/shared/data.tsx
+++ b/src/shared/data.tsx
@@ -13,9 +13,12 @@ import {
   IconClock,
   IconComponents,
   IconDownload,
+  IconHeadset,
+  IconHelp,
   IconListCheck,
   IconMail,
   IconMapPin,
+  IconMessages,
   IconPhoneCall,
   IconRocket,
   IconRss,
@@ -74,7 +77,7 @@ export const headerData: HeaderProps = {
         },
         {
           label: 'Contact',
-          href: '/',
+          href: '/contact',
         },
       ],
     },
@@ -287,8 +290,8 @@ export const featuresData: FeaturesProps = {
       description:
         'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
       icon: IconBrandTailwind,
-      callToAction: {
-        text: 'Discover now',
+      link: {
+        label: 'Discover now',
         href: '/',
       },
     },
@@ -297,8 +300,8 @@ export const featuresData: FeaturesProps = {
       description:
         'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
       icon: IconComponents,
-      callToAction: {
-        text: 'Discover now',
+      link: {
+        label: 'Discover now',
         href: '/',
       },
     },
@@ -307,8 +310,8 @@ export const featuresData: FeaturesProps = {
       description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
       icon: IconListCheck,
-      callToAction: {
-        text: 'Discover now',
+      link: {
+        label: 'Discover now',
         href: '/',
       },
     },
@@ -317,8 +320,8 @@ export const featuresData: FeaturesProps = {
       description:
         'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
       icon: IconRocket,
-      callToAction: {
-        text: 'Discover now',
+      link: {
+        label: 'Discover now',
         href: '/',
       },
     },
@@ -327,8 +330,8 @@ export const featuresData: FeaturesProps = {
       description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
       icon: IconArrowsRightLeft,
-      callToAction: {
-        text: 'Discover now',
+      link: {
+        label: 'Discover now',
         href: '/',
       },
     },
@@ -337,8 +340,41 @@ export const featuresData: FeaturesProps = {
       description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
       icon: IconBulb,
-      callToAction: {
-        text: 'Discover now',
+      link: {
+        label: 'Discover now',
+        href: '/',
+      },
+    },
+  ],
+};
+
+export const featuresData1: FeaturesProps = {
+  header: {
+    title: 'Support Center',
+    subtitle: 'Looking for something in particular?',
+  },
+  items: [
+    {
+      title: 'Have a question?',
+      description: 'See our frequently asked questions',
+      icon: IconHelp,
+      link: {
+        href: '/',
+      },
+    },
+    {
+      title: 'Chat with us',
+      description: 'Live chat with our support team',
+      icon: IconMessages,
+      link: {
+        href: '/',
+      },
+    },
+    {
+      title: 'Get help',
+      description: 'Speak to our team today',
+      icon: IconHeadset,
+      link: {
         href: '/',
       },
     },
@@ -816,6 +852,103 @@ export const contactData: ContactProps = {
         placeholder: 'Your email address',
       },
     ],
+    textarea: {
+      cols: 30,
+      rows: 5,
+      name: 'textarea',
+      placeholder: 'Write your message...',
+    },
+    btn: {
+      title: 'Send Message',
+      type: 'submit',
+    },
+  },
+};
+
+// Contact2 data
+export const contact2Data: ContactProps = {
+  header: {
+    title: 'Get in Touch',
+    subtitle: 'In hac habitasse platea dictumst',
+    highlight: 'Contact',
+  },
+  content:
+    'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis nec ipsum orci. Ut scelerisque sagittis ante, ac tincidunt sem venenatis ut.',
+  items: [
+    {
+      title: 'Our Address',
+      description: ['1230 Maecenas Street Donec Road', 'New York, EEUU'],
+      icon: IconMapPin,
+    },
+    {
+      title: 'Contact',
+      description: ['Mobile: +1 (123) 456-7890', 'Mail: tailnext@gmail.com'],
+      icon: IconPhoneCall,
+    },
+    {
+      title: 'Working hours',
+      description: ['Monday - Friday: 08:00 - 17:00', 'Saturday & Sunday: 08:00 - 12:00'],
+      icon: IconClock,
+    },
+  ],
+  form: {
+    title: 'Ready to Get Started?',
+    description:
+      'Mauris consequat, urna vel varius auctor, enim risus ornare felis, at hendrerit erat justo eu justo. Curabitur sagittis efficitur aliquam. Duis eget porttitor lectus, vel pharetra ex. Nam volutpat nibh ut porta egestas.',
+    inputs: [
+      {
+        type: 'text',
+        label: 'First name',
+        name: 'name',
+        placeholder: 'First name',
+      },
+      {
+        type: 'text',
+        label: 'Last name',
+        name: 'lastName',
+        placeholder: 'Last name',
+      },
+      {
+        type: 'email',
+        label: 'Email address',
+        name: 'email',
+        placeholder: 'Email address',
+      },
+    ],
+    radioBtns: {
+      label: 'What is the reason for your contact?',
+      radios: [
+        {
+          label: 'General inquiries',
+        },
+        {
+          label: 'Technical help',
+        },
+        {
+          label: 'Claims',
+        },
+        {
+          label: 'Others',
+        },
+      ],
+    },
+    textarea: {
+      cols: 30,
+      rows: 5,
+      label: 'How can we help you?',
+      name: 'textarea',
+      placeholder: 'Write your message...',
+    },
+    checkboxes: [
+      {
+        label: 'Have you read our privacy policy?',
+        value: '',
+      },
+      {
+        label: 'Do you want to receive monthly updates by email?',
+        value: '',
+      },
+    ],
     btn: {
       title: 'Send Message',
       type: 'submit',
diff --git a/src/shared/types.d.ts b/src/shared/types.d.ts
index 27e246e2..becb5948 100644
--- a/src/shared/types.d.ts
+++ b/src/shared/types.d.ts
@@ -5,7 +5,7 @@ interface Header {
   title?: string | ReactElement;
   subtitle?: string;
   highlight?: string;
-  position?: string;
+  position?: 'center' | 'right' | 'left';
 }
 
 interface CallToAction {
@@ -21,21 +21,49 @@ interface Button {
 
 interface Input {
   type: string;
+  label?: string;
+  value?: string;
   name: string;
   placeholder?: string;
 }
 
+interface Textarea {
+  cols?: number;
+  rows?: number;
+  label?: string;
+  name: string;
+  placeholder?: string;
+}
+
+interface Checkbox {
+  label: string;
+  value: string;
+}
+
+interface Radio {
+  label: string;
+}
+
+interface RadioBtn {
+  label?: string;
+  radios: Array<Radio>;
+}
+
 interface SmallForm {
   icon?: Function;
   input: Input;
   btn: Button;
 }
 
-interface Form {
+interface FormProps {
   title?: string;
   description?: string;
   inputs: Array<Input>;
+  radioBtns?: RadioBtn;
+  textarea?: Textarea;
+  checkboxes?: Array<Checkbox>;
   btn: Button;
+  btnPosition?: 'center' | 'right' | 'left';
 }
 
 interface Image {
@@ -50,6 +78,7 @@ interface Item {
   form?: SmallForm;
   icon?: Function;
   callToAction?: CallToAction;
+  link?: Link;
 }
 
 interface Team {
@@ -187,7 +216,7 @@ interface ContactProps {
   header?: Header;
   content?: string;
   items: Array<Item>;
-  form: Form;
+  form: FormProps;
 }
 
 interface FooterProps {
@@ -205,7 +234,7 @@ interface HeaderProps {
   isSticky?: boolean;
   showToggleTheme?: boolean;
   showRssFeed?: boolean;
-  position?: string;
+  position?: 'center' | 'right' | 'left';
 }
 
 interface ToggleMenuProps {