diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 53969dfc6..5dbde0e93 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -1,10 +1,10 @@
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
 import { Trash, Cross } from '@components/icon'
 import { useUI } from '@components/ui/context'
 
-const CartSidebarView: FunctionComponent = () => {
+const CartSidebarView: FC = () => {
   const { closeSidebar } = useUI()
   return (
     <>
diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index c9cd9a029..f1d61a054 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/components/core/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Avatar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Avatar: FunctionComponent<Props> = ({ className }) => {
+const Avatar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 714a9fceb..7fa882d8a 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Featurebar.module.css'
 
 interface Props {
@@ -8,11 +8,7 @@ interface Props {
   description: string
 }
 
-const Featurebar: FunctionComponent<Props> = ({
-  title,
-  description,
-  className,
-}) => {
+const Featurebar: FC<Props> = ({ title, description, className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index 977cbd787..7b58acf84 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Footer.module.css'
 import { Container } from '@components/ui'
 
@@ -8,7 +8,7 @@ interface Props {
   children?: any
 }
 
-const Footer: FunctionComponent<Props> = ({ className }) => {
+const Footer: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <footer className={rootClassName}>
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 8dec4a719..05cbd504f 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Layout.module.css'
 import { Navbar, Featurebar } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
@@ -11,7 +11,7 @@ interface Props {
   children?: any
 }
 
-const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
+const CoreLayout: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   const { displaySidebar } = useUI()
 
@@ -34,7 +34,7 @@ const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
   )
 }
 
-const Layout: FunctionComponent<Props> = (props) => (
+const Layout: FC<Props> = (props) => (
   <UIProvider>
     <CoreLayout {...props} />
   </UIProvider>
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index 4ef0f700b..09b1441f7 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Navbar.module.css'
 import { Logo, Container } from '@components/ui'
 import { Searchbar } from '@components/core'
@@ -8,7 +8,7 @@ interface Props {
   className?: string
 }
 
-const Navbar: FunctionComponent<Props> = ({ className }) => {
+const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <Container className={rootClassName}>
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index 06068c905..9d583a6c3 100644
--- a/components/core/Searchbar/Searchbar.tsx
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Searchbar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Searchbar: FunctionComponent<Props> = ({ className }) => {
+const Searchbar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 60ce8544a..a0de8ba41 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './UserNav.module.css'
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
@@ -9,7 +9,7 @@ interface Props {
   className?: string
 }
 
-const UserNav: FunctionComponent<Props> = ({ className }) => {
+const UserNav: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   const { openSidebar } = useUI()
 
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 0bc361ed2..b1523e0e1 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -1,13 +1,13 @@
 import cn from 'classnames'
 import s from './ProductCard.module.css'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import { Heart } from '@components/icon'
 interface Props {
   className?: string
   children?: any
 }
 
-const ProductCard: FunctionComponent<Props> = ({ className }) => {
+const ProductCard: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
diff --git a/components/product/ProductGrid/ProductGrid.tsx b/components/product/ProductGrid/ProductGrid.tsx
index af3d6748c..599a65e18 100644
--- a/components/product/ProductGrid/ProductGrid.tsx
+++ b/components/product/ProductGrid/ProductGrid.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './ProductGrid.module.css'
 import ProductCard from '@components/ProductCard'
 interface Props {
@@ -8,7 +8,7 @@ interface Props {
   products: [any]
 }
 
-const ProductView: FunctionComponent<Props> = ({ products, className }) => {
+const ProductView: FC<Props> = ({ products, className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index f012b705b..cb7e0f24b 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './ProductView.module.css'
 import { Button } from '@components/ui'
 import { Swatch } from '@components/product'
@@ -10,7 +10,7 @@ interface Props {
   productData: ProductData
 }
 
-const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
+const ProductView: FC<Props> = ({ productData, className }) => {
   const rootClassName = cn(s.root, className)
   console.log(productData)
   return (
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index 02f9a2ef2..8161f8f71 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Swatch.module.css'
 import { Colors } from '@components/ui/types'
 
@@ -11,12 +11,7 @@ interface Props {
   size?: string
 }
 
-const Swatch: FunctionComponent<Props> = ({
-  className,
-  size,
-  color,
-  active,
-}) => {
+const Swatch: FC<Props> = ({ className, size, color, active }) => {
   const rootClassName = cn(
     s.root,
     {
diff --git a/components/ui/ClickOutside/ClickOutside.tsx b/components/ui/ClickOutside/ClickOutside.tsx
index 6986150a6..e3dd782e7 100644
--- a/components/ui/ClickOutside/ClickOutside.tsx
+++ b/components/ui/ClickOutside/ClickOutside.tsx
@@ -1,9 +1,4 @@
-import React, {
-  FunctionComponent,
-  MutableRefObject,
-  useEffect,
-  useRef,
-} from 'react'
+import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
 
 import { Component } from 'react'
 import PropTypes from 'prop-types'
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index f1789ef20..43bd91ef5 100644
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Container.module.css'
 
 interface Props {
@@ -8,11 +8,7 @@ interface Props {
   el?: HTMLElement
 }
 
-const Container: FunctionComponent<Props> = ({
-  children,
-  className,
-  el = 'div',
-}) => {
+const Container: FC<Props> = ({ children, className, el = 'div' }) => {
   const rootClassName = cn(s.root, className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index bf70e7fa5..a14e34608 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Sidebar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
+const Sidebar: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
diff --git a/components/ui/_BLANK/Featurebar.tsx b/components/ui/_BLANK/Featurebar.tsx
index 0195dd8f4..feb080508 100644
--- a/components/ui/_BLANK/Featurebar.tsx
+++ b/components/ui/_BLANK/Featurebar.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Featurebar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Featurebar: FunctionComponent<Props> = ({ children, className }) => {
+const Featurebar: FC<Props> = ({ children, className }) => {
   const rootClassName = cn(s.root, className)
   return <div className={rootClassName}>{children}</div>
 }
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 0acf64ad7..9d34eb2b0 100644
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 
 export interface UIState {
   displaySidebar: boolean
@@ -15,7 +15,7 @@ const initialState = {
 export const UIContext = React.createContext(initialState)
 UIContext.displayName = 'UIContext'
 
-export const UIProvider: FunctionComponent = (props) => {
+export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = () => dispatch('OPEN_SIDEBAR')