diff --git a/packages/i18n/src/constants/language.ts b/packages/i18n/src/constants/language.ts
index 132ee68c967..ca17a69b268 100644
--- a/packages/i18n/src/constants/language.ts
+++ b/packages/i18n/src/constants/language.ts
@@ -4,6 +4,7 @@ export const FALLBACK_LANGUAGE: TLanguage = "en";
 
 export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
   { label: "English", value: "en" },
+  { label: "فارسی", value: "fa" },
   { label: "Français", value: "fr" },
   { label: "Español", value: "es" },
   { label: "日本語", value: "ja" },
diff --git a/packages/i18n/src/locales/fa/core.json b/packages/i18n/src/locales/fa/core.json
new file mode 100644
index 00000000000..ca8522509ed
--- /dev/null
+++ b/packages/i18n/src/locales/fa/core.json
@@ -0,0 +1,171 @@
+{
+  "sidebar": {
+    "projects": "پروژه‌ها",
+    "pages": "صفحات",
+    "new_work_item": "آیتم کاری جدید",
+    "home": "خانه",
+    "your_work": "کارهای شما",
+    "inbox": "صندوق ورودی",
+    "workspace": "فضای کاری",
+    "views": "نمایش‌ها",
+    "analytics": "تحلیل‌ها",
+    "work_items": "آیتم‌های کاری",
+    "cycles": "چرخه‌ها",
+    "modules": "ماژول‌ها",
+    "intake": "ورودی",
+    "drafts": "پیش‌نویس‌ها",
+    "favorites": "مورد علاقه‌ها",
+    "pro": "حرفه‌ای",
+    "upgrade": "ارتقا"
+  },
+
+  "auth": {
+    "common": {
+      "email": {
+        "label": "ایمیل",
+        "placeholder": "نام@شرکت.com",
+        "errors": {
+          "required": "ایمیل الزامی است",
+          "invalid": "ایمیل نامعتبر است"
+        }
+      },
+      "password": {
+        "label": "رمز عبور",
+        "set_password": "تنظیم رمز عبور",
+        "placeholder": "رمز عبور را وارد کنید",
+        "confirm_password": {
+          "label": "تایید رمز عبور",
+          "placeholder": "رمز عبور را تایید کنید"
+        },
+        "current_password": {
+          "label": "رمز عبور فعلی"
+        },
+        "new_password": {
+          "label": "رمز عبور جدید",
+          "placeholder": "رمز عبور جدید را وارد کنید"
+        },
+        "change_password": {
+          "label": {
+            "default": "تغییر رمز عبور",
+            "submitting": "در حال تغییر رمز عبور"
+          }
+        },
+        "errors": {
+          "match": "رمزهای عبور مطابقت ندارند",
+          "empty": "لطفا رمز عبور خود را وارد کنید",
+          "length": "طول رمز عبور باید بیشتر از ۸ کاراکتر باشد",
+          "strength": {
+            "weak": "رمز عبور ضعیف است",
+            "strong": "رمز عبور قوی است"
+          }
+        },
+        "submit": "تنظیم رمز عبور",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "موفقیت!",
+              "message": "رمز عبور با موفقیت تغییر کرد."
+            },
+            "error": {
+              "title": "خطا!",
+              "message": "مشکلی پیش آمده است. لطفا دوباره تلاش کنید."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "کد یکتا",
+        "placeholder": "gets-sets-flys",
+        "paste_code": "کد ارسال شده به ایمیل خود را وارد کنید",
+        "requesting_new_code": "درخواست کد جدید",
+        "sending_code": "ارسال کد"
+      },
+      "already_have_an_account": "حساب کاربری دارید؟",
+      "login": "ورود",
+      "create_account": "ایجاد حساب کاربری",
+      "new_to_plane": "تازه وارد Plane هستید؟",
+      "back_to_sign_in": "بازگشت به ورود",
+      "resend_in": "ارسال مجدد در {seconds} ثانیه",
+      "sign_in_with_unique_code": "ورود با کد یکتا",
+      "forgot_password": "رمز عبور خود را فراموش کرده‌اید؟"
+    },
+    "sign_up": {
+      "header": {
+        "label": "برای شروع مدیریت کار با تیم خود، یک حساب کاربری ایجاد کنید.",
+        "step": {
+          "email": {
+            "header": "ثبت نام",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "ثبت نام",
+            "sub_header": "ثبت نام با استفاده از ایمیل و رمز عبور."
+          },
+          "unique_code": {
+            "header": "ثبت نام",
+            "sub_header": "ثبت نام با استفاده از کد یکتای ارسال شده به آدرس ایمیل بالا."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "لطفا یک رمز عبور قوی تنظیم کنید تا ادامه دهید"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "برای شروع مدیریت کار با تیم خود وارد شوید.",
+        "step": {
+          "email": {
+            "header": "ورود یا ثبت نام",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "ورود یا ثبت نام",
+            "sub_header": "با استفاده از ایمیل و رمز عبور خود وارد شوید."
+          },
+          "unique_code": {
+            "header": "ورود یا ثبت نام",
+            "sub_header": "با استفاده از کد یکتای ارسال شده به آدرس ایمیل بالا وارد شوید."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "بازیابی رمز عبور",
+      "description": "آدرس ایمیل تایید شده حساب کاربری خود را وارد کنید تا لینک بازیابی رمز عبور را برای شما ارسال کنیم.",
+      "email_sent": "لینک بازیابی را به آدرس ایمیل شما ارسال کردیم",
+      "send_reset_link": "ارسال لینک بازیابی",
+      "errors": {
+        "smtp_not_enabled": "متوجه شدیم که SMTP در سیستم شما فعال نشده است، بنابراین نمی‌توانیم لینک بازیابی رمز عبور را ارسال کنیم"
+      },
+      "toast": {
+        "success": {
+          "title": "ایمیل ارسال شد",
+          "message": "صندوق ورودی خود را برای لینک بازیابی رمز عبور بررسی کنید. اگر در چند دقیقه ظاهر نشد، پوشه اسپم را بررسی کنید."
+        },
+        "error": {
+          "title": "خطا!",
+          "message": "مشکلی پیش آمده است. لطفا دوباره تلاش کنید."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "تنظیم رمز عبور جدید",
+      "description": "حساب خود را با یک رمز عبور قوی امن کنید"
+    },
+    "set_password": {
+      "title": "امن‌سازی حساب شما",
+      "description": "تنظیم رمز عبور به شما کمک می‌کند تا به صورت امن وارد شوید"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "خطا!",
+          "message": "خروج ناموفق بود. لطفا دوباره تلاش کنید."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fa/translations.json b/packages/i18n/src/locales/fa/translations.json
new file mode 100644
index 00000000000..23d5bece222
--- /dev/null
+++ b/packages/i18n/src/locales/fa/translations.json
@@ -0,0 +1,2220 @@
+{
+  "sidebar": {
+    "projects": "پروژه‌ها",
+    "pages": "صفحات",
+    "new_work_item": "آیتم کاری جدید",
+    "home": "خانه",
+    "your_work": "کارهای شما",
+    "inbox": "صندوق ورودی",
+    "workspace": "فضای کاری",
+    "views": "نمایش‌ها",
+    "analytics": "تحلیل‌ها",
+    "work_items": "آیتم‌های کاری",
+    "cycles": "چرخه‌ها",
+    "modules": "ماژول‌ها",
+    "intake": "ورودی",
+    "drafts": "پیش‌نویس‌ها",
+    "favorites": "مورد علاقه‌ها",
+    "pro": "حرفه‌ای",
+    "upgrade": "ارتقا"
+  },
+  "submit": "ارسال",
+  "cancel": "لغو",
+  "loading": "در حال بارگذاری",
+  "error": "خطا",
+  "success": "موفقیت",
+  "warning": "هشدار",
+  "info": "اطلاعات",
+  "close": "بستن",
+  "yes": "بله",
+  "no": "خیر",
+  "ok": "تایید",
+  "name": "نام",
+  "description": "توضیحات",
+  "search": "جستجو",
+  "add_member": "افزودن عضو",
+  "adding_members": "در حال افزودن اعضا",
+  "remove_member": "حذف عضو",
+  "add_members": "افزودن اعضا",
+  "adding_member": "در حال افزودن عضو",
+  "remove_members": "حذف اعضا",
+  "add": "افزودن",
+  "adding": "در حال افزودن",
+  "remove": "حذف",
+  "add_new": "افزودن جدید",
+  "remove_selected": "حذف انتخاب شده",
+  "first_name": "نام",
+  "last_name": "نام خانوادگی",
+  "email": "ایمیل",
+  "display_name": "نام نمایشی",
+  "role": "نقش",
+  "timezone": "منطقه زمانی",
+  "avatar": "تصویر پروفایل",
+  "cover_image": "تصویر کاور",
+  "password": "رمز عبور",
+  "change_cover": "تغییر کاور",
+  "language": "زبان",
+  "saving": "در حال ذخیره",
+  "save_changes": "ذخیره تغییرات",
+  "deactivate_account": "غیرفعال کردن حساب",
+  "deactivate_account_description": "با غیرفعال کردن حساب، تمام داده‌ها و منابع موجود در آن به طور دائمی حذف شده و قابل بازیابی نخواهند بود.",
+  "profile_settings": "تنظیمات پروفایل",
+  "your_account": "حساب شما",
+  "security": "امنیت",
+  "activity": "فعالیت",
+  "appearance": "ظاهر",
+  "notifications": "اعلان‌ها",
+  "workspaces": "فضاهای کاری",
+  "create_workspace": "ایجاد فضای کاری",
+  "invitations": "دعوت‌ها",
+  "summary": "خلاصه",
+  "assigned": "تخصیص داده شده",
+  "created": "ایجاد شده",
+  "subscribed": "مشترک شده",
+  "you_do_not_have_the_permission_to_access_this_page": "شما دسترسی لازم برای مشاهده این صفحه را ندارید.",
+  "something_went_wrong_please_try_again": "خطایی رخ داد. لطفاً دوباره تلاش کنید.",
+  "load_more": "بارگذاری بیشتر",
+  "select_or_customize_your_interface_color_scheme": "انتخاب یا سفارشی‌سازی طرح رنگی رابط کاربری.",
+  "theme": "تم",
+  "system_preference": "ترجیح سیستم",
+  "light": "روشن",
+  "dark": "تاریک",
+  "light_contrast": "کنتراست روشن",
+  "dark_contrast": "کنتراست تاریک",
+  "custom": "تم سفارشی",
+  "select_your_theme": "تم خود را انتخاب کنید",
+  "customize_your_theme": "سفارشی‌سازی تم",
+  "background_color": "رنگ پس‌زمینه",
+  "text_color": "رنگ متن",
+  "primary_color": "رنگ اصلی (تم)",
+  "sidebar_background_color": "رنگ پس‌زمینه نوار کناری",
+  "sidebar_text_color": "رنگ متن نوار کناری",
+  "set_theme": "تنظیم تم",
+  "enter_a_valid_hex_code_of_6_characters": "یک کد هگز معتبر ۶ کاراکتری وارد کنید",
+  "background_color_is_required": "رنگ پس‌زمینه الزامی است",
+  "text_color_is_required": "رنگ متن الزامی است",
+  "primary_color_is_required": "رنگ اصلی الزامی است",
+  "sidebar_background_color_is_required": "رنگ پس‌زمینه نوار کناری الزامی است",
+  "sidebar_text_color_is_required": "رنگ متن نوار کناری الزامی است",
+  "updating_theme": "در حال به‌روزرسانی تم",
+  "theme_updated_successfully": "تم با موفقیت به‌روزرسانی شد",
+  "failed_to_update_the_theme": "به‌روزرسانی تم با خطا مواجه شد",
+  "email_notifications": "اعلان‌های ایمیل",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "از موارد کاری که مشترک آنها هستید مطلع شوید. این گزینه را فعال کنید تا اعلان دریافت کنید.",
+  "email_notification_setting_updated_successfully": "تنظیمات اعلان ایمیل با موفقیت به‌روزرسانی شد",
+  "failed_to_update_email_notification_setting": "به‌روزرسانی تنظیمات اعلان ایمیل با خطا مواجه شد",
+  "notify_me_when": "وقتی که",
+  "property_changes": "تغییرات ویژگی",
+  "property_changes_description": "وقتی ویژگی‌های موارد کاری مانند مسئولان، اولویت، تخمین‌ها یا هر چیز دیگری تغییر می‌کند به من اطلاع دهید.",
+  "state_change": "تغییر وضعیت",
+  "state_change_description": "وقتی موارد کاری به وضعیت دیگری منتقل می‌شوند به من اطلاع دهید",
+  "issue_completed": "مورد کاری تکمیل شد",
+  "issue_completed_description": "فقط زمانی که یک مورد کاری تکمیل می‌شود به من اطلاع دهید",
+  "comments": "نظرات",
+  "comments_description": "وقتی کسی روی مورد کاری نظر می‌گذارد به من اطلاع دهید",
+  "mentions": "اشاره‌ها",
+  "mentions_description": "فقط زمانی که کسی در نظرات یا توضیحات به من اشاره می‌کند به من اطلاع دهید",
+  "old_password": "رمز عبور قبلی",
+  "general_settings": "تنظیمات عمومی",
+  "sign_out": "خروج",
+  "signing_out": "در حال خروج",
+  "active_cycles": "چرخه‌های فعال",
+  "active_cycles_description": "نظارت بر چرخه‌ها در پروژه‌ها، پیگیری موارد کاری با اولویت بالا و بررسی چرخه‌هایی که نیاز به توجه دارند.",
+  "on_demand_snapshots_of_all_your_cycles": "تصاویر فوری درخواستی از تمام چرخه‌های شما",
+  "upgrade": "ارتقا",
+  "10000_feet_view": "نمای کلی از تمام چرخه‌های فعال.",
+  "10000_feet_view_description": "برای مشاهده چرخه‌های در حال اجرا در تمام پروژه‌های خود به طور همزمان، به جای رفتن از چرخه به چرخه در هر پروژه، نمای کلی را ببینید.",
+  "get_snapshot_of_each_active_cycle": "دریافت تصویر فوری از هر چرخه فعال.",
+  "get_snapshot_of_each_active_cycle_description": "پیگیری معیارهای سطح بالا برای تمام چرخه‌های فعال، مشاهده وضعیت پیشرفت آنها و درک دامنه در برابر مهلت‌ها.",
+  "compare_burndowns": "مقایسه نمودارهای کاهش کار.",
+  "compare_burndowns_description": "نظارت بر عملکرد هر یک از تیم‌های شما با نگاهی به گزارش کاهش کار هر چرخه.",
+  "quickly_see_make_or_break_issues": "مشاهده سریع موارد کاری حیاتی.",
+  "quickly_see_make_or_break_issues_description": "پیش‌نمایش موارد کاری با اولویت بالا برای هر چرخه در برابر مهلت‌ها. مشاهده تمام آنها در هر چرخه با یک کلیک.",
+  "zoom_into_cycles_that_need_attention": "تمرکز بر چرخه‌هایی که نیاز به توجه دارند.",
+  "zoom_into_cycles_that_need_attention_description": "بررسی وضعیت هر چرخه‌ای که مطابق با انتظارات نیست با یک کلیک.",
+  "stay_ahead_of_blockers": "پیش‌روی از موانع.",
+  "stay_ahead_of_blockers_description": "شناسایی چالش‌ها از یک پروژه به پروژه دیگر و مشاهده وابستگی‌های بین چرخه‌ای که از هیچ نمای دیگری آشکار نیست.",
+  "analytics": "تحلیل‌ها",
+  "workspace_invites": "دعوت‌های فضای کاری",
+  "enter_god_mode": "ورود به حالت ادمین",
+  "workspace_logo": "لوگوی فضای کاری",
+  "new_issue": "مورد کاری جدید",
+  "your_work": "کار شما",
+  "drafts": "پیش‌نویس‌ها",
+  "projects": "پروژه‌ها",
+  "views": "نمایش‌ها",
+  "workspace": "فضای کاری",
+  "archives": "بایگانی‌ها",
+  "settings": "تنظیمات",
+  "failed_to_move_favorite": "انتقال مورد علاقه با خطا مواجه شد",
+  "favorites": "مورد علاقه‌ها",
+  "no_favorites_yet": "هنوز مورد علاقه‌ای وجود ندارد",
+  "create_folder": "ایجاد پوشه",
+  "new_folder": "پوشه جدید",
+  "favorite_updated_successfully": "مورد علاقه با موفقیت به‌روزرسانی شد",
+  "favorite_created_successfully": "مورد علاقه با موفقیت ایجاد شد",
+  "folder_already_exists": "پوشه قبلاً وجود دارد",
+  "folder_name_cannot_be_empty": "نام پوشه نمی‌تواند خالی باشد",
+  "something_went_wrong": "خطایی رخ داد",
+  "failed_to_reorder_favorite": "تغییر ترتیب مورد علاقه با خطا مواجه شد",
+  "favorite_removed_successfully": "مورد علاقه با موفقیت حذف شد",
+  "failed_to_create_favorite": "ایجاد مورد علاقه با خطا مواجه شد",
+  "failed_to_rename_favorite": "تغییر نام مورد علاقه با خطا مواجه شد",
+  "project_link_copied_to_clipboard": "لینک پروژه در کلیپ‌بورد کپی شد",
+  "link_copied": "لینک کپی شد",
+  "add_project": "افزودن پروژه",
+  "create_project": "ایجاد پروژه",
+  "failed_to_remove_project_from_favorites": "حذف پروژه از مورد علاقه‌ها با خطا مواجه شد. لطفاً دوباره تلاش کنید.",
+  "project_created_successfully": "پروژه با موفقیت ایجاد شد",
+  "project_created_successfully_description": "پروژه با موفقیت ایجاد شد. اکنون می‌توانید شروع به افزودن موارد کاری به آن کنید.",
+  "project_cover_image_alt": "تصویر کاور پروژه",
+  "name_is_required": "نام الزامی است",
+  "title_should_be_less_than_255_characters": "عنوان باید کمتر از ۲۵۵ کاراکتر باشد",
+  "project_name": "نام پروژه",
+  "project_id_must_be_at_least_1_character": "شناسه پروژه باید حداقل ۱ کاراکتر باشد",
+  "project_id_must_be_at_most_5_characters": "شناسه پروژه باید حداکثر ۵ کاراکتر باشد",
+  "project_id": "شناسه پروژه",
+  "project_id_tooltip_content": "به شما کمک می‌کند تا موارد کاری در پروژه را به طور منحصر به فرد شناسایی کنید. حداکثر ۵ کاراکتر.",
+  "description_placeholder": "توضیحات",
+  "only_alphanumeric_non_latin_characters_allowed": "فقط کاراکترهای الفبایی عددی و غیر لاتین مجاز هستند.",
+  "project_id_is_required": "شناسه پروژه الزامی است",
+  "project_id_allowed_char": "فقط کاراکترهای الفبایی عددی و غیر لاتین مجاز هستند.",
+  "project_id_min_char": "شناسه پروژه باید حداقل ۱ کاراکتر باشد",
+  "project_id_max_char": "شناسه پروژه باید حداکثر ۵ کاراکتر باشد",
+  "project_description_placeholder": "توضیحات پروژه را وارد کنید",
+  "select_network": "انتخاب شبکه",
+  "lead": "سرپرست",
+  "date_range": "بازه زمانی",
+  "private": "خصوصی",
+  "public": "عمومی",
+  "accessible_only_by_invite": "فقط با دعوت قابل دسترسی",
+  "anyone_in_the_workspace_except_guests_can_join": "هر کسی در فضای کاری به جز مهمانان می‌تواند عضو شود",
+  "creating": "در حال ایجاد",
+  "creating_project": "در حال ایجاد پروژه",
+  "adding_project_to_favorites": "در حال افزودن پروژه به مورد علاقه‌ها",
+  "project_added_to_favorites": "پروژه به مورد علاقه‌ها افزوده شد",
+  "couldnt_add_the_project_to_favorites": "افزودن پروژه به مورد علاقه‌ها با خطا مواجه شد. لطفاً دوباره تلاش کنید.",
+  "removing_project_from_favorites": "در حال حذف پروژه از مورد علاقه‌ها",
+  "project_removed_from_favorites": "پروژه از مورد علاقه‌ها حذف شد",
+  "couldnt_remove_the_project_from_favorites": "حذف پروژه از مورد علاقه‌ها با خطا مواجه شد. لطفاً دوباره تلاش کنید.",
+  "add_to_favorites": "افزودن به مورد علاقه‌ها",
+  "remove_from_favorites": "حذف از مورد علاقه‌ها",
+  "publish_settings": "تنظیمات انتشار",
+  "publish": "انتشار",
+  "copy_link": "کپی لینک",
+  "leave_project": "ترک پروژه",
+  "join_the_project_to_rearrange": "برای تغییر ترتیب به پروژه بپیوندید",
+  "drag_to_rearrange": "برای تغییر ترتیب بکشید",
+  "congrats": "تبریک!",
+  "open_project": "باز کردن پروژه",
+  "issues": "موارد کاری",
+  "cycles": "چرخه‌ها",
+  "modules": "ماژول‌ها",
+  "pages": "صفحات",
+  "intake": "ورودی",
+  "time_tracking": "پیگیری زمان",
+  "work_management": "مدیریت کار",
+  "projects_and_issues": "پروژه‌ها و موارد کاری",
+  "projects_and_issues_description": "این موارد را برای این پروژه فعال یا غیرفعال کنید.",
+  "cycles_description": "کار را به صورت دوره‌ای در هر پروژه تقسیم‌بندی کنید و فرکانس را از یک دوره به دوره دیگر تغییر دهید.",
+  "modules_description": "کار را در گروه‌های شبیه زیرپروژه با سرپرستان و مسئولان خود گروه‌بندی کنید.",
+  "views_description": "مرتب‌سازی‌ها، فیلترها و گزینه‌های نمایش را برای استفاده بعدی ذخیره کنید یا آنها را به اشتراک بگذارید.",
+  "pages_description": "هر چیزی را بنویسید، همانطور که هر چیزی را می‌نویسید.",
+  "intake_description": "از موارد کاری که مشترک آنها هستید مطلع شوید. این گزینه را فعال کنید تا اعلان دریافت کنید.",
+  "time_tracking_description": "زمان صرف شده برای موارد کاری و پروژه‌ها را پیگیری کنید.",
+  "work_management_description": "کار و پروژه‌های خود را به راحتی مدیریت کنید.",
+  "documentation": "مستندات",
+  "message_support": "پیام به پشتیبانی",
+  "contact_sales": "تماس با فروش",
+  "hyper_mode": "حالت فوق‌سریع",
+  "keyboard_shortcuts": "میانبرهای صفحه کلید",
+  "whats_new": "چه چیز جدیدی؟",
+  "version": "نسخه",
+  "we_are_having_trouble_fetching_the_updates": "در دریافت به‌روزرسانی‌ها مشکل داریم.",
+  "our_changelogs": "تغییرات ما",
+  "for_the_latest_updates": "برای آخرین به‌روزرسانی‌ها.",
+  "please_visit": "لطفاً به",
+  "docs": "مستندات",
+  "full_changelog": "تغییرات کامل",
+  "support": "پشتیبانی",
+  "discord": "دیسکورد",
+  "powered_by_plane_pages": "قدرت گرفته از صفحات Plane",
+  "please_select_at_least_one_invitation": "لطفاً حداقل یک دعوت را انتخاب کنید.",
+  "please_select_at_least_one_invitation_description": "لطفاً حداقل یک دعوت را برای پیوستن به فضای کاری انتخاب کنید.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "می‌بینیم که کسی شما را به پیوستن به یک فضای کاری دعوت کرده است",
+  "join_a_workspace": "پیوستن به یک فضای کاری",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "می‌بینیم که کسی شما را به پیوستن به یک فضای کاری دعوت کرده است",
+  "join_a_workspace_description": "پیوستن به یک فضای کاری",
+  "accept_and_join": "پذیرش و پیوستن",
+  "go_home": "رفتن به خانه",
+  "no_pending_invites": "دعوت در انتظار وجود ندارد",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "می‌توانید اینجا ببینید اگر کسی شما را به یک فضای کاری دعوت کند",
+  "back_to_home": "بازگشت به خانه",
+  "workspace_name": "نام-فضای-کاری",
+  "deactivate_your_account": "غیرفعال کردن حساب شما",
+  "deactivate_your_account_description": "پس از غیرفعال شدن، نمی‌توانید به موارد کاری اختصاص داده شوید و برای فضای کاری شما صورتحساب صادر شود. برای فعال‌سازی مجدد حساب خود، نیاز به دعوت به یک فضای کاری در این آدرس ایمیل خواهید داشت.",
+  "deactivating": "در حال غیرفعال کردن",
+  "confirm": "تایید",
+  "confirming": "در حال تایید",
+  "draft_created": "پیش‌نویس ایجاد شد",
+  "issue_created_successfully": "مورد کاری با موفقیت ایجاد شد",
+  "draft_creation_failed": "ایجاد پیش‌نویس با خطا مواجه شد",
+  "issue_creation_failed": "ایجاد مورد کاری با خطا مواجه شد",
+  "draft_issue": "پیش‌نویس مورد کاری",
+  "issue_updated_successfully": "مورد کاری با موفقیت به‌روزرسانی شد",
+  "issue_could_not_be_updated": "مورد کاری قابل به‌روزرسانی نبود",
+  "create_a_draft": "ایجاد پیش‌نویس",
+  "save_to_drafts": "ذخیره در پیش‌نویس‌ها",
+  "save": "ذخیره",
+  "update": "به‌روزرسانی",
+  "updating": "در حال به‌روزرسانی",
+  "create_new_issue": "ایجاد مورد کاری جدید",
+  "editor_is_not_ready_to_discard_changes": "ویرایشگر آماده دور ریختن تغییرات نیست",
+  "failed_to_move_issue_to_project": "انتقال مورد کاری به پروژه با خطا مواجه شد",
+  "create_more": "ایجاد بیشتر",
+  "add_to_project": "افزودن به پروژه",
+  "discard": "دور ریختن",
+  "duplicate_issue_found": "مورد کاری تکراری یافت شد",
+  "duplicate_issues_found": "موارد کاری تکراری یافت شدند",
+  "no_matching_results": "نتیجه مطابقی یافت نشد",
+  "title_is_required": "عنوان الزامی است",
+  "title": "عنوان",
+  "state": "وضعیت",
+  "priority": "اولویت",
+  "none": "هیچ",
+  "urgent": "فوری",
+  "high": "بالا",
+  "medium": "متوسط",
+  "low": "پایین",
+  "members": "اعضا",
+  "assignee": "مسئول",
+  "assignees": "مسئولان",
+  "you": "شما",
+  "labels": "برچسب‌ها",
+  "create_new_label": "ایجاد برچسب جدید",
+  "start_date": "تاریخ شروع",
+  "end_date": "تاریخ پایان",
+  "due_date": "تاریخ سررسید",
+  "estimate": "تخمین",
+  "change_parent_issue": "تغییر مورد کاری والد",
+  "remove_parent_issue": "حذف مورد کاری والد",
+  "add_parent": "افزودن والد",
+  "loading_members": "در حال بارگذاری اعضا",
+  "view_link_copied_to_clipboard": "لینک نمایش در کلیپ‌بورد کپی شد.",
+  "required": "الزامی",
+  "optional": "اختیاری",
+  "Cancel": "لغو",
+  "edit": "ویرایش",
+  "archive": "بایگانی",
+  "restore": "بازیابی",
+  "open_in_new_tab": "باز کردن در تب جدید",
+  "delete": "حذف",
+  "deleting": "در حال حذف",
+  "make_a_copy": "ساخت کپی",
+  "move_to_project": "انتقال به پروژه",
+  "good": "خوب",
+  "morning": "صبح",
+  "afternoon": "ظهر",
+  "evening": "عصر",
+  "show_all": "نمایش همه",
+  "show_less": "نمایش کمتر",
+  "no_data_yet": "هنوز داده‌ای وجود ندارد",
+  "syncing": "در حال همگام‌سازی",
+  "add_work_item": "افزودن مورد کاری",
+  "advanced_description_placeholder": "برای دستورات '/' را فشار دهید",
+  "create_work_item": "ایجاد مورد کاری",
+  "attachments": "پیوست‌ها",
+  "declining": "در حال رد کردن",
+  "declined": "رد شده",
+  "decline": "رد کردن",
+  "unassigned": "بدون مسئول",
+  "work_items": "موارد کاری",
+  "add_link": "افزودن لینک",
+  "points": "امتیازها",
+  "no_assignee": "بدون مسئول",
+  "no_assignees_yet": "هنوز مسئولی وجود ندارد",
+  "no_labels_yet": "هنوز برچسبی وجود ندارد",
+  "ideal": "ایده‌آل",
+  "current": "فعلی",
+  "no_matching_members": "عضو مطابقی یافت نشد",
+  "leaving": "در حال ترک کردن",
+  "removing": "در حال حذف",
+  "leave": "ترک کردن",
+  "refresh": "بروزرسانی",
+  "refreshing": "در حال بروزرسانی",
+  "refresh_status": "بروزرسانی وضعیت",
+  "prev": "قبلی",
+  "next": "بعدی",
+  "re_generating": "در حال تولید مجدد",
+  "re_generate": "تولید مجدد",
+  "re_generate_key": "تولید مجدد کلید",
+  "export": "خروجی",
+  "member": "{count, plural, one{# عضو} other{# عضو}}",
+
+  "project_view": {
+    "sort_by": {
+      "created_at": "تاریخ ایجاد",
+      "updated_at": "تاریخ بروزرسانی",
+      "name": "نام"
+    }
+  },
+
+  "toast": {
+    "success": "موفقیت!",
+    "error": "خطا!"
+  },
+
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "لینک ایجاد شد",
+        "message": "لینک با موفقیت ایجاد شد"
+      },
+      "not_created": {
+        "title": "لینک ایجاد نشد",
+        "message": "لینک قابل ایجاد نبود"
+      },
+      "updated": {
+        "title": "لینک بروزرسانی شد",
+        "message": "لینک با موفقیت بروزرسانی شد"
+      },
+      "not_updated": {
+        "title": "لینک بروزرسانی نشد",
+        "message": "لینک قابل بروزرسانی نبود"
+      },
+      "removed": {
+        "title": "لینک حذف شد",
+        "message": "لینک با موفقیت حذف شد"
+      },
+      "not_removed": {
+        "title": "لینک حذف نشد",
+        "message": "لینک قابل حذف نبود"
+      }
+    }
+  },
+
+  "home": {
+    "empty": {
+      "quickstart_guide": "راهنمای شروع سریع شما",
+      "not_right_now": "الان نه",
+      "create_project": {
+        "title": "ایجاد پروژه",
+        "description": "بیشتر چیزها در Plane با یک پروژه شروع می‌شوند.",
+        "cta": "شروع کنید"
+      },
+      "invite_team": {
+        "title": "دعوت از تیم خود",
+        "description": "با همکاران بسازید، ارسال کنید و مدیریت کنید.",
+        "cta": "آنها را اضافه کنید"
+      },
+      "configure_workspace": {
+        "title": "فضای کاری خود را تنظیم کنید.",
+        "description": "ویژگی‌ها را فعال یا غیرفعال کنید یا فراتر از آن بروید.",
+        "cta": "تنظیم این فضای کاری"
+      },
+      "personalize_account": {
+        "title": "Plane را مال خود کنید.",
+        "description": "تصویر، رنگ‌ها و موارد دیگر خود را انتخاب کنید.",
+        "cta": "شخصی‌سازی کنید"
+      },
+      "widgets": {
+        "title": "بدون ویجت‌ها ساکت است، آنها را فعال کنید",
+        "description": "به نظر می‌رسد تمام ویجت‌های شما غیرفعال هستند. اکنون آنها را فعال کنید تا تجربه خود را بهبود بخشید!",
+        "primary_button": {
+          "text": "مدیریت ویجت‌ها"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "لینک‌های سریع را برای موارد کاری که می‌خواهید در دسترس باشند ذخیره کنید.",
+      "add": "افزودن لینک سریع",
+      "title": "لینک سریع",
+      "title_plural": "لینک‌های سریع"
+    },
+    "recents": {
+      "title": "اخیر",
+      "empty": {
+        "project": "پروژه‌های اخیر شما پس از بازدید از یکی از آنها اینجا ظاهر می‌شوند.",
+        "page": "صفحات اخیر شما پس از بازدید از یکی از آنها اینجا ظاهر می‌شوند.",
+        "issue": "موارد کاری اخیر شما پس از بازدید از یکی از آنها اینجا ظاهر می‌شوند.",
+        "default": "هنوز مورد اخیری ندارید."
+      },
+      "filters": {
+        "all": "همه موارد",
+        "projects": "پروژه‌ها",
+        "pages": "صفحات",
+        "issues": "موارد کاری"
+      }
+    },
+    "new_at_plane": {
+      "title": "جدید در Plane"
+    },
+    "quick_tutorial": {
+      "title": "آموزش سریع"
+    },
+    "widget": {
+      "reordered_successfully": "ویجت با موفقیت مرتب شد.",
+      "reordering_failed": "خطا در مرتب‌سازی ویجت رخ داد."
+    },
+    "manage_widgets": "مدیریت ویجت‌ها",
+    "title": "خانه",
+    "star_us_on_github": "ما را در گیت‌هاب ستاره کنید"
+  },
+
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL نامعتبر است",
+        "placeholder": "URL را تایپ یا جایگذاری کنید"
+      },
+      "title": {
+        "text": "عنوان نمایشی",
+        "placeholder": "چگونه می‌خواهید این لینک را ببینید"
+      }
+    }
+  },
+
+  "common": {
+    "all": "همه",
+    "states": "وضعیت‌ها",
+    "state": "وضعیت",
+    "state_groups": "گروه‌های وضعیت",
+    "state_group": "گروه وضعیت",
+    "priorities": "اولویت‌ها",
+    "priority": "اولویت",
+    "team_project": "پروژه تیمی",
+    "project": "پروژه",
+    "cycle": "چرخه",
+    "cycles": "چرخه‌ها",
+    "module": "ماژول",
+    "modules": "ماژول‌ها",
+    "labels": "برچسب‌ها",
+    "label": "برچسب",
+    "assignees": "مسئولان",
+    "assignee": "مسئول",
+    "created_by": "ایجاد شده توسط",
+    "none": "هیچ",
+    "link": "لینک",
+    "estimates": "تخمین‌ها",
+    "estimate": "تخمین",
+    "created_at": "تاریخ ایجاد",
+    "completed_at": "تاریخ تکمیل",
+    "layout": "طرح‌بندی",
+    "filters": "فیلترها",
+    "display": "نمایش",
+    "load_more": "بارگذاری بیشتر",
+    "activity": "فعالیت",
+    "analytics": "تحلیل‌ها",
+    "dates": "تاریخ‌ها",
+    "success": "موفقیت!",
+    "something_went_wrong": "خطایی رخ داد",
+    "error": {
+      "label": "خطا!",
+      "message": "خطایی رخ داد. لطفاً دوباره تلاش کنید."
+    },
+    "group_by": "گروه‌بندی بر اساس",
+    "epic": "اپیک",
+    "epics": "اپیک‌ها",
+    "work_item": "مورد کاری",
+    "work_items": "موارد کاری",
+    "sub_work_item": "مورد کاری فرعی",
+    "add": "افزودن",
+    "warning": "هشدار",
+    "updating": "در حال بروزرسانی",
+    "adding": "در حال افزودن",
+    "update": "بروزرسانی",
+    "creating": "در حال ایجاد",
+    "create": "ایجاد",
+    "cancel": "لغو",
+    "description": "توضیحات",
+    "title": "عنوان",
+    "attachment": "پیوست",
+    "general": "عمومی",
+    "features": "ویژگی‌ها",
+    "automation": "خودکارسازی",
+    "project_name": "نام پروژه",
+    "project_id": "شناسه پروژه",
+    "project_timezone": "منطقه زمانی پروژه",
+    "created_on": "ایجاد شده در",
+    "update_project": "بروزرسانی پروژه",
+    "identifier_already_exists": "شناسه قبلاً وجود دارد",
+    "add_more": "افزودن بیشتر",
+    "defaults": "پیش‌فرض‌ها",
+    "add_label": "افزودن برچسب",
+    "customize_time_range": "سفارشی‌سازی بازه زمانی",
+    "loading": "در حال بارگذاری",
+    "attachments": "پیوست‌ها",
+    "property": "ویژگی",
+    "properties": "ویژگی‌ها",
+    "parent": "والد",
+    "page": "صفحه",
+    "remove": "حذف",
+    "archiving": "در حال بایگانی",
+    "archive": "بایگانی",
+    "access": {
+      "public": "عمومی",
+      "private": "خصوصی"
+    },
+    "done": "انجام شد",
+    "sub_work_items": "موارد کاری فرعی",
+    "comment": "نظر",
+    "workspace_level": "سطح فضای کاری",
+    "order_by": {
+      "label": "مرتب‌سازی بر اساس",
+      "manual": "دستی",
+      "last_created": "آخرین ایجاد شده",
+      "last_updated": "آخرین بروزرسانی شده",
+      "start_date": "تاریخ شروع",
+      "due_date": "تاریخ سررسید",
+      "asc": "صعودی",
+      "desc": "نزولی",
+      "updated_on": "بروزرسانی شده در"
+    },
+    "sort": {
+      "asc": "صعودی",
+      "desc": "نزولی",
+      "created_on": "ایجاد شده در",
+      "updated_on": "بروزرسانی شده در"
+    },
+    "comments": "نظرات",
+    "updates": "بروزرسانی‌ها",
+    "clear_all": "پاک کردن همه",
+    "copied": "کپی شد!",
+    "link_copied": "لینک کپی شد!",
+    "link_copied_to_clipboard": "لینک در کلیپ‌بورد کپی شد",
+    "copied_to_clipboard": "لینک مورد کاری در کلیپ‌بورد کپی شد",
+    "is_copied_to_clipboard": "مورد کاری در کلیپ‌بورد کپی شد",
+    "no_links_added_yet": "هنوز لینکی افزوده نشده است",
+    "add_link": "افزودن لینک",
+    "links": "لینک‌ها",
+    "go_to_workspace": "رفتن به فضای کاری",
+    "progress": "پیشرفت",
+    "optional": "اختیاری",
+    "join": "پیوستن",
+    "go_back": "بازگشت",
+    "continue": "ادامه",
+    "resend": "ارسال مجدد",
+    "relations": "روابط",
+    "errors": {
+      "default": {
+        "title": "خطا!",
+        "message": "خطایی رخ داد. لطفاً دوباره تلاش کنید."
+      },
+      "required": "این فیلد الزامی است",
+      "entity_required": "{entity} الزامی است"
+    },
+    "update_link": "بروزرسانی لینک",
+    "attach": "پیوست کردن",
+    "create_new": "ایجاد جدید",
+    "add_existing": "افزودن موجود",
+    "type_or_paste_a_url": "URL را تایپ یا جایگذاری کنید",
+    "url_is_invalid": "URL نامعتبر است",
+    "display_title": "عنوان نمایشی",
+    "link_title_placeholder": "چگونه می‌خواهید این لینک را ببینید",
+    "url": "URL",
+    "side_peek": "نمای کناری",
+    "modal": "مودال",
+    "full_screen": "تمام صفحه",
+    "close_peek_view": "بستن نمای کناری",
+    "toggle_peek_view_layout": "تغییر طرح‌بندی نمای کناری",
+    "options": "گزینه‌ها",
+    "duration": "مدت زمان",
+    "today": "امروز",
+    "week": "هفته",
+    "month": "ماه",
+    "quarter": "سه ماهه",
+    "press_for_commands": "برای دستورات '/' را فشار دهید",
+    "click_to_add_description": "برای افزودن توضیحات کلیک کنید",
+    "search": {
+      "label": "جستجو",
+      "placeholder": "برای جستجو تایپ کنید",
+      "no_matches_found": "مطابقی یافت نشد",
+      "no_matching_results": "نتیجه مطابقی یافت نشد"
+    },
+    "actions": {
+      "edit": "ویرایش",
+      "make_a_copy": "ساخت کپی",
+      "open_in_new_tab": "باز کردن در تب جدید",
+      "copy_link": "کپی لینک",
+      "archive": "بایگانی",
+      "restore": "بازیابی",
+      "delete": "حذف",
+      "remove_relation": "حذف رابطه",
+      "subscribe": "مشترک شدن",
+      "unsubscribe": "لغو اشتراک",
+      "clear_sorting": "پاک کردن مرتب‌سازی",
+      "show_weekends": "نمایش آخر هفته‌ها",
+      "enable": "فعال کردن",
+      "disable": "غیرفعال کردن"
+    },
+    "name": "نام",
+    "discard": "دور ریختن",
+    "confirm": "تایید",
+    "confirming": "در حال تایید",
+    "read_the_docs": "خواندن مستندات",
+    "default": "پیش‌فرض",
+    "active": "فعال",
+    "enabled": "فعال شده",
+    "disabled": "غیرفعال شده",
+    "mandate": "اجبار",
+    "mandatory": "اجباری",
+    "yes": "بله",
+    "no": "خیر",
+    "please_wait": "لطفاً صبر کنید",
+    "enabling": "در حال فعال کردن",
+    "disabling": "در حال غیرفعال کردن",
+    "beta": "بتا",
+    "or": "یا",
+    "next": "بعدی",
+    "back": "بازگشت",
+    "cancelling": "در حال لغو",
+    "configuring": "در حال تنظیم",
+    "clear": "پاک کردن",
+    "import": "ورود",
+    "connect": "اتصال",
+    "authorizing": "در حال مجوزدهی",
+    "processing": "در حال پردازش",
+    "no_data_available": "داده‌ای موجود نیست",
+    "from": "از {name}",
+    "authenticated": "احراز هویت شده",
+    "select": "انتخاب",
+    "upgrade": "ارتقا",
+    "add_seats": "افزودن صندلی",
+    "projects": "پروژه‌ها",
+    "workspace": "فضای کاری",
+    "workspaces": "فضاهای کاری",
+    "team": "تیم",
+    "teams": "تیم‌ها",
+    "entity": "موجودیت",
+    "entities": "موجودیت‌ها",
+    "task": "وظیفه",
+    "tasks": "وظایف",
+    "section": "بخش",
+    "sections": "بخش‌ها",
+    "edit": "ویرایش",
+    "connecting": "در حال اتصال",
+    "connected": "متصل شده",
+    "disconnect": "قطع اتصال",
+    "disconnecting": "در حال قطع اتصال",
+    "installing": "در حال نصب",
+    "install": "نصب",
+    "reset": "بازنشانی",
+    "live": "زنده",
+    "change_history": "تاریخچه تغییرات",
+    "coming_soon": "به زودی",
+    "members": "اعضا",
+    "you": "شما",
+    "upgrade_cta": {
+      "higher_subscription": "ارتقا به اشتراک بالاتر",
+      "talk_to_sales": "صحبت با فروش"
+    },
+    "category": "دسته‌بندی",
+    "categories": "دسته‌بندی‌ها",
+    "saving": "در حال ذخیره",
+    "save_changes": "ذخیره تغییرات",
+    "delete": "حذف",
+    "deleting": "در حال حذف",
+    "pending": "در انتظار",
+    "invite": "دعوت",
+    "view": "نمایش"
+  },
+
+  "chart": {
+    "x_axis": "محور X",
+    "y_axis": "محور Y",
+    "metric": "معیار"
+  },
+
+  "form": {
+    "title": {
+      "required": "عنوان الزامی است",
+      "max_length": "عنوان باید کمتر از {length} کاراکتر باشد"
+    }
+  },
+
+  "entity": {
+    "grouping_title": "گروه‌بندی {entity}",
+    "priority": "اولویت {entity}",
+    "all": "همه {entity}",
+    "drop_here_to_move": "برای انتقال {entity} اینجا رها کنید",
+    "delete": {
+      "label": "حذف {entity}",
+      "success": "{entity} با موفقیت حذف شد",
+      "failed": "حذف {entity} با خطا مواجه شد"
+    },
+    "update": {
+      "failed": "بروزرسانی {entity} با خطا مواجه شد",
+      "success": "{entity} با موفقیت بروزرسانی شد"
+    },
+    "link_copied_to_clipboard": "لینک {entity} در کلیپ‌بورد کپی شد",
+    "fetch": {
+      "failed": "خطا در دریافت {entity}"
+    },
+    "add": {
+      "success": "{entity} با موفقیت افزوده شد",
+      "failed": "خطا در افزودن {entity}"
+    }
+  },
+
+  "epic": {
+    "all": "همه اپیک‌ها",
+    "label": "{count, plural, one {اپیک} other {اپیک‌ها}}",
+    "new": "اپیک جدید",
+    "adding": "در حال افزودن اپیک",
+    "create": {
+      "success": "اپیک با موفقیت ایجاد شد"
+    },
+    "add": {
+      "press_enter": "برای افزودن اپیک دیگر 'Enter' را فشار دهید",
+      "label": "افزودن اپیک"
+    },
+    "title": {
+      "label": "عنوان اپیک",
+      "required": "عنوان اپیک الزامی است."
+    }
+  },
+
+  "issue": {
+    "label": "{count, plural, one {مورد کاری} other {موارد کاری}}",
+    "all": "همه موارد کاری",
+    "edit": "ویرایش مورد کاری",
+    "title": {
+      "label": "عنوان مورد کاری",
+      "required": "عنوان مورد کاری الزامی است."
+    },
+    "add": {
+      "press_enter": "برای افزودن مورد کاری دیگر 'Enter' را فشار دهید",
+      "label": "افزودن مورد کاری",
+      "cycle": {
+        "failed": "مورد کاری قابل افزودن به چرخه نبود. لطفاً دوباره تلاش کنید.",
+        "success": "{count, plural, one {مورد کاری} other {موارد کاری}} با موفقیت به چرخه افزوده شد.",
+        "loading": "در حال افزودن {count, plural, one {مورد کاری} other {موارد کاری}} به چرخه"
+      },
+      "assignee": "افزودن مسئولان",
+      "start_date": "افزودن تاریخ شروع",
+      "due_date": "افزودن تاریخ سررسید",
+      "parent": "افزودن مورد کاری والد",
+      "sub_issue": "افزودن مورد کاری فرعی",
+      "relation": "افزودن رابطه",
+      "link": "افزودن لینک",
+      "existing": "افزودن مورد کاری موجود"
+    },
+    "remove": {
+      "label": "حذف مورد کاری",
+      "cycle": {
+        "loading": "در حال حذف مورد کاری از چرخه",
+        "success": "مورد کاری با موفقیت از چرخه حذف شد.",
+        "failed": "مورد کاری قابل حذف از چرخه نبود. لطفاً دوباره تلاش کنید."
+      },
+      "module": {
+        "loading": "در حال حذف مورد کاری از ماژول",
+        "success": "مورد کاری با موفقیت از ماژول حذف شد.",
+        "failed": "مورد کاری قابل حذف از ماژول نبود. لطفاً دوباره تلاش کنید."
+      },
+      "parent": {
+        "label": "حذف مورد کاری والد"
+      }
+    },
+    "new": "مورد کاری جدید",
+    "adding": "در حال افزودن مورد کاری",
+    "create": {
+      "success": "مورد کاری با موفقیت ایجاد شد"
+    },
+    "priority": {
+      "urgent": "فوری",
+      "high": "بالا",
+      "medium": "متوسط",
+      "low": "پایین"
+    },
+    "display": {
+      "properties": {
+        "label": "نمایش ویژگی‌ها",
+        "id": "شناسه",
+        "issue_type": "نوع مورد کاری",
+        "sub_issue_count": "تعداد موارد کاری فرعی",
+        "attachment_count": "تعداد پیوست‌ها",
+        "created_on": "ایجاد شده در",
+        "sub_issue": "مورد کاری فرعی",
+        "work_item_count": "تعداد موارد کاری"
+      },
+      "extra": {
+        "show_sub_issues": "نمایش موارد کاری فرعی",
+        "show_empty_groups": "نمایش گروه‌های خالی"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "این طرح‌بندی بر اساس مرتب شده است",
+      "list": "لیست",
+      "kanban": "تخته",
+      "calendar": "تقویم",
+      "spreadsheet": "جدول",
+      "gantt": "نمودار گانت",
+      "title": {
+        "list": "طرح‌بندی لیست",
+        "kanban": "طرح‌بندی تخته",
+        "calendar": "طرح‌بندی تقویم",
+        "spreadsheet": "طرح‌بندی جدول",
+        "gantt": "طرح‌بندی نمودار گانت"
+      }
+    },
+    "states": {
+      "active": "فعال",
+      "backlog": "بک‌لاگ"
+    },
+    "comments": {
+      "placeholder": "افزودن نظر",
+      "switch": {
+        "private": "تغییر به نظر خصوصی",
+        "public": "تغییر به نظر عمومی"
+      },
+      "create": {
+        "success": "نظر با موفقیت ایجاد شد",
+        "error": "ایجاد نظر با خطا مواجه شد. لطفاً بعداً دوباره تلاش کنید."
+      },
+      "update": {
+        "success": "نظر با موفقیت بروزرسانی شد",
+        "error": "بروزرسانی نظر با خطا مواجه شد. لطفاً بعداً دوباره تلاش کنید."
+      },
+      "remove": {
+        "success": "نظر با موفقیت حذف شد",
+        "error": "حذف نظر با خطا مواجه شد. لطفاً بعداً دوباره تلاش کنید."
+      },
+      "upload": {
+        "error": "بارگذاری فایل با خطا مواجه شد. لطفاً بعداً دوباره تلاش کنید."
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "مورد کاری وجود ندارد",
+        "description": "مورد کاری که به دنبال آن هستید وجود ندارد، بایگانی شده یا حذف شده است.",
+        "primary_button": {
+          "text": "مشاهده سایر موارد کاری"
+        }
+      }
+    },
+    "sibling": {
+      "label": "موارد کاری هم‌سطح"
+    },
+    "archive": {
+      "description": "فقط موارد کاری تکمیل شده یا لغو شده\nمی‌توانند بایگانی شوند",
+      "label": "بایگانی مورد کاری",
+      "confirm_message": "آیا مطمئن هستید که می‌خواهید این مورد کاری را بایگانی کنید؟ تمام موارد کاری بایگانی شده شما بعداً قابل بازیابی هستند.",
+      "success": {
+        "label": "بایگانی موفق",
+        "message": "بایگانی‌های شما را می‌توانید در بایگانی‌های پروژه پیدا کنید."
+      },
+      "failed": {
+        "message": "مورد کاری قابل بایگانی نبود. لطفاً دوباره تلاش کنید."
+      }
+    },
+    "restore": {
+      "success": {
+        "title": "بازیابی موفق",
+        "message": "مورد کاری شما را می‌توانید در موارد کاری پروژه پیدا کنید."
+      },
+      "failed": {
+        "message": "مورد کاری قابل بازیابی نبود. لطفاً دوباره تلاش کنید."
+      }
+    },
+    "relation": {
+      "relates_to": "مرتبط با",
+      "duplicate": "تکراری از",
+      "blocked_by": "مسدود شده توسط",
+      "blocking": "مسدود کننده"
+    },
+    "copy_link": "کپی لینک مورد کاری",
+    "delete": {
+      "label": "حذف مورد کاری",
+      "error": "خطا در حذف مورد کاری"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "مشترک شدن در مورد کاری با موفقیت انجام شد",
+        "unsubscribed": "لغو اشتراک مورد کاری با موفقیت انجام شد"
+      }
+    },
+    "select": {
+      "error": "لطفاً حداقل یک مورد کاری را انتخاب کنید",
+      "empty": "مورد کاری انتخاب نشده است",
+      "add_selected": "افزودن موارد کاری انتخاب شده"
+    },
+    "open_in_full_screen": "باز کردن مورد کاری در تمام صفحه"
+  },
+
+  "attachment": {
+    "error": "فایل قابل پیوست نبود. لطفاً دوباره بارگذاری کنید.",
+    "only_one_file_allowed": "فقط یک فایل می‌تواند در یک زمان بارگذاری شود.",
+    "file_size_limit": "فایل باید {size} مگابایت یا کمتر باشد.",
+    "drag_and_drop": "فایل را برای بارگذاری بکشید و رها کنید",
+    "delete": "حذف پیوست"
+  },
+
+  "label": {
+    "select": "انتخاب برچسب",
+    "create": {
+      "success": "برچسب با موفقیت ایجاد شد",
+      "failed": "ایجاد برچسب با خطا مواجه شد",
+      "already_exists": "برچسب قبلاً وجود دارد",
+      "type": "برای افزودن برچسب جدید تایپ کنید"
+    }
+  },
+
+  "sub_work_item": {
+    "update": {
+      "success": "مورد کاری فرعی با موفقیت بروزرسانی شد",
+      "error": "خطا در بروزرسانی مورد کاری فرعی"
+    },
+    "remove": {
+      "success": "مورد کاری فرعی با موفقیت حذف شد",
+      "error": "خطا در حذف مورد کاری فرعی"
+    }
+  },
+
+  "view": {
+    "label": "{count, plural, one {نمایش} other {نمایش‌ها}}",
+    "create": {
+      "label": "ایجاد نمایش"
+    },
+    "update": {
+      "label": "بروزرسانی نمایش"
+    }
+  },
+
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "در انتظار",
+        "description": "در انتظار"
+      },
+      "declined": {
+        "title": "رد شده",
+        "description": "رد شده"
+      },
+      "snoozed": {
+        "title": "به تعویق افتاده",
+        "description": "{days, plural, one{# روز} other{# روز}} باقی مانده"
+      },
+      "accepted": {
+        "title": "پذیرفته شده",
+        "description": "پذیرفته شده"
+      },
+      "duplicate": {
+        "title": "تکراری",
+        "description": "تکراری"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "رد مورد کاری",
+        "content": "آیا مطمئن هستید که می‌خواهید مورد کاری {value} را رد کنید؟"
+      },
+      "delete": {
+        "title": "حذف مورد کاری",
+        "content": "آیا مطمئن هستید که می‌خواهید مورد کاری {value} را حذف کنید؟",
+        "success": "مورد کاری با موفقیت حذف شد"
+      }
+    },
+    "errors": {
+      "snooze_permission": "فقط مدیران پروژه می‌توانند موارد کاری را به تعویق بیندازند/از تعویق خارج کنند",
+      "accept_permission": "فقط مدیران پروژه می‌توانند موارد کاری را بپذیرند",
+      "decline_permission": "فقط مدیران پروژه می‌توانند موارد کاری را رد کنند"
+    },
+    "actions": {
+      "accept": "پذیرش",
+      "decline": "رد",
+      "snooze": "به تعویق انداختن",
+      "unsnooze": "خروج از تعویق",
+      "copy": "کپی لینک مورد کاری",
+      "delete": "حذف",
+      "open": "باز کردن مورد کاری",
+      "mark_as_duplicate": "علامت‌گذاری به عنوان تکراری",
+      "move": "انتقال {value} به موارد کاری پروژه"
+    },
+    "source": {
+      "in-app": "در برنامه"
+    },
+    "order_by": {
+      "created_at": "تاریخ ایجاد",
+      "updated_at": "تاریخ بروزرسانی",
+      "id": "شناسه"
+    },
+    "label": "ورودی",
+    "page_label": "{workspace} - ورودی",
+    "modal": {
+      "title": "ایجاد مورد کاری ورودی"
+    },
+    "tabs": {
+      "open": "باز",
+      "closed": "بسته"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "مورد کاری باز وجود ندارد",
+        "description": "موارد کاری باز را اینجا پیدا کنید. ایجاد مورد کاری جدید."
+      },
+      "sidebar_closed_tab": {
+        "title": "مورد کاری بسته وجود ندارد",
+        "description": "تمام موارد کاری پذیرفته شده یا رد شده را می‌توانید اینجا پیدا کنید."
+      },
+      "sidebar_filter": {
+        "title": "مورد کاری مطابق با فیلتر وجود ندارد",
+        "description": "مورد کاری مطابق با فیلتر اعمال شده در ورودی وجود ندارد. ایجاد مورد کاری جدید."
+      },
+      "detail": {
+        "title": "برای مشاهده جزئیات مورد کاری را انتخاب کنید."
+      }
+    }
+  },
+
+  "workspace_creation": {
+    "heading": "فضای کاری خود را ایجاد کنید",
+    "subheading": "برای شروع استفاده از Plane، باید یک فضای کاری ایجاد کنید یا به یکی بپیوندید.",
+    "form": {
+      "name": {
+        "label": "نام فضای کاری خود را انتخاب کنید",
+        "placeholder": "چیزی آشنا و قابل تشخیص همیشه بهترین است."
+      },
+      "url": {
+        "label": "URL فضای کاری خود را تنظیم کنید",
+        "placeholder": "URL را تایپ یا جایگذاری کنید",
+        "edit_slug": "شما فقط می‌توانید بخش نام URL را ویرایش کنید"
+      },
+      "organization_size": {
+        "label": "چند نفر از این فضای کاری استفاده خواهند کرد؟",
+        "placeholder": "انتخاب یک محدوده"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "فقط مدیر نمونه می‌تواند فضاهای کاری ایجاد کند",
+        "description": "اگر آدرس ایمیل مدیر نمونه را می‌دانید، برای ارتباط با آنها روی دکمه زیر کلیک کنید.",
+        "request_button": "درخواست مدیر نمونه"
+      },
+      "validation": {
+        "name_alphanumeric": "نام‌های فضای کاری فقط می‌توانند شامل کاراکترهای (' '), ('-'), ('_') و الفبایی عددی باشند.",
+        "name_length": "نام خود را به ۸۰ کاراکتر محدود کنید.",
+        "url_alphanumeric": "URL‌ها فقط می‌توانند شامل کاراکترهای ('-') و الفبایی عددی باشند.",
+        "url_length": "URL خود را به ۴۸ کاراکتر محدود کنید.",
+        "url_already_taken": "URL فضای کاری قبلاً استفاده شده است!"
+      }
+    },
+    "request_email": {
+      "subject": "درخواست فضای کاری جدید",
+      "body": "سلام مدیر نمونه،\n\nلطفاً یک فضای کاری جدید با URL [/workspace-name] برای [هدف ایجاد فضای کاری] ایجاد کنید.\n\nبا تشکر،\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "ایجاد فضای کاری",
+      "loading": "در حال ایجاد فضای کاری"
+    },
+    "toast": {
+      "success": {
+        "title": "موفقیت",
+        "message": "فضای کاری با موفقیت ایجاد شد"
+      },
+      "error": {
+        "title": "خطا",
+        "message": "فضای کاری قابل ایجاد نبود. لطفاً دوباره تلاش کنید."
+      }
+    }
+  },
+
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "نمای کلی پروژه‌ها، فعالیت‌ها و معیارهای شما",
+        "description": "به Plane خوش آمدید، ما از حضور شما هیجان‌زده هستیم. اولین پروژه خود را ایجاد کنید و موارد کاری خود را پیگیری کنید، و این صفحه به فضایی تبدیل خواهد شد که به پیشرفت شما کمک می‌کند. مدیران همچنین مواردی را خواهند دید که به پیشرفت تیم آنها کمک می‌کند.",
+        "primary_button": {
+          "text": "ساخت اولین پروژه خود",
+          "comic": {
+            "title": "همه چیز در Plane با یک پروژه شروع می‌شود",
+            "description": "یک پروژه می‌تواند نقشه راه یک محصول، یک کمپین بازاریابی یا راه‌اندازی یک ماشین جدید باشد."
+          }
+        }
+      }
+    }
+  },
+
+  "workspace_analytics": {
+    "label": "تحلیل‌ها",
+    "page_label": "{workspace} - تحلیل‌ها",
+    "open_tasks": "کل وظایف باز",
+    "error": "خطایی در دریافت داده‌ها رخ داد.",
+    "work_items_closed_in": "موارد کاری بسته شده در",
+    "selected_projects": "پروژه‌های انتخاب شده",
+    "total_members": "کل اعضا",
+    "total_cycles": "کل چرخه‌ها",
+    "total_modules": "کل ماژول‌ها",
+    "pending_work_items": {
+      "title": "موارد کاری در انتظار",
+      "empty_state": "تحلیل موارد کاری در انتظار توسط همکاران اینجا ظاهر می‌شود."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "موارد کاری بسته شده در یک سال",
+      "empty_state": "موارد کاری را ببندید تا تحلیل آنها را در قالب نمودار مشاهده کنید."
+    },
+    "most_work_items_created": {
+      "title": "بیشترین موارد کاری ایجاد شده",
+      "empty_state": "همکاران و تعداد موارد کاری ایجاد شده توسط آنها اینجا ظاهر می‌شود."
+    },
+    "most_work_items_closed": {
+      "title": "بیشترین موارد کاری بسته شده",
+      "empty_state": "همکاران و تعداد موارد کاری بسته شده توسط آنها اینجا ظاهر می‌شود."
+    },
+    "tabs": {
+      "scope_and_demand": "محدوده و تقاضا",
+      "custom": "تحلیل‌های سفارشی"
+    },
+    "empty_state": {
+      "general": {
+        "title": "پیشرفت، حجم کار و تخصیص‌ها را پیگیری کنید. روندها را شناسایی کنید، موانع را برطرف کنید و کار را سریع‌تر انجام دهید",
+        "description": "محدوده در برابر تقاضا، تخمین‌ها و افزایش محدوده را ببینید. عملکرد اعضای تیم و تیم‌ها را دریافت کنید و مطمئن شوید که پروژه شما به موقع اجرا می‌شود.",
+        "primary_button": {
+          "text": "شروع اولین پروژه خود",
+          "comic": {
+            "title": "تحلیل‌ها با چرخه‌ها + ماژول‌ها بهترین عملکرد را دارند",
+            "description": "ابتدا، موارد کاری خود را در چرخه‌ها زمان‌بندی کنید و اگر می‌توانید، موارد کاری که بیش از یک چرخه طول می‌کشند را در ماژول‌ها گروه‌بندی کنید. هر دو را در ناوبری سمت چپ بررسی کنید."
+          }
+        }
+      }
+    }
+  },
+
+  "workspace_projects": {
+    "label": "{count, plural, one {پروژه} other {پروژه‌ها}}",
+    "create": {
+      "label": "افزودن پروژه"
+    },
+    "network": {
+      "label": "شبکه",
+      "private": {
+        "title": "خصوصی",
+        "description": "فقط با دعوت قابل دسترسی"
+      },
+      "public": {
+        "title": "عمومی",
+        "description": "هر کسی در فضای کاری به جز مهمانان می‌تواند عضو شود"
+      }
+    },
+    "error": {
+      "permission": "شما دسترسی لازم برای انجام این عملیات را ندارید.",
+      "cycle_delete": "حذف چرخه با خطا مواجه شد",
+      "module_delete": "حذف ماژول با خطا مواجه شد",
+      "issue_delete": "حذف مورد کاری با خطا مواجه شد"
+    },
+    "state": {
+      "backlog": "بک‌لاگ",
+      "unstarted": "شروع نشده",
+      "started": "شروع شده",
+      "completed": "تکمیل شده",
+      "cancelled": "لغو شده"
+    },
+    "sort": {
+      "manual": "دستی",
+      "name": "نام",
+      "created_at": "تاریخ ایجاد",
+      "members_length": "تعداد اعضا"
+    },
+    "scope": {
+      "my_projects": "پروژه‌های من",
+      "archived_projects": "بایگانی شده"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# ماه} other{# ماه}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "پروژه فعالی وجود ندارد",
+        "description": "هر پروژه را به عنوان والد کارهای هدف‌محور در نظر بگیرید. پروژه‌ها جایی هستند که وظایف، چرخه‌ها و ماژول‌ها زندگی می‌کنند و همراه با همکاران شما به شما کمک می‌کنند تا به آن هدف برسید. یک پروژه جدید ایجاد کنید یا برای پروژه‌های بایگانی شده فیلتر کنید.",
+        "primary_button": {
+          "text": "شروع اولین پروژه خود",
+          "comic": {
+            "title": "همه چیز در Plane با یک پروژه شروع می‌شود",
+            "description": "یک پروژه می‌تواند نقشه راه یک محصول، یک کمپین بازاریابی یا راه‌اندازی یک ماشین جدید باشد."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "پروژه‌ای وجود ندارد",
+        "description": "برای ایجاد موارد کاری یا مدیریت کار خود، باید یک پروژه ایجاد کنید یا بخشی از یکی باشید.",
+        "primary_button": {
+          "text": "شروع اولین پروژه خود",
+          "comic": {
+            "title": "همه چیز در Plane با یک پروژه شروع می‌شود",
+            "description": "یک پروژه می‌تواند نقشه راه یک محصول، یک کمپین بازاریابی یا راه‌اندازی یک ماشین جدید باشد."
+          }
+        }
+      },
+      "filter": {
+        "title": "پروژه مطابقی وجود ندارد",
+        "description": "هیچ پروژه‌ای با معیارهای مطابق یافت نشد. \n به جای آن یک پروژه جدید ایجاد کنید."
+      },
+      "search": {
+        "description": "هیچ پروژه‌ای با معیارهای مطابق یافت نشد.\nبه جای آن یک پروژه جدید ایجاد کنید"
+      }
+    }
+  },
+
+  "workspace_views": {
+    "add_view": "افزودن نمایش",
+    "empty_state": {
+      "all-issues": {
+        "title": "مورد کاری در پروژه وجود ندارد",
+        "description": "اولین پروژه تمام شد! حالا، کار خود را به قطعات قابل پیگیری با موارد کاری تقسیم کنید. بیایید شروع کنیم!",
+        "primary_button": {
+          "text": "ایجاد مورد کاری جدید"
+        }
+      },
+      "assigned": {
+        "title": "هنوز مورد کاری وجود ندارد",
+        "description": "موارد کاری اختصاص داده شده به شما را می‌توان از اینجا پیگیری کرد.",
+        "primary_button": {
+          "text": "ایجاد مورد کاری جدید"
+        }
+      },
+      "created": {
+        "title": "هنوز مورد کاری وجود ندارد",
+        "description": "تمام موارد کاری ایجاد شده توسط شما اینجا می‌آیند، مستقیماً آنها را اینجا پیگیری کنید.",
+        "primary_button": {
+          "text": "ایجاد مورد کاری جدید"
+        }
+      },
+      "subscribed": {
+        "title": "هنوز مورد کاری وجود ندارد",
+        "description": "به موارد کاری که به آنها علاقه دارید مشترک شوید، همه آنها را اینجا پیگیری کنید."
+      },
+      "custom-view": {
+        "title": "هنوز مورد کاری وجود ندارد",
+        "description": "موارد کاری که با فیلترها مطابقت دارند، همه آنها را اینجا پیگیری کنید."
+      }
+    }
+  },
+
+  "workspace_settings": {
+    "label": "تنظیمات فضای کاری",
+    "page_label": "{workspace} - تنظیمات عمومی",
+    "key_created": "کلید ایجاد شد",
+    "copy_key": "این کلید مخفی را در صفحات Plane کپی و ذخیره کنید. پس از کلیک روی بستن نمی‌توانید این کلید را ببینید. یک فایل CSV حاوی کلید دانلود شده است.",
+    "token_copied": "توکن در کلیپ‌بورد کپی شد.",
+    "settings": {
+      "general": {
+        "title": "عمومی",
+        "upload_logo": "بارگذاری لوگو",
+        "edit_logo": "ویرایش لوگو",
+        "name": "نام فضای کاری",
+        "company_size": "اندازه شرکت",
+        "url": "URL فضای کاری",
+        "update_workspace": "بروزرسانی فضای کاری",
+        "delete_workspace": "حذف این فضای کاری",
+        "delete_workspace_description": "با حذف فضای کاری، تمام داده‌ها و منابع موجود در آن به طور دائمی حذف شده و قابل بازیابی نخواهند بود.",
+        "delete_btn": "حذف این فضای کاری",
+        "delete_modal": {
+          "title": "آیا مطمئن هستید که می‌خواهید این فضای کاری را حذف کنید؟",
+          "description": "شما یک دوره آزمایشی فعال برای یکی از طرح‌های پولی ما دارید. لطفاً ابتدا آن را لغو کنید تا ادامه دهید.",
+          "dismiss": "رد کردن",
+          "cancel": "لغو دوره آزمایشی",
+          "success_title": "فضای کاری حذف شد.",
+          "success_message": "به زودی به صفحه پروفایل خود خواهید رفت.",
+          "error_title": "این کار انجام نشد.",
+          "error_message": "لطفاً دوباره تلاش کنید."
+        },
+        "errors": {
+          "name": {
+            "required": "نام الزامی است",
+            "max_length": "نام فضای کاری نباید از ۸۰ کاراکتر تجاوز کند"
+          },
+          "company_size": {
+            "required": "اندازه شرکت الزامی است",
+            "select_a_range": "اندازه سازمان را انتخاب کنید"
+          }
+        }
+      },
+      "members": {
+        "title": "اعضا",
+        "add_member": "افزودن عضو",
+        "pending_invites": "دعوت‌های در انتظار",
+        "invitations_sent_successfully": "دعوت‌ها با موفقیت ارسال شدند",
+        "leave_confirmation": "آیا مطمئن هستید که می‌خواهید فضای کاری را ترک کنید؟ دیگر به این فضای کاری دسترسی نخواهید داشت. این عملیات قابل برگشت نیست.",
+        "details": {
+          "full_name": "نام کامل",
+          "display_name": "نام نمایشی",
+          "email_address": "آدرس ایمیل",
+          "account_type": "نوع حساب",
+          "authentication": "احراز هویت",
+          "joining_date": "تاریخ پیوستن"
+        },
+        "modal": {
+          "title": "دعوت از افراد برای همکاری",
+          "description": "از افراد برای همکاری در فضای کاری خود دعوت کنید.",
+          "button": "ارسال دعوت‌ها",
+          "button_loading": "در حال ارسال دعوت‌ها",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "برای دعوت آنها به یک آدرس ایمیل نیاز داریم.",
+            "invalid": "ایمیل نامعتبر است"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "title": "صورتحساب و طرح‌ها",
+        "current_plan": "طرح فعلی",
+        "free_plan": "شما در حال حاضر از طرح رایگان استفاده می‌کنید",
+        "view_plans": "مشاهده طرح‌ها"
+      },
+      "exports": {
+        "title": "خروجی‌ها",
+        "exporting": "در حال خروجی گرفتن",
+        "previous_exports": "خروجی‌های قبلی",
+        "export_separate_files": "خروجی گرفتن از داده‌ها در فایل‌های جداگانه",
+        "modal": {
+          "title": "خروجی به",
+          "toasts": {
+            "success": {
+              "title": "خروجی موفق",
+              "message": "می‌توانید {entity} خروجی گرفته شده را از خروجی قبلی دانلود کنید."
+            },
+            "error": {
+              "title": "خروجی ناموفق",
+              "message": "خروجی ناموفق بود. لطفاً دوباره تلاش کنید."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "title": "وب‌هوک‌ها",
+        "add_webhook": "افزودن وب‌هوک",
+        "modal": {
+          "title": "ایجاد وب‌هوک",
+          "details": "جزئیات وب‌هوک",
+          "payload": "URL محموله",
+          "question": "کدام رویدادها می‌خواهید این وب‌هوک را فعال کنند؟",
+          "error": "URL الزامی است"
+        },
+        "secret_key": {
+          "title": "کلید مخفی",
+          "message": "تولید یک توکن برای ورود به محموله وب‌هوک"
+        },
+        "options": {
+          "all": "همه چیز را برای من ارسال کن",
+          "individual": "انتخاب رویدادهای فردی"
+        },
+        "toasts": {
+          "created": {
+            "title": "وب‌هوک ایجاد شد",
+            "message": "وب‌هوک با موفقیت ایجاد شد"
+          },
+          "not_created": {
+            "title": "وب‌هوک ایجاد نشد",
+            "message": "وب‌هوک قابل ایجاد نبود"
+          },
+          "updated": {
+            "title": "وب‌هوک بروزرسانی شد",
+            "message": "وب‌هوک با موفقیت بروزرسانی شد"
+          },
+          "not_updated": {
+            "title": "وب‌هوک بروزرسانی نشد",
+            "message": "وب‌هوک قابل بروزرسانی نبود"
+          },
+          "removed": {
+            "title": "وب‌هوک حذف شد",
+            "message": "وب‌هوک با موفقیت حذف شد"
+          },
+          "not_removed": {
+            "title": "وب‌هوک حذف نشد",
+            "message": "وب‌هوک قابل حذف نبود"
+          },
+          "secret_key_copied": {
+            "message": "کلید مخفی در کلیپ‌بورد کپی شد."
+          },
+          "secret_key_not_copied": {
+            "message": "خطا در کپی کردن کلید مخفی رخ داد."
+          }
+        }
+      },
+      "api_tokens": {
+        "title": "توکن‌های API",
+        "add_token": "افزودن توکن API",
+        "create_token": "ایجاد توکن",
+        "never_expires": "هرگز منقضی نمی‌شود",
+        "generate_token": "تولید توکن",
+        "generating": "در حال تولید",
+        "delete": {
+          "title": "حذف توکن API",
+          "description": "هر برنامه‌ای که از این توکن استفاده می‌کند دیگر به داده‌های Plane دسترسی نخواهد داشت. این عملیات قابل برگشت نیست.",
+          "success": {
+            "title": "موفقیت!",
+            "message": "توکن API با موفقیت حذف شد"
+          },
+          "error": {
+            "title": "خطا!",
+            "message": "توکن API قابل حذف نبود"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "توکن API ایجاد نشده است",
+        "description": "API‌های Plane می‌توانند برای ادغام داده‌های شما در Plane با هر سیستم خارجی استفاده شوند. برای شروع یک توکن ایجاد کنید."
+      },
+      "webhooks": {
+        "title": "وب‌هوکی افزوده نشده است",
+        "description": "وب‌هوک‌ها را برای دریافت به‌روزرسانی‌های بلادرنگ و خودکارسازی اقدامات ایجاد کنید."
+      },
+      "exports": {
+        "title": "هنوز خروجی‌ای وجود ندارد",
+        "description": "هر زمان که خروجی می‌گیرید، یک کپی نیز برای مرجع اینجا خواهید داشت."
+      },
+      "imports": {
+        "title": "هنوز ورودی‌ای وجود ندارد",
+        "description": "تمام ورودی‌های قبلی خود را اینجا پیدا کنید و آنها را دانلود کنید."
+      }
+    }
+  },
+
+  "profile": {
+    "label": "پروفایل",
+    "page_label": "کار شما",
+    "work": "کار",
+    "details": {
+      "joined_on": "پیوستن در",
+      "time_zone": "منطقه زمانی"
+    },
+    "stats": {
+      "workload": "حجم کار",
+      "overview": "نمای کلی",
+      "created": "موارد کاری ایجاد شده",
+      "assigned": "موارد کاری اختصاص داده شده",
+      "subscribed": "موارد کاری مشترک شده",
+      "state_distribution": {
+        "title": "موارد کاری بر اساس وضعیت",
+        "empty": "موارد کاری را ایجاد کنید تا آنها را بر اساس وضعیت‌ها در نمودار برای تحلیل بهتر مشاهده کنید."
+      },
+      "priority_distribution": {
+        "title": "موارد کاری بر اساس اولویت",
+        "empty": "موارد کاری را ایجاد کنید تا آنها را بر اساس اولویت در نمودار برای تحلیل بهتر مشاهده کنید."
+      },
+      "recent_activity": {
+        "title": "فعالیت‌های اخیر",
+        "empty": "داده‌ای پیدا نکردیم. لطفاً ورودی‌های خود را بررسی کنید",
+        "button": "دانلود فعالیت‌های امروز",
+        "button_loading": "در حال دانلود"
+      }
+    },
+    "actions": {
+      "profile": "پروفایل",
+      "security": "امنیت",
+      "activity": "فعالیت",
+      "appearance": "ظاهر",
+      "notifications": "اعلان‌ها"
+    },
+    "tabs": {
+      "summary": "خلاصه",
+      "assigned": "اختصاص داده شده",
+      "created": "ایجاد شده",
+      "subscribed": "مشترک شده",
+      "activity": "فعالیت"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "هنوز فعالیتی وجود ندارد",
+        "description": "با ایجاد یک مورد کاری جدید شروع کنید! جزئیات و ویژگی‌ها را به آن اضافه کنید. در Plane بیشتر کاوش کنید تا فعالیت خود را ببینید."
+      },
+      "assigned": {
+        "title": "هیچ مورد کاری به شما اختصاص داده نشده است",
+        "description": "موارد کاری اختصاص داده شده به شما را می‌توان از اینجا پیگیری کرد."
+      },
+      "created": {
+        "title": "هنوز مورد کاری وجود ندارد",
+        "description": "تمام موارد کاری ایجاد شده توسط شما اینجا می‌آیند، مستقیماً آنها را اینجا پیگیری کنید."
+      },
+      "subscribed": {
+        "title": "هنوز مورد کاری وجود ندارد",
+        "description": "به موارد کاری که به آنها علاقه دارید مشترک شوید، همه آنها را اینجا پیگیری کنید."
+      }
+    }
+  },
+
+  "project_settings": {
+    "general": {
+      "enter_project_id": "شناسه پروژه را وارد کنید",
+      "please_select_a_timezone": "لطفاً یک منطقه زمانی انتخاب کنید",
+      "archive_project": {
+        "title": "بایگانی پروژه",
+        "description": "بایگانی کردن پروژه، پروژه شما را از ناوبری کناری حذف می‌کند، اگرچه همچنان می‌توانید از صفحه پروژه‌های خود به آن دسترسی داشته باشید. می‌توانید پروژه را در هر زمان که بخواهید بازیابی یا حذف کنید.",
+        "button": "بایگانی پروژه"
+      },
+      "delete_project": {
+        "title": "حذف پروژه",
+        "description": "با حذف پروژه، تمام داده‌ها و منابع موجود در آن به طور دائمی حذف شده و قابل بازیابی نخواهند بود.",
+        "button": "حذف پروژه من"
+      },
+      "toast": {
+        "success": "پروژه با موفقیت بروزرسانی شد",
+        "error": "پروژه قابل بروزرسانی نبود. لطفاً دوباره تلاش کنید."
+      }
+    },
+    "members": {
+      "label": "اعضا",
+      "project_lead": "سرپرست پروژه",
+      "default_assignee": "مسئول پیش‌فرض",
+      "guest_super_permissions": {
+        "title": "اعطای دسترسی مشاهده به تمام موارد کاری برای کاربران مهمان:",
+        "sub_heading": "این به مهمانان اجازه می‌دهد تا به تمام موارد کاری پروژه دسترسی مشاهده داشته باشند."
+      },
+      "invite_members": {
+        "title": "دعوت از اعضا",
+        "sub_heading": "از اعضا برای کار روی پروژه خود دعوت کنید.",
+        "select_co_worker": "انتخاب همکار"
+      }
+    },
+    "states": {
+      "describe_this_state_for_your_members": "این وضعیت را برای اعضای خود توضیح دهید.",
+      "empty_state": {
+        "title": "هیچ وضعیتی برای گروه {groupKey} موجود نیست",
+        "description": "لطفاً یک وضعیت جدید ایجاد کنید"
+      }
+    },
+    "labels": {
+      "label_title": "عنوان برچسب",
+      "label_title_is_required": "عنوان برچسب الزامی است",
+      "label_max_char": "نام برچسب نباید از ۲۵۵ کاراکتر تجاوز کند",
+      "toast": {
+        "error": "خطا در بروزرسانی برچسب"
+      }
+    },
+    "estimates": {
+      "title": "فعال کردن تخمین‌ها برای پروژه من",
+      "description": "آنها به شما در ارتباط پیچیدگی و حجم کار تیم کمک می‌کنند."
+    },
+    "automations": {
+      "label": "خودکارسازی‌ها",
+      "auto-archive": {
+        "title": "بایگانی خودکار موارد کاری بسته شده",
+        "description": "Plane موارد کاری که تکمیل یا لغو شده‌اند را به طور خودکار بایگانی می‌کند.",
+        "duration": "بایگانی خودکار موارد کاری که برای بسته شده‌اند"
+      },
+      "auto-close": {
+        "title": "بستن خودکار موارد کاری",
+        "description": "Plane موارد کاری که تکمیل یا لغو نشده‌اند را به طور خودکار می‌بندد.",
+        "duration": "بستن خودکار موارد کاری که برای غیرفعال هستند",
+        "auto_close_status": "وضعیت بستن خودکار"
+      }
+    },
+
+    "empty_state": {
+      "labels": {
+        "title": "هنوز برچسبی وجود ندارد",
+        "description": "برچسب‌ها را برای کمک به سازماندهی و فیلتر کردن موارد کاری در پروژه خود ایجاد کنید."
+      },
+      "estimates": {
+        "title": "هنوز سیستم تخمینی وجود ندارد",
+        "description": "یک مجموعه تخمین برای ارتباط مقدار کار در هر مورد کاری ایجاد کنید.",
+        "primary_button": "افزودن سیستم تخمین"
+      }
+    }
+  },
+
+  "project_cycles": {
+    "add_cycle": "افزودن چرخه",
+    "more_details": "جزئیات بیشتر",
+    "cycle": "چرخه",
+    "update_cycle": "بروزرسانی چرخه",
+    "create_cycle": "ایجاد چرخه",
+    "no_matching_cycles": "چرخه مطابقی وجود ندارد",
+    "remove_filters_to_see_all_cycles": "فیلترها را حذف کنید تا تمام چرخه‌ها را ببینید",
+    "remove_search_criteria_to_see_all_cycles": "معیارهای جستجو را حذف کنید تا تمام چرخه‌ها را ببینید",
+    "only_completed_cycles_can_be_archived": "فقط چرخه‌های تکمیل شده می‌توانند بایگانی شوند",
+    "active_cycle": {
+      "label": "چرخه فعال",
+      "progress": "پیشرفت",
+      "chart": "نمودار کاهش کار",
+      "priority_issue": "موارد کاری با اولویت",
+      "assignees": "مسئولان",
+      "issue_burndown": "کاهش کار مورد کاری",
+      "ideal": "ایده‌آل",
+      "current": "فعلی",
+      "labels": "برچسب‌ها"
+    },
+    "upcoming_cycle": {
+      "label": "چرخه آینده"
+    },
+    "completed_cycle": {
+      "label": "چرخه تکمیل شده"
+    },
+    "status": {
+      "days_left": "روزهای باقی مانده",
+      "completed": "تکمیل شده",
+      "yet_to_start": "هنوز شروع نشده",
+      "in_progress": "در حال انجام",
+      "draft": "پیش‌نویس"
+    },
+    "action": {
+      "restore": {
+        "title": "بازیابی چرخه",
+        "success": {
+          "title": "چرخه بازیابی شد",
+          "description": "چرخه بازیابی شد."
+        },
+        "failed": {
+          "title": "بازیابی چرخه با خطا مواجه شد",
+          "description": "چرخه قابل بازیابی نبود. لطفاً دوباره تلاش کنید."
+        }
+      },
+      "favorite": {
+        "loading": "در حال افزودن چرخه به مورد علاقه‌ها",
+        "success": {
+          "description": "چرخه به مورد علاقه‌ها افزوده شد.",
+          "title": "موفقیت!"
+        },
+        "failed": {
+          "description": "افزودن چرخه به مورد علاقه‌ها با خطا مواجه شد. لطفاً دوباره تلاش کنید.",
+          "title": "خطا!"
+        }
+      },
+      "unfavorite": {
+        "loading": "در حال حذف چرخه از مورد علاقه‌ها",
+        "success": {
+          "description": "چرخه از مورد علاقه‌ها حذف شد.",
+          "title": "موفقیت!"
+        },
+        "failed": {
+          "description": "حذف چرخه از مورد علاقه‌ها با خطا مواجه شد. لطفاً دوباره تلاش کنید.",
+          "title": "خطا!"
+        }
+      },
+      "update": {
+        "loading": "در حال بروزرسانی چرخه",
+        "success": {
+          "description": "چرخه با موفقیت بروزرسانی شد.",
+          "title": "موفقیت!"
+        },
+        "failed": {
+          "description": "خطا در بروزرسانی چرخه. لطفاً دوباره تلاش کنید.",
+          "title": "خطا!"
+        },
+        "error": {
+          "already_exists": "شما قبلاً یک چرخه در تاریخ‌های داده شده دارید، اگر می‌خواهید یک چرخه پیش‌نویس ایجاد کنید، می‌توانید با حذف هر دو تاریخ این کار را انجام دهید."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "کار خود را در چرخه‌ها گروه‌بندی کنید.",
+        "description": "کار را به صورت دوره‌ای تقسیم‌بندی کنید، از مهلت پروژه خود به عقب کار کنید تا تاریخ‌ها را تنظیم کنید و به عنوان یک تیم پیشرفت ملموس داشته باشید.",
+        "primary_button": {
+          "text": "تنظیم اولین چرخه خود",
+          "comic": {
+            "title": "چرخه‌ها دوره‌های تکرار شونده هستند.",
+            "description": "یک اسپرینت، یک تکرار و یا هر اصطلاح دیگری که برای پیگیری هفتگی یا دو هفتگی کار استفاده می‌کنید یک چرخه است."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "مورد کاری به چرخه افزوده نشده است",
+        "description": "موارد کاری که می‌خواهید در این چرخه زمان‌بندی و تحویل دهید را اضافه یا ایجاد کنید",
+        "primary_button": {
+          "text": "ایجاد مورد کاری جدید"
+        },
+        "secondary_button": {
+          "text": "افزودن مورد کاری موجود"
+        }
+      },
+      "completed_no_issues": {
+        "title": "مورد کاری در چرخه وجود ندارد",
+        "description": "مورد کاری در چرخه وجود ندارد. موارد کاری یا منتقل شده‌اند یا مخفی شده‌اند. برای مشاهده موارد کاری مخفی شده اگر وجود دارند، ویژگی‌های نمایش خود را بر اساس آن بروزرسانی کنید."
+      },
+      "active": {
+        "title": "چرخه فعالی وجود ندارد",
+        "description": "یک چرخه فعال شامل هر دوره‌ای است که تاریخ امروز در محدوده آن قرار می‌گیرد. پیشرفت و جزئیات چرخه فعال را اینجا پیدا کنید."
+      },
+      "archived": {
+        "title": "هنوز چرخه بایگانی شده‌ای وجود ندارد",
+        "description": "برای مرتب کردن پروژه خود، چرخه‌های تکمیل شده را بایگانی کنید. پس از بایگانی آنها را اینجا پیدا کنید."
+      }
+    }
+  },
+
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "یک مورد کاری ایجاد کنید و آن را به کسی، حتی خودتان اختصاص دهید",
+        "description": "موارد کاری را به عنوان شغل، وظیفه، کار یا JTBD در نظر بگیرید. که ما دوست داریم. یک مورد کاری و موارد کاری فرعی آن معمولاً اقدامات مبتنی بر زمان هستند که به اعضای تیم شما اختصاص داده می‌شوند. تیم شما موارد کاری را ایجاد می‌کند، اختصاص می‌دهد و تکمیل می‌کند تا پروژه شما را به سمت هدف خود حرکت دهد.",
+        "primary_button": {
+          "text": "ایجاد اولین مورد کاری خود",
+          "comic": {
+            "title": "موارد کاری بلوک‌های ساختمانی در Plane هستند.",
+            "description": "طراحی مجدد رابط کاربری Plane، تغییر نام شرکت، یا راه‌اندازی سیستم تزریق سوخت جدید نمونه‌هایی از موارد کاری هستند که احتمالاً موارد کاری فرعی دارند."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "هنوز مورد کاری بایگانی شده‌ای وجود ندارد",
+        "description": "به صورت دستی یا از طریق خودکارسازی، می‌توانید موارد کاری که تکمیل یا لغو شده‌اند را بایگانی کنید. پس از بایگانی آنها را اینجا پیدا کنید.",
+        "primary_button": {
+          "text": "تنظیم خودکارسازی"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "مورد کاری مطابق با فیلترهای اعمال شده یافت نشد",
+        "secondary_button": {
+          "text": "پاک کردن تمام فیلترها"
+        }
+      }
+    }
+  },
+
+  "project_module": {
+    "add_module": "افزودن ماژول",
+    "update_module": "بروزرسانی ماژول",
+    "create_module": "ایجاد ماژول",
+    "archive_module": "بایگانی ماژول",
+    "restore_module": "بازیابی ماژول",
+    "delete_module": "حذف ماژول",
+    "empty_state": {
+      "general": {
+        "title": "نقاط عطف پروژه خود را به ماژول‌ها نگاشت کنید و کار تجمیع شده را به راحتی پیگیری کنید.",
+        "description": "گروهی از موارد کاری که به یک والد منطقی و سلسله مراتبی تعلق دارند یک ماژول را تشکیل می‌دهند. آنها را به عنوان راهی برای پیگیری کار بر اساس نقاط عطف پروژه در نظر بگیرید. آنها دوره‌ها و مهلت‌های خود را دارند و همچنین تحلیل‌هایی برای کمک به شما در دیدن نزدیکی یا دوری از یک نقطه عطف.",
+        "primary_button": {
+          "text": "ساخت اولین ماژول خود",
+          "comic": {
+            "title": "Modules help group work by hierarchy.",
+            "description": "A cart module, a chassis module, and a warehouse module are all good example of this grouping."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "هیچ مورد کاری در ماژول وجود ندارد",
+        "description": "موارد کاری که می‌خواهید به عنوان بخشی از این ماژول انجام دهید را ایجاد یا اضافه کنید",
+        "primary_button": {
+          "text": "ایجاد موارد کاری جدید"
+        },
+        "secondary_button": {
+          "text": "افزودن مورد کاری موجود"
+        }
+      },
+      "archived": {
+        "title": "هنوز هیچ ماژول بایگانی شده‌ای وجود ندارد",
+        "description": "برای مرتب‌سازی پروژه خود، ماژول‌های تکمیل شده یا لغو شده را بایگانی کنید. پس از بایگانی می‌توانید آنها را اینجا پیدا کنید."
+      },
+      "sidebar": {
+        "in_active": "This module isn't active yet.",
+        "invalid_date": "Invalid date. Please enter valid date."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "بایگانی ماژول",
+      "archive_module_description": "فقط ماژول‌های تکمیل شده یا لغو شده\nمی‌توانند بایگانی شوند.",
+      "delete_module": "حذف ماژول"
+    },
+    "toast": {
+      "copy": {
+        "success": "لینک ماژول در کلیپ‌بورد کپی شد"
+      },
+      "delete": {
+        "success": "ماژول با موفقیت حذف شد",
+        "error": "حذف ماژول با خطا مواجه شد"
+      }
+    }
+  },
+
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "نمایش‌های فیلتر شده پروژه خود را ذخیره کنید. به تعداد نیاز خود ایجاد کنید",
+        "description": "نمایش‌ها مجموعه‌ای از فیلترهای ذخیره شده هستند که اغلب از آنها استفاده می‌کنید یا می‌خواهید به راحتی به آنها دسترسی داشته باشید. تمام همکاران شما در یک پروژه می‌توانند نمایش‌های همه را ببینند و هر کدام که برای نیازهای آنها مناسب‌تر است را انتخاب کنند.",
+        "primary_button": {
+          "text": "ایجاد اولین نمایش خود",
+          "comic": {
+            "title": "نمایش‌ها بر اساس ویژگی‌های مورد کاری کار می‌کنند.",
+            "description": "می‌توانید از اینجا نمایشی با هر تعداد ویژگی و فیلتر که مناسب می‌دانید ایجاد کنید."
+          }
+        }
+      },
+      "filter": {
+        "title": "هیچ نمایش مطابقی یافت نشد",
+        "description": "هیچ نمایشی با معیارهای جستجو مطابقت ندارد. \n به جای آن یک نمایش جدید ایجاد کنید."
+      }
+    }
+  },
+
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "یک یادداشت، سند یا پایگاه دانش کامل بنویسید. از گالیله، دستیار هوشمند Plane، برای شروع کمک بگیرید",
+        "description": "صفحات فضای ثبت افکار در Plane هستند. یادداشت‌های جلسات را بنویسید، به راحتی آنها را فرمت‌بندی کنید، موارد کاری را جاسازی کنید، با استفاده از کتابخانه‌ای از اجزا آنها را چیدمان کنید و همه را در زمینه پروژه خود نگه دارید. برای سرعت بخشیدن به هر سندی، گالیله، هوش مصنوعی Plane را با میانبر یا کلیک یک دکمه فراخوانی کنید.",
+        "primary_button": {
+          "text": "ایجاد اولین صفحه خود"
+        }
+      },
+      "private": {
+        "title": "هنوز هیچ صفحه خصوصی وجود ندارد",
+        "description": "افکار خصوصی خود را اینجا نگه دارید. وقتی آماده به اشتراک‌گذاری هستید، تیم فقط یک کلیک فاصله دارد.",
+        "primary_button": {
+          "text": "ایجاد اولین صفحه خود"
+        }
+      },
+      "public": {
+        "title": "هنوز هیچ صفحه عمومی وجود ندارد",
+        "description": "صفحات به اشتراک گذاشته شده با همه در پروژه شما را اینجا ببینید.",
+        "primary_button": {
+          "text": "ایجاد اولین صفحه خود"
+        }
+      },
+      "archived": {
+        "title": "هنوز هیچ صفحه بایگانی شده‌ای وجود ندارد",
+        "description": "صفحاتی که در دستور کار شما نیستند را بایگانی کنید. وقتی نیاز دارید به آنها دسترسی پیدا کنید."
+      }
+    }
+  },
+
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "نتیجه‌ای یافت نشد"
+      }
+    }
+  },
+
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "هیچ مورد کاری مطابقی یافت نشد"
+      },
+      "no_issues": {
+        "title": "هیچ مورد کاری یافت نشد"
+      }
+    }
+  },
+
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "هنوز هیچ نظری وجود ندارد",
+        "description": "نظرات می‌توانند به عنوان فضایی برای بحث و پیگیری موارد کاری استفاده شوند"
+      }
+    }
+  },
+
+  "notification": {
+    "label": "صندوق ورودی",
+    "page_label": "{workspace} - صندوق ورودی",
+    "options": {
+      "mark_all_as_read": "علامت‌گذاری همه به عنوان خوانده شده",
+      "mark_read": "علامت‌گذاری به عنوان خوانده شده",
+      "mark_unread": "علامت‌گذاری به عنوان خوانده نشده",
+      "refresh": "بروزرسانی",
+      "filters": "فیلترهای صندوق ورودی",
+      "show_unread": "نمایش خوانده نشده‌ها",
+      "show_snoozed": "نمایش به تعویق افتاده‌ها",
+      "show_archived": "نمایش بایگانی شده‌ها",
+      "mark_archive": "بایگانی",
+      "mark_unarchive": "خروج از بایگانی",
+      "mark_snooze": "به تعویق انداختن",
+      "mark_unsnooze": "لغو تعویق"
+    },
+    "toasts": {
+      "read": "اعلان به عنوان خوانده شده علامت‌گذاری شد",
+      "unread": "اعلان به عنوان خوانده نشده علامت‌گذاری شد",
+      "archived": "اعلان به عنوان بایگانی شده علامت‌گذاری شد",
+      "unarchived": "اعلان از حالت بایگانی خارج شد",
+      "snoozed": "اعلان به تعویق افتاد",
+      "unsnoozed": "تعویق اعلان لغو شد"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "برای مشاهده جزئیات انتخاب کنید."
+      },
+      "all": {
+        "title": "هیچ مورد کاری به شما اختصاص داده نشده است",
+        "description": "به‌روزرسانی‌های موارد کاری اختصاص داده شده به شما را می‌توانید\nاینجا مشاهده کنید"
+      },
+      "mentions": {
+        "title": "هیچ مورد کاری به شما اختصاص داده نشده است",
+        "description": "به‌روزرسانی‌های موارد کاری اختصاص داده شده به شما را می‌توانید\nاینجا مشاهده کنید"
+      }
+    },
+    "tabs": {
+      "all": "همه",
+      "mentions": "اشارات"
+    },
+    "filter": {
+      "assigned": "اختصاص داده شده به من",
+      "created": "ایجاد شده توسط من",
+      "subscribed": "مشترک شده توسط من"
+    },
+    "snooze": {
+      "1_day": "۱ روز",
+      "3_days": "۳ روز",
+      "5_days": "۵ روز",
+      "1_week": "۱ هفته",
+      "2_weeks": "۲ هفته",
+      "custom": "سفارشی"
+    }
+  },
+
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "برای مشاهده پیشرفت چرخه، موارد کاری را به آن اضافه کنید"
+      },
+      "chart": {
+        "title": "برای مشاهده نمودار کاهش، موارد کاری را به چرخه اضافه کنید."
+      },
+      "priority_issue": {
+        "title": "موارد کاری با اولویت بالا که در چرخه انجام می‌شوند را در یک نگاه مشاهده کنید."
+      },
+      "assignee": {
+        "title": "برای مشاهده تقسیم‌بندی کار بر اساس اختصاص‌یافته‌ها، افراد را به موارد کاری اضافه کنید."
+      },
+      "label": {
+        "title": "برای مشاهده تقسیم‌بندی کار بر اساس برچسب‌ها، برچسب‌ها را به موارد کاری اضافه کنید."
+      }
+    }
+  },
+
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "ورودی برای پروژه فعال نشده است.",
+        "description": "ورودی به شما کمک می‌کند درخواست‌های ورودی به پروژه خود را مدیریت کنید و آنها را به عنوان موارد کاری در گردش کار خود اضافه کنید. برای مدیریت درخواست‌ها، ورودی را از تنظیمات پروژه فعال کنید.",
+        "primary_button": {
+          "text": "مدیریت ویژگی‌ها"
+        }
+      },
+      "cycle": {
+        "title": "چرخه‌ها برای این پروژه فعال نشده‌اند.",
+        "description": "کار را به بخش‌های زمانی تقسیم کنید، از مهلت پروژه به عقب کار کنید تا تاریخ‌ها را تعیین کنید و به عنوان یک تیم پیشرفت ملموس داشته باشید. برای شروع استفاده از چرخه‌ها، ویژگی چرخه‌ها را برای پروژه خود فعال کنید.",
+        "primary_button": {
+          "text": "مدیریت ویژگی‌ها"
+        }
+      },
+      "module": {
+        "title": "ماژول‌ها برای پروژه فعال نشده‌اند.",
+        "description": "ماژول‌ها بلوک‌های سازنده پروژه شما هستند. برای شروع استفاده از ماژول‌ها، آنها را از تنظیمات پروژه فعال کنید.",
+        "primary_button": {
+          "text": "مدیریت ویژگی‌ها"
+        }
+      },
+      "page": {
+        "title": "صفحات برای پروژه فعال نشده‌اند.",
+        "description": "صفحات بلوک‌های سازنده پروژه شما هستند. برای شروع استفاده از صفحات، آنها را از تنظیمات پروژه فعال کنید.",
+        "primary_button": {
+          "text": "مدیریت ویژگی‌ها"
+        }
+      },
+      "view": {
+        "title": "نمایش‌ها برای پروژه فعال نشده‌اند.",
+        "description": "نمایش‌ها بلوک‌های سازنده پروژه شما هستند. برای شروع استفاده از نمایش‌ها، آنها را از تنظیمات پروژه فعال کنید.",
+        "primary_button": {
+          "text": "مدیریت ویژگی‌ها"
+        }
+      }
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "پیش‌نویس یک مورد کاری",
+    "empty_state": {
+      "title": "موارد کاری نیمه‌تمام و به زودی، نظرات اینجا نمایش داده خواهند شد.",
+      "description": "برای امتحان کردن، شروع به افزودن یک مورد کاری کنید و آن را نیمه‌کاره رها کنید یا اولین پیش‌نویس خود را در زیر ایجاد کنید. 😉",
+      "primary_button": {
+        "text": "ایجاد اولین پیش‌نویس خود"
+      }
+    },
+    "delete_modal": {
+      "title": "حذف پیش‌نویس",
+      "description": "آیا مطمئن هستید که می‌خواهید این پیش‌نویس را حذف کنید؟ این عملیات قابل بازگشت نیست."
+    },
+    "toasts": {
+      "created": {
+        "success": "پیش‌نویس ایجاد شد",
+        "error": "مورد کاری نمی‌توانست ایجاد شود. لطفاً دوباره تلاش کنید."
+      },
+      "deleted": {
+        "success": "پیش‌نویس حذف شد"
+      }
+    }
+  },
+
+  "stickies": {
+    "title": "نکات چسبان شما",
+    "placeholder": "برای تایپ اینجا کلیک کنید",
+    "all": "همه نکات چسبان",
+    "no-data": "یک ایده را یادداشت کنید، یک لحظه الهام را ثبت کنید یا یک فکر را بنویسید. برای شروع یک نکته چسبان اضافه کنید.",
+    "add": "افزودن نکته چسبان",
+    "search_placeholder": "جستجو بر اساس عنوان",
+    "delete": "حذف نکته چسبان",
+    "delete_confirmation": "آیا مطمئن هستید که می‌خواهید این نکته چسبان را حذف کنید؟",
+    "empty_state": {
+      "simple": "یک ایده را یادداشت کنید، یک لحظه الهام را ثبت کنید یا یک فکر را بنویسید. برای شروع یک نکته چسبان اضافه کنید.",
+      "general": {
+        "title": "نکات چسبان یادداشت‌ها و کارهای سریع شما هستند که در حال حرکت می‌نویسید.",
+        "description": "افکار و ایده‌های خود را با ایجاد نکات چسبانی که می‌توانید در هر زمان و از هر مکان به آنها دسترسی داشته باشید، به راحتی ثبت کنید.",
+        "primary_button": {
+          "text": "افزودن نکته چسبان"
+        }
+      },
+      "search": {
+        "title": "این با هیچ یک از نکات چسبان شما مطابقت ندارد.",
+        "description": "یک عبارت دیگر را امتحان کنید یا به ما اطلاع دهید\nاگر مطمئن هستید که جستجوی شما درست است.",
+        "primary_button": {
+          "text": "افزودن نکته چسبان"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "نام نکته چسبان نمی‌تواند بیشتر از ۱۰۰ کاراکتر باشد.",
+        "already_exists": "از قبل یک نکته چسبان بدون توضیحات وجود دارد"
+      },
+      "created": {
+        "title": "نکته چسبان ایجاد شد",
+        "message": "نکته چسبان با موفقیت ایجاد شد"
+      },
+      "not_created": {
+        "title": "نکته چسبان ایجاد نشد",
+        "message": "نکته چسبان نمی‌توانست ایجاد شود"
+      },
+      "updated": {
+        "title": "نکته چسبان به‌روزرسانی شد",
+        "message": "نکته چسبان با موفقیت به‌روزرسانی شد"
+      },
+      "not_updated": {
+        "title": "نکته چسبان به‌روزرسانی نشد",
+        "message": "نکته چسبان نمی‌توانست به‌روزرسانی شود"
+      },
+      "removed": {
+        "title": "نکته چسبان حذف شد",
+        "message": "نکته چسبان با موفقیت حذف شد"
+      },
+      "not_removed": {
+        "title": "نکته چسبان حذف نشد",
+        "message": "نکته چسبان نمی‌توانست حذف شود"
+      }
+    }
+  },
+
+  "role_details": {
+    "guest": {
+      "title": "مهمان",
+      "description": "اعضای خارجی سازمان‌ها می‌توانند به عنوان مهمان دعوت شوند."
+    },
+    "member": {
+      "title": "عضو",
+      "description": "توانایی خواندن، نوشتن، ویرایش و حذف موجودیت‌ها در پروژه‌ها، چرخه‌ها و ماژول‌ها"
+    },
+    "admin": {
+      "title": "مدیر",
+      "description": "همه مجوزها در فضای کاری روی true تنظیم شده‌اند."
+    }
+  },
+
+  "user_roles": {
+    "product_or_project_manager": "مدیر محصول / پروژه",
+    "development_or_engineering": "توسعه / مهندسی",
+    "founder_or_executive": "بنیانگذار / اجرایی",
+    "freelancer_or_consultant": "فریلنسر / مشاور",
+    "marketing_or_growth": "بازاریابی / رشد",
+    "sales_or_business_development": "فروش / توسعه کسب و کار",
+    "support_or_operations": "پشتیبانی / عملیات",
+    "student_or_professor": "دانشجو / استاد",
+    "human_resources": "منابع انسانی",
+    "other": "سایر"
+  },
+
+  "importer": {
+    "github": {
+      "title": "گیت‌هاب",
+      "description": "موارد کاری را از مخازن گیت‌هاب وارد و همگام‌سازی کنید."
+    },
+    "jira": {
+      "title": "جیرا",
+      "description": "موارد کاری و اپیک‌ها را از پروژه‌ها و اپیک‌های جیرا وارد کنید."
+    }
+  },
+
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "موارد کاری را به یک فایل CSV صادر کنید.",
+      "short_description": "صادر به صورت csv"
+    },
+    "excel": {
+      "title": "اکسل",
+      "description": "موارد کاری را به یک فایل اکسل صادر کنید.",
+      "short_description": "صادر به صورت excel"
+    },
+    "xlsx": {
+      "title": "اکسل",
+      "description": "موارد کاری را به یک فایل اکسل صادر کنید.",
+      "short_description": "صادر به صورت excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "موارد کاری را به یک فایل JSON صادر کنید.",
+      "short_description": "صادر به صورت json"
+    }
+  },
+  "default_global_view": {
+    "all_issues": "همه موارد کاری",
+    "assigned": "اختصاص داده شده",
+    "created": "ایجاد شده",
+    "subscribed": "مشترک شده"
+  },
+
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "ترجیح سیستم"
+      },
+      "light": {
+        "label": "روشن"
+      },
+      "dark": {
+        "label": "تاریک"
+      },
+      "light_contrast": {
+        "label": "کنتراست بالا روشن"
+      },
+      "dark_contrast": {
+        "label": "کنتراست بالا تاریک"
+      },
+      "custom": {
+        "label": "تم سفارشی"
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "پیش‌نویس",
+      "planned": "برنامه‌ریزی شده",
+      "in_progress": "در حال انجام",
+      "paused": "مکث شده",
+      "completed": "تکمیل شده",
+      "cancelled": "لغو شده"
+    },
+    "layout": {
+      "list": "طرح لیست",
+      "board": "طرح گالری",
+      "timeline": "طرح خط زمانی"
+    },
+    "order_by": {
+      "name": "نام",
+      "progress": "پیشرفت",
+      "issues": "تعداد موارد کاری",
+      "due_date": "تاریخ سررسید",
+      "created_at": "تاریخ ایجاد",
+      "manual": "دستی"
+    }
+  },
+
+  "cycle": {
+    "label": "{count, plural, one {چرخه} other {چرخه‌ها}}",
+    "no_cycle": "بدون چرخه"
+  },
+
+  "module": {
+    "label": "{count, plural, one {ماژول} other {ماژول‌ها}}",
+    "no_module": "بدون ماژول"
+  }
+}
\ No newline at end of file
diff --git a/packages/i18n/src/store/index.ts b/packages/i18n/src/store/index.ts
index c711e0e63a3..93ac6f25147 100644
--- a/packages/i18n/src/store/index.ts
+++ b/packages/i18n/src/store/index.ts
@@ -163,8 +163,10 @@ export class TranslationStore {
         return import("../locales/ua/translations.json");
       case "pl":
         return import("../locales/pl/translations.json");
-      case "ko":
-        return import("../locales/ko/translations.json");
+        case "ko":
+          return import("../locales/ko/translations.json");
+      case "fa":
+        return import("../locales/fa/translations.json");
       default:
         throw new Error(`Unsupported language: ${language}`);
     }
