diff --git a/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx b/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
index 08f8a11..15b757d 100644
--- a/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
+++ b/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
@@ -29,46 +29,12 @@ const primaryNavigationLinks = [
     }
 ]
 
-export function RightSidebar({ className }: SidebarProps) {
+export function RightSidebar({ className, children }: SidebarProps) {
     return (
         <div className={cn("pb-12", className)}>
             <div className="space-y-4 py-4">
                 <div className="px-3 py-2">
-                    <div className="space-y-1">
-                        {primaryNavigationLinks.map((link, key)=> (
-                            <Button variant="ghost" key={`primary-nav-${key}`} className="w-full justify-start" asChild>
-                                <Link href={link.href}>
-                                    <link.icon className="mr-2 h-4 w-4 text-accent-2" />
-                                    {link.title}
-                                </Link>
-                            </Button>
-                        ))}
-                    </div>
-                    <Button variant="gradient" className="w-full mt-4">
-                        Create a Post
-                    </Button>
-                </div>
-                <div className="px-3 py-2">
-                    <div className="bg-accent-shade rounded-md py-4 px-2">
-                    <h2 className="mb-3 px-4 text-md font-semibold tracking-tight">
-                        Resources
-                    </h2>
-                    <div className="space-y-0">
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/notifications"> Welcome </Link>
-                        </Button>
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/faq"> FAQ </Link>
-                        </Button>
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/help"> Help </Link>
-                        </Button>
-                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                            <Link href="/privacy-policy"> Privacy Policy </Link>
-                        </Button>
-                    </div>
-                    </div>
-                    
+                    {children}
                 </div>
             </div>
         </div>
diff --git a/frontend/nextjs/src/app/dapp/layout.tsx b/frontend/nextjs/src/app/dapp/layout.tsx
index 127d929..5bc1042 100644
--- a/frontend/nextjs/src/app/dapp/layout.tsx
+++ b/frontend/nextjs/src/app/dapp/layout.tsx
@@ -6,6 +6,7 @@ import {
   ConnectButton
 } from '@rainbow-me/rainbowkit';
 import { Sidebar } from './components/sidebar';
+import { RightSidebar } from './components/right-sidebar';
 import { Search } from '@/components/ui/forms/search';
 import { Button } from '@/components/ui/button';
 import { HiOutlinePencilAlt } from "react-icons/hi"
@@ -18,8 +19,10 @@ export const metadata: Metadata = {
 
 export default function DappLayout({
   children,
+  rightSidebarContent
 }: {
   children: React.ReactNode
+  rightSidebarContent: React.ReactNode
 }) {
   return (
     <>
@@ -52,16 +55,10 @@ export default function DappLayout({
             <div className="bg-background">
               <div className="grid lg:grid-cols-5">
                 <Sidebar className="hidden lg:block min-h-[94vh]" />
-                <div className="col-span-3 lg:col-span-3 lg:border-x">
-
-                  <div className="h-full px-4 py-6 lg:px-6">
-                    <ScrollArea className="h-[90vh] w-full">
-                      {children}
-                    </ScrollArea>
-
-                  </div>
+                <div className="col-span-3 lg:col-span-4 lg:border-x">
+                  {children}
                 </div>
-                <Sidebar className="hidden lg:block min-h-[94vh]" />
+
               </div>
             </div>
           </div>
diff --git a/frontend/nextjs/src/app/dapp/page.tsx b/frontend/nextjs/src/app/dapp/page.tsx
index 5f9403e..5baada8 100644
--- a/frontend/nextjs/src/app/dapp/page.tsx
+++ b/frontend/nextjs/src/app/dapp/page.tsx
@@ -1,10 +1,16 @@
 "use client";
+import React from "react";
 import { Button } from "@/components/ui/button";
 import { useContracts } from "@/lib/hooks/contracts";
-import React from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import PostCard from "@/components/ui/post-card";
 import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { RightSidebar } from "./components/right-sidebar";
+import Image from "next/image";
+import {HiCheckBadge, HiOutlineFire} from "react-icons/hi2"
+import { Badge } from "@/components/ui/badge";
+import Link from "next/link";
 
 const dummyPosts = [
   {
@@ -81,16 +87,49 @@ const dummyPosts = [
   },
 ]
 
+const topCreatorList = [
+  {
+    name: "Naval",
+    avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
+    mentor: "false",
+    skill: "UI Design",
+    href: "/profile/naval",
+    ment: 134
+  },
+  {
+    name: "Naval",
+    avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
+    mentor: "true",
+    skill: "Java",
+    href: "/profile/naval",
+    ment: 693
+  },
+  {
+    name: "Naval",
+    avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
+    mentor: "true",
+    skill: "Ruby",
+    href: "/profile/naval",
+    ment: 953
+  },
+  {
+    name: "Naval",
+    avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
+    mentor: "true",
+    skill: "AI",
+    href: "/profile/naval",
+    ment: 422
+  },
+]
+
 
 export default function RootLayout() {
   const { EMTMarketPlace, ExpertToken, MentorToken } = useContracts();
   async function handleEMTMarketPlace() {
-      const val = await EMTMarketPlace.downVoteWeight();
-      alert(val);
+    const val = await EMTMarketPlace.downVoteWeight();
+    alert(val);
   }
 
-  console.log('dummy', dummyPosts)
-
   async function handleExpertToken() {
     const val = await ExpertToken.MINTER_ROLE();
     alert(val);
@@ -110,33 +149,123 @@ export default function RootLayout() {
   // );
 
   return (
-    <div className="flex flex-col">
-      <Tabs defaultValue="following" className="w-full">
-        <TabsList>
-          <TabsTrigger value="following">Following</TabsTrigger>
-          <TabsTrigger value="design">Design</TabsTrigger>
-        </TabsList>
-        <TabsContent value="following">
-          <div className="flex flex-col gap-y-4 items-center">
-            {dummyPosts.map((post, key) => {
-              return <>
-                <PostCard key={`post-${key}`} data={post} />
-                <Separator className="bg-border w-[94%]" />
-              </>
-            })}
+    <div className="grid grid-cols-6 col-span-4">
+      <div className="h-full px-4 py-6 lg:px-6 col-span-3 lg:col-span-4 lg:border-x">
+        <ScrollArea className="h-[90vh] w-full">
+          <div className="flex flex-col">
+            <Tabs defaultValue="following" className="w-full">
+              <TabsList>
+                <TabsTrigger value="following">Following</TabsTrigger>
+                <TabsTrigger value="design">Design</TabsTrigger>
+              </TabsList>
+              <TabsContent value="following">
+                <div className="flex flex-col gap-y-4 items-center">
+                  {dummyPosts.map((post, key) => {
+                    return <>
+                      <PostCard key={`post-${key}`} data={post} />
+                      <Separator className="bg-border w-[94%]" />
+                    </>
+                  })}
+                </div>
+              </TabsContent>
+              <TabsContent value="design">
+                <div className="flex flex-col gap-y-4 items-center">
+                  {dummyPosts.map((post, key) => {
+                    return <>
+                      <PostCard key={`post-${key}`} data={post} />
+                      <Separator className="bg-border w-[94%]" />
+                    </>
+                  })}
+                </div>
+              </TabsContent>
+            </Tabs>
           </div>
-        </TabsContent>
-        <TabsContent value="design">
-        <div className="flex flex-col gap-y-4 items-center">
-            {dummyPosts.map((post, key) => {
-              return <>
-                <PostCard key={`post-${key}`} data={post} />
-                <Separator className="bg-border w-[94%]" />
-              </>
-            })}
+        </ScrollArea>
+      </div>
+      <RightSidebar className="hidden lg:block min-h-[94vh] col-span-1 lg:col-span-2" >
+        <>
+        
+          <div className="mb-8">
+            <h2 className="mb-1 text-md pl-3 font-semibold tracking-tight">
+              Top Creators
+            </h2>
+            <div className="flex flex-col gap-y-0">
+              {topCreatorList.map((profile, key) => {
+                return <Link href={profile.href} key={`top-creator-${key}`} className="px-3 py-2 rounded-md flex w-full items-center justify-between hover:bg-accent-shade">
+                  <div className='flex items-center'>
+                    <div className="w-10 h-10 relative">
+                      <Image
+                        fill
+                        className='rounded-full object-cover'
+                        loading="eager"
+                        src={profile.avatar}
+                        alt={`${profile.name}-avatar`}
+                        quality={80}
+                      />
+                    </div>
+                    <div className='ml-3'>
+                      <div className="flex items-center">
+                        <p className='text-md text-foreground'>{profile.name}</p>
+                        {profile.mentor === "true" && <HiCheckBadge className="w-4 h-4 ml-1 text-accent-3" />}
+                      </div>
+                      <Badge>{profile.skill}</Badge>
+                    </div>
+                  </div>
+                  <div className="flex items-center text-xs text-muted">
+                    <HiOutlineFire className="w-4 h-4 ml-1 text-muted" />
+                    <div className="ml-1">
+                      245 MENT
+                    </div>
+                  </div>
+                </Link>
+              })}
+
+
+            </div>
           </div>
-        </TabsContent>
-      </Tabs>
+
+          <div className="">
+            <h2 className="mb-1 text-md pl-3 font-semibold tracking-tight">
+              Who to Follow
+            </h2>
+            <div className="flex flex-col gap-y-0">
+              {topCreatorList.map((profile, key) => {
+                return <Link href={profile.href} key={`top-creator-${key}`} className="px-3 py-2 rounded-md flex w-full items-center justify-between hover:bg-accent-shade">
+                  <div className='flex items-center'>
+                    <div className="w-10 h-10 relative">
+                      <Image
+                        fill
+                        className='rounded-full object-cover'
+                        loading="eager"
+                        src={profile.avatar}
+                        alt={`${profile.name}-avatar`}
+                        quality={80}
+                      />
+                    </div>
+                    <div className='ml-3'>
+                      <div className="flex items-center">
+                        <p className='text-md text-foreground'>{profile.name}</p>
+                        {profile.mentor === "true" && <HiCheckBadge className="w-4 h-4 ml-1 text-accent-3" />}
+                      </div>
+                      <Badge>{profile.skill}</Badge>
+                    </div>
+                  </div>
+                  <div className="flex items-center text-xs text-muted">
+                    <HiOutlineFire className="w-4 h-4 ml-1 text-muted" />
+                    <div className="ml-1">
+                      245 MENT
+                    </div>
+                  </div>
+                </Link>
+              })}
+
+
+            </div>
+          </div>
+        </>
+      </RightSidebar>
     </div>
+
+
   );
 }
diff --git a/frontend/nextjs/src/components/ui/badge.tsx b/frontend/nextjs/src/components/ui/badge.tsx
new file mode 100644
index 0000000..46f9936
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-1.5 py-0.1 text-[11px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-accent-2 text-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-accent-shade text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/nextjs/src/components/ui/post-card.tsx b/frontend/nextjs/src/components/ui/post-card.tsx
index 8f2efba..c8da2ad 100644
--- a/frontend/nextjs/src/components/ui/post-card.tsx
+++ b/frontend/nextjs/src/components/ui/post-card.tsx
@@ -22,11 +22,8 @@ const PostCard = ({data}: any) => {
                 <CardHeader className='px-0 pt-0'>
                     <div className='flex items-center'>
                         <div className="w-10 h-10 relative">
-                            <Image 
-                                // width={24}
-                                // height={24}
+                            <Image
                                 fill
-                                // placeholder="blur"
                                 className='rounded-full object-cover'
                                 loading="eager"
                                 src={author.avatar}