diff --git a/.env b/.env
index 34b74ea..48b23cd 100644
--- a/.env
+++ b/.env
@@ -2,4 +2,5 @@ STRIPE_PRICING_TABLE=prctbl_1O0hFcFI67mXFum2kEqiD57r
 STRIPE_KEY=pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ
 STRIPE_SECRET=sk_test_51NzD5xFI67mXFum2Lzi2JtR8Th9zuA3CnoKKkAaOBiHmiHDQdGt7Pruj1Z89e4nF5eVNStL866twJLoVBUgfiaxZ00yqst8gkh
 
-WEBHOOK_URL=http://localhost:3001/api/stripe
\ No newline at end of file
+WEBHOOK_URL=http://localhost:3001/api/stripe
+NEXT_PUBLIC_APP_URL=http://localhost:3001
\ No newline at end of file
diff --git a/package.json b/package.json
index 69826da..01fabc1 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@stripe/stripe-js": "^2.1.7",
     "axios": "^1.5.1",
     "clsx": "^2.0.0",
+    "currency-symbol-map": "^5.1.0",
+    "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "next": "13.5.4",
     "react": "^18",
@@ -24,6 +26,7 @@
     "sharp": "^0.32.6"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/public/banner_encoach.jpeg b/public/banner_encoach.jpeg
