diff --git a/src/components/CodeBlock/index.tsx b/src/components/CodeBlock/index.tsx
index 7333a10..f612ef4 100644
--- a/src/components/CodeBlock/index.tsx
+++ b/src/components/CodeBlock/index.tsx
@@ -1,5 +1,9 @@
-import { Box, useColorMode } from '@chakra-ui/react'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { Box, useColorMode, useColorModeValue } from '@chakra-ui/react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import {
+  atomOneLight,
+  atomOneDark,
+} from 'react-syntax-highlighter/dist/cjs/styles/hljs'
 
 const CodeBlock = ({
   language,
@@ -9,9 +13,24 @@ const CodeBlock = ({
   codeString: string
 }) => {
   const { colorMode } = useColorMode()
+  const bgColor = useColorModeValue('light-container', 'dark-container')
   return (
-    <Box overflow="hidden">
-      <SyntaxHighlighter language={language}>{codeString}</SyntaxHighlighter>
+    <Box
+      as="pre"
+      bg={bgColor}
+      borderRadius={4}
+      p={4}
+      border={'1px'}
+      borderColor={useColorModeValue('gray.300', 'gray.700')}
+      overflowX="auto"
+    >
+      <SyntaxHighlighter
+        language={language}
+        style={colorMode === 'dark' ? atomOneDark : atomOneLight}
+        customStyle={{ background: 'none' }}
+      >
+        {codeString}
+      </SyntaxHighlighter>
     </Box>
   )
 }
diff --git a/src/components/CodeBlock/material-dark.ts b/src/components/CodeBlock/material-dark.ts
deleted file mode 100644
index 1e6cb24..0000000
--- a/src/components/CodeBlock/material-dark.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-export default {
-  'code[class*="language-"]': {
-    textAlign: 'left',
-    whiteSpace: 'pre',
-    wordSpacing: 'normal',
-    wordBreak: 'normal',
-    wordWrap: 'normal',
-    color: '#eee',
-    background: '#2f2f2f',
-    fontFamily: 'Roboto Mono, monospace',
-    fontSize: '1em',
-    lineHeight: '1.5em',
-    MozTabSize: '4',
-    OTabSize: '4',
-    tabSize: '4',
-    WebkitHyphens: 'none',
-    MozHyphens: 'none',
-    msHyphens: 'none',
-    hyphens: 'none',
-  },
-  'pre[class*="language-"]': {
-    textAlign: 'left',
-    whiteSpace: 'pre',
-    wordSpacing: 'normal',
-    wordBreak: 'normal',
-    wordWrap: 'normal',
-    color: '#eee',
-    background: '#2f2f2f',
-    fontFamily: 'Roboto Mono, monospace',
-    fontSize: '1em',
-    lineHeight: '1.5em',
-    MozTabSize: '4',
-    OTabSize: '4',
-    tabSize: '4',
-    WebkitHyphens: 'none',
-    MozHyphens: 'none',
-    msHyphens: 'none',
-    hyphens: 'none',
-    overflow: 'auto',
-    position: 'relative',
-    margin: '0.5em 0',
-    padding: '1.25em 1em',
-  },
-  'code[class*="language-"]::-moz-selection': {
-    background: '#363636',
-  },
-  'pre[class*="language-"]::-moz-selection': {
-    background: '#363636',
-  },
-  'code[class*="language-"] ::-moz-selection': {
-    background: '#363636',
-  },
-  'pre[class*="language-"] ::-moz-selection': {
-    background: '#363636',
-  },
-  'code[class*="language-"]::selection': {
-    background: '#363636',
-  },
-  'pre[class*="language-"]::selection': {
-    background: '#363636',
-  },
-  'code[class*="language-"] ::selection': {
-    background: '#363636',
-  },
-  'pre[class*="language-"] ::selection': {
-    background: '#363636',
-  },
-  ':not(pre) > code[class*="language-"]': {
-    whiteSpace: 'normal',
-    borderRadius: '0.2em',
-    padding: '0.1em',
-  },
-  '.language-css > code': {
-    color: '#fd9170',
-  },
-  '.language-sass > code': {
-    color: '#fd9170',
-  },
-  '.language-scss > code': {
-    color: '#fd9170',
-  },
-  '[class*="language-"] .namespace': {
-    Opacity: '0.7',
-  },
-  atrule: {
-    color: '#c792ea',
-  },
-  'attr-name': {
-    color: '#ffcb6b',
-  },
-  'attr-value': {
-    color: '#a5e844',
-  },
-  attribute: {
-    color: '#a5e844',
-  },
-  boolean: {
-    color: '#c792ea',
-  },
-  builtin: {
-    color: '#ffcb6b',
-  },
-  cdata: {
-    color: '#80cbc4',
-  },
-  char: {
-    color: '#80cbc4',
-  },
-  class: {
-    color: '#ffcb6b',
-  },
-  'class-name': {
-    color: '#f2ff00',
-  },
-  comment: {
-    color: '#616161',
-  },
-  constant: {
-    color: '#c792ea',
-  },
-  deleted: {
-    color: '#ff6666',
-  },
-  doctype: {
-    color: '#616161',
-  },
-  entity: {
-    color: '#ff6666',
-  },
-  function: {
-    color: '#c792ea',
-  },
-  hexcode: {
-    color: '#f2ff00',
-  },
-  id: {
-    color: '#c792ea',
-    fontWeight: 'bold',
-  },
-  important: {
-    color: '#c792ea',
-    fontWeight: 'bold',
-  },
-  inserted: {
-    color: '#80cbc4',
-  },
-  keyword: {
-    color: '#c792ea',
-  },
-  number: {
-    color: '#fd9170',
-  },
-  operator: {
-    color: '#89ddff',
-  },
-  prolog: {
-    color: '#616161',
-  },
-  property: {
-    color: '#80cbc4',
-  },
-  'pseudo-class': {
-    color: '#a5e844',
-  },
-  'pseudo-element': {
-    color: '#a5e844',
-  },
-  punctuation: {
-    color: '#89ddff',
-  },
-  regex: {
-    color: '#f2ff00',
-  },
-  selector: {
-    color: '#ff6666',
-  },
-  string: {
-    color: '#a5e844',
-  },
-  symbol: {
-    color: '#c792ea',
-  },
-  tag: {
-    color: '#ff6666',
-  },
-  unit: {
-    color: '#fd9170',
-  },
-  url: {
-    color: '#ff6666',
-  },
-  variable: {
-    color: '#ff6666',
-  },
-}
diff --git a/src/components/CodeBlock/material-light.ts b/src/components/CodeBlock/material-light.ts
deleted file mode 100644
index 48d1474..0000000
--- a/src/components/CodeBlock/material-light.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-export default {
-  'code[class*="language-"]': {
-    textAlign: 'left',
-    whiteSpace: 'pre',
-    wordSpacing: 'normal',
-    wordBreak: 'normal',
-    wordWrap: 'normal',
-    color: '#90a4ae',
-    background: '#fafafa',
-    fontFamily: 'Roboto Mono, monospace',
-    fontSize: '1em',
-    lineHeight: '1.5em',
-    MozTabSize: '4',
-    OTabSize: '4',
-    tabSize: '4',
-    WebkitHyphens: 'none',
-    MozHyphens: 'none',
-    msHyphens: 'none',
-    hyphens: 'none',
-  },
-  'pre[class*="language-"]': {
-    textAlign: 'left',
-    whiteSpace: 'pre',
-    wordSpacing: 'normal',
-    wordBreak: 'normal',
-    wordWrap: 'normal',
-    color: '#90a4ae',
-    background: '#fafafa',
-    fontFamily: 'Roboto Mono, monospace',
-    fontSize: '1em',
-    lineHeight: '1.5em',
-    MozTabSize: '4',
-    OTabSize: '4',
-    tabSize: '4',
-    WebkitHyphens: 'none',
-    MozHyphens: 'none',
-    msHyphens: 'none',
-    hyphens: 'none',
-    overflow: 'auto',
-    position: 'relative',
-    margin: '0.5em 0',
-    padding: '1.25em 1em',
-  },
-  'code[class*="language-"]::-moz-selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  'pre[class*="language-"]::-moz-selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  'code[class*="language-"] ::-moz-selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  'pre[class*="language-"] ::-moz-selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  'code[class*="language-"]::selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  'pre[class*="language-"]::selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  'code[class*="language-"] ::selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  'pre[class*="language-"] ::selection': {
-    background: '#cceae7',
-    color: '#263238',
-  },
-  ':not(pre) > code[class*="language-"]': {
-    whiteSpace: 'normal',
-    borderRadius: '0.2em',
-    padding: '0.1em',
-  },
-  '.language-css > code': {
-    color: '#f76d47',
-  },
-  '.language-sass > code': {
-    color: '#f76d47',
-  },
-  '.language-scss > code': {
-    color: '#f76d47',
-  },
-  '[class*="language-"] .namespace': {
-    Opacity: '0.7',
-  },
-  atrule: {
-    color: '#7c4dff',
-  },
-  'attr-name': {
-    color: '#39adb5',
-  },
-  'attr-value': {
-    color: '#f6a434',
-  },
-  attribute: {
-    color: '#f6a434',
-  },
-  boolean: {
-    color: '#7c4dff',
-  },
-  builtin: {
-    color: '#39adb5',
-  },
-  cdata: {
-    color: '#39adb5',
-  },
-  char: {
-    color: '#39adb5',
-  },
-  class: {
-    color: '#39adb5',
-  },
-  'class-name': {
-    color: '#6182b8',
-  },
-  comment: {
-    color: '#aabfc9',
-  },
-  constant: {
-    color: '#7c4dff',
-  },
-  deleted: {
-    color: '#e53935',
-  },
-  doctype: {
-    color: '#aabfc9',
-  },
-  entity: {
-    color: '#e53935',
-  },
-  function: {
-    color: '#7c4dff',
-  },
-  hexcode: {
-    color: '#f76d47',
-  },
-  id: {
-    color: '#7c4dff',
-    fontWeight: 'bold',
-  },
-  important: {
-    color: '#7c4dff',
-    fontWeight: 'bold',
-  },
-  inserted: {
-    color: '#39adb5',
-  },
-  keyword: {
-    color: '#7c4dff',
-  },
-  number: {
-    color: '#f76d47',
-  },
-  operator: {
-    color: '#39adb5',
-  },
-  prolog: {
-    color: '#aabfc9',
-  },
-  property: {
-    color: '#39adb5',
-  },
-  'pseudo-class': {
-    color: '#f6a434',
-  },
-  'pseudo-element': {
-    color: '#f6a434',
-  },
-  punctuation: {
-    color: '#39adb5',
-  },
-  regex: {
-    color: '#6182b8',
-  },
-  selector: {
-    color: '#e53935',
-  },
-  string: {
-    color: '#f6a434',
-  },
-  symbol: {
-    color: '#7c4dff',
-  },
-  tag: {
-    color: '#e53935',
-  },
-  unit: {
-    color: '#f76d47',
-  },
-  url: {
-    color: '#e53935',
-  },
-  variable: {
-    color: '#e53935',
-  },
-}