diff --git a/.babelrc b/.babelrc
index a98beab..ffa5ba3 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,5 @@
 // https://emotion.sh/docs/css-prop##babel-preset
+// https://mui.com/guides/minimizing-bundle-size/#option-2
 {
   "presets": [
     [
@@ -11,5 +12,25 @@
       }
     ]
   ],
-  "plugins": [["@emotion/babel-plugin"]]
+  "plugins": [
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@mui/material",
+        "libraryDirectory": "",
+        "camel2DashComponentName": false
+      },
+      "core"
+    ],
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@mui/icons-material",
+        "libraryDirectory": "",
+        "camel2DashComponentName": false
+      },
+      "icons"
+    ],
+    ["@emotion/babel-plugin"]
+  ]
 }
diff --git a/package.json b/package.json
index 62c8d26..b874373 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@types/react": "17.0.41",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
+    "babel-plugin-import": "^1.13.3",
     "eslint": "8.11.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^16.1.4",
diff --git a/src/components/common/Main.tsx b/src/components/common/Main.tsx
index bd56341..7b743b4 100644
--- a/src/components/common/Main.tsx
+++ b/src/components/common/Main.tsx
@@ -1,4 +1,5 @@
-import { Box, css, Stack, Theme, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import { memo, PropsWithChildren } from "react";
 
 type Props = PropsWithChildren<{
diff --git a/src/components/layout/Drawer.tsx b/src/components/layout/Drawer.tsx
index f7ad7e0..7d4d54a 100644
--- a/src/components/layout/Drawer.tsx
+++ b/src/components/layout/Drawer.tsx
@@ -1,20 +1,23 @@
-import CodeIcon from "@mui/icons-material/Code";
-import DataObjectIcon from "@mui/icons-material/DataObject";
-import DragHandleIcon from "@mui/icons-material/DragHandle";
-import FilterIcon from "@mui/icons-material/Filter";
-import FingerprintIcon from "@mui/icons-material/Fingerprint";
-import HomeIcon from "@mui/icons-material/Home";
-import ImageIcon from "@mui/icons-material/Image";
-import KeyIcon from "@mui/icons-material/Key";
-import LinkIcon from "@mui/icons-material/Link";
-import NoteAddIcon from "@mui/icons-material/NoteAdd";
-import NumbersIcon from "@mui/icons-material/Numbers";
-import SortIcon from "@mui/icons-material/Sort";
-import SyncAltIcon from "@mui/icons-material/SyncAlt";
-import TextFieldsIcon from "@mui/icons-material/TextFields";
-import TextIncreaseIcon from "@mui/icons-material/TextIncrease";
-import TransformIcon from "@mui/icons-material/Transform";
-import { Box, css, Divider, Drawer, List, Stack } from "@mui/material";
+import {
+  Code,
+  DataObject,
+  DragHandle,
+  Filter,
+  Fingerprint,
+  Home,
+  Image as ImageIcon,
+  Key,
+  Link,
+  NoteAdd,
+  Numbers,
+  Sort,
+  SyncAlt,
+  TextFields,
+  TextIncrease,
+  Transform,
+} from "@mui/icons-material";
+import { Box, Divider, Drawer, List, Stack } from "@mui/material";
+import { css } from "@mui/material/styles";
 import { memo } from "react";
 
 import { pagesPath } from "@/libs/$path";
@@ -41,41 +44,41 @@ const divider = css`
 
 const toolGroups = [
   {
-    icon: <TransformIcon />,
+    icon: <Transform />,
     title: "Converters",
     tools: [
-      { icon: <TransformIcon />, title: "Json <> Yaml", href: pagesPath.$url(), disabled: true },
-      { icon: <NumbersIcon />, title: "Number Base", href: pagesPath.$url(), disabled: true },
+      { icon: <Transform />, title: "Json <> Yaml", href: pagesPath.$url(), disabled: true },
+      { icon: <Numbers />, title: "Number Base", href: pagesPath.$url(), disabled: true },
     ],
   },
   {
-    icon: <SyncAltIcon />,
+    icon: <SyncAlt />,
     title: "Encoders / Decoders",
     tools: [
-      { icon: <CodeIcon />, title: "HTML", href: pagesPath.$url(), disabled: true },
-      { icon: <LinkIcon />, title: "URL", href: pagesPath.$url(), disabled: true },
-      { icon: <DragHandleIcon />, title: "Base 64", href: pagesPath.$url(), disabled: true },
-      { icon: <KeyIcon />, title: "JWT", href: pagesPath.$url(), disabled: true },
+      { icon: <Code />, title: "HTML", href: pagesPath.$url(), disabled: true },
+      { icon: <Link />, title: "URL", href: pagesPath.$url(), disabled: true },
+      { icon: <DragHandle />, title: "Base 64", href: pagesPath.$url(), disabled: true },
+      { icon: <Key />, title: "JWT", href: pagesPath.$url(), disabled: true },
     ],
   },
   {
-    icon: <SortIcon />,
+    icon: <Sort />,
     title: "Formatters",
-    tools: [{ icon: <DataObjectIcon />, title: "Json", href: pagesPath.$url(), disabled: true }],
+    tools: [{ icon: <DataObject />, title: "Json", href: pagesPath.$url(), disabled: true }],
   },
   {
-    icon: <NoteAddIcon />,
+    icon: <NoteAdd />,
     title: "Generators",
     tools: [
-      { icon: <FingerprintIcon />, title: "Hash", href: pagesPath.$url(), disabled: true },
-      { icon: <NumbersIcon />, title: "UUID", href: pagesPath.$url(), disabled: true },
+      { icon: <Fingerprint />, title: "Hash", href: pagesPath.$url(), disabled: true },
+      { icon: <Numbers />, title: "UUID", href: pagesPath.$url(), disabled: true },
     ],
   },
   {
-    icon: <TextFieldsIcon />,
+    icon: <TextFields />,
     title: "Text",
     tools: [
-      { icon: <TextIncreaseIcon />, title: "Regex Tester", href: pagesPath.$url(), disabled: true },
+      { icon: <TextIncrease />, title: "Regex Tester", href: pagesPath.$url(), disabled: true },
     ],
   },
   {
@@ -83,7 +86,7 @@ const toolGroups = [
     title: "Graphic",
     tools: [
       {
-        icon: <FilterIcon />,
+        icon: <Filter />,
         title: "PNG / JPEG Compressor",
         href: pagesPath.$url(),
         disabled: true,
@@ -99,7 +102,7 @@ const StyledComponent = () => (
     </Box>
     <List component="nav">
       <Stack spacing={1}>
-        <DrawerItem icon={<HomeIcon />} title="All tools" href={pagesPath.$url()} />
+        <DrawerItem icon={<Home />} title="All tools" href={pagesPath.$url()} />
         <Divider css={divider} />
         <Box>
           {toolGroups.map(({ icon, title, tools }) => (
diff --git a/src/components/layout/DrawerCollapseItem.tsx b/src/components/layout/DrawerCollapseItem.tsx
index a3bc03a..21e9401 100644
--- a/src/components/layout/DrawerCollapseItem.tsx
+++ b/src/components/layout/DrawerCollapseItem.tsx
@@ -1,5 +1,4 @@
-import ExpandLess from "@mui/icons-material/ExpandLess";
-import ExpandMore from "@mui/icons-material/ExpandMore";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { Collapse, List, ListItemButton, ListItemText } from "@mui/material";
 import equal from "fast-deep-equal";
 import { ComponentPropsWithoutRef, memo, MouseEventHandler, useCallback, useState } from "react";
diff --git a/src/components/layout/DrawerItem.tsx b/src/components/layout/DrawerItem.tsx
index be39dc6..ae23e0e 100644
--- a/src/components/layout/DrawerItem.tsx
+++ b/src/components/layout/DrawerItem.tsx
@@ -1,4 +1,5 @@
-import { Box, css, ListItemButton, ListItemText, Tooltip } from "@mui/material";
+import { Box, ListItemButton, ListItemText, Tooltip } from "@mui/material";
+import { css } from "@mui/material/styles";
 import NextLink, { LinkProps } from "next/link";
 import { ComponentPropsWithoutRef, memo } from "react";
 
diff --git a/src/components/layout/DrawerItemIcon.tsx b/src/components/layout/DrawerItemIcon.tsx
index f9a151c..bd6d0f2 100644
--- a/src/components/layout/DrawerItemIcon.tsx
+++ b/src/components/layout/DrawerItemIcon.tsx
@@ -1,4 +1,5 @@
-import { css, ListItemIcon } from "@mui/material";
+import { ListItemIcon } from "@mui/material";
+import { css } from "@mui/material/styles";
 import { memo, ReactNode } from "react";
 
 type Props = {
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 19c1038..c174399 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,14 +1,6 @@
-import GitHubIcon from "@mui/icons-material/GitHub";
-import {
-  AppBar,
-  css,
-  IconButton,
-  Link as MuiLink,
-  Stack,
-  Theme,
-  Toolbar,
-  Typography,
-} from "@mui/material";
+import { GitHub } from "@mui/icons-material";
+import { AppBar, IconButton, Link as MuiLink, Stack, Toolbar, Typography } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import NextLink from "next/link";
 import { memo } from "react";
 
@@ -73,7 +65,7 @@ const StyledComponent = () => (
           rel="noreferrer"
           css={gitHubLink}
         >
-          <GitHubIcon css={gitHubIcon} />
+          <GitHub css={gitHubIcon} />
         </a>
       </IconButton>
     </Toolbar>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 4dc8782..bfa7e47 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,4 +1,5 @@
-import { Box, css, Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { css } from "@mui/material/styles";
 import Head from "next/head";
 import { memo, PropsWithChildren } from "react";
 
diff --git a/src/components/layout/SearchBar.tsx b/src/components/layout/SearchBar.tsx
index 27345ee..046a177 100644
--- a/src/components/layout/SearchBar.tsx
+++ b/src/components/layout/SearchBar.tsx
@@ -1,5 +1,6 @@
-import SearchIcon from "@mui/icons-material/Search";
-import { Box, css, InputBase, Paper, Theme } from "@mui/material";
+import { Search } from "@mui/icons-material";
+import { Box, InputBase, Paper } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import { useRouter } from "next/router";
 import { ChangeEventHandler, memo, useCallback } from "react";
 import { useRecoilState } from "recoil";
@@ -41,7 +42,7 @@ const StyledComponent = ({ text, onChange }: Props) => (
       css={input}
     />
     <Box css={iconWrapper}>
-      <SearchIcon />
+      <Search />
     </Box>
   </Paper>
 );
diff --git a/src/components/pages/home/Card.tsx b/src/components/pages/home/Card.tsx
index f6a8ed2..14f96a7 100644
--- a/src/components/pages/home/Card.tsx
+++ b/src/components/pages/home/Card.tsx
@@ -4,11 +4,10 @@ import {
   CardActionArea,
   CardContent,
   CardMedia,
-  css,
-  Theme,
   Tooltip,
   Typography,
 } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import NextLink, { LinkProps } from "next/link";
 import { memo, ReactNode } from "react";
 
diff --git a/src/components/pages/home/Content.tsx b/src/components/pages/home/Content.tsx
index b41e6f4..36b74df 100644
--- a/src/components/pages/home/Content.tsx
+++ b/src/components/pages/home/Content.tsx
@@ -1,13 +1,15 @@
-import CodeIcon from "@mui/icons-material/Code";
-import DataObjectIcon from "@mui/icons-material/DataObject";
-import DragHandleIcon from "@mui/icons-material/DragHandle";
-import FilterIcon from "@mui/icons-material/Filter";
-import FingerprintIcon from "@mui/icons-material/Fingerprint";
-import KeyIcon from "@mui/icons-material/Key";
-import LinkIcon from "@mui/icons-material/Link";
-import NumbersIcon from "@mui/icons-material/Numbers";
-import TextIncreaseIcon from "@mui/icons-material/TextIncrease";
-import TransformIcon from "@mui/icons-material/Transform";
+import {
+  Code,
+  DataObject,
+  DragHandle,
+  Filter,
+  Fingerprint,
+  Key,
+  Link,
+  Numbers,
+  TextIncrease,
+  Transform,
+} from "@mui/icons-material";
 import { Grid } from "@mui/material";
 import Fuse from "fuse.js";
 import { memo } from "react";
@@ -25,7 +27,7 @@ type Props = {
 
 const tools = [
   {
-    icon: <TransformIcon />,
+    icon: <Transform />,
     title: "Json <> Yaml Converter",
     description: "Convert Json data to Yaml and vice versa",
     keywords: "json yaml converter",
@@ -33,7 +35,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <NumbersIcon />,
+    icon: <Numbers />,
     title: "Number Base Converter",
     description: "Convert numbers from one base to another",
     keywords: "number base converter",
@@ -41,7 +43,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <CodeIcon />,
+    icon: <Code />,
     title: "HTML Encoder / Decoder",
     description:
       "Encode or decode all the applicable characters to their corresponding HTML entities",
@@ -50,7 +52,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <LinkIcon />,
+    icon: <Link />,
     title: "URL Encoder / Decoder",
     description:
       "Encode or decode all the applicable characters to their corresponding URL entities",
@@ -59,7 +61,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <DragHandleIcon />,
+    icon: <DragHandle />,
     title: "Base 64 Encoder / Decoder",
     description: "Encode and decode Base64 data",
     keywords: "base64 encoder decocder",
@@ -67,7 +69,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <KeyIcon />,
+    icon: <Key />,
     title: "JWT Decoder",
     description: "Decode a JWT header, payload and signature",
     keywords: "jwt json web token decocder",
@@ -75,7 +77,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <DataObjectIcon />,
+    icon: <DataObject />,
     title: "JSON Formatter",
     description: "Indent or minify JSON data",
     keywords: "json formatter",
@@ -83,7 +85,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <FingerprintIcon />,
+    icon: <Fingerprint />,
     title: "Hash Generator",
     description: "Calculate MD5, SHA1, SHA256 and SHA512 hash from text data",
     keywords: "hash generator md5 sha1 sha256 sha512",
@@ -91,7 +93,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <NumbersIcon />,
+    icon: <Numbers />,
     title: "UUID Generator",
     description: "Generate UUIDs version 1 and 4",
     keywords: "guid uuid1 uuid4 generator",
@@ -99,7 +101,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <TextIncreaseIcon />,
+    icon: <TextIncrease />,
     title: "Regex Tester",
     description: "Validate and test regular expressions",
     keywords: "regular expression regex validator tester",
@@ -107,7 +109,7 @@ const tools = [
     disabled: true,
   },
   {
-    icon: <FilterIcon />,
+    icon: <Filter />,
     title: "PNG / JPEG Compressor",
     description: "Lossless PNG and JPEG optimizer",
     keywords: "png jpeg compressor optimizer image",
diff --git a/src/data/mui.ts b/src/data/mui.ts
index 964e07d..b75b9f7 100644
--- a/src/data/mui.ts
+++ b/src/data/mui.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "@mui/material";
+import { createTheme } from "@mui/material/styles";
 
 export const theme = createTheme({
   palette: {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 01bf3cb..361bdbc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { CacheProvider, EmotionCache } from "@emotion/react";
-import { CssBaseline, ThemeProvider } from "@mui/material";
+import { CssBaseline } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { RecoilRoot } from "recoil";
diff --git a/yarn.lock b/yarn.lock
index dc3c809..25f547b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,7 +9,7 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
-"@babel/helper-module-imports@^7.12.13":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
   integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
@@ -50,7 +50,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
   integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
@@ -636,6 +636,14 @@ axobject-query@^2.2.0:
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
+babel-plugin-import@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz#9dbbba7d1ac72bd412917a830d445e00941d26d7"
+  integrity sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"