deleted file mode 100644
index 78091e3..0000000
Binary files a/public/banner_encoach.jpeg and /dev/null differ
diff --git a/public/banner_encoach_home.png b/public/banner_encoach_home.png
new file mode 100644
index 0000000..c7e4ef9
Binary files /dev/null and b/public/banner_encoach_home.png differ
diff --git a/src/app/ar/price/page.tsx b/src/app/ar/price/page.tsx
new file mode 100644
index 0000000..9e42ebf
--- /dev/null
+++ b/src/app/ar/price/page.tsx
@@ -0,0 +1,5 @@
+import Price from "@/templates/Price";
+
+export default function Page() {
+  return <Price language="ar" />;
+}
diff --git a/src/app/price/page.tsx b/src/app/price/page.tsx
new file mode 100644
index 0000000..8d0e1ba
--- /dev/null
+++ b/src/app/price/page.tsx
@@ -0,0 +1,5 @@
+import Price from "@/templates/Price";
+
+export default function Page() {
+	return <Price language="en" />;
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d0e9aab..0a4db3c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -13,6 +13,7 @@ import translation from "@/translation/navbar.json";
 const items = [
 	{page: "/", key: "home"},
 	{page: "/services", key: "services"},
+	{page: "/price", key: "price"},
 	{page: "/about", key: "about"},
 	{page: "/history", key: "history"},
 	{page: "/contact", key: "contact"},
@@ -25,7 +26,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 		<>
 			<header className="w-full px-11 py-3 md:flex justify-between items-center -md:hidden shadow-sm">
 				<Link href="/">
-					<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
+					<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
 				</Link>
 				<div className={clsx("flex gap-8 items-center w-fit", language === "ar" && "flex-row-reverse")}>
 					{items.map((item) => (
@@ -93,7 +94,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 								<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
 									<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
 										<Link href="/">
-											<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
+											<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
 										</Link>
 										<div className="flex gap-4 items-center">
 											{language === "ar" ? (
diff --git a/src/templates/Home.tsx b/src/templates/Home.tsx
index 26d341a..42cbf61 100644
--- a/src/templates/Home.tsx
+++ b/src/templates/Home.tsx
@@ -2,21 +2,13 @@
 import Link from "next/link";
 import {
 	BsBook,
-	BsCardChecklist,
-	BsClipboardFill,
-	BsClockFill,
 	BsHeadphones,
-	BsInstagram,
 	BsMegaphone,
 	BsPen,
-	BsShieldFillCheck,
-	BsTwitter,
 } from "react-icons/bs";
-import {BiLogoFacebook} from "react-icons/bi";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import translation from "@/translation/home.json";
-import reactStringReplace from "react-string-replace";
 import clsx from "clsx";
 import Tag from "@/components/Tag";
 import Title from "@/components/Title";
@@ -31,7 +23,7 @@ export default function Home({language}: Props) {
 			<Navbar currentPage="/" language={language} />
 
 			<section className="w-full relative bg-white">
-				<img src="/banner_encoach.jpeg" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
+				<img src="/banner_encoach_home.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
 				<Link href="/join">
 					<button className="absolute bottom-1/12 -lg:hidden left-1/12 bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
 						{translation.get_started_btn[language]}
diff --git a/src/templates/Price.tsx b/src/templates/Price.tsx
new file mode 100644
index 0000000..4ecff66
--- /dev/null
+++ b/src/templates/Price.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { capitalize } from "lodash";
+import getSymbolFromCurrency from "currency-symbol-map";
+import clsx from "clsx";
+import Navbar from "@/components/Navbar";
+import Link from "next/link";
+import Footer from "@/components/Footer";
+import translation from "@/translation/price.json";
+
+type DurationUnit = "weeks" | "days" | "months" | "years";
+
+interface Package {
+  id: string;
+  currency: string;
+  duration: number;
+  duration_unit: DurationUnit;
+  price: number;
+}
+
+export default function Page({ language }: { language: "en" | "ar" }) {
+  const [payments, setPayments] = React.useState<Package[]>([]);
+  const getData = async () => {
+    // Fetch data from external API
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_APP_URL}/api/packages`,
+      {
+        method: "GET",
+      }
+    );
+
+    if (response.status === 200) {
+      const payments = await response.json();
+      // Pass data to the page via props
+      setPayments(payments);
+      return;
+    }
+  };
+
+  React.useEffect(() => {
+    getData();
+  }, []);
+  return (
+    <main className="h-screen w-full bg-white text-mti-black flex flex-col">
+      <Navbar currentPage="/join" language="en" />
+
+      <section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4">
+        <h2 className="text-3xl font-bold">{translation.title[language]}</h2>
+        <div className="grid grid-cols-2 gap-8">
+          {payments.map((p) => (
+            <div
+              key={p.id}
+              className={clsx(
+                "p-4 bg-white rounded-xl flex flex-col gap-6 items-start"
+              )}
+            >
+              <div className="flex flex-col items-start mb-2">
+                <Image
+                  src="/logo_title.png"
+                  alt="EnCoach's Logo"
+                  width={32}
+                  height={32}
+                />
+                <span className="font-semibold text-xl">
+                  EnCoach - {p.duration}{" "}
+                  {capitalize(
+                    p.duration === 1
+                      ? p.duration_unit.slice(0, p.duration_unit.length - 1)
+                      : p.duration_unit
+                  )}
+                </span>
+              </div>
+              <div className="flex flex-col gap-2 items-start w-full">
+                <span className="text-2xl">
+                  {p.price}
+                  {getSymbolFromCurrency(p.currency)}
+                </span>
+              </div>
+              <div className="flex flex-col gap-1 items-start">
+                <span>{translation.packageIncludes[language]}</span>
+                <ul className="flex flex-col items-start text-sm">
+                  <li>- {translation.packageIncludesA[language]}</li>
+                  <li>- {translation.packageIncludesB[language]}</li>
+                  <li>- {translation.packageIncludesC[language]}</li>
+                </ul>
+              </div>
+            </div>
+          ))}
+        </div>
+        <Link
+          className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl mb-8"
+          href={`${process.env.NEXT_PUBLIC_APP_URL}/register`}
+        >
+          {translation.joinus[language]}
+        </Link>
+      </section>
+      <Footer language={language} />
+    </main>
+  );
+}
diff --git a/src/translation/navbar.json b/src/translation/navbar.json
index 44d6dbd..08e6609 100644
--- a/src/translation/navbar.json
+++ b/src/translation/navbar.json
@@ -7,6 +7,10 @@
     "en": "Services",
     "ar": "خدماتنا"
   },
+  "price": {
+    "en": "Price",
+    "ar": "الأسعار"
+  },
   "about": {
     "en": "About us",
     "ar": "نبذة عنا"
diff --git a/src/translation/price.json b/src/translation/price.json
new file mode 100644
index 0000000..79d7f9a
--- /dev/null
+++ b/src/translation/price.json
@@ -0,0 +1,26 @@
+{
+  "joinus": {
+    "en": "Join us",
+    "ar": "Join us"
+  },
+  "title": {
+    "en": "Available Packages",
+    "ar": "Available Packages"
+  },
+  "packageIncludes": {
+    "en": "This includes:",
+    "ar": "This includes:"
+  },
+  "packageIncludesA": {
+    "en": "Train your abilities for the IELTS exam",
+    "ar": "Train your abilities for the IELTS exam"
+  },
+  "packageIncludesB": {
+    "en": "Gain insights into your weaknesses and strengths",
+    "ar": "Gain insights into your weaknesses and strengths"
+  },
+  "packageIncludesC": {
+    "en": "Allow yourself to correctly prepare for the exam",
+    "ar": "Allow yourself to correctly prepare for the exam"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 0e1860a..214e885 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -216,6 +216,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.14.202":
+  version "4.14.202"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
 "@types/node@^20":
   version "20.8.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.3.tgz#c4ae2bb1cfab2999ed441a95c122bbbe1567a66d"
@@ -682,6 +687,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+currency-symbol-map@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-5.1.0.tgz#59531fbe977ba95e8d358e90e3c9e9053efb75ad"
+  integrity sha512-LO/lzYRw134LMDVnLyAf1dHE5tyO6axEFkR3TXjQIOmMkAM9YL6QsiUwuXzZAmFnuDJcs4hayOgyIYtViXFrLw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -1769,6 +1779,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"