diff --git a/docs/react-ui-kit/build-in-call-ui/build-your-own/add-custom-sidebar.mdx b/docs/react-ui-kit/build-in-call-ui/build-your-own/add-custom-sidebar.mdx
index 46020204a..b63e30f4b 100644
--- a/docs/react-ui-kit/build-in-call-ui/build-your-own/add-custom-sidebar.mdx
+++ b/docs/react-ui-kit/build-in-call-ui/build-your-own/add-custom-sidebar.mdx
@@ -13,8 +13,8 @@ To create a sidebar of your own, you need 2 things.
 import CodeRunner from '@site/src/components/CodeRunner/CodeRunner';
 
 <CodeRunner 
-hide={[{start:1, end: 5}, {start:97, end: 268}]}
-highlight={[{start:6, end: 60}, {start:81, end: 91}]}
+hide={[{start:1, end: 5}, {start:98, end: 268}]}
+highlight={[{start:6, end: 64}, {start:85, end: 98}]}
 file={`
 import { DyteStage, DyteGrid, DyteNotifications, DyteSidebar, DyteControlbar, DyteParticipantsAudio, DyteDialogManager, DyteControlbarButton, DyteSidebarUi, defaultIconPack, defaultConfig, generateConfig } from '@dytesdk/react-ui-kit';
 import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';