diff --git a/src/plugins/vuetify/@core/components/I18n.vue b/src/plugins/vuetify/@core/components/I18n.vue
index bf63162f..ba77c953 100644
--- a/src/plugins/vuetify/@core/components/I18n.vue
+++ b/src/plugins/vuetify/@core/components/I18n.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+import { defineEmits, ref } from 'vue'
 import type { Anchor } from 'vuetify/lib/components';
 import type { I18nLanguage } from '@layouts/types';
 
@@ -7,7 +8,7 @@ const props = withDefaults(defineProps<Props>(), {
   location: 'bottom end',
 });
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'change', id: string): void;
 }>();
 
@@ -16,32 +17,38 @@ interface Props {
   location?: Anchor;
 }
 
-const { locale } = useI18n({ useScope: 'global' });
+let { locale } = useI18n({ useScope: 'global' });
 
 watch(locale, (val) => {
   document.documentElement.setAttribute('lang', val as string);
 });
 
-const currentLang = ref(localStorage.getItem('lang') || 'en');
+let currentLang = ref(localStorage.getItem('lang') || 'en');
+
+function changeLang(lang: string){
+  locale = lang
+  currentLang.value = lang
+  emit('change', lang)
+}
 </script>
 
 <template>
-  <div class="dropdown dropdown-end">
+  <div 
+    class="dropdown"
+    :class="currentLang === 'ar'?'dropdown-right': 'dropdown-bottom dropdown-end'"
+   >
     <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
       <Icon icon="mdi-translate" class="text-2xl" />
     </label>
     <ul
       tabindex="0"
-      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
+      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
     >
       <li v-for="lang in props.languages" :key="lang.i18nLang">
         <a
           class="hover:bg-base-content"
           :class="{ 'text-primary': currentLang === lang.i18nLang }"
-          @click="
-            locale = lang.i18nLang;
-            $emit('change', lang.i18nLang);
-          "
+          @click="changeLang(lang.i18nLang)"
           >{{ lang.label }}</a
         >
       </li>