diff --git a/packages/i18n/src/types/language.ts b/packages/i18n/src/types/language.ts
index 9e345064a9e..90144948326 100644
--- a/packages/i18n/src/types/language.ts
+++ b/packages/i18n/src/types/language.ts
@@ -1,4 +1,4 @@
-export type TLanguage = "en" | "fr" | "es" | "ja" | "zh-CN" | "zh-TW" | "ru" | "it" | "cs" | "sk" | "de" | "ua" | "pl" | "ko";
+export type TLanguage = "en" | "fr" | "es" | "ja" | "zh-CN" | "zh-TW" | "ru" | "it" | "cs" | "sk" | "de" | "ua" | "pl" | "ko" | "fa";
 
 export interface ILanguageOption {
   label: string;
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index c779cb4360e..a3a3933b498 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -40,9 +40,9 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
             "translate-x-5 bg-white": value,
             "h-2 w-2": size === "sm",
             "h-3 w-3": size === "md",
-            "translate-x-3": value && size === "sm",
-            "translate-x-4": value && size === "md",
-            "translate-x-0.5 bg-custom-background-90": !value,
+            "-translate-x-3": value && size === "sm",
+            "-translate-x-4": value && size === "md",
+            "-translate-x-0.5 bg-custom-background-90": !value,
             "cursor-not-allowed bg-custom-background-90": disabled,
           }
         )}
