diff --git a/src/app/join/page.tsx b/src/app/join/page.tsx
deleted file mode 100644
index e8270d7..0000000
--- a/src/app/join/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-import Link from "next/link";
-import {BsInstagram, BsTwitter} from "react-icons/bs";
-import {BiLogoFacebook} from "react-icons/bi";
-import Navbar from "@/components/Navbar";
-import PricingTable from "@/components/PricingTable";
-import Footer from "@/components/Footer";
-
-export default function Home() {
-	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 py-20 lg:py-48 px-8 flex flex-col items-center text-center gap-4">
-				<h2 className="text-3xl font-bold">Available Packages</h2>
-				<div className="flex flex-col gap-1">
-					<span className="max-w-lg">
-						Once the payment process is complete, you will receive a code via e-mail to register to the application.
-					</span>
-					<span className="max-w-lg">(Or have time added to your account, if already registered with the given e-mail).</span>
-					<PricingTable />
-				</div>
-			</section>
-
-			<Footer language="en" />
-		</main>
-	);
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0553799..e3b998c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -26,9 +26,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
 					httpEquiv="Content-Security-Policy-Report-Only"
 					content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost"
 				/>
-
-				<script async src="https://js.stripe.com/v3/pricing-table.js" />
-
 				<link rel="preconnect" href="https://fonts.googleapis.com" />
 				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
 				<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fbf09cc..c779b09 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -28,7 +28,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 				<Link href="/">
 					<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
 				</Link>
-				<div className={clsx("flex w-fit items-center gap-8", language === "ar" && "flex-row-reverse")}>
+				<div className={clsx("flex w-fit items-center gap-8")}>
 					{items.map((item) => (
 						<Link
 							key={item.key}
@@ -130,11 +130,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 										))}
 										<Link
 											href="https://platform.encoach.com/register"
-											className={clsx(
-												"w-fit transition duration-300 ease-in-out",
-												currentPage === "/join" &&
-													"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
-											)}>
+											className="w-fit transition duration-300 ease-in-out">
 											{translation.join[language]}
 										</Link>
 										<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>
