diff --git a/src/features/problems/bot/components/content.tsx b/src/features/problems/bot/components/content.tsx
index e93380a..5baec1e 100644
--- a/src/features/problems/bot/components/content.tsx
+++ b/src/features/problems/bot/components/content.tsx
@@ -37,13 +37,7 @@ export const BotContent = async ({ problemId }: BotContentProps) => {
 
   const description = getLocalizedDescription(descriptions, locale as Locale);
 
-  return (
-    <div className="relative flex-1">
-      <div className="absolute h-full w-full">
-        <BotForm description={description} />
-      </div>
-    </div>
-  );
+  return <BotForm description={description} />;
 };
 
 export const BotContentSkeleton = () => {
diff --git a/src/features/problems/bot/components/panel.tsx b/src/features/problems/bot/components/panel.tsx
index 6b1d152..fa291db 100644
--- a/src/features/problems/bot/components/panel.tsx
+++ b/src/features/problems/bot/components/panel.tsx
@@ -3,6 +3,7 @@ import {
   BotContent,
   BotContentSkeleton,
 } from "@/features/problems/bot/components/content";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 
 interface BotPanelProps {
   problemId: string;
@@ -10,10 +11,10 @@ interface BotPanelProps {
 
 export const BotPanel = ({ problemId }: BotPanelProps) => {
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
+    <PanelLayout>
       <Suspense fallback={<BotContentSkeleton />}>
         <BotContent problemId={problemId} />
       </Suspense>
-    </div>
+    </PanelLayout>
   );
 };
diff --git a/src/features/problems/code/components/panel.tsx b/src/features/problems/code/components/panel.tsx
index f6ba2f4..ecf696f 100644
--- a/src/features/problems/code/components/panel.tsx
+++ b/src/features/problems/code/components/panel.tsx
@@ -3,6 +3,7 @@ import {
   CodeContent,
   CodeContentSkeleton,
 } from "@/features/problems/code/components/content";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { CodeFooter } from "@/features/problems/code/components/footer";
 import { CodeToolbar } from "@/features/problems/code/components/toolbar/code-toolbar";
 
@@ -12,16 +13,14 @@ interface CodePanelProps {
 
 export const CodePanel = ({ problemId }: CodePanelProps) => {
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
-      <CodeToolbar className="border-b" />
-      <div className="relative flex-1">
-        <div className="absolute h-full w-full">
-          <Suspense fallback={<CodeContentSkeleton />}>
-            <CodeContent problemId={problemId} />
-          </Suspense>
-        </div>
+    <PanelLayout>
+      <div className="h-full flex flex-col">
+        <CodeToolbar className="border-b" />
+        <Suspense fallback={<CodeContentSkeleton />}>
+          <CodeContent problemId={problemId} />
+        </Suspense>
+        <CodeFooter />
       </div>
-      <CodeFooter />
-    </div>
+    </PanelLayout>
   );
 };
diff --git a/src/features/problems/description/components/panel.tsx b/src/features/problems/description/components/panel.tsx
index 6bdaacc..0f47385 100644
--- a/src/features/problems/description/components/panel.tsx
+++ b/src/features/problems/description/components/panel.tsx
@@ -3,6 +3,7 @@ import {
   DescriptionContent,
   DescriptionContentSkeleton,
 } from "@/features/problems/description/components/content";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 
 interface DescriptionPanelProps {
   problemId: string;
@@ -10,14 +11,10 @@ interface DescriptionPanelProps {
 
 export const DescriptionPanel = ({ problemId }: DescriptionPanelProps) => {
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
-      <div className="relative flex-1">
-        <div className="absolute h-full w-full">
-          <Suspense fallback={<DescriptionContentSkeleton />}>
-            <DescriptionContent problemId={problemId} />
-          </Suspense>
-        </div>
-      </div>
-    </div>
+    <PanelLayout>
+      <Suspense fallback={<DescriptionContentSkeleton />}>
+        <DescriptionContent problemId={problemId} />
+      </Suspense>
+    </PanelLayout>
   );
 };
diff --git a/src/features/problems/detail/components/panel.tsx b/src/features/problems/detail/components/panel.tsx
index cf6b3e1..75e7114 100644
--- a/src/features/problems/detail/components/panel.tsx
+++ b/src/features/problems/detail/components/panel.tsx
@@ -3,6 +3,7 @@ import {
   DetailContent,
   DetailContentSkeleton,
 } from "@/features/problems/detail/components/content";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { DetailHeader } from "@/features/problems/detail/components/header";
 
 interface DetailPanelProps {
@@ -15,15 +16,11 @@ export const DetailPanel = ({ submissionId }: DetailPanelProps) => {
   }
 
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
+    <PanelLayout>
       <DetailHeader />
-      <div className="relative flex-1">
-        <div className="absolute h-full w-full">
-          <Suspense fallback={<DetailContentSkeleton />}>
-            <DetailContent submissionId={submissionId} />
-          </Suspense>
-        </div>
-      </div>
-    </div>
+      <Suspense fallback={<DetailContentSkeleton />}>
+        <DetailContent submissionId={submissionId} />
+      </Suspense>
+    </PanelLayout>
   );
 };
diff --git a/src/features/problems/layouts/panel-layout.tsx b/src/features/problems/layouts/panel-layout.tsx
new file mode 100644
index 0000000..1b09a7d
--- /dev/null
+++ b/src/features/problems/layouts/panel-layout.tsx
@@ -0,0 +1,13 @@
+interface PanelLayoutProps {
+  children: React.ReactNode;
+}
+
+export const PanelLayout = ({ children }: PanelLayoutProps) => {
+  return (
+    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
+      <div className="relative flex-1">
+        <div className="absolute h-full w-full">{children}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/features/problems/solution/components/panel.tsx b/src/features/problems/solution/components/panel.tsx
index b03fc53..e352016 100644
--- a/src/features/problems/solution/components/panel.tsx
+++ b/src/features/problems/solution/components/panel.tsx
@@ -3,6 +3,7 @@ import {
   SolutionContent,
   SolutionContentSkeleton,
 } from "@/features/problems/solution/components/content";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 
 interface SolutionPanelProps {
   problemId: string;
@@ -10,14 +11,10 @@ interface SolutionPanelProps {
 
 export const SolutionPanel = ({ problemId }: SolutionPanelProps) => {
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
-      <div className="relative flex-1">
-        <div className="absolute h-full w-full">
-          <Suspense fallback={<SolutionContentSkeleton />}>
-            <SolutionContent problemId={problemId} />
-          </Suspense>
-        </div>
-      </div>
-    </div>
+    <PanelLayout>
+      <Suspense fallback={<SolutionContentSkeleton />}>
+        <SolutionContent problemId={problemId} />
+      </Suspense>
+    </PanelLayout>
   );
 };
diff --git a/src/features/problems/submission/components/panel.tsx b/src/features/problems/submission/components/panel.tsx
index b035c90..7fea50b 100644
--- a/src/features/problems/submission/components/panel.tsx
+++ b/src/features/problems/submission/components/panel.tsx
@@ -3,6 +3,7 @@ import {
   SubmissionContent,
   SubmissionContentSkeleton,
 } from "@/features/problems/submission/components/content";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 
 interface SubmissionPanelProps {
   problemId: string;
@@ -10,14 +11,10 @@ interface SubmissionPanelProps {
 
 export const SubmissionPanel = ({ problemId }: SubmissionPanelProps) => {
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
-      <div className="relative flex-1">
-        <div className="absolute h-full w-full">
-          <Suspense fallback={<SubmissionContentSkeleton />}>
-            <SubmissionContent problemId={problemId} />
-          </Suspense>
-        </div>
-      </div>
-    </div>
+    <PanelLayout>
+      <Suspense fallback={<SubmissionContentSkeleton />}>
+        <SubmissionContent problemId={problemId} />
+      </Suspense>
+    </PanelLayout>
   );
 };
diff --git a/src/features/problems/testcase/panel.tsx b/src/features/problems/testcase/panel.tsx
index 4150959..07bf19b 100644
--- a/src/features/problems/testcase/panel.tsx
+++ b/src/features/problems/testcase/panel.tsx
@@ -3,6 +3,7 @@ import {
   TestcaseContent,
   TestcaseContentSkeleton,
 } from "@/features/problems/testcase/content";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 
 interface TestcasePanelProps {
   problemId: string;
@@ -10,14 +11,10 @@ interface TestcasePanelProps {
 
 export const TestcasePanel = ({ problemId }: TestcasePanelProps) => {
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
-      <div className="relative flex-1">
-        <div className="absolute h-full w-full">
-          <Suspense fallback={<TestcaseContentSkeleton />}>
-            <TestcaseContent problemId={problemId} />
-          </Suspense>
-        </div>
-      </div>
-    </div>
+    <PanelLayout>
+      <Suspense fallback={<TestcaseContentSkeleton />}>
+        <TestcaseContent problemId={problemId} />
+      </Suspense>
+    </PanelLayout>
   );
 };