diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 6c4b722..ac30ef0 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -5,11 +5,13 @@ import ASSETS from "src/assets";
 import Search from "./Search/Search";
 import IconButton from "../IconButton/IconButton";
 import { Link, useNavigate } from "react-router-dom";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
     Menu,
     MenuItem,
     MenuButton,
+    useMenuState,
+    ControlledMenu,
 } from '@szhsin/react-menu';
 import '@szhsin/react-menu/dist/index.css';
 import { FiAward, FiChevronDown, FiFeather, FiMic } from "react-icons/fi";
@@ -17,6 +19,8 @@ import { FiAward, FiChevronDown, FiFeather, FiMic } from "react-icons/fi";
 
 export default function NavDesktop() {
     const [searchOpen, setSearchOpen] = useState(false)
+    const communityRef = useRef(null);
+    const [communitymenuProps, toggleCommunityMenu] = useMenuState({ transition: true });
 
     const { isWalletConnected } = useAppSelector((state) => ({
         isWalletConnected: state.wallet.isConnected,
@@ -45,7 +49,18 @@ export default function NavDesktop() {
                 </Link>
             </li>
             <li>
-                <Menu offsetY={28} menuClassName='!rounded-12 !p-8 !border-gray-200' menuStyle={{ border: '1px solid' }} menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
+                <button
+                    ref={communityRef}
+                    onMouseEnter={() => toggleCommunityMenu(true)}
+                    className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></button>
+                <ControlledMenu {...communitymenuProps}
+                    anchorRef={communityRef}
+                    offsetY={28}
+                    onMouseLeave={() => toggleCommunityMenu(false)}
+                    onClose={() => toggleCommunityMenu(false)}
+                    menuClassName='!rounded-12 !p-8 !border-gray-200'
+                    menuStyle={{ border: '1px solid' }}
+                >
                     <MenuItem
                         href="/blog"
                         onClick={(e) => {
@@ -102,7 +117,7 @@ export default function NavDesktop() {
                             </p>
                         </div>
                     </MenuItem>
-                </Menu>
+                </ControlledMenu>
             </li>
             <li className="relative">
                 <a
diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx
index 00897ab..761c58b 100644
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -5,6 +5,7 @@ import { ComponentProps, useRef, useState } from 'react'
 import styles from './styles.module.scss'
 import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
 import { useDebouncedCallback, useThrottledCallback } from '@react-hookz/web'
+import { UnionToObjectKeys } from 'src/utils/types/utils'
 
 
 
@@ -26,9 +27,22 @@ type Props = {
     disableCounter?: boolean
     disableShake?: boolean
     dense?: boolean
+    size?: 'sm' | 'md'
     resetCounterOnRelease?: boolean
 } & Omit<ComponentProps<typeof Button>, 'children'>
 
+
+const btnPadding: UnionToObjectKeys<Props, 'direction', any> = {
+    horizontal: {
+        sm: '',
+        md: '',
+    } as UnionToObjectKeys<Props, 'size'>,
+    vertical: {
+        sm: 'p-8',
+        md: '',
+    } as UnionToObjectKeys<Props, 'size'>
+}
+
 export default function VoteButton({
     votes,
     onVote = () => { },
@@ -169,7 +183,7 @@ export default function VoteButton({
                         dense ? "py-4 px-12" : "py-8 px-20"
                         :
                         dense ? "py-4 px-8" : "p-8"}
-                ${incrementsCount && "outline"} active:outline outline-1 outline-red-500 
+                ${voteCntRef.current > 0 && "outline"} active:outline outline-1 outline-red-500 
                 ${btnShakeClass} 
                 `}
 
@@ -187,11 +201,11 @@ export default function VoteButton({
                 </div>
                 <div className={`
                 relative z-10 
-                ${incrementsCount ? "text-red-800" : "text-gray-600"}
+                ${incrementsCount ? "text-red-800" : "text-gray-500"}
                 flex justify-center items-center gap-8 text-left ${direction === 'vertical' && "flex-col !text-center"}
                 `}>
                     <MdLocalFireDepartment
-                        className={`text-body2 ${incrementsCount ? "text-red-600" : "text-red-600"}`}
+                        className={`text-body2 ${incrementsCount ? "text-red-600" : "text-gray-400"}`}
 
                     /><span className="align-middle w-[4ch]"> {numberFormatter(votes + voteCnt)}</span>
                 </div>
diff --git a/src/assets/images/explore_page_header_1.jfif b/src/assets/images/explore_page_header_1.jfif
index 1cb2972..26498e5 100644
Binary files a/src/assets/images/explore_page_header_1.jfif and b/src/assets/images/explore_page_header_1.jfif differ
diff --git a/src/assets/images/explore_page_header_2.jfif b/src/assets/images/explore_page_header_2.jfif
index 3866520..c54e9e0 100644
Binary files a/src/assets/images/explore_page_header_2.jfif and b/src/assets/images/explore_page_header_2.jfif differ
diff --git a/src/features/Hackathons/pages/HackathonsPage/styles.module.scss b/src/features/Hackathons/pages/HackathonsPage/styles.module.scss
index 6e1ecbb..37b8c6f 100644
--- a/src/features/Hackathons/pages/HackathonsPage/styles.module.scss
+++ b/src/features/Hackathons/pages/HackathonsPage/styles.module.scss
@@ -4,11 +4,7 @@
   gap: 24px;
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: 1fr 2fr 0;
+    grid-template-columns: 1fr 3fr;
     gap: 24px;
   }
-
-  @media screen and (min-width: 1024px) {
-    grid-template-columns: calc(min(30%, 326px)) 1fr;
-  }
 }
diff --git a/src/features/Posts/pages/FeedPage/styles.module.scss b/src/features/Posts/pages/FeedPage/styles.module.scss
index cecc067..97cb263 100644
--- a/src/features/Posts/pages/FeedPage/styles.module.scss
+++ b/src/features/Posts/pages/FeedPage/styles.module.scss
@@ -1,17 +1,14 @@
 .grid {
   display: grid;
   grid-template-columns: 100%;
-  gap: 32px;
+  gap: 24px;
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: 1fr 2fr 0;
-    gap: 32px;
+    grid-template-columns: 1fr 3fr 0;
+    gap: 24px;
   }
 
   @media screen and (min-width: 1024px) {
-    grid-template-columns:
-      minmax(200px, 1fr)
-      minmax(50%, 70ch)
-      minmax(200px, 1fr);
+    grid-template-columns: 1fr 2fr 1fr;
   }
 }
diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
index 784569b..0fe212d 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
@@ -3,12 +3,11 @@ import Skeleton from 'react-loading-skeleton'
 
 export default function ProjectCardMiniSkeleton() {
     return (
-        <div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 items-center" >
-            <Skeleton width={80} height={80} containerClassName='flex-shrink-0' />
+        <div className="bg-gray-25 select-none px-16 py-16 flex min-w-[300px] gap-16 border border-gray-200 rounded-10 items-center" >
+            <Skeleton circle width={64} height={64} containerClassName='flex-shrink-0' />
             <div className="justify-around items-start min-w-0">
                 <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"><Skeleton width="15ch" /></p>
                 <p className="text-body5 text-gray-600 font-light my-[5px]"><Skeleton width="10ch" /></p>
-                <span className="font-light text-body5"> <Skeleton width="5ch"></Skeleton> </span>
             </div>
         </div>
     );
diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
index d24a13f..d923c9d 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
@@ -1,5 +1,8 @@
 import { MdLocalFireDepartment } from "react-icons/md";
+import VoteButton from "src/Components/VoteButton/VoteButton";
+import { Vote_Item_Type } from "src/graphql";
 import { numberFormatter } from "src/utils/helperFunctions";
+import { useVote } from "src/utils/hooks";
 import { ProjectCard } from "src/utils/interfaces";
 
 
@@ -9,20 +12,25 @@ interface Props {
 }
 
 export default function ProjectCardMini({ project, onClick }: Props) {
+    const { vote } = useVote({
+        itemId: project.id,
+        itemType: Vote_Item_Type.Project
+    });
+
 
     return (
         <div
-            className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border-2 border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
-            onClick={() => onClick(project.id)}
+            className="py-16 select-none px-16 flex items-center gap-16 border-2 border-gray-100 rounded-16 hover:cursor-pointer bg-white hover:bg-gray-250"
             onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
             tabIndex={0}
         >
-            <img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
-            <div className="justify-around items-start min-w-0">
+            <img src={project.thumbnail_image} alt={project.title} onClick={() => onClick(project.id)} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full"></img>
+            <div className="justify-around items-start min-w-0 flex-1" onClick={() => onClick(project.id)}>
                 <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
                 <p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
-                <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span>
+                {/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span> */}
             </div>
+            <VoteButton votes={project.votes_count} direction='vertical' dense onVote={vote}></VoteButton>
         </div>
     );
 }
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
index 893cf7c..6652a34 100644
--- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
+++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
@@ -10,7 +10,7 @@ export default function ExplorePage() {
                 <title>{`Explore Lightning Products`}</title>
                 <meta property="og:title" content={`Explore Lightning Products`} />
             </Helmet>
-            <div className="page-container">
+            <div className="page-container pt-16">
 
                 <Header />
 
diff --git a/src/features/Projects/pages/ExplorePage/Header/Header.tsx b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
index e15c140..675102c 100644
--- a/src/features/Projects/pages/ExplorePage/Header/Header.tsx
+++ b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
@@ -9,16 +9,19 @@ import styles from './styles.module.css'
 
 const headerLinks = [
   {
-    title: "A fun directory of Lightning Enabled Applications on the Open Web",
+    title: <p className="text-body1 font-bolder text-white">Explore a fun directory of lightning web apps</p>,
     img: Assets.Images_ExploreHeader1,
     link: {
-      content: "Submit App",
+      content: "Submit app",
       url: "https://form.jotform.com/220301236112030",
     },
   },
   {
     title:
-      "Shock the web is back !! Join us from 16 to 19 June.",
+      <>
+        <p className="text-body1 font-bolder text-white">Take part in BOLT🔩FUN’s Shock the Web 2 ⚡️</p>
+        <p className="text-body3 font-medium text-white mt-8">22nd - 28th March, 2022</p>
+      </>,
     img: Assets.Images_ExploreHeader2,
     link: {
       content: "Register Now",
@@ -59,11 +62,11 @@ export default function Header() {
           alt=""
         />
         <div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
-        <h3 className="text-white text-h4 lg:text-h3 max-w-[80%]">
+        <div className="max-w-[90%]">
           {headerLinks[0].title}
-        </h3>
+        </div>
 
-        <Button href={headerLinks[0].link.url} newTab color="primary" className="font-regular mt-36">
+        <Button href={headerLinks[0].link.url} newTab color="white" className="mt-24">
           {headerLinks[0].link.content}
         </Button>
       </div>
@@ -74,10 +77,10 @@ export default function Header() {
           alt=""
         />
         <div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
-        <h3 className="text-white text-h4 lg:text-h3 max-w-[80%]">
+        <div className="max-w-[90%]">
           {headerLinks[1].title}
-        </h3>
-        <Button href={headerLinks[1].link.url} newTab className="font-regular mt-36">
+        </div>
+        <Button color="white" href={headerLinks[1].link.url} newTab className="mt-24">
           {headerLinks[1].link.content}
         </Button>
       </div>
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
index ba91953..5ecf022 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -31,7 +31,7 @@ const responsive = {
 // }
 
 function calcNumItems() {
-    const items = (((window.innerWidth - 2 * 32) / (296 + 20)));
+    const items = (((window.innerWidth - 2 * 32) / (300 + 20)));
     return items;
 }
 
@@ -110,7 +110,7 @@ export default function ProjectsRow({ title, link, projects }: Props) {
                     }
                 >
                     {projects.map((project, idx) =>
-                        <div key={project.id} className='max-w-[296px]'>
+                        <div key={project.id} className='max-w-[300px]' >
                             <ProjectCardMini project={project} onClick={handleClick} />
                         </div>
                     )}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4c077cf..93a432f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,7 +7,7 @@ $screen-xs-min: 320px;
 
 body {
   overflow-x: hidden;
-  background-color: #f8fafc;
+  background-color: #ffffff;
 }
 
 .page-container {