diff --git a/app/components/common/ActionButtons.tsx b/app/components/common/ActionButtons.tsx
index 211e851..626808b 100644
--- a/app/components/common/ActionButtons.tsx
+++ b/app/components/common/ActionButtons.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 
 export interface ActionButtonsProps {
     icon: React.ReactNode,
-    label: string,
+    label?: string,
     buttonWidth?: number,
     isGhost?: boolean,
     onClick?: () => void
diff --git a/app/components/common/SideBar.tsx b/app/components/common/SideBar.tsx
index 2ebce3c..f0452e2 100644
--- a/app/components/common/SideBar.tsx
+++ b/app/components/common/SideBar.tsx
@@ -9,7 +9,7 @@ import {
     TextSelect
 } from "lucide-react";
 import ActionButtons from "./ActionButtons";
-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';
+import { ArrowLeft2, ArrowRight2, AudioSquare, Cardano, CodeCircle, DocumentUpload, Element2, ExportSquare, Link, LinkSquare, Magicpen, MessageAdd1, MessageQuestion, Next, Note, Previous, Setting2, Shapes, Smallcaps, Snapchat, Spotify, Text, Video, VideoHorizontal, Whatsapp } from 'iconsax-react';
 
 
 
@@ -70,6 +70,16 @@ const Sidebar = () => {
                         <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>
+                    <CategoryHeading title="Social" />
+                    <div className='flex w-full  flex-wrap gap-5 mb-10 '>
+                        <ActionButtons icon={<Snapchat size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Facebook size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Whatsapp size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Twitter size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Linkedin size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Youtube size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
+                        <ActionButtons icon={<Spotify size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
+                    </div>
                 </TabsContent>
                 <TabsContent value="upload">DFHDSFGSDFGHSFHWd.</TabsContent>
                 <TabsContent value="elements"> odit mibus quas porro, modi corrupti repudiandae an</TabsContent>
diff --git a/app/studio/layout.tsx b/app/studio/layout.tsx
index 750e5a4..e7a7871 100644
--- a/app/studio/layout.tsx
+++ b/app/studio/layout.tsx
@@ -78,9 +78,16 @@ function layout({ children }: Props) {
             <div className='flex w-full h-[calc(100vh-80px)]'>
                 {/* Sidebar */}
                 <Sidebar/>
-              
-
-                <div className='w-[80%] h-full bg-white'>{children}</div>
+                <div className='w-[80%] h-full bg-white'>
+                {/* Inner NavBar */}
+                <div className='w-full h-[59px]  flex items-center align-middle bg-white shadow-md justify-between pl-5 pr-5 border-t-2 border'>
+                    <div className='w-[60%] flex flex-col gap-2 '>
+                       <p>Pages 1</p>
+                       <p>Pages 1</p>
+                    </div>
+                </div>
+                    {children}
+                    </div>
             </div>
 
         </div>