diff --git a/frontend/nextjs/package.json b/frontend/nextjs/package.json
index 465d21c..382d583 100644
--- a/frontend/nextjs/package.json
+++ b/frontend/nextjs/package.json
@@ -10,13 +10,21 @@
   },
   "dependencies": {
     "@auth/firebase-adapter": "^1.0.4",
+    "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@rainbow-me/rainbowkit": "^1.1.4",
     "@rainbow-me/rainbowkit-siwe-next-auth": "^0.3.2",
+    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/pm": "^2.1.12",
+    "@tiptap/react": "^2.1.12",
+    "@tiptap/starter-kit": "^2.1.12",
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -30,12 +38,14 @@
     "prettier": "^3.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.48.2",
     "react-icons": "^4.11.0",
     "siwe": "^2.1.4",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^1.18.1",
-    "wagmi": "^1.4.5"
+    "wagmi": "^1.4.5",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/frontend/nextjs/src/app/dapp/components/providers.tsx b/frontend/nextjs/src/app/dapp/_components/providers.tsx
similarity index 100%
rename from frontend/nextjs/src/app/dapp/components/providers.tsx
rename to frontend/nextjs/src/app/dapp/_components/providers.tsx
diff --git a/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx b/frontend/nextjs/src/app/dapp/_components/right-sidebar.tsx
similarity index 100%
rename from frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
rename to frontend/nextjs/src/app/dapp/_components/right-sidebar.tsx
diff --git a/frontend/nextjs/src/app/dapp/components/sidebar.tsx b/frontend/nextjs/src/app/dapp/_components/sidebar.tsx
similarity index 100%
rename from frontend/nextjs/src/app/dapp/components/sidebar.tsx
rename to frontend/nextjs/src/app/dapp/_components/sidebar.tsx
diff --git a/frontend/nextjs/src/app/dapp/layout.tsx b/frontend/nextjs/src/app/dapp/layout.tsx
index 45e0338..762cf9b 100644
--- a/frontend/nextjs/src/app/dapp/layout.tsx
+++ b/frontend/nextjs/src/app/dapp/layout.tsx
@@ -5,23 +5,25 @@ import '@rainbow-me/rainbowkit/styles.css';
 import {
   ConnectButton
 } from '@rainbow-me/rainbowkit';
-import { Sidebar } from './components/sidebar';
-import { RightSidebar } from './components/right-sidebar';
+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"
-import DappProviders from './components/providers';
+import DappProviders from './_components/providers';
 import SessionProvider from "@/lib/hooks/sessionProvider";
 import { getServerSession } from "next-auth";
 export const metadata: Metadata = {
   title: 'MEMM! Homepage',
 }
 
+type Props = {
+  children: React.ReactNode
+}
+
 export default async function DappLayout({
   children
-}: {
-  children: React.ReactNode
-}) {
+}: Props) {
   const session = await getServerSession();
   return (
     <>
diff --git a/frontend/nextjs/src/app/dapp/p/[slug]/page.tsx b/frontend/nextjs/src/app/dapp/p/[slug]/page.tsx
new file mode 100644
index 0000000..952cf0c
--- /dev/null
+++ b/frontend/nextjs/src/app/dapp/p/[slug]/page.tsx
@@ -0,0 +1,221 @@
+import React from 'react'
+import { HiCheckBadge, HiOutlineHandThumbUp, HiOutlineHandThumbDown, HiOutlineShare, HiOutlineFire } from 'react-icons/hi2'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Badge } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { RightSidebar } from '../../_components/right-sidebar'
+
+const Post = ({ params }: { params: { slug: string } }) => {
+  const post = {
+    title: "I’m an experienced CEO. I applied for 1001 positions. This is what happened.",
+    body: `Facilisi at lorem semper eget. Eget posuere dictumst velit lacus est. Fringilla quam sollicitudin diam sollicitudin magna. Arcu ullamcorper nisl at aliquet luctus. Vitae commodo dictum sed et. In ultrices eu curabitur neque pulvinar ac eget ullamcorper lorem. Velit vitae id sit gravida mi viverra. Non ipsum nunc sed risus fermentum sed in. Lectus donec dignissim diam sed non tortor. Nibh euismod id tincidunt scelerisque cras est. Tincidunt mollis commodo urna scelerisque nibh at sed. Amet odio erat congue diam in.
+
+    Elit tellus velit diam suspendisse eget. Sed in et accumsan amet id sed ultrices lorem mollis. Donec tempus sapien pellentesque est pretium et. Ut euismod vitae feugiat donec amet euismod arcu egestas dis. Elementum neque suspendisse facilisis mi ullamcorper purus aliquam adipiscing. Sagittis non tristique sed sed purus magna sem. Integer non habitasse ornare in amet mauris id. Nulla condimentum ipsum aliquam urna vitae consequat. Nec lobortis aenean auctor imperdiet facilisis vel. Cras amet euismod neque dictumst vestibulum. Faucibus orci accumsan ipsum eget nunc magnis elit. Quam ultricies turpis scelerisque aliquet amet enim venenatis non. Iaculis hac in aliquet sed blandit vestibulum etiam. Adipiscing adipiscing augue senectus tempor. Mauris pellentesque consequat aliquet sagittis.
+    
+    In diam vestibulum eu tellus suspendisse non vestibulum. Ut ipsum risus suscipit amet quam a mi. Pellentesque est in amet in. Vitae urna laoreet non eu. Euismod ut quis elit risus massa. Posuere amet massa pulvinar cursus morbi nibh varius quam proin. Et tortor risus elementum morbi ante tortor adipiscing pretium vestibulum.`,
+    image: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    author: {
+      name: "Naval",
+      avatar: "https://images.unsplash.com/photo-1640960543409-dbe56ccc30e2?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      mentor: "true"
+    },
+    metadata: {
+      upvotes: 314,
+      downvotes: 42
+    }
+  }
+
+  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
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-6 col-span-4">
+      <div className="h-full px-4 py-6 lg:px-6 col-span-1 md:col-span-4 md:border-x">
+      <ScrollArea className="h-[90vh] w-full">
+        <Card className='border-none'>
+                <CardHeader className='px-0 pt-0'>
+                    <div className='flex items-center'>
+                        <div className="w-10 h-10 relative">
+                            <Image
+                                fill
+                                className='rounded-full object-cover'
+                                loading="eager"
+                                src={post.author.avatar}
+                                alt={`${post.author.name}-avatar`}
+                                quality={80}
+                            />
+                        </div>
+                        <div className='ml-3'>
+                            <div className="flex items-center">
+                                <p className='text-md text-foreground'>{post.author.name}</p>
+                                {post.author.mentor === "true" && <HiCheckBadge className="w-4 h-4 ml-1 text-accent-3" />}
+                                <div className='ml-2 text-[11px] text-muted'>20 secs. ago</div>
+                            </div>
+                            <Button variant="ghost" className='text-xs px-0 py-0 rounded-sm h-auto hover:bg-transparent hover:text-accent-3 text-muted'>Follow</Button>
+                        </div>
+                    </div>
+                    
+                </CardHeader>
+                <CardContent className='space-y-5 px-0'>
+                    <div className="w-full h-[400px] relative">
+                      <Image 
+                          fill
+                          src={post.image}
+                          className='rounded-md object-cover'
+                          loading="lazy"
+                          alt={`${post.title} cover photo`}
+                      />
+                    </div>
+                    <CardTitle className='font-bold text-3xl text-foreground tracking-wide'>{post.title}</CardTitle>
+                    <CardDescription className='text-muted text-sm'>{post.body}</CardDescription>
+                </CardContent>
+                <Separator className="bg-border mb-3" />
+                <CardFooter className='pb-0 px-0 flex justify-between'>
+
+                    <div className='flex items-center'>
+                        <div className="flex items-center">
+                            <Button variant="ghost" aria-label='Upvote a post' size="icon">
+                                <HiOutlineHandThumbUp className="h-5 w-5 text-foreground" />
+                            </Button>
+                            <div className='text-sm text-foreground ml-1'>
+                                {post.metadata.upvotes}
+                            </div>
+                            
+                        </div>
+                        <div className="flex items-center ml-2">
+                            <Button variant="ghost" aria-label='Upvote a post' size="icon">
+                                <HiOutlineHandThumbDown className="h-5 w-5 text-foreground" />
+                            </Button>
+                        </div>
+                    </div>
+
+                    <Button variant="ghost" aria-label='Upvote a post' size="icon">
+                        <HiOutlineShare className="h-5 w-5 text-foreground" />
+                    </Button>
+                </CardFooter>
+            </Card>
+            </ScrollArea>
+      </div>
+      <RightSidebar className="hidden md:block min-h-[94vh] col-span-2 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>
+
+          <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>
+  )
+}
+
+export default Post
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/dapp/p/create/_components/create-post-form.tsx b/frontend/nextjs/src/app/dapp/p/create/_components/create-post-form.tsx
new file mode 100644
index 0000000..83cbf49
--- /dev/null
+++ b/frontend/nextjs/src/app/dapp/p/create/_components/create-post-form.tsx
@@ -0,0 +1,87 @@
+"use client"
+import React from 'react'
+import * as z from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { useToast } from "@/components/ui/use-toast"
+import { Textarea } from "@/components/ui/textarea"
+import RichTextEditor from '@/components/ui/rich-text-editor'
+
+const formSchema = z.object({
+    postTitle: z.string().min(1, {
+        message: "Title can't be empty",
+    }),
+    postBody: z.string()
+})
+
+const CreatePostForm = () => {
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            postTitle: "",
+            postBody: "",
+        },
+    })
+    const { toast } = useToast()
+
+    function onSubmit(values: z.infer<typeof formSchema>) {
+        console.log(values)
+        toast({
+            description: "Your post has been created",
+            
+        })
+    }
+
+    return (
+        <div>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                    <FormField
+                        control={form.control}
+                        name="postTitle"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Title</FormLabel>
+                                <FormControl>
+                                    <Input placeholder="Your post title" {...field} />
+                                </FormControl>
+                                <FormMessage className='text-xs text-muted font-normal' />
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="postBody"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>Body</FormLabel>
+                                <FormControl>
+                                    <RichTextEditor placeholder="Answer a question or explain a concept" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                    <div className="flex justify-end w-full">
+                        <Button type="submit" variant='gradient' className='w-[160px] '>Post</Button>
+                    </div>
+                </form>
+            </Form>
+        </div>
+    )
+}
+
+export default CreatePostForm
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/dapp/p/create/page.tsx b/frontend/nextjs/src/app/dapp/p/create/page.tsx
new file mode 100644
index 0000000..49cd8b2
--- /dev/null
+++ b/frontend/nextjs/src/app/dapp/p/create/page.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { HiCheckBadge, HiOutlineHandThumbUp, HiOutlineHandThumbDown, HiOutlineShare, HiOutlineFire } from 'react-icons/hi2'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Badge } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { RightSidebar } from '../../_components/right-sidebar'
+import CreatePostForm from './_components/create-post-form'
+
+const CreatePost = () => {
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-6 col-span-4">
+            <div className="h-full px-4 py-6 lg:px-6 col-span-1 md:col-span-4 md:border-x">
+                <ScrollArea className="h-[90vh] w-full">
+                    <h4 className='text-xl text-foreground font-bold mb-5'>New Post</h4>
+                    <CreatePostForm />
+                </ScrollArea>
+            </div>
+            <RightSidebar className="hidden md:block min-h-[94vh] col-span-2 lg:col-span-2" >
+                {/* leave empty */}
+            </RightSidebar>
+        </div>
+    )
+}
+
+export default CreatePost
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/dapp/page.tsx b/frontend/nextjs/src/app/dapp/page.tsx
index 3e2f678..33ce875 100644
--- a/frontend/nextjs/src/app/dapp/page.tsx
+++ b/frontend/nextjs/src/app/dapp/page.tsx
@@ -6,14 +6,14 @@ 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 { 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";
 import { useUser } from "@/lib/hooks/user";
 
-const dummyPosts = [
+export const dummyPosts = [
   {
     author: {
       name: "Naval",
diff --git a/frontend/nextjs/src/app/dapp/profile/layout.tsx b/frontend/nextjs/src/app/dapp/profile/layout.tsx
new file mode 100644
index 0000000..721212f
--- /dev/null
+++ b/frontend/nextjs/src/app/dapp/profile/layout.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Metadata } from 'next'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { RightSidebar } from '../_components/right-sidebar'
+
+export const metadata: Metadata = {
+    title: 'View profile',
+  }
+
+type Props = {
+    children: React.ReactNode
+}
+
+const ProfileLayout = ({ children }: Props) => {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-6 col-span-4">
+            <div className="h-full px-4 py-6 lg:px-6 col-span-1 md:col-span-4 md:border-x">
+                <ScrollArea className="h-[90vh] w-full">
+                    {children}
+                </ScrollArea>
+            </div>
+            <RightSidebar className="hidden md:block min-h-[94vh] col-span-2 lg:col-span-2" >
+                {/* leave empty */}
+            </RightSidebar>
+        </div>
+    )
+}
+
+export default ProfileLayout
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/dapp/profile/page.tsx b/frontend/nextjs/src/app/dapp/profile/page.tsx
new file mode 100644
index 0000000..96dc4df
--- /dev/null
+++ b/frontend/nextjs/src/app/dapp/profile/page.tsx
@@ -0,0 +1,114 @@
+"use client"
+import { Button } from '@/components/ui/button'
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, CardFooter } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import React from 'react'
+import { HiCheckBadge, HiOutlineHandThumbUp, HiOutlineHandThumbDown, HiOutlineShare, HiOutlineCog6Tooth, HiOutlineFire } from 'react-icons/hi2'
+import Image from "next/image"
+import { Badge } from '@/components/ui/badge'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import PostCard from '@/components/ui/post-card'
+import { dummyPosts } from '../page'
+
+const Profile = () => {
+    const profile = {
+        name: "Naval",
+        avatar: "https://images.unsplash.com/photo-1640960543409-dbe56ccc30e2?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        mentor: "true",
+        skill: "UX Design",
+        about: "I’m an experienced CEO. I applied for 1001 positions. This is what happened.",
+
+    }
+
+    return (
+        <div className=''>
+            <div className="space-y-5 mb-5">
+                <div className="py-2 rounded-md flex w-full items-center justify-between">
+                    <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>
+                    <Button variant="ghost" className='text-xs hover:bg-transparent text-muted hover:text-accent-3'>
+                        <HiOutlineCog6Tooth className="w-4 h-4 mr-1 " />
+                        Edit Profile
+                    </Button>
+                </div>
+
+                <div className="text-foreground text-sm">
+                    {profile.about}
+                </div>
+
+                <div className="w-full border-y">
+                    <div className="flex justify-start gap-4 items-center w-full py-5">
+                        <div className="flex items-center text-sm text-accent-3">
+                            <HiOutlineFire className="w-4 h-4 ml-1" />
+                            <div className="ml-1">
+                                245 MENT
+                            </div>
+                        </div>
+
+                        <div className="flex items-center text-sm text-muted">
+                            <div className="ml-1">
+                                5300 Followers
+                            </div>
+                        </div>
+
+                        <div className="flex items-center text-sm text-muted">
+                            <div className="ml-1">
+                                244 Following
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex flex-col">
+                <Tabs defaultValue="my-posts" className="w-full">
+                    <TabsList>
+                        <TabsTrigger value="my-posts">My Posts</TabsTrigger>
+                        <TabsTrigger value="wallet">Wallet</TabsTrigger>
+                        <TabsTrigger value="notification-settings">Notification Settings</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="my-posts">
+                        <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="wallet">
+                        <div className="flex flex-col gap-y-4 mt-5">
+                            <h4 className='text-xl text-foreground font-bold mb-5'>Wallet</h4>
+                        </div>
+                    </TabsContent>
+                    <TabsContent value="notification-settings">
+                        <div className="flex flex-col gap-y-4 mt-5">
+                            <h4 className='text-xl text-foreground font-bold mb-5'>Notification Settings</h4>
+                        </div>
+                    </TabsContent>
+                </Tabs>
+            </div>
+
+        </div>
+    )
+}
+
+export default Profile
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/layout.tsx b/frontend/nextjs/src/app/layout.tsx
index 5fe0568..77b28ec 100644
--- a/frontend/nextjs/src/app/layout.tsx
+++ b/frontend/nextjs/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import { ThemeProvider } from '@/components/ui/theme-provider'
+import { Toaster } from "@/components/ui/toaster"
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -28,6 +29,7 @@ export default async function RootLayout({
           disableTransitionOnChange
         >
           {children}
+          <Toaster />
         </ThemeProvider>
       </body>
     </html>
diff --git a/frontend/nextjs/src/components/ui/form.tsx b/frontend/nextjs/src/components/ui/form.tsx
new file mode 100644
index 0000000..3aa0c7c
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive text-md text-foreground", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/frontend/nextjs/src/components/ui/input.tsx b/frontend/nextjs/src/components/ui/input.tsx
index 677d05f..a6ef6a2 100644
--- a/frontend/nextjs/src/components/ui/input.tsx
+++ b/frontend/nextjs/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md bg-accent-shade px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/frontend/nextjs/src/components/ui/label.tsx b/frontend/nextjs/src/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/frontend/nextjs/src/components/ui/post-card.tsx b/frontend/nextjs/src/components/ui/post-card.tsx
index c8da2ad..897b9c7 100644
--- a/frontend/nextjs/src/components/ui/post-card.tsx
+++ b/frontend/nextjs/src/components/ui/post-card.tsx
@@ -35,6 +35,7 @@ const PostCard = ({data}: any) => {
                             <div className="flex items-center">
                                 <p className='text-md text-foreground'>{author.name}</p>
                                 {author.mentor === "true" && <HiCheckBadge className="w-4 h-4 ml-1 text-accent-3" />}
+                                <div className='ml-2 text-[11px] text-muted'>20 secs. ago</div>
                             </div>
                             <Button variant="ghost" className='text-xs px-0 py-0 rounded-sm h-auto hover:bg-transparent hover:text-accent-3 text-muted'>Follow</Button>
                         </div>
@@ -77,7 +78,6 @@ const PostCard = ({data}: any) => {
                     </Button>
                 </CardFooter>
             </Card>
-
         </Link>
     )
 }
diff --git a/frontend/nextjs/src/components/ui/rich-text-editor.tsx b/frontend/nextjs/src/components/ui/rich-text-editor.tsx
new file mode 100644
index 0000000..9ab9b4b
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/rich-text-editor.tsx
@@ -0,0 +1,42 @@
+"use client"
+import React from 'react'
+import { Textarea } from './textarea'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Heading from "@tiptap/extension-heading"
+import Placeholder from "@tiptap/extension-placeholder"
+import Toolbar from './toolbar'
+
+const RichTextEditor = (props: any) => {
+    const { value, placeholder, onChange } = props
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Placeholder.configure({ placeholder: 'Answer a question or explain a concept', }),
+            Heading.configure({
+                HTMLAttributes: {
+                    class: "text-xl font-bold",
+                    levels: [2]
+                }
+            })
+        ],
+        content: value,
+        editorProps: {
+            attributes: {
+                class: "flex min-h-[250px] w-full rounded-md border border-alt-stroke bg-accent-shade px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            }
+        },
+        onUpdate({ editor }) {
+            onChange(editor.getHTML())
+            console.log(editor.getHTML())
+        }
+    })
+    return (
+        <div className='flex flex-col justify-stretch min-h-[250px]'>
+            <Toolbar editor={editor} />
+            <EditorContent editor={editor} />
+        </div>
+    )
+}
+
+export default RichTextEditor
\ No newline at end of file
diff --git a/frontend/nextjs/src/components/ui/textarea.tsx b/frontend/nextjs/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..3fbb6ed
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md bg-accent-shade px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/frontend/nextjs/src/components/ui/toast.tsx b/frontend/nextjs/src/components/ui/toast.tsx
new file mode 100644
index 0000000..a822477
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/frontend/nextjs/src/components/ui/toaster.tsx b/frontend/nextjs/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..e223385
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/frontend/nextjs/src/components/ui/toggle.tsx b/frontend/nextjs/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..b6f2e7d
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/frontend/nextjs/src/components/ui/toolbar.tsx b/frontend/nextjs/src/components/ui/toolbar.tsx
new file mode 100644
index 0000000..95bfefd
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/toolbar.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import { Toggle } from './toggle'
+import { Bold, Code, Heading2, Italic, List, ListOrdered, Quote, Strikethrough } from 'lucide-react'
+import { type Editor } from '@tiptap/react'
+
+type Props = {
+    editor: Editor | null;
+}
+
+const Toolbar = ({ editor }: Props) => {
+    if (!editor) return null
+
+    return (
+        <div className='rounded-md bg-accent-shade px-2 py-0.5 w-full mb-3'>
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("heading")}
+                onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <Heading2 className='w-4 h-4' />
+            </Toggle>
+
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("bold")}
+                onPressedChange={() => editor.chain().focus().toggleBold().run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <Bold className='w-4 h-4' />
+            </Toggle>
+
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("italic")}
+                onPressedChange={() => editor.chain().focus().toggleItalic().run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <Italic className='w-4 h-4' />
+            </Toggle>
+
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("strike")}
+                onPressedChange={() => editor.chain().focus().toggleStrike().run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <Strikethrough className='w-4 h-4' />
+            </Toggle>
+
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("codeblock")}
+                onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <Code className='w-4 h-4' />
+            </Toggle>
+
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("bulletlist")}
+                onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <List className='w-4 h-4' />
+            </Toggle>
+
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("orderedlist")}
+                onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <ListOrdered className='w-4 h-4' />
+            </Toggle>
+
+            <Toggle
+                size="sm"
+                pressed={editor.isActive("blockquote")}
+                onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
+                className='hover:text-accent-2 hover:bg-transparent'
+            >
+                <Quote className='w-4 h-4' />
+            </Toggle>
+
+            {/* TODO:
+                formatting: paragraph, headings etc
+                action: undo, redo
+                upload images
+                links
+            */}
+        </div>
+    )
+}
+
+export default Toolbar
\ No newline at end of file
diff --git a/frontend/nextjs/src/components/ui/use-toast.ts b/frontend/nextjs/src/components/ui/use-toast.ts
new file mode 100644
index 0000000..90d8959
--- /dev/null
+++ b/frontend/nextjs/src/components/ui/use-toast.ts
@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }