diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss
index 0d269e9..548f801 100644
--- a/assets/sass/abstracts/_variables.scss
+++ b/assets/sass/abstracts/_variables.scss
@@ -1,8 +1,25 @@
 @import "../themes/theme";
 
-$text-font-stack: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
-$code-font-stack: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "Lucida Console", "Lucida Sans Typewriter", "Liberation Mono", "Nimbus Mono L", Monaco, Courier, monospace !default;
-$contents-font-stack: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif !default;
+$text-font-stack: 'Muli',
+              avenir,
+              'helvetica neue', helvetica,
+              ubuntu,
+              roboto, noto,
+              'segoe ui', arial,
+              sans-serif !default;
+$code-font-stack: Consolas, 
+              Monaco,
+              Menlo,
+              "DejaVu Sans Mono", 
+              "Bitstream Vera Sans Mono", 
+              "Courier New", 
+              "Lucida Console", 
+              "Lucida Sans Typewriter", 
+              "Liberation Mono", 
+              "Nimbus Mono L", 
+              Monaco, 
+              Courier, 
+              monospace !default;
 
 $z-indexes: ("modal", "navbar", "dropdown", "header", "gtt", "clipboard", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask", "card-outter", "card-inner");
 
diff --git a/assets/sass/base/_fonts.scss b/assets/sass/base/_fonts.scss
index b6df54d..95c54d1 100644
--- a/assets/sass/base/_fonts.scss
+++ b/assets/sass/base/_fonts.scss
@@ -104,4 +104,173 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
+}
+
+/* muli-200normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200;
+  src:
+    local('Muli Extra Light '),
+    local('Muli-Extra Light'),
+    url('../fonts/muli-latin-200.woff2') format('woff2'), 
+    url('../fonts/muli-latin-200.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-200italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 200;
+  src:
+    local('Muli Extra Light italic'),
+    local('Muli-Extra Lightitalic'),
+    url('../fonts/muli-latin-200italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-200italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-300normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src:
+    local('Muli Light '),
+    local('Muli-Light'),
+    url('../fonts/muli-latin-300.woff2') format('woff2'), 
+    url('../fonts/muli-latin-300.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-300italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 300;
+  src:
+    local('Muli Light italic'),
+    local('Muli-Lightitalic'),
+    url('../fonts/muli-latin-300italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-300italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-400normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local('Muli Regular '),
+    local('Muli-Regular'),
+    url('../fonts/muli-latin-400.woff2') format('woff2'), 
+    url('../fonts/muli-latin-400.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-400italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local('Muli Regular italic'),
+    local('Muli-Regularitalic'),
+    url('../fonts/muli-latin-400italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-400italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-600normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    local('Muli SemiBold '),
+    local('Muli-SemiBold'),
+    url('../fonts/muli-latin-600.woff2') format('woff2'), 
+    url('../fonts/muli-latin-600.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-600italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    local('Muli SemiBold italic'),
+    local('Muli-SemiBolditalic'),
+    url('../fonts/muli-latin-600italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-600italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-700normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    local('Muli Bold '),
+    local('Muli-Bold'),
+    url('../fonts/muli-latin-700.woff2') format('woff2'), 
+    url('../fonts/muli-latin-700.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-700italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    local('Muli Bold italic'),
+    local('Muli-Bolditalic'),
+    url('../fonts/muli-latin-700italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-700italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-800normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src:
+    local('Muli ExtraBold '),
+    local('Muli-ExtraBold'),
+    url('../fonts/muli-latin-800.woff2') format('woff2'), 
+    url('../fonts/muli-latin-800.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-800italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 800;
+  src:
+    local('Muli ExtraBold italic'),
+    local('Muli-ExtraBolditalic'),
+    url('../fonts/muli-latin-800italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-800italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-900normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src:
+    local('Muli Black '),
+    local('Muli-Black'),
+    url('../fonts/muli-latin-900.woff2') format('woff2'), 
+    url('../fonts/muli-latin-900.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-900italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 900;
+  src:
+    local('Muli Black italic'),
+    local('Muli-Blackitalic'),
+    url('../fonts/muli-latin-900italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-900italic.woff') format('woff'); /* Modern Browsers */
 }
\ No newline at end of file
diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss
index 09c935a..c46e629 100644
--- a/assets/sass/base/_reset.scss
+++ b/assets/sass/base/_reset.scss
@@ -131,6 +131,13 @@ figcaption {
   }
 }
 
