diff --git a/commit/api/get_commands.py b/commit/api/get_commands.py
index 218a4ec..b64187a 100644
--- a/commit/api/get_commands.py
+++ b/commit/api/get_commands.py
@@ -56,8 +56,8 @@ def get_site_app_commands(app: str) -> dict:
      # Call get_commands if it is a callable
 
     command_list = []
-    if hasattr(app_command_module, 'get_commands') and callable(getattr(app_command_module, 'get_commands')):
-        commands_from_function = app_command_module.get_commands()
+    if hasattr(app_command_module, 'commands'):
+        commands_from_function = app_command_module.commands
         if commands_from_function:
             for command_instance in commands_from_function:
                 help_text = getattr(command_instance, 'help', 'No help text available')
diff --git a/dashboard/src/components/common/Header.tsx b/dashboard/src/components/common/Header.tsx
index e166546..f60b0fc 100644
--- a/dashboard/src/components/common/Header.tsx
+++ b/dashboard/src/components/common/Header.tsx
@@ -1,8 +1,5 @@
 import { Link } from 'react-router-dom'
 import CommitLogo from '../../assets/commit-logo.png'
-import { Button } from "@/components/ui/button"
-import { GitHubLogoIcon } from '@radix-ui/react-icons'
-
 
 export const Header = ({ text }: { text?: string }) => {
     return (
@@ -13,16 +10,6 @@ export const Header = ({ text }: { text?: string }) => {
                 </Link>
                 {text && <h1 className='mt-[-1px] sm:text-lg text-sm'>{text}</h1>}
             </div>
-            <div className='flex gap-2 items-center'>
-                <Button variant='outline' color='primary' size='sm' onClick={() => window.open('https://github.com/The-Commit-Company', '_blank')}>
-                    <GitHubLogoIcon className='w-4 h-4 mr-2' /> GitHub
-                </Button>
-                <Button asChild size='sm'>
-                    <Link to={'https://forms.gle/cNpbkGRKbwnthQ6Q8'} target='_blank' rel='noreferrer' className='text-center'>
-                        Take our survey
-                    </Link>
-                </Button>
-            </div>
         </header>
     )
 }
\ No newline at end of file
diff --git a/dashboard/src/components/features/APIClient/APIClientContent.tsx b/dashboard/src/components/features/APIClient/APIClientContent.tsx
new file mode 100644
index 0000000..9024319
--- /dev/null
+++ b/dashboard/src/components/features/APIClient/APIClientContent.tsx
@@ -0,0 +1,285 @@
+import CopyButton from "@/components/common/CopyToClipboard/CopyToClipboard"
+import { Button } from "@/components/ui/button"
+import { DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Argument } from "@/types/APIData"
+import { FrappeConfig, FrappeContext } from "frappe-react-sdk"
+import { useCallback, useContext, useEffect, useState } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import { FaCaretDown } from "react-icons/fa"
+import { IoAdd } from "react-icons/io5";
+
+
+export interface APIClientContentProps {
+    endpoint: string
+    parameters?: Argument[]
+    open: boolean
+}
+
+export const APIClientContent = ({ endpoint, open, parameters }: APIClientContentProps) => {
+
+    const [requestType, setRequestType] = useState<"GET" | "POST">('GET')
+
+    const methods = useForm()
+
+    const { setValue, reset, register, handleSubmit, watch } = useForm()
+
+    const [paramsType, setParamsType] = useState<'params' | 'form-data'>('params')
+
+    const [response, setResponse] = useState<any>({})
+
+    const data = watch()
+
+    const onParamsTypeChange = useCallback((type: 'params' | 'form-data') => {
+        if (type === 'params') {
+            setParamsType('params')
+            if (parameters) {
+                parameters.forEach((parameter) => {
+                    setValue(parameter.argument, '')
+                })
+            } else {
+                reset({})
+
+            }
+        } else {
+            setParamsType('form-data')
+            reset({})
+        }
+    }, [parameters])
+
+    useEffect(() => {
+        if (parameters) {
+            parameters.forEach((parameter) => {
+                setValue(parameter.argument, '')
+            })
+
+        }
+    }, [parameters])
+
+    useEffect(() => {
+        reset({})
+        setRequestType('GET')
+        setParamsType('params')
+        setResponse({})
+    }, [open])
+
+    const { call } = useContext(FrappeContext) as FrappeConfig
+
+    const returnString = (value: any) => {
+        try {
+            // If it's a string but contains JSON-like structure, attempt to parse it
+            const parsedValue = JSON.parse(value);
+
+            if (Array.isArray(parsedValue)) {
+                return JSON.stringify(parsedValue); // Convert array to string
+            } else if (typeof parsedValue === 'object' && parsedValue !== null) {
+                return JSON.stringify(parsedValue); // Convert object to string
+            }
+        } catch (error) {
+            // If JSON.parse fails, it's not a JSON string, continue to the next checks
+        }
+
+        // Check if it's already a string
+        if (typeof value === 'string') {
+            return value; // Return the string as it is
+        }
+
+        // Check if it's an array
+        if (Array.isArray(value)) {
+            return JSON.stringify(value); // Convert array to string
+        }
+
+        // Check if it's an object
+        if (typeof value === 'object' && value !== null) {
+            return JSON.stringify(value); // Convert object to string
+        }
+
+        // If it's not string, array, or object, return the string representation of the value
+        return String(value);
+    }
+
+    const onSubmit = (data: any) => {
+        const filteredParameterValues = Object.keys(data).reduce((acc, key) => {
+            if (data[key] !== '') {
+                // check if value is string if it not if it is list or object then convert it to string using JSON.stringify
+                acc[key] = returnString(data[key])
+            }
+            return acc
+        }, {} as Record<string, string>)
+
+        const paramsData = handleFormData(filteredParameterValues)
+        console.log('paramsData', paramsData, filteredParameterValues)
+
+        if (requestType === 'GET') {
+            // call get api with endpoint and parameterValues
+            call.get(endpoint, paramsData).then((response) => {
+                setResponse(response)
+            }).catch((error) => {
+                setResponse(error)
+            })
+        } else {
+            // call post api with endpoint and parameterValues
+            call.post(endpoint, paramsData).then((response) => {
+                setResponse(response)
+            }).catch((error) => {
+                setResponse(error)
+            })
+        }
+    }
+
+    const handleFormData = (data: any) => {
+        if (paramsType === 'form-data') {
+            const obj = {}
+            Object.keys(data)?.filter((key) => key.includes('key')).forEach((key) => {
+                // @ts-ignore
+                obj[data[key]] = data[key.replace('key', 'value')]
+            })
+            return obj
+        }
+        else {
+            return Object.keys(data)?.filter((key) => !(key.includes('key') || key.includes('value'))).reduce((acc, key) => {
+                acc[key] = data[key]
+                return acc
+            }, {} as Record<string, string>)
+        }
+    }
+
+    return (
+        <FormProvider {...methods}>
+            <DialogContent className="p-6 w-[90vw] sm:w-full sm:min-w-[900px] overflow-hidden">
+                <DialogHeader className="text-left">
+                    <DialogTitle>API Request</DialogTitle>
+                    <DialogDescription>
+                        Easily test and interact with your API endpoints.
+                    </DialogDescription>
+                    <div className="flex flex-col gap-4">
+                        <div className="flex flex-row gap-2">
+                        <div className="flex w-full items-center">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="outline"
+                                        aria-label="Actions"
+                                        className="rounded-r-none w-[12ch]"
+                                    >
+                                        {requestType}
+                                        <FaCaretDown className="ml-2" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent className="ml-11">
+                                    <DropdownMenuItem onClick={() => setRequestType('GET')}>
+                                        <span> GET</span>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => setRequestType('POST')}>
+                                        <span>POST</span>
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                                </DropdownMenu>
+                                <Input placeholder="Endpoint" value={endpoint} readOnly className="rounded-l-none border-l-0 w-full" />
+
+                            </div>
+                            <Button onClick={handleSubmit(onSubmit)}>
+                                Send
+                            </Button>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4 divide-x divide-gray-200" style={{
+                            gridTemplateColumns: '40% 60%'
+                        }}>
+                            <div className="flex flex-col gap-2 h-[60vh] overflow-y-scroll">
+                                <div className="flex w-full justify-end">
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                            <Button
+                                                variant="outline"
+                                                aria-label="Actions"
+                                                className="w-[14ch]"
+                                            >
+                                                {paramsType === 'params' ? 'Params' : 'Form Data'}
+                                                <FaCaretDown className="ml-2" />
+                                            </Button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent className="ml-11">
+                                            <DropdownMenuItem onClick={() => onParamsTypeChange('params')}>
+                                                <span> Params</span>
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem onClick={() => onParamsTypeChange('form-data')}>
+                                                <span>Form Data</span>
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </div>
+                                <div className="flex flex-col gap-2 w-full h-full">
+                                    <Table>
+                                        <TableHeader className="bg-gray-100 sticky top-0 z-10">
+                                            <TableRow>
+                                                <TableHead>
+                                                    Key
+                                                </TableHead>
+                                                <TableHead>
+                                                    Value
+                                                </TableHead>
+                                            </TableRow>
+                                        </TableHeader>
+                                        <TableBody>
+                                            {paramsType === 'params' ? parameters?.filter((params) => params.argument !== '')?.map((parameter) => (
+                                                <TableRow key={parameter.argument}>
+                                                    <TableCell>{parameter.argument}{parameter.default ? null : <span className="text-red-500">*</span>}</TableCell>
+                                                    <TableCell>
+                                                        <Input
+                                                            key={parameter.argument}
+                                                            required={!parameter.default}
+                                                            {...register(parameter.argument)}
+                                                            className="h-8"
+                                                        />
+                                                    </TableCell>
+                                                </TableRow>
+                                            )) : data && Object.keys(data)?.filter((key) => key.startsWith('key-')).map((key) => (
+                                                <TableRow key={key}>
+                                                    <TableCell>
+                                                        <Input
+                                                            {...register(key)}
+                                                            className="h-8"
+                                                        />
+                                                    </TableCell>
+                                                    <TableCell>
+                                                        <Input
+                                                            {...register(key.replace('key', 'value'))}
+                                                            className="h-8"
+                                                        />
+                                                    </TableCell>
+                                                </TableRow>
+                                            ))}
+                                        </TableBody>
+                                    </Table>
+                                    {paramsType === 'form-data' && <div className="flex justify-end">
+                                        <Button size={'sm'} onClick={() => {
+                                            setValue(`key-${Object.keys(data).length}`, '')
+                                            setValue(`value-${Object.keys(data).length}`, '')
+                                        }} variant="outline"><IoAdd className="mr-2 h-4 w-4" />Add Param</Button>
+                                    </div>}
+                                </div>
+                            </div>
+                            <div className="flex flex-col gap-2 px-4 h-[60vh] overflow-y-scroll">
+                                <code className="relative p-4 h-full bg-gray-50 rounded-md text-sm overflow-auto border-2 border-gray-200">
+                                    <div className="absolute top-0 right-0 p-2">
+                                        <CopyButton value={response} className="h-6 w-6" variant={'outline'} />
+                                    </div>
+                                    <pre className="counter-reset mb-2">
+                                        {
+                                            JSON.stringify(response, null, 2)
+                                        }
+                                    </pre>
+                                </code>
+                            </div>
+                        </div>
+                        <div className="text-sm text-gray-500">
+                            Note: Please use double quotes (") for parameters instead of single quotes (').
+                        </div>
+                    </div>
+                </DialogHeader>
+            </DialogContent>
+        </FormProvider>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/components/features/api_viewer/APIDetails.tsx b/dashboard/src/components/features/api_viewer/APIDetails.tsx
index c8f32e3..cf7651f 100644
--- a/dashboard/src/components/features/api_viewer/APIDetails.tsx
+++ b/dashboard/src/components/features/api_viewer/APIDetails.tsx
@@ -8,8 +8,13 @@ import { web_url } from "@/config/socket"
 import { APIData, Argument } from "@/types/APIData"
 import { XMarkIcon } from "@heroicons/react/24/outline"
 import { useFrappeGetCall } from "frappe-react-sdk"
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { MdOutlineFileDownload } from "react-icons/md"
+import Markdown from "react-markdown"
+import { AiOutlineThunderbolt } from "react-icons/ai"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Dialog } from "@/components/ui/dialog"
+import { APIClientContent } from "../APIClient/APIClientContent"
 import { APIDocumentationOfSiteApp, Documentation } from "../documentation/APIDocumentation"
 
 export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, setSelectedEndpoint, viewerType }: { project_branch: string, endpointData: APIData[], selectedEndpoint: string, setSelectedEndpoint: React.Dispatch<React.SetStateAction<string>>, viewerType: string }) => {
@@ -48,11 +53,13 @@ export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, set
         }
     }
 
