diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index f25244ec7..246028878 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,17 +1,17 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import { FunctionComponent } from 'react'
 import s from './Layout.module.css'
 import { Navbar, Featurebar } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
-import { useUI } from '@components/ui/context'
+import { UIProvider, useUI } from '@components/ui/context'
 
 interface Props {
   className?: string
   children?: any
 }
 
-const Layout: FunctionComponent<Props> = ({ className, children }) => {
+const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   const { displaySidebar } = useUI()
   return (
@@ -33,4 +33,10 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
   )
 }
 
+const Layout: FunctionComponent<Props> = (props) => (
+  <UIProvider>
+    <CoreLayout {...props} />
+  </UIProvider>
+)
+
 export default Layout
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d15b79d43..a5adb8f90 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,13 +1,6 @@
+import type { AppProps } from 'next/app'
 import '@assets/global.css'
-import React from 'react'
-import { UIProvider } from '@components/ui/context'
 
-export default function MyApp({ Component, pageProps }) {
-  return (
-    <>
-      <UIProvider>
-        <Component {...pageProps} />
-      </UIProvider>
-    </>
-  )
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
 }