diff --git a/src/components/marketing/pricing/forms/billing-form-button.tsx b/src/components/marketing/pricing/forms/billing-form-button.tsx
index bda261b..6764ca8 100644
--- a/src/components/marketing/pricing/forms/billing-form-button.tsx
+++ b/src/components/marketing/pricing/forms/billing-form-button.tsx
@@ -45,7 +45,7 @@ export function BillingFormButton({
     >
       {isPending ? (
         <>
-          <Icons.spinner className="mr-2 size-4 animate-spin" /> Loading...
+          <Icons.spinner className="me-2 size-4 animate-spin" /> Loading...
         </>
       ) : (
         <>
diff --git a/src/components/marketing/pricing/mobile-compare-plans.tsx b/src/components/marketing/pricing/mobile-compare-plans.tsx
index ecd1f72..c39653a 100644
--- a/src/components/marketing/pricing/mobile-compare-plans.tsx
+++ b/src/components/marketing/pricing/mobile-compare-plans.tsx
@@ -129,8 +129,8 @@ export function MobileComparePlans() {
                   {comparePlans.map((row: PlansRow, index: number) => (
                     <AccordionItem key={index} value={`item-${index}`} className="border-b border-border/10">
                       <AccordionTrigger className="py-3 text-sm hover:no-underline">
-                        <div className="flex items-center justify-between w-full pr-2">
-                          <span className="text-left">{getTranslatedFeature(row.feature)}</span>
+                        <div className="flex items-center justify-between w-full pe-2">
+                          <span className="text-start">{getTranslatedFeature(row.feature)}</span>
                           <div className="flex items-center gap-2">
                             {renderCell(row[planName])}
                           </div>
diff --git a/src/components/marketing/pricing/pricing-faqs.tsx b/src/components/marketing/pricing/pricing-faqs.tsx
index ce68302..a9402e9 100644
--- a/src/components/marketing/pricing/pricing-faqs.tsx
+++ b/src/components/marketing/pricing/pricing-faqs.tsx
@@ -10,7 +10,7 @@ export default function PricingFAQs() {
     <section className="scroll-py-16 py-16 md:scroll-py-32 md:py-32">
       <div className="flex w-full max-w-6xl">
         <div className="grid gap-y-12 gap-x-32 px-2 lg:[grid-template-columns:1fr_auto]">
-          <div className="text-center lg:text-left">
+          <div className="text-center lg:text-start">
             <h2 className="mb-4">
               {t.marketing.pricing.faqs.title.split(' ').map((word, index) => (
                 <span key={index}>
diff --git a/src/components/marketing/pricing/shared/toc.tsx b/src/components/marketing/pricing/shared/toc.tsx
index 42479c5..6552300 100644
--- a/src/components/marketing/pricing/shared/toc.tsx
+++ b/src/components/marketing/pricing/shared/toc.tsx
@@ -88,7 +88,7 @@ interface TreeProps {
 
 function Tree({ tree, level = 1, activeItem }: TreeProps) {
   return tree?.items?.length && level < 3 ? (
-    <ul className={cn("m-0 list-none", { "pl-4": level !== 1 })}>
+    <ul className={cn("m-0 list-none", { "ps-4": level !== 1 })}>
       {tree.items.map((item, index) => {
         return (
           <li key={index} className={cn("mt-0 pt-1")}>
diff --git a/src/components/marketing/ready-to-build.tsx b/src/components/marketing/ready-to-build.tsx
index 838b19f..1664f99 100644
--- a/src/components/marketing/ready-to-build.tsx
+++ b/src/components/marketing/ready-to-build.tsx
@@ -30,7 +30,7 @@ function ReadyToBuildSection() {
     
       </div>
       <div>
-        <OptimizedImage src="/marketing/site/build.png" alt="security" width={500} height={500} className="pr-5" />
+        <OptimizedImage src="/marketing/site/build.png" alt="security" width={500} height={500} className="pe-5" />
       </div>
     </section>
   );
diff --git a/src/components/marketing/service/layout-card.tsx b/src/components/marketing/service/layout-card.tsx
index 3b1e000..7b2116e 100644
--- a/src/components/marketing/service/layout-card.tsx
+++ b/src/components/marketing/service/layout-card.tsx
@@ -12,10 +12,10 @@ function MainLayoutCard({ title, description, rightSideImageUrl }: IProps) {
   return (
     <section className="flex justify-between gap-large md:gap-4 items-center mt-[5rem] flex-col md:flex-row">
       <div>
-        <div className="leading-[4rem] md:leading-large text-white text-medium md:text-large font-[600] text-center md:text-left">
+        <div className="leading-[4rem] md:leading-large text-white text-medium md:text-large font-[600] text-center md:text-start">
           {title()}
         </div>
-        <p className="text-normal text-grey mt-4 mb-[4.5rem] text-center md:text-left">
+        <p className="text-normal text-grey mt-4 mb-[4.5rem] text-center md:text-start">
           {description}
         </p>
         <div className="flex justify-center md:justify-start">
diff --git a/src/components/template/wizard-footer.tsx b/src/components/template/wizard-footer.tsx
index 7e79d75..7c290c8 100644
--- a/src/components/template/wizard-footer.tsx
+++ b/src/components/template/wizard-footer.tsx
@@ -42,7 +42,7 @@ export const WizardFooter = ({
           onClick={onBack}
           disabled={currentStep === 1}
         >
-          {isRTL ? <ArrowRight className="mr-2 h-4 w-4" /> : <ArrowLeft className="mr-2 h-4 w-4" />}
+          {isRTL ? <ArrowRight className="me-2 h-4 w-4" /> : <ArrowLeft className="me-2 h-4 w-4" />}
           {backText}
         </Button>
 
@@ -53,14 +53,14 @@ export const WizardFooter = ({
             disabled={!isStepValid}
           >
             {nextText}
-            {isRTL ? <ArrowLeft className="ml-2 h-4 w-4" /> : <ArrowRight className="ml-2 h-4 w-4" />}
+            {isRTL ? <ArrowLeft className="ms-2 h-4 w-4" /> : <ArrowRight className="ms-2 h-4 w-4" />}
           </Button>
         ) : (
           <Button
             size="sm"
             onClick={onFinish}
           >
-            <Check className="mr-2 h-4 w-4" />
+            <Check className="me-2 h-4 w-4" />
             {finishText}
           </Button>
         )}
diff --git a/src/components/wizard/cutomizer.tsx b/src/components/wizard/cutomizer.tsx
index 9a510c9..bbacd11 100644
--- a/src/components/wizard/cutomizer.tsx
+++ b/src/components/wizard/cutomizer.tsx
@@ -26,7 +26,7 @@ const CustomizerUI = () => {
       className="flex flex-col space-y-4 md:space-y-6 -mt-14"
     >
       <div className="flex items-start pt-4 md:pt-0">
-        <div className="space-y-1 pr-2">
+        <div className="space-y-1 pe-2">
           <div className="md:hidden font-semibold leading-none tracking-tight">
             Theme Customizer
           </div>
@@ -37,7 +37,7 @@ const CustomizerUI = () => {
         <Button
           variant="ghost"
           size="icon"
-          className="ml-auto rounded-[0.5rem] md:hidden"
+          className="ms-auto rounded-[0.5rem] md:hidden"
           onClick={() => {
             setConfig({
               ...config,
@@ -88,7 +88,7 @@ const CustomizerUI = () => {
                   >
                     <span
                       className={cn(
-                        "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full"
+                        "me-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full"
                       )}
                       style={{
                         backgroundColor: `hsl(${
@@ -145,7 +145,7 @@ const CustomizerUI = () => {
                   onClick={() => setMode("light")}
                   className={cn(mode === "light" && "border-2 border-primary")}
                 >
-                  <Sun className="mr-1 -translate-x-1" />
+                  <Sun className="me-1 -translate-x-1" />
                   Light
                 </Button>
                 <Button
@@ -154,7 +154,7 @@ const CustomizerUI = () => {
                   onClick={() => setMode("dark")}
                   className={cn(mode === "dark" && "border-2 border-primary")}
                 >
-                  <Moon className="mr-1 -translate-x-1" />
+                  <Moon className="me-1 -translate-x-1" />
                   Dark
                 </Button>
               </>
diff --git a/src/components/wizard/theme.tsx b/src/components/wizard/theme.tsx
index 37e3510..8179278 100644
--- a/src/components/wizard/theme.tsx
+++ b/src/components/wizard/theme.tsx
@@ -107,14 +107,14 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = () => {
                 variant="outline"
                 className="rounded-[var(--theme-radius)]"
               >
-                <Icons.gitHub className="mr-2 h-4 w-4" />
+                <Icons.gitHub className="me-2 h-4 w-4" />
                 GitHub
               </Button>
               <Button
                 variant="outline"
                 className="rounded-[var(--theme-radius)]"
               >
-                <svg role="img" viewBox="0 0 24 24" className="mr-2 h-4 w-4">
+                <svg role="img" viewBox="0 0 24 24" className="me-2 h-4 w-4">
                   <path
                     fill="currentColor"
                     d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"