+    const [apiOpen, setApiOpen] = useState(false)
+
     return (
         <div className="flex flex-col space-y-3 p-3">
             <div className="border-b border-gray-200 pb-3 flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                    <h1 className="text-lg font-semibold leading-6 text-gray-900">API Details</h1>
+                    <h1 className="text-lg font-semibold leading-6 text-gray-900">{data?.name}</h1>
                     {data?.allow_guest || data?.xss_safe ? <div className="border-b border-gray-100  space-x-2">
                         {data?.allow_guest && <span className="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20">
                             Allow Guest
@@ -77,15 +84,32 @@ export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, set
             <div>
                 <div className="mt-0 border-b border-gray-100">
                     <dl className="divide-y divide-gray-100">
-                        <div className="py-2 grid grid-cols-5 gap-4 px-0">
-                            <dt className="text-sm font-medium leading-6 text-gray-900">Name :</dt>
-                            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><code>{data?.name}</code></dd>
-                        </div>
-                        <div className="py-2 sm:grid sm:grid-cols-5 sm:gap-4 sm:px-0">
+                        <div className="sm:grid sm:grid-cols-5 sm:gap-4 sm:px-0">
                             <dt className="text-sm font-medium leading-6 text-gray-900">Endpoint :</dt>
-                            <div className="flex items-start space-x-2 sm:col-span-4">
-                                <dd className="mt-1 text-sm text-blue-500 cursor-pointer leading-6 sm:col-span-2 sm:mt-0 truncate w-[58ch]">{data?.api_path}</dd>
-                                <CopyButton value={data?.api_path ?? ''} className="h-6 w-6" />
+                            <div className="pb-1 flex items-start space-x-2 sm:col-span-4 justify-between">
+                                <div className="flex items-center space-x-2">
+                                    <dd className="text-sm text-blue-500 cursor-pointer">
+                                        {data?.api_path}
+                                    </dd>
+                                    <CopyButton value={data?.api_path ?? ''} className="h-6 w-6" />
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    {viewerType === 'app' && <TooltipProvider>
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <Button
+                                                    size="sm"
+                                                    onClick={() => setApiOpen(true)}
+                                                >
+                                                    Call API <AiOutlineThunderbolt className="h-4 w-4 ml-2" />
+                                                </Button>
+                                            </TooltipTrigger>
+                                            <TooltipContent side="bottom" className="mr-4">
+                                                Click to make an API call to this endpoint
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>}
+                                </div>
                             </div>
                         </div>
                         <div className="py-2 sm:grid sm:grid-cols-5 sm:gap-4 sm:px-0">
@@ -131,6 +155,9 @@ export const APIDetails = ({ project_branch, endpointData, selectedEndpoint, set
                     <APIDocumentationOfSiteApp apiData={data!} project_branch={project_branch} file_path={data?.file ?? ''} endPoint={data?.api_path ?? ''} />
                 </TabsContent>}
             </Tabs>
+            <Dialog open={apiOpen} onOpenChange={setApiOpen}>
+                <APIClientContent endpoint={data?.api_path ?? ''} parameters={data?.arguments} open={apiOpen} />
+            </Dialog>
         </div >
     )
 }
@@ -188,7 +215,7 @@ export const CodeSnippet = ({ apiData, project_branch, file_path, viewerType }:
             {isLoading && <div className="flex items-center justify-center h-[calc(100vh-16rem)]">
                 <FullPageLoader />
             </div>}
-            <code className="relative bg-gray-50 p-4 rounded-md text-sm overflow-auto border-2 border-gray-200 h-[calc(100vh-22rem)]">
+            <code className="relative bg-gray-50 p-4 rounded-md text-sm overflow-auto border-2 border-gray-200 h-[calc(100vh-17rem)]">
                 <div className="absolute top-0 right-0 p-2">
                     <CopyButton value={copyValue()} className="h-6 w-6" variant={'outline'} />
                 </div>
@@ -231,7 +258,7 @@ export const Bruno = ({ doc }: { doc: APIData }) => {
             {isLoading && <div className="flex items-center justify-center h-[calc(100vh-16rem)]">
                 <FullPageLoader />
             </div>}
-            <code className="relative bg-gray-50 p-4 rounded-md text-sm overflow-auto border-2 border-gray-200 h-[calc(100vh-22rem)]">
+            <code className="relative bg-gray-50 p-4 rounded-md text-sm overflow-auto border-2 border-gray-200 h-[calc(100vh-19rem)]">
                 <div className="absolute top-0 right-0 p-2">
                     <div className="flex items-center space-x-1">
                         <Button variant={'outline'} size={'icon'} className="h-8 w-8">
diff --git a/dashboard/src/components/features/api_viewer/APIList.tsx b/dashboard/src/components/features/api_viewer/APIList.tsx
index 48e5a3b..0ca836e 100644
--- a/dashboard/src/components/features/api_viewer/APIList.tsx
+++ b/dashboard/src/components/features/api_viewer/APIList.tsx
@@ -8,6 +8,7 @@ import { AiOutlineBranches } from "react-icons/ai"
 import { GoPackage } from "react-icons/go"
 import { CommandContent } from "../commands/CommandsContent"
 import { HiOutlineCommandLine } from "react-icons/hi2";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 export interface APIListProps {
     apiList: APIData[]
@@ -50,15 +51,24 @@ export const APIList = ({ apiList, app_name, branch_name, setSelectedEndpoint, s
                         <p>{branch_name}</p>
                     </div>
                 </div>
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button aria-label="View Bench Commands" size={'sm'} variant={'outline'}>
-                            <HiOutlineCommandLine className="h-4 w-4 mr-2" />
-                            Commands
-                        </Button>
-                    </DialogTrigger>
-                    <CommandContent app={app_name} app_path={path_to_folder} />
-                </Dialog>
+                <TooltipProvider>
+                    <Tooltip>
+                        <Dialog>
+                            <DialogTrigger asChild>
+                                <TooltipTrigger asChild>
+                                    <Button aria-label="View Bench Commands" size={'sm'} variant={'outline'}>
+                                        <HiOutlineCommandLine className="h-4 w-4 mr-2" />
+                                        Commands
+                                    </Button>
+                                </TooltipTrigger>
+                            </DialogTrigger>
+                            <CommandContent app={app_name} app_path={path_to_folder} />
+                        </Dialog>
+                        <TooltipContent side="bottom">
+                            Click to view available bench commands in this app
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
             </div>
             <div className="flex flex-row space-x-4">
                 <div className="w-4/5 flex flex-row space-x-4">
diff --git a/dashboard/src/components/features/commands/CommandsContent.tsx b/dashboard/src/components/features/commands/CommandsContent.tsx
index 195111c..eb1bebd 100644
--- a/dashboard/src/components/features/commands/CommandsContent.tsx
+++ b/dashboard/src/components/features/commands/CommandsContent.tsx
@@ -85,7 +85,7 @@ const CommandComponent = ({ name, help }: CommandResponse) => {
     return (
         <div className="flex flex-col text-sm py-2 pr-4 pl-1">
             <code className="flex justify-between items-start bg-gray-100 px-1 border-2 border-gray-200 rounded-md text-sm">
-                <div>
+                <div className="pt-0.5">
                     {`bench ${name}`}
                 </div>
                 <CopyButton value={
diff --git a/dashboard/src/pages/features/erd/ERDViewer.tsx b/dashboard/src/pages/features/erd/ERDViewer.tsx
index 318d4af..000c5b6 100644
--- a/dashboard/src/pages/features/erd/ERDViewer.tsx
+++ b/dashboard/src/pages/features/erd/ERDViewer.tsx
@@ -23,9 +23,9 @@ export const ERDViewer = () => {
 
     const location = useLocation()
 
-    const { apps } = location.state as { apps: string[] }
+    const { apps } = location.state as { apps: string[] } || {}
 
-    const [selectedApps, setSelectedApps] = useState<string[]>(apps)
+    const [selectedApps, setSelectedApps] = useState<string[]>(apps ?? [])
 
     const [erdDoctypes, setERDDocTypes] = useState<{ doctype: string, project_branch: string }[]>([])
 
@@ -39,6 +39,12 @@ export const ERDViewer = () => {
 
     }, [])
 
+    useEffect(() => {
+        if (!apps) {
+            setOpen(true)
+        }
+    }, [apps])
+
     const flowRef = useRef(null)
 
     return (
@@ -113,6 +119,12 @@ export const ModuleDoctypeListDrawer = ({ open, setOpen, apps, setSelectedApps,
         setOpenDialog(false)
     }
 
+    useEffect(() => {
+        if (apps.length === 0) {
+            setOpenDialog(true)
+        }
+    }, [])
+
 
     return (
         <>
@@ -145,7 +157,7 @@ export const ModuleDoctypeListDrawer = ({ open, setOpen, apps, setSelectedApps,
                                                             </PopoverTrigger> : null}
                                                             <DoctypeListPopover doctypes={doctype} setDoctypes={setDocType} />
                                                         </Popover>
-                                                        {apps.length ? <Button variant={'outline'} onClick={() => setOpenDialog(true)} className="h-6 px-2">{apps.length} Apps</Button> : null}
+                                                        <Button variant={'outline'} onClick={() => setOpenDialog(true)} className="h-6 px-2">{apps.length} Apps</Button>
 
                                                 </Dialog.Title>
                                                 <div className="ml-3 flex h-7 items-center">
diff --git a/dashboard/src/pages/overview/Overview.tsx b/dashboard/src/pages/overview/Overview.tsx
index af8c453..64090d7 100644
--- a/dashboard/src/pages/overview/Overview.tsx
+++ b/dashboard/src/pages/overview/Overview.tsx
@@ -9,9 +9,9 @@ export const Overview = () => {
     const areAppsAvailable = isSystemAppAvailable()
 
     return (
-        <div className="h-screen flex flex-col gap-2 space-x-2 p-2 pt-0">
+        <div className="h-screen flex flex-col gap-2 space-x-2">
             <Header />
-            {areAppsAvailable ? <Tabs defaultValue="projects" className="h-full">
+            {areAppsAvailable ? <Tabs defaultValue="projects" className="h-full px-2">
                 <TabsList className="grid grid-cols-2 w-[400px]">
                     <TabsTrigger value="projects">Projects</TabsTrigger>
                     <TabsTrigger value="your-apps">Site Apps</TabsTrigger>