diff --git a/src/containers/LeftSidebar.js b/src/containers/LeftSidebar.js
index b06fcb2..63e049d 100644
--- a/src/containers/LeftSidebar.js
+++ b/src/containers/LeftSidebar.js
@@ -1,57 +1,69 @@
-import routes from '../routes/sidebar'
-import { NavLink,  Routes, Link , useLocation} from 'react-router-dom'
-import SidebarSubmenu from './SidebarSubmenu';
-import XMarkIcon  from '@heroicons/react/24/outline/XMarkIcon'
-import { useDispatch } from 'react-redux';
+import routes from "../routes/sidebar";
+import { NavLink, Routes, Link, useLocation } from "react-router-dom";
+import SidebarSubmenu from "./SidebarSubmenu";
+import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon";
+import { useDispatch } from "react-redux";
 
-function LeftSidebar(){
-    const location = useLocation();
+function LeftSidebar() {
+  const location = useLocation();
 
-    const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
+  const close = (e) => {
+    document.getElementById("left-sidebar-drawer").click();
+  };
 
-    const close = (e) => {
-        document.getElementById('left-sidebar-drawer').click()
-    }
+  return (
+    <div className="drawer-side  z-30  ">
+      <label htmlFor="left-sidebar-drawer" className="drawer-overlay"></label>
+      <ul className="menu  pt-2 w-80 bg-base-100 min-h-full   text-base-content">
+        <button
+          className="btn btn-ghost bg-base-300  btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden"
+          onClick={() => close()}
+        >
+          <XMarkIcon className="h-5 inline-block w-5" />
+        </button>
 
-    return(
-        <div className="drawer-side  z-30  ">
-            <label htmlFor="left-sidebar-drawer" className="drawer-overlay"></label> 
-            <ul className="menu  pt-2 w-80 bg-base-100 min-h-full   text-base-content">
-            <button className="btn btn-ghost bg-base-300  btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden" onClick={() => close()}>
-            <XMarkIcon className="h-5 inline-block w-5"/>
-            </button>
-
-                <li className="mb-2 font-semibold text-xl">
-                    
-                    <Link to={'/app/welcome'}><img className="mask mask-squircle w-10" src="/logo192.png" alt="DashWind Logo"/>DashWind</Link> </li>
-                {
-                    routes.map((route, k) => {
-                        return(
-                            <li className="" key={k}>
-                                {
-                                    route.submenu ? 
-                                        <SidebarSubmenu {...route}/> : 
-                                    (<NavLink
-                                        end
-                                        to={route.path}
-                                        className={({isActive}) => `${isActive ? 'font-semibold  bg-base-200 ' : 'font-normal'}`} >
-                                           {route.icon} {route.name}
-                                            {
-                                                location.pathname === route.path ? (<span className="absolute inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary "
-                                                aria-hidden="true"></span>) : null
-                                            }
-                                    </NavLink>)
-                                }
-                                
-                            </li>
-                        )
-                    })
-                }
-
-            </ul>
-        </div>
-    )
+        <li className="mb-2 font-semibold text-xl">
+          <Link to={"/app/welcome"}>
+            <img
+              className="mask mask-squircle w-10"
+              src="/logo192.png"
+              alt="DashWind Logo"
+            />
+            DashWind
+          </Link>{" "}
+        </li>
+        {routes.map((route, k) => {
+          return (
+            <li className="" key={k}>
+              {route.submenu ? (
+                <SidebarSubmenu {...route} />
+              ) : (
+                <NavLink
+                  end
+                  to={route.path}
+                  className={({ isActive }) =>
+                    `${
+                      isActive ? "font-semibold  bg-base-200 " : "font-normal"
+                    }`
+                  }
+                >
+                  {route.icon} {route.name}
+                  {location.pathname === route.path ? (
+                    <span
+                      className="absolute inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-yellow-200"
+                      aria-hidden="true"
+                    ></span>
+                  ) : null}
+                </NavLink>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
 }
 
-export default LeftSidebar
\ No newline at end of file
+export default LeftSidebar;
diff --git a/src/containers/RightSidebar.js b/src/containers/RightSidebar.js
index 31516fb..ee987a3 100644
--- a/src/containers/RightSidebar.js
+++ b/src/containers/RightSidebar.js
@@ -1,60 +1,81 @@
-import XMarkIcon  from '@heroicons/react/24/solid/XMarkIcon'
-import { useDispatch, useSelector } from 'react-redux'
-import NotificationBodyRightDrawer from '../features/common/components/NotificationBodyRightDrawer'
-import { closeRightDrawer } from '../features/common/rightDrawerSlice'
-import { RIGHT_DRAWER_TYPES } from '../utils/globalConstantUtil'
-import CalendarEventsBodyRightDrawer from '../features/calendar/CalendarEventsBodyRightDrawer'
+import XMarkIcon from "@heroicons/react/24/solid/XMarkIcon";
+import { useDispatch, useSelector } from "react-redux";
+import NotificationBodyRightDrawer from "../features/common/components/NotificationBodyRightDrawer";
+import { closeRightDrawer } from "../features/common/rightDrawerSlice";
+import { RIGHT_DRAWER_TYPES } from "../utils/globalConstantUtil";
+import CalendarEventsBodyRightDrawer from "../features/calendar/CalendarEventsBodyRightDrawer";
 
+function RightSidebar() {
+  const { isOpen, bodyType, extraObject, header } = useSelector(
+    (state) => state.rightDrawer
+  );
+  const dispatch = useDispatch();
 
-function RightSidebar(){
+  const close = (e) => {
+    dispatch(closeRightDrawer(e));
+  };
 
-    const {isOpen, bodyType, extraObject, header} = useSelector(state => state.rightDrawer)
-    const dispatch = useDispatch()
+  return (
+    <div
+      className={
+        " fixed overflow-hidden z-20 bg-gray-900 bg-opacity-25 inset-0 transform ease-in-out " +
+        (isOpen
+          ? " transition-opacity opacity-100 duration-500 translate-x-0  "
+          : " transition-all delay-500 opacity-0 translate-x-full  ")
+      }
+    >
+      <section
+        className={
+          "w-80 md:w-96  right-0 absolute bg-base-100 h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform  " +
+          (isOpen ? " translate-x-0 " : " translate-x-full ")
+        }
+      >
+        <div className="relative  pb-5 flex flex-col  h-full">
+          {/* Header */}
+          <div className="navbar   flex pl-4 pr-4   shadow-md ">
+            <button
+              className="float-left btn btn-circle btn-outline btn-sm"
+              onClick={() => close()}
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+            <h1>Halo</h1>
+            <span className="ml-2 font-bold text-xl">{header}</span>
+          </div>
 
-    const close = (e) => {
-      dispatch(closeRightDrawer(e))
-    }
-
-      
-
-    return(
-        <div className={" fixed overflow-hidden z-20 bg-gray-900 bg-opacity-25 inset-0 transform ease-in-out " + (isOpen ? " transition-opacity opacity-100 duration-500 translate-x-0  " : " transition-all delay-500 opacity-0 translate-x-full  ")}>
-      
-            <section className={ "w-80 md:w-96  right-0 absolute bg-base-100 h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform  " + (isOpen ? " translate-x-0 " : " translate-x-full ")}>
-                
-                    <div className="relative  pb-5 flex flex-col  h-full">
-                        
-                        {/* Header */}
-                        <div className="navbar   flex pl-4 pr-4   shadow-md ">
-                            <button className="float-left btn btn-circle btn-outline btn-sm" onClick={() => close()}>
-                            <XMarkIcon className="h-5 w-5"/>
-                            </button>
-                            <span className="ml-2 font-bold text-xl">{header}</span>
-                        </div>
-
-
-                        {/* ------------------ Content Start ------------------ */}
-                        <div className="overflow-y-scroll pl-4 pr-4">
-                            <div className="flex flex-col w-full">
-                            {/* Loading drawer body according to different drawer type */}
-                            {
-                                {
-                                        [RIGHT_DRAWER_TYPES.NOTIFICATION] : <NotificationBodyRightDrawer {...extraObject} closeRightDrawer={close}/>,
-                                        [RIGHT_DRAWER_TYPES.CALENDAR_EVENTS] : <CalendarEventsBodyRightDrawer {...extraObject} closeRightDrawer={close}/>,
-                                        [RIGHT_DRAWER_TYPES.DEFAULT] : <div></div>
-                                }[bodyType]
-                            }
-                                
-                            </div>
-                        </div>
-                        {/* ------------------ Content End ------------------ */}
-                    </div>
-
-            </section>
-
-            <section className=" w-screen h-full cursor-pointer " onClick={() => close()} ></section>
+          {/* ------------------ Content Start ------------------ */}
+          <div className="overflow-y-scroll pl-4 pr-4">
+            <div className="flex flex-col w-full">
+              {/* Loading drawer body according to different drawer type */}
+              {
+                {
+                  [RIGHT_DRAWER_TYPES.NOTIFICATION]: (
+                    <NotificationBodyRightDrawer
+                      {...extraObject}
+                      closeRightDrawer={close}
+                    />
+                  ),
+                  [RIGHT_DRAWER_TYPES.CALENDAR_EVENTS]: (
+                    <CalendarEventsBodyRightDrawer
+                      {...extraObject}
+                      closeRightDrawer={close}
+                    />
+                  ),
+                  [RIGHT_DRAWER_TYPES.DEFAULT]: <div></div>,
+                }[bodyType]
+              }
+            </div>
+          </div>
+          {/* ------------------ Content End ------------------ */}
         </div>
-    )
+      </section>
+
+      <section
+        className=" w-screen h-full cursor-pointer "
+        onClick={() => close()}
+      ></section>
+    </div>
+  );
 }
 
-export default RightSidebar
\ No newline at end of file
+export default RightSidebar;
diff --git a/src/containers/SidebarSubmenu.js b/src/containers/SidebarSubmenu.js
index f7642c5..fc681b7 100644
--- a/src/containers/SidebarSubmenu.js
+++ b/src/containers/SidebarSubmenu.js
@@ -1,49 +1,56 @@
-import ChevronDownIcon from  '@heroicons/react/24/outline/ChevronDownIcon'
-import {useEffect, useState} from 'react'
-import { Link, useLocation } from 'react-router-dom'
-
-
-function SidebarSubmenu({submenu, name, icon}){
-    const location = useLocation()
-    const [isExpanded, setIsExpanded] = useState(false)
-
-
-    /** Open Submenu list if path found in routes, this is for directly loading submenu routes  first time */
-    useEffect(() => {
-        if(submenu.filter(m => {return m.path === location.pathname})[0])setIsExpanded(true)
-    }, [])
-
-    return (
-        <div className='flex flex-col'>
-
-            {/** Route header */}
-            <div className='w-full block' onClick={() => setIsExpanded(!isExpanded)}>
-                {icon} {name} 
-                <ChevronDownIcon className={'w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all  ' + (isExpanded ? 'rotate-180' : '')}/>
-            </div>
-
-            {/** Submenu list */}
-            <div className={` w-full `+ (isExpanded ? "" : "hidden")}>
-                <ul className={`menu menu-compact`}>
-                {
-                    submenu.map((m, k) => {
-                        return(
-                            <li key={k}>
-                                <Link to={m.path}>
-                                    {m.icon} {m.name}
-                                    {
-                                            location.pathname == m.path ? (<span className="absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary "
-                                                aria-hidden="true"></span>) : null
-                                    }
-                                </Link>
-                            </li>
-                        )
-                    })
-                }
-                </ul>
-            </div>
-        </div>
+import ChevronDownIcon from "@heroicons/react/24/outline/ChevronDownIcon";
+import { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+function SidebarSubmenu({ submenu, name, icon }) {
+  const location = useLocation();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  /** Open Submenu list if path found in routes, this is for directly loading submenu routes  first time */
+  useEffect(() => {
+    if (
+      submenu.filter((m) => {
+        return m.path === location.pathname;
+      })[0]
     )
+      setIsExpanded(true);
+  }, []);
+
+  return (
+    <div className="flex flex-col">
+      {/** Route header */}
+      <div className="w-full block" onClick={() => setIsExpanded(!isExpanded)}>
+        {icon} {name}
+        <ChevronDownIcon
+          className={
+            "w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all  " +
+            (isExpanded ? "rotate-180" : "")
+          }
+        />
+      </div>
+
+      {/** Submenu list */}
+      <div className={` w-full ` + (isExpanded ? "" : "hidden")}>
+        <ul className={`menu menu-compact`}>
+          {submenu.map((m, k) => {
+            return (
+              <li key={k}>
+                <Link to={m.path}>
+                  {m.icon} {m.name}
+                  {location.pathname == m.path ? (
+                    <span
+                      className="absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary "
+                      aria-hidden="true"
+                    ></span>
+                  ) : null}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
 }
 
-export default SidebarSubmenu
\ No newline at end of file
+export default SidebarSubmenu;