diff --git a/src/@core/layouts/HeaderLayout.js b/src/@core/layouts/HeaderLayout.js
index eebb2e36..b914eaa3 100644
--- a/src/@core/layouts/HeaderLayout.js
+++ b/src/@core/layouts/HeaderLayout.js
@@ -14,7 +14,7 @@ import {
 import classnames from 'classnames';
 import { ArrowUp } from 'react-feather';
 import ScrollToTop from 'react-scroll-up';
-import { Navbar, Button } from 'reactstrap';
+import { Navbar, Button } from '../../components/ui/index';
 
 // ** Configs
 import themeConfig from '@configs/themeConfig';
diff --git a/src/@core/layouts/HorizontalLayout.js b/src/@core/layouts/HorizontalLayout.js
index be51ca14..80116494 100644
--- a/src/@core/layouts/HorizontalLayout.js
+++ b/src/@core/layouts/HorizontalLayout.js
@@ -1,123 +1,128 @@
 // ** React Imports
-import { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 
 // ** Store & Actions
-import { useSelector, useDispatch } from 'react-redux'
-import { handleMenuHidden, handleContentWidth } from '@store/actions/layout'
+import { useSelector, useDispatch } from 'react-redux';
+import { handleMenuHidden, handleContentWidth } from '@store/actions/layout';
 
 // ** Third Party Components
-import classnames from 'classnames'
-import { ArrowUp } from 'react-feather'
-import ScrollToTop from 'react-scroll-up'
-import { Navbar, NavItem, Button } from 'reactstrap'
+import classnames from 'classnames';
+import { ArrowUp } from 'react-feather';
+import ScrollToTop from 'react-scroll-up';
+import { Navbar, NavItem, Button } from '../../components/ui/index';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 // ** Custom Components
-import Customizer from '@components/customizer'
-import NavbarComponent from './components/navbar'
-import FooterComponent from './components/footer'
-import MenuComponent from './components/menu/horizontal-menu'
+import Customizer from '@components/customizer';
+import NavbarComponent from './components/navbar';
+import FooterComponent from './components/footer';
+import MenuComponent from './components/menu/horizontal-menu';
 
 // ** Custom Hooks
-import { useRTL } from '@hooks/useRTL'
-import { useSkin } from '@hooks/useSkin'
-import { useNavbarType } from '@hooks/useNavbarType'
-import { useFooterType } from '@hooks/useFooterType'
-import { useNavbarColor } from '@hooks/useNavbarColor'
+import { useRTL } from '@hooks/useRTL';
+import { useSkin } from '@hooks/useSkin';
+import { useNavbarType } from '@hooks/useNavbarType';
+import { useFooterType } from '@hooks/useFooterType';
+import { useNavbarColor } from '@hooks/useNavbarColor';
 
 // ** Styles
-import '@styles/base/core/menu/menu-types/horizontal-menu.scss'
+import '@styles/base/core/menu/menu-types/horizontal-menu.scss';
 
 const HorizontalLayout = props => {
   // ** Props
-  const { children, navbar, footer, menu, currentActiveItem, routerProps } = props
+  const { children, navbar, footer, menu, currentActiveItem, routerProps } =
+    props;
 
   // ** Hooks
-  const [skin, setSkin] = useSkin()
-  const [isRtl, setIsRtl] = useRTL()
-  const [navbarType, setNavbarType] = useNavbarType()
-  const [footerType, setFooterType] = useFooterType()
-  const [navbarColor, setNavbarColor] = useNavbarColor()
+  const [skin, setSkin] = useSkin();
+  const [isRtl, setIsRtl] = useRTL();
+  const [navbarType, setNavbarType] = useNavbarType();
+  const [footerType, setFooterType] = useFooterType();
+  const [navbarColor, setNavbarColor] = useNavbarColor();
 
   // ** States
-  const [isMounted, setIsMounted] = useState(false)
-  const [navbarScrolled, setNavbarScrolled] = useState(false)
+  const [isMounted, setIsMounted] = useState(false);
+  const [navbarScrolled, setNavbarScrolled] = useState(false);
 
   // ** Store Vars
-  const dispatch = useDispatch()
-  const layoutStore = useSelector(state => state.layout)
+  const dispatch = useDispatch();
+  const layoutStore = useSelector(state => state.layout);
 
   // ** Vars
-  const contentWidth = layoutStore.contentWidth
-  const isHidden = layoutStore.menuHidden
+  const contentWidth = layoutStore.contentWidth;
+  const isHidden = layoutStore.menuHidden;
 
   // ** Handles Content Width
-  const setContentWidth = val => dispatch(handleContentWidth(val))
+  const setContentWidth = val => dispatch(handleContentWidth(val));
 
   // ** Handles Content Width
-  const setIsHidden = val => dispatch(handleMenuHidden(val))
+  const setIsHidden = val => dispatch(handleMenuHidden(val));
 
   // ** UseEffect Cleanup
   const cleanup = () => {
-    setIsMounted(false)
-    setNavbarScrolled(false)
-  }
+    setIsMounted(false);
+    setNavbarScrolled(false);
+  };
 
   //** ComponentDidMount
   useEffect(() => {
-    setIsMounted(true)
+    setIsMounted(true);
     window.addEventListener('scroll', function () {
       if (window.pageYOffset > 65 && navbarScrolled === false) {
-        setNavbarScrolled(true)
+        setNavbarScrolled(true);
       }
       if (window.pageYOffset < 65) {
-        setNavbarScrolled(false)
+        setNavbarScrolled(false);
       }
-    })
-    return () => cleanup()
-  }, [])
+    });
+    return () => cleanup();
+  }, []);
 
   // ** Vars
   const footerClasses = {
     static: 'footer-static',
     sticky: 'footer-fixed',
     hidden: 'footer-hidden'
-  }
+  };
 
   const navbarWrapperClasses = {
     floating: 'navbar-floating',
     sticky: 'navbar-sticky',
     static: 'navbar-static'
-  }
+  };
 
   const navbarClasses = {
     floating: 'floating-nav',
     sticky: 'fixed-top'
-  }
+  };
 
