diff --git a/app/components/common/ActionButtons.tsx b/app/components/common/ActionButtons.tsx
index f033baf..211e851 100644
--- a/app/components/common/ActionButtons.tsx
+++ b/app/components/common/ActionButtons.tsx
@@ -7,17 +7,18 @@ import React from 'react'
 export interface ActionButtonsProps {
     icon: React.ReactNode,
     label: string,
+    buttonWidth?: number,
     isGhost?: boolean,
     onClick?: () => void
 }
 
-function ActionButtons({ icon, label, onClick ,isGhost=false}: ActionButtonsProps) {
+function ActionButtons({ icon, label, onClick ,isGhost=false, buttonWidth=50}: ActionButtonsProps) {
   return (
-    <div className='flex flex-col gap-1 items-center align-middle cursor-pointer'>
-        <Button onClick={onClick} className='flex gap-2 items-center align-middle hover:bg-transparent' variant={isGhost ? 'ghost' : 'default'}>
+    <div className={`flex flex-col gap-1 items-center align-middle cursor-pointer  h-[50px] `}>
+        <Button onClick={onClick} className={`flex gap-2 items-center align-middle hover:bg-transparent w-full`} variant={isGhost ? 'ghost' : 'default'}>
             {icon}
         </Button>
-        <p className='text-xs text-white text-center'>{label}</p>
+        <p className={`text-xs text-white text-center w-full`}>{label}</p>
     </div>
   )
 }
diff --git a/app/components/common/SideBar.tsx b/app/components/common/SideBar.tsx
index a7d9fb7..2ebce3c 100644
--- a/app/components/common/SideBar.tsx
+++ b/app/components/common/SideBar.tsx
@@ -9,39 +9,66 @@ import {
     TextSelect
 } from "lucide-react";
 import ActionButtons from "./ActionButtons";
-import { DocumentUpload, Element2, Magicpen, Setting2, Shapes, Text } from 'iconsax-react';
+import { ArrowLeft2, ArrowRight2, AudioSquare, Cardano, CodeCircle, DocumentUpload, Element2, ExportSquare, Link, LinkSquare, Magicpen, MessageAdd1, MessageQuestion, Next, Note, Previous, Setting2, Shapes, Smallcaps, Text, Video, VideoHorizontal } from 'iconsax-react';
 
 
 
 const CategoryHeading = ({ title }: { title: string }) => (
-    <div className="px-4 py-2 text-xs font-semibold text-gray-100 uppercase">
+    <div className="py-3 pt-5  p-b-3 text-xs font-thin text-gray-100 ">
         {title}
     </div>
 );
 
 const Sidebar = () => {
     return (
-        <div className='w-[376px] h-full bg-[#181923] flex sticky'>
-            <Tabs defaultValue="text" className=" h-full flex flex-row gap-2">
-                <TabsList className="w-[89px] bg-[#010313] h-full flex flex-col justify-between rounded-none overflow-y-auto">
+        <div className='w-[376px] h-full bg-[#181923] flex sticky  pr-4'>
+            <Tabs defaultValue="text" className=" h-full flex flex-row gap-2 ">
+                <TabsList className="pt-5 w-[89px] bg-[#010313] h-full flex flex-col justify-between rounded-none overflow-y-auto">
                     <div className='flex flex-col gap-2'>
-                    <TabsTrigger value="text" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Text size="20" color="#ffffff" />} label="Text" isGhost={true} /></TabsTrigger>
-                    <TabsTrigger value="upload" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Upload size="20" color="#ffffff" />} label="Upload" isGhost={true} /></TabsTrigger>
-                    <TabsTrigger value="elements" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Shapes size="20" color="#ffffff" />} label="Elements" isGhost={true} /></TabsTrigger>
-                    <TabsTrigger value="interactions" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<TextSelect size="20" color="#ffffff" />} label="Interactions" isGhost={true} /></TabsTrigger>
-                    <TabsTrigger value="templates" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Element2 size="20" color="#ffffff" />} label="Templates" isGhost={true} /></TabsTrigger>
-                    <TabsTrigger value="aiwrite" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Magicpen size="20" color="#ffffff" />} label="Ai Write" isGhost={true} /></TabsTrigger>
+                        <TabsTrigger value="text" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Smallcaps size="20" color="#ffffff" />} label="Text" isGhost={true} /></TabsTrigger>
+                        <TabsTrigger value="upload" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Upload size="20" color="#ffffff" />} label="Upload" isGhost={true} /></TabsTrigger>
+                        <TabsTrigger value="elements" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Shapes size="20" color="#ffffff" />} label="Elements" isGhost={true} /></TabsTrigger>
+                        <TabsTrigger value="interactions" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<TextSelect size="20" color="#ffffff" />} label="Interactions" isGhost={true} /></TabsTrigger>
+                        <TabsTrigger value="templates" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Element2 size="20" color="#ffffff" />} label="Templates" isGhost={true} /></TabsTrigger>
+                        <TabsTrigger value="aiwrite" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Magicpen size="20" color="#ffffff" />} label="Ai Write" isGhost={true} /></TabsTrigger>
                     </div>
                     <TabsTrigger value="settings" className="w-[50px] h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent"><ActionButtons icon={<Setting2 size="20" color="#ffffff" />} label="Preview" isGhost={true} /></TabsTrigger>
