Index: client/index.html
===================================================================
--- client/index.html	(revision 8bc7384f2003588e65996bb13d0dfde971f9e8fb)
+++ client/index.html	(revision 745232a4ac626272f4a8c53cf347c9bce8605547)
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="scrollbar-gutter-stable">
   <head>
     <meta charset="UTF-8" />
Index: client/src/CreatePost/CreatePost.jsx
===================================================================
--- client/src/CreatePost/CreatePost.jsx	(revision 8bc7384f2003588e65996bb13d0dfde971f9e8fb)
+++ client/src/CreatePost/CreatePost.jsx	(revision 745232a4ac626272f4a8c53cf347c9bce8605547)
@@ -11,4 +11,15 @@
   const [modal, setModal] = useState({ isOpen: false, message: "", type: "" });
   const navigate = useNavigate();
+  useEffect(() => {
+    if (modal.isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    // Cleanup on component unmount
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [modal.isOpen]);
 
   const showModal = (message, type = "info") => {
@@ -237,11 +248,16 @@
       </div>
 
-      {/* Modal using standard DaisyUI classes */}
+      {/* Modal element */}
       {modal.isOpen && (
-        <div className="modal modal-open">
-          <div className="modal-box ">
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center  bg-opacity-50 backdrop-blur-xs"
+          aria-labelledby="modal-title"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div className="bg-base-200 rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
             <div className="flex items-center gap-3 mb-4">
               {modal.type === "success" && (
-                <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center">
+                <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
                     className="w-5 h-5 text-success-content"
@@ -260,5 +276,5 @@
               )}
               {modal.type === "pending" && (
-                <div className="w-8 h-8 rounded-full bg-warning flex items-center justify-center">
+                <div className="w-8 h-8 rounded-full bg-warning flex items-center justify-center shrink-0">
                   <svg
                     className="w-5 h-5 text-warning-content"
@@ -277,5 +293,5 @@
               )}
               {(modal.type === "auth" || modal.type === "error") && (
-                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center">
+                <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
                     className="w-5 h-5 text-error-content"
@@ -302,5 +318,5 @@
                 </div>
               )}
-              <h3 className="font-bold text-lg">
+              <h3 className="font-bold text-lg" id="modal-title">
                 {modal.type === "success" && "Success!"}
                 {modal.type === "pending" && "Pending Approval"}
@@ -310,5 +326,5 @@
             </div>
             <p className="py-4">{modal.message}</p>
-            <div className="modal-action">
+            <div className="flex justify-end mt-4">
               <button className="btn btn-primary" onClick={closeModal}>
                 OK
Index: client/src/index.css
===================================================================
--- client/src/index.css	(revision 8bc7384f2003588e65996bb13d0dfde971f9e8fb)
+++ client/src/index.css	(revision 745232a4ac626272f4a8c53cf347c9bce8605547)
@@ -46,5 +46,5 @@
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  --background: oklch(0.145 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
Index: client/tailwind.config.js
===================================================================
--- client/tailwind.config.js	(revision 8bc7384f2003588e65996bb13d0dfde971f9e8fb)
+++ client/tailwind.config.js	(revision 745232a4ac626272f4a8c53cf347c9bce8605547)
@@ -3,5 +3,9 @@
   content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      backdropBlur: {
+        xs: "2px",
+      },
+    },
   },
   plugins: [require("daisyui")],