-  const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'
+  const bgColorCondition =
+    navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white';
 
   if (!isMounted) {
-    return null
+    return null;
   }
 
   return (
     <div
       className={classnames(
-        `wrapper horizontal-layout horizontal-menu ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${
-          footerClasses[footerType] || 'footer-static'
-        } menu-expanded`
+        `wrapper horizontal-layout horizontal-menu ${
+          navbarWrapperClasses[navbarType] || 'navbar-floating'
+        } ${footerClasses[footerType] || 'footer-static'} menu-expanded`
       )}
       {...(isHidden ? { 'data-col': '1-column' } : {})}
     >
       <Navbar
         expand='lg'
-        className={classnames('header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center', {
-          'navbar-scrolled': navbarScrolled
-        })}
+        className={classnames(
+          'header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center',
+          {
+            'navbar-scrolled': navbarScrolled
+          }
+        )}
       >
         {!navbar && (
           <div className='navbar-header d-xl-block d-none'>
@@ -145,12 +150,24 @@ const HorizontalLayout = props => {
             expand='sm'
             light={skin !== 'dark'}
             dark={skin === 'dark' || bgColorCondition}
-            className={classnames(`header-navbar navbar-horizontal navbar-shadow menu-border`, {
-              [navbarClasses[navbarType]]: navbarType !== 'static',
-              'floating-nav': (!navbarClasses[navbarType] && navbarType !== 'static') || navbarType === 'floating'
-            })}
+            className={classnames(
+              `header-navbar navbar-horizontal navbar-shadow menu-border`,
+              {
+                [navbarClasses[navbarType]]: navbarType !== 'static',
+                'floating-nav':
+                  (!navbarClasses[navbarType] && navbarType !== 'static') ||
+                  navbarType === 'floating'
+              }
+            )}
           >
-            {menu ? menu : <MenuComponent routerProps={routerProps} currentActiveItem={currentActiveItem} />}
+            {menu ? (
+              menu
+            ) : (
+              <MenuComponent
+                routerProps={routerProps}
+                currentActiveItem={currentActiveItem}
+              />
+            )}
           </Navbar>
         </div>
       ) : null}
@@ -180,11 +197,21 @@ const HorizontalLayout = props => {
         />
       ) : null}
       <footer
-        className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, {
-          'd-none': footerType === 'hidden'
-        })}
+        className={classnames(
+          `footer footer-light ${footerClasses[footerType] || 'footer-static'}`,
+          {
+            'd-none': footerType === 'hidden'
+          }
+        )}
       >
