diff --git a/src/app/(app)/playground/@problem/@description/components/footer.tsx b/src/app/(app)/playground/@problem/@description/components/footer.tsx
new file mode 100644
index 0000000..c980eb9
--- /dev/null
+++ b/src/app/(app)/playground/@problem/@description/components/footer.tsx
@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+
+interface ProblemDescriptionFooterProps {
+  className?: string;
+}
+
+export default function ProblemDescriptionFooter({
+  className,
+  ...props
+}: ProblemDescriptionFooterProps) {
+  return (
+    <footer
+      {...props}
+      className={cn("h-9 flex flex-none items-center bg-muted", className)}
+    >
+      <div className="w-full flex items-center justify-center">
+        Description of Two Sum
+      </div>
+    </footer>
+  );
+}
diff --git a/src/app/(app)/playground/@problem/@description/layout.tsx b/src/app/(app)/playground/@problem/@description/layout.tsx
index bf5c67b..9045bad 100644
--- a/src/app/(app)/playground/@problem/@description/layout.tsx
+++ b/src/app/(app)/playground/@problem/@description/layout.tsx
@@ -1,3 +1,5 @@
+import ProblemDescriptionFooter from "./components/footer";
+
 interface ProblemDescriptionLayoutProps {
   children: React.ReactNode;
 }
@@ -7,7 +9,10 @@ export default function ProblemDescriptionLayout({
 }: ProblemDescriptionLayoutProps) {
   return (
     <div className="h-full flex flex-col">
-      {children}
+      <div className="flex-1">
+        {children}
+      </div>
+      <ProblemDescriptionFooter />
     </div>
   );
 }
diff --git a/src/app/(app)/playground/@problem/@solution/components/footer.tsx b/src/app/(app)/playground/@problem/@solution/components/footer.tsx
new file mode 100644
index 0000000..bac1e73
--- /dev/null
+++ b/src/app/(app)/playground/@problem/@solution/components/footer.tsx
@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+
+interface ProblemSolutionFooterProps {
+  className?: string;
+}
+
+export default function ProblemSolutionFooter({
+  className,
+  ...props
+}: ProblemSolutionFooterProps) {
+  return (
+    <footer
+      {...props}
+      className={cn("h-9 flex flex-none items-center bg-muted", className)}
+    >
+      <div className="w-full flex items-center justify-center">
+        Solution of Two Sum
+      </div>
+    </footer>
+  );
+}
diff --git a/src/app/(app)/playground/@problem/@solution/layout.tsx b/src/app/(app)/playground/@problem/@solution/layout.tsx
index d3665b0..c5803d7 100644
--- a/src/app/(app)/playground/@problem/@solution/layout.tsx
+++ b/src/app/(app)/playground/@problem/@solution/layout.tsx
@@ -1,3 +1,5 @@
+import ProblemSolutionFooter from "./components/footer";
+
 interface ProblemSolutionLayoutProps {
   children: React.ReactNode;
 }
@@ -7,7 +9,10 @@ export default function ProblemSolutionLayout({
 }: ProblemSolutionLayoutProps) {
   return (
     <div className="h-full flex flex-col">
-      {children}
+      <div className="flex-1">
+        {children}
+      </div>
+      <ProblemSolutionFooter />
     </div>
   );
 }