diff --git a/src/App.scss b/src/App.scss
index fbf0a796..10855ae9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -43,4 +43,6 @@
 @import "./assets/styles/liveChat.scss";
 @import "./assets//styles/UserProfile.scss";
 @import "./assets/styles/SellerSideProduct.scss";
-@import "./assets/styles/SellerDeleteItem.scss"
+@import "./assets/styles/SellerDeleteItem.scss";
+@import "./assets/styles/ServicesPage.scss"
+
diff --git a/src/assets/styles/ServicesPage.scss b/src/assets/styles/ServicesPage.scss
new file mode 100644
index 00000000..f6c1e4a0
--- /dev/null
+++ b/src/assets/styles/ServicesPage.scss
@@ -0,0 +1,64 @@
+.services-container {
+  .image-container {
+    width: 100vw;
+    height: 33rem;
+    color: $white;
+    background-image: url(https://res.cloudinary.com/djrmfg6k9/image/upload/v1723647815/Rectangle_168_ztbooe.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    .service-header {
+      color: $primary-color;
+      font-size: 4rem;
+      padding: 5rem;
+    }
+    p {
+      font-size: 2.5rem;
+      padding: 1rem 5rem;
+    }
+  }
+  .services-cards {
+    display: grid;
+    justify-items: center;
+    grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
+    gap: 3rem;
+    padding: 2rem;
+    .cards {
+      display: block;
+      width: 30rem;
+      text-align: left !important;
+      padding: 4rem;
+      margin: 3rem;
+      border-radius: 2rem;
+      border: 3px solid $third-color;
+      transition: all 0.3s ease;
+
+      &:hover {
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+        border-color: $primary-color;
+        transform: translateY(-10px);
+      }
+      .icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: $primary-color;
+        width: 9rem;
+        height: 9rem;
+        border-radius: 50%;
+        color: $black;
+        img {
+          z-index: 100;
+        }
+      }
+      .card-header {
+        font-size: 2.5rem;
+        margin: 2rem 0;
+        color: $black;
+      }
+      p {
+        font-size: 1.9rem;
+        color: $secondary-color;
+      }
+    }
+  }
+}
diff --git a/src/pages/ServicesPage.tsx b/src/pages/ServicesPage.tsx
new file mode 100644
index 00000000..29bf5980
--- /dev/null
+++ b/src/pages/ServicesPage.tsx
@@ -0,0 +1,141 @@
+/* eslint-disable */
+import React from "react";
+import { Meta } from "../components/Meta";
+
+const ServicesPage: React.FC = () => {
+  return (
+    <>
+      <Meta title="Services - E-Commerce Ninjas" />
+      <div className="services-container">
+        <div className="image-container">
+          <p className="service-header">
+            Welcome to e-Commerce Ninjas <br />
+            Customer Services
+          </p>
+          <p>
+            What would you like help with today? <br /> You can quickly take
+            care of most things here, <br /> or connect with us when needed.
+          </p>
+        </div>
+        <div className="services-cards">
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Process_1_uqwerq.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Simplified process</p>
+            <p>
+              e-Commerce-Ninjas.com reviews your claim directly, saving you time
+              spent negotiating with suppliers*.
+            </p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Hangar_1_tzoydr.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Inventory management</p>
+            <p>
+              Better plan out and manage inventory knowing orders will be
+              delivered on time.
+            </p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834911/Transaction_1_mkwskd.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Compensation for delays</p>
+            <p>
+              If late delivery occurs, receive a coupon which can be used for
+              future purchases.
+            </p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Coin_in_Hand_1_gno7gh.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Transparent rates</p>
+            <p>Get competitive pricing and check rates in real-time.</p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Earth_Planet_1_uzxsfr.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Worldwide coverage</p>
+            <p>
+              Enjoy tracked delivery to most countries and regions around the
+              world.
+            </p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Financial_Success_1_qb4kuu.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Tailored solutions</p>
+            <p>
+              Choose from door-to-door and port- to-port services according to
+              your needs and budget.
+            </p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Security_Shield_1_gxwapg.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Security & Privacy</p>
+            <p>
+              e-Commerce-Ninjas.com reviews your claim directly, saving you time
+              spent negotiating with suppliers*.
+            </p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Web_Accessibility_1_n8fof9.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Accessibility</p>
+            <p>
+              Better plan out and manage inventory knowing orders will be
+              delivered on time.
+            </p>
+          </div>
+          <div className="cards">
+            <div className="icon">
+              <img
+                src="https://res.cloudinary.com/djrmfg6k9/image/upload/v1723834910/Customer_Support_1_gott5j.png"
+                alt=""
+              />
+            </div>
+            <p className="card-header">Resolution support</p>
+            <p>
+              If there's a problem with your refund, we will help mediate to get
+              your money back.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ServicesPage;
diff --git a/src/router.tsx b/src/router.tsx
index 15c1e80d..0ab0d6ab 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -28,6 +28,7 @@ import UserProfile from './pages/UserEditProfile';
 import ProductsPage from './pages/Products';
 import TrackOrder from './pages/trackOrder';
 import UserVIewOrders from './pages/UserViewOrders';
+import ServicesPage from './pages/ServicesPage';
 const AppRouter: React.FC = () => {
   return (
     <div>
@@ -36,6 +37,7 @@ const AppRouter: React.FC = () => {
           <Route index element={<LandingPage />} />
           <Route path="/home" element={<LandingPage />} />
           <Route path="/products" element={<ProductsPage />} />
+          <Route path="/services" element={<ServicesPage />} />
           <Route path="signup" element={<SignUp />} />
           <Route path="login" element={<Login />} />
           <Route path="verify-email" element={<EmailVerifying />} />