diff --git a/frontend/src/assets/cart_backgroundPhoto.png b/frontend/src/assets/cart_backgroundPhoto.png
new file mode 100644
index 0000000..b54e06e
Binary files /dev/null and b/frontend/src/assets/cart_backgroundPhoto.png differ
diff --git a/frontend/src/pages/cart/cart.js b/frontend/src/pages/cart/cart.js
index ba45595..f9058a2 100644
--- a/frontend/src/pages/cart/cart.js
+++ b/frontend/src/pages/cart/cart.js
@@ -1,3 +1,91 @@
+import React, { useState } from 'react';
+import styles from './cart.module.css';
+import Title from '../../components/ui/Title/Title';
+import Form from '../../components/ui/Form/Form.tsx';
+import backgroundImage from '../../assets/cart_backgroundPhoto.png';
+
 export default function CartPage() {
-  return <div>CartPage</div>;
+  const [cardNumber, setCardNumber] = useState('');
+  const [expireDate, setExpireDate] = useState('');
+  const [cvv, setCvv] = useState('');
+
+  const handleSubmit = (data, e) => {
+    e.preventDefault();
+  };
+
+  const handleCardNumberChange = (value) => {
+    setCardNumber(value);
+  };
+
+  const handleExpireDateChange = (value) => {
+    setExpireDate(value);
+  };
+
+  const handleCvvChange = (value) => {
+    setCvv(value);
+  };
+
+  const inputsArray = [
+    {
+      label: 'Card Number',
+      name: 'cardNumber',
+      onChange: handleCardNumberChange,
+      value: cardNumber,
+      type: 'text',
+      className: `${styles.input_field_card} input-field ${styles.card_number}`,
+      class: styles.first_input,
+      labelClassName: styles.label_wrapper,
+      validationFunc: (value) => {
+        const regex = /^[0-9]{16}$/;
+        return regex.test(value);
+      },
+      errorMsg: 'Please enter a valid 16-digit card number',
+    },
+    {
+      label: 'Expiration Date',
+      name: 'expireDate',
+      onChange: handleExpireDateChange,
+      value: expireDate,
+      type: 'text',
+      className: `${styles.input_field_card} input-field ${styles.expDate}`,
+      labelClassName: styles.label_wrapper,
+      validationFunc: (value) => {
+        const regex = /^(0[1-9]|1[0-2])\/([0-9]{2})$/;
+        return regex.test(value);
+      },
+      errorMsg: 'Please enter a valid expiration date (MM/YY)',
+    },
+    {
+      label: 'CVV',
+      name: 'cvv',
+      onChange: handleCvvChange,
+      value: cvv,
+      type: 'text',
+      className: `${styles.input_field_card} input-field `,
+      labelClassName: styles.label_wrapper,
+      validationFunc: (value) => {
+        const regex = /^[0-9]{3,4}$/;
+        return regex.test(value);
+      },
+      errorMsg: 'Please enter a valid CVV (3-4 digits)',
+    },
+  ];
+
+  return (
+    <div className={styles.background} style={{ backgroundImage: `url(${backgroundImage})` }}>
+      <Title variant='h2' title='Cart' />
+      <div className={styles.container}>
+        <div className={styles.payment}>
+          <Form
+            onSubmit={handleSubmit}
+            inputs={inputsArray}
+            className={styles.form}
+            primaryButtonText='Buy it Now !'
+            buttonsClassName={styles.button_wrapper}
+          />
+        </div>
+        <div className={styles.restOfThePage} />
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/src/pages/cart/cart.module.css b/frontend/src/pages/cart/cart.module.css
new file mode 100644
index 0000000..64a5e88
--- /dev/null
+++ b/frontend/src/pages/cart/cart.module.css
@@ -0,0 +1,12 @@
+.background {
+  background-image: url('../../assets/cart_backgroundPhoto.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin-right: 51rem;
+}
diff --git a/frontend/src/pages/planTrip/planTrip.module.css b/frontend/src/pages/planTrip/planTrip.module.css
index 32aca76..e52137a 100644
--- a/frontend/src/pages/planTrip/planTrip.module.css
+++ b/frontend/src/pages/planTrip/planTrip.module.css
@@ -1,83 +1,82 @@
-
 .searchTrip {
-display: flex;
-justify-content: space-around;
-position: relative;
-margin-bottom: 2rem;
-} 
+  display: flex;
+  justify-content: space-around;
+  position: relative;
+  margin-bottom: 2rem;
+}
 
 header {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 h2 {
-    padding-top: 5rem;
-    padding-bottom: 2rem;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
+  padding-top: 5rem;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
 }
 
 .bg_image {
-    background-Image: url('../../assets/tripImage.png');
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 60%;
-    width: 100%;
-    position: fixed;
-    background-position: center center;
-    position: relative;
+  background-image: url('../../assets/tripImage.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 60%;
+  width: 100%;
+  position: fixed;
+  background-position: center center;
+  position: relative;
 }
 
 .title_search {
-    display: flex;
+  display: flex;
 }
 
-.divSearchTrip{
-    padding-left:1rem;
+.divSearchTrip {
+  padding-left: 1rem;
 }
 
 .restOfThePage {
-    background-color: var(--white);
-    height: 72.5vh;
-    width: 100%;
-    position: absolute;
-    object-fit: cover;
+  background-color: var(--white);
+  height: 72.5vh;
+  width: 100%;
+  position: absolute;
+  object-fit: cover;
 }
 
 label {
-    text-align: left;
-    font-size: small;
-    margin:0rem 0.2rem;
+  text-align: left;
+  font-size: small;
+  margin: 0rem 0.5rem;
 }
 
 .form {
-    display: flex;
-    flex-direction: row;
-  }
-  
-  .form_item {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-  }
+  display: flex;
+  flex-direction: row;
+}
 
-  .input_wrapper {
-    display: flex;
-    flex-direction: column;
-  }
+.form_item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
 
-  .label_wrapper {
-    display: flex;
-    margin: 0rem 1rem;
-  }
+.input_wrapper {
+  display: flex;
+  flex-direction: column;
+}
 
-  .button_wrapper {
-    margin-top: 1rem;
-  }
+.label_wrapper {
+  display: flex;
+  margin: 0rem 1rem;
+}
+
+.button_wrapper {
+  margin-top: 1rem;
+}
 
-  .card_container {
-    color: var(--black) ;
-  }
\ No newline at end of file
+.card_container {
+  color: var(--black);
+}