+pre {
+  white-space: pre;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+}
+
 ::-moz-selection {
   /* Code for Firefox */
   @include themify($themes) {
diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index e49954f..0eb8930 100644
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -3,10 +3,13 @@
  */
 
 html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
 
 body {
+  // font: normal 125% / 1.4 $text-font-stack;
   font: normal 125% / 1.4 $text-font-stack;
 }
 
diff --git a/assets/sass/components/_notice.scss b/assets/sass/components/_notice.scss
index 9ff6eec..a0069d8 100644
--- a/assets/sass/components/_notice.scss
+++ b/assets/sass/components/_notice.scss
@@ -27,7 +27,6 @@
         border-top: 30px solid #f1b37e;
         background: #fefaf5;
         color: rgba(150, 90, 38, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Info';
@@ -39,7 +38,6 @@
         border-top: 30px solid #d58181;
         background: #fbeded;
         color: rgba(132, 56, 56, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Warning';
@@ -51,7 +49,6 @@
         border-top: 30px solid #6bb1e0;
         background: #e6f3fb;
         color: rgba(47, 103, 141, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Note';
@@ -63,7 +60,6 @@
         border-top: 30px solid #84c578;
         background: #e8f7e6;
         color: rgba(72, 125, 63, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Tip';
diff --git a/assets/sass/components/_summary.scss b/assets/sass/components/_summary.scss
index 473d5ae..bf293c2 100644
--- a/assets/sass/components/_summary.scss
+++ b/assets/sass/components/_summary.scss
@@ -31,7 +31,6 @@
   &__text {
     margin-top: 1rem;
     line-height: 1.7rem;
-    font-family: $contents-font-stack;
   }
 
   &__image {
@@ -128,7 +127,6 @@
   &__text {
     margin-top: 1rem;
     line-height: 1.7rem;
-    font-family: $content_font;
   }
 
   &__image {
diff --git a/assets/sass/pages/_contact.scss b/assets/sass/pages/_contact.scss
index 2e9d0d9..a0b14c8 100644
--- a/assets/sass/pages/_contact.scss
+++ b/assets/sass/pages/_contact.scss
@@ -68,7 +68,6 @@
 
   &__desc {
     width: 65%; 
-    font-family: $contents-font-stack;
 
     @media only screen and (max-width: 769px) {
       width: 100%;
diff --git a/assets/sass/pages/_gallery.scss b/assets/sass/pages/_gallery.scss
index 1674dac..6cdbb18 100644
--- a/assets/sass/pages/_gallery.scss
+++ b/assets/sass/pages/_gallery.scss
@@ -65,7 +65,6 @@
   &__contents {
       padding: 1rem;
       width: 65%;
-      font-family: $contents-font-stack;
       font-size: 1rem;
       text-align: center;
   }
diff --git a/assets/sass/pages/_list.scss b/assets/sass/pages/_list.scss
index e483fb9..24eb802 100644
--- a/assets/sass/pages/_list.scss
+++ b/assets/sass/pages/_list.scss
@@ -27,7 +27,6 @@
     }
 
     &--desc {
-      font-family: $contents-font-stack;
       font-weight: italic;
       padding: 1rem;
       line-height: 1.7rem;
diff --git a/assets/sass/pages/_showcase.scss b/assets/sass/pages/_showcase.scss
index e7cc14d..31b3725 100644
--- a/assets/sass/pages/_showcase.scss
+++ b/assets/sass/pages/_showcase.scss
@@ -125,7 +125,6 @@
     }
 
     &--desc {
-      font-family: $contents-font-stack;
       font-size: 0.9rem;
       margin: 0.25rem 0;
       height: 70px;
diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss
index 11bf693..aa062d4 100644
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@@ -59,8 +59,7 @@
       text-decoration: underline;
     }
 
-    font-size: 17.2px;
-    font-family: $contents-font-stack;
+    font-size: 16.4px;
     margin: 1rem 0;
     line-height: 1.7;
     width: inheirt;
@@ -133,6 +132,10 @@
       border-radius: 0.34rem;
       line-height: 1.5;
       font-size: 13.8px;
+      @include themify($themes) {
+        @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+        @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      }
     }
 
     pre:not(.chroma) {
@@ -247,7 +250,7 @@
       }
 
       code:not([class^=language]) {
-        padding: 3px 5px;
+        padding: 3px 7px;
         margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
@@ -266,7 +269,7 @@
       padding: 0;      
 
       code:not([class^=language]) {
-        padding: 3px 5px;
+        padding: 3px 7px;
         margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
@@ -285,9 +288,11 @@
       margin-left: 2rem;
       margin-bottom: calc(1rem / 2);
 
+      & > code {
+        padding: 2px 7px;
+      }
+
       code:not([class^=language]) {
-        padding: 3px 0;
-        // margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
         }
@@ -359,7 +364,7 @@
       }
 
       code:not([class^=language]) {
-        padding: 3px 5px;
+        padding: 3px 7px;
         margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
@@ -535,9 +540,9 @@ pre:not(.chroma) {
 
 li .highlight > .chroma {
   .lnt:first-child {
-    padding: 0;
+    padding: 0 0.3rem;
   }
   .lnt:not(:first-child) {
-    padding-left: 0.5rem;
+    padding: 0 0.3rem;
   }
 }
\ No newline at end of file
diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss
index 884be26..f2c5287 100644
--- a/assets/sass/themes/_dark.scss
+++ b/assets/sass/themes/_dark.scss
@@ -100,7 +100,7 @@ $dark: (
     contact-input-color: #FCFCFA,
     contact-input-background-color: lighten(#403E41, 5%),
     contact-button-background-color: lighten(#403E41, 5%),
-    custom-scrollbar-foreground-color: #9e9e9e,
+    custom-scrollbar-foreground-color: #888,
     custom-scrollbar-background-color: #eee,
     share-color: #dbdbdb,
     share-shadow-color: #888,
diff --git a/assets/sass/themes/_hackercode.scss b/assets/sass/themes/_hackercode.scss
index 9b6f790..40111f9 100644
--- a/assets/sass/themes/_hackercode.scss
+++ b/assets/sass/themes/_hackercode.scss
@@ -58,7 +58,7 @@ $hackercode: '';
 } @else {
   $hackercode: (
     content-code-color: #E3CD26,
-    content-pre-main-color: #1FFF2A,
+    content-pre-main-color: #E08C48,//#1FFF2A,
     content-pre-color: #d1d1d1,
     content-pre-number-color: #666,
     content-pre-background-color: #282a36,
diff --git a/static/fonts/muli-latin-200.woff b/static/fonts/muli-latin-200.woff
new file mode 100644
index 0000000..97602c7
Binary files /dev/null and b/static/fonts/muli-latin-200.woff differ
diff --git a/static/fonts/muli-latin-200.woff2 b/static/fonts/muli-latin-200.woff2
new file mode 100644
index 0000000..858a4e9
Binary files /dev/null and b/static/fonts/muli-latin-200.woff2 differ
diff --git a/static/fonts/muli-latin-200italic.woff b/static/fonts/muli-latin-200italic.woff
new file mode 100644
index 0000000..472e574
Binary files /dev/null and b/static/fonts/muli-latin-200italic.woff differ
diff --git a/static/fonts/muli-latin-200italic.woff2 b/static/fonts/muli-latin-200italic.woff2
new file mode 100644
index 0000000..4497723
Binary files /dev/null and b/static/fonts/muli-latin-200italic.woff2 differ
diff --git a/static/fonts/muli-latin-300.woff b/static/fonts/muli-latin-300.woff
new file mode 100644
index 0000000..4579c75
Binary files /dev/null and b/static/fonts/muli-latin-300.woff differ
diff --git a/static/fonts/muli-latin-300.woff2 b/static/fonts/muli-latin-300.woff2
new file mode 100644
index 0000000..6c211a7
Binary files /dev/null and b/static/fonts/muli-latin-300.woff2 differ
diff --git a/static/fonts/muli-latin-300italic.woff b/static/fonts/muli-latin-300italic.woff
new file mode 100644
index 0000000..c739550
Binary files /dev/null and b/static/fonts/muli-latin-300italic.woff differ
diff --git a/static/fonts/muli-latin-300italic.woff2 b/static/fonts/muli-latin-300italic.woff2
new file mode 100644
index 0000000..db9e434
Binary files /dev/null and b/static/fonts/muli-latin-300italic.woff2 differ
diff --git a/static/fonts/muli-latin-400.woff b/static/fonts/muli-latin-400.woff
new file mode 100644
index 0000000..342b3aa
Binary files /dev/null and b/static/fonts/muli-latin-400.woff differ
diff --git a/static/fonts/muli-latin-400.woff2 b/static/fonts/muli-latin-400.woff2
new file mode 100644
index 0000000..f3e9d31
Binary files /dev/null and b/static/fonts/muli-latin-400.woff2 differ
diff --git a/static/fonts/muli-latin-400italic.woff b/static/fonts/muli-latin-400italic.woff
new file mode 100644
index 0000000..89bdcbd
Binary files /dev/null and b/static/fonts/muli-latin-400italic.woff differ
diff --git a/static/fonts/muli-latin-400italic.woff2 b/static/fonts/muli-latin-400italic.woff2
new file mode 100644
index 0000000..b78e3bd
Binary files /dev/null and b/static/fonts/muli-latin-400italic.woff2 differ
diff --git a/static/fonts/muli-latin-600.woff b/static/fonts/muli-latin-600.woff
new file mode 100644
index 0000000..e31fd2c
Binary files /dev/null and b/static/fonts/muli-latin-600.woff differ
diff --git a/static/fonts/muli-latin-600.woff2 b/static/fonts/muli-latin-600.woff2
new file mode 100644
index 0000000..6f1f802
Binary files /dev/null and b/static/fonts/muli-latin-600.woff2 differ
diff --git a/static/fonts/muli-latin-600italic.woff b/static/fonts/muli-latin-600italic.woff
new file mode 100644
index 0000000..e2b4a01
Binary files /dev/null and b/static/fonts/muli-latin-600italic.woff differ
diff --git a/static/fonts/muli-latin-600italic.woff2 b/static/fonts/muli-latin-600italic.woff2
new file mode 100644
index 0000000..fafd807
Binary files /dev/null and b/static/fonts/muli-latin-600italic.woff2 differ
diff --git a/static/fonts/muli-latin-700.woff b/static/fonts/muli-latin-700.woff
new file mode 100644
index 0000000..d2152c4
Binary files /dev/null and b/static/fonts/muli-latin-700.woff differ
diff --git a/static/fonts/muli-latin-700.woff2 b/static/fonts/muli-latin-700.woff2
new file mode 100644
index 0000000..1cedfcd
Binary files /dev/null and b/static/fonts/muli-latin-700.woff2 differ
diff --git a/static/fonts/muli-latin-700italic.woff b/static/fonts/muli-latin-700italic.woff
new file mode 100644
index 0000000..016fa05
Binary files /dev/null and b/static/fonts/muli-latin-700italic.woff differ
diff --git a/static/fonts/muli-latin-700italic.woff2 b/static/fonts/muli-latin-700italic.woff2
new file mode 100644
index 0000000..fa96972
Binary files /dev/null and b/static/fonts/muli-latin-700italic.woff2 differ
diff --git a/static/fonts/muli-latin-800.woff b/static/fonts/muli-latin-800.woff
new file mode 100644
index 0000000..9fd9939
Binary files /dev/null and b/static/fonts/muli-latin-800.woff differ
diff --git a/static/fonts/muli-latin-800.woff2 b/static/fonts/muli-latin-800.woff2
new file mode 100644
index 0000000..4cdf7bc
Binary files /dev/null and b/static/fonts/muli-latin-800.woff2 differ
diff --git a/static/fonts/muli-latin-800italic.woff b/static/fonts/muli-latin-800italic.woff
new file mode 100644
index 0000000..2d0c0d2
Binary files /dev/null and b/static/fonts/muli-latin-800italic.woff differ
diff --git a/static/fonts/muli-latin-800italic.woff2 b/static/fonts/muli-latin-800italic.woff2
new file mode 100644
index 0000000..ee51dd3
Binary files /dev/null and b/static/fonts/muli-latin-800italic.woff2 differ
diff --git a/static/fonts/muli-latin-900.woff b/static/fonts/muli-latin-900.woff
new file mode 100644
index 0000000..1b343ad
Binary files /dev/null and b/static/fonts/muli-latin-900.woff differ
diff --git a/static/fonts/muli-latin-900.woff2 b/static/fonts/muli-latin-900.woff2
new file mode 100644
index 0000000..1252216
Binary files /dev/null and b/static/fonts/muli-latin-900.woff2 differ
diff --git a/static/fonts/muli-latin-900italic.woff b/static/fonts/muli-latin-900italic.woff
new file mode 100644
index 0000000..0aad097
Binary files /dev/null and b/static/fonts/muli-latin-900italic.woff differ
diff --git a/static/fonts/muli-latin-900italic.woff2 b/static/fonts/muli-latin-900italic.woff2
new file mode 100644
index 0000000..fd4e66b
Binary files /dev/null and b/static/fonts/muli-latin-900italic.woff2 differ