-        {footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />}
+        {footer ? (
+          footer
+        ) : (
+          <FooterComponent
+            footerType={footerType}
+            footerClasses={footerClasses}
+          />
+        )}
       </footer>
 
       {themeConfig.layout.scrollTop === true ? (
@@ -197,6 +224,6 @@ const HorizontalLayout = props => {
         </div>
       ) : null}
     </div>
-  )
-}
-export default HorizontalLayout
+  );
+};
+export default HorizontalLayout;
diff --git a/src/@core/layouts/VerticalLayout.js b/src/@core/layouts/VerticalLayout.js
index 43145f82..55ba971d 100644
--- a/src/@core/layouts/VerticalLayout.js
+++ b/src/@core/layouts/VerticalLayout.js
@@ -1,129 +1,135 @@
 // ** React Imports
-import { useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 // ** Store & Actions
-import { useSelector, useDispatch } from 'react-redux'
-import { handleMenuCollapsed, handleContentWidth, handleMenuHidden } from '@store/actions/layout'
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  handleMenuCollapsed,
+  handleContentWidth,
+  handleMenuHidden
+} from '@store/actions/layout';
 
 // ** Third Party Components
-import classnames from 'classnames'
-import { ArrowUp } from 'react-feather'
-import ScrollToTop from 'react-scroll-up'
-import { Navbar, Button } from 'reactstrap'
+import classnames from 'classnames';
+import { ArrowUp } from 'react-feather';
+import ScrollToTop from 'react-scroll-up';
+import { Navbar, Button } from '../../components/ui/index';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 // ** Custom Components
-import Customizer from '@components/customizer'
-import FooterComponent from './components/footer'
-import NavbarComponent from './components/navbar'
-import SidebarComponent from './components/menu/vertical-menu'
+import Customizer from '@components/customizer';
+import FooterComponent from './components/footer';
+import NavbarComponent from './components/navbar';
+import SidebarComponent from './components/menu/vertical-menu';
 
 // ** Custom Hooks
-import { useRTL } from '@hooks/useRTL'
-import { useSkin } from '@hooks/useSkin'
-import { useNavbarType } from '@hooks/useNavbarType'
-import { useFooterType } from '@hooks/useFooterType'
-import { useNavbarColor } from '@hooks/useNavbarColor'
+import { useRTL } from '@hooks/useRTL';
+import { useSkin } from '@hooks/useSkin';
+import { useNavbarType } from '@hooks/useNavbarType';
+import { useFooterType } from '@hooks/useFooterType';
+import { useNavbarColor } from '@hooks/useNavbarColor';
 
 // ** Styles
-import '@styles/base/core/menu/menu-types/vertical-menu.scss'
-import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'
+import '@styles/base/core/menu/menu-types/vertical-menu.scss';
+import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss';
 
 const VerticalLayout = props => {
   // ** Props
-  const { children, navbar, footer, menu, routerProps, currentActiveItem } = props
+  const { children, navbar, footer, menu, routerProps, currentActiveItem } =
+    props;
 
   // ** Hooks
-  const [skin, setSkin] = useSkin()
-  const [isRtl, setIsRtl] = useRTL()
-  const [navbarType, setNavbarType] = useNavbarType()
-  const [footerType, setFooterType] = useFooterType()
-  const [navbarColor, setNavbarColor] = useNavbarColor()
+  const [skin, setSkin] = useSkin();
+  const [isRtl, setIsRtl] = useRTL();
+  const [navbarType, setNavbarType] = useNavbarType();
+  const [footerType, setFooterType] = useFooterType();
+  const [navbarColor, setNavbarColor] = useNavbarColor();
 
   // ** States
-  const [isMounted, setIsMounted] = useState(false)
-  const [menuVisibility, setMenuVisibility] = useState(false)
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  const [isMounted, setIsMounted] = useState(false);
+  const [menuVisibility, setMenuVisibility] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   // ** Store Vars
-  const dispatch = useDispatch()
-  const layoutStore = useSelector(state => state.layout)
+  const dispatch = useDispatch();
+  const layoutStore = useSelector(state => state.layout);
 
   // ** Update Window Width
   const handleWindowWidth = () => {
-    setWindowWidth(window.innerWidth)
-  }
+    setWindowWidth(window.innerWidth);
+  };
 
   // ** Vars
