diff --git a/client/public/icon6.jpg b/client/public/icon6.jpg
new file mode 100644
index 0000000..3e3626a
Binary files /dev/null and b/client/public/icon6.jpg differ
diff --git a/client/public/index.html b/client/public/index.html
index aa069f2..1414a24 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/icon6.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon6.jpg" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+   
+      <link rel="stylesheet" href="style.css">
+    
+    
+    <title>Stack Bwall</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -39,5 +43,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    
+
   </body>
 </html>
diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index 4d5c928..572d5e4 100644
--- a/client/src/components/Dashboard.jsx
+++ b/client/src/components/Dashboard.jsx
@@ -1,27 +1,27 @@
 import React from "react";
-import Logo from "../components/assets/stackwall.png";
 import "flowbite";
 import Events from "./columns/Events";
 import Leaderboard from "./columns/Leaderboard";
 import Feeds from "./columns/Feeds";
 import "./columns/style.css";
+import TopOfTheMonth from "./columns/TopofTheMonth";
 
 const Dashboard = () => {
   return (
-    <body class=" grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 max-h-screen overflow-x-hidden">
-      <div className="Leaderboard">
+    <body className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 max-h-screen overflow-x-hidden">
+      <div className="Leaderboard" style={{ margin: "10px" }}>
         <Leaderboard />
       </div>
 
-      <div className="col-span-2">
+      <div className="col-span-2" style={{ margin: "10px" }}>
         <Events />
       </div>
 
-      <div className="items-center justify-center md:px-4 xs:mx-auto">
+      <div className="md:px-4 xs:mx-auto" style={{ marginTop: "10px", marginBottom: "30px", marginRight: "10px" }}>
+        <TopOfTheMonth />
         <Feeds />
       </div>
     </body>
-
   );
 };
 
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 9cfa280..45b8e7f 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Logo from "../components/assets/stackwall.png";
+import Logo from "../components/assets/stackb.png";
 import User from "../components/assets/Pragados.png";
 import "flowbite";
 const Navbar = () => {
@@ -29,9 +29,9 @@ const Navbar = () => {
         <nav class="border-gray-200 bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
           <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-1.5">
             <a href="#" class="flex items-center">
-              <img src={Logo} class="h-8 mr-3" alt="stackbwall Logo" />
+              <img src={Logo} class="h-12 mr-3" alt="stackbwall Logo" />
               <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
-                StackBWall
+
               </span>
             </a>
             <div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
@@ -44,6 +44,7 @@ const Navbar = () => {
                   class="w-10 h-10 rounded-full cursor-pointer"
                   src={User}
                   alt="User dropdown"
+                  style={{ border: "2px solid #ec581d" }}
                 />
               </div>
               <div>
@@ -95,12 +96,12 @@ const Navbar = () => {
                     </form>
                     <div class="max-h-72 overflow-y-scroll w-82">
                       <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12">
-                        <div class=" text-center ">
+                        <div class="text-center">
                         </div>
                         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
+                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
                             <div class="mb-8">
-                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
+                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
                             </div>
                             <div class="text-center">
                               <p class="text-xl text-gray-700 font-bold mb-2">Dany Bailey</p>
@@ -108,9 +109,9 @@ const Navbar = () => {
                               <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
                             </div>
                           </div>
-                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
+                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
                             <div class="mb-8">
-                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
+                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
                             </div>
                             <div class="text-center">
                               <p class="text-xl text-gray-700 font-bold mb-2">Lucy Carter</p>
@@ -118,9 +119,9 @@ const Navbar = () => {
                               <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
                             </div>
                           </div>
-                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
+                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
                             <div class="mb-8">
-                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" />
+                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
                             </div>
                             <div class="text-center">
                               <p class="text-xl text-gray-700 font-bold mb-2">Jade Bradley</p>
@@ -128,9 +129,9 @@ const Navbar = () => {
                               <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
                             </div>
                           </div>
-                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
+                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
                             <div class="mb-8">
-                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
+                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
                             </div>
                             <div class="text-center">
                               <p class="text-xl text-gray-700 font-bold mb-2">Dany Bailey</p>
@@ -138,9 +139,9 @@ const Navbar = () => {
                               <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
                             </div>
                           </div>
-                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
+                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
                             <div class="mb-8">
-                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" />
+                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
                             </div>
                             <div class="text-center">
                               <p class="text-xl text-gray-700 font-bold mb-2">Lucy Carter</p>
@@ -148,9 +149,9 @@ const Navbar = () => {
                               <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Vote</button>
                             </div>
                           </div>
-                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center">
+                          <div class="w-full bg-white rounded-lg p-12 flex flex-col justify-center items-center custom-card-shadow">
                             <div class="mb-8">
-                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" />
+                              <img class="object-center object-cover rounded-full h-36 w-36" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1176&q=80" alt="photo" style={{ border: "3px solid blue" }}/>
                             </div>
                             <div class="text-center">
                               <p class="text-xl text-gray-700 font-bold mb-2">Jade Bradley</p>
diff --git a/client/src/components/assets/medalk.png b/client/src/components/assets/medalk.png
new file mode 100644
index 0000000..7812dfe
Binary files /dev/null and b/client/src/components/assets/medalk.png differ
diff --git a/client/src/components/assets/medall.png b/client/src/components/assets/medall.png
new file mode 100644
index 0000000..ac4fa68
Binary files /dev/null and b/client/src/components/assets/medall.png differ
diff --git a/client/src/components/assets/stackb.png b/client/src/components/assets/stackb.png
new file mode 100644
index 0000000..45d7cf5
Binary files /dev/null and b/client/src/components/assets/stackb.png differ
diff --git a/client/src/components/columns/Events.jsx b/client/src/components/columns/Events.jsx
index 691ecdd..60db33e 100644
--- a/client/src/components/columns/Events.jsx
+++ b/client/src/components/columns/Events.jsx
@@ -9,11 +9,16 @@ const Events = () => {
   return (
     <>
       <div
-        id=" custom-controls-gallery"
-        class="relativey w-auto pt-2 pb-8"
+        id="custom-controls-gallery"
+        className="relativey  mx-auto mt-3 pt-2 pb-8"
         data-carousel="slide"
+        style={{
+          border: "2px solid transparent",
+          boxShadow: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 5px px",
+        }}
       >
         <div class="flex items-center justify-center min-h-fit shadow-lg shadow-offset-x-8 shadow-right relative h-80 flex-wrap overflow-hidden rounded-lg">
+
           <div class=" duration-700 ease-in-out" data-carousel-item="active">
             <img
               src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
@@ -99,25 +104,22 @@ const Events = () => {
       </div>
 
 
-      <div class="grid-col-2 px-2 py-2 flex flex-col align-middle bg-white rounded-lg shadow-lg dark:border-gray-700">
+      <div class="flex flex-col align-middle mx-8 mb-5 mt-0 w-82 bg-blue border border-white rounded-lg shadow-lg" style={{ border: '2px solid transparent', boxShadow: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px" }}>
         <div class="grid grid-cols-2">
-          {/* Top Voted */}
-          <div class="grid grid-cols-1 px-4">
-            <h5 class="text-xl text-center font-bold leading-none text-orange-500  dark:text-white">
+
+          <div class="grid grid-cols-1 mt-4 mb-2 px-4">
+            <h5 class="text-xl text-center font-bold leading-none text-orange-500 dark:text-white">
               Top Favorite
             </h5>
-
-            <ul
-              role="list"
-              class="divide-y divide-white dark:divide-gray-300"
-            >
-              <li class="pt-3">
-                <div class="flex items-center space-x-4">
-                  <div class="flex-shrink-0">
+            <ul role="list" class="divide-y divide-white dark:divide-gray-300">
+              <li class="pt-3 pb-0 sm:pt-4">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
+                  <div class="flex-shrink-0 ">
                     <img
-                      class="w-8 h-8 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       src={User}
                       alt="Neil image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -148,12 +150,13 @@ const Events = () => {
                 </div>
               </li>
               <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       src={User1}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -184,12 +187,13 @@ const Events = () => {
                 </div>
               </li>
               <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex items-center space-x-4 flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       src={User2}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -223,22 +227,20 @@ const Events = () => {
           </div>
 
           {/* Top Performers */}
-          <div>
-            <div class="grid grid-cols-1 px-4">
-              <h5 class="text-xl text-center font-bold leading-none text-orange-500  dark:text-white">
+          <div style={{ marginBottom: "5px" }}>
+            <div class="grid grid-cols-1 mt-4 px-4" >
+              <h5 class="text-xl text-center font-bold leading-none text-orange-500 dark:text-white">
                 Top Performers
               </h5>
-              <ul
-                role="list"
-                class="divide-y divide-white dark:divide-gray-200"
-              >
+              <ul role="list" class="divide-y divide-white dark:divide-gray-200">
                 <li class="pt-4">
-                  <div class="flex items-center space-x-4">
+                  <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                     <div class="flex-shrink-0">
                       <img
-                        class="w-8 h-8 rounded-full"
+                        class="w-10 h-10 rounded-full"
                         src={User}
                         alt="Neil image"
+                        style={{ border: "2px solid #ec581d" }}
                       />
                     </div>
                     <div class="flex-1 min-w-0">
@@ -269,12 +271,13 @@ const Events = () => {
                   </div>
                 </li>
                 <li class="pt-3 pb-0 sm:pt-4">
-                  <div class="flex items-center space-x-4">
+                  <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                     <div class="flex-shrink-0">
                       <img
-                        class="w-8 h-8 rounded-full"
+                        class="w-10 h-10 rounded-full"
                         src={User1}
                         alt="Thomas image"
+                        style={{ border: "2px solid #ec581d" }}
                       />
                     </div>
                     <div class="flex-1 min-w-0">
@@ -305,12 +308,13 @@ const Events = () => {
                   </div>
                 </li>
                 <li class="pt-3 pb-0 sm:pt-4">
-                  <div class="flex items-center space-x-4">
+                  <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                     <div class="flex-shrink-0">
                       <img
-                        class="w-8 h-8 rounded-full"
+                        class="w-10 h-10 rounded-full"
                         src={User2}
                         alt="Thomas image"
+                        style={{ border: "2px solid #ec581d" }}
                       />
                     </div>
                     <div class="flex-1 min-w-0">
diff --git a/client/src/components/columns/Feeds.jsx b/client/src/components/columns/Feeds.jsx
index 27fa49c..abbb1e1 100644
--- a/client/src/components/columns/Feeds.jsx
+++ b/client/src/components/columns/Feeds.jsx
@@ -1,144 +1,26 @@
 import React, { useState, useEffect } from "react";
 import "flowbite";
-import User3 from "../assets/icon3.jpg";
-import User4 from "../assets/icon4.png";
-import User5 from "../assets/icon5.jpg";
 import ActivityLog from "./ActivityLog";
 
+
 const Feeds = () => {
   return (
     <>
-      <div class="flex flex-col align-middle mx-8 mb-10 mt-4 w-82 bg-white border border-white rounded-lg shadow-lg">
-        <div class="flex items-center justify-center">
-          <h5 class="text-xl font-bold leading-none text-orange-500  dark:text-white">
-            Top of the Month
-          </h5>
+
+     
+      <div class="flex flex-col align-middle mr-1 ml-4 mb-10 mt-5 w-82 bg-blue border border-white rounded-lg shadow-lg"
+        style={{ border: '2px solid transparent', boxShadow: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px" }}>
+        <div class="md:px-4 xs:mx-auto" style={{ marginTop: "20px" }}>
         </div>
-        <div class="flow-root">
-          <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
-            <li class="py-2 sm:py-2">
-              <div class="flex items-center space-x-2">
-                <div class="flex-shrink-0">
-                  <img
-                    class="w-8 h-8 rounded-full"
-                    src={User3}
-                    alt="Neil image"
-                  />
-                </div>
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-                    Joseph Angelo Progados
-                  </p>
-                  <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-                    Students
-                  </p>
-                </div>
-                <div class="inline-flex items-center text-base font-medium text-gray-900 dark:text-white">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="blue"
-                    viewBox="0 0 24 24"
-                    stroke-width=".5"
-                    stroke="currentColor"
-                    class="w-6 h-6"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
-                    />
-                  </svg>{" "}
-                  5000
-                </div>
-              </div>
-            </li>
-            <li class="pt-1 sm:pt-2">
-              <div class="flex items-center space-x-2">
-                <div class="flex-shrink-0">
-                  <img
-                    class="w-8 h-8 rounded-full"
-                    src={User4}
-                    alt="Thomas image"
-                  />
-                </div>
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-                    Vonnn Einuj Anre Sabusap
-                  </p>
-                  <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-                    Students
-                  </p>
-                </div>
-                <div class="inline-flex items-center text-base font-medium text-gray-900 dark:text-white">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="blue"
-                    viewBox="0 0 24 24"
-                    stroke-width=".5"
-                    stroke="currentColor"
-                    class="w-6 h-6"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
-                    />
-                  </svg>{" "}
-                  4000
-                </div>
-              </div>
-            </li>
-            <li class="pt-3 pb-0 sm:pt-4">
-              <div class="flex items-center space-x-2">
-                <div class="flex-shrink-0">
-                  <img
-                    class="w-8 h-8 rounded-full"
-                    src={User5}
-                    alt="Thomas image"
-                  />
-                </div>
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-                    Thomes Lean
-                  </p>
-                  <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-                    Students
-                  </p>
-                </div>
-                <div class="inline-flex items-center text-base font-medium text-gray-900 dark:text-white">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="blue"
-                    viewBox="0 0 24 24"
-                    stroke-width=".5"
-                    stroke="currentColor"
-                    class="w-6 h-6"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
-                    />
-                  </svg>{" "}
-                  3000
-                </div>
-              </div>
-            </li>
-          </ul>
+        <div className="flex items-center justify-center mt-1 mb-1">
+          <h1 className="mt-4 flex items-center justify-center text-xl font-bold leading-none text-orange-500  dark:text-white">
+            Feeds
+          </h1>
+        </div>
+        <div className="max-h-72 overflow-y-scroll flex flex-col align-middle mx-8 mb-10 mt-4 w-82 bg-white border border-white rounded-lg shadow-lg ">
+          <ActivityLog />
         </div>
       </div>
-
-      <h1 className="mt-4 flex items-center justify-center text-xl font-bold leading-none text-orange-500  dark:text-white">
-        Feeds
-      </h1>
-
-      <div className="max-h-72 overflow-y-scroll flex flex-col align-middle mx-8 mb-10 mt-4 w-82 bg-white border border-white rounded-lg shadow-lg ">
-        <ActivityLog />
-      </div>
-
-      <script src="https://unpkg.com/flowbite@1.4.0/dist/flowbite.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
-      <script src="../path/to/flowbite/dist/flowbite.min.js"></script>
     </>
   );
 };
diff --git a/client/src/components/columns/Leaderboard.jsx b/client/src/components/columns/Leaderboard.jsx
index 76be2a3..e52fefc 100644
--- a/client/src/components/columns/Leaderboard.jsx
+++ b/client/src/components/columns/Leaderboard.jsx
@@ -1,83 +1,136 @@
-import React from "react";
-import "flowbite";
+import React, { useState } from "react";
 import User from "../assets/icon.jpg";
 import User1 from "../assets/icon1.jpg";
+import User2 from "../assets/icon2.jpg";
+import User3 from "../assets/icon3.jpg";
+import User4 from "../assets/icon4.png";
+import User5 from "../assets/icon5.jpg";
+import Med from "../assets/medal.png";
+import Med1 from "../assets/medalk.png";
+import Med2 from "../assets/medall.png";
 
 const Leaderboard = () => {
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const handleItemClick = (index) => {
+    setSelectedItem(index);
+  };
+
+  const handleItemHover = (index) => {
+    setSelectedItem(selectedItem === index ? null : index);
+  };
+
   return (
     <>
-      <div class="flex items-center justify-center px-8">
-        <div class="flex-auto px-2 py-2 drop-shadow-xl mt-4 w-72 dark:bg-white rounded-lg bg-white dark:border-gray-300">
-          <div class="flex items-center justify-center mb-2">
-            <h5 class="text-xl font-bold leading-none text-orange-500 dark:text-white">
+      <div className="flex items-center justify-center mr-5 ml-5 mt-2 px-4 md:px-8">
+        <div
+          className="flex-auto px-2 py-2 drop-shadow-xl mt-3 mb-3 max-w-3xl bg-blue border border-white rounded-lg shadow-lg"
+          style={{
+            border: '2px solid transparent',
+            boxShadow: 'rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px',
+          }}
+        >
+          <div className="flex items-center justify-center mt-2 mb-">
+            <h5 className="text-xl font-bold leading-none text-orange-500 dark:text-white">
               Leaderboard
             </h5>
+
+
           </div>
-          <div class="flow-root">
+          <div className="flow-root">
             <ul role="list">
-              <li class="pt-3 pb-0 sm:pt-2">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
+                      className="w-10 h-10 rounded-full"
                       src={User}
+                      alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
+                  <div className="flex-1 min-w-0">
+
+                    <p className="text-sm font-medium text--900 truncate text-black">
                       Edvenson Jay
                     </p>
                     <p class="text-sm text-gray-500 truncate dark:text-gray-400">
                       email@windster.com
                     </p>
                   </div>
-                  <div class="flex-2 min-w-0">
-                    <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
+                  <div className="flex-2 min-w-0">
+                    <img
+                      className="w-8 h-8"
+                      src={Med}
+                      alt="Thomas image"
+
+                    />
+                  </div>
+                  <div className="flex-2 min-w-0">
+                    <p className="text-sm font-medium text-black-900 truncate text-grey">
                       3205
                     </p>
                     <p class="text-sm text-gray-500 truncate dark:text-gray-400">
                       points
                     </p>
+
                   </div>
+
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       src={User1}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
+
                     <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-                      Vonnn einuj anre sabusap
+                      Vonnn Einuj Anre Sabusap
                     </p>
                     <p class="text-sm text-gray-500 truncate dark:text-gray-400">
                       email@windster.com
                     </p>
                   </div>
+                  <div className="flex-2 min-w-0">
+                    <img
+                      className="w-8 h-8"
+                      src={Med1}
+                      alt="Thomas image"
+
+                    />
+                  </div>
                   <div class="flex-2 min-w-0">
+
                     <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
                       3201
                     </p>
                     <p class="text-sm text-gray-500 truncate dark:text-gray-400">
                       points
                     </p>
+
                   </div>
+
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
-                      src={User}
+                      class="w-10 h-10 rounded-full"
+                      src={User2}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
+
                     <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
                       Michael Gough
                     </p>
@@ -85,23 +138,35 @@ const Leaderboard = () => {
                       email@windster.com
                     </p>
                   </div>
+                  <div className="flex-2 min-w-0">
+                    <img
+                      className="w-8 h-8"
+                      src={Med2}
+                      alt="Thomas image"
+
+                    />
+                  </div>
                   <div class="flex-2 min-w-0">
+
                     <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
                       3203
                     </p>
                     <p class="text-sm text-gray-500 truncate dark:text-gray-400">
                       points
                     </p>
+
                   </div>
+
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
-                      src={User}
+                      class="w-10 h-10 rounded-full"
+                      src={User3}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -122,13 +187,14 @@ const Leaderboard = () => {
                   </div>
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
-                      src={User}
+                      class="w-10 h-10 rounded-full"
+                      src={User4}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -149,13 +215,14 @@ const Leaderboard = () => {
                   </div>
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
-                      src={User}
+                      class="w-10 h-10 rounded-full"
+                      src={User5}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -176,13 +243,14 @@ const Leaderboard = () => {
                   </div>
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
+                      class="w-10 h-10 rounded-full"
                       src={User}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -203,13 +271,14 @@ const Leaderboard = () => {
                   </div>
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
-                      src={User}
+                      class="w-10 h-10 rounded-full"
+                      src={User1}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -230,13 +299,14 @@ const Leaderboard = () => {
                   </div>
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
-                      src={User}
+                      class="w-10 h-10 rounded-full"
+                      src={User2}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -257,13 +327,14 @@ const Leaderboard = () => {
                   </div>
                 </div>
               </li>
-              <li class="pt-3 pb-0 sm:pt-4">
-                <div class="flex items-center space-x-4">
+              <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-1 mt-3">
+                <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
                   <div class="flex-shrink-0">
                     <img
-                      class="w-8 h-8 rounded-full"
-                      src={User}
+                      class="w-10 h-10 rounded-full"
+                      src={User3}
                       alt="Thomas image"
+                      style={{ border: "2px solid #ec581d" }}
                     />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -286,8 +357,11 @@ const Leaderboard = () => {
               </li>
             </ul>
           </div>
+
         </div>
       </div>
+
+
       <script src="https://unpkg.com/flowbite@1.4.0/dist/flowbite.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
       <script src="../path/to/flowbite/dist/flowbite.min.js"></script>
diff --git a/client/src/components/columns/TopofTheMonth.jsx b/client/src/components/columns/TopofTheMonth.jsx
new file mode 100644
index 0000000..f7c7d09
--- /dev/null
+++ b/client/src/components/columns/TopofTheMonth.jsx
@@ -0,0 +1,155 @@
+import React from "react";
+import User3 from "../assets/icon3.jpg";
+import User4 from "../assets/icon4.png";
+import User5 from "../assets/icon5.jpg";
+
+const TopOfTheMonth = () => {
+  return (
+    <div className="flex items-center justify-center mt-2 mb-2">
+      <div
+        className="flex flex-col align-middle mr-1 ml-4 mb-10 mt-4 my-5 max-w-3xl px-2 rounded"
+        style={{
+          border: "2px solid transparent",
+          boxShadow:
+            "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px",
+          marginBottom: "20px"
+        }}
+      >
+        <div className="flex items-center justify-center mt-4 mb-1">
+          <h5 className="text-xl font-bold leading-none text-orange-500 dark:text-white">
+            Top of the Month
+          </h5>
+        </div>
+        <div className="flow-root">
+          <ul
+            role="list"
+            className="divide-y divide-gray-200 dark:divide-gray-700"
+          >
+            <li className="pt-2 pb-0 sm:pt-2 pr-2 pl-2 mt-3">
+              <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
+                <div class="flex-shrink-0">
+                  <img
+                    class="w-10 h-10 rounded-full"
+                    src={User3}
+                    alt="Thomas image"
+                    style={{ border: "2px solid #ec581d" }}
+                  />
+                </div>
+                <div
+                  className="flex-1 min-w-0 mr-4"
+                  style={{ textAlign: "justify" }}
+                >
+                  <p className="text-justify text-sm font-medium text-gray-900 truncate dark:text-white px-2">
+                    Joseph Angelo Progados
+                  </p>
+                  <p className="text-sm text-gray-500 truncate dark:text-gray-400 px-2">
+                    Students
+                  </p>
+                </div>
+                <div className="inline-flex items-center text-base font-medium text-gray-900 dark:text-white">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="blue"
+                    viewBox="0 0 24 24"
+                    strokeWidth=".5"
+                    stroke="currentColor"
+                    className="w-6 h-6"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+                    />
+                  </svg>{" "}
+                  5000
+                </div>
+              </div>
+            </li>
+            <li className="pt-3 pb-0 sm:pt-2 pr-2 pl-2 mt-3">
+              <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
+                <div class="flex-shrink-0">
+                  <img
+                    class="w-10 h-10 rounded-full"
+                    src={User4}
+                    alt="Thomas image"
+                    style={{ border: "2px solid #ec581d" }}
+                  />
+                </div>
+                <div
+                  className="flex-1 min-w-0 mr-4"
+                  style={{ textAlign: "justify" }}
+                >
+                  <p className=" text-justify text-sm font-medium text-gray-900 truncate dark:text-white px-2">
+                    Vonnn Einuj Anre Sabusap
+                  </p>
+                  <p className="text-sm text-gray-500 truncate dark:text-gray-400 px-2">
+                    Students
+                  </p>
+                </div>
+                <div className="inline-flex items-center text-base font-medium text-gray-900 dark:text-white">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="blue"
+                    viewBox="0 0 24 24"
+                    strokeWidth=".5"
+                    stroke="currentColor"
+                    className="w-6 h-6"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+                    />
+                  </svg>{" "}
+                  4000
+                </div>
+              </div>
+            </li>
+            <li className="pt-3 pb-2 sm:pt-2 pr-2 pl-2 mt-3">
+              <div className="flex items-center space-x-4 hover:bg-orange-400 dark:hover:bg-orange-500 rounded">
+                <div className="flex-shrink-0">
+                  <img
+                    class="w-10 h-10 rounded-full"
+                    src={User5}
+                    alt="Thomas image"
+                    style={{ border: "2px solid #ec581d" }}
+                  />
+                </div>
+                <div
+                  className="flex-1 min-w-0 mb-2"
+                  style={{ textAlign: "justify" }}
+                >
+                  <p className="text-justify text-sm font-medium text-gray-900 truncate dark:text-white px-2">
+                    Thomes Lean
+                  </p>
+                  <p className="text-sm text-gray-500 truncate dark:text-gray-400 px-2">
+                    Students
+                  </p>
+                </div>
+                <div className="inline-flex items-center text-base font-medium text-gray-900 dark:text-white">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="blue"
+                    viewBox="0 0 24 24"
+                    strokeWidth=".5"
+                    stroke="currentColor"
+                    className="w-6 h-6"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+                    />
+                  </svg>{" "}
+                  3000
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TopOfTheMonth;
diff --git a/client/src/components/columns/style.css b/client/src/components/columns/style.css
index a4a67cb..686d915 100644
--- a/client/src/components/columns/style.css
+++ b/client/src/components/columns/style.css
@@ -1,11 +1,43 @@
+.selected {
+  background-color: orange;
+}
+
+.selected:hover {
+  background-color: transparent;
+}
+
 .Feed {
   width: 75%;
   max-height: 320px;
   margin-left: 100px;
+  position: relative;
+  overflow: hidden;
 }
+
 .Shadow {
   box-shadow: -6px -2px 6px 2px rgba(43, 43, 43, 0.7);
 }
-/* .Leaderboard {
-  margin-left: 100px;
-} */
+
+.flow-root {
+  overflow: hidden;
+  position: relative;
+}
+
+.my-element {
+  background-color: blue;
+  color: white;
+  padding: 10px;
+}
+
+.my-element:active {
+  transform: translateZ(-2px);
+}
+
+.clicked {
+  font-weight: bold;
+}
+.custom-card-shadow {
+  box-shadow: 0 2px 4px 0 rgba(1, 1, 1, 1.1);
+}
+
+/* style.css */