-                  
+
                 </TabsList>
-                <TabsContent value="text">
-                    <div className='flex w-full flex-col flex-wrap'>
-                        <CategoryHeading title="Links & Tags" />
-                        <ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
-                        <ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
-                        <ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
-                        <ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
+                <TabsContent value="text" className='w-full h-full flex flex-col overflow-y-auto no-scrollbar'>
+                    <CategoryHeading title="Links & Tags" />
+                    <div className='flex w-full  flex-wrap gap-5 justify-between'>
+                        <ActionButtons icon={<Link size="20" color="#ffffff" />} label="Link Area" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<LinkSquare size="20" color="#ffffff" />} label="Link Button" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Tag size="20" color="#ffffff" />} label="Tag" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<MessageAdd1 size="20" color="#ffffff" />} label="Caption" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<CodeCircle size="20" color="#ffffff" />} label="Embed code" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Text size="20" color="#ffffff" />} label="Pop-up frame" isGhost={false} buttonWidth={140} />
+                    </div>
+
+                    <CategoryHeading title="Images" />
+                    <div className='flex w-full  flex-wrap gap-5 '>
+                        <ActionButtons icon={<Cardano size="20" color="#ffffff" />} label="Spotlight" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Image size="20" color="#ffffff" />} label="Slideshow" isGhost={false} buttonWidth={140} />
+                    </div>
+                    <CategoryHeading title="Audio & video" />
+                    <div className='flex w-full  flex-wrap gap-5'>
+                        <ActionButtons icon={<VideoHorizontal size="20" color="#ffffff" />} label="Video embed" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Video size="20" color="#ffffff" />} label="Video Button" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<AudioSquare size="20" color="#ffffff" />} label="Audio Button" isGhost={false} buttonWidth={140} />
+                    </div>
+                    <CategoryHeading title="Engagement" />
+                    <div className='flex w-full  flex-wrap gap-5 '>
+                        <ActionButtons icon={<MessageQuestion size="20" color="#ffffff" />} label="Question" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Note size="20" color="#ffffff" />} label="Contact Form" isGhost={false} buttonWidth={140} />
+                    </div>
+                    <CategoryHeading title="Navigation" />
+                    <div className='flex w-full  flex-wrap gap-5 '>
+                        <ActionButtons icon={<ArrowLeft2 size="20" color="#ffffff" />} label="Previous Page" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<ArrowRight2 size="20" color="#ffffff" />} label="Next Page" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<ExportSquare size="20" color="#ffffff" />} label="Go to page" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Previous size="20" color="#ffffff" />} label="First page" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Next size="20" color="#ffffff" />} label="Last page" isGhost={false} buttonWidth={140} />
                     </div>
                 </TabsContent>
                 <TabsContent value="upload">DFHDSFGSDFGHSFHWd.</TabsContent>
diff --git a/app/globals.css b/app/globals.css
index dc98be7..9ddc0b0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -120,3 +120,10 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+/* custom css */
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}