-  const location = useLocation()
-  const contentWidth = layoutStore.contentWidth
-  const menuCollapsed = layoutStore.menuCollapsed
-  const isHidden = layoutStore.menuHidden
+  const location = useLocation();
+  const contentWidth = layoutStore.contentWidth;
+  const menuCollapsed = layoutStore.menuCollapsed;
+  const isHidden = layoutStore.menuHidden;
 
   // ** Toggles Menu Collapsed
-  const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val))
+  const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val));
 
   // ** Handles Content Width
-  const setContentWidth = val => dispatch(handleContentWidth(val))
+  const setContentWidth = val => dispatch(handleContentWidth(val));
 
   // ** Handles Content Width
-  const setIsHidden = val => dispatch(handleMenuHidden(val))
+  const setIsHidden = val => dispatch(handleMenuHidden(val));
 
   //** This function will detect the Route Change and will hide the menu on menu item click
   useEffect(() => {
     if (menuVisibility && windowWidth < 1200) {
-      setMenuVisibility(false)
+      setMenuVisibility(false);
     }
-  }, [location])
+  }, [location]);
 
   //** Sets Window Size & Layout Props
   useEffect(() => {
     if (window !== undefined) {
-      window.addEventListener('resize', handleWindowWidth)
+      window.addEventListener('resize', handleWindowWidth);
     }
-  }, [windowWidth])
+  }, [windowWidth]);
 
   //** ComponentDidMount
   useEffect(() => {
-    setIsMounted(true)
-    return () => setIsMounted(false)
-  }, [])
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
 
   // ** Vars
   const footerClasses = {
     static: 'footer-static',
     sticky: 'footer-fixed',
     hidden: 'footer-hidden'
-  }
+  };
 
   const navbarWrapperClasses = {
     floating: 'navbar-floating',
     sticky: 'navbar-sticky',
     static: 'navbar-static',
     hidden: 'navbar-hidden'
-  }
+  };
 
   const navbarClasses = {
     floating: 'floating-nav',
     sticky: 'fixed-top',
     static: 'navbar-static-top',
     hidden: 'd-none'
-  }
+  };
 
