diff --git a/client/src/components/CommunityCard/CommunityCard.jsx b/client/src/components/CommunityCard/CommunityCard.jsx
index 8951979..891b6a1 100644
--- a/client/src/components/CommunityCard/CommunityCard.jsx
+++ b/client/src/components/CommunityCard/CommunityCard.jsx
@@ -1,9 +1,14 @@
+import { useNavigate } from "react-router-dom";
 import Community from "../../assets/Community.svg";
 export default function CommunityCard() {
-  return (
-    <div className="text-text flex flex-col items-center justify-center px-28 md:px-12 py-12 rounded-lg cursor-pointer hover:bg-secondary hover:text-primary bg-primary/[0.12]">
-      <img src={Community} className="w-28" alt="" />
-      <h1 className="font-bold">Community</h1>
-    </div>
-  );
+     const navigate = useNavigate();
+     return (
+          <div
+               className="text-text flex flex-col items-center justify-center px-28 md:px-12 py-12 rounded-lg cursor-pointer hover:bg-secondary hover:text-primary bg-primary/[0.12]"
+               onClick={() => navigate("/community")}
+          >
+               <img src={Community} className="w-28" alt="" />
+               <h1 className="font-bold">Community</h1>
+          </div>
+     );
 }
diff --git a/client/src/components/community/NewCommunity.jsx b/client/src/components/community/NewCommunity.jsx
new file mode 100644
index 0000000..21ad2ee
--- /dev/null
+++ b/client/src/components/community/NewCommunity.jsx
@@ -0,0 +1,116 @@
+import { Modal } from "flowbite-react";
+import { useState } from "react";
+import  PropTypes from "prop-types";
+
+export default function NewCommunity({ showModal, setShowModal }) {
+     const [error, setError] = useState("");
+     const [formData, setFormData] = useState({
+          community_name: "",
+          privacy: "public",
+          about: "",
+     });
+
+     function handleChange(e) {
+          const { name, value } = e.target;
+          setFormData({ ...formData, [name]: value });
+     }
+
+     function handleSubmit() {
+          if (formData.community_name && formData.topic) {
+               setError("");
+          } else if (!formData.community_name) {
+               setError("Please select a name");
+          } else if (!formData.topic) {
+               setError("Please select a topic");
+          }
+     }
+     return (
+          <>
+               <Modal
+                    show={showModal}
+                    size="2xl"
+                    onClose={() => {
+                         setError("");
+                         setShowModal(false);
+                    }}
+                    popup
+               >
+                    <Modal.Header>
+                         <div className="p-4">New Community</div>
+                    </Modal.Header>
+                    <Modal.Body>
+                         {error && (
+                              <small className="text-sm text-red-600">
+                                   {error}
+                              </small>
+                         )}
+                         <div className="input-group flex flex-col">
+                              <label htmlFor="" className="font-medium">
+                                   Community Name
+                              </label>
+                              <input
+                                   type="text"
+                                   name="community_name"
+                                   id=""
+                                   className="rounded-md"
+                                   onChange={handleChange}
+                              />
+                         </div>
+                         <div className="flex gap-3 w-full justify-between">
+                              <div className="input-group flex flex-col mt-5 mb-5 w-full">
+                                   <label htmlFor="" className="font-medium">
+                                        Privacy
+                                   </label>
+                                   <select
+                                        name="privacy"
+                                        id=""
+                                        className="rounded-md"
+                                        onChange={handleChange}
+                                   >
+                                        <option value="public">Public</option>
+                                        <option value="private">Private</option>
+                                   </select>
+                              </div>
+                         </div>
+                         <div className="input-group flex flex-col mt-5">
+                              <label htmlFor="" className="font-medium">
+                                   About
+                              </label>
+                              <textarea
+                                   name="about"
+                                   id=""
+                                   className="rounded-md"
+                              />
+                         </div>
+
+                         <div className="btn py-5">
+                              <button
+                                   className="btn px-5 py-1 bg-red-700 hover:bg-red-500 rounded-md text-white"
+                                   onClick={() => {
+                                        setFormData({
+                                             community_name: "",
+                                             topic: null,
+                                             privacy: "public",
+                                             about: "",
+                                        });
+                                   }}
+                              >
+                                   Clear
+                              </button>
+                              <button
+                                   className="btn px-5 py-1 bg-primary hover:bg-primary-hover ms-3 rounded-md text-white"
+                                   onClick={handleSubmit}
+                              >
+                                   Create
+                              </button>
+                         </div>
+                    </Modal.Body>
+               </Modal>
+          </>
+     );
+}
+
+NewCommunity.propTypes = {
+     showModal: PropTypes.bool.isRequired,
+     setShowModal: PropTypes.func.isRequired,
+};
diff --git a/client/src/pages/UserPages/Community/Community.css b/client/src/pages/UserPages/Community/Community.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/pages/UserPages/Community/Community.jsx b/client/src/pages/UserPages/Community/Community.jsx
new file mode 100644
index 0000000..97f18c5
--- /dev/null
+++ b/client/src/pages/UserPages/Community/Community.jsx
@@ -0,0 +1,123 @@
+import AddCircle from "@mui/icons-material/AddCircle";
+import "./Community.css";
+import MenuIcon from "@mui/icons-material/Menu";
+import { useState } from "react";
+// import NewCommunity from "../../components/Modal/NewCommunity";
+// import YourCommunity from "../../components/community/YourCommunity";
+// import DiscoverCommunity from "../../components/community/DiscoverCommunity";
+import { useNavigate, useParams } from "react-router-dom";
+// import RecentDiscussions from "../../components/community/RecentDiscussions";
+import NewCommunity from "../../../components/community/NewCommunity";
+
+export default function Community() {
+     const { tab } = useParams();
+     const navigate = useNavigate();
+     const [showSidebar, setShowSidebar] = useState("hidden");
+     const [currentTab, setCurrentTab] = useState(tab.toUpperCase());
+     const [showNewCommunity, setShowNewCommunity] = useState(false);
+     return (
+          <div className="grid grid-cols-12 h-screen">
+               <NewCommunity
+                    showModal={showNewCommunity}
+                    setShowModal={setShowNewCommunity}
+               />
+               <div className="flex gap-2 col-span-12">
+                    <button
+                         className="p-2 sm:hidden  flex rounded-sm mb-3"
+                         onClick={() =>
+                              setShowSidebar(
+                                   showSidebar === "block" ? "hidden" : "block"
+                              )
+                         }
+                    >
+                         <MenuIcon />
+                    </button>
+                    <h1
+                         className={`${
+                              showSidebar === "block" ? "hidden" : "block"
+                         } sm:hidden text-xl mt-2`}
+                    >
+                         Community
+                    </h1>
+               </div>
+               <section
+                    className={`sidebar col-span-12 sm:col-span-3  bg-gray-900 flex flex-col p-5 py-8 ${showSidebar} sm:block`}
+               >
+                    <h1 className="text-2xl mb-10">Community</h1>
+                    {/* <div className="search my-5">
+                         <input
+                              type="text"
+                              placeholder="search communities"
+                              className="bg-gray-800 rounded-md w-full"
+                         />
+                    </div> */}
+                    <div
+                         className="nav flex flex-col gap-3"
+                         onClick={() =>
+                              setShowSidebar(
+                                   showSidebar === "block" ? "hidden" : "block"
+                              )
+                         }
+                    >
+                         <div
+                              className={`item hover:bg-gray-800 ${
+                                   currentTab === "RECENT_DISCUSSIONS" &&
+                                   "bg-gray-800"
+                              }  rounded-md p-5 py-3`}
+                              onClick={() => {
+                                   setCurrentTab("RECENT_DISCUSSIONS");
+                                   navigate("/community/recent_discussions");
+                              }}
+                         >
+                              <h2 className="text-lg">Recent Discussions</h2>
+                         </div>
+                         <div
+                              className={`item hover:bg-gray-800 ${
+                                   currentTab === "DISCOVER" && "bg-gray-800"
+                              }  rounded-md p-5 py-3`}
+                              onClick={() => {
+                                   setCurrentTab("DISCOVER");
+                                   navigate("/community/discover");
+                              }}
+                         >
+                              <h2 className="text-lg">Discover</h2>
+                         </div>
+                         <div
+                              className={`item hover:bg-gray-800 ${
+                                   currentTab === "YOUR_COMMUNITY" &&
+                                   "bg-gray-800"
+                              }  rounded-md p-5 py-3`}
+                              onClick={() => {
+                                   setCurrentTab("YOUR_COMMUNITY");
+                                   navigate("/community/your_community");
+                              }}
+                         >
+                              <h2 className="text-lg">Your Community</h2>
+                         </div>
+                    </div>
+                    <div className="new-community mt-7 px-5 py-3 bg-gray-800 hover:bg-gray-600 cursor-pointer rounded-md">
+                         <button
+                              className="text-lg flex gap-3"
+                              onClick={() => setShowNewCommunity(true)}
+                         >
+                              <div className="text-primary">
+                                   <AddCircle />
+                              </div>
+                              Community
+                         </button>
+                    </div>
+               </section>
+               <section className="page-body col-span-12 sm:col-span-9 bg-blue-700">
+                    {currentTab === "RECENT_DISCUSSIONS" ? (
+                         <h1>recent discussion</h1>
+                    ) : //  <RecentDiscussions />
+                    // : currentTab === "DISCOVER" ? (
+                    //      <DiscoverCommunity />
+                    // ) : currentTab === "YOUR_COMMUNITY" ? (
+                    //      <YourCommunity />
+                    // )
+                    null}
+               </section>
+          </div>
+     );
+}
diff --git a/client/src/routes/UserRoute.jsx b/client/src/routes/UserRoute.jsx
index 45ff0e7..77857e0 100644
--- a/client/src/routes/UserRoute.jsx
+++ b/client/src/routes/UserRoute.jsx
@@ -3,38 +3,52 @@ import { Route, Routes } from "react-router";
 import Loader from "../components/Loader/Loader1/Loader";
 import Authenticate from "../components/Auth/Authenticate";
 import Protect from "../components/Auth/Protect";
