diff --git a/src/app/(app)/problems/[id]/@Code/layout.tsx b/src/app/(app)/problems/[id]/@Code/layout.tsx
index 28b0679..9e925bc 100644
--- a/src/app/(app)/problems/[id]/@Code/layout.tsx
+++ b/src/app/(app)/problems/[id]/@Code/layout.tsx
@@ -9,8 +9,8 @@ interface CodeLayoutProps {
 
 export default function CodeLayout({ children }: CodeLayoutProps) {
   return (
-    <div className="flex flex-col h-full">
-      <WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
+    <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+      <WorkspaceEditorHeader />
       <Suspense fallback={<Loading />}>
         {children}
       </Suspense>
diff --git a/src/app/(app)/problems/[id]/@Code/page.tsx b/src/app/(app)/problems/[id]/@Code/page.tsx
index e56eca7..9885a41 100644
--- a/src/app/(app)/problems/[id]/@Code/page.tsx
+++ b/src/app/(app)/problems/[id]/@Code/page.tsx
@@ -2,7 +2,7 @@ import { ProblemEditor } from "@/components/problem-editor";
 
 export default function CodePage() {
   return (
-    <div className="relative flex-1 border-x border-muted">
+    <div className="relative flex-1">
       <div className="absolute w-full h-full">
         <ProblemEditor />
       </div>
diff --git a/src/app/(app)/problems/[id]/@Description/layout.tsx b/src/app/(app)/problems/[id]/@Description/layout.tsx
index 0d9f699..0bef527 100644
--- a/src/app/(app)/problems/[id]/@Description/layout.tsx
+++ b/src/app/(app)/problems/[id]/@Description/layout.tsx
@@ -7,7 +7,7 @@ interface DescriptionLayoutProps {
 
 export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background">
       <Suspense fallback={<Loading />}>
         {children}
       </Suspense>
diff --git a/src/app/(app)/problems/[id]/@Description/page.tsx b/src/app/(app)/problems/[id]/@Description/page.tsx
index 6746d7d..ad9c28a 100644
--- a/src/app/(app)/problems/[id]/@Description/page.tsx
+++ b/src/app/(app)/problems/[id]/@Description/page.tsx
@@ -29,7 +29,7 @@ export default async function DescriptionPage({ params }: DescriptionPageProps)
 
   return (
     <>
-      <div className="relative flex-1 border-x border-muted">
+      <div className="relative flex-1">
         <div className="absolute h-full w-full">
           <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
             <MdxPreview source={problem.description} className="p-4 md:p-6" />
diff --git a/src/app/(app)/problems/[id]/@Details/layout.tsx b/src/app/(app)/problems/[id]/@Details/layout.tsx
index 1357609..b84d965 100644
--- a/src/app/(app)/problems/[id]/@Details/layout.tsx
+++ b/src/app/(app)/problems/[id]/@Details/layout.tsx
@@ -1,15 +1,15 @@
 import { Suspense } from "react";
+import { getUserLocale } from "@/i18n/locale";
 import { Loading } from "@/components/loading";
+import DetailsPage from "@/app/(app)/problems/[id]/@Details/page";
 
-interface DetailsLayoutProps {
-  children: React.ReactNode;
-}
+export default async function DetailsLayout() {
+  const locale = await getUserLocale();
 
-export default async function DetailsLayout({ children }: DetailsLayoutProps) {
   return (
     <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
       <Suspense fallback={<Loading />}>
-        {children}
+        <DetailsPage locale={locale} />;
       </Suspense>
     </div>
   );
diff --git a/src/app/(app)/problems/[id]/@Solutions/layout.tsx b/src/app/(app)/problems/[id]/@Solutions/layout.tsx
index 5b127b3..90bcbeb 100644
--- a/src/app/(app)/problems/[id]/@Solutions/layout.tsx
+++ b/src/app/(app)/problems/[id]/@Solutions/layout.tsx
@@ -7,7 +7,7 @@ interface SolutionsLayoutProps {
 
 export default async function SolutionsLayout({ children }: SolutionsLayoutProps) {
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
       <Suspense fallback={<Loading />}>
         {children}
       </Suspense>
diff --git a/src/app/(app)/problems/[id]/@Solutions/page.tsx b/src/app/(app)/problems/[id]/@Solutions/page.tsx
index edf02b6..e9c8e10 100644
--- a/src/app/(app)/problems/[id]/@Solutions/page.tsx
+++ b/src/app/(app)/problems/[id]/@Solutions/page.tsx
@@ -29,7 +29,7 @@ export default async function SolutionsPage({ params }: SolutionsPageProps) {
 
   return (
     <>
-      <div className="relative flex-1 border-x border-muted">
+      <div className="relative flex-1">
         <div className="absolute h-full w-full">
           <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
             <MdxPreview source={problem.solution} className="p-4 md:p-6" />