diff --git a/src/components/avatar-button.tsx b/src/components/avatar-button.tsx
index b8e4b24..96bae05 100644
--- a/src/components/avatar-button.tsx
+++ b/src/components/avatar-button.tsx
@@ -1,106 +1,107 @@
 //avatar-button
 import {
-  BadgeCheck,
-  Bell,
-  LogIn,
-  LogOut,
+    BadgeCheck,
+    Bell,
+    LogIn,
+    LogOut,
 } from "lucide-react";
 import {
-  Avatar,
-  AvatarImage,
+    Avatar,
+    AvatarImage,
 } from "@/components/ui/avatar";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { auth, signOut } from "@/lib/auth";
 import { redirect } from "next/navigation";
 import { Skeleton } from "@/components/ui/skeleton";
 import { SettingsButton } from "@/components/settings-button";
-import { useTranslations } from 'next-intl';
+//import { useTranslations } from 'next-intl';
+import { getTranslations } from "next-intl/server";
 
 const UserAvatar = ({ image, name }: { image: string; name: string }) => (
-  <Avatar className="h-8 w-8 rounded-lg">
-    <AvatarImage src={image} alt={name} />
-    <Skeleton className="h-full w-full" />
-  </Avatar>
+    <Avatar className="h-8 w-8 rounded-lg">
+        <AvatarImage src={image} alt={name} />
+        <Skeleton className="h-full w-full" />
+    </Avatar>
 );
 
 async function handleSignIn() {
-  "use server";
-  redirect("/sign-in");
+    "use server";
+    redirect("/sign-in");
 }
 
 async function handleSignOut() {
-  "use server";
-  await signOut();
+    "use server";
+    await signOut();
 }
 
 export async function AvatarButton() {
-  const session = await auth();
-  const isLoggedIn = !!session?.user;
-  const image = session?.user?.image ?? "https://github.com/shadcn.png";
-  const name = session?.user?.name ?? "unknown";
-  const email = session?.user?.email ?? "unknwon@example.com";
-  const t = useTranslations('avatar-button');
+    const session = await auth();
+    const isLoggedIn = !!session?.user;
+    const image = session?.user?.image ?? "https://github.com/shadcn.png";
+    const name = session?.user?.name ?? "unknown";
+    const email = session?.user?.email ?? "unknwon@example.com";
+    const t = await getTranslations('avatar-button');
 
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <UserAvatar image={image} name={name} />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-        align="end"
-        sideOffset={8}
-      >
-        {!isLoggedIn ? (
-          <DropdownMenuGroup>
-            <SettingsButton />
-            <DropdownMenuItem onClick={handleSignIn}>
-              <LogIn />
-              {t('log-in')}
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        ) : (
-          <>
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
                 <UserAvatar image={image} name={name} />
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{name}</span>
-                  <span className="truncate text-xs">{email}</span>
-                </div>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <BadgeCheck />
-                {t('account')}
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Bell />
-                Notifications
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <SettingsButton />
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={handleSignOut}>
-              <LogOut />
-              {t('log-out')}
-            </DropdownMenuItem>
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                align="end"
+                sideOffset={8}
+            >
+                {!isLoggedIn ? (
+                    <DropdownMenuGroup>
+                        <SettingsButton />
+                        <DropdownMenuItem onClick={handleSignIn}>
+                            <LogIn />
+                            {t('log-in')}
+                        </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                ) : (
+                    <>
+                        <DropdownMenuLabel className="p-0 font-normal">
+                            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                <UserAvatar image={image} name={name} />
+                                <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">{name}</span>
+                                    <span className="truncate text-xs">{email}</span>
+                                </div>
+                            </div>
+                        </DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem>
+                                <BadgeCheck />
+                                {t('account')}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                                <Bell />
+                                Notifications
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <SettingsButton />
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={handleSignOut}>
+                            <LogOut />
+                            {t('log-out')}
+                        </DropdownMenuItem>
+                    </>
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
 }
diff --git a/src/components/settings-dialog.tsx b/src/components/settings-dialog.tsx
index 97dbc17..e462264 100644
--- a/src/components/settings-dialog.tsx
+++ b/src/components/settings-dialog.tsx
@@ -31,84 +31,83 @@ import { useSettingsStore } from "@/stores/useSettingsStore";
 import { CodeXml, Globe, Paintbrush, Settings } from "lucide-react";
 import { useTranslations } from "next-intl";
 
-const t = useTranslations('settings');
-const data = {
-  nav: [
-    { name: t('appearance'), icon: Paintbrush },
-    { name: t('language-and-region'), icon: Globe },
-    { name: t('code-editor'), icon: CodeXml },
-    { name: t('advanced'), icon: Settings },
-  ],
-};
-
 export function SettingsDialog() {
-  const { isDialogOpen, activeSetting, setDialogOpen, setActiveSetting } = useSettingsStore();
+  const { isDialogOpen, activeSetting, setDialogOpen, setActiveSetting } =
+      useSettingsStore();
+  const t = useTranslations("settings");
+
+  const navItems = [
+    { name: t("appearance"), icon: Paintbrush },
+    { name: t("language-and-region"), icon: Globe },
+    { name: t("code-editor"), icon: CodeXml },
+    { name: t("advanced"), icon: Settings },
+  ];
 
   return (
-    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
-      <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
-        <DialogTitle className="sr-only">{t('settings')}</DialogTitle>
-        <DialogDescription className="sr-only">
-          {t('customize-your-settings-here')}
-        </DialogDescription>
-        <SidebarProvider className="items-start">
-          <Sidebar collapsible="none" className="hidden md:flex">
-            <SidebarContent>
-              <SidebarGroup>
-                <SidebarGroupContent>
-                  <SidebarMenu className="pt-2">
-                    {data.nav.map((item) => (
-                      <SidebarMenuItem key={item.name}>
-                        <SidebarMenuButton
-                          asChild
-                          isActive={item.name === activeSetting}
-                          onClick={() => setActiveSetting(item.name)}
-                        >
-                          <a href="#">
-                            <item.icon />
-                            <span>{item.name}</span>
-                          </a>
-                        </SidebarMenuButton>
-                      </SidebarMenuItem>
-                    ))}
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
-            </SidebarContent>
-          </Sidebar>
-          <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
-            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-              <div className="flex items-center gap-2 px-4">
-                <Breadcrumb>
-                  <BreadcrumbList>
-                    <BreadcrumbItem className="hidden md:block">
-                      <BreadcrumbLink href="#">{t('settings')}</BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator className="hidden md:block" />
-                    <BreadcrumbItem>
-                      <BreadcrumbPage>{activeSetting}</BreadcrumbPage>
-                    </BreadcrumbItem>
-                  </BreadcrumbList>
-                </Breadcrumb>
-              </div>
-            </header>
-            <ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
-              <div className="flex flex-col gap-4">
-                {activeSetting === t('appearance') ? (
-                  <AppearanceSettings />
-                ) : (
-                  Array.from({ length: 10 }).map((_, i) => (
-                    <div
-                      key={i}
-                      className="aspect-video max-w-3xl rounded-xl bg-muted/50"
-                    />
-                  ))
-                )}
-              </div>
-            </ScrollArea>
-          </main>
-        </SidebarProvider>
-      </DialogContent>
-    </Dialog>
+      <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+          <DialogTitle className="sr-only">{t("settings")}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {t("customize-your-settings-here")}
+          </DialogDescription>
+          <SidebarProvider className="items-start">
+            <Sidebar collapsible="none" className="hidden md:flex">
+              <SidebarContent>
+                <SidebarGroup>
+                  <SidebarGroupContent>
+                    <SidebarMenu className="pt-2">
+                      {navItems.map((item) => (
+                          <SidebarMenuItem key={item.name}>
+                            <SidebarMenuButton
+                                asChild
+                                isActive={item.name === activeSetting}
+                                onClick={() => setActiveSetting(item.name)}
+                            >
+                              <a href="#">
+                                <item.icon />
+                                <span>{item.name}</span>
+                              </a>
+                            </SidebarMenuButton>
+                          </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              </SidebarContent>
+            </Sidebar>
+            <main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+              <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+                <div className="flex items-center gap-2 px-4">
+                  <Breadcrumb>
+                    <BreadcrumbList>
+                      <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href="#">{t("settings")}</BreadcrumbLink>
+                      </BreadcrumbItem>
+                      <BreadcrumbSeparator className="hidden md:block" />
+                      <BreadcrumbItem>
+                        <BreadcrumbPage>{activeSetting}</BreadcrumbPage>
+                      </BreadcrumbItem>
+                    </BreadcrumbList>
+                  </Breadcrumb>
+                </div>
+              </header>
+              <ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
+                <div className="flex flex-col gap-4">
+                  {activeSetting === t("appearance") ? (
+                      <AppearanceSettings />
+                  ) : (
+                      Array.from({ length: 10 }).map((_, i) => (
+                          <div
+                              key={i}
+                              className="aspect-video max-w-3xl rounded-xl bg-muted/50"
+                          />
+                      ))
+                  )}
+                </div>
+              </ScrollArea>
+            </main>
+          </SidebarProvider>
+        </DialogContent>
+      </Dialog>
   );
 }