diff --git a/src/templates/History.tsx b/src/templates/History.tsx
index cae76a3..af56538 100644
--- a/src/templates/History.tsx
+++ b/src/templates/History.tsx
@@ -33,7 +33,7 @@ const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
 				<span className={clsx("w-64 text-mti-purple-light font-semibold text-lg", isEven && "text-right")}>{date}</span>
 			</div>
 
-			<div className={clsx("flex items-center gap-8 md:hidden", language === "ar" && "flex-row-reverse text-right")}>
+			<div className={clsx("flex items-center gap-8 md:hidden")}>
 				<div className="h-16 w-16 rounded-full bg-mti-purple-dark flex items-center justify-center text-white border-white border-4 drop-shadow">
 					<Icon className="h-6 w-6" />
 				</div>
@@ -75,9 +75,9 @@ export default function History({language}: Props) {
 					</div>
 					<div
 						className={clsx(
-							"w-2 h-[89%] bg-mti-purple-light absolute md:left-1/2 md:-translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full",
-							language === "en" && "left-1/2 -translate-x-[148px]",
-							language === "ar" && "right-1/2 translate-x-[148px]",
+							"w-2 h-[89%] bg-mti-purple-light absolute top-1/2 -translate-y-1/2 rounded-full",
+							language === "en" && "left-1/2 -translate-x-[148px] md:left-1/2 md:-translate-x-1/2",
+							language === "ar" && "right-1/2 translate-x-[148px] md:right-1/2 md:translate-x-1/2",
 						)}
 					/>
 				</div>