-  const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'
+  const bgColorCondition =
+    navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white';
 
   if (!isMounted) {
-    return null
+    return null;
   }
   return (
     <div
       className={classnames(
-        `wrapper vertical-layout ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${
-          footerClasses[footerType] || 'footer-static'
-        }`,
+        `wrapper vertical-layout ${
+          navbarWrapperClasses[navbarType] || 'navbar-floating'
+        } ${footerClasses[footerType] || 'footer-static'}`,
         {
           // Modern Menu
           'vertical-menu-modern': windowWidth >= 1200,
@@ -157,11 +163,21 @@ const VerticalLayout = props => {
         dark={skin === 'dark' || bgColorCondition}
         color={bgColorCondition ? navbarColor : undefined}
         className={classnames(
-          `header-navbar navbar align-items-center ${navbarClasses[navbarType] || 'floating-nav'} navbar-shadow`
+          `header-navbar navbar align-items-center ${
+            navbarClasses[navbarType] || 'floating-nav'
+          } navbar-shadow`
         )}
       >
         <div className='navbar-container d-flex content'>
-          {navbar ? navbar : <NavbarComponent setMenuVisibility={setMenuVisibility} skin={skin} setSkin={setSkin} />}
+          {navbar ? (
+            navbar
+          ) : (
+            <NavbarComponent
+              setMenuVisibility={setMenuVisibility}
+              skin={skin}
+              setSkin={setSkin}
+            />
+          )}
         </div>
       </Navbar>
       {children}
@@ -201,11 +217,21 @@ const VerticalLayout = props => {
         />
       ) : null}
       <footer
-        className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, {
-          'd-none': footerType === 'hidden'
-        })}
+        className={classnames(
+          `footer footer-light ${footerClasses[footerType] || 'footer-static'}`,
+          {
+            'd-none': footerType === 'hidden'
+          }
+        )}
       >
-        {footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />}
+        {footer ? (
+          footer
+        ) : (
+          <FooterComponent
+            footerType={footerType}
+            footerClasses={footerClasses}
+          />
+        )}
       </footer>
 
       {themeConfig.layout.scrollTop === true ? (
@@ -218,7 +244,7 @@ const VerticalLayout = props => {
         </div>
       ) : null}
     </div>
-  )
-}
+  );
+};
 
-export default VerticalLayout
+export default VerticalLayout;
diff --git a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
index 233848bb..049df68b 100644
--- a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
+++ b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
@@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
 
 // ** Third Party Components
 import classnames from 'classnames';
-import { Collapse, Badge } from 'reactstrap';
+import { Collapse, Badge } from '../../../../../components/ui/index';
 
 // ** Vertical Menu Items Component
 import VerticalNavMenuItems from './VerticalNavMenuItems';
diff --git a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
index c26f990a..43a5f810 100644
--- a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
+++ b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { useEffect } from 'react';
 import { matchPath, NavLink, useLocation } from 'react-router-dom';
 // ** Third Party Components