diff --git a/src/components/PricingTable.tsx b/src/components/PricingTable.tsx
deleted file mode 100644
index 0ece58c..0000000
--- a/src/components/PricingTable.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import {Elements} from "@stripe/react-stripe-js";
-import {loadStripe} from "@stripe/stripe-js";
-
-const stripePromise = loadStripe(process.env.STRIPE_KEY || "");
-
-export default function PricingTable() {
-	return (
-		<Elements stripe={stripePromise}>
-			<stripe-pricing-table id="pricing" pricing-table-id={process.env.STRIPE_PRICING_TABLE} publishable-key={process.env.STRIPE_KEY} />
-		</Elements>
-	);
-}
-
-// If using TypeScript, add the following snippet to your file as well.
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			"stripe-pricing-table": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-		}
-	}
-}
diff --git a/src/templates/About.tsx b/src/templates/About.tsx
index 4b691c0..a255c46 100644
--- a/src/templates/About.tsx
+++ b/src/templates/About.tsx
@@ -30,7 +30,7 @@ interface Props {
 
 export default function About({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/about" language={language} />
 
 			<section className="w-full h-full bg-mti-purple text-white text-center p-8 md:p-16">
@@ -86,12 +86,12 @@ export default function About({language}: Props) {
 			{/* CEO Message Section */}
 			<section id="message" className="w-full bg-white">
 				<div className="w-full flex -md:flex-col -md:items-center -md:pb-16 justify-between gap-8 p-8 md:p-20 container mx-auto">
-					<div className={clsx(language === "ar" ? "text-right" : "text-left", "flex flex-col gap-8 max-w-xl")}>
+					<div className={clsx("flex flex-col gap-8 max-w-xl")}>
 						<Title>{translation.ceo_message.title[language]}</Title>
 						<span>
 							{translation.ceo_message.text[language].split("\n").map((line, index) => (
 								<React.Fragment key={index}>
-									<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
+									<p>{line}</p>
 									<br />
 								</React.Fragment>
 							))}
@@ -115,12 +115,8 @@ export default function About({language}: Props) {
 
 			{/* Capabilities */}
 			<section id="capabilities" className="w-full bg-mti-gray-seasalt">
-				<div
-					className={clsx(
-						"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
-						language === "ar" && "text-right",
-					)}>
-					<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
+				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
+					<div className={clsx("w-full flex")}>
 						<Title>{translation.capabilities.title[language]}</Title>
 					</div>
 					<span className="text-lg">{translation.capabilities.intro[language]}</span>
@@ -182,12 +178,8 @@ export default function About({language}: Props) {
 
 			{/* Expertise */}
 			<section id="expertise" className="w-full bg-white">
-				<div
-					className={clsx(
-						"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
-						language === "ar" && "text-right",
-					)}>
-					<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
+				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
+					<div className={clsx("w-full flex")}>
 						<Title>{translation.expertise.title[language]}</Title>
 					</div>
 					<span className="text-lg">{translation.expertise.intro[language]}</span>
diff --git a/src/templates/ComingSoon.tsx b/src/templates/ComingSoon.tsx
index 7fbaad3..7d0f437 100644
--- a/src/templates/ComingSoon.tsx
+++ b/src/templates/ComingSoon.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 export default function ComingSoon({ page, language }: Props) {
   return (
-    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
+    <main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
       <Navbar currentPage={page} language={language} />
 
       <section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
diff --git a/src/templates/History.tsx b/src/templates/History.tsx
index 8e1341c..cae76a3 100644
--- a/src/templates/History.tsx
+++ b/src/templates/History.tsx
@@ -50,7 +50,7 @@ const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
 
 export default function History({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/history" language={language} />
 
 			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
diff --git a/src/templates/Home.tsx b/src/templates/Home.tsx
index 5842291..a25ad3a 100644
--- a/src/templates/Home.tsx
+++ b/src/templates/Home.tsx
@@ -14,7 +14,9 @@ interface Props {
 
 export default function Home({language}: Props) {
 	return (
-		<main className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}>
+		<main
+			className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}
+			dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/" language={language} />
 
 			<section className="w-full relative bg-white">
@@ -77,7 +79,7 @@ export default function Home({language}: Props) {
 							<Title>{translation.learn_ai.title[language]}</Title>
 							<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
 						</div>
-						<Link href="/join">
+						<Link href="/price">
 							<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
 								{translation.learn_more[language]}
 							</button>
@@ -169,7 +171,7 @@ export default function Home({language}: Props) {
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-10 -bottom-10" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-20 -bottom-10" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-30 -bottom-10" />
-							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -bottom-10" />
+							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -bottom-10 left-0" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 -bottom-10" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-0" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-10" />
diff --git a/src/templates/Price.tsx b/src/templates/Price.tsx
index f1cec90..582ccc2 100644
--- a/src/templates/Price.tsx
+++ b/src/templates/Price.tsx
@@ -21,6 +21,28 @@ interface Package {
 }
 
 export default function Page({language}: {language: "en" | "ar"}) {
+	const getDurationUnit = (duration: number, durationUnitSingular: string, durationUnitPlural: string) => {
+		if(duration >= 2 && duration <= 10) {
+			return durationUnitPlural;
+		}
+
+		return durationUnitSingular;
+	}
+	const durationAndDurationUnitParser = (duration: number, duration_unit: DurationUnit) => {
+		if(language === 'ar') {
+			switch (duration_unit) {
+				case "days":
+					return `${duration} ${getDurationUnit(duration, translation.days.singular[language], translation.days.plural[language])}`;
+				case "weeks":
+					return `${duration} ${getDurationUnit(duration, translation.weeks.singular[language], translation.weeks.plural[language])}`;
+				case "months":
+					return `${duration} ${getDurationUnit(duration, translation.months.singular[language], translation.months.plural[language])}`;
+			}
+		}
+
+		return capitalize(duration === 1 ? duration_unit.slice(0, duration_unit.length - 1) : duration_unit);
+	}
+
 	const [payments, setPayments] = React.useState<Package[]>([]);
 	const getData = async () => {
 		// Fetch data from external API
@@ -40,10 +62,9 @@ export default function Page({language}: {language: "en" | "ar"}) {
 		getData();
 	}, []);
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/price" language={language} />
-
-			<section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4" dir={language === "ar" ? "rtl" : "ltr"}>
+			<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) => (
@@ -51,8 +72,7 @@ export default function Page({language}: {language: "en" | "ar"}) {
 							<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)}
+									{translation.encoach[language]} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
 								</span>
 							</div>
 							<div className="flex flex-col gap-2 items-start w-full">
diff --git a/src/templates/Privacy.tsx b/src/templates/Privacy.tsx
index 8783ad8..71f7e44 100644
--- a/src/templates/Privacy.tsx
+++ b/src/templates/Privacy.tsx
@@ -22,16 +22,16 @@ interface Content {
 
 export default function Privacy({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/terms" language={language} />
 
-			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16" dir={language === "ar" ? "rtl" : "ltr"}>
+			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
 				<div className="w-full h-full flex flex-col items-center justify-center">
 					<Title>{translation.title[language]}</Title>
 				</div>
 			</section>
 
-			<section id="terms" className="w-full h-fit bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
+			<section id="terms" className="w-full h-fit bg-white">
 				<div
 					className={clsx(
 						"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",
diff --git a/src/templates/Services.tsx b/src/templates/Services.tsx
index 38272e2..93d8600 100644
--- a/src/templates/Services.tsx
+++ b/src/templates/Services.tsx
@@ -2,222 +2,189 @@ import Navbar from "@/components/Navbar";
 import clsx from "clsx";
 import Title from "@/components/Title";
 import {
-  BsBook,
-  BsBlockquoteLeft,
-  BsFillPencilFill,
-  BsMic,
-  BsSoundwave,
-  BsBookmarkStar,
-  BsCheck2Circle,
-  BsEarbuds,
-  BsFileBarGraph,
-  BsBank,
+	BsBook,
+	BsBlockquoteLeft,
+	BsFillPencilFill,
+	BsMic,
+	BsSoundwave,
+	BsBookmarkStar,
+	BsCheck2Circle,
+	BsEarbuds,
+	BsFileBarGraph,
+	BsBank,
 } from "react-icons/bs";
 import translation from "@/translation/services.json";
 import Footer from "@/components/Footer";
 
 interface Props {
-  language: "en" | "ar";
+	language: "en" | "ar";
 }
 
 interface SectionStruct {
-  id: string;
-  title: string;
-  description: string;
-  bullets: {
-    title: string;
-    values: string[];
-    icon: any;
-  }[];
+	id: string;
+	title: string;
+	description: string;
+	bullets: {
+		title: string;
+		values: string[];
+		icon: any;
+	}[];
 }
 
-export default function About({ language }: Props) {
-  const struct = [
-    {
-      id: "english_writing_evaluation",
-      title: translation.english_writing_evaluation.title[language],
-      description: translation.english_writing_evaluation.description[language],
-      bullets: [
-        {
-          title: translation.english_writing_evaluation.evaluation[language],
-          values:
-            translation.english_writing_evaluation.evaluation_values[language],
-          icon: BsBlockquoteLeft,
-        },
-        {
-          title: translation.english_writing_evaluation.acquire[language],
-          values:
-            translation.english_writing_evaluation.acquire_values[language],
-          icon: BsFillPencilFill,
-        },
-      ],
-    },
-    {
-      id: "speaking_practice_evaluation",
-      title: translation.speaking_practice_evaluation.title[language],
-      description:
-        translation.speaking_practice_evaluation.description[language],
-      bullets: [
-        {
-          title: translation.speaking_practice_evaluation.evaluation[language],
-          values:
-            translation.speaking_practice_evaluation.evaluation_values[
-              language
-            ],
-          icon: BsMic,
-        },
-        {
-          title: translation.speaking_practice_evaluation.acquire[language],
-          values:
-            translation.speaking_practice_evaluation.acquire_values[language],
-          icon: BsBook,
-        },
-      ],
-    },
-    {
-      id: "reading_and_listening",
-      title: translation.reading_and_listening.title[language],
-      description: translation.reading_and_listening.description[language],
-      bullets: [
-        {
-          title: translation.reading_and_listening.evaluation[language],
-          values: translation.reading_and_listening.evaluation_values[language],
-          icon: BsSoundwave,
-        },
-        {
-          title: translation.reading_and_listening.acquire[language],
-          values: translation.reading_and_listening.acquire_values[language],
-          icon: BsBookmarkStar,
-        },
-      ],
-    },
-    {
-      id: "practice_tests",
-      title: translation.practice_tests.title[language],
-      description: translation.practice_tests.description[language],
-      bullets: [
-        {
-          title: translation.practice_tests.evaluation[language],
-          values: translation.practice_tests.evaluation_values[language],
-          icon: BsCheck2Circle,
-        },
-        {
-          title: translation.practice_tests.acquire[language],
-          values: translation.practice_tests.acquire_values[language],
-          icon: BsEarbuds,
-        },
-      ],
-    },
-    {
-      id: "progress_tracking",
-      title: translation.progress_tracking.title[language],
-      description: translation.progress_tracking.description[language],
-      bullets: [
-        {
-          title: translation.progress_tracking.advantages[language],
-          values: translation.progress_tracking.advantages_values[language],
-          icon: BsFileBarGraph,
-        },
-      ],
-    },
-  ];
+export default function About({language}: Props) {
+	const struct = [
+		{
+			id: "english_writing_evaluation",
+			title: translation.english_writing_evaluation.title[language],
+			description: translation.english_writing_evaluation.description[language],
+			bullets: [
+				{
+					title: translation.english_writing_evaluation.evaluation[language],
+					values: translation.english_writing_evaluation.evaluation_values[language],
+					icon: BsBlockquoteLeft,
+				},
+				{
+					title: translation.english_writing_evaluation.acquire[language],
+					values: translation.english_writing_evaluation.acquire_values[language],
+					icon: BsFillPencilFill,
+				},
+			],
+		},
+		{
+			id: "speaking_practice_evaluation",
+			title: translation.speaking_practice_evaluation.title[language],
+			description: translation.speaking_practice_evaluation.description[language],
+			bullets: [
+				{
+					title: translation.speaking_practice_evaluation.evaluation[language],
+					values: translation.speaking_practice_evaluation.evaluation_values[language],
+					icon: BsMic,
+				},
+				{
+					title: translation.speaking_practice_evaluation.acquire[language],
+					values: translation.speaking_practice_evaluation.acquire_values[language],
+					icon: BsBook,
+				},
+			],
+		},
+		{
+			id: "reading_and_listening",
+			title: translation.reading_and_listening.title[language],
+			description: translation.reading_and_listening.description[language],
+			bullets: [
+				{
+					title: translation.reading_and_listening.evaluation[language],
+					values: translation.reading_and_listening.evaluation_values[language],
+					icon: BsSoundwave,
+				},
+				{
+					title: translation.reading_and_listening.acquire[language],
+					values: translation.reading_and_listening.acquire_values[language],
+					icon: BsBookmarkStar,
+				},
+			],
+		},
+		{
+			id: "practice_tests",
+			title: translation.practice_tests.title[language],
+			description: translation.practice_tests.description[language],
+			bullets: [
+				{
+					title: translation.practice_tests.evaluation[language],
+					values: translation.practice_tests.evaluation_values[language],
+					icon: BsCheck2Circle,
+				},
+				{
+					title: translation.practice_tests.acquire[language],
+					values: translation.practice_tests.acquire_values[language],
+					icon: BsEarbuds,
+				},
+			],
+		},
+		{
+			id: "progress_tracking",
+			title: translation.progress_tracking.title[language],
+			description: translation.progress_tracking.description[language],
+			bullets: [
+				{
+					title: translation.progress_tracking.advantages[language],
+					values: translation.progress_tracking.advantages_values[language],
+					icon: BsFileBarGraph,
+				},
+			],
+		},
+	];
 
-  const final_struct = [
-    {
-      id: "unified_english_level_test",
-      title: translation.unified_english_level_test.title[language],
-      description: translation.unified_english_level_test.description[language],
-      bullets: [
-        {
-          title: translation.unified_english_level_test.advantages[language],
-          values:
-            translation.unified_english_level_test.advantages_values[language],
-          icon: BsBank,
-        },
-      ],
-    },
-    {
-      id: "customized_packages",
-      title: translation.customized_packages.title[language],
-      description: translation.customized_packages.description[language],
-      bullets: [],
-    },
-  ];
+	const final_struct = [
+		{
+			id: "unified_english_level_test",
+			title: translation.unified_english_level_test.title[language],
+			description: translation.unified_english_level_test.description[language],
+			bullets: [
+				{
+					title: translation.unified_english_level_test.advantages[language],
+					values: translation.unified_english_level_test.advantages_values[language],
+					icon: BsBank,
+				},
+			],
+		},
+		{
+			id: "customized_packages",
+			title: translation.customized_packages.title[language],
+			description: translation.customized_packages.description[language],
+			bullets: [],
+		},
+	];
 
-  const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
-    data.map((section, index) => (
-      <section
-        id={section.id}
-        key={section.id}
-        className={`w-full ${getBackgroundColor(index)}`}
-      >
-        <div
-          className={clsx(
-            "w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
-            language === "ar" && "text-right"
-          )}
-        >
-          <div
-            className={clsx("w-full flex", language === "ar" && "justify-end")}
-          >
-            <Title className="max-w-fit">{section.title}</Title>
-          </div>
-          <span className="text-lg">{section.description}</span>
-          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
-            {section.bullets.map((bullet) => (
-              <div
-                key={bullet.title}
-                className={clsx(
-                  "flex gap-8 items-center",
-                  language === "ar" && "flex-row-reverse"
-                )}
-              >
-                <div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
-                  {bullet.icon && (
-                    <bullet.icon className="text-mti-rose-light w-6 h-6" />
-                  )}
-                </div>
-                <div className="flex flex-col gap-2">
-                  <span className="text-lg font-bold text-mti-rose-light">
-                    {bullet.title}
-                  </span>
-                  <ul className="list-disc gap-2 flex flex-col">
-                    {bullet.values.map((value) => (
-                      <li key={value}>{value}</li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    ));
+	const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
+		data.map((section, index) => (
+			<section id={section.id} key={section.id} className={`w-full ${getBackgroundColor(index)}`}>
+				<div
+					className={clsx(
+						"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
+						language === "ar" && "text-right",
+					)}>
+					<div className={clsx("w-full flex", language === "ar" && "justify-start")}>
+						<Title className="max-w-fit">{section.title}</Title>
+					</div>
+					<span className="text-lg">{section.description}</span>
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						{section.bullets.map((bullet) => (
+							<div key={bullet.title} className={clsx("flex gap-8")}>
+								<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
+									{bullet.icon && <bullet.icon className="text-mti-rose-light w-6 h-6" />}
+								</div>
+								<div className="flex flex-col gap-2">
+									<span className="text-lg font-bold text-mti-rose-light">{bullet.title}</span>
+									<ul className="list-disc gap-2 flex flex-col">
+										{bullet.values.map((value) => (
+											<li key={value}>{value}</li>
+										))}
+									</ul>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</section>
+		));
 
-  return (
-    <main className="h-screen w-full bg-white text-mti-black flex flex-col">
-      <Navbar currentPage="/services" language={language} />
-      <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
-        <div className="w-full h-full flex flex-col items-center justify-center">
-          <Title>{translation.services[language]}</Title>
-        </div>
-      </section>
-      {renderStruct(
-        struct,
-        (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`
-      )}
-      <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
-        <div className="w-full h-full flex flex-col items-center justify-center">
-          <Title className="max-w-fit">
-            {translation.corporate_educational_institutions[language]}
-          </Title>
-        </div>
-      </section>
-      {renderStruct(
-        final_struct,
-        (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`
-      )}
-      <Footer language={language} />
-    </main>
-  );
+	return (
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
+			<Navbar currentPage="/services" language={language} />
+			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<Title>{translation.services[language]}</Title>
+				</div>
+			</section>
+			{renderStruct(struct, (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`)}
+			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<Title className="max-w-fit">{translation.corporate_educational_institutions[language]}</Title>
+				</div>
+			</section>
+			{renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}
+			<Footer language={language} />
+		</main>
+	);
 }
diff --git a/src/templates/Terms.tsx b/src/templates/Terms.tsx
index 18c76c3..494b16d 100644
--- a/src/templates/Terms.tsx
+++ b/src/templates/Terms.tsx
@@ -22,16 +22,16 @@ interface Content {
 
 export default function Terms({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/terms" language={language} />
 
-			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16" dir={language === "ar" ? "rtl" : "ltr"}>
+			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
 				<div className="w-full h-full flex flex-col items-center justify-center">
 					<Title>{translation.title[language]}</Title>
 				</div>
 			</section>
 
-			<section id="terms" className="w-full h-fit bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
+			<section id="terms" className="w-full h-fit bg-white">
 				<div
 					className={clsx(
 						"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",
diff --git a/src/translation/home.json b/src/translation/home.json
index 9428d4d..4bc414e 100644
--- a/src/translation/home.json
+++ b/src/translation/home.json
@@ -57,10 +57,6 @@
     "description": {
       "en": "Our algorithms provide speedy results and evaluate the test, providing a brief feedback on areas that are strong and the areas where improvement is needed. So there is no need to pay a hefty amount to a tutor and spend hours upon hours to review your performance. With EnCoach, you receive the evaluation within seconds.",
       "ar": "خوارزمياتنا توفر نتائج وتقييم سريع للاختبار، وتقدم ملاحظات موجزًة على الجوانب التي تتميز بها والجوانب التي تحتاج إلى تحسين. لذا ليس هناك حاجة لدفع مبلغ ضخم لمدرس وقضاء ساعات وساعات في مراجعة أدائك. مع إنكوتش، ستتلقى التقييم في غضون ثوانٍ."
-    },
-    "join": {
-      "en": "Join",
-      "ar": "انضم"
     }
   },
   "learn_more": {
@@ -121,4 +117,4 @@
     "en": "Accreditation",
     "ar": "الاعتمادات الأكاديمية"
   }
-}
\ No newline at end of file
+}
diff --git a/src/translation/navbar.json b/src/translation/navbar.json
index 08e6609..be1a8e0 100644
--- a/src/translation/navbar.json
+++ b/src/translation/navbar.json
@@ -28,7 +28,7 @@
     "ar": "منصة انكوتش"
   },
   "join": {
-    "en": "Join",
+    "en": "Sign up",
     "ar": "انضم إلينا"
   }
 }
\ No newline at end of file
diff --git a/src/translation/price.json b/src/translation/price.json
index 4596fd1..6dcd592 100644
--- a/src/translation/price.json
+++ b/src/translation/price.json
@@ -1,6 +1,6 @@
 {
   "joinus": {
-    "en": "Join us",
+    "en": "Sign up",
     "ar": "انضم إلينا"
   },
   "title": {
@@ -22,5 +22,39 @@
   "packageIncludesC": {
     "en": "Allow yourself to correctly prepare for the exam",
     "ar": "امنح نفسك الفرصة للتحضير بشكل صحيح للإختبار"
+  },
+  "days": {
+    "singular": {
+      "en": "Day",
+      "ar": "يوم"
+    },
+    "plural": {
+      "en": "Days",
+      "ar": "أيام"
+    }
+  },
+  "weeks": {
+    "singular": {
+      "en": "Week",
+      "ar": "أسبوع"
+    },
+    "plural": {
+      "en": "Weeks",
+      "ar": "أسابيع"
+    }
+  },
+  "months": {
+    "singular": {
+      "en": "Month",
+      "ar": "شهر"
+    },
+    "plural": {
+      "en": "Months",
+      "ar": "شهور"
+    }
+  },
+  "encoach": {
+    "en": "EnCoach",
+    "ar": "إنكوتش"
   }
 }
\ No newline at end of file