+import Community from "../pages/UserPages/Community/Community";
 
 const Home = lazy(() => import("../pages/UserPages/Home/Home"));
 const Signup = lazy(() => import("../pages/UserPages/Signup/Signup"));
 const Login = lazy(() => import("../pages/UserPages/Login/Login"));
 const MyMindPage = lazy(() =>
-  import("../pages/UserPages/MyMindPage/MyMindPage")
+     import("../pages/UserPages/MyMindPage/MyMindPage")
 );
 const MyLawsPage = lazy(() =>
-  import("../pages/UserPages/MyLawsPage/MyLawsPage")
+     import("../pages/UserPages/MyLawsPage/MyLawsPage")
 );
 const MyBodyPage = lazy(() =>
-  import("../pages/UserPages/MyBodyPage/MyBodyPage")
+     import("../pages/UserPages/MyBodyPage/MyBodyPage")
 );
 
 export default function UserRoute() {
-  return (
-    <>
-      <Suspense fallback={<Loader />}>
-        <Routes>
-          <Route element={<Authenticate />}>
-            <Route path={"/"} element={<Home />} />
-            <Route path={"/signup"} element={<Signup />} />
-            <Route path={"/login"} element={<Login />} />
-          </Route>
-          <Route element={<Protect role="USER" />}>
-            <Route path={"/home"} element={<Home />} />
-            <Route path={"/my-mind"} element={<MyMindPage />} />
-            <Route path={"/my-rights"} element={<MyLawsPage />} />
-            <Route path={"/my-body"} element={<MyBodyPage />} />
-          </Route>
-        </Routes>
-      </Suspense>
-    </>
-  );
+     return (
+          <>
+               <Suspense fallback={<Loader />}>
+                    <Routes>
+                         <Route element={<Authenticate />}>
+                              <Route path={"/"} element={<Home />} />
+                              <Route path={"/signup"} element={<Signup />} />
+                              <Route path={"/login"} element={<Login />} />
+                         </Route>
+                         <Route element={<Protect role="USER" />}>
+                              <Route path={"/home"} element={<Home />} />
+                              <Route
+                                   path={"/my-mind"}
+                                   element={<MyMindPage />}
+                              />
+                              <Route
+                                   path={"/my-rights"}
+                                   element={<MyLawsPage />}
+                              />
+                              <Route
+                                   path={"/my-body"}
+                                   element={<MyBodyPage />}
+                              />
+                              <Route
+                                   path={"/community/:tab"}
+                                   element={<Community />}
+                              />
+                         </Route>
+                    </Routes>
+               </Suspense>
+          </>
+     );
 }
diff --git a/server/middlewares/authMiddleware.js b/server/middlewares/authMiddleware.js
index 03926e6..566632e 100644
--- a/server/middlewares/authMiddleware.js
+++ b/server/middlewares/authMiddleware.js
@@ -5,6 +5,7 @@ const mongoose = require('mongoose');
 const isLogedIn = async (req, res, next) => {
     try {
         const token = req.cookies.token;
+        console.log(token)
         if (token) {
             const decoded = jwt.verify(token, process.env.JWT_SECRET);
             const userId = new mongoose.Types.ObjectId(decoded.id)