diff --git a/web/.gitignore b/web/.gitignore
index 7d7c7a5f2d0..dc3c454e3d1 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -1,3 +1,5 @@
 
 # Sentry Config File
 .env.sentry-build-plugin
+.next
+node_modules
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
index 8875e1465f3..472c103acbe 100644
--- a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
@@ -61,7 +61,7 @@ const AnalyticsPage = observer(() => {
                           >
                             {t(tab.i18n_title)}
                             <div
-                              className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                              className={`border absolute bottom-0 left-0 right-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
                             />
                           </button>
                         )}
diff --git a/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index c79a63237ed..e54af337c6e 100644
--- a/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -108,12 +108,12 @@ export const ExtendedProjectSidebar = observer(() => {
       <div
         ref={extendedProjectSidebarRef}
         className={cn(
-          "absolute top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
+          "absolute top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-l border-custom-sidebar-border-200 shadow-md",
           {
             "translate-x-0 opacity-100 pointer-events-auto": extendedProjectSidebarCollapsed,
             "-translate-x-full opacity-0 pointer-events-none": !extendedProjectSidebarCollapsed,
-            "left-[70px]": sidebarCollapsed,
-            "left-[250px]": !sidebarCollapsed,
+            "right-[70px]": sidebarCollapsed,
+            "right-[250px]": !sidebarCollapsed,
           }
         )}
       >
@@ -134,7 +134,7 @@ export const ExtendedProjectSidebar = observer(() => {
               </Tooltip>
             )}
           </div>
-          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
+          <div className="mr-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
             <Search className="h-3.5 w-3.5 text-custom-text-400" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
diff --git a/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx b/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
index e0003eeba5a..48eb7157e2a 100644
--- a/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
@@ -104,12 +104,12 @@ export const ExtendedAppSidebar = observer(() => {
     <div
       ref={extendedSidebarRef}
       className={cn(
-        "absolute top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
+        "absolute top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-l border-custom-sidebar-border-200 p-4 shadow-md pb-6",
         {
           "translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed,
           "-translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed,
-          "left-[70px]": sidebarCollapsed,
-          "left-[250px]": !sidebarCollapsed,
+          "right-[70px]": sidebarCollapsed,
+          "right-[250px]": !sidebarCollapsed,
         }
       )}
     >
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index 49fa5d2e5a1..ba7594bb70b 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -122,7 +122,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
         customButton={
           <div className="flex flex-center text-sm text-custom-text-200">
             {t("common.layout")}
-            <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
+            <ChevronDown className="mr-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
           </div>
         }
         customButtonClassName="flex flex-center text-custom-text-200 text-sm"
@@ -144,14 +144,14 @@ export const ProfileIssuesMobileHeader = observer(() => {
           );
         })}
       </CustomMenu>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
         <FiltersDropdown
           title={t("common.filters")}
           placement="bottom-end"
           menuButton={
             <div className="flex flex-center text-sm text-custom-text-200">
               {t("common.filters")}
-              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" strokeWidth={2} />
+              <ChevronDown className="mr-2  h-4 w-4 text-custom-text-200" strokeWidth={2} />
             </div>
           }
           isFiltersApplied={isIssueFilterActive(issueFilters)}
@@ -170,14 +170,14 @@ export const ProfileIssuesMobileHeader = observer(() => {
           />
         </FiltersDropdown>
       </div>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
         <FiltersDropdown
           title={t("common.display")}
           placement="bottom-end"
           menuButton={
             <div className="flex flex-center text-sm text-custom-text-200">
               {t("common.display")}
-              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+              <ChevronDown className="mr-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
             </div>
           }
         >
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
index 381b567dfd9..f0682166661 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -68,7 +68,7 @@ const CycleDetailPage = observer(() => {
             {cycleId && !isSidebarCollapsed && (
               <div
                 className={cn(
-                  "flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+                  "flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-r border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute left-0 z-[13]"
                 )}
                 style={{
                   boxShadow:
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 508da58a212..cacb6d3cba2 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -181,7 +181,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     </span>
                     <Link
                       href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                      className="block pl-2 text-custom-text-300 md:hidden"
+                      className="block pr-2 text-custom-text-300 md:hidden"
                     >
                       ...
                     </Link>
@@ -223,7 +223,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                         </div>
                       </>
                     }
-                    className="ml-1.5 flex-shrink-0 truncate"
+                    className="mr-1.5 flex-shrink-0 truncate"
                     placement="bottom-start"
                   >
                     {currentProjectCycleIds?.map((cycleId) => <CycleDropdownOption key={cycleId} cycleId={cycleId} />)}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index 31eb5b249fd..33223216871 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -152,14 +152,14 @@ export const CycleIssuesMobileHeader = () => {
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-r border-custom-border-200 items-center text-custom-text-200 text-sm">
           <FiltersDropdown
             title={t("common.filters")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-custom-text-200 text-sm">
                 {t("common.filters")}
-                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                <ChevronDown className="text-custom-text-200  h-4 w-4 mr-2" />
               </span>
             }
             isFiltersApplied={isIssueFilterActive(issueFilters)}
@@ -180,14 +180,14 @@ export const CycleIssuesMobileHeader = () => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-r border-custom-border-200 items-center text-custom-text-200 text-sm">
           <FiltersDropdown
             title={t("common.display")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-custom-text-200 text-sm">
                 {t("common.display")}
-                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDown className="text-custom-text-200 h-4 w-4 mr-2" />
               </span>
             }
           >
@@ -208,7 +208,7 @@ export const CycleIssuesMobileHeader = () => {
 
         <span
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+          className="flex flex-grow justify-center text-custom-text-200 text-sm border-r border-custom-border-200"
         >
           {t("common.analytics")}
         </span>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
index 2200b31f123..18b414f3348 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
@@ -118,7 +118,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
           ) : null}
         </div>
 
-        <div className="ml-auto flex items-center gap-2">
+        <div className="mr-auto flex items-center gap-2">
           <LayoutSelection
             layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN]}
             onChange={(layout) => handleLayoutChange(layout)}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
index 6b86cd88d95..6da8e20744c 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -118,7 +118,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
           customButton={
             <div className="flex flex-start text-sm text-custom-text-200">
               {t("common.layout")}
-              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
+              <ChevronDown className="mr-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
             </div>
           }
           customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
@@ -137,14 +137,14 @@ export const ProjectIssuesMobileHeader = observer(() => {
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title={t("common.filters")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
                 {t("common.filters")}
-                <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
+                <ChevronDown className="mr-2  h-4 w-4 text-custom-text-200" />
               </span>
             }
             isFiltersApplied={isIssueFilterActive(issueFilters)}
@@ -165,14 +165,14 @@ export const ProjectIssuesMobileHeader = observer(() => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title={t("common.display")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
                 {t("common.display")}
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+                <ChevronDown className="mr-2 h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
@@ -192,7 +192,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+          className="flex flex-grow justify-center border-r border-custom-border-200 text-sm text-custom-text-200"
         >
           {t("common.analytics")}
         </button>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
index d35f3146549..3867abb041d 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
@@ -69,7 +69,7 @@ const ModuleIssuesPage = observer(() => {
           {moduleId && !isSidebarCollapsed && (
             <div
               className={cn(
-                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
+                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-r border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute left-0 z-[13]"
               )}
               style={{
                 boxShadow:
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 3c5eb7cc729..3bf1e4edce1 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -176,7 +176,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   </span>
                   <Link
                     href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    className="block pl-2 text-custom-text-300 md:hidden"
+                    className="block pr-2 text-custom-text-300 md:hidden"
                   >
                     ...
                   </Link>
@@ -218,7 +218,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                       </div>
                     </>
                   }
-                  className="ml-1.5 flex-shrink-0"
+                  className="mr-1.5 flex-shrink-0"
                   placement="bottom-start"
                 >
                   {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
index 1f000bae2e4..4e24c07a1d4 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -133,14 +133,14 @@ export const ModuleIssuesMobileHeader = observer(() => {
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title="Filters"
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
                 Filters
-                <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
+                <ChevronDown className="mr-2  h-4 w-4 text-custom-text-200" />
               </span>
             }
             isFiltersApplied={isIssueFilterActive(issueFilters)}
@@ -161,14 +161,14 @@ export const ModuleIssuesMobileHeader = observer(() => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
                 Display
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+                <ChevronDown className="mr-2 h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
@@ -189,7 +189,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
+          className="flex flex-grow justify-center border-r border-custom-border-200 text-sm text-custom-text-200"
         >
           Analytics
         </button>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/(with-sidebar)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/(with-sidebar)/layout.tsx
index 221ecf44288..4cd779ba5f3 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/(with-sidebar)/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/(with-sidebar)/layout.tsx
@@ -17,7 +17,7 @@ const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
     <>
       <AppHeader header={<ProjectSettingHeader />} />
       <div className="inset-y-0 flex flex-row vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto">
-        <div className="px-page-x !pr-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
+        <div className="px-page-x !pl-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
           <ProjectSettingsSidebar />
         </div>
         <div className="flex flex-col relative w-full overflow-hidden">
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index cc9a8fff6eb..66cea9f0bd7 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -172,7 +172,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                     {viewDetails?.name && truncateText(viewDetails.name, 40)}
                   </>
                 }
-                className="ml-1.5"
+                className="mr-1.5"
                 placement="bottom-start"
               >
                 {projectViewIds?.map((viewId) => {
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
index 608ed5dff17..4de9e7ee909 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
@@ -21,7 +21,7 @@ export const ViewMobileHeader = observer(() => {
   return (
     <>
       <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
-        <Row className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <Row className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
           <ViewOrderByDropdown
             sortBy={filters.sortBy}
             sortKey={filters.sortKey}
@@ -32,7 +32,7 @@ export const ViewMobileHeader = observer(() => {
             isMobile
           />
         </Row>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-r border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             icon={<ListFilter className="h-3 w-3" />}
             title="Filters"
@@ -41,7 +41,7 @@ export const ViewMobileHeader = observer(() => {
             menuButton={
               <Row className="flex items-center text-sm text-custom-text-200">
                 Filters
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+                <ChevronDown className="mr-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
               </Row>
             }
           >
diff --git a/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/layout.tsx b/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/layout.tsx
index 6dfe44ed66c..747def4d0ef 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/layout.tsx
@@ -35,7 +35,7 @@ const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) =>
           <NotAuthorizedView section="settings" />
         ) : (
           <>
-            <div className="px-page-x !pr-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
+            <div className="px-page-x !pl-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
               <WorkspaceSettingsSidebar />
             </div>
             <div className="flex flex-col relative w-full overflow-hidden">
diff --git a/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/members/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/members/page.tsx
index 8be7a9d22f5..48c1a677bd2 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/members/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/(with-sidebar)/members/page.tsx
@@ -118,7 +118,7 @@ const WorkspaceMembersSettingsPage = observer(() => {
               <CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
             )}
           </h4>
-          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
+          <div className="mr-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
             <Search className="h-3.5 w-3.5 text-custom-text-400" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
diff --git a/web/app/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
index 27a73137e47..8b2ec8f0e58 100644
--- a/web/app/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
@@ -54,7 +54,7 @@ export const AppSidebar: FC = observer(() => {
     <>
       <div
         className={cn(
-          "fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 w-[250px] md:relative md:ml-0",
+          "fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-l border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 w-[250px] md:relative md:mr-0",
           {
             "w-[70px] -ml-[250px]": sidebarCollapsed,
           }
diff --git a/web/app/accounts/forgot-password/page.tsx b/web/app/accounts/forgot-password/page.tsx
index 22a241db659..579156bad4f 100644
--- a/web/app/accounts/forgot-password/page.tsx
+++ b/web/app/accounts/forgot-password/page.tsx
@@ -153,7 +153,7 @@ const ForgotPasswordPage = observer(() => {
                         ref={ref}
                         hasError={Boolean(errors.email)}
                         placeholder={t("auth.common.email.placeholder")}
-                        className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                        className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
                         autoComplete="on"
                         disabled={resendTimerCode > 0}
                       />
diff --git a/web/app/accounts/reset-password/page.tsx b/web/app/accounts/reset-password/page.tsx
index e0230f205f5..44e7c33d7a4 100644
--- a/web/app/accounts/reset-password/page.tsx
+++ b/web/app/accounts/reset-password/page.tsx
@@ -155,7 +155,7 @@ const ResetPasswordPage = observer(() => {
                       value={resetFormData.email}
                       //hasError={Boolean(errors.email)}
                       placeholder={t("auth.common.email.placeholder")}
-                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
+                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 text-onboarding-text-400 cursor-not-allowed"
                       autoComplete="on"
                       disabled
                     />
@@ -173,7 +173,7 @@ const ResetPasswordPage = observer(() => {
                       onChange={(e) => handleFormChange("password", e.target.value)}
                       //hasError={Boolean(errors.password)}
                       placeholder={t("auth.common.password.placeholder")}
-                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
                       minLength={8}
                       onFocus={() => setIsPasswordInputFocused(true)}
                       onBlur={() => setIsPasswordInputFocused(false)}
@@ -182,12 +182,12 @@ const ResetPasswordPage = observer(() => {
                     />
                     {showPassword.password ? (
                       <EyeOff
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("password")}
                       />
                     ) : (
                       <Eye
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("password")}
                       />
                     )}
@@ -205,18 +205,18 @@ const ResetPasswordPage = observer(() => {
                       value={resetFormData.confirm_password}
                       onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                       placeholder={t("auth.common.password.confirm_password.placeholder")}
-                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
                       onFocus={() => setIsRetryPasswordInputFocused(true)}
                       onBlur={() => setIsRetryPasswordInputFocused(false)}
                     />
                     {showPassword.retypePassword ? (
                       <EyeOff
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("retypePassword")}
                       />
                     ) : (
                       <Eye
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("retypePassword")}
                       />
                     )}
diff --git a/web/app/accounts/set-password/page.tsx b/web/app/accounts/set-password/page.tsx
index 5bfa7c08f5f..1b2682a9f9d 100644
--- a/web/app/accounts/set-password/page.tsx
+++ b/web/app/accounts/set-password/page.tsx
@@ -149,7 +149,7 @@ const SetPasswordPage = observer(() => {
                       value={user?.email}
                       //hasError={Boolean(errors.email)}
                       placeholder={t("auth.common.email.placeholder")}
-                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
+                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 text-onboarding-text-400 cursor-not-allowed"
                       autoComplete="on"
                       disabled
                     />
@@ -167,7 +167,7 @@ const SetPasswordPage = observer(() => {
                       onChange={(e) => handleFormChange("password", e.target.value)}
                       //hasError={Boolean(errors.password)}
                       placeholder={t("auth.common.password.placeholder")}
-                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
                       minLength={8}
                       onFocus={() => setIsPasswordInputFocused(true)}
                       onBlur={() => setIsPasswordInputFocused(false)}
@@ -176,12 +176,12 @@ const SetPasswordPage = observer(() => {
                     />
                     {showPassword.password ? (
                       <EyeOff
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("password")}
                       />
                     ) : (
                       <Eye
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("password")}
                       />
                     )}
@@ -199,18 +199,18 @@ const SetPasswordPage = observer(() => {
                       value={passwordFormData.confirm_password}
                       onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                       placeholder={t("auth.common.password.confirm_password.placeholder")}
-                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
                       onFocus={() => setIsRetryPasswordInputFocused(true)}
                       onBlur={() => setIsRetryPasswordInputFocused(false)}
                     />
                     {showPassword.retypePassword ? (
                       <EyeOff
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("retypePassword")}
                       />
                     ) : (
                       <Eye
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                         onClick={() => handleShowPassword("retypePassword")}
                       />
                     )}
diff --git a/web/app/create-workspace/page.tsx b/web/app/create-workspace/page.tsx
index 8425320345a..9148ebae9aa 100644
--- a/web/app/create-workspace/page.tsx
+++ b/web/app/create-workspace/page.tsx
@@ -62,20 +62,20 @@ const CreateWorkspacePage = observer(() => {
     <AuthenticationWrapper>
       <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute right-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:right-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-l-[0.5px] md:right-1/3" />
           <Link
-            className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
+            className="absolute right-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:right-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:right-1/3"
             href="/"
           >
             <div className="h-[30px] w-[133px]">
               <Image src={logo} alt="Plane logo" />
             </div>
           </Link>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute left-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:left-16 sm:top-12 sm:translate-y-0 sm:py-5">
             {currentUser?.email}
           </div>
         </div>
-        <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
+        <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pl-[8.33%] md:w-9/12 lg:w-4/5">
           {isWorkspaceCreationDisabled ? (
             <div className="w-4/5 h-full flex flex-col items-center justify-center text-lg font-medium gap-1">
               <Image src={WorkspaceCreationDisabled} width={200} alt="Workspace creation disabled" className="mb-4" />
diff --git a/web/app/installations/[provider]/page.tsx b/web/app/installations/[provider]/page.tsx
index 218d7dee24c..b194f8a02aa 100644
--- a/web/app/installations/[provider]/page.tsx
+++ b/web/app/installations/[provider]/page.tsx
@@ -67,7 +67,7 @@ export default function AppPostInstallation() {
   }, [state, installation_id, provider, code]);
 
   return (
-    <div className="absolute left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
+    <div className="absolute right-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
       <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
       <LogoSpinner />
     </div>
diff --git a/web/app/invitations/page.tsx b/web/app/invitations/page.tsx
index df6befa6869..fa7baa2949d 100644
--- a/web/app/invitations/page.tsx
+++ b/web/app/invitations/page.tsx
@@ -134,22 +134,22 @@ const UserInvitationsPage = observer(() => {
     <AuthenticationWrapper>
       <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute right-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:right-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-l-[0.5px] md:right-1/3" />
           <Link
             href="/"
-            className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
+            className="absolute right-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:right-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:right-1/3 z-10"
           >
             <div className="h-[30px] w-[133px]">
               <Image src={logo} alt="Plane logo" />
             </div>
           </Link>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute left-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:left-16 sm:top-12 sm:translate-y-0 sm:py-5">
             {currentUser?.email}
           </div>
         </div>
         {invitations ? (
           invitations.length > 0 ? (
-            <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
+            <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pl-[8.33%] md:w-9/12 lg:w-4/5">
               <div className="w-full space-y-10">
                 <h5 className="text-lg">{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}</h5>
                 <h4 className="text-2xl font-semibold">{t("join_a_workspace")}</h4>
@@ -209,7 +209,7 @@ const UserInvitationsPage = observer(() => {
               </div>
             </div>
           ) : (
-            <div className="fixed left-0 top-0 grid h-full w-full place-items-center">
+            <div className="fixed right-0 top-0 grid h-full w-full place-items-center">
               <EmptyState
                 title={t("no_pending_invites")}
                 description={t("you_can_see_here_if_someone_invites_you_to_a_workspace")}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 6024753df80..e346d896b1d 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -65,6 +65,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="preload" href={`${API_BASE_URL}/api/users/me/ `} as="fetch" crossOrigin="use-credentials" />
         <link rel="preload" href={`${API_BASE_URL}/api/users/me/profile/ `} as="fetch" crossOrigin="use-credentials" />
         <link rel="preload" href={`${API_BASE_URL}/api/users/me/settings/ `} as="fetch" crossOrigin="use-credentials" />
+        
+        <link
+          href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap"
+          rel="stylesheet"
+        />
         <link
           rel="preload"
           href={`${API_BASE_URL}/api/users/me/workspaces/?v=${Date.now()}`}
diff --git a/web/app/profile/security/page.tsx b/web/app/profile/security/page.tsx
index 86098f122bf..37eae025da4 100644
--- a/web/app/profile/security/page.tsx
+++ b/web/app/profile/security/page.tsx
@@ -138,12 +138,12 @@ const SecurityPage = observer(() => {
                 />
                 {showPassword?.oldPassword ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                     onClick={() => handleShowPassword("oldPassword")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                     onClick={() => handleShowPassword("oldPassword")}
                   />
                 )}
@@ -175,12 +175,12 @@ const SecurityPage = observer(() => {
                 />
                 {showPassword?.password ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                     onClick={() => handleShowPassword("password")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                     onClick={() => handleShowPassword("password")}
                   />
                 )}
@@ -215,12 +215,12 @@ const SecurityPage = observer(() => {
                 />
                 {showPassword?.confirmPassword ? (
                   <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                     onClick={() => handleShowPassword("confirmPassword")}
                   />
                 ) : (
                   <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                     onClick={() => handleShowPassword("confirmPassword")}
                   />
                 )}
diff --git a/web/app/profile/sidebar.tsx b/web/app/profile/sidebar.tsx
index 07fd746c640..df2cbcf69db 100644
--- a/web/app/profile/sidebar.tsx
+++ b/web/app/profile/sidebar.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 // icons
 import {
-  ChevronLeft,
+  ChevronRight,
   LogOut,
   MoveLeft,
   Plus,
@@ -125,10 +125,10 @@ export const ProfileLayoutSidebar = observer(() => {
 
   return (
     <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative 
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-l border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative 
         ${sidebarCollapsed ? "-ml-[250px]" : ""}
         sm:${sidebarCollapsed ? "-ml-[250px]" : ""}
-        md:ml-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}
+        md:mr-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}
       `}
     >
       <div ref={ref} className="flex h-full w-full flex-col gap-y-4">
@@ -139,7 +139,7 @@ export const ProfileLayoutSidebar = observer(() => {
             }`}
           >
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
-              <ChevronLeft className="h-5 w-5" strokeWidth={1} />
+              <ChevronRight className="h-5 w-5" strokeWidth={1} />
             </span>
             {!sidebarCollapsed && (
               <h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>
@@ -159,7 +159,7 @@ export const ProfileLayoutSidebar = observer(() => {
                   <Tooltip
                     tooltipContent={t(link.key)}
                     position="right"
-                    className="ml-2"
+                    className="mr-2"
                     disabled={!sidebarCollapsed}
                     isMobile={isMobile}
                   >
@@ -188,7 +188,7 @@ export const ProfileLayoutSidebar = observer(() => {
             <div
               className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", {
                 "scrollbar-sm": !sidebarCollapsed,
-                "ml-2.5 px-1": sidebarCollapsed,
+                "mr-2.5 px-1": sidebarCollapsed,
               })}
             >
               {workspacesList.map((workspace) => (
@@ -213,7 +213,7 @@ export const ProfileLayoutSidebar = observer(() => {
                       {workspace?.logo_url && workspace.logo_url !== "" ? (
                         <img
                           src={getFileURL(workspace.logo_url)}
-                          className="absolute left-0 top-0 h-full w-full rounded object-cover"
+                          className="absolute right-0 top-0 h-full w-full rounded object-cover"
                           alt="Workspace Logo"
                         />
                       ) : (
@@ -234,7 +234,7 @@ export const ProfileLayoutSidebar = observer(() => {
                 <Tooltip
                   tooltipContent={t(link.key)}
                   position="right"
-                  className="ml-2"
+                  className="mr-2"
                   disabled={!sidebarCollapsed}
                   isMobile={isMobile}
                 >
@@ -275,7 +275,7 @@ export const ProfileLayoutSidebar = observer(() => {
             </button>
             <button
               type="button"
-              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+              className={`mr-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
                 sidebarCollapsed ? "w-full" : ""
               }`}
               onClick={() => toggleSidebar()}
diff --git a/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx b/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
index e8a13f0361b..927c7d94af8 100644
--- a/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
@@ -91,7 +91,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
               {t("upgrade")}
             </a>
           </div>
-          <span className="absolute left-0 top-0">
+          <span className="absolute right-0 top-0">
             <Image
               src={`/workspace-active-cycles/cta-l-1-${isDarkMode ? "dark" : "light"}.webp`}
               height={125}
@@ -102,7 +102,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
           </span>
         </div>
         <div className="relative hidden w-1/2 lg:block">
-          <span className="absolute bottom-0 right-0">
+          <span className="absolute bottom-0 left-0">
             <Image
               src={`/workspace-active-cycles/cta-r-1-${isDarkMode ? "dark" : "light"}.webp`}
               height={420}
@@ -110,7 +110,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
               alt="r-1"
             />
           </span>
-          <span className="absolute -bottom-16 right-1/2 rounded-xl">
+          <span className="absolute -bottom-16 left-1/2 rounded-xl">
             <Image
               src={`/workspace-active-cycles/cta-r-2-${isDarkMode ? "dark" : "light"}.webp`}
               height={210}
diff --git a/web/ce/components/pages/editor/ai/ask-pi-menu.tsx b/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
index bd49942ef34..32143f85075 100644
--- a/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
+++ b/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
@@ -45,7 +45,7 @@ export const AskPiMenu: React.FC<Props> = (props) => {
               id="editor-ai-response"
               initialValue={response}
               containerClassName="!p-0 border-none"
-              editorClassName="!pl-0"
+              editorClassName="!pr-0"
               workspaceId={workspaceId}
               workspaceSlug={workspaceSlug}
             />
diff --git a/web/ce/components/pages/editor/ai/menu.tsx b/web/ce/components/pages/editor/ai/menu.tsx
index cef586a7712..f7ba203071a 100644
--- a/web/ce/components/pages/editor/ai/menu.tsx
+++ b/web/ce/components/pages/editor/ai/menu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { RefObject, useEffect, useRef, useState } from "react";
-import { ChevronRight, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
+import { ChevronLeft, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
 // plane editor
 import { EditorRefApi } from "@plane/editor";
 // plane ui
@@ -173,7 +173,7 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
                   <item.icon className="flex-shrink-0 size-3" />
                   {item.label}
                 </span>
-                <ChevronRight
+                <ChevronLeft
                   className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
                     "opacity-100 pointer-events-auto": isActiveTask,
                   })}
@@ -215,7 +215,7 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
                       id="editor-ai-response"
                       initialValue={response}
                       containerClassName="!p-0 border-none"
-                      editorClassName="!pl-0"
+                      editorClassName="!pr-0"
                       workspaceId={workspaceId}
                       workspaceSlug={workspaceSlug}
                     />
@@ -262,7 +262,7 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
                   </p>
                 )}
               </div>
-              <div className="sticky bottom-0 w-full bg-custom-background-100 pl-[54.8px] py-2 flex items-center gap-2">
+              <div className="sticky bottom-0 w-full bg-custom-background-100 pr-[54.8px] py-2 flex items-center gap-2">
                 {TONES_LIST.map((tone) => (
                   <button
                     key={tone.key}
diff --git a/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx b/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
index b4f68028d84..fb3e3594acc 100644
--- a/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
+++ b/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
@@ -14,7 +14,7 @@ export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
       }
     )}
   >
-    <div className="flex items-center justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 w-full max-md:max-w-full max-md:flex-wrap rounded-md">
+    <div className="flex items-center justify-between gap-5 mt-2.5 pr-4 pl-5 py-3 w-full max-md:max-w-full max-md:flex-wrap rounded-md">
       <div className="flex items-center gap-4">
         <ProIcon className="flex-shrink-0 size-4" />
         <p className="text-custom-text !text-base">
diff --git a/web/ce/components/projects/mobile-header.tsx b/web/ce/components/projects/mobile-header.tsx
index 9e51c679991..17f7845d90c 100644
--- a/web/ce/components/projects/mobile-header.tsx
+++ b/web/ce/components/projects/mobile-header.tsx
@@ -64,7 +64,7 @@ export const ProjectsListMobileHeader = observer(() => {
         }}
         isMobile
       />
-      <div className="border-l border-custom-border-200 flex justify-around w-full">
+      <div className="border-r border-custom-border-200 flex justify-around w-full">
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
           title={t("common.filters")}
diff --git a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
index 5bb2fe885f5..ee2db88ef02 100644
--- a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -169,7 +169,7 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
             <button
               type="button"
               className={cn(
-                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                "flex items-center justify-center absolute top-1/2 -right-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
                 {
                   // "cursor-not-allowed opacity-60": project.sort_order === null,
                   "cursor-grabbing": isDragging,
diff --git a/web/ce/components/workspace/sidebar/sidebar-item.tsx b/web/ce/components/workspace/sidebar/sidebar-item.tsx
index 51a5735de35..1fdd5ae078f 100644
--- a/web/ce/components/workspace/sidebar/sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -64,7 +64,7 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
     <Tooltip
       tooltipContent={t(item.labelTranslationKey)}
       position="right"
-      className="ml-2"
+      className="mr-2"
       disabled={!sidebarCollapsed}
       isMobile={isMobile}
     >
diff --git a/web/ce/components/workspace/upgrade/one-plan-upgrade.tsx b/web/ce/components/workspace/upgrade/one-plan-upgrade.tsx
index 6476d207693..3624084bb85 100644
--- a/web/ce/components/workspace/upgrade/one-plan-upgrade.tsx
+++ b/web/ce/components/workspace/upgrade/one-plan-upgrade.tsx
@@ -42,7 +42,7 @@ export const OnePlanUpgrade: FC<OnePlanUpgradeProps> = (props) => {
               })}
             >
               <p className="w-full text-sm font-medium leading-5 flex items-center">
-                <CheckCircle className="h-4 w-4 mr-4 text-custom-text-300 flex-shrink-0" />
+                <CheckCircle className="h-4 w-4 ml-4 text-custom-text-300 flex-shrink-0" />
                 <span className="text-custom-text-200 truncate">{feature}</span>
               </p>
             </li>
diff --git a/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx b/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx
index 88201af63c0..e79c5c2c48b 100644
--- a/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx
+++ b/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx
@@ -49,7 +49,7 @@ export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = (props) => {
           <div className="col-span-12 md:col-span-4">
             <div className="text-3xl font-bold leading-8 flex">Upgrade to a paid plan and unlock missing features.</div>
             <div className="mt-4 mb-12">
-              <p className="text-sm mb-4 pr-8 text-custom-text-100">
+              <p className="text-sm mb-4 pl-8 text-custom-text-100">
                 Active Cycles, time tracking, bulk ops, and other features are waiting for you on one of our paid plans.
                 Upgrade today to unlock features your teams need yesterday.
               </p>
@@ -70,7 +70,7 @@ export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = (props) => {
                   {FREE_PLAN_UPGRADE_FEATURES.map((feature) => (
                     <li key={feature} className={cn("col-span-12 relative rounded-md p-2 flex")}>
                       <p className="w-full text-sm font-medium leading-5 flex items-center">
-                        <CircleX className="h-4 w-4 mr-4 text-red-500 flex-shrink-0" />
+                        <CircleX className="h-4 w-4 ml-4 text-red-500 flex-shrink-0" />
                         <span className="text-custom-text-200 truncate">{feature}</span>
                       </p>
                     </li>
diff --git a/web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx b/web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx
index 814c43095d6..7753d10373c 100644
--- a/web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx
+++ b/web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx
@@ -70,7 +70,7 @@ export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
                   {price.recurring === "month" && ("Monthly" as string)}
                   {price.recurring === "year" && ("Yearly" as string)}
                   {price.recurring === "year" && (
-                    <span className="bg-gradient-to-r from-[#C78401] to-[#896828] text-white rounded-full px-2 py-1 ml-1 text-xs">
+                    <span className="bg-gradient-to-r from-[#C78401] to-[#896828] text-white rounded-full px-2 py-1 mr-1 text-xs">
                       -{yearlyDiscount}%
                     </span>
                   )}
@@ -110,7 +110,7 @@ export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
                       })}
                     >
                       <p className="w-full text-sm font-medium leading-5 flex items-center line-clamp-1">
-                        <CheckCircle className="h-4 w-4 mr-4 text-custom-text-300 flex-shrink-0" />
+                        <CheckCircle className="h-4 w-4 ml-4 text-custom-text-300 flex-shrink-0" />
                         <span className="text-custom-text-200 truncate">{feature}</span>
                       </p>
                     </li>
diff --git a/web/convert-margin-padding.js b/web/convert-margin-padding.js
new file mode 100644
index 00000000000..0f049a6891e
--- /dev/null
+++ b/web/convert-margin-padding.js
@@ -0,0 +1,47 @@
+const fs = require('fs');
+const path = require('path');
+
+// Function to convert margin/padding classes
+function convertClasses(content) {
+  return content
+    // Convert margin classes\
+    .replace(/ChevronLeft/g, 'ChevronRigh2t')
+    .replace(/ChevronRight/g, 'ChevronLeft')
+    .replace(/ChevronRigh2t/g, 'ChevronRight')
+}
+
+// Function to process a file
+function processFile(filePath) {
+  try {
+    let content = fs.readFileSync(filePath, 'utf8');
+    const originalContent = content;
+    
+    content = convertClasses(content);
+    
+    if (content !== originalContent) {
+      fs.writeFileSync(filePath, content);
+      console.log(`Converted classes in: ${filePath}`);
+    }
+  } catch (error) {
+    console.error(`Error processing ${filePath}:`, error);
+  }
+}
+
+// Function to walk through directory
+function walkDir(dir) {
+  const files = fs.readdirSync(dir);
+  
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      walkDir(filePath);
+    } else if (file.endsWith('.tsx') || file.endsWith('.jsx')) {
+      processFile(filePath);
+    }
+  });
+}
+
+// Start processing from the current directory
+walkDir('.'); 
\ No newline at end of file
diff --git a/web/core/components/account/auth-forms/auth-banner.tsx b/web/core/components/account/auth-forms/auth-banner.tsx
index 191d7a0a772..1293b991aff 100644
--- a/web/core/components/account/auth-forms/auth-banner.tsx
+++ b/web/core/components/account/auth-forms/auth-banner.tsx
@@ -19,7 +19,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
       </div>
       <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        className="relative mr-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
         <X className="w-4 h-4 flex-shrink-0" />
diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index 724f524421e..bb5ec1b3b24 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -53,7 +53,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         <div
           className={cn(
             `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            !isFocused && Boolean(emailError?.email) ? `border-led-500` : `border-onboarding-border-100`
           )}
           tabIndex={-1}
           onFocus={() => {
diff --git a/web/core/components/account/auth-forms/forgot-password-popover.tsx b/web/core/components/account/auth-forms/forgot-password-popover.tsx
index 4062d9a68c4..1b07901edbd 100644
--- a/web/core/components/account/auth-forms/forgot-password-popover.tsx
+++ b/web/core/components/account/auth-forms/forgot-password-popover.tsx
@@ -11,7 +11,7 @@ export const ForgotPasswordPopover = () => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   // popper-js init
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "right-start",
+    placement: "left-start",
     modifiers: [
       {
         name: "preventOverflow",
@@ -38,7 +38,7 @@ export const ForgotPasswordPopover = () => {
       <Popover.Panel className="fixed z-10">
         {({ close }) => (
           <div
-            className="border border-onboarding-border-300 bg-onboarding-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
+            className="border border-onboarding-border-300 bg-onboarding-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left mr-3"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/web/core/components/account/auth-forms/password.tsx b/web/core/components/account/auth-forms/password.tsx
index 979899679a3..b91ed839555 100644
--- a/web/core/components/account/auth-forms/password.tsx
+++ b/web/core/components/account/auth-forms/password.tsx
@@ -128,13 +128,13 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
   return (
     <>
       {isBannerMessage && mode === EAuthModes.SIGN_UP && (
-        <div className="relative flex items-center p-2 rounded-md gap-2 border border-red-500/50 bg-red-500/10">
+        <div className="relative flex items-center p-2 rounded-md gap-2 border border-led-500/50 bg-red-500/10">
           <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
             <Info size={16} className="text-red-500" />
           </div>
           <div className="w-full text-sm font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
           <div
-            className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
+            className="relative mr-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
             onClick={() => setBannerMessage(false)}
           >
             <X className="w-4 h-4 flex-shrink-0 text-red-500" />
@@ -185,7 +185,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             />
             {passwordFormData.email.length > 0 && (
               <XCircle
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                 onClick={handleEmailClear}
               />
             )}
@@ -203,7 +203,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
               value={passwordFormData.password}
               onChange={(e) => handleFormChange("password", e.target.value)}
               placeholder={t("auth.common.password.placeholder")}
-              className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
               autoComplete="on"
@@ -211,12 +211,12 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             />
             {showPassword?.password ? (
               <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             ) : (
               <Eye
-                className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                 onClick={() => handleShowPassword("password")}
               />
             )}
@@ -236,18 +236,18 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
                 value={passwordFormData.confirm_password}
                 onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                 placeholder={t("auth.common.password.confirm_password.placeholder")}
-                className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
               />
               {showPassword?.retypePassword ? (
                 <EyeOff
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                   onClick={() => handleShowPassword("retypePassword")}
                 />
               ) : (
                 <Eye
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
                   onClick={() => handleShowPassword("retypePassword")}
                 />
               )}
diff --git a/web/core/components/account/auth-forms/unique-code.tsx b/web/core/components/account/auth-forms/unique-code.tsx
index b301f268b12..b7fea387a03 100644
--- a/web/core/components/account/auth-forms/unique-code.tsx
+++ b/web/core/components/account/auth-forms/unique-code.tsx
@@ -115,7 +115,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
           />
           {uniqueCodeFormData.email.length > 0 && (
             <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+              className="absolute left-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
               onClick={handleEmailClear}
             />
           )}
@@ -131,7 +131,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder={t("auth.common.unique_code.placeholder")}
-          className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+          className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pl-12 placeholder:text-onboarding-text-400"
           autoFocus
         />
         <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
diff --git a/web/core/components/account/deactivate-account-modal.tsx b/web/core/components/account/deactivate-account-modal.tsx
index 1132a8d74cb..7f8f189c664 100644
--- a/web/core/components/account/deactivate-account-modal.tsx
+++ b/web/core/components/account/deactivate-account-modal.tsx
@@ -94,7 +94,7 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                         <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
                           {t("deactivate_your_account")}
                         </Dialog.Title>
-                        <p className="mt-6 list-disc pr-4 text-base font-normal text-custom-text-200">
+                        <p className="mt-6 list-disc pl-4 text-base font-normal text-custom-text-200">
                           {t("deactivate_your_account_description")}
                         </p>
                       </div>
diff --git a/web/core/components/analytics/custom-analytics/custom-analytics.tsx b/web/core/components/analytics/custom-analytics/custom-analytics.tsx
index bb801616fcb..c6dcb6f5191 100644
--- a/web/core/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/core/components/analytics/custom-analytics/custom-analytics.tsx
@@ -80,9 +80,9 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
 
       <div
         className={cn(
-          "border-l border-custom-border-200 transition-all",
+          "border-r border-custom-border-200 transition-all",
           !isProjectLevel
-            ? "absolute bottom-0 right-0 top-0 h-full max-w-[250px] flex-shrink-0 sm:max-w-full md:relative"
+            ? "absolute bottom-0 left-0 top-0 h-full max-w-[250px] flex-shrink-0 sm:max-w-full md:relative"
             : ""
         )}
         style={workspaceAnalyticsSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
diff --git a/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx
index c07867378ad..6fc8e8590c8 100644
--- a/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx
+++ b/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -44,7 +44,7 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
                 </div>
                 <h5 className="flex items-center gap-1">
                   <p className="break-words">{truncateText(project.name, 20)}</p>
-                  <span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
+                  <span className="mr-1 text-xs text-custom-text-200">({project.identifier})</span>
                 </h5>
               </div>
               <div className="mt-4 w-full space-y-3 px-2">
diff --git a/web/core/components/analytics/custom-analytics/table.tsx b/web/core/components/analytics/custom-analytics/table.tsx
index fd580d7277d..f315b94f992 100644
--- a/web/core/components/analytics/custom-analytics/table.tsx
+++ b/web/core/components/analytics/custom-analytics/table.tsx
@@ -52,7 +52,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
               </th>
             ))
           ) : (
-            <th scope="col" className="px-page-x py-3 text-left font-medium sm:pr-0">
+            <th scope="col" className="px-page-x py-3 text-left font-medium sm:pl-0">
               {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
             </th>
           )}
@@ -91,12 +91,12 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
             </td>
             {params.segment ? (
               barGraphData.xAxisKeys.map((key, index) => (
-                <td key={`segment-value-${index}`} className="whitespace-nowrap px-page-x py-2 sm:pr-0">
+                <td key={`segment-value-${index}`} className="whitespace-nowrap px-page-x py-2 sm:pl-0">
                   {item[key] ?? 0}
                 </td>
               ))
             ) : (
-              <td className="whitespace-nowrap px-page-x py-2 sm:pr-0">{item[yAxisKey]}</td>
+              <td className="whitespace-nowrap px-page-x py-2 sm:pl-0">{item[yAxisKey]}</td>
             )}
           </tr>
         ))}
diff --git a/web/core/components/analytics/project-modal/main-content.tsx b/web/core/components/analytics/project-modal/main-content.tsx
index cd3813f80cf..cd684304ff4 100644
--- a/web/core/components/analytics/project-modal/main-content.tsx
+++ b/web/core/components/analytics/project-modal/main-content.tsx
@@ -31,7 +31,7 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
               >
                 {t(tab.i18n_title)}
                 <div
-                  className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                  className={`border absolute bottom-0 left-0 right-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
                 />
               </button>
             )}
diff --git a/web/core/components/analytics/project-modal/modal.tsx b/web/core/components/analytics/project-modal/modal.tsx
index fb45d6aa9dd..5a62327a53e 100644
--- a/web/core/components/analytics/project-modal/modal.tsx
+++ b/web/core/components/analytics/project-modal/modal.tsx
@@ -39,13 +39,13 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
           <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
             <Dialog.Panel>
               <div
-                className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
+                className={`fixed left-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
                   fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
                 }`}
               >
                 <div
                   className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
-                    fullScreen ? "rounded-lg border" : "border-l"
+                    fullScreen ? "rounded-lg border" : "border-r"
                   }`}
                 >
                   <ProjectAnalyticsModalHeader
diff --git a/web/core/components/analytics/scope-and-demand/demand.tsx b/web/core/components/analytics/scope-and-demand/demand.tsx
index fefdc8fc6ee..81a6fa76ca4 100644
--- a/web/core/components/analytics/scope-and-demand/demand.tsx
+++ b/web/core/components/analytics/scope-and-demand/demand.tsx
@@ -34,7 +34,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => {
                     }}
                   />
                   <h6 className="capitalize">{group.state_group}</h6>
-                  <span className="ml-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
+                  <span className="mr-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
                     {group.state_count}
                   </span>
                 </div>
@@ -42,7 +42,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => {
               </div>
               <div className="bar relative h-1 w-full rounded bg-custom-background-80">
                 <div
-                  className="absolute left-0 top-0 h-1 rounded duration-300"
+                  className="absolute right-0 top-0 h-1 rounded duration-300"
                   style={{
                     width: `${percentage}%`,
                     backgroundColor: STATE_GROUPS[group.state_group as TStateGroups].color,
diff --git a/web/core/components/analytics/scope-and-demand/leaderboard.tsx b/web/core/components/analytics/scope-and-demand/leaderboard.tsx
index 76f96be4a27..ca6d2c757e9 100644
--- a/web/core/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/core/components/analytics/scope-and-demand/leaderboard.tsx
@@ -42,7 +42,7 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
                   <div className="relative h-4 w-4 flex-shrink-0 rounded-full">
                     <img
                       src={getFileURL(user.avatar_url)}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      className="absolute right-0 top-0 h-full w-full rounded-full object-cover"
                       alt={user?.display_name ?? "None"}
                     />
                   </div>
diff --git a/web/core/components/api-token/modal/generated-token-details.tsx b/web/core/components/api-token/modal/generated-token-details.tsx
index da833cefb3e..97bbb3484a8 100644
--- a/web/core/components/api-token/modal/generated-token-details.tsx
+++ b/web/core/components/api-token/modal/generated-token-details.tsx
@@ -42,7 +42,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
         onClick={() => copyApiToken(tokenDetails.token ?? "")}
         className="mt-4 flex truncate w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
       >
-        <span className="truncate pr-2">{tokenDetails.token}</span>
+        <span className="truncate pl-2">{tokenDetails.token}</span>
         <Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
           <Copy className="h-4 w-4 text-custom-text-400 flex-shrink-0" />
         </Tooltip>
diff --git a/web/core/components/api-token/token-list-item.tsx b/web/core/components/api-token/token-list-item.tsx
index 958fc81d09b..435c715169b 100644
--- a/web/core/components/api-token/token-list-item.tsx
+++ b/web/core/components/api-token/token-list-item.tsx
@@ -30,7 +30,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
         <Tooltip tooltipContent="Delete token" isMobile={isMobile}>
           <button
             onClick={() => setDeleteModalOpen(true)}
-            className="absolute right-4 hidden place-items-center group-hover:grid"
+            className="absolute left-4 hidden place-items-center group-hover:grid"
           >
             <XCircle className="h-4 w-4 text-red-500" />
           </button>
@@ -40,7 +40,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
           <span
             className={`${
               token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
-            } ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
+            } mr-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}
           </span>
diff --git a/web/core/components/automation/select-month-modal.tsx b/web/core/components/automation/select-month-modal.tsx
index b35b9885ee4..46b10efc6b0 100644
--- a/web/core/components/automation/select-month-modal.tsx
+++ b/web/core/components/automation/select-month-modal.tsx
@@ -102,7 +102,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     min={1}
                                     max={12}
                                   />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                  <span className="absolute left-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>
                               )}
                             />
@@ -136,7 +136,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     min={1}
                                     max={12}
                                   />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                  <span className="absolute left-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>
                               )}
                             />
diff --git a/web/core/components/common/filters/created-by.tsx b/web/core/components/common/filters/created-by.tsx
index 6bc75047bd0..6456e50a03f 100644
--- a/web/core/components/common/filters/created-by.tsx
+++ b/web/core/components/common/filters/created-by.tsx
@@ -86,7 +86,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/common/latest-feature-block.tsx b/web/core/components/common/latest-feature-block.tsx
index 35aacddcfea..dfc7fd60c7e 100644
--- a/web/core/components/common/latest-feature-block.tsx
+++ b/web/core/components/common/latest-feature-block.tsx
@@ -12,7 +12,7 @@ export const LatestFeatureBlock = () => {
   return (
     <>
       <div className="mx-auto mt-16 flex rounded-[3.5px] border border-onboarding-border-200 bg-onboarding-background-100 py-2 sm:w-96">
-        <Lightbulb className="mx-3 mr-2 h-7 w-7" />
+        <Lightbulb className="mx-3 ml-2 h-7 w-7" />
         <p className="text-left text-sm text-onboarding-text-100">
           Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
           <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
@@ -29,7 +29,7 @@ export const LatestFeatureBlock = () => {
           <Image
             src={latestFeatures}
             alt="Plane Work items"
-            className={`-mt-2 ml-10 h-full rounded-md ${
+            className={`-mt-2 mr-10 h-full rounded-md ${
               resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
             }`}
           />
diff --git a/web/core/components/common/logo-spinner.tsx b/web/core/components/common/logo-spinner.tsx
index abcebfe76ca..4a49bdd0882 100644
--- a/web/core/components/common/logo-spinner.tsx
+++ b/web/core/components/common/logo-spinner.tsx
@@ -11,7 +11,7 @@ export const LogoSpinner = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="size-16 sm:size-20 mr-2" />
+      <Image src={logoSrc} alt="logo" className="size-16 sm:size-20 ml-2" />
     </div>
   );
 };
diff --git a/web/core/components/common/new-empty-state.tsx b/web/core/components/common/new-empty-state.tsx
index e04cb3ed05f..80eb3324569 100644
--- a/web/core/components/common/new-empty-state.tsx
+++ b/web/core/components/common/new-empty-state.tsx
@@ -65,12 +65,12 @@ export const NewEmptyState: React.FC<Props> = ({
                   onMouseEnter={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
                   className={`absolute bg-blue-300 ${
-                    comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
+                    comicBox?.direction === "left" ? "right-0 mr-2" : "left-0 ml-2"
                   } z-10 h-2.5 w-2.5 animate-ping rounded-full`}
                 />
                 <div
                   className={`absolute bg-blue-400/40 ${
-                    comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
+                    comicBox?.direction === "left" ? "right-0 mr-2.5" : "left-0 ml-2.5"
                   } h-1.5 w-1.5 rounded-full`}
                 />
               </Button>
@@ -79,12 +79,12 @@ export const NewEmptyState: React.FC<Props> = ({
               isHovered &&
               (comicBox.direction === "right" ? (
                 <div
-                  className={`absolute left-1/2 top-0 flex max-w-sm ${
-                    comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
+                  className={`absolute right-1/2 top-0 flex max-w-sm ${
+                    comicBox?.extraPadding ? "mr-[125px]" : "mr-[90px]"
                   } pb-5`}
                 >
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
-                    <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                    <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                   </div>
                   <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
                     <h1 className="p-5">
@@ -94,9 +94,9 @@ export const NewEmptyState: React.FC<Props> = ({
                   </div>
                 </div>
               ) : (
-                <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
-                    <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
+                <div className="absolute left-1/2 top-0 ml-[90px] flex max-w-sm flex-row-reverse pb-5">
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                    <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                   </div>
                   <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
                     <h1 className="p-5">
diff --git a/web/core/components/core/content-overflow-HOC.tsx b/web/core/components/core/content-overflow-HOC.tsx
index f8089c34bc0..c2c43780f54 100644
--- a/web/core/components/core/content-overflow-HOC.tsx
+++ b/web/core/components/core/content-overflow-HOC.tsx
@@ -125,7 +125,7 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
       {containerHeight > maxHeight && (
         <div
           className={cn(
-            "bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
+            "bottom-0 right-0 w-full transition-all duration-300 ease-in-out",
             `bg-gradient-to-t from-custom-background-100 to-transparent flex flex-col items-center justify-end`,
             "text-center",
             {
diff --git a/web/core/components/core/filters/date-filter-modal.tsx b/web/core/components/core/filters/date-filter-modal.tsx
index a1c76da4b4c..81e9744fd5f 100644
--- a/web/core/components/core/filters/date-filter-modal.tsx
+++ b/web/core/components/core/filters/date-filter-modal.tsx
@@ -141,7 +141,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                     <h6 className="flex items-center gap-1 text-xs">
                       <span className="text-custom-text-200">After:</span>
                       <span>{renderFormattedDate(watch("date1"))}</span>
-                      <span className="ml-1 text-custom-text-200">Before:</span>
+                      <span className="mr-1 text-custom-text-200">Before:</span>
                       {!isInvalid && <span>{renderFormattedDate(watch("date2"))}</span>}
                     </h6>
                   )}
diff --git a/web/core/components/core/image-picker-popover.tsx b/web/core/components/core/image-picker-popover.tsx
index b3bf735887b..f77bb526aa8 100644
--- a/web/core/components/core/image-picker-popover.tsx
+++ b/web/core/components/core/image-picker-popover.tsx
@@ -160,7 +160,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
       {isOpen && (
         <Popover.Panel
-          className="absolute right-0 z-20 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm"
+          className="absolute left-0 z-20 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm"
           static
         >
           <div
@@ -232,7 +232,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                               <img
                                 src={image.urls.small}
                                 alt={image.alt_description}
-                                className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover"
+                                className="absolute right-0 top-0 h-full w-full cursor-pointer rounded object-cover"
                               />
                             </div>
                           ))}
@@ -271,7 +271,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                               <img
                                 src={image}
                                 alt={`Default project cover image- ${index}`}
-                                className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover"
+                                className="absolute right-0 top-0 h-full w-full cursor-pointer rounded object-cover"
                               />
                             </div>
                           ))}
@@ -306,7 +306,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                       >
                         <button
                           type="button"
-                          className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                          className="absolute left-0 top-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
                         >
                           Edit
                         </button>
diff --git a/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/web/core/components/core/modals/bulk-delete-issues-modal.tsx
index 642a59bbc72..892afeadef5 100644
--- a/web/core/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -170,12 +170,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
                   >
                     <div className="relative m-1">
                       <Search
-                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                        className="pointer-events-none absolute right-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
                         aria-hidden="true"
                       />
                       <input
                         type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
+                        className="h-12 w-full border-0 bg-transparent pr-11 pl-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(event) => setQuery(event.target.value)}
                       />
diff --git a/web/core/components/core/modals/existing-issues-list-modal.tsx b/web/core/components/core/modals/existing-issues-list-modal.tsx
index f0af7ef47c9..97af73fdff8 100644
--- a/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -159,11 +159,11 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                 >
                   <div className="relative m-1">
                     <Search
-                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                      className="pointer-events-none absolute right-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                      className="h-12 w-full border-0 bg-transparent pr-11 pl-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
                       placeholder={t("common.search.placeholder")}
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
@@ -177,7 +177,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 py-1 pl-2 text-xs text-custom-text-100"
+                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 py-1 pr-2 text-xs text-custom-text-100"
                           >
                             <IssueIdentifier
                               projectId={issue.project_id}
diff --git a/web/core/components/core/modals/user-image-upload-modal.tsx b/web/core/components/core/modals/user-image-upload-modal.tsx
index 286f3641510..20cf285abe0 100644
--- a/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -137,14 +137,14 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                           <>
                             <button
                               type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                              className="absolute left-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
                             >
                               Edit
                             </button>
                             <img
                               src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
                               alt="image"
-                              className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+                              className="absolute right-0 top-0 h-full w-full rounded-md object-cover"
                             />
                           </>
                         ) : (
diff --git a/web/core/components/core/modals/workspace-image-upload-modal.tsx b/web/core/components/core/modals/workspace-image-upload-modal.tsx
index df0248c843f..7c62fff3dec 100644
--- a/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -145,14 +145,14 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                           <>
                             <button
                               type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                              className="absolute left-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
                             >
                               Edit
                             </button>
                             <img
                               src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
                               alt="image"
-                              className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+                              className="absolute right-0 top-0 h-full w-full rounded-md object-cover"
                             />
                           </>
                         ) : (
diff --git a/web/core/components/core/theme/color-picker-input.tsx b/web/core/components/core/theme/color-picker-input.tsx
index dbaa13aacba..610777d1d86 100644
--- a/web/core/components/core/theme/color-picker-input.tsx
+++ b/web/core/components/core/theme/color-picker-input.tsx
@@ -81,7 +81,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
           />
         )}
       />
-      <div className="absolute right-4 top-2.5">
+      <div className="absolute left-4 top-2.5">
         <Popover className="relative grid place-items-center">
           {({ open }) => (
             <>
@@ -114,7 +114,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
               >
                 <Popover.Panel
                   className={`absolute bottom-8 z-20 mt-1 max-w-xs px-2 sm:px-0 ${
-                    position === "right" ? "left-0" : "right-0"
+                    position === "right" ? "right-0" : "left-0"
                   }`}
                 >
                   <SketchPicker color={watch(name)} onChange={handleColorChange} />
diff --git a/web/core/components/core/theme/theme-switch.tsx b/web/core/components/core/theme/theme-switch.tsx
index 1a188fa03ef..5eac06ff39b 100644
--- a/web/core/components/core/theme/theme-switch.tsx
+++ b/web/core/components/core/theme/theme-switch.tsx
@@ -35,7 +35,7 @@ export const ThemeSwitch: FC<Props> = (props) => {
                 }}
               />
               <div
-                className="h-full w-1/2 rounded-r-full border-l"
+                className="h-full w-1/2 rounded-r-full border-r"
                 style={{
                   borderLeftColor: value.icon.border,
                   background: value.icon.color2,
@@ -67,7 +67,7 @@ export const ThemeSwitch: FC<Props> = (props) => {
                 }}
               />
               <div
-                className="h-full w-1/2 rounded-r-full border-l"
+                className="h-full w-1/2 rounded-r-full border-r"
                 style={{
                   borderLeftColor: themeOption.icon.border,
                   background: themeOption.icon.color2,
diff --git a/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
index 47f9df5e5d3..6deb479219d 100644
--- a/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
+++ b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -144,7 +144,7 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
                     {t("project_cycles.active_cycle.progress")}
                   </div>
                 </Disclosure.Button>
-                <Disclosure.Button className="ml-auto">
+                <Disclosure.Button className="mr-auto">
                   {open ? (
                     <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />
                   ) : (
diff --git a/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
index a41be6752ca..fa4cd67e66b 100644
--- a/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -3,7 +3,7 @@
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { ArchiveIcon, ArchiveRestoreIcon, ChevronRight, EllipsisIcon, LinkIcon, Trash2 } from "lucide-react";
+import { ArchiveIcon, ArchiveRestoreIcon, ChevronLeft, EllipsisIcon, LinkIcon, Trash2 } from "lucide-react";
 // types
 import { CYCLE_STATUS, CYCLE_UPDATED, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -209,7 +209,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
             className="flex size-4 items-center justify-center rounded-full bg-custom-border-200"
             onClick={() => handleClose()}
           >
-            <ChevronRight className="h-3 w-3 stroke-2 text-white" />
+            <ChevronLeft className="h-3 w-3 stroke-2 text-white" />
           </button>
         </div>
         <div className="flex items-center gap-3">
diff --git a/web/core/components/cycles/archived-cycles/header.tsx b/web/core/components/cycles/archived-cycles/header.tsx
index cdc174b0e59..2806c5f418d 100644
--- a/web/core/components/cycles/archived-cycles/header.tsx
+++ b/web/core/components/cycles/archived-cycles/header.tsx
@@ -85,7 +85,7 @@ export const ArchivedCyclesHeader: FC = observer(() => {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
             {
               "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
             }
diff --git a/web/core/components/cycles/cycle-peek-overview.tsx b/web/core/components/cycles/cycle-peek-overview.tsx
index 187425b8d72..ef0978d7c87 100644
--- a/web/core/components/cycles/cycle-peek-overview.tsx
+++ b/web/core/components/cycles/cycle-peek-overview.tsx
@@ -45,7 +45,7 @@ export const CyclePeekOverview: React.FC<Props> = observer((props) => {
       {peekCycle && projectId && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 fixed md:relative right-0 z-[9]"
+          className="flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-r border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 fixed md:relative left-0 z-[9]"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/core/components/cycles/cycles-view-header.tsx b/web/core/components/cycles/cycles-view-header.tsx
index fe5b942dbf2..b2fb5b51be9 100644
--- a/web/core/components/cycles/cycles-view-header.tsx
+++ b/web/core/components/cycles/cycles-view-header.tsx
@@ -86,7 +86,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
       )}
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
           {
             "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
           }
diff --git a/web/core/components/cycles/list/cycle-list-group-header.tsx b/web/core/components/cycles/list/cycle-list-group-header.tsx
index d132cc70ddb..294530becc1 100644
--- a/web/core/components/cycles/list/cycle-list-group-header.tsx
+++ b/web/core/components/cycles/list/cycle-list-group-header.tsx
@@ -28,7 +28,7 @@ export const CycleListGroupHeader: FC<Props> = (props) => {
 
         <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
           <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
-          {showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
+          {showCount && <div className="pr-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
         </div>
       </div>
       <ChevronDown
diff --git a/web/core/components/cycles/list/cycle-list-project-group-header.tsx b/web/core/components/cycles/list/cycle-list-project-group-header.tsx
index d663eca0d86..ff4d47ec17a 100644
--- a/web/core/components/cycles/list/cycle-list-project-group-header.tsx
+++ b/web/core/components/cycles/list/cycle-list-project-group-header.tsx
@@ -2,7 +2,7 @@
 
 import React, { FC } from "react";
 import { observer } from "mobx-react";
-import { ChevronRight } from "lucide-react";
+import { ChevronLeft } from "lucide-react";
 // icons
 import { Row, Logo } from "@plane/ui";
 // helpers
@@ -26,7 +26,7 @@ export const CycleListProjectGroupHeader: FC<Props> = observer((props) => {
   if (!project) return null;
   return (
     <Row className="flex items-center gap-2 flex-shrink-0 py-2.5">
-      <ChevronRight
+      <ChevronLeft
         className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
           "rotate-90": isExpanded,
         })}
@@ -37,7 +37,7 @@ export const CycleListProjectGroupHeader: FC<Props> = observer((props) => {
       </div>
       <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
         <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{project.name}</div>
-        {showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
+        {showCount && <div className="pr-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
       </div>
     </Row>
   );
diff --git a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
index 925e2ee9af8..5c5172f5e81 100644
--- a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -78,7 +78,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
           <>
             <div className="mt-7 border-b-[0.5px] border-custom-border-200 grid grid-cols-12 gap-1 text-xs text-custom-text-300 pb-1">
               <h6
-                className={cn("pl-1 flex items-center gap-1 col-span-7", {
+                className={cn("pr-1 flex items-center gap-1 col-span-7", {
                   "col-span-11": type === "assigned" && tab === "completed",
                   "col-span-9": type === "created" && tab === "completed",
                 })}
diff --git a/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 9df044c37b7..9377ecedf49 100644
--- a/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -28,7 +28,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
     >
       <div
         className={cn(
-          "absolute top-1/2 left-[1px] bg-custom-background-100 rounded-[3px] transition-all duration-500 ease-in-out",
+          "absolute top-1/2 right-[1px] bg-custom-background-100 rounded-[3px] transition-all duration-500 ease-in-out",
           {
             // right shadow
             "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
diff --git a/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx b/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
index 099323cce75..471ab9f6457 100644
--- a/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
+++ b/web/core/components/dashboard/widgets/loaders/issues-by-state-group.tsx
@@ -7,11 +7,11 @@ import { Loader } from "@plane/ui";
 export const IssuesByStateGroupWidgetLoader = () => (
   <Loader className="bg-custom-background-100 rounded-xl p-6">
     <Loader.Item height="17px" width="35%" />
-    <div className="flex items-center justify-between gap-32 mt-12 pl-6">
+    <div className="flex items-center justify-between gap-32 mt-12 pr-6">
       <div className="w-1/2 grid place-items-center">
         <div className="rounded-full overflow-hidden relative flex-shrink-0 h-[184px] w-[184px]">
           <Loader.Item height="184px" width="184px" />
-          <div className="absolute h-[100px] w-[100px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-custom-background-100 rounded-full" />
+          <div className="absolute h-[100px] w-[100px] top-1/2 right-1/2 -translate-x-1/2 -translate-y-1/2 bg-custom-background-100 rounded-full" />
         </div>
       </div>
       <div className="w-1/2 space-y-7 flex-shrink-0">
diff --git a/web/core/components/dashboard/widgets/overview-stats.tsx b/web/core/components/dashboard/widgets/overview-stats.tsx
index 20421f33b49..6720d2a0472 100644
--- a/web/core/components/dashboard/widgets/overview-stats.tsx
+++ b/web/core/components/dashboard/widgets/overview-stats.tsx
@@ -67,11 +67,11 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
     <Card
       spacing={ECardSpacing.SM}
       className="flex-row grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 space-y-0 p-0.5
-        [&>div>a>div]:border-r
+        [&>div>a>div]:border-l
         [&>div:last-child>a>div]:border-0
         [&>div>a>div]:border-custom-border-200
         [&>div:nth-child(2)>a>div]:border-0
-        [&>div:nth-child(2)>a>div]:lg:border-r
+        [&>div:nth-child(2)>a>div]:lg:border-l
         "
     >
       {STATS_LIST.map((stat, index) => (
@@ -86,7 +86,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
           )}
         >
           <Link href={stat.link} className="py-4 duration-300 rounded-[10px] w-full ">
-            <div className={`relative flex pl-10 sm:pl-20 md:pl-20 lg:pl-20 items-center`}>
+            <div className={`relative flex pr-10 sm:pr-20 md:pr-20 lg:pr-20 items-center`}>
               <div>
                 <h5 className="font-semibold text-xl">{stat.count}</h5>
                 <p className="text-custom-text-300 text-sm xl:text-base">{stat.title}</p>
diff --git a/web/core/components/dropdowns/priority.tsx b/web/core/components/dropdowns/priority.tsx
index dfc0ff07127..cda1c2d9892 100644
--- a/web/core/components/dropdowns/priority.tsx
+++ b/web/core/components/dropdowns/priority.tsx
@@ -63,7 +63,7 @@ const BorderButton = (props: ButtonProps) => {
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
 
   const priorityClasses = {
-    urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
+    urgent: "bg-red-600/10 text-red-600 border-led-600 px-1",
     high: "bg-orange-500/20 text-orange-950 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
     low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
@@ -89,7 +89,7 @@ const BorderButton = (props: ButtonProps) => {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+            "bg-red-600/10 border-led-600": priority === "urgent" && hideText && highlightUrgent,
           },
           className
         )}
@@ -99,7 +99,7 @@ const BorderButton = (props: ButtonProps) => {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "bg-red-600/20 p-0.5 rounded border border-red-600":
+                "bg-red-600/20 p-0.5 rounded border border-led-600":
                   priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
@@ -172,7 +172,7 @@ const BackgroundButton = (props: ButtonProps) => {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+            "bg-red-600/10 border-led-600": priority === "urgent" && hideText && highlightUrgent,
           },
           className
         )}
@@ -182,7 +182,7 @@ const BackgroundButton = (props: ButtonProps) => {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "bg-red-600/20 p-0.5 rounded border border-red-600":
+                "bg-red-600/20 p-0.5 rounded border border-led-600":
                   priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
@@ -258,7 +258,7 @@ const TransparentButton = (props: ButtonProps) => {
             // compact the icons if text is hidden
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
-            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+            "bg-red-600/10 border-led-600": priority === "urgent" && hideText && highlightUrgent,
             "bg-custom-background-80": isActive,
           },
           className
@@ -269,7 +269,7 @@ const TransparentButton = (props: ButtonProps) => {
             <div
               className={cn({
                 // highlight just the icon if text is visible and priority is urgent
-                "bg-red-600/20 p-0.5 rounded border border-red-600":
+                "bg-red-600/20 p-0.5 rounded border border-led-600":
                   priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
diff --git a/web/core/components/editor/embeds/mentions/user.tsx b/web/core/components/editor/embeds/mentions/user.tsx
index a8e4a4b0b2e..4d256f0aa33 100644
--- a/web/core/components/editor/embeds/mentions/user.tsx
+++ b/web/core/components/editor/embeds/mentions/user.tsx
@@ -71,7 +71,7 @@ export const EditorUserMention: React.FC<Props> = observer((props) => {
         @{userDetails?.display_name}
       </Link>
       <div
-        className="top-full left-0 z-10 min-w-60 bg-custom-background-90 shadow-custom-shadow-rg rounded-lg p-4 opacity-0 pointer-events-none group-hover/user-mention:opacity-100 group-hover/user-mention:pointer-events-auto transition-opacity"
+        className="top-full right-0 z-10 min-w-60 bg-custom-background-90 shadow-custom-shadow-rg rounded-lg p-4 opacity-0 pointer-events-none group-hover/user-mention:opacity-100 group-hover/user-mention:pointer-events-auto transition-opacity"
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
diff --git a/web/core/components/editor/lite-text-editor/toolbar.tsx b/web/core/components/editor/lite-text-editor/toolbar.tsx
index 818e35fae25..c8608a516bd 100644
--- a/web/core/components/editor/lite-text-editor/toolbar.tsx
+++ b/web/core/components/editor/lite-text-editor/toolbar.tsx
@@ -124,8 +124,8 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
           {Object.keys(toolbarItems).map((key, index) => (
             <div
               key={key}
-              className={cn("flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5", {
-                "pl-0": index === 0,
+              className={cn("flex items-stretch gap-0.5 border-l border-custom-border-200 px-2.5", {
+                "pr-0": index === 0,
               })}
             >
               {toolbarItems[key].map((item) => {
@@ -165,7 +165,7 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
           ))}
         </div>
         {showSubmitButton && (
-          <div className="sticky right-1">
+          <div className="sticky left-1">
             <Button
               type="submit"
               variant="primary"
diff --git a/web/core/components/editor/rich-text-editor/rich-text-editor.tsx b/web/core/components/editor/rich-text-editor/rich-text-editor.tsx
index b18fc18590c..7e065ac3362 100644
--- a/web/core/components/editor/rich-text-editor/rich-text-editor.tsx
+++ b/web/core/components/editor/rich-text-editor/rich-text-editor.tsx
@@ -59,7 +59,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
         renderComponent: (props) => <EditorMentionsRoot {...props} />,
       }}
       {...rest}
-      containerClassName={cn("relative pl-3 pb-3", containerClassName)}
+      containerClassName={cn("relative pr-3 pb-3", containerClassName)}
     />
   );
 });
diff --git a/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx b/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
index 31ce65159db..af2de11b0fb 100644
--- a/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
+++ b/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
@@ -41,7 +41,7 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
         }}
         {...props}
         // overriding the containerClassName to add relative class passed
-        containerClassName={cn(props.containerClassName, "relative pl-3")}
+        containerClassName={cn(props.containerClassName, "relative pr-3")}
       />
     );
   }
diff --git a/web/core/components/editor/sticky-editor/color-palette.tsx b/web/core/components/editor/sticky-editor/color-palette.tsx
index a4fe05b7779..5b301ce5f2f 100644
--- a/web/core/components/editor/sticky-editor/color-palette.tsx
+++ b/web/core/components/editor/sticky-editor/color-palette.tsx
@@ -54,7 +54,7 @@ type TProps = {
 export const ColorPalette = (props: TProps) => {
   const { handleUpdate } = props;
   return (
-    <div className="absolute z-10 bottom-5 left-0 w-56 shadow p-2 rounded-md bg-custom-background-100 mb-2">
+    <div className="absolute z-10 bottom-5 right-0 w-56 shadow p-2 rounded-md bg-custom-background-100 mb-2">
       <div className="text-sm font-semibold text-custom-text-400 mb-2">Background colors</div>
       <div className="flex flex-wrap gap-2">
         {STICKY_COLORS_LIST.map((color) => (
diff --git a/web/core/components/empty-state/comic-box-button.tsx b/web/core/components/empty-state/comic-box-button.tsx
index 6a1a1e59cc0..012dbe2bdb4 100644
--- a/web/core/components/empty-state/comic-box-button.tsx
+++ b/web/core/components/empty-state/comic-box-button.tsx
@@ -31,7 +31,7 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>();
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "right-end",
+    placement: "left-end",
     modifiers: [
       {
         name: "offset",
@@ -53,9 +53,9 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
               <div
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
-                className={`absolute bg-blue-300 right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+                className={`absolute bg-blue-300 left-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
               />
-              <div className={`absolute bg-blue-400/40 right-0 h-1.5 w-1.5 mt-0.5 mr-0.5 rounded-full`} />
+              <div className={`absolute bg-blue-400/40 left-0 h-1.5 w-1.5 mt-0.5 ml-0.5 rounded-full`} />
             </span>
           </div>
         </button>
@@ -68,7 +68,7 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="absolute w-2 h-2 bg-custom-background-100 border rounded-lb-sm  border-custom-border-200 border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" />
+            <div className="absolute w-2 h-2 bg-custom-background-100 border rounded-lb-sm  border-custom-border-200 border-l-0 border-t-0 transform rotate-45 bottom-2 -right-[5px]" />
             <h3 className="text-lg font-semibold w-full">{title}</h3>
             <h4 className="mt-1 text-sm">{description}</h4>
           </div>
diff --git a/web/core/components/estimates/create/modal.tsx b/web/core/components/estimates/create/modal.tsx
index 565a3ce7ff3..2e03da023cd 100644
--- a/web/core/components/estimates/create/modal.tsx
+++ b/web/core/components/estimates/create/modal.tsx
@@ -2,7 +2,7 @@
 
 import { FC, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { ChevronLeft } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 // types
 import { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
 // ui
@@ -149,7 +149,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
                 }}
                 className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
               >
-                <ChevronLeft className="w-4 h-4" />
+                <ChevronRight className="w-4 h-4" />
               </div>
             )}
             <div className="text-xl font-medium text-custom-text-100">New estimate system</div>
diff --git a/web/core/components/estimates/points/create.tsx b/web/core/components/estimates/points/create.tsx
index d4e01ee9f68..363acde326f 100644
--- a/web/core/components/estimates/points/create.tsx
+++ b/web/core/components/estimates/points/create.tsx
@@ -158,11 +158,11 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
   };
 
   return (
-    <form onSubmit={handleCreate} className="relative flex items-center gap-2 text-base pr-2.5">
+    <form onSubmit={handleCreate} className="relative flex items-center gap-2 text-base pl-2.5">
       <div
         className={cn(
           "relative w-full border rounded flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+          estimatePointError?.message ? `border-led-500` : `border-custom-border-200`
         )}
       >
         <input
@@ -182,7 +182,7 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
             }
             position="bottom"
           >
-            <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+            <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden ml-3 relative flex justify-center items-center text-red-500">
               <Info size={14} />
             </div>
           </Tooltip>
diff --git a/web/core/components/estimates/points/update.tsx b/web/core/components/estimates/points/update.tsx
index dce9a4289ef..633fdd539d8 100644
--- a/web/core/components/estimates/points/update.tsx
+++ b/web/core/components/estimates/points/update.tsx
@@ -166,11 +166,11 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
   };
 
   return (
-    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 text-base pr-2.5">
+    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 text-base pl-2.5">
       <div
         className={cn(
           "relative w-full border rounded flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+          estimatePointError?.message ? `border-led-500` : `border-custom-border-200`
         )}
       >
         <input
@@ -191,7 +191,7 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
               }
               position="bottom"
             >
-              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden ml-3 relative flex justify-center items-center text-red-500">
                 <Info size={14} />
               </div>
             </Tooltip>
diff --git a/web/core/components/exporter/guide.tsx b/web/core/components/exporter/guide.tsx
index 1dfd9001076..f8adaa34a2f 100644
--- a/web/core/components/exporter/guide.tsx
+++ b/web/core/components/exporter/guide.tsx
@@ -165,7 +165,7 @@ const IntegrationGuide = observer(() => {
                   }`}
                 >
                   <MoveLeft className="h-4 w-4" />
-                  <div className="pr-1">{t("prev")}</div>
+                  <div className="pl-1">{t("prev")}</div>
                 </button>
                 <button
                   disabled={!exporterServices?.next_page_results}
@@ -176,7 +176,7 @@ const IntegrationGuide = observer(() => {
                       : "cursor-not-allowed opacity-75"
                   }`}
                 >
-                  <div className="pl-1">{t("next")}</div>
+                  <div className="pr-1">{t("next")}</div>
                   <MoveRight className="h-4 w-4" />
                 </button>
               </div>
diff --git a/web/core/components/gantt-chart/blocks/block-row-list.tsx b/web/core/components/gantt-chart/blocks/block-row-list.tsx
index 183f626570d..c80879e16f6 100644
--- a/web/core/components/gantt-chart/blocks/block-row-list.tsx
+++ b/web/core/components/gantt-chart/blocks/block-row-list.tsx
@@ -30,7 +30,7 @@ export const GanttChartRowList: FC<GanttChartBlocksProps> = (props) => {
   } = props;
 
   return (
-    <div className="absolute top-0 left-0 min-w-full w-max">
+    <div className="absolute top-0 right-0 min-w-full w-max">
       {blockIds?.map((blockId) => (
         <>
           <RenderIfVisible
diff --git a/web/core/components/gantt-chart/blocks/block-row.tsx b/web/core/components/gantt-chart/blocks/block-row.tsx
index b215aee4b85..129be01e0f9 100644
--- a/web/core/components/gantt-chart/blocks/block-row.tsx
+++ b/web/core/components/gantt-chart/blocks/block-row.tsx
@@ -84,11 +84,11 @@ export const BlockRow: React.FC<Props> = observer((props) => {
     >
       <div
         className={cn("relative h-full", {
-          "rounded-l border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
+          "rounded-l border border-l-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
           "bg-custom-background-90": isBlockHoveredOn,
           "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isBlockSelected,
           "bg-custom-primary-100/10": isBlockSelected && isBlockHoveredOn,
-          "border border-r-0 border-custom-border-400": isBlockFocused,
+          "border border-l-0 border-custom-border-400": isBlockFocused,
         })}
       >
         {isBlockVisibleOnChart
diff --git a/web/core/components/gantt-chart/chart/header.tsx b/web/core/components/gantt-chart/chart/header.tsx
index 7eb858be35d..c364d2e177c 100644
--- a/web/core/components/gantt-chart/chart/header.tsx
+++ b/web/core/components/gantt-chart/chart/header.tsx
@@ -35,8 +35,8 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
       className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap py-2"
       style={{ height: `${GANTT_BREADCRUMBS_HEIGHT}px` }}
     >
-      <div className="ml-auto">
-        <div className="ml-auto text-sm font-medium">
+      <div className="mr-auto">
+        <div className="mr-auto text-sm font-medium">
           {blockIds ? `${blockIds.length} ${loaderTitle}` : t("common.loading")}
         </div>
       </div>
diff --git a/web/core/components/gantt-chart/chart/views/month.tsx b/web/core/components/gantt-chart/chart/views/month.tsx
index bfe29b90dd8..53819f621d7 100644
--- a/web/core/components/gantt-chart/chart/views/month.tsx
+++ b/web/core/components/gantt-chart/chart/views/month.tsx
@@ -25,7 +25,7 @@ export const MonthChartView: FC<any> = observer(() => {
   const marginLeftDays = getNumberOfDaysBetweenTwoDates(monthsStartDate, weeksStartDate);
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className={`absolute top-0 right-0 min-h-full h-max w-max flex`}>
       {currentViewData && (
         <div className="relative flex flex-col outline-[0.25px] outline outline-custom-border-200">
           {/** Header Div */}
@@ -51,7 +51,7 @@ export const MonthChartView: FC<any> = observer(() => {
                   >
                     {monthBlock?.title}
                     {monthBlock.today && (
-                      <span className={cn("rounded ml-2 font-medium bg-custom-primary-100 px-1 text-2xs text-white")}>
+                      <span className={cn("rounded mr-2 font-medium bg-custom-primary-100 px-1 text-2xs text-white")}>
                         Current
                       </span>
                     )}
diff --git a/web/core/components/gantt-chart/chart/views/quarter.tsx b/web/core/components/gantt-chart/chart/views/quarter.tsx
index ee1a11c5733..1a9878dd0f3 100644
--- a/web/core/components/gantt-chart/chart/views/quarter.tsx
+++ b/web/core/components/gantt-chart/chart/views/quarter.tsx
@@ -15,7 +15,7 @@ export const QuarterChartView: FC<any> = observer(() => {
   const quarterBlocks: IQuarterMonthBlock[] = groupMonthsToQuarters(monthBlocks);
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className={`absolute top-0 right-0 min-h-full h-max w-max flex`}>
       {currentViewData &&
         quarterBlocks?.map((quarterBlock, rootIndex) => (
           <div
@@ -39,7 +39,7 @@ export const QuarterChartView: FC<any> = observer(() => {
                 >
                   {quarterBlock?.title}
                   {quarterBlock.today && (
-                    <span className={cn("rounded ml-2 font-medium  bg-custom-primary-100 px-1 text-2xs text-white")}>
+                    <span className={cn("rounded mr-2 font-medium  bg-custom-primary-100 px-1 text-2xs text-white")}>
                       Current
                     </span>
                   )}
diff --git a/web/core/components/gantt-chart/chart/views/week.tsx b/web/core/components/gantt-chart/chart/views/week.tsx
index 7c38d97ee86..a81824e1f9f 100644
--- a/web/core/components/gantt-chart/chart/views/week.tsx
+++ b/web/core/components/gantt-chart/chart/views/week.tsx
@@ -13,7 +13,7 @@ export const WeekChartView: FC<any> = observer(() => {
   const weekBlocks: IWeekBlock[] = renderView;
 
   return (
-    <div className={`absolute top-0 left-0 min-h-full h-max w-max flex`}>
+    <div className={`absolute top-0 right-0 min-h-full h-max w-max flex`}>
       {currentViewData &&
         weekBlocks?.map((block, rootIndex) => (
           <div
diff --git a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
index 99b96e786dc..370f84fdb76 100644
--- a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
+++ b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
@@ -32,7 +32,7 @@ export const LeftResizable = observer((props: LeftResizableProps) => {
   return (
     <>
       {(isHovering || isLeftResizing) && dateString && (
-        <div className="absolute flex text-xs font-normal text-custom-text-300 h-full w-32 -left-36 justify-end items-center">
+        <div className="absolute flex text-xs font-normal text-custom-text-300 h-full w-32 -right-36 justify-end items-center">
           <div className="px-2 py-1 bg-custom-primary-20 rounded">{dateString}</div>
         </div>
       )}
@@ -46,13 +46,13 @@ export const LeftResizable = observer((props: LeftResizableProps) => {
         onMouseOut={() => {
           setIsHovering(false);
         }}
-        className="absolute -left-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
+        className="absolute -right-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
       />
       <div
         className={cn(
-          "absolute left-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-sm bg-custom-background-100 transition-all duration-300 opacity-0 group-hover:opacity-100",
+          "absolute right-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-sm bg-custom-background-100 transition-all duration-300 opacity-0 group-hover:opacity-100",
           {
-            "-left-1.5 opacity-100": isLeftResizing,
+            "-right-1.5 opacity-100": isLeftResizing,
           }
         )}
       />
diff --git a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
index 8370a7630ae..21662c43161 100644
--- a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
+++ b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
@@ -32,7 +32,7 @@ export const RightResizable = observer((props: RightResizableProps) => {
   return (
     <>
       {(isHovering || isRightResizing) && dateString && (
-        <div className="z-[10] absolute flex text-xs font-normal text-custom-text-300 h-full w-32 -right-36 justify-start items-center">
+        <div className="z-[10] absolute flex text-xs font-normal text-custom-text-300 h-full w-32 -left-36 justify-start items-center">
           <div className="px-2 py-1 bg-custom-primary-20 rounded">{dateString}</div>
         </div>
       )}
@@ -44,13 +44,13 @@ export const RightResizable = observer((props: RightResizableProps) => {
         onMouseOut={() => {
           setIsHovering(false);
         }}
-        className="absolute -right-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
+        className="absolute -left-1.5 top-1/2 -translate-y-1/2 z-[6] h-full w-3 cursor-col-resize rounded-md"
       />
       <div
         className={cn(
-          "absolute right-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-sm bg-custom-background-100 transition-all duration-300 opacity-0 group-hover:opacity-100",
+          "absolute left-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-sm bg-custom-background-100 transition-all duration-300 opacity-0 group-hover:opacity-100",
           {
-            "-right-1.5 opacity-100": isRightResizing,
+            "-left-1.5 opacity-100": isRightResizing,
           }
         )}
       />
diff --git a/web/core/components/gantt-chart/helpers/draggable.tsx b/web/core/components/gantt-chart/helpers/draggable.tsx
index a19b19f634e..2219798d84b 100644
--- a/web/core/components/gantt-chart/helpers/draggable.tsx
+++ b/web/core/components/gantt-chart/helpers/draggable.tsx
@@ -7,8 +7,8 @@ import { cn } from "@/helpers/common.helper";
 //  Plane-web
 import { LeftDependencyDraggable, RightDependencyDraggable } from "@/plane-web/components/gantt-chart";
 //
-import { LeftResizable } from "./blockResizables/left-resizable";
-import { RightResizable } from "./blockResizables/right-resizable";
+import { LeftResizable } from "./blockResizables/right-resizable";
+import { RightResizable } from "./blockResizables/left-resizable";
 
 type Props = {
   block: IGanttBlock;
diff --git a/web/core/components/gantt-chart/sidebar/issues/block.tsx b/web/core/components/gantt-chart/sidebar/issues/block.tsx
index c0218aceb16..6d9e41242b3 100644
--- a/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -41,14 +41,14 @@ export const IssuesSidebarBlock = observer((props: Props) => {
     <div
       className={cn("group/list-block", {
         "rounded bg-custom-background-80": isDragging,
-        "rounded-l border border-r-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
-        "border border-r-0 border-custom-border-400": isIssueFocused,
+        "rounded-l border border-l-0 border-custom-primary-70": getIsIssuePeeked(block.data.id),
+        "border border-l-0 border-custom-border-400": isIssueFocused,
       })}
       onMouseEnter={() => updateActiveBlockId(block.id)}
       onMouseLeave={() => updateActiveBlockId(null)}
     >
       <Row
-        className={cn("group w-full flex items-center gap-2 pr-4", {
+        className={cn("group w-full flex items-center gap-2 pl-4", {
           "bg-custom-background-90": isBlockHoveredOn,
           "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
           "bg-custom-primary-100/10": isIssueSelected && isBlockHoveredOn,
@@ -58,7 +58,7 @@ export const IssuesSidebarBlock = observer((props: Props) => {
         }}
       >
         {enableSelection && selectionHelpers && (
-          <div className="flex items-center gap-2 absolute left-1">
+          <div className="flex items-center gap-2 absolute right-1">
             <MultipleSelectEntityAction
               className={cn(
                 "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
diff --git a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index d2e5557ff84..ededecee2e5 100644
--- a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -117,7 +117,7 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
           )}
         </>
       ) : (
-        <Loader className="space-y-3 pr-2">
+        <Loader className="space-y-3 pl-2">
           <Loader.Item height="34px" />
           <Loader.Item height="34px" />
           <Loader.Item height="34px" />
diff --git a/web/core/components/gantt-chart/sidebar/modules/block.tsx b/web/core/components/gantt-chart/sidebar/modules/block.tsx
index fb8eaf48183..e8d39660311 100644
--- a/web/core/components/gantt-chart/sidebar/modules/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -35,7 +35,7 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
     >
       <Row
         id={`sidebar-block-${block.id}`}
-        className={cn("group w-full flex items-center gap-2 pr-4", {
+        className={cn("group w-full flex items-center gap-2 pl-4", {
           "bg-custom-background-90": isBlockActive(block.id),
         })}
         style={{
diff --git a/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx b/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
index 182fcefacc3..b2976e9e6f9 100644
--- a/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -49,7 +49,7 @@ export const ModuleGanttSidebar: React.FC<Props> = observer((props) => {
           </GanttDnDHOC>
         ))
       ) : (
-        <Loader className="space-y-3 pr-2">
+        <Loader className="space-y-3 pl-2">
           <Loader.Item height="34px" />
           <Loader.Item height="34px" />
           <Loader.Item height="34px" />
diff --git a/web/core/components/gantt-chart/sidebar/root.tsx b/web/core/components/gantt-chart/sidebar/root.tsx
index 7f6866ad686..a619124494f 100644
--- a/web/core/components/gantt-chart/sidebar/root.tsx
+++ b/web/core/components/gantt-chart/sidebar/root.tsx
@@ -50,21 +50,21 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
     <Row
       // DO NOT REMOVE THE ID
       id="gantt-sidebar"
-      className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200 bg-custom-background-100"
+      className="sticky right-0 z-10 min-h-full h-max flex-shrink-0 border-l-[0.5px] border-custom-border-200 bg-custom-background-100"
       style={{
         width: `${SIDEBAR_WIDTH}px`,
       }}
       variant={ERowVariant.HUGGING}
     >
       <Row
-        className="group/list-header box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
+        className="group/list-header box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pl-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
         style={{
           height: `${HEADER_HEIGHT}px`,
         }}
       >
         <div className={cn("flex items-center gap-2")}>
           {enableSelection && (
-            <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
+            <div className="flex-shrink-0 flex items-center w-3.5 absolute right-1">
               <MultipleSelectGroupAction
                 className={cn(
                   "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
diff --git a/web/core/components/global/timezone-select.tsx b/web/core/components/global/timezone-select.tsx
index af20a7c88f8..24bebe6f652 100644
--- a/web/core/components/global/timezone-select.tsx
+++ b/web/core/components/global/timezone-select.tsx
@@ -41,7 +41,7 @@ export const TimezoneSelect: FC<TTimezoneSelect> = observer((props) => {
         options={isDisabled || disabled ? [] : timezones}
         onChange={onChange}
         buttonClassName={cn(buttonClassName, {
-          "border-red-500": error,
+          "border-led-500": error,
         })}
         className={cn("rounded-md border-[0.5px] !border-custom-border-200", className)}
         optionsClassName={cn("w-72", optionsClassName)}
diff --git a/web/core/components/home/root.tsx b/web/core/components/home/root.tsx
index f137db95707..ff5d22da05b 100644
--- a/web/core/components/home/root.tsx
+++ b/web/core/components/home/root.tsx
@@ -52,7 +52,7 @@ export const WorkspaceHomeView = observer(() => {
   return (
     <>
       {currentUserProfile && !currentUserProfile.is_tour_completed && (
-        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+        <div className="fixed right-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
           <TourRoot onComplete={handleTourCompleted} />
         </div>
       )}
diff --git a/web/core/components/home/widgets/empty-states/no-projects.tsx b/web/core/components/home/widgets/empty-states/no-projects.tsx
index 44496aa81c4..441728b994b 100644
--- a/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -100,7 +100,7 @@ export const NoProjectsEmptyState = observer(() => {
             <span className="relative flex h-6 w-6 items-center justify-center rounded-full p-4 capitalize text-white">
               <img
                 src={getFileURL(currentUser?.avatar_url)}
-                className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                className="absolute right-0 top-0 h-full w-full rounded-full object-cover"
                 alt={currentUser?.display_name || currentUser?.email}
               />
             </span>
diff --git a/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx b/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
index 2995ce08651..0a69c599f93 100644
--- a/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
+++ b/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
@@ -16,7 +16,7 @@ export const WidgetItemDragHandle: FC<Props> = observer((props) => {
 
   return (
     <div
-      className={cn("flex items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2", {
+      className={cn("flex items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab ml-2", {
         "cursor-grabbing": isDragging,
       })}
     >
diff --git a/web/core/components/home/widgets/manage/widget-item.tsx b/web/core/components/home/widgets/manage/widget-item.tsx
index 42cb7f5c0d4..a255b741fb7 100644
--- a/web/core/components/home/widgets/manage/widget-item.tsx
+++ b/web/core/components/home/widgets/manage/widget-item.tsx
@@ -72,7 +72,7 @@ export const WidgetItem: FC<Props> = observer((props) => {
             getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
             render: ({ container }) => {
               const root = createRoot(container);
-              root.render(<div className="rounded bg-custom-background-100 text-sm p-1 pr-2">{widget.key}</div>);
+              root.render(<div className="rounded bg-custom-background-100 text-sm p-1 pl-2">{widget.key}</div>);
               return () => root.unmount();
             },
             nativeSetDragImage,
diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx
index 1259b21ef9a..d19787897ab 100644
--- a/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -346,7 +346,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                   variant="neutral-primary"
                   size="sm"
                   prependIcon={<CircleX className="w-3 h-3" />}
-                  className="text-red-500 border-0.5 border-red-500 bg-red-500/20 focus:bg-red-500/20 focus:text-red-500 hover:bg-red-500/40 bg-opacity-20"
+                  className="text-red-500 border-0.5 border-led-500 bg-red-500/20 focus:bg-red-500/20 focus:text-red-500 hover:bg-red-500/40 bg-opacity-20"
                   onClick={() =>
                     handleActionWithPermission(
                       isProjectAdmin,
diff --git a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index 93b82358719..fa23f83e6e3 100644
--- a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -102,13 +102,13 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
     <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
       {isNotificationEmbed && (
         <button onClick={embedRemoveCurrentNotification}>
-          <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200 mr-2" />
+          <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200 ml-2" />
         </button>
       )}
       <PanelLeft
         onClick={() => setIsMobileSidebar(!isMobileSidebar)}
         className={cn(
-          "w-4 h-4 flex-shrink-0 mr-2 my-auto",
+          "w-4 h-4 flex-shrink-0 ml-2 my-auto",
           isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
         )}
       />
@@ -135,7 +135,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
             <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
-        <div className="ml-auto">
+        <div className="mr-auto">
           <CustomMenu verticalEllipsis placement="bottom-start">
             {isAcceptedOrDeclined && (
               <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
diff --git a/web/core/components/inbox/inbox-filter/filters/labels.tsx b/web/core/components/inbox/inbox-filter/filters/labels.tsx
index 3541ef8dc4f..76fea606a81 100644
--- a/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -66,7 +66,7 @@ export const FilterLabels: FC<Props> = observer((props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/inbox/inbox-filter/filters/members.tsx b/web/core/components/inbox/inbox-filter/filters/members.tsx
index 1dcf2de6830..c48c192de4b 100644
--- a/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -93,7 +93,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/inbox/inbox-filter/filters/state.tsx b/web/core/components/inbox/inbox-filter/filters/state.tsx
index 9b0d41c0da7..84036330c88 100644
--- a/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -62,7 +62,7 @@ export const FilterState: FC<Props> = observer((props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/inbox/modals/select-duplicate.tsx b/web/core/components/inbox/modals/select-duplicate.tsx
index d0484ce66f8..00320e4c468 100644
--- a/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/web/core/components/inbox/modals/select-duplicate.tsx
@@ -150,12 +150,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                   <Combobox value={value} onChange={handleSubmit}>
                     <div className="relative m-1">
                       <Search
-                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                        className="pointer-events-none absolute right-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
                         aria-hidden="true"
                       />
                       <input
                         type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
+                        className="h-12 w-full border-0 bg-transparent pr-11 pl-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(e) => setQuery(e.target.value)}
                       />
diff --git a/web/core/components/inbox/sidebar/inbox-list-item.tsx b/web/core/components/inbox/sidebar/inbox-list-item.tsx
index 6762c25280d..badb9f7f420 100644
--- a/web/core/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -56,7 +56,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
       >
         <Row
           className={cn(
-            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-custom-border-200 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
+            `flex flex-col gap-2 relative border border-t-transparent border-r-transparent border-l-transparent border-b-custom-border-200 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
             { "border-custom-primary-100 border": selectedInboxIssueId === issue.id }
           )}
         >
diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx
index e40359087ed..2368ae422ef 100644
--- a/web/core/components/inbox/sidebar/root.tsx
+++ b/web/core/components/inbox/sidebar/root.tsx
@@ -82,7 +82,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
   }, [currentTab, filteredInboxIssueIds, inboxIssueId, projectId, router, workspaceSlug]);
 
   return (
-    <div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-r border-custom-border-300 ">
+    <div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-l border-custom-border-300 ">
       <div className="relative w-full h-full flex flex-col overflow-hidden">
         <Header variant={EHeaderVariant.SECONDARY}>
           {tabNavigationOptions.map((option) => (
@@ -107,13 +107,13 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
               )}
               <div
                 className={cn(
-                  `border absolute bottom-0 right-0 left-0 rounded-t-md`,
+                  `border absolute bottom-0 left-0 right-0 rounded-t-md`,
                   currentTab === option?.key ? `border-custom-primary-100` : `border-transparent`
                 )}
               />
             </div>
           ))}
-          <div className="m-auto mr-0">
+          <div className="m-auto ml-0">
             <FiltersRoot />
           </div>
         </Header>
diff --git a/web/core/components/integration/github/single-user-select.tsx b/web/core/components/integration/github/single-user-select.tsx
index c2ecda03e86..bd454f96d08 100644
--- a/web/core/components/integration/github/single-user-select.tsx
+++ b/web/core/components/integration/github/single-user-select.tsx
@@ -76,7 +76,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
         <div className="relative h-8 w-8 flex-shrink-0 rounded">
           <img
             src={collaborator.avatar_url}
-            className="absolute left-0 top-0 h-full w-full rounded object-cover"
+            className="absolute right-0 top-0 h-full w-full rounded object-cover"
             alt={`${collaborator.login} GitHub user`}
           />
         </div>
diff --git a/web/core/components/issues/attachment/attachment-item-list.tsx b/web/core/components/issues/attachment/attachment-item-list.tsx
index 5df3f49c21f..cb5b8321d59 100644
--- a/web/core/components/issues/attachment/attachment-item-list.tsx
+++ b/web/core/components/issues/attachment/attachment-item-list.tsx
@@ -125,7 +125,7 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
           >
             <input {...getInputProps()} />
             {isDragActive && (
-              <div className="absolute flex items-center justify-center left-0 top-0 h-full w-full bg-custom-background-90/75 z-30 ">
+              <div className="absolute flex items-center justify-center right-0 top-0 h-full w-full bg-custom-background-90/75 z-30 ">
                 <div className="flex items-center justify-center p-1 rounded-md bg-custom-background-100">
                   <div className="flex flex-col justify-center items-center px-5 py-6 rounded-md border border-dashed border-custom-border-300">
                     <UploadCloud className="size-7" />
diff --git a/web/core/components/issues/attachment/attachment-list-item.tsx b/web/core/components/issues/attachment/attachment-list-item.tsx
index 0273694057d..f84073766be 100644
--- a/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -55,7 +55,7 @@ export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer(
           window.open(fileURL, "_blank");
         }}
       >
-        <div className="group flex items-center justify-between gap-3 h-11 hover:bg-custom-background-90 pl-9 pr-2">
+        <div className="group flex items-center justify-between gap-3 h-11 hover:bg-custom-background-90 pr-9 pl-2">
           <div className="flex items-center gap-3 text-sm truncate">
             <div className="flex items-center gap-3">{fileIcon}</div>
             <Tooltip tooltipContent={`${fileName}.${fileExtension}`} isMobile={isMobile}>
diff --git a/web/core/components/issues/attachment/attachment-list-upload-item.tsx b/web/core/components/issues/attachment/attachment-list-upload-item.tsx
index 8ea9d3470e2..d731b8a04a2 100644
--- a/web/core/components/issues/attachment/attachment-list-upload-item.tsx
+++ b/web/core/components/issues/attachment/attachment-list-upload-item.tsx
@@ -27,7 +27,7 @@ export const IssueAttachmentsUploadItem: React.FC<Props> = observer((props) => {
   const { isMobile } = usePlatformOS();
 
   return (
-    <div className="flex items-center justify-between gap-3 h-11 bg-custom-background-90 pl-9 pr-2 pointer-events-none">
+    <div className="flex items-center justify-between gap-3 h-11 bg-custom-background-90 pr-9 pl-2 pointer-events-none">
       <div className="flex items-center gap-3 text-sm truncate">
         <div className="flex-shrink-0">{fileIcon}</div>
         <Tooltip tooltipContent={fileName} isMobile={isMobile}>
diff --git a/web/core/components/issues/bulk-operations/upgrade-banner.tsx b/web/core/components/issues/bulk-operations/upgrade-banner.tsx
index fef0cb6172d..be8ff85c52e 100644
--- a/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -12,7 +12,7 @@ export const BulkOperationsUpgradeBanner: React.FC<Props> = (props) => {
   const { className } = props;
 
   return (
-    <div className={cn("sticky bottom-0 left-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
+    <div className={cn("sticky bottom-0 right-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
       <div className="h-14 w-full bg-custom-primary-100/10 border-[0.5px] border-custom-primary-100/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
         <p className="text-custom-primary-100 font-medium">
           Change state, priority, and more for several work items at once. Save three minutes on an average per
diff --git a/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index 3092a42fe78..49cbc12ecc4 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -120,7 +120,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
             <Collapsible
               buttonClassName="w-full"
               title={
-                <div className={`flex items-center gap-1 px-3 py-1 h-9  w-full pl-9 ${relation.className}`}>
+                <div className={`flex items-center gap-1 px-3 py-1 h-9  w-full pr-9 ${relation.className}`}>
                   <span>{relation.icon ? relation.icon(14) : null}</span>
                   <span className="text-sm font-medium leading-5">{relation.label}</span>
                 </div>
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
index 40162dc15d9..a6d2062e723 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -31,7 +31,7 @@ export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
         >
           <span className="text-custom-text-200">{t("common.filters")}</span>
           {selectedFilters.length < filterOptions.length && (
-            <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
+            <span className="absolute h-2 w-2 -left-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
           )}
         </Button>
       }
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index 2a9701d34e8..5d162bae6fa 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -37,7 +37,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
+      <div className="absolute right-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
       <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
diff --git a/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx b/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
index 9a35ef1da4f..153aa719b64 100644
--- a/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
@@ -26,7 +26,7 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
   if (!comment) return <></>;
   return (
     <div className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}>
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
+      <div className="absolute right-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
       <div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-[3] bg-gray-500 text-white border border-white uppercase font-medium">
         {comment.actor_detail?.avatar_url && comment.actor_detail?.avatar_url !== "" ? (
           <img
@@ -47,7 +47,7 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
               : comment.actor_detail?.display_name.charAt(0)}
           </>
         )}
-        <div className="absolute top-2 left-4 w-5 h-5 rounded-full overflow-hidden flex justify-center items-center bg-custom-background-80">
+        <div className="absolute top-2 right-4 w-5 h-5 rounded-full overflow-hidden flex justify-center items-center bg-custom-background-80">
           <MessageCircle className="w-3 h-3 text-custom-text-200" />
         </div>
       </div>
diff --git a/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 96f0960b605..263615aecca 100644
--- a/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -194,7 +194,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
             )}
             <button
               type="button"
-              className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+              className="group rounded border border-led-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
               onClick={() => setIsEditing(false)}
             >
               <X className="size-3 text-red-500 duration-300 group-hover:text-white" />
@@ -203,7 +203,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
         </form>
         <div className={`relative ${isEditing ? "hidden" : ""}`}>
           {showAccessSpecifier && (
-            <div className="absolute right-2.5 top-2.5 z-[1] text-custom-text-300">
+            <div className="absolute left-2.5 top-2.5 z-[1] text-custom-text-300">
               {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
                 <Lock className="h-3 w-3" />
               ) : (
diff --git a/web/core/components/issues/issue-detail/label/label-list-item.tsx b/web/core/components/issues/issue-detail/label/label-list-item.tsx
index 8dbd980c5be..c41c53b0d63 100644
--- a/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -33,7 +33,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
     <div
       key={labelId}
       className={`transition-all relative flex items-center gap-1 truncate border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
-        !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
+        !disabled ? "cursor-pointer hover:border-led-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
       } `}
       onClick={handleLabel}
     >
diff --git a/web/core/components/issues/issue-detail/label/select/label-select.tsx b/web/core/components/issues/issue-detail/label/select/label-select.tsx
index e89cd45fcf8..d83f4f91c17 100644
--- a/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -157,7 +157,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                 />
               </div>
             </div>
-            <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
+            <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pl-0`}>
               {isLoading ? (
                 <p className="text-center text-custom-text-200">{t("common.loading")}</p>
               ) : filteredOptions.length > 0 ? (
diff --git a/web/core/components/issues/issue-detail/root.tsx b/web/core/components/issues/issue-detail/root.tsx
index 16abbf5d15f..2276969ade7 100644
--- a/web/core/components/issues/issue-detail/root.tsx
+++ b/web/core/components/issues/issue-detail/root.tsx
@@ -371,7 +371,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             />
           </div>
           <div
-            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-custom-border-200 bg-custom-sidebar-background-100 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
+            className="fixed left-0 z-[5] h-full w-full min-w-[300px] border-r border-custom-border-200 bg-custom-sidebar-background-100 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
             style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
           >
             <IssueDetailsSidebar
diff --git a/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 05e5a163188..e2c4f1b0890 100644
--- a/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronRight, ChevronLeft } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
 //hooks
 // icons
@@ -118,7 +118,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
                   handleDateChange(previousYear);
                 }}
               >
-                <ChevronLeft size={14} />
+                <ChevronRight size={14} />
               </button>
               <span className="text-xs">{activeMonthDate.getFullYear()}</span>
               <button
@@ -129,7 +129,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
                   handleDateChange(nextYear);
                 }}
               >
-                <ChevronRight size={14} />
+                <ChevronLeft size={14} />
               </button>
             </div>
             <div className="grid grid-cols-4 items-stretch justify-items-stretch gap-4 pt-3">
diff --git a/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 35c2c281cc0..4a92753bd51 100644
--- a/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -140,7 +140,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}
-                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 p-1 shadow-custom-shadow-sm"
+                className="absolute left-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 p-1 shadow-custom-shadow-sm"
               >
                 <div>
                   {Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
diff --git a/web/core/components/issues/issue-layouts/calendar/header.tsx b/web/core/components/issues/issue-layouts/calendar/header.tsx
index e5943f33b09..c50a499fc7f 100644
--- a/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 
 // components
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronRight, ChevronLeft } from "lucide-react";
 import { EIssueFilterType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import {
@@ -109,10 +109,10 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
     <Row className="mb-4 flex items-center justify-between gap-2">
       <div className="flex items-center gap-1.5">
         <button type="button" className="grid place-items-center" onClick={handlePrevious}>
-          <ChevronLeft size={16} strokeWidth={2} />
+          <ChevronRight size={16} strokeWidth={2} />
         </button>
         <button type="button" className="grid place-items-center" onClick={handleNext}>
-          <ChevronRight size={16} strokeWidth={2} />
+          <ChevronLeft size={16} strokeWidth={2} />
         </button>
         <CalendarMonthsDropdown issuesFilterStore={issuesFilterStore} />
       </div>
diff --git a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
index 127ebfb475e..1a5811c7080 100644
--- a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -96,7 +96,7 @@ export const CalendarIssueBlock = observer(
       >
         <>
           {issue?.tempId !== undefined && (
-            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+            <div className="absolute right-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
           )}
 
           <div
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 553fd7d4184..7d9a5f8d3c6 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -86,7 +86,7 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 2fbcf6233cc..8a15de1950c 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -79,7 +79,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index 8169b43c8b0..e6732ae356e 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -82,7 +82,7 @@ export const FilterCycle: React.FC<Props> = observer((props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
index 70800af0e80..0ba33731f23 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -72,7 +72,7 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index e38f5794d8d..c112d943695 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -86,7 +86,7 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
index ea972db0325..0460c4065ef 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -72,7 +72,7 @@ export const FilterModule: React.FC<Props> = observer((props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
index 02fac50a3b6..cfd5de902b1 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -74,7 +74,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index cdad192b621..3a5848003f3 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -54,7 +54,7 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
               {filteredOptions.length > 5 && (
                 <button
                   type="button"
-                  className="ml-8 text-xs font-medium text-custom-primary-100"
+                  className="mr-8 text-xs font-medium text-custom-primary-100"
                   onClick={handleViewToggle}
                 >
                   {itemsToRender === filteredOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
index aeffcee4144..807475d2c5d 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -63,7 +63,7 @@ export const FilterState: React.FC<Props> = observer((props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index f7c8deab1c7..f608caec2c2 100644
--- a/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -70,7 +70,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                       <span>{title}</span>
                     </div>
                     {isFiltersApplied && (
-                      <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
+                      <span className="absolute h-2 w-2 -left-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
                     )}
                   </>
                 </Button>
diff --git a/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
index 26c7bfaf55c..758681b9d1b 100644
--- a/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -32,7 +32,7 @@ export const FilterOption: React.FC<Props> = (props) => {
         <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
       </div>
       {activePulse && (
-        <div className="flex-shrink-0 text-xs w-2 h-2 rounded-full bg-custom-primary-100 animate-pulse ml-auto" />
+        <div className="flex-shrink-0 text-xs w-2 h-2 rounded-full bg-custom-primary-100 animate-pulse mr-auto" />
       )}
     </button>
   );
diff --git a/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/web/core/components/issues/issue-layouts/gantt/blocks.tsx
index 0281e8b4984..68461f0eb68 100644
--- a/web/core/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/core/components/issues/issue-layouts/gantt/blocks.tsx
@@ -69,7 +69,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
         style={blockStyle}
         onClick={handleIssuePeekOverview}
       >
-        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50 " />
+        <div className="absolute right-0 top-0 h-full w-full bg-custom-background-100/50 " />
         <div
           className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100 flex-1"
           style={{ left: `${SIDEBAR_WIDTH}px` }}
diff --git a/web/core/components/issues/issue-layouts/group-drag-overlay.tsx b/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
index df62e37f622..ca83f93d6ee 100644
--- a/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
+++ b/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -45,7 +45,7 @@ export const GroupDragOverlay = (props: Props) => {
     <div
       ref={messageContainerRef}
       className={cn(
-        `absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-80/85 ${dragColumnOrientation}`,
+        `absolute top-0 right-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-80/85 ${dragColumnOrientation}`,
         {
           "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlayBeVisible,
           "bg-red-200/60": workflowDisabledSource && isDropDisabled,
diff --git a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 33ab962a525..8cc17e4f890 100644
--- a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -252,7 +252,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         <div className="relative h-full w-max min-w-full bg-custom-background-90">
           {/* drag and delete component */}
           <div
-            className={`fixed left-1/2 -translate-x-1/2 ${
+            className={`fixed right-1/2 -translate-x-1/2 ${
               isDragging ? "z-40" : ""
             } top-3 mx-3 flex w-72 items-center justify-center`}
             ref={deleteAreaRef}
@@ -260,7 +260,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
             <div
               className={`${
                 isDragging ? `opacity-100` : `opacity-0`
-              } flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
+              } flex w-full items-center justify-center rounded border-2 border-led-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
                 isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
               } transition duration-300`}
             >
diff --git a/web/core/components/issues/issue-layouts/kanban/block.tsx b/web/core/components/issues/issue-layouts/kanban/block.tsx
index 039a616bb8a..c7070a2d9a6 100644
--- a/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -83,7 +83,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           />
         )}
         <div
-          className={cn("absolute -top-1 right-0", {
+          className={cn("absolute -top-1 left-0", {
             "hidden group-hover/kanban-block:block": !isMobile,
           })}
           onClick={handleEventPropagation}
diff --git a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 77d6a08aa34..730191272cd 100644
--- a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -134,7 +134,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
             {title}
           </div>
           <div
-            className={`flex-shrink-0 text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `pr-0.5` : `pl-2`}`}
+            className={`flex-shrink-0 text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `pl-0.5` : `pr-2`}`}
           >
             {count || 0}
           </div>
diff --git a/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 08620d40da0..72336d060ad 100644
--- a/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -38,7 +38,7 @@ export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props)
 
       <div className="flex flex-shrink-0 items-center gap-1 text-sm">
         <div className="line-clamp-1 text-custom-text-100">{title}</div>
-        <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+        <div className="pr-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
       </div>
 
       <WorkFlowGroupTree groupBy={sub_group_by} groupId={column_id} />
diff --git a/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index d1397c55974..37c7ee08d3c 100644
--- a/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -167,7 +167,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
           return (
             <div key={_list.id} className="flex flex-shrink-0 flex-col">
               <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
-                <Row className="sticky left-0 flex-shrink-0">
+                <Row className="sticky right-0 flex-shrink-0">
                   <HeaderSubGroupByCard
                     column_id={_list.id}
                     icon={_list.icon}
diff --git a/web/core/components/issues/issue-layouts/list/block.tsx b/web/core/components/issues/issue-layouts/list/block.tsx
index 0893fb492cf..6f94d5651dc 100644
--- a/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/web/core/components/issues/issue-layouts/list/block.tsx
@@ -5,7 +5,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronRight } from "lucide-react";
+import { ChevronLeft } from "lucide-react";
 import { EIssueServiceType } from "@plane/constants";
 // types
 import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
@@ -209,7 +209,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                   }
                   disabled={issue.project_id === projectId}
                 >
-                  <div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
+                  <div className="flex-shrink-0 grid place-items-center w-3.5 absolute right-1">
                     <MultipleSelectEntityAction
                       className={cn(
                         "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
@@ -246,7 +246,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                     className="size-4 grid place-items-center rounded-sm text-custom-text-400 hover:text-custom-text-300"
                     onClick={handleToggleExpand}
                   >
-                    <ChevronRight
+                    <ChevronLeft
                       className={cn("size-4", {
                         "rotate-90": isExpanded,
                       })}
@@ -257,7 +257,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
               </div>
 
               {issue?.tempId !== undefined && (
-                <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+                <div className="absolute right-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
               )}
             </div>
 
@@ -276,7 +276,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                 displayPropertyKey="sub_issue_count"
                 shouldRenderProperty={(properties) => !!properties.sub_issue_count}
               >
-                <IssueStats issueId={issue.id} className="ml-2 font-medium text-custom-text-350" />
+                <IssueStats issueId={issue.id} className="mr-2 font-medium text-custom-text-350" />
               </WithDisplayPropertiesHOC>
             )}
           </div>
diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 4ba02698918..7dd4e7ffcb9 100644
--- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -96,7 +96,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
     <>
       <div className="group/list-header w-full flex-shrink-0 flex items-center gap-2 py-1.5">
         {canSelectIssues && (
-          <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
+          <div className="flex-shrink-0 flex items-center w-3.5 absolute right-1">
             <MultipleSelectGroupAction
               className={cn(
                 "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none ",
@@ -119,7 +119,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
           onClick={() => handleCollapsedGroups(groupID)}
         >
           <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
-          <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+          <div className="pr-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
           <WorkFlowGroupTree groupBy={groupBy} groupId={groupID} />
         </div>
 
diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx
index 99fa9de99c2..6d71d60578b 100644
--- a/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -130,7 +130,7 @@ export const ListGroup = observer((props: Props) => {
   ) : (
     <div
       className={
-        "h-11 relative flex items-center gap-3 bg-custom-background-100 border border-transparent border-t-custom-border-200 pl-8 p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
+        "h-11 relative flex items-center gap-3 bg-custom-background-100 border border-transparent border-t-custom-border-200 pr-8 p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
       }
       onClick={() => loadMoreIssues(group.id)}
     >
@@ -258,7 +258,7 @@ export const ListGroup = observer((props: Props) => {
       })}
     >
       <Row
-        className={cn("w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pr-3 py-1", {
+        className={cn("w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pl-3 py-1", {
           "sticky top-0 z-[2]": isExpanded && groupIssueCount > 0,
         })}
       >
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx b/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
index 765a54af71c..d005a46d316 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
@@ -24,7 +24,7 @@ export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props
           {...register("name", {
             required: `${isEpic ? "Epic" : "Work item"} title is required.`,
           })}
-          className="w-full rounded-md bg-transparent py-1.5 pr-2 text-sm md:text-xs font-medium leading-5 text-custom-text-200 outline-none"
+          className="w-full rounded-md bg-transparent py-1.5 pl-2 text-sm md:text-xs font-medium leading-5 text-custom-text-200 outline-none"
         />
       </form>
     </div>
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
index 19f0476762e..b6d2cfbf48f 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) =
   const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className={cn("shadow-custom-shadow-sm", hasError && "border border-red-500/20 bg-red-500/10")}>
+    <div className={cn("shadow-custom-shadow-sm", hasError && "border border-led-500/20 bg-red-500/10")}>
       <form
         ref={ref}
         onSubmit={onSubmit}
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx b/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
index 92e1811b3ba..f112f702382 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
@@ -17,7 +17,7 @@ export const KanbanQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props)
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-sm font-medium leading-5 text-custom-text-200 outline-none"
+            className="w-full rounded-md bg-transparent px-2 py-1.5 pr-0 text-sm font-medium leading-5 text-custom-text-200 outline-none"
           />
         </div>
       </form>
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx b/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
index 494f2c63609..5f1d8bcc872 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
@@ -24,7 +24,7 @@ export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((pr
           className="w-full rounded-md bg-transparent py-3 text-sm leading-5 text-custom-text-200 outline-none"
         />
       </form>
-      <p className="ml-3 mt-3 text-xs italic text-custom-text-200">
+      <p className="mr-3 mt-3 text-xs italic text-custom-text-200">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </p>
     </div>
diff --git a/web/core/components/issues/issue-layouts/quick-add/root.tsx b/web/core/components/issues/issue-layouts/quick-add/root.tsx
index 6bc6997a4cd..35071befd7e 100644
--- a/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -159,7 +159,7 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
     <div
       className={cn(
         containerClassName,
-        errors && errors?.name && errors?.name?.message ? `border-red-500 bg-red-500/10` : ``
+        errors && errors?.name && errors?.name?.message ? `border-led-500 bg-red-500/10` : ``
       )}
     >
       {isOpen ? (
diff --git a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
index 4007468dc20..3f3c2b96d06 100644
--- a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -74,7 +74,7 @@ export const ProjectLayoutRoot: FC = observer(() => {
         <div className="relative h-full w-full overflow-auto bg-custom-background-90">
           {/* mutation loader */}
           {issues?.getIssueLoader() === "mutation" && (
-            <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
+            <div className="fixed w-[40px] h-[40px] z-50 left-[20px] top-[70px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
               <Spinner className="w-4 h-4" />
             </div>
           )}
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index 5328249778f..fa9206b2bda 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -53,7 +53,7 @@ export const HeaderColumn = (props: Props) => {
             {<SpreadSheetPropertyIcon iconKey={propertyDetails.icon} className="h-4 w-4 text-custom-text-400" />}
             {property === "sub_issue_count" && isEpic ? t("issue.label", { count: 2 }) : t(propertyDetails.i18n_title)}
           </div>
-          <div className="ml-3 flex">
+          <div className="mr-3 flex">
             {activeSortingProperty === property && (
               <div className="flex h-3.5 w-3.5 items-center justify-center rounded-full">
                 {propertyDetails.ascendingOrderKey === displayFilters.order_by ? (
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
index cf6b4febb99..5e499319694 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -41,7 +41,7 @@ export const IssueColumn = observer((props: Props) => {
     >
       <td
         tabIndex={0}
-        className="h-11 w-full min-w-36 max-w-48 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100"
+        className="h-11 w-full min-w-36 max-w-48 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-l-[1px] border-custom-border-100"
         ref={tableCellRef}
       >
         <Column
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 0c87dfae5b2..434679f8482 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -3,7 +3,7 @@
 import { Dispatch, MouseEvent, MutableRefObject, SetStateAction, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronLeft, MoreHorizontal } from "lucide-react";
 import { EIssueServiceType, SPREADSHEET_SELECT_GROUP } from "@plane/constants";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -256,13 +256,13 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
         id={`issue-${issueId}`}
         ref={cellRef}
         tabIndex={0}
-        className="relative md:sticky left-0 z-10 group/list-block bg-custom-background-100"
+        className="relative md:sticky right-0 z-10 group/list-block bg-custom-background-100"
       >
         <ControlLink
           href={workItemLink}
           onClick={() => handleIssuePeekOverview(issueDetail)}
           className={cn(
-            "group clickable cursor-pointer h-11 w-[28rem] flex items-center text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200 bg-transparent group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
+            "group clickable cursor-pointer h-11 w-[28rem] flex items-center text-sm after:absolute border-l-[0.5px] z-10 border-custom-border-200 bg-transparent group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
             {
               "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
               "border border-custom-primary-70 hover:border-custom-primary-70":
@@ -286,7 +286,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
                   }
                   disabled={issueDetail.project_id === projectId}
                 >
-                  <div className="flex-shrink-0 grid place-items-center w-3.5 mr-1 absolute left-1">
+                  <div className="flex-shrink-0 grid place-items-center w-3.5 ml-1 absolute right-1">
                     <MultipleSelectEntityAction
                       className={cn(
                         "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
@@ -329,7 +329,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
                     className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
                     onClick={handleToggleExpand}
                   >
-                    <ChevronRight
+                    <ChevronLeft
                       className={cn("size-4", {
                         "rotate-90": isExpanded,
                       })}
@@ -345,7 +345,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
                 <div className="w-full overflow-hidden">
                   <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
                     <div
-                      className="h-full w-full cursor-pointer truncate pr-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
+                      className="h-full w-full cursor-pointer truncate pl-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
                       tabIndex={-1}
                     >
                       {issueDetail.name}
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index d58fc26544f..fa9474c8978 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -43,15 +43,15 @@ export const SpreadsheetHeader = observer((props: Props) => {
   const canSelectIssues = canEditProperties(projectId?.toString()) && !selectionHelpers.isSelectionDisabled;
 
   return (
-    <thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-custom-border-100">
+    <thead className="sticky top-0 right-0 z-[12] border-b-[0.5px] border-custom-border-100">
       <tr>
         <th
-          className="group/list-header sticky left-0 z-[15] h-11 w-[28rem] flex items-center gap-1 bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-custom-border-100"
+          className="group/list-header sticky right-0 z-[15] h-11 w-[28rem] flex items-center gap-1 bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:left-0 before:border-custom-border-100"
           tabIndex={-1}
         >
           <Row>
             {canSelectIssues && (
-              <div className="flex-shrink-0 flex items-center w-3.5 mr-1 absolute left-1 py-[11px]">
+              <div className="flex-shrink-0 flex items-center w-3.5 ml-1 absolute right-1 py-[11px]">
                 <MultipleSelectGroupAction
                   className={cn(
                     "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 4cdb2aafe4f..635f2efba00 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -110,7 +110,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
               />
             </div>
             <div className="border-t border-custom-border-100">
-              <div className="z-5 sticky bottom-0 left-0 mb-3">
+              <div className="z-5 sticky bottom-0 right-0 mb-3">
                 {enableQuickCreateIssue && !disableIssueCreation && (
                   <QuickAddIssueRoot
                     layout={EIssueLayoutTypes.SPREADSHEET}
diff --git a/web/core/components/issues/issue-modal/components/description-editor.tsx b/web/core/components/issues/issue-modal/components/description-editor.tsx
index b19fc62dbb0..119445a9fc0 100644
--- a/web/core/components/issues/issue-modal/components/description-editor.tsx
+++ b/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -167,7 +167,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
           <div className="flex items-center gap-2">
             <Loader.Item width="50%" height="26px" />
           </div>
-          <div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
+          <div className="border-0.5 absolute bottom-2 left-3.5 z-10 flex items-center gap-2">
             <Loader.Item width="100px" height="26px" />
             <Loader.Item width="50px" height="26px" />
           </div>
diff --git a/web/core/components/issues/parent-issues-list-modal.tsx b/web/core/components/issues/parent-issues-list-modal.tsx
index e289caf2a53..ddada722582 100644
--- a/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/web/core/components/issues/parent-issues-list-modal.tsx
@@ -123,11 +123,11 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                 >
                   <div className="relative m-1">
                     <Search
-                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                      className="pointer-events-none absolute right-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pr-11 pl-4 text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0 sm:text-sm"
                       placeholder={t("common.search.placeholder")}
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
diff --git a/web/core/components/issues/peek-overview/view.tsx b/web/core/components/issues/peek-overview/view.tsx
index c80212556cb..eec81333325 100644
--- a/web/core/components/issues/peek-overview/view.tsx
+++ b/web/core/components/issues/peek-overview/view.tsx
@@ -112,8 +112,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
       ? "fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
       : `w-full h-full`,
     !embedIssue && {
-      "bottom-0 right-0 top-0 w-full md:w-[50%] border-0 border-l": peekMode === "side-peek",
-      "size-5/6 top-[8.33%] left-[8.33%]": peekMode === "modal",
+      "bottom-0 left-0 top-0 w-full md:w-[50%] border-0 border-r": peekMode === "side-peek",
+      "size-5/6 top-[8.33%] right-[8.33%]": peekMode === "modal",
       "inset-0 m-4": peekMode === "full-screen",
     }
   );
@@ -250,7 +250,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         </div>
                       </div>
                       <div
-                        className={`h-full !w-[400px] flex-shrink-0 border-l border-custom-border-200 p-4 py-5 overflow-hidden vertical-scrollbar scrollbar-sm ${
+                        className={`h-full !w-[400px] flex-shrink-0 border-r border-custom-border-200 p-4 py-5 overflow-hidden vertical-scrollbar scrollbar-sm ${
                           is_archived ? "pointer-events-none" : ""
                         }`}
                       >
diff --git a/web/core/components/issues/sub-issues/issue-list-item.tsx b/web/core/components/issues/sub-issues/issue-list-item.tsx
index 4d10587fd7b..9a6109af5cd 100644
--- a/web/core/components/issues/sub-issues/issue-list-item.tsx
+++ b/web/core/components/issues/sub-issues/issue-list-item.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
+import { ChevronLeft, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
 import { EIssueServiceType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TIssue, TIssueServiceType } from "@plane/types";
@@ -104,7 +104,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
       >
         {issue && (
           <div
-            className="group relative flex min-h-11 h-full w-full items-center gap-3 pr-2 py-1 transition-all hover:bg-custom-background-90"
+            className="group relative flex min-h-11 h-full w-full items-center gap-3 pl-2 py-1 transition-all hover:bg-custom-background-90"
             style={{ paddingLeft: `${spacingLeft}px` }}
           >
             <div className="flex size-5 items-center justify-center flex-shrink-0">
@@ -129,7 +129,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                         setSubIssueHelpers(parentIssueId, "issue_visibility", issueId);
                       }}
                     >
-                      <ChevronRight
+                      <ChevronLeft
                         className={cn("size-3.5 transition-all", {
                           "rotate-90": subIssueHelpers.issue_visibility.includes(issue.id),
                         })}
diff --git a/web/core/components/issues/sub-issues/root.tsx b/web/core/components/issues/sub-issues/root.tsx
index 509ea713530..8e05cb7a565 100644
--- a/web/core/components/issues/sub-issues/root.tsx
+++ b/web/core/components/issues/sub-issues/root.tsx
@@ -4,7 +4,7 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // icons
-import { Plus, ChevronRight, Loader, Pencil } from "lucide-react";
+import { Plus, ChevronLeft, Loader, Pencil } from "lucide-react";
 // types
 import { IUser, TIssue } from "@plane/types";
 // ui
@@ -327,7 +327,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                       {subIssueHelpers.preview_loader.includes(parentIssueId) ? (
                         <Loader strokeWidth={2} className="h-3 w-3 animate-spin" />
                       ) : (
-                        <ChevronRight
+                        <ChevronLeft
                           className={cn("h-3 w-3 transition-all", {
                             "rotate-90": subIssueHelpers.issue_visibility.includes(parentIssueId),
                           })}
diff --git a/web/core/components/issues/title-input.tsx b/web/core/components/issues/title-input.tsx
index 463b81a7910..3c29fbecb1b 100644
--- a/web/core/components/issues/title-input.tsx
+++ b/web/core/components/issues/title-input.tsx
@@ -127,7 +127,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
         />
         <div
           className={cn(
-            "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+            "pointer-events-none absolute bottom-1 left-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
             {
               "opacity-100": isLengthVisible,
             }
diff --git a/web/core/components/issues/workspace-draft/root.tsx b/web/core/components/issues/workspace-draft/root.tsx
index 540839cd203..5d64438a4ce 100644
--- a/web/core/components/issues/workspace-draft/root.tsx
+++ b/web/core/components/issues/workspace-draft/root.tsx
@@ -100,7 +100,7 @@ export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer(
           ) : (
             <div
               className={cn(
-                "h-11 pl-6 p-3 text-sm font-medium bg-custom-background-100 border-b border-custom-border-200 transition-all",
+                "h-11 pr-6 p-3 text-sm font-medium bg-custom-background-100 border-b border-custom-border-200 transition-all",
                 {
                   "text-custom-primary-100 hover:text-custom-primary-200 cursor-pointer underline-offset-2 hover:underline":
                     paginationInfo?.next_page_results,
diff --git a/web/core/components/labels/create-label-modal.tsx b/web/core/components/labels/create-label-modal.tsx
index 6fcbfb6a208..7da4f9b8ae9 100644
--- a/web/core/components/labels/create-label-modal.tsx
+++ b/web/core/components/labels/create-label-modal.tsx
@@ -137,14 +137,14 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
                             >
                               {watch("color") && watch("color") !== "" && (
                                 <span
-                                  className="ml-2 h-5 w-5 rounded"
+                                  className="mr-2 h-5 w-5 rounded"
                                   style={{
                                     backgroundColor: watch("color") ?? "black",
                                   }}
                                 />
                               )}
                               <ChevronDown
-                                className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
+                                className={`mr-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                   open ? "text-gray-600" : "text-gray-400"
                                 }`}
                                 aria-hidden="true"
@@ -160,7 +160,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
                               leaveFrom="opacity-100 translate-y-0"
                               leaveTo="opacity-0 translate-y-1"
                             >
-                              <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
+                              <Popover.Panel className="fixed right-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
                                 <Controller
                                   name="color"
                                   control={control}
diff --git a/web/core/components/labels/create-update-label-inline.tsx b/web/core/components/labels/create-update-label-inline.tsx
index ddbe220b933..a65070b153f 100644
--- a/web/core/components/labels/create-update-label-inline.tsx
+++ b/web/core/components/labels/create-update-label-inline.tsx
@@ -151,7 +151,7 @@ export const CreateUpdateLabelInline = observer(
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                    <Popover.Panel className="absolute right-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
                       <Controller
                         name="color"
                         control={control}
@@ -203,7 +203,7 @@ export const CreateUpdateLabelInline = observer(
             {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
           </Button>
         </form>
-        {errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
+        {errors.name?.message && <p className="p-0.5 pr-8 text-sm text-red-500">{errors.name?.message}</p>}
       </>
     );
   })
diff --git a/web/core/components/labels/label-block/label-item-block.tsx b/web/core/components/labels/label-block/label-item-block.tsx
index 4068e7defc9..af7513cf1aa 100644
--- a/web/core/components/labels/label-block/label-item-block.tsx
+++ b/web/core/components/labels/label-block/label-item-block.tsx
@@ -65,7 +65,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
       {!disabled && (
         <div
           ref={actionSectionRef}
-          className={`absolute right-2.5 flex items-start gap-3.5 px-4 ${
+          className={`absolute left-2.5 flex items-start gap-3.5 px-4 ${
             isMenuActive || isLabelGroup
               ? "opacity-100"
               : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
diff --git a/web/core/components/labels/label-block/label-name.tsx b/web/core/components/labels/label-block/label-name.tsx
index 1eaf284981b..80982bd7bfd 100644
--- a/web/core/components/labels/label-block/label-name.tsx
+++ b/web/core/components/labels/label-block/label-name.tsx
@@ -10,7 +10,7 @@ export const LabelName = (props: ILabelName) => {
   const { name, color, isGroup } = props;
 
   return (
-    <div className="flex items-center gap-3 pr-20">
+    <div className="flex items-center gap-3 pl-20">
       {isGroup ? (
         <Component className="h-3.5 w-3.5" color={color} />
       ) : (
diff --git a/web/core/components/labels/label-drag-n-drop-HOC.tsx b/web/core/components/labels/label-drag-n-drop-HOC.tsx
index 8cc87d4c6d5..306087ea540 100644
--- a/web/core/components/labels/label-drag-n-drop-HOC.tsx
+++ b/web/core/components/labels/label-drag-n-drop-HOC.tsx
@@ -27,7 +27,7 @@ export const LabelDragPreview = (props: LabelDragPreviewProps) => {
   const { label, isGroup } = props;
 
   return (
-    <div className="py-3 pl-2 pr-4 border-[1px] border-custom-border-200 bg-custom-background-100">
+    <div className="py-3 pr-2 pl-4 border-[1px] border-custom-border-200 bg-custom-background-100">
       <LabelName name={label.name} color={label.color} isGroup={isGroup} />
     </div>
   );
diff --git a/web/core/components/labels/project-setting-label-group.tsx b/web/core/components/labels/project-setting-label-group.tsx
index 898931b3443..2d34ff921cb 100644
--- a/web/core/components/labels/project-setting-label-group.tsx
+++ b/web/core/components/labels/project-setting-label-group.tsx
@@ -78,7 +78,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
           >
             {({ open }) => (
               <>
-                <div className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
+                <div className={`py-3 pr-1 pl-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
                   <>
                     <div className="relative flex cursor-pointer items-center justify-between gap-2">
                       {isEditLabelForm ? (
@@ -121,7 +121,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                       leaveTo="transform opacity-0"
                     >
                       <Disclosure.Panel>
-                        <div className="ml-6">
+                        <div className="mr-6">
                           {labelChildren.map((child, index) => (
                             <div key={child.id} className={`group flex w-full items-center text-sm`}>
                               <div className="w-full">
diff --git a/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index a29334ff83f..35fb3300474 100644
--- a/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -185,7 +185,7 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
                     {loader && <Spinner className="h-3 w-3" />}
                   </>
                 )}
-                <Disclosure.Button className="ml-auto">
+                <Disclosure.Button className="mr-auto">
                   {open ? (
                     <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />
                   ) : (
diff --git a/web/core/components/modules/analytics-sidebar/root.tsx b/web/core/components/modules/analytics-sidebar/root.tsx
index cfa464d6316..5bb6326fe60 100644
--- a/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/web/core/components/modules/analytics-sidebar/root.tsx
@@ -8,7 +8,7 @@ import {
   ArchiveRestoreIcon,
   CalendarClock,
   ChevronDown,
-  ChevronRight,
+  ChevronLeft,
   Info,
   LinkIcon,
   Plus,
@@ -307,7 +307,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
               className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
               onClick={() => handleClose()}
             >
-              <ChevronRight className="h-3 w-3 stroke-2 text-white" />
+              <ChevronLeft className="h-3 w-3 stroke-2 text-white" />
             </button>
           </div>
           <div className="flex items-center gap-3.5">
diff --git a/web/core/components/modules/archived-modules/header.tsx b/web/core/components/modules/archived-modules/header.tsx
index 47687e2b4f1..1c2d2c3ee16 100644
--- a/web/core/components/modules/archived-modules/header.tsx
+++ b/web/core/components/modules/archived-modules/header.tsx
@@ -94,7 +94,7 @@ export const ArchivedModulesHeader: FC = observer(() => {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
             {
               "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
             }
diff --git a/web/core/components/modules/dropdowns/filters/lead.tsx b/web/core/components/modules/dropdowns/filters/lead.tsx
index 7b225dee9e9..45c6aa6b985 100644
--- a/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -86,7 +86,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/modules/dropdowns/filters/members.tsx b/web/core/components/modules/dropdowns/filters/members.tsx
index 752858547c5..a15605c18b4 100644
--- a/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/web/core/components/modules/dropdowns/filters/members.tsx
@@ -86,7 +86,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/modules/gantt-chart/blocks.tsx b/web/core/components/modules/gantt-chart/blocks.tsx
index ace0b7f8091..28d808a3763 100644
--- a/web/core/components/modules/gantt-chart/blocks.tsx
+++ b/web/core/components/modules/gantt-chart/blocks.tsx
@@ -56,7 +56,7 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
           )
         }
       >
-        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
+        <div className="absolute right-0 top-0 h-full w-full bg-custom-background-100/50" />
         <div
           className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100"
           style={{ left: `${SIDEBAR_WIDTH}px` }}
diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index 2204738cf3b..aeb25a93fb5 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -267,7 +267,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
           </div>
         </Card>
       </Link>
-      <div className="absolute right-4 bottom-[18px] flex items-center gap-1.5">
+      <div className="absolute left-4 bottom-[18px] flex items-center gap-1.5">
         {isEditingAllowed && (
           <FavoriteStar
             onClick={(e) => {
diff --git a/web/core/components/modules/module-peek-overview.tsx b/web/core/components/modules/module-peek-overview.tsx
index 02fb857478a..359e96851a2 100644
--- a/web/core/components/modules/module-peek-overview.tsx
+++ b/web/core/components/modules/module-peek-overview.tsx
@@ -41,7 +41,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
       {peekModule && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 absolute md:relative right-0 z-[9]"
+          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-r border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 absolute md:relative left-0 z-[9]"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/core/components/modules/module-view-header.tsx b/web/core/components/modules/module-view-header.tsx
index 149545113db..f64f87f9a18 100644
--- a/web/core/components/modules/module-view-header.tsx
+++ b/web/core/components/modules/module-view-header.tsx
@@ -109,7 +109,7 @@ export const ModuleViewHeader: FC = observer(() => {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
             {
               "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
             }
diff --git a/web/core/components/onboarding/create-workspace.tsx b/web/core/components/onboarding/create-workspace.tsx
index 7be711a1e98..b7e359ed184 100644
--- a/web/core/components/onboarding/create-workspace.tsx
+++ b/web/core/components/onboarding/create-workspace.tsx
@@ -151,7 +151,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
       <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
         <div className="space-y-1">
           <label
-            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:mr-0.5 after:text-red-500"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -195,7 +195,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
         </div>
         <div className="space-y-1">
           <label
-            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:mr-0.5 after:text-red-500"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -213,7 +213,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
             render={({ field: { value, ref, onChange } }) => (
               <div
                 className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
-                  invalidSlug ? "border-red-500" : "border-onboarding-border-100"
+                  invalidSlug ? "border-led-500" : "border-onboarding-border-100"
                 }`}
               >
                 <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
@@ -247,7 +247,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
         <hr className="w-full border-onboarding-border-100" />
         <div className="space-y-1">
           <label
-            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:mr-0.5 after:text-red-500"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
diff --git a/web/core/components/onboarding/header.tsx b/web/core/components/onboarding/header.tsx
index 8718ae18249..64eb14271e1 100644
--- a/web/core/components/onboarding/header.tsx
+++ b/web/core/components/onboarding/header.tsx
@@ -16,7 +16,7 @@ export const OnboardingHeader: FC<OnboardingHeaderProps> = (props) => {
   return (
     <div className="flex w-full items-center justify-between font-semibold ">
       <div className="flex items-center gap-x-2">
-        <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-3" />
+        <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="ml-3" />
         <OnboardingStepIndicator currentStep={currentStep} totalSteps={totalSteps} />
       </div>
     </div>
diff --git a/web/core/components/onboarding/invite-members.tsx b/web/core/components/onboarding/invite-members.tsx
index 34887be715b..66c12f6bf32 100644
--- a/web/core/components/onboarding/invite-members.tsx
+++ b/web/core/components/onboarding/invite-members.tsx
@@ -147,7 +147,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
   return (
     <div>
       <div className="group relative grid grid-cols-10 gap-4">
-        <div className="col-span-6 ml-8">
+        <div className="col-span-6 mr-8">
           <Controller
             control={control}
             name={`emails.${index}.email`}
@@ -176,7 +176,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
             )}
           />
         </div>
-        <div className="col-span-4 mr-8">
+        <div className="col-span-4 ml-8">
           <Controller
             control={control}
             name={`emails.${index}.role`}
@@ -253,10 +253,10 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
         {fields.length > 1 && (
           <button
             type="button"
-            className="absolute right-0 hidden place-items-center self-center rounded group-hover:grid"
+            className="absolute left-0 hidden place-items-center self-center rounded group-hover:grid"
             onClick={() => remove(index)}
           >
-            <XCircle className="h-5 w-5 pl-0.5 text-custom-text-400" />
+            <XCircle className="h-5 w-5 pr-0.5 text-custom-text-400" />
           </button>
         )}
       </div>
diff --git a/web/core/components/onboarding/profile-setup.tsx b/web/core/components/onboarding/profile-setup.tsx
index 76cf98e9139..7b9d8787cb2 100644
--- a/web/core/components/onboarding/profile-setup.tsx
+++ b/web/core/components/onboarding/profile-setup.tsx
@@ -319,7 +319,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                     {!userAvatar || userAvatar === "" ? (
                       <div className="flex flex-col items-center justify-between">
                         <div className="relative h-14 w-14 overflow-hidden">
-                          <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
+                          <div className="absolute right-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
                             {watch("first_name")[0] ?? "R"}
                           </div>
                         </div>
@@ -328,10 +328,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                         </div>
                       </div>
                     ) : (
-                      <div className="relative mr-3 h-16 w-16 overflow-hidden">
+                      <div className="relative ml-3 h-16 w-16 overflow-hidden">
                         <img
                           src={getFileURL(userAvatar ?? "")}
-                          className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                          className="absolute right-0 top-0 h-full w-full rounded-full object-cover"
                           onClick={() => setIsImageUploadModalOpen(true)}
                           alt={user?.display_name}
                         />
@@ -342,7 +342,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div className="space-y-1">
                     <label
-                      className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                      className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:mr-0.5 after:text-red-500"
                       htmlFor="first_name"
                     >
                       First name
@@ -377,7 +377,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                   </div>
                   <div className="space-y-1">
                     <label
-                      className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                      className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:mr-0.5 after:text-red-500"
                       htmlFor="last_name"
                     >
                       Last name
@@ -434,19 +434,19 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                               ref={ref}
                               hasError={Boolean(errors.password)}
                               placeholder="New password..."
-                              className="w-full border-[0.5px] border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                              className="w-full border-[0.5px] border-onboarding-border-100 pl-12 placeholder:text-onboarding-text-400"
                               onFocus={() => setIsPasswordInputFocused(true)}
                               onBlur={() => setIsPasswordInputFocused(false)}
                               autoComplete="on"
                             />
                             {showPassword.password ? (
                               <EyeOff
-                                className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                                className="absolute left-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
                                 onClick={() => handleShowPassword("password")}
                               />
                             ) : (
                               <Eye
-                                className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                                className="absolute left-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
                                 onClick={() => handleShowPassword("password")}
                               />
                             )}
@@ -477,16 +477,16 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                               ref={ref}
                               hasError={Boolean(errors.confirm_password)}
                               placeholder={t("auth.common.password.confirm_password.placeholder")}
-                              className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                              className="w-full border-onboarding-border-100 pl-12 placeholder:text-onboarding-text-400"
                             />
                             {showPassword.retypePassword ? (
                               <EyeOff
-                                className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                                className="absolute left-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
                                 onClick={() => handleShowPassword("retypePassword")}
                               />
                             ) : (
                               <Eye
-                                className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                                className="absolute left-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
                                 onClick={() => handleShowPassword("retypePassword")}
                               />
                             )}
@@ -507,7 +507,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
               <>
                 <div className="space-y-1">
                   <label
-                    className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:mr-0.5 after:text-red-500"
                     htmlFor="role"
                   >
                     What role are you working on? Choose one.
@@ -538,7 +538,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                 </div>
                 <div className="space-y-1">
                   <label
-                    className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:mr-0.5 after:text-red-500"
                     htmlFor="use_case"
                   >
                     What is your domain expertise? Choose one.
diff --git a/web/core/components/onboarding/switch-account-dropdown.tsx b/web/core/components/onboarding/switch-account-dropdown.tsx
index 7ccdb117f38..2187a0fac0a 100644
--- a/web/core/components/onboarding/switch-account-dropdown.tsx
+++ b/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -34,7 +34,7 @@ export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((
   return (
     <div className="flex w-full shrink-0 justify-end">
       <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
-      <div className="flex items-center gap-x-2 pr-4 z-10">
+      <div className="flex items-center gap-x-2 pl-4 z-10">
         {user?.avatar_url && (
           <Avatar
             name={displayName}
@@ -58,7 +58,7 @@ export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((
             leaveFrom="transform scale-100 opacity-100"
             leaveTo="transform scale-95 opacity-0"
           >
-            <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
+            <Menu.Items className="absolute z-10 left-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
               <Menu.Item
                 as="button"
                 type="button"
diff --git a/web/core/components/onboarding/tour/root.tsx b/web/core/components/onboarding/tour/root.tsx
index 2c49934159e..b92376b536a 100644
--- a/web/core/components/onboarding/tour/root.tsx
+++ b/web/core/components/onboarding/tour/root.tsx
@@ -137,7 +137,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
         <div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-custom-background-100 sm:h-3/4 md:w-1/2 lg:w-3/5">
           <button
             type="button"
-            className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
+            className="fixed left-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:left-[24%] lg:left-[19%]"
             onClick={onComplete}
           >
             <X className="h-3 w-3 text-custom-text-100" />
diff --git a/web/core/components/onboarding/tour/sidebar.tsx b/web/core/components/onboarding/tour/sidebar.tsx
index 8668b95d01b..622d7364cca 100644
--- a/web/core/components/onboarding/tour/sidebar.tsx
+++ b/web/core/components/onboarding/tour/sidebar.tsx
@@ -48,7 +48,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
       {sidebarOptions.map((option) => (
         <h5
           key={option.key}
-          className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-sm font-medium capitalize ${
+          className={`flex cursor-pointer items-center gap-2 border-r-[3px] py-0.5 pr-3 pl-2 text-sm font-medium capitalize ${
             step === option.key
               ? "border-custom-primary-100 text-custom-primary-100"
               : "border-transparent text-custom-text-200"
diff --git a/web/core/components/page-views/workspace-dashboard.tsx b/web/core/components/page-views/workspace-dashboard.tsx
index 19d3590b07f..24d1681ecbc 100644
--- a/web/core/components/page-views/workspace-dashboard.tsx
+++ b/web/core/components/page-views/workspace-dashboard.tsx
@@ -73,7 +73,7 @@ export const WorkspaceDashboardView = observer(() => {
   return (
     <>
       {currentUserProfile && !currentUserProfile.is_tour_completed && (
-        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+        <div className="fixed right-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
           <TourRoot onComplete={handleTourCompleted} />
         </div>
       )}
diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
index 72533c3dc04..0f696590d55 100644
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@@ -184,7 +184,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             ref={editorRef}
             containerClassName="h-full p-0 pb-64"
             displayConfig={displayConfig}
-            editorClassName="pl-10"
+            editorClassName="pr-10"
             mentionHandler={{
               searchCallback: async (query) => {
                 const res = await fetchMentions(query);
diff --git a/web/core/components/pages/editor/header/toolbar.tsx b/web/core/components/pages/editor/header/toolbar.tsx
index 6e4ffdd5f85..f8bcaa6823d 100644
--- a/web/core/components/pages/editor/header/toolbar.tsx
+++ b/web/core/components/pages/editor/header/toolbar.tsx
@@ -106,7 +106,7 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
             <ChevronDown className="flex-shrink-0 size-3" />
           </span>
         }
-        className="pr-2"
+        className="pl-2"
         placement="bottom-start"
         closeOnSelect
         maxHeight="lg"
@@ -147,7 +147,7 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
         }
       />
       {Object.keys(toolbarItems).map((key) => (
-        <div key={key} className="flex items-center gap-0.5 px-2 first:pl-0 last:pr-0">
+        <div key={key} className="flex items-center gap-0.5 px-2 first:pr-0 last:pl-0">
           {toolbarItems[key].map((item) => (
             <ToolbarButton
               key={item.renderKey}
diff --git a/web/core/components/pages/editor/summary/heading-components.tsx b/web/core/components/pages/editor/summary/heading-components.tsx
index 5ed1752de02..b5936a14418 100644
--- a/web/core/components/pages/editor/summary/heading-components.tsx
+++ b/web/core/components/pages/editor/summary/heading-components.tsx
@@ -20,7 +20,7 @@ export const OutlineHeading2 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-2 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
+    className="mr-2 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>
@@ -30,7 +30,7 @@ export const OutlineHeading3 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-4 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
+    className="mr-4 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>
diff --git a/web/core/components/pages/editor/title.tsx b/web/core/components/pages/editor/title.tsx
index 9e85c33d3bc..3308ebc6245 100644
--- a/web/core/components/pages/editor/title.tsx
+++ b/web/core/components/pages/editor/title.tsx
@@ -32,7 +32,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   });
 
   return (
-    <div className="relative w-full flex-shrink-0 md:pl-5 px-4">
+    <div className="relative w-full flex-shrink-0 md:pr-5 px-4">
       {readOnly ? (
         <h6
           className={cn(
@@ -65,7 +65,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
           />
           <div
             className={cn(
-              "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+              "pointer-events-none absolute bottom-1 left-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
               {
                 "opacity-100": isLengthVisible,
               }
diff --git a/web/core/components/pages/loaders/page-content-loader.tsx b/web/core/components/pages/loaders/page-content-loader.tsx
index 25a4d615320..ccffa07b77d 100644
--- a/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/web/core/components/pages/loaders/page-content-loader.tsx
@@ -14,7 +14,7 @@ export const PageContentLoader = () => (
 
       {/* editor options */}
       <div className="w-full relative flex items-center divide-x divide-custom-border-100">
-        <Loader className="relative flex items-center gap-1 pr-2">
+        <Loader className="relative flex items-center gap-1 pl-2">
           <Loader.Item width="26px" height="26px" />
           <Loader.Item width="26px" height="26px" />
           <Loader.Item width="26px" height="26px" />
@@ -31,7 +31,7 @@ export const PageContentLoader = () => (
           <Loader.Item width="26px" height="26px" />
           <Loader.Item width="26px" height="26px" />
         </Loader>
-        <Loader className="relative flex items-center gap-1 pl-2">
+        <Loader className="relative flex items-center gap-1 pr-2">
           <Loader.Item width="26px" height="26px" />
           <Loader.Item width="26px" height="26px" />
         </Loader>
diff --git a/web/core/components/pages/loaders/page-loader.tsx b/web/core/components/pages/loaders/page-loader.tsx
index 974c28f6b8c..9051645ceb4 100644
--- a/web/core/components/pages/loaders/page-loader.tsx
+++ b/web/core/components/pages/loaders/page-loader.tsx
@@ -11,7 +11,7 @@ export const PageLoader: React.FC = (props) => {
       <div className="px-3 border-b border-custom-border-100 py-3">
         <Loader className="relative flex items-center gap-2">
           <Loader.Item width="200px" height="30px" />
-          <div className="relative flex items-center gap-2 ml-auto">
+          <div className="relative flex items-center gap-2 mr-auto">
             <Loader.Item width="100px" height="30px" />
             <Loader.Item width="100px" height="30px" />
           </div>
@@ -21,7 +21,7 @@ export const PageLoader: React.FC = (props) => {
         {range(10).map((i) => (
           <Loader key={i} className="relative flex items-center gap-2 p-3 py-4 border-b border-custom-border-100">
             <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
-            <div className="ml-auto relative flex items-center gap-2">
+            <div className="mr-auto relative flex items-center gap-2">
               <Loader.Item width="60px" height="22px" />
               <Loader.Item width="22px" height="22px" />
               <Loader.Item width="22px" height="22px" />
diff --git a/web/core/components/pages/version/editor.tsx b/web/core/components/pages/version/editor.tsx
index d201232904d..ca57bbcfd78 100644
--- a/web/core/components/pages/version/editor.tsx
+++ b/web/core/components/pages/version/editor.tsx
@@ -100,7 +100,7 @@ export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props
       containerClassName="p-0 pb-64 border-none"
       disabledExtensions={disabledExtensions}
       displayConfig={displayConfig}
-      editorClassName="pl-10"
+      editorClassName="pr-10"
       fileHandler={getReadOnlyEditorFileHandlers({
         projectId: projectId?.toString() ?? "",
         workspaceId: workspaceDetails?.id ?? "",
diff --git a/web/core/components/pages/version/sidebar-root.tsx b/web/core/components/pages/version/sidebar-root.tsx
index 793d7fed90f..938c821a946 100644
--- a/web/core/components/pages/version/sidebar-root.tsx
+++ b/web/core/components/pages/version/sidebar-root.tsx
@@ -16,7 +16,7 @@ export const PageVersionsSidebarRoot: React.FC<Props> = (props) => {
   const { activeVersion, fetchAllVersions, handleClose, isOpen, pageId } = props;
 
   return (
-    <div className="flex-shrink-0 py-4 border-l border-custom-border-200 flex flex-col">
+    <div className="flex-shrink-0 py-4 border-r border-custom-border-200 flex flex-col">
       <div className="px-6 flex items-center justify-between gap-2">
         <h5 className="text-base font-semibold">Version history</h5>
         <button
diff --git a/web/core/components/profile/form.tsx b/web/core/components/profile/form.tsx
index 52a39955bf6..82a4d37760f 100644
--- a/web/core/components/profile/form.tsx
+++ b/web/core/components/profile/form.tsx
@@ -171,7 +171,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
               className="h-44 w-full rounded-lg object-cover"
               alt={currentUser?.first_name ?? "Cover image"}
             />
-            <div className="absolute -bottom-6 left-6 flex items-end justify-between">
+            <div className="absolute -bottom-6 right-6 flex items-end justify-between">
               <div className="flex gap-3">
                 <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
                   <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
@@ -183,7 +183,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                       <div className="relative h-16 w-16 overflow-hidden">
                         <img
                           src={getFileURL(userAvatar)}
-                          className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                          className="absolute right-0 top-0 h-full w-full rounded-lg object-cover"
                           onClick={() => setIsImageUploadModalOpen(true)}
                           alt={currentUser?.display_name}
                           role="button"
@@ -194,7 +194,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                 </div>
               </div>
             </div>
-            <div className="absolute bottom-3 right-3 flex">
+            <div className="absolute bottom-3 left-3 flex">
               <Controller
                 control={control}
                 name="cover_image_url"
@@ -241,7 +241,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                       ref={ref}
                       hasError={Boolean(errors.first_name)}
                       placeholder="Enter your first name"
-                      className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
+                      className={`w-full rounded-md ${errors.first_name ? "border-led-500" : ""}`}
                       maxLength={24}
                       autoComplete="on"
                     />
@@ -300,7 +300,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                       ref={ref}
                       hasError={Boolean(errors?.display_name)}
                       placeholder="Enter your display name"
-                      className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
+                      className={`w-full ${errors?.display_name ? "border-led-500" : ""}`}
                       maxLength={24}
                     />
                   )}
@@ -328,7 +328,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                       hasError={Boolean(errors.email)}
                       placeholder="Enter your email"
                       className={`w-full cursor-not-allowed rounded-md !bg-custom-background-90 ${
-                        errors.email ? "border-red-500" : ""
+                        errors.email ? "border-led-500" : ""
                       }`}
                       autoComplete="on"
                       disabled
@@ -350,7 +350,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                       value={value}
                       onChange={onChange}
                       label={value ? t(value) : "Select your role"}
-                      buttonClassName={errors.role ? "border-red-500" : "border-none"}
+                      buttonClassName={errors.role ? "border-led-500" : "border-none"}
                       className="rounded-md border-[0.5px] !border-custom-border-200"
                       optionsClassName="w-full"
                       input
@@ -406,7 +406,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                       value={value}
                       label={value ? getLanguageLabel(value) : "Select a language"}
                       onChange={onChange}
-                      buttonClassName={errors.language ? "border-red-500" : "border-none"}
+                      buttonClassName={errors.language ? "border-led-500" : "border-none"}
                       className="rounded-md border-[0.5px] !border-custom-border-200"
                       optionsClassName="w-full"
                       input
diff --git a/web/core/components/profile/notification/email-notification-form.tsx b/web/core/components/profile/notification/email-notification-form.tsx
index badd361a041..cddb57c6939 100644
--- a/web/core/components/profile/notification/email-notification-form.tsx
+++ b/web/core/components/profile/notification/email-notification-form.tsx
@@ -104,7 +104,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
             />
           </div>
         </div>
-        <div className="flex gap-2 items-center border-0 border-l-[3px] border-custom-border-300 pl-3">
+        <div className="flex gap-2 items-center border-0 border-r-[3px] border-custom-border-300 pr-3">
           <div className="grow">
             <div className="pb-1 text-base font-medium text-custom-text-100">{t("issue_completed")}</div>
             <div className="text-sm font-normal text-custom-text-300">{t("issue_completed_description")}</div>
diff --git a/web/core/components/profile/sidebar.tsx b/web/core/components/profile/sidebar.tsx
index d3e007ea370..eaa1ebafd7d 100644
--- a/web/core/components/profile/sidebar.tsx
+++ b/web/core/components/profile/sidebar.tsx
@@ -84,7 +84,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
   return (
     <div
       className={cn(
-        `vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 transition-all md:relative md:w-[300px]`,
+        `vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-r border-custom-border-100 bg-custom-sidebar-background-100 transition-all md:relative md:w-[300px]`,
         className
       )}
       style={profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
@@ -93,7 +93,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
         <>
           <div className="relative h-[110px]">
             {currentUser?.id === userId && (
-              <div className="absolute right-3.5 top-3.5 grid h-5 w-5 place-items-center rounded bg-white">
+              <div className="absolute left-3.5 top-3.5 grid h-5 w-5 place-items-center rounded bg-white">
                 <Link href="/profile">
                   <span className="grid place-items-center text-black">
                     <Pencil className="h-3 w-3" />
@@ -110,7 +110,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
               alt={userData?.display_name}
               className="h-[110px] w-full object-cover"
             />
-            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded">
+            <div className="absolute -bottom-[26px] right-5 h-[52px] w-[52px] rounded">
               {userData?.avatar_url && userData?.avatar_url !== "" ? (
                 <img
                   src={getFileURL(userData?.avatar_url)}
@@ -192,7 +192,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                           leaveFrom="transform opacity-100"
                           leaveTo="transform opacity-0"
                         >
-                          <Disclosure.Panel className="mt-5 pl-9">
+                          <Disclosure.Panel className="mt-5 pr-9">
                             {totalIssues > 0 && (
                               <div className="flex items-center gap-0.5">
                                 <div
diff --git a/web/core/components/project-states/state-item-title.tsx b/web/core/components/project-states/state-item-title.tsx
index e350d71ceed..02e033f65f4 100644
--- a/web/core/components/project-states/state-item-title.tsx
+++ b/web/core/components/project-states/state-item-title.tsx
@@ -32,7 +32,7 @@ export const StateItemTitle = observer((props: StateItemTitleProps) => {
       <div className="flex items-center gap-1 px-1">
         {/* draggable indicator */}
         {!disabled && stateCount != 1 && (
-          <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute -left-1.5 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
+          <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute -right-1.5 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
             <GripVertical className="w-3 h-3" />
           </div>
         )}
diff --git a/web/core/components/project/card.tsx b/web/core/components/project/card.tsx
index 73b7c641df7..dad5586fa05 100644
--- a/web/core/components/project/card.tsx
+++ b/web/core/components/project/card.tsx
@@ -219,7 +219,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                 "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
             )}
             alt={project.name}
-            className="absolute left-0 top-0 h-full w-full rounded-t object-cover"
+            className="absolute right-0 top-0 h-full w-full rounded-t object-cover"
           />
 
           <div className="absolute bottom-4 z-[1] flex h-10 w-full items-center justify-between gap-3 px-4">
diff --git a/web/core/components/project/confirm-project-member-remove.tsx b/web/core/components/project/confirm-project-member-remove.tsx
index d4a394e67d2..97ac21962aa 100644
--- a/web/core/components/project/confirm-project-member-remove.tsx
+++ b/web/core/components/project/confirm-project-member-remove.tsx
@@ -80,7 +80,7 @@ export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <div className="mt-3 text-center sm:mr-4 sm:mt-0 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         {isCurrentUser ? "Leave project?" : `Remove ${data?.display_name}?`}
                       </Dialog.Title>
diff --git a/web/core/components/project/create/common-attributes.tsx b/web/core/components/project/create/common-attributes.tsx
index 97807e09c57..bc5aa76b70e 100644
--- a/web/core/components/project/create/common-attributes.tsx
+++ b/web/core/components/project/create/common-attributes.tsx
@@ -102,7 +102,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
               onChange={handleIdentifierChange(onChange)}
               hasError={Boolean(errors.identifier)}
               placeholder={t("project_id")}
-              className={cn("w-full text-xs focus:border-blue-400 pr-7", {
+              className={cn("w-full text-xs focus:border-blue-400 pl-7", {
                 uppercase: value,
               })}
               tabIndex={getIndex("identifier")}
@@ -113,9 +113,9 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
           isMobile={isMobile}
           tooltipContent={t("project_id_tooltip_content")}
           className="text-sm"
-          position="right-top"
+          position="left-top"
         >
-          <Info className="absolute right-2 top-2.5 h-3 w-3 text-custom-text-400" />
+          <Info className="absolute left-2 top-2.5 h-3 w-3 text-custom-text-400" />
         </Tooltip>
         <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
       </div>
diff --git a/web/core/components/project/create/header.tsx b/web/core/components/project/create/header.tsx
index 2353b36d172..fe27af775ec 100644
--- a/web/core/components/project/create/header.tsx
+++ b/web/core/components/project/create/header.tsx
@@ -34,17 +34,17 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
       {coverImage && (
         <img
           src={getFileURL(coverImage)}
-          className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+          className="absolute right-0 top-0 h-full w-full rounded-lg object-cover"
           alt={t("project_cover_image_alt")}
         />
       )}
 
-      <div className="absolute right-2 top-2 p-2">
+      <div className="absolute left-2 top-2 p-2">
         <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
           <X className="h-5 w-5 text-white" />
         </button>
       </div>
-      <div className="absolute bottom-2 right-2">
+      <div className="absolute bottom-2 left-2">
         <Controller
           name="cover_image_url"
           control={control}
@@ -59,7 +59,7 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
           )}
         />
       </div>
-      <div className="absolute -bottom-[22px] left-3">
+      <div className="absolute -bottom-[22px] right-3">
         <Controller
           name="logo_props"
           control={control}
diff --git a/web/core/components/project/dropdowns/filters/lead.tsx b/web/core/components/project/dropdowns/filters/lead.tsx
index 7b225dee9e9..45c6aa6b985 100644
--- a/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/web/core/components/project/dropdowns/filters/lead.tsx
@@ -86,7 +86,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/project/dropdowns/filters/members.tsx b/web/core/components/project/dropdowns/filters/members.tsx
index 752858547c5..a15605c18b4 100644
--- a/web/core/components/project/dropdowns/filters/members.tsx
+++ b/web/core/components/project/dropdowns/filters/members.tsx
@@ -86,7 +86,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
                 {sortedOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="mr-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === sortedOptions.length ? "View less" : "View all"}
diff --git a/web/core/components/project/form.tsx b/web/core/components/project/form.tsx
index f87f8ba8436..bfb151b673a 100644
--- a/web/core/components/project/form.tsx
+++ b/web/core/components/project/form.tsx
@@ -322,9 +322,9 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 isMobile={isMobile}
                 tooltipContent="Helps you identify work items in the project uniquely. Max 5 characters."
                 className="text-sm"
-                position="right-top"
+                position="left-top"
               >
-                <Info className="absolute right-2 top-2.5 h-4 w-4 text-custom-text-400" />
+                <Info className="absolute left-2 top-2.5 h-4 w-4 text-custom-text-400" />
               </Tooltip>
             </div>
             <span className="text-xs text-red-500">
diff --git a/web/core/components/project/member-list.tsx b/web/core/components/project/member-list.tsx
index c6bf34640e1..d3f9679f45c 100644
--- a/web/core/components/project/member-list.tsx
+++ b/web/core/components/project/member-list.tsx
@@ -51,7 +51,7 @@ export const ProjectMemberList: React.FC = observer(() => {
 
       <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5 overflow-x-hidden">
         <h4 className="text-xl font-medium">{t("members")}</h4>
-        <div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
+        <div className="mr-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
           <Search className="h-3.5 w-3.5" />
           <input
             className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none placeholder:text-custom-text-400"
diff --git a/web/core/components/project/publish-project/modal.tsx b/web/core/components/project/publish-project/modal.tsx
index 5496e699398..d751a5da052 100644
--- a/web/core/components/project/publish-project/modal.tsx
+++ b/web/core/components/project/publish-project/modal.tsx
@@ -192,7 +192,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
           <div className="px-5 space-y-4">
             {project.anchor && projectPublishSettings && (
               <>
-                <div className="bg-custom-background-80 border border-custom-border-300 rounded-md py-1.5 pl-4 pr-1 flex items-center justify-between gap-2">
+                <div className="bg-custom-background-80 border border-custom-border-300 rounded-md py-1.5 pr-4 pl-1 flex items-center justify-between gap-2">
                   <a
                     href={publishLink}
                     className="text-sm text-custom-text-200 truncate"
diff --git a/web/core/components/project/search-projects.tsx b/web/core/components/project/search-projects.tsx
index 412e979e9a0..0f9abf3ddc5 100644
--- a/web/core/components/project/search-projects.tsx
+++ b/web/core/components/project/search-projects.tsx
@@ -49,7 +49,7 @@ export const ProjectSearch: FC = observer(() => {
       )}
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
           {
             "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
           }
diff --git a/web/core/components/project/send-project-invitation-modal.tsx b/web/core/components/project/send-project-invitation-modal.tsx
index e7d0813c546..911d9fe593d 100644
--- a/web/core/components/project/send-project-invitation-modal.tsx
+++ b/web/core/components/project/send-project-invitation-modal.tsx
@@ -342,7 +342,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <button
                       type="button"
-                      className="flex items-center gap-2 bg-transparent py-2 pr-3 text-sm font-medium text-custom-primary outline-custom-primary"
+                      className="flex items-center gap-2 bg-transparent py-2 pl-3 text-sm font-medium text-custom-primary outline-custom-primary"
                       onClick={appendField}
                     >
                       <Plus className="h-4 w-4" />
diff --git a/web/core/components/project/settings/archive-project/selection.tsx b/web/core/components/project/settings/archive-project/selection.tsx
index 60963ead76b..57fd7ffb57c 100644
--- a/web/core/components/project/settings/archive-project/selection.tsx
+++ b/web/core/components/project/settings/archive-project/selection.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { ChevronRight, ChevronUp } from "lucide-react";
+import { ChevronLeft, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
 import { IProject } from "@plane/types";
@@ -22,7 +22,7 @@ export const ArchiveProjectSelection: React.FC<IArchiveProject> = (props) => {
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
             <span className="text-xl tracking-tight">Archive project</span>
-            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronLeft className="h-5 w-5" />}
           </Disclosure.Button>
           <Transition
             show={open}
diff --git a/web/core/components/project/settings/delete-project-section.tsx b/web/core/components/project/settings/delete-project-section.tsx
index d425af53e42..94de5a9a7b5 100644
--- a/web/core/components/project/settings/delete-project-section.tsx
+++ b/web/core/components/project/settings/delete-project-section.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { ChevronRight, ChevronUp } from "lucide-react";
+import { ChevronLeft, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
 import { IProject } from "@plane/types";
@@ -22,7 +22,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
             <span className="text-xl tracking-tight">Delete project</span>
-            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronLeft className="h-5 w-5" />}
           </Disclosure.Button>
 
           <Transition
diff --git a/web/core/components/project/settings/features-list.tsx b/web/core/components/project/settings/features-list.tsx
index f31f5a754e9..f320e748c45 100644
--- a/web/core/components/project/settings/features-list.tsx
+++ b/web/core/components/project/settings/features-list.tsx
@@ -101,7 +101,7 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
                       size="sm"
                     />
                   </div>
-                  <div className="pl-14">
+                  <div className="pr-14">
                     {currentProjectDetails?.[featureItem.property as keyof IProject] &&
                       featureItem.renderChildren?.(currentProjectDetails, workspaceSlug)}
                   </div>
diff --git a/web/core/components/project/settings/member-columns.tsx b/web/core/components/project/settings/member-columns.tsx
index f3b6ec956c7..99b19d6779c 100644
--- a/web/core/components/project/settings/member-columns.tsx
+++ b/web/core/components/project/settings/member-columns.tsx
@@ -51,7 +51,7 @@ export const NameColumn: React.FC<NameProps> = (props) => {
                   <span className="relative flex h-6 w-6 items-center justify-center rounded-full p-4 capitalize text-white">
                     <img
                       src={getFileURL(avatar_url)}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      className="absolute right-0 top-0 h-full w-full rounded-full object-cover"
                       alt={display_name || email}
                     />
                   </span>
@@ -163,7 +163,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
                   <span>{ROLE[rowData.role]}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
+              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-led-500" : "border-none"}`}
               className="rounded-md p-0 w-32"
               optionsClassName="w-full"
               input
diff --git a/web/core/components/stickies/action-bar.tsx b/web/core/components/stickies/action-bar.tsx
index 9b3789ea2ba..c37653f1998 100644
--- a/web/core/components/stickies/action-bar.tsx
+++ b/web/core/components/stickies/action-bar.tsx
@@ -73,7 +73,7 @@ export const StickyActionBar = observer(() => {
                   stickyId={newSticky ? activeStickyId : recentStickyId || ""}
                 />
                 <div
-                  className="absolute top-0 right-0 h-full w-full"
+                  className="absolute top-0 left-0 h-full w-full"
                   style={{
                     background: `linear-gradient(to top, ${recentStickyBackgroundColor}, transparent)`,
                   }}
@@ -120,7 +120,7 @@ export const StickyActionBar = observer(() => {
 
       <div
         className={cn(
-          "absolute bottom-16 right-0 z-[20]",
+          "absolute bottom-16 left-0 z-[20]",
           "transform transition-all duration-300 ease-in-out",
           newSticky || showRecentSticky ? "translate-y-[0%] min-h-[300px]" : "translate-y-[100%] h-0"
         )}
diff --git a/web/core/components/stickies/modal/search.tsx b/web/core/components/stickies/modal/search.tsx
index 22499c03a8b..a22b83386cd 100644
--- a/web/core/components/stickies/modal/search.tsx
+++ b/web/core/components/stickies/modal/search.tsx
@@ -48,7 +48,7 @@ export const StickySearch: FC = observer(() => {
   );
 
   return (
-    <div className="flex items-center mr-2 my-auto">
+    <div className="flex items-center ml-2 my-auto">
       {!isSearchOpen && (
         <button
           type="button"
@@ -63,7 +63,7 @@ export const StickySearch: FC = observer(() => {
       )}
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
           {
             "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
           }
diff --git a/web/core/components/stickies/modal/stickies.tsx b/web/core/components/stickies/modal/stickies.tsx
index 1cc16bfc6d8..712c7f327c8 100644
--- a/web/core/components/stickies/modal/stickies.tsx
+++ b/web/core/components/stickies/modal/stickies.tsx
@@ -45,7 +45,7 @@ export const Stickies = observer((props: TProps) => {
           >
             <Plus className="size-4 my-auto" /> <span>Add sticky</span>
             {creatingSticky && (
-              <div className="flex items-center justify-center ml-2">
+              <div className="flex items-center justify-center mr-2">
                 <div
                   className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-custom-primary-100`}
                   role="status"
diff --git a/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx b/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
index e46c981f665..fc09fd88abd 100644
--- a/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
+++ b/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
@@ -16,7 +16,7 @@ export const StickyItemDragHandle: FC<Props> = observer((props) => {
   return (
     <div
       className={cn(
-        "hidden group-hover/sticky:flex absolute top-3 left-1/2 -translate-x-1/2 items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2 rotate-90",
+        "hidden group-hover/sticky:flex absolute top-3 right-1/2 -translate-x-1/2 items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab ml-2 rotate-90",
         {
           "cursor-grabbing": isDragging,
         }
diff --git a/web/core/components/ui/empty-space.tsx b/web/core/components/ui/empty-space.tsx
index 73fc6ba01a6..a08f5263965 100644
--- a/web/core/components/ui/empty-space.tsx
+++ b/web/core/components/ui/empty-space.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import Link from "next/link";
 // react
 // icons
-import { ChevronRight } from "lucide-react";
+import { ChevronLeft } from "lucide-react";
 
 type EmptySpaceProps = {
   title: string;
@@ -62,7 +62,7 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
         {description ? <div className="text-sm">{description}</div> : null}
       </div>
       <div className="flex-shrink-0 self-center">
-        <ChevronRight className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
+        <ChevronLeft className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
       </div>
     </div>
   );
diff --git a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index 50a5ac56aee..d8885d6c79d 100644
--- a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -16,7 +16,7 @@ export const GanttLayoutLoader = () => (
       <span className="h-6 w-12 bg-custom-background-80 rounded" />
     </div>
     <div className="flex h-full">
-      <div className="h-full w-[25.5rem] border-r border-custom-border-200">
+      <div className="h-full w-[25.5rem] border-l border-custom-border-200">
         <Row className="flex items-end h-[3.75rem] py-2 border-b border-custom-border-200">
           <div className="flex items-center justify-between w-full">
             <span className="h-5 w-14 bg-custom-background-80 rounded" />
@@ -32,7 +32,7 @@ export const GanttLayoutLoader = () => (
           ))}
         </Row>
       </div>
-      <div className="h-full w-full border-r border-custom-border-200">
+      <div className="h-full w-full border-l border-custom-border-200">
         <div className="flex flex-col justify-between gap-2 h-[3.75rem] py-1.5 px-4 border-b border-custom-border-200">
           <div className="flex items-center justify-start">
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx b/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
index 169481f5dcc..0a15222d683 100644
--- a/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
@@ -7,7 +7,7 @@ import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export const InboxLayoutLoader = () => (
   <div className="relative w-full h-full flex overflow-hidden">
-    <div className="flex-shrink-0 w-2/6 h-full border-r border-custom-border-300">
+    <div className="flex-shrink-0 w-2/6 h-full border-l border-custom-border-300">
       <InboxSidebarLoader />
     </div>
     <div className="w-4/6">
diff --git a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
index c1b00d0ad37..d0aabbc981d 100644
--- a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -4,7 +4,7 @@ import { getRandomLength } from "../utils";
 
 export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
   <tr className="border-b border-custom-border-200 bg-custom-background-100">
-    <td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-custom-border-200 bg-custom-background-100">
+    <td className="h-11 min-w-[28rem] z-[10] sticky right-0 flex items-center border-l-[0.5px] border-custom-border-200 bg-custom-background-100">
       <Row className="flex items-center gap-3">
         <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
         <span
@@ -13,7 +13,7 @@ export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
       </Row>
     </td>
     {range(props.columnCount).map((colIndex) => (
-      <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
+      <td key={colIndex} className="h-11 w-full min-w-[8rem] border-l border-custom-border-200 ">
         <div className="flex items-center justify-center gap-3 px-3">
           <span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
         </div>
@@ -27,11 +27,11 @@ export const SpreadsheetLayoutLoader = () => (
     <table>
       <thead>
         <tr>
-          <th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse" />
+          <th className="h-11 min-w-[28rem] bg-custom-background-90 border-l border-custom-border-200 animate-pulse" />
           {range(10).map((index) => (
             <th
               key={index}
-              className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse"
+              className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-l border-custom-border-200 animate-pulse"
             />
           ))}
         </tr>
diff --git a/web/core/components/ui/loader/settings/api-token.tsx b/web/core/components/ui/loader/settings/api-token.tsx
index ca8f59cda5b..5f9e0a12a7b 100644
--- a/web/core/components/ui/loader/settings/api-token.tsx
+++ b/web/core/components/ui/loader/settings/api-token.tsx
@@ -1,7 +1,7 @@
 import range from "lodash/range";
 
 export const APITokenSettingsLoader = () => (
-  <section className="w-full overflow-y-auto py-8 pr-9">
+  <section className="w-full overflow-y-auto py-8 pl-9">
     <div className="mb-2 flex items-center justify-between border-b border-custom-border-200 py-3.5">
       <h3 className="text-xl font-medium">API tokens</h3>
       <span className="h-8 w-28 bg-custom-background-80 rounded" />
diff --git a/web/core/components/ui/loader/settings/web-hook.tsx b/web/core/components/ui/loader/settings/web-hook.tsx
index 87ddbd19a0e..a5b03e54e01 100644
--- a/web/core/components/ui/loader/settings/web-hook.tsx
+++ b/web/core/components/ui/loader/settings/web-hook.tsx
@@ -1,5 +1,5 @@
 export const WebhookSettingsLoader = () => (
-  <div className="h-full w-full overflow-hidden py-8 pr-9">
+  <div className="h-full w-full overflow-hidden py-8 pl-9">
     <div className="flex h-full w-full flex-col">
       <div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
         <div className="text-xl font-medium">Webhooks</div>
diff --git a/web/core/components/ui/markdown-to-component.tsx b/web/core/components/ui/markdown-to-component.tsx
index 35b53ade626..308e2cc3b9c 100644
--- a/web/core/components/ui/markdown-to-component.tsx
+++ b/web/core/components/ui/markdown-to-component.tsx
@@ -44,11 +44,11 @@ const HeadingSecondary: CustomComponent = ({ children }) => (
 const Paragraph: CustomComponent = ({ children }) => <p className="text-sm text-custom-text-200">{children}</p>;
 
 const OrderedList: CustomComponent = ({ children }) => (
-  <ol className="mb-4 ml-8 list-decimal text-sm text-custom-text-200">{children}</ol>
+  <ol className="mb-4 mr-8 list-decimal text-sm text-custom-text-200">{children}</ol>
 );
 
 const UnorderedList: CustomComponent = ({ children }) => (
-  <ul className="mb-4 ml-8 list-disc text-sm text-custom-text-200">{children}</ul>
+  <ul className="mb-4 mr-8 list-disc text-sm text-custom-text-200">{children}</ul>
 );
 
 const Link: CustomComponent = ({ href, children }) => (
diff --git a/web/core/components/views/view-list-header.tsx b/web/core/components/views/view-list-header.tsx
index 8c66e1a6807..eb1faa739cd 100644
--- a/web/core/components/views/view-list-header.tsx
+++ b/web/core/components/views/view-list-header.tsx
@@ -61,7 +61,7 @@ export const ViewListHeader = observer(() => {
         )}
         <div
           className={cn(
-            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            "mr-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
             {
               "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
             }
diff --git a/web/core/components/web-hooks/form/individual-event-options.tsx b/web/core/components/web-hooks/form/individual-event-options.tsx
index 751d578f303..c01c7a531fd 100644
--- a/web/core/components/web-hooks/form/individual-event-options.tsx
+++ b/web/core/components/web-hooks/form/individual-event-options.tsx
@@ -58,7 +58,7 @@ export const WebhookIndividualEventOptions = ({ control }: Props) => (
                 {option.label}
               </label>
             </div>
-            <p className="ml-6 mt-0.5 text-xs text-custom-text-300">{option.description}</p>
+            <p className="mr-6 mt-0.5 text-xs text-custom-text-300">{option.description}</p>
           </div>
         )}
       />
diff --git a/web/core/components/web-hooks/form/secret-key.tsx b/web/core/components/web-hooks/form/secret-key.tsx
index f2d16c14e85..6a6aa3b6a4b 100644
--- a/web/core/components/web-hooks/form/secret-key.tsx
+++ b/web/core/components/web-hooks/form/secret-key.tsx
@@ -110,7 +110,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
                 {shouldShowKey ? (
                   <p className="text-xs">{webhookSecretKey}</p>
                 ) : (
-                  <div className="flex items-center gap-1.5 overflow-hidden mr-2">
+                  <div className="flex items-center gap-1.5 overflow-hidden ml-2">
                     {range(30).map((index) => (
                       <div key={index} className="h-1 w-1 rounded-full bg-custom-text-400 flex-shrink-0" />
                     ))}
diff --git a/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx b/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
index 443169910fc..2a1519f448a 100644
--- a/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
+++ b/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
@@ -34,10 +34,10 @@ export const NotificationAppSidebarOption: FC<TNotificationAppSidebarOption> = o
   if (totalNotifications <= 0) return <></>;
 
   if (isSidebarCollapsed)
-    return <div className="absolute right-2 top-1.5 h-2 w-2 rounded-full bg-custom-primary-300" />;
+    return <div className="absolute left-2 top-1.5 h-2 w-2 rounded-full bg-custom-primary-300" />;
 
   return (
-    <div className="ml-auto">
+    <div className="mr-auto">
       <CountChip count={`${isMentionsEnabled ? `@ ` : ``}${getNumberCount(totalNotifications)}`} />
     </div>
   );
diff --git a/web/core/components/workspace-notifications/root.tsx b/web/core/components/workspace-notifications/root.tsx
index 37623a6137a..7abb14f4e01 100644
--- a/web/core/components/workspace-notifications/root.tsx
+++ b/web/core/components/workspace-notifications/root.tsx
@@ -53,7 +53,7 @@ export const NotificationsSidebarRoot: FC = observer(() => {
   return (
     <div
       className={cn(
-        "relative border-0 md:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all overflow-hidden",
+        "relative border-0 md:border-l border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all overflow-hidden",
         currentSelectedNotificationId ? "w-0 md:w-2/6" : "w-full md:w-2/6"
       )}
     >
@@ -83,7 +83,7 @@ export const NotificationsSidebarRoot: FC = observer(() => {
                 )}
               </div>
               {currentNotificationTab === tab.value && (
-                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
+                <div className="border absolute bottom-0 left-0 right-0 rounded-t-md border-custom-primary-100" />
               )}
             </div>
           ))}
diff --git a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
index 9189663102f..f7a4af7f5b9 100644
--- a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
@@ -20,7 +20,7 @@ export const NotificationMenuOptionItem: FC<TPopoverMenuOptions> = observer((pro
         <div className={cn("whitespace-nowrap text-sm", isActive ? "text-custom-text-100" : "text-custom-text-200")}>
           {label}
         </div>
-        {appendIcon && <div className="ml-auto">{appendIcon}</div>}
+        {appendIcon && <div className="mr-auto">{appendIcon}</div>}
       </div>
     );
 
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
index c7fa3c4878d..939ca5eca50 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -71,7 +71,7 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
       onClick={handleNotificationIssuePeekOverview}
     >
       {notification.read_at === null && (
-        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-custom-primary-100 absolute top-[50%] left-2" />
+        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-custom-primary-100 absolute top-[50%] right-2" />
       )}
 
       <div className="relative w-full flex gap-2">
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
index 8b34af47709..b0f6d9abc0e 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -228,7 +228,7 @@ export const NotificationSnoozeModal: FC<TNotificationSnoozeModal> = (props) =>
                               getTimeStamp().map((time, index) => (
                                 <CustomSelect.Option key={`${time}-${index}`} value={time.value}>
                                   <div className="flex items-center">
-                                    <span className="ml-3 block truncate">{time.label}</span>
+                                    <span className="mr-3 block truncate">{time.label}</span>
                                   </div>
                                 </CustomSelect.Option>
                               ))
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
index 1695cd8c81f..7e37da7e9c1 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
@@ -114,7 +114,7 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute mt-2 right-0 z-10 min-w-44 select-none">
+                <Popover.Panel className="absolute mt-2 left-0 z-10 min-w-44 select-none">
                   <div className="p-2 rounded-md border border-custom-border-200 bg-custom-background-100 space-y-1">
                     {data.snoozed_till && (
                       <button
diff --git a/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index b425ab29267..804311b4949 100644
--- a/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -60,7 +60,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <div className="mt-3 text-center sm:mr-4 sm:mt-0 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         {currentUser?.id === userDetails.id
                           ? "Leave workspace?"
diff --git a/web/core/components/workspace/confirm-workspace-member-remove.tsx b/web/core/components/workspace/confirm-workspace-member-remove.tsx
index 07bd56a129d..1c89d3ec274 100644
--- a/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -73,7 +73,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <div className="mt-3 text-center sm:mr-4 sm:mt-0 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         {currentUser?.id === userDetails.id
                           ? "Leave workspace?"
diff --git a/web/core/components/workspace/create-workspace-form.tsx b/web/core/components/workspace/create-workspace-form.tsx
index fe2302912b4..a9225f3cc0b 100644
--- a/web/core/components/workspace/create-workspace-form.tsx
+++ b/web/core/components/workspace/create-workspace-form.tsx
@@ -126,7 +126,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceName">
             {t("workspace_creation.form.name.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="mr-0.5 text-red-500">*</span>
           </label>
           <div className="flex flex-col gap-1">
             <Controller
@@ -167,7 +167,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceUrl">
             {t("workspace_creation.form.url.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="mr-0.5 text-red-500">*</span>
           </label>
           <div className="flex w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
             <span className="whitespace-nowrap text-sm text-custom-text-200">{window && window.location.host}/</span>
@@ -208,7 +208,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
         <div className="space-y-1 text-sm">
           <span>
             {t("workspace_creation.form.organization_size.label")}
-            <span className="ml-0.5 text-red-500">*</span>
+            <span className="mr-0.5 text-red-500">*</span>
           </span>
           <div className="w-full">
             <Controller
diff --git a/web/core/components/workspace/invite-modal/actions.tsx b/web/core/components/workspace/invite-modal/actions.tsx
index e6c535282b4..3ffe88312fe 100644
--- a/web/core/components/workspace/invite-modal/actions.tsx
+++ b/web/core/components/workspace/invite-modal/actions.tsx
@@ -38,7 +38,7 @@ export const InvitationModalActions: React.FC<TInvitationModalActionsProps> = ob
       <button
         type="button"
         className={cn(
-          "flex items-center gap-1 bg-transparent py-2 pr-3 text-xs font-medium text-custom-primary outline-custom-primary",
+          "flex items-center gap-1 bg-transparent py-2 pl-3 text-xs font-medium text-custom-primary outline-custom-primary",
           {
             "cursor-not-allowed opacity-60": isInviteDisabled,
           }
diff --git a/web/core/components/workspace/invite-modal/fields.tsx b/web/core/components/workspace/invite-modal/fields.tsx
index d46a2499542..f0d33c54398 100644
--- a/web/core/components/workspace/invite-modal/fields.tsx
+++ b/web/core/components/workspace/invite-modal/fields.tsx
@@ -66,7 +66,7 @@ export const InvitationFields = observer((props: TInvitationFieldsProps) => {
                     className="w-full text-xs sm:text-sm"
                   />
                   {errors.emails?.[index]?.email && (
-                    <span className="ml-1 text-xs text-red-500">{errors.emails?.[index]?.email?.message}</span>
+                    <span className="mr-1 text-xs text-red-500">{errors.emails?.[index]?.email?.message}</span>
                   )}
                 </>
               )}
diff --git a/web/core/components/workspace/logo.tsx b/web/core/components/workspace/logo.tsx
index 460e076c5fc..f5abdad5efa 100644
--- a/web/core/components/workspace/logo.tsx
+++ b/web/core/components/workspace/logo.tsx
@@ -20,7 +20,7 @@ export const WorkspaceLogo = (props: Props) => (
     {props.logo && props.logo !== "" ? (
       <img
         src={getFileURL(props.logo)}
-        className="absolute left-0 top-0 h-full w-full rounded object-cover"
+        className="absolute right-0 top-0 h-full w-full rounded object-cover"
         alt="Workspace Logo"
       />
     ) : (
diff --git a/web/core/components/workspace/settings/member-columns.tsx b/web/core/components/workspace/settings/member-columns.tsx
index 7f8771e8a3f..86dedcf1c95 100644
--- a/web/core/components/workspace/settings/member-columns.tsx
+++ b/web/core/components/workspace/settings/member-columns.tsx
@@ -49,7 +49,7 @@ export const NameColumn: React.FC<NameProps> = (props) => {
                   <span className="relative flex h-6 w-6 items-center justify-center rounded-full p-4 capitalize text-white">
                     <img
                       src={getFileURL(avatar_url)}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      className="absolute right-0 top-0 h-full w-full rounded-full object-cover"
                       alt={display_name || email}
                     />
                   </span>
@@ -142,7 +142,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
                   <span>{ROLE[rowData.role]}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
+              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-led-500" : "border-none"}`}
               className="rounded-md p-0 w-32"
               optionsClassName="w-full"
               input
diff --git a/web/core/components/workspace/settings/members-list.tsx b/web/core/components/workspace/settings/members-list.tsx
index 61d22d0789e..59f93732635 100644
--- a/web/core/components/workspace/settings/members-list.tsx
+++ b/web/core/components/workspace/settings/members-list.tsx
@@ -68,7 +68,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
               <div className="flex">
                 <h4 className="text-xl font-medium pt-2 pb-2">{t("workspace_settings.settings.members.pending_invites")}</h4>
                 {searchedInvitationsIds && (
-                  <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto ml-2" />
+                  <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto mr-2" />
                 )}
               </div>{" "}
               <ChevronDown className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
@@ -76,7 +76,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
           }
         >
           <Disclosure.Panel>
-            <div className="ml-auto items-center gap-1.5 rounded-md bg-custom-background-100 py-1.5">
+            <div className="mr-auto items-center gap-1.5 rounded-md bg-custom-background-100 py-1.5">
               {searchedInvitationsIds?.map((invitationId) => (
                 <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
               ))}
diff --git a/web/core/components/workspace/settings/workspace-details.tsx b/web/core/components/workspace/settings/workspace-details.tsx
index b3371f548a1..f15acd2c42d 100644
--- a/web/core/components/workspace/settings/workspace-details.tsx
+++ b/web/core/components/workspace/settings/workspace-details.tsx
@@ -156,7 +156,7 @@ export const WorkspaceDetails: FC = observer(() => {
           />
         )}
       />
-      <div className={`w-full overflow-y-auto md:pr-9 pr-4 ${isAdmin ? "" : "opacity-60"}`}>
+      <div className={`w-full overflow-y-auto md:pl-9 pl-4 ${isAdmin ? "" : "opacity-60"}`}>
         <div className="flex gap-5 border-b border-custom-border-100 pb-7 items-start">
           <div className="flex flex-col gap-1">
             <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
@@ -164,7 +164,7 @@ export const WorkspaceDetails: FC = observer(() => {
                 <div className="relative mx-auto flex h-14 w-14">
                   <img
                     src={getFileURL(workspaceLogo)}
-                    className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
+                    className="absolute right-0 top-0 h-full w-full rounded-md object-cover"
                     alt="Workspace Logo"
                   />
                 </div>
diff --git a/web/core/components/workspace/sidebar/dropdown-item.tsx b/web/core/components/workspace/sidebar/dropdown-item.tsx
index 2259f95d202..bc3fe971d23 100644
--- a/web/core/components/workspace/sidebar/dropdown-item.tsx
+++ b/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -56,7 +56,7 @@ const SidebarDropdownItem = observer((props: TProps) => {
               {workspace?.logo_url && workspace.logo_url !== "" ? (
                 <img
                   src={getFileURL(workspace.logo_url)}
-                  className="absolute left-0 top-0 h-full w-full rounded object-cover"
+                  className="absolute right-0 top-0 h-full w-full rounded object-cover"
                   alt={t("workspace_logo")}
                 />
               ) : (
diff --git a/web/core/components/workspace/sidebar/dropdown.tsx b/web/core/components/workspace/sidebar/dropdown.tsx
index f9e2aca5989..7916c06833a 100644
--- a/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/web/core/components/workspace/sidebar/dropdown.tsx
@@ -115,7 +115,7 @@ export const SidebarDropdown = observer(() => {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items as={Fragment}>
-                <div className="fixed top-12 left-4 z-[21] mt-1 flex w-full max-w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
+                <div className="fixed top-12 right-4 z-[21] mt-1 flex w-full max-w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
                   <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
                     <span className="rounded-md px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
                       {currentUser?.email}
@@ -209,7 +209,7 @@ export const SidebarDropdown = observer(() => {
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items
-            className="absolute left-0 z-[21] mt-1 flex w-52 origin-top-left  flex-col divide-y
+            className="absolute right-0 z-[21] mt-1 flex w-52 origin-top-left  flex-col divide-y
             divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
             ref={setPopperElement as Ref<HTMLDivElement>}
             style={styles.popper}
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 289a5ec6a33..d47221c2c14 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -15,7 +15,7 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
 import orderBy from "lodash/orderBy";
 import { useParams } from "next/navigation";
 import { createRoot } from "react-dom/client";
-import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react";
+import { PenSquare, Star, MoreHorizontal, ChevronLeft, GripVertical } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 
 // plane helpers
@@ -82,7 +82,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded flex gap-1 bg-custom-background-100 text-sm p-1 pr-2">
+                <div className="rounded flex gap-1 bg-custom-background-100 text-sm p-1 pl-2">
                   <div className="size-5 grid place-items-center flex-shrink-0">
                     <FavoriteFolderIcon />
                   </div>
@@ -165,7 +165,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
             >
               {/* draggable indicator */}
 
-              <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
+              <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute right-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
                 <GripVertical className="w-3 h-3" />
               </div>
 
@@ -188,7 +188,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                 </div>
               ) : (
                 <>
-                  <Tooltip tooltipContent={`${favorite.name}`} position="right" className="ml-8" isMobile={isMobile}>
+                  <Tooltip tooltipContent={`${favorite.name}`} position="right" className="mr-8" isMobile={isMobile}>
                     <div className="flex-grow flex truncate">
                       <Disclosure.Button
                         as="button"
@@ -208,7 +208,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                           <button
                             type="button"
                             className={cn(
-                              "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                              "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -right-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
                               {
                                 "cursor-not-allowed opacity-60": favorite.sort_order === null,
                                 "cursor-grabbing": isDragging,
@@ -268,7 +268,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                       }
                     )}
                   >
-                    <ChevronRight
+                    <ChevronLeft
                       className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
                         "rotate-90": open,
                       })}
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
index 6c8e8666ea8..9a1455c9569 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
@@ -27,7 +27,7 @@ export const FavoriteItemDragHandle: FC<Props> = observer((props) => {
     >
       <div
         className={cn(
-          "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+          "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -right-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
           {
             "cursor-not-allowed opacity-60": sort_order === null,
             "cursor-grabbing": isDragging,
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
index 847c45f7a0e..40100f29832 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -29,7 +29,7 @@ export const FavoriteItemTitle: FC<Props> = observer((props) => {
   };
 
   return (
-    <Tooltip tooltipContent={title} isMobile={isMobile} position="right" className={cn(!isSidebarCollapsed && "ml-8")}>
+    <Tooltip tooltipContent={title} isMobile={isMobile} position="right" className={cn(!isSidebarCollapsed && "mr-8")}>
       <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
         <span className="flex items-center justify-center size-5">{icon}</span>
         {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index 49931802e84..e0bdc0f20f6 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -81,7 +81,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded bg-custom-background-100 text-sm p-1 pr-2">
+                <div className="rounded bg-custom-background-100 text-sm p-1 pl-2">
                   <FavoriteItemTitle
                     href={itemLink}
                     icon={itemIcon}
diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index bfd08056da0..b8cccbc4892 100644
--- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -11,7 +11,7 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import orderBy from "lodash/orderBy";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronRight, FolderPlus } from "lucide-react";
+import { ChevronLeft, FolderPlus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -213,7 +213,7 @@ export const SidebarFavoritesMenu = observer(() => {
                   className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform")}
                 />
               </Tooltip>
-              <ChevronRight
+              <ChevronLeft
                 onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
                 className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
                   "rotate-90": isFavoriteMenuOpen,
@@ -235,7 +235,7 @@ export const SidebarFavoritesMenu = observer(() => {
             <Disclosure.Panel
               as="div"
               className={cn("flex flex-col mt-0.5 gap-0.5", {
-                "space-y-0 mt-0 ml-0": sidebarCollapsed,
+                "space-y-0 mt-0 mr-0": sidebarCollapsed,
               })}
               static
             >
@@ -256,7 +256,7 @@ export const SidebarFavoritesMenu = observer(() => {
                       key={fav.id}
                       tooltipContent={fav?.entity_data ? fav.entity_data?.name : fav?.name}
                       position="right"
-                      className="ml-2"
+                      className="mr-2"
                       disabled={!sidebarCollapsed}
                       isMobile={isMobile}
                     >
diff --git a/web/core/components/workspace/sidebar/help-section.tsx b/web/core/components/workspace/sidebar/help-section.tsx
index 04ef02fea86..9c1a37fd3c8 100644
--- a/web/core/components/workspace/sidebar/help-section.tsx
+++ b/web/core/components/workspace/sidebar/help-section.tsx
@@ -74,7 +74,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
             customButtonClassName={`relative grid place-items-center rounded-md p-1.5 outline-none ${isCollapsed ? "w-full" : ""}`}
             menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
             onMenuClose={() => setIsNeedHelpOpen(false)}
-            placement={isCollapsed ? "left-end" : "top-end"}
+            placement={isCollapsed ? "right-end" : "top-end"}
             maxHeight="lg"
             closeOnSelect
           >
diff --git a/web/core/components/workspace/sidebar/project-navigation.tsx b/web/core/components/workspace/sidebar/project-navigation.tsx
index 3c73a7e03c5..d41c2843aa9 100644
--- a/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -148,12 +148,12 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
             isMobile={isMobile}
             tooltipContent={`${project?.name}: ${t(item.i18n_key)}`}
             position="right"
-            className="ml-2"
+            className="mr-2"
             disabled={!isSidebarCollapsed}
           >
             <Link href={item.href} onClick={handleProjectClick}>
               <SidebarNavItem
-                className={`pl-[18px] ${isSidebarCollapsed ? "p-0 size-7 justify-center mx-auto" : ""}`}
+                className={`pr-[18px] ${isSidebarCollapsed ? "p-0 size-7 justify-center mx-auto" : ""}`}
                 isActive={
                   item.i18n_key === "sidebar.work_items"
                     ? pathname.includes(item.href) || pathname.includes(`/${workspaceSlug}/browse/`)
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
index a776cada4e9..4e018843093 100644
--- a/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { createRoot } from "react-dom/client";
-import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal, ChevronRight } from "lucide-react";
+import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal, ChevronLeft } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -125,7 +125,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
             render: ({ container }) => {
               const root = createRoot(container);
               root.render(
-                <div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pr-2">
+                <div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pl-2">
                   <div className="size-4 grid place-items-center flex-shrink-0">
                     {project && <Logo logo={project?.logo_props} />}
                   </div>
@@ -234,7 +234,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                 <button
                   type="button"
                   className={cn(
-                    "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                    "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -right-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
                     {
                       "cursor-not-allowed opacity-60": project.sort_order === null,
                       "cursor-grabbing": isDragging,
@@ -381,7 +381,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   )}
                   onClick={() => setIsProjectListOpen(!isProjectListOpen)}
                 >
-                  <ChevronRight
+                  <ChevronLeft
                     className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
                       "rotate-90": isProjectListOpen,
                     })}
diff --git a/web/core/components/workspace/sidebar/projects-list.tsx b/web/core/components/workspace/sidebar/projects-list.tsx
index bde475f4861..81669ecfde6 100644
--- a/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/web/core/components/workspace/sidebar/projects-list.tsx
@@ -5,7 +5,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-import { Briefcase, ChevronRight, Ellipsis, Plus } from "lucide-react";
+import { Briefcase, ChevronLeft, Ellipsis, Plus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -208,7 +208,7 @@ export const SidebarProjectsList: FC = observer(() => {
                     className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
                     onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
                   >
-                    <ChevronRight
+                    <ChevronLeft
                       className={cn("flex-shrink-0 size-4 transition-all", {
                         "rotate-90": isAllProjectsListOpen,
                       })}
@@ -237,7 +237,7 @@ export const SidebarProjectsList: FC = observer(() => {
                 <Disclosure.Panel
                   as="div"
                   className={cn("flex flex-col gap-0.5", {
-                    "space-y-0 ml-0": isCollapsed,
+                    "space-y-0 mr-0": isCollapsed,
                   })}
                   static
                 >
diff --git a/web/core/components/workspace/sidebar/user-menu-item.tsx b/web/core/components/workspace/sidebar/user-menu-item.tsx
index f8f0f120a3a..60f5d70a2f3 100644
--- a/web/core/components/workspace/sidebar/user-menu-item.tsx
+++ b/web/core/components/workspace/sidebar/user-menu-item.tsx
@@ -58,7 +58,7 @@ export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props
     <Tooltip
       tooltipContent={t(item.labelTranslationKey)}
       position="right"
-      className="ml-2"
+      className="mr-2"
       disabled={!sidebarCollapsed}
       isMobile={isMobile}
     >
diff --git a/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/web/core/components/workspace/sidebar/workspace-menu-header.tsx
index 3367a2b347c..674b635ecc8 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -2,7 +2,7 @@ import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { MoreHorizontal, ArchiveIcon, ChevronRight, Settings } from "lucide-react";
+import { MoreHorizontal, ArchiveIcon, ChevronLeft, Settings } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
 // plane imports
 import { EUserWorkspaceRoles, EUserPermissionsLevel } from "@plane/constants";
@@ -104,7 +104,7 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
       >
         {" "}
         <span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded hover:bg-custom-sidebar-background-80">
-          <ChevronRight
+          <ChevronLeft
             className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
               "rotate-90": isWorkspaceMenuOpen,
             })}
diff --git a/web/core/components/workspace/sidebar/workspace-menu-item.tsx b/web/core/components/workspace/sidebar/workspace-menu-item.tsx
index 6b06390e462..55fa9286961 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-item.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-item.tsx
@@ -53,7 +53,7 @@ export const SidebarWorkspaceMenuItem: FC<SidebarWorkspaceMenuItemProps> = obser
     <Tooltip
       tooltipContent={t(item.labelTranslationKey)}
       position="right"
-      className="ml-2"
+      className="mr-2"
       disabled={!sidebarCollapsed}
       isMobile={isMobile}
     >
diff --git a/web/core/components/workspace/sidebar/workspace-menu.tsx b/web/core/components/workspace/sidebar/workspace-menu.tsx
index 2b2fa90b317..16e132a66af 100644
--- a/web/core/components/workspace/sidebar/workspace-menu.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -77,7 +77,7 @@ export const SidebarWorkspaceMenu = observer(() => {
           <Disclosure.Panel
             as="div"
             className={cn("flex flex-col mt-0.5 gap-0.5", {
-              "space-y-0 mt-0 ml-0": sidebarCollapsed,
+              "space-y-0 mt-0 mr-0": sidebarCollapsed,
             })}
             static
           >
diff --git a/web/core/components/workspace/views/header.tsx b/web/core/components/workspace/views/header.tsx
index f449c553b5e..fed1b802c3a 100644
--- a/web/core/components/workspace/views/header.tsx
+++ b/web/core/components/workspace/views/header.tsx
@@ -126,7 +126,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
       {isAuthorizedUser ? (
         <button
           type="button"
-          className="sticky -right-4 flex flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
+          className="sticky -left-4 flex flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
           onClick={() => setCreateViewModal(true)}
         >
           <Plus className="h-4 w-4 text-custom-primary-200" />
diff --git a/web/core/components/workspace/views/quick-action.tsx b/web/core/components/workspace/views/quick-action.tsx
index 2251244b40b..a497b711f48 100644
--- a/web/core/components/workspace/views/quick-action.tsx
+++ b/web/core/components/workspace/views/quick-action.tsx
@@ -89,7 +89,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
         isSelected
           ? "border-custom-primary-100 text-custom-primary-100"
           : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
-      } ${isPrivateView ? "pr-2" : ""}`}
+      } ${isPrivateView ? "pl-2" : ""}`}
     >
       <span className={`flex min-w-min flex-shrink-0 whitespace-nowrap text-sm font-medium outline-none`}>
         {view.name}
diff --git a/web/core/components/workspace/views/view-list-item.tsx b/web/core/components/workspace/views/view-list-item.tsx
index 23bab4f5ec6..52a2c3256ec 100644
--- a/web/core/components/workspace/views/view-list-item.tsx
+++ b/web/core/components/workspace/views/view-list-item.tsx
@@ -49,7 +49,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                   {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
                 </div>
               </div>
-              <div className="ml-2 flex flex-shrink-0">
+              <div className="mr-2 flex flex-shrink-0">
                 <div className="flex items-center gap-4">
                   <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
diff --git a/web/core/layouts/auth-layout/workspace-wrapper.tsx b/web/core/layouts/auth-layout/workspace-wrapper.tsx
index 85de7b8090f..7d0bd1b3634 100644
--- a/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -158,7 +158,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
                 className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded hover:bg-custom-background-80"
                 onClick={handleSignOut}
               >
-                <Tooltip tooltipContent={"Sign out"} position="top" className="ml-2" isMobile={isMobile}>
+                <Tooltip tooltipContent={"Sign out"} position="top" className="mr-2" isMobile={isMobile}>
                   <LogOut size={14} />
                 </Tooltip>
               </div>
@@ -184,7 +184,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
             </div>
           </div>
 
-          <div className="absolute bottom-0 left-4 top-0 w-0 bg-custom-background-80 md:w-0.5" />
+          <div className="absolute bottom-0 right-4 top-0 w-0 bg-custom-background-80 md:w-0.5" />
         </div>
       </div>
     );
diff --git a/web/core/lib/n-progress/AppProgressBar.tsx b/web/core/lib/n-progress/AppProgressBar.tsx
index 41698bbd5f0..cf871aee05e 100644
--- a/web/core/lib/n-progress/AppProgressBar.tsx
+++ b/web/core/lib/n-progress/AppProgressBar.tsx
@@ -74,8 +74,8 @@ export const AppProgressBar = React.memo(
 
             border: solid 2px transparent;
             border-top-color: ${color};
-            border-left-color: ${color};
-            border-radius: 50%;
+            border-light-color: ${color};
+            border-ladius: 50%;
 
             -webkit-animation: nprogress-spinner 400ms linear infinite;
                     animation: nprogress-spinner 400ms linear infinite;
diff --git a/web/package.json b/web/package.json
index eb01bbd4a41..dc9d1ef9e10 100644
--- a/web/package.json
+++ b/web/package.json
@@ -39,6 +39,7 @@
     "@plane/utils": "*",
     "@popperjs/core": "^2.11.8",
     "@react-pdf/renderer": "^3.4.5",
+    "@types/moment-jalaali": "^0.7.9",
     "axios": "^1.8.3",
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
@@ -51,6 +52,7 @@
     "mobx": "^6.10.0",
     "mobx-react": "^9.1.1",
     "mobx-utils": "^6.0.8",
+    "moment-jalaali": "^0.10.4",
     "next": "^14.2.20",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 7d44ad0d1fd..caf7aed3bf7 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -18,7 +18,8 @@
 
 @layer base {
   html {
-    font-family: "Inter", sans-serif;
+    font-family: "Vazirmatn", sans-serif;
+    direction: rtl;
   }
 
   :root {