-import { Badge } from 'reactstrap';
+import { Badge } from '../../../../../components/ui/index';
 
 const VerticalNavMenuLink = ({
   item,
diff --git a/src/components/ui/collapse/index.tsx b/src/components/ui/collapse/index.tsx
new file mode 100644
index 00000000..4c6a0473
--- /dev/null
+++ b/src/components/ui/collapse/index.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Collapse } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  isOpen?: boolean;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param isOpen?:boolean
+ */
+
+export default function CustomCollapse({ children, className, isOpen }: Props) {
+  return (
+    <Collapse className={className} isOpen={isOpen}>
+      {children}
+    </Collapse>
+  );
+}
diff --git a/src/components/ui/custominput/index.tsx b/src/components/ui/custominput/index.tsx
index 996d34f0..61288ed6 100644
--- a/src/components/ui/custominput/index.tsx
+++ b/src/components/ui/custominput/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-import { read } from 'fs';
 import { ChangeEvent, MouseEventHandler, ReactNode } from 'react';
 import { CustomInput } from 'reactstrap';
 
@@ -48,7 +46,7 @@ export default function CustomInputs({
   name,
   readOnly,
   type,
-  inline = false,
+  inline,
   bsSize
 }: Props) {
   return (
diff --git a/src/components/ui/index.tsx b/src/components/ui/index.tsx
index 98f3f400..76eb7f20 100644
--- a/src/components/ui/index.tsx
+++ b/src/components/ui/index.tsx
@@ -7,11 +7,13 @@ import CardTitle from './card/CustomCardTitle';
 import CardHeader from './card/CustomCardHeader';
 import Col from './Col/index';
 import From from './form/CustomForm';
+import Collapse from './collapse/index';
 import FormGroup from './form/CustomFormGroup';
 import FormFeedback from './form/CustomFormFeedback';
 import Input from './input';
 import Label from './label';
 import Row from './row';
+import Navbar from './nav/CustomNavbar';
 import InputGroup from './input/CustomInputGroup';
 import InputGroupText from './input/CustomInputGroupText';
 import Spinner from './spinner';
@@ -64,5 +66,7 @@ export {
   ModalBody,
   ModalFooter,
   Form,
-  Media
+  Media,
+  Collapse,
+  Navbar
 };
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index 3072c738..57aaa63e 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -27,6 +27,28 @@ interface Props {
   onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
+/**
+ * @param children: ReactNode
+ * @param className?:string
+ * @param readOnly?:boolean default false
+ * @param checked?:boolean
+ * @param label?:string
+ * @param id?:string
+ * @param onClick?:MouseEventHandler<HTMLButtonElement>
+ * @param onChange?:MouseEventHandler<HTMLButtonElement>
+ * @param value?:any
+ * @param name?:string
+ * @param type?:string
+ * @param bsSize?: "lg" | "sm"
+ * @param inline?:boolean default
+ * @param placeholder?:string
+ * @param disabled?:boolean default false
+ * @param onBlur?:(event: React.FocusEvent<HTMLInputElement>) => void
+ * @param onKeyPress?:(event: React.KeyboardEvent<HTMLInputElement>) => void
+ * @param ref?: ForwardedRef<HTMLInputElement>
+ *
+ */
+
 const CustomInput = forwardRef<HTMLInputElement, Props>(
   (
     {
diff --git a/src/components/ui/nav/CustomNavLink.tsx b/src/components/ui/nav/CustomNavLink.tsx
index 0e58ef76..68159f02 100644
--- a/src/components/ui/nav/CustomNavLink.tsx
+++ b/src/components/ui/nav/CustomNavLink.tsx
@@ -15,7 +15,7 @@ export default function CustomNavLink({
   onClick
 }: Props) {
   return (
-    <NavLink className={className} onClick={onClick}>
+    <NavLink className={className} onClick={onClick} active={active}>
       {children}
     </NavLink>
   );
diff --git a/src/components/ui/nav/CustomNavbar.tsx b/src/components/ui/nav/CustomNavbar.tsx
new file mode 100644
index 00000000..b60048de
--- /dev/null
+++ b/src/components/ui/nav/CustomNavbar.tsx
@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { Navbar } from 'reactstrap';
+import { StringLocale } from 'yup/lib/locale';
+
+interface Props {
+  children: ReactNode;
+  tag?: String;
+  expand?: 'sm' | 'md' | 'lg' | 'xl';
+  light?: boolean;
+  dark?: boolean;
+  className?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param tag?: String
+ * @param expand?: 'sm' | 'md'| 'lg' | 'xl'
+ * @param light?: boolean
+ * @param dark?: boolean
+ * @param className?: string
+ */
+
+export default function CustomNavbar({
+  children,
+  tag,
+  expand,
+  light,
+  dark,
+  className
+}: Props) {
+  return (
+    <Navbar
+      tag={tag}
+      expand={expand}
+      className={className}
+      light={light}
+      dark={dark}
+    >
+      {children}
+    </Navbar>
+  );
+}
diff --git a/src/containers/cstmrService/faq/FaqContainer.js b/src/containers/cstmrService/faq/FaqContainer.js
index aa2e7ce6..a05867a4 100644
--- a/src/containers/cstmrService/faq/FaqContainer.js
+++ b/src/containers/cstmrService/faq/FaqContainer.js
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Button, TabContent, TabPane } from 'reactstrap';
+import { TabContent, TabPane } from '../../../components/ui/index';
+import { Button } from 'reactstrap';
 import AppCollapse from '@components/app-collapse';
 import {
   LIST,
diff --git a/src/views/weather/WeatherView.js b/src/views/weather/WeatherView.js
index aefd8866..c56e4551 100644
--- a/src/views/weather/WeatherView.js
+++ b/src/views/weather/WeatherView.js
@@ -2,7 +2,12 @@ import { WINDY_KEY } from '../../configs/constants';
 import React, { useEffect, useState } from 'react';
 import { Search } from 'react-feather';
 import '../../assets/css/custom.css';
-import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import {
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText
+} from '../../components/ui/index';
 import { useDispatch, useSelector } from 'react-redux';
 import { laancApi } from '../../modules/laanc/apis/laancApi';