Index: client/src/CreatePost/CreatePost.jsx
===================================================================
--- client/src/CreatePost/CreatePost.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
+++ client/src/CreatePost/CreatePost.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+
+const CreatePost = () => {
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Post submitted:", { title, content });
+    // Add your submission logic here
+  };
+
+  return (
+    <div
+      data-theme="luxury"
+      className="flex items-center justify-center min-h-screen"
+    >
+      <form
+        className="p-8 rounded-lg shadow-md w-full max-w-md border"
+        onSubmit={handleSubmit}
+      >
+        <h2 className="text-2xl font-bold mb-6">Create a Post</h2>
+        <div className="mb-4">
+          <label htmlFor="title" className="block text-sm font-medium  mb-2">
+            Title
+          </label>
+          <input
+            type="text"
+            id="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            className="w-full px-4 py-2 border  rounded-lg focus:outline-none focus:ring-2 "
+          />
+        </div>
+        <div className="mb-6">
+          <label htmlFor="content" className="block text-sm font-medium ">
+            Content
+          </label>
+          <textarea
+            id="content"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            rows="10"
+            required
+            className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 "
+          ></textarea>
+        </div>
+        <button
+          type="submit"
+          className="btn btn-active w-full  py-2 px-4 rounded-lg hover: transition duration-200"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default CreatePost;
Index: client/src/Dashboard/Dashboard.jsx
===================================================================
--- client/src/Dashboard/Dashboard.jsx	(revision 9099ba78de05917397df8cf2414a6935d0b452dc)
+++ client/src/Dashboard/Dashboard.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import logoIcon from "../assets/images/logoIcon.png";
+import logoText from "../assets/images/logoText.png";
+import pp from "../assets/images/pp.svg";
+
+import Task from "./components/Task";
+import LeaderBoardEx from "@/LandingPage/components/LeaderBoardEx";
+import Forum from "./components/Forum";
+import Profile from "./components/Profile";
+
+const Dashboard = () => {
+  const [activePage, setActivePage] = useState("home");
+
+  const renderPage = () => {
+    switch (activePage) {
+      case "home":
+        return <Task />;
+      case "competitions":
+        return <Forum />;
+      case "leaderboard":
+        return <LeaderBoardEx />;
+      case "profile":
+        return <Profile />;
+      default:
+        return (
+          <div className="text-center text-xl font-semibold">
+            Page Not Found
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div data-theme="luxury" className="dashboard min-h-screen flex">
+      <nav className="dashboard__navbar w-70 p-2 flex flex-col items-center border-r">
+        <div className="flex space-x-4 mb-10 mt-2.5">
+          <a href="/" className="flex items-center space-x-4">
+            <img src={logoIcon} alt="Logo 1" className="w-18" />
+            <img src={logoText} alt="Logo 2" className="w-40" />
+          </a>
+        </div>
+        <ul className="flex flex-col space-y-4 flex-grow">
+          <li
+            className={`cursor-pointer ${
+              activePage === "home" ? "font-bold underline" : ""
+            }`}
+            onClick={() => setActivePage("home")}
+          >
+            Task of the Day
+          </li>
+          <li
+            className={`cursor-pointer ${
+              activePage === "leaderboard" ? "font-bold underline" : ""
+            }`}
+            onClick={() => setActivePage("leaderboard")}
+          >
+            Leaderboard
+          </li>
+          <li
+            className={`cursor-pointer ${
+              activePage === "competitions" ? "font-bold underline" : ""
+            }`}
+            onClick={() => setActivePage("competitions")}
+          >
+            Forum
+          </li>
+        </ul>
+        <div
+          className={`cursor-pointer dashboard__profile flex flex-row gap-10 items-center mt-auto ${
+            activePage === "profile" ? "font-bold" : ""
+          }`}
+          onClick={() => setActivePage("profile")}
+        >
+          <img
+            src={pp}
+            alt="Profile"
+            className="dashboard__profile-picture w-12 h-12 rounded-full border"
+          />
+          <p className="font-medium mt-2">John Doe</p>
+        </div>
+      </nav>
+      <main className="dashboard__content flex-1 p-6">{renderPage()}</main>
+    </div>
+  );
+};
+
+export default Dashboard;
Index: client/src/Dashboard/components/Forum.jsx
===================================================================
--- client/src/Dashboard/components/Forum.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
+++ client/src/Dashboard/components/Forum.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,79 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import commentIcon from "../../assets/images/comment.svg";
+import likeIcon from "../../assets/images/like.svg";
+
+const Forum = () => {
+  const navigate = useNavigate();
+
+  const posts = [
+    {
+      id: 1,
+      title: "How to learn React?",
+      author: "John Doe",
+      content:
+        "React is a popular JavaScript library for building user interfaces. Start by learning the basics of components, state, and props.",
+    },
+    {
+      id: 2,
+      title: "Best practices for Tailwind CSS",
+      author: "Jane Smith",
+      content:
+        "Tailwind CSS is a utility-first CSS framework. Use consistent class naming and leverage configuration files for customization.",
+    },
+    {
+      id: 3,
+      title: "Understanding JavaScript closures",
+      author: "Alice Johnson",
+      content:
+        "Closures are a fundamental concept in JavaScript. They allow functions to access variables from their outer scope even after the outer function has returned.",
+    },
+  ];
+
+  return (
+    <div className="flex flex-col md:flex-row gap-6 p-6">
+      {/* Forum Posts */}
+      <div className="flex-1">
+        <h1 className="text-2xl font-bold mb-4">Forum Posts</h1>
+        <div className="space-y-4">
+          {posts.map((post) => (
+            <div
+              key={post.id}
+              className="p-4 border rounded-lg shadow-sm hover:shadow-md transition"
+            >
+              <h2 className="text-lg font-semibold">{post.title}</h2>
+              <p className="text-sm text-gray-500">By {post.author}</p>
+              <p className="mt-2 text-gray-700">{post.content}</p>
+              <div className="mt-4 flex gap-4">
+                <img
+                  src={commentIcon}
+                  alt="Comment"
+                  className="w-6 h-6 cursor-pointer hover:opacity-80"
+                />
+                <img
+                  src={likeIcon}
+                  alt="Like"
+                  className="w-6 h-6 cursor-pointer hover:opacity-80"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Create a Post Button */}
+      <div className="w-full md:w-1/4">
+        <div className=" flex items-center justify-center">
+          <button
+            onClick={() => navigate("/create-post")}
+            className="cursor-pointer px-6 py-3 bg-yellow-500 text-black rounded hover:bg-yellow-600"
+          >
+            Create a Post
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Forum;
Index: client/src/Dashboard/components/Profile.jsx
===================================================================
--- client/src/Dashboard/components/Profile.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
+++ client/src/Dashboard/components/Profile.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,41 @@
+import React from "react";
+import pp from "../../assets/images/pp.svg";
+
+const Profile = () => {
+  return (
+    <div
+      data-theme="luxury"
+      className="flex flex-col items-center p-6 bg-base-200"
+    >
+      <div className="card w-full max-w-md bg-base-100 shadow-xl">
+        <div className="card-body items-center text-center">
+          <div className="avatar">
+            <div className="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
+              <img src={pp} alt="Profile" />
+            </div>
+          </div>
+          <h2 className="card-title mt-4">John Doe</h2>
+          <p className="text-gray-500">johndoe@students.finki.ukim.mk</p>
+          <div className="mt-4">
+            <p className="text-lg">
+              <span className="font-bold">Rank:</span> Gold
+            </p>
+            <p className="text-lg">
+              <span className="font-bold">Points:</span> 1200
+            </p>
+          </div>
+          <div className="mt-6">
+            <a href="/" className="btn btn-action btn-sm mx-2">
+              Sign Out
+            </a>
+            <a href="/register" className="btn btn-action btn-sm mx-2">
+              Create New Account
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;
Index: client/src/Dashboard/components/Task.jsx
===================================================================
--- client/src/Dashboard/components/Task.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
+++ client/src/Dashboard/components/Task.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+
+const Task = () => {
+  const [showTask, setShowTask] = useState(false);
+  const today = new Date().toLocaleDateString();
+
+  const handleStart = () => {
+    setShowTask(true);
+  };
+
+  return (
+    <div
+      className="flex flex-col items-center justify-center p-6 rounded-lg shadow-lg"
+      data-theme="luxury"
+    >
+      {!showTask ? (
+        <>
+          <h1 className="text-4xl font-bold mb-4">The task for: {today}</h1>
+          <p className="text-center mb-6 w-80">
+            Welcome! Please make sure to follow the rules: Stay respectful, stay
+            focused, and have fun!
+            <br />
+            <br />
+            <strong>Note:</strong> The task will be available for 24 hours.
+            <br />
+            <br />
+            <strong>Rules for grading:</strong>The task will be graded based on
+            the time of submission.
+            <br />
+            <br />
+            The earlier you submit, the better your score. Also the number of
+            attempts will be taken into account.
+            <br />
+            <br />
+            The more attempts you make, the worse your score will be.
+          </p>
+          <button
+            onClick={handleStart}
+            className="btn btn-active text-5xl px-14 py-10 mt-8 border rounded"
+          >
+            Start Now
+          </button>
+        </>
+      ) : (
+        <>
+          <h1 className="text-4xl font-bold mb-6">Your Task</h1>
+          <p className="text-center text-2xl mb-8">
+            <strong>Solve the following problem:</strong> Reverse a string.In
+            this task, you are required to write a function that takes a string
+            as input and returns a new string that is the reverse of the
+            original. For example, if the input string is "hello", the reversed
+            version should be "olleh". Similarly, if the input is "world", the
+            output should be "dlrow". However, you are not allowed to use any
+            built-in functions or shortcuts like Python's slicing syntax
+            ([::-1]) or the reverse() method. Instead, you should manually
+            reverse the string using a loop, stack, or another approach that
+            shows your understanding of how strings can be manipulated.{" "}
+          </p>
+          <div className=" p-4 rounded-lg mb-6">
+            <p>
+              Your unique input: <strong>ANDREJ</strong>
+            </p>
+            <p className="mt-3.5">
+              Use this on your local code editor and paste the output below
+            </p>
+          </div>
+          <div className="mb-8 border p-4 rounded-lg">
+            <h2 className="text-3xl font-semibold">Example:</h2>
+            <p className="text-xl">
+              <strong>Input:</strong> "hello"
+            </p>
+            <p className="text-xl">
+              <strong>Desired Output:</strong> "olleh"
+            </p>
+          </div>
+          <div className="flex flex-col items-center">
+            <input
+              type="text"
+              placeholder="Enter your solution"
+              className="border p-4 mb-6 w-96 text-xl rounded-lg"
+            />
+            <button className="btn btn-action px-10 py-6 text-2xl rounded-lg">
+              Submit
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Task;
Index: client/src/assets/images/comment.svg
===================================================================
--- client/src/assets/images/comment.svg	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
+++ client/src/assets/images/comment.svg	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#dba54d"><path d="M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>
Index: client/src/assets/images/like.svg
===================================================================
--- client/src/assets/images/like.svg	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
+++ client/src/assets/images/like.svg	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#dba54d"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
Index: client/src/assets/images/pp.svg
===================================================================
--- client/src/assets/images/pp.svg	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
+++ client/src/assets/images/pp.svg	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#dba54d"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
Index: client/src/main.jsx
===================================================================
--- client/src/main.jsx	(revision 9099ba78de05917397df8cf2414a6935d0b452dc)
+++ client/src/main.jsx	(revision b006471d9f73788fb4d2a0c3de63148f3bcffc92)
@@ -7,4 +7,7 @@
 import Login from "./LogIn/LogIn";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Dashboard from "./Dashboard/Dashboard";
+import CreatePost from "./CreatePost/CreatePost";
+
 createRoot(document.getElementById("root")).render(
   <StrictMode>
@@ -14,4 +17,6 @@
         <Route path="/register" element={<Register />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/create-post" element={<CreatePost />} />
       </Routes>
     </Router>