diff --git a/rag-view/src/pages/RootLayout.jsx b/rag-view/src/pages/RootLayout.jsx
index f0cebe5..7a01372 100644
--- a/rag-view/src/pages/RootLayout.jsx
+++ b/rag-view/src/pages/RootLayout.jsx
@@ -1,9 +1,52 @@
+import { useState } from "react";
 import { Outlet } from "react-router-dom";
 
+function AboutModal({ onClose }) {
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md bg-slate-900 border border-slate-700/60 rounded-2xl shadow-2xl p-6"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-white">About</h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-200 transition-colors text-xl leading-none"
+          >
+            ✕
+          </button>
+        </div>
+        <p className="text-slate-300 text-sm leading-relaxed">
+          This is about content
+        </p>
+        <button
+          onClick={onClose}
+          className="mt-6 w-full py-2.5 rounded-xl bg-slate-700 hover:bg-slate-600 active:bg-slate-800 text-sm font-medium text-white transition-colors"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function RootLayout() {
+  const [showAbout, setShowAbout] = useState(false);
+
   return (
     <div className="h-screen overflow-hidden bg-slate-950 text-slate-50">
       <Outlet />
+      <button
+        onClick={() => setShowAbout(true)}
+        className="fixed bottom-4 right-4 z-40 px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 active:bg-slate-900 border border-slate-700/60 text-xs font-medium text-slate-400 hover:text-slate-200 transition-colors shadow-lg"
+      >
+        About
+      </button>
+      {showAbout && <AboutModal onClose={() => setShowAbout(false)} />}
     </div>
   );
 }