diff --git a/components/libs/index.ts b/components/libs/index.ts
deleted file mode 100644
index 56813ac..0000000
--- a/components/libs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./DefaultMenuSelector"
diff --git a/components/libs/with-redux-store.tsx b/components/libs/with-redux-store.tsx
deleted file mode 100644
index f507795..0000000
--- a/components/libs/with-redux-store.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react"
-import { initializeStore } from "../store"
-
-const isServer = typeof window === "undefined"
-const __NEXT_REDUX_STORE__ = "__NEXT_REDUX_STORE__"
-
-function getOrCreateStore(initialState) {
-  // Always make a new store if server, otherwise state is shared between requests
-  if (isServer) {
-    return initializeStore(initialState)
-  }
-
-  // Create store if unavailable on the client and set it on the window object
-  if (!window[__NEXT_REDUX_STORE__]) {
-    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
-  }
-  return window[__NEXT_REDUX_STORE__]
-}
-
-export default App => {
-  return class AppWithRedux extends React.Component {
-    static async getInitialProps(appContext) {
-      // Get or Create the store with `undefined` as initialState
-      // This allows you to set a custom default initialState
-      const reduxStore = getOrCreateStore()
-
-      // Provide the store to getInitialProps of pages
-      appContext.ctx.reduxStore = reduxStore
-
-      let appProps = {}
-      if (typeof App.getInitialProps === "function") {
-        appProps = await App.getInitialProps(appContext)
-      }
-
-      return {
-        ...appProps,
-        initialReduxState: reduxStore.getState(),
-      }
-    }
-
-    constructor(props) {
-      super(props)
-      this.reduxStore = getOrCreateStore(props.initialReduxState)
-    }
-
-    render() {
-      return <App {...this.props} reduxStore={this.reduxStore} />
-    }
-  }
-}
diff --git a/components/molecules/NextListItem.tsx b/components/molecules/NextListItem.tsx
index e71030b..a9efde9 100644
--- a/components/molecules/NextListItem.tsx
+++ b/components/molecules/NextListItem.tsx
@@ -4,16 +4,11 @@ import {
   ListItemAvatar,
   ListItemText,
 } from "@material-ui/core"
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import Link from "next/link"
 import React from "react"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
     anchorLink: {
@@ -29,8 +24,9 @@ const styles = (theme: Theme) =>
       color: theme.palette.primary.contrastText,
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   /**
    * <Link href="/">
    */
@@ -61,8 +57,9 @@ interface IProps extends WithStyles<typeof styles> {
  * Next.js optimized <ListItem>
  * @param props IProps
  */
-const NextListItemComponent = (props: IProps) => {
-  const { classes, className, href, icon, primary, secondary, onClick } = props
+export const NextListItem = function(props: IProps) {
+  const { className, href, icon, primary, secondary, onClick } = props
+  const classes = useStyles(props)
   const AvatorIcon = () => icon
   return (
     <Link href={href}>
@@ -84,5 +81,3 @@ const NextListItemComponent = (props: IProps) => {
     </Link>
   )
 }
-
-export const NextListItem = withStyles(styles)(NextListItemComponent)
diff --git a/components/molecules/PageHeader.tsx b/components/molecules/PageHeader.tsx
index 8a6487f..e7dd819 100644
--- a/components/molecules/PageHeader.tsx
+++ b/components/molecules/PageHeader.tsx
@@ -1,16 +1,11 @@
 import { Paper, Typography } from "@material-ui/core"
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
 import { connect } from "react-redux"
 import { Page } from "../../constants"
 import { IInitialState } from "../../store/states"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       backgroundColor: theme.palette.primary.main,
@@ -28,8 +23,9 @@ const styles = (theme: Theme) =>
     },
     description: {},
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   /**
    * from redux
    */
@@ -41,7 +37,8 @@ interface IProps extends WithStyles<typeof styles> {
  * @param props IProps
  */
 const PageHeaderComponent = (props: IProps) => {
-  const { classes, selectedPage } = props
+  const { selectedPage } = props
+  const classes = useStyles(props)
   return (
     <Paper square={true} className={classes.root}>
       <Typography variant="h1" color="inherit" className={classes.title}>
@@ -62,9 +59,7 @@ const mapStateToProps = (state: IInitialState) => ({
   selectedPage: state.page.selectedPage,
 })
 
-export const PageHeader = withStyles(styles)(
-  connect(
-    mapStateToProps,
-    undefined
-  )(PageHeaderComponent as any)
-)
+export const PageHeader = connect(
+  mapStateToProps,
+  undefined
+)(PageHeaderComponent as any)
diff --git a/components/organisms/HeaderArticleContainer.tsx b/components/organisms/HeaderArticleContainer.tsx
index 0fc2c5a..90a8853 100644
--- a/components/organisms/HeaderArticleContainer.tsx
+++ b/components/organisms/HeaderArticleContainer.tsx
@@ -1,20 +1,16 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import { PageHeader } from "../molecules"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
     contentsContainer: {
       padding: theme.spacing(1),
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   /**
    * children
    */
@@ -25,8 +21,9 @@ interface IProps extends WithStyles<typeof styles> {
  * Header and article container component
  * @param props IProps
  */
-const HeaderArticleContainerComponent = (props: IProps) => {
-  const { classes, children } = props
+export const HeaderArticleContainer = function(props: IProps) {
+  const { children } = props
+  const classes = useStyles(props)
   return (
     <>
       <PageHeader />
@@ -34,7 +31,3 @@ const HeaderArticleContainerComponent = (props: IProps) => {
     </>
   )
 }
-
-export const HeaderArticleContainer = withStyles(styles)(
-  HeaderArticleContainerComponent
-)
diff --git a/components/organisms/Sidenavi.tsx b/components/organisms/Sidenavi.tsx
index 68edbdd..dcab27e 100644
--- a/components/organisms/Sidenavi.tsx
+++ b/components/organisms/Sidenavi.tsx
@@ -1,10 +1,5 @@
 import { List } from "@material-ui/core"
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import { connect } from "react-redux"
 import { bindActionCreators, Dispatch } from "redux"
@@ -14,7 +9,7 @@ import { IPagePayload, PageActions } from "../../store/actions"
 import { IInitialState } from "../../store/states"
 import { NextListItem } from "../molecules"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       backgroundColor: theme.palette.primary.main,
@@ -50,8 +45,9 @@ const styles = (theme: Theme) =>
       backgroundColor: theme.palette.primary.light,
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   changePage: (pagePayload: IPagePayload) => number
   selectedPage: Page
 }
@@ -61,7 +57,8 @@ interface IProps extends WithStyles<typeof styles> {
  * @param props IProps
  */
 const SidenaviComponent = (props: IProps) => {
-  const { classes, changePage, selectedPage } = props
+  const { changePage, selectedPage } = props
+  const classes = useStyles(props)
 
   const handleChangePage = (page: Page) => () =>
     changePage({ selectedPage: page })
@@ -111,4 +108,4 @@ const mapDispatchToProps = (dispatch: Dispatch<Action<IPagePayload>>) =>
 export const Sidenavi = connect(
   mapStateToProps,
   mapDispatchToProps
-)(withStyles(styles)(SidenaviComponent as any))
+)(SidenaviComponent as any)
diff --git a/components/templates/Layout.tsx b/components/templates/Layout.tsx
index a3e32d7..462fd6f 100644
--- a/components/templates/Layout.tsx
+++ b/components/templates/Layout.tsx
@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import Head from "next/head"
 import * as React from "react"
 import { connect } from "react-redux"
@@ -11,20 +6,22 @@ import { Page } from "../../constants"
 import { IInitialState } from "../../store/states"
 import { ResponsiveDrawer } from "../organisms"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       height: "100%",
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   children: React.ReactNode
   selectedPage: Page
 }
 
 const LayoutComponent = (props: IProps) => {
-  const { classes, children, selectedPage } = props
+  const { children, selectedPage } = props
+  const classes = useStyles(props)
   return (
     <section className={classes.root}>
       <Head>
@@ -44,4 +41,4 @@ const mapStateToProps = (state: IInitialState) => ({
 export const Layout = connect(
   mapStateToProps,
   undefined
-)(withStyles(styles)(LayoutComponent as any))
+)(LayoutComponent as any)