diff --git a/assets/_default/list.scss b/assets/_default/list.scss
index 5a62ec5..1a5ea2d 100644
--- a/assets/_default/list.scss
+++ b/assets/_default/list.scss
@@ -36,7 +36,7 @@ header {
     padding: 20px;
     transition: background .2s;
     &:hover {
-        background: rgb(70, 70, 105);
+      background: rgb(70, 70, 105);
     }
     img {
       background: rgb(80, 80, 120);
@@ -48,6 +48,8 @@ header {
       order: -1;
     }
     h1 {
+      font-size: 1.2em;
+      font-weight: 400;
       margin-top: 0px;
     }
     a {
@@ -57,6 +59,7 @@ header {
       }
     }
     .meta {
+      font-size: .8em;
       margin: 0;
     }
     .author {
diff --git a/assets/_default/single.scss b/assets/_default/single.scss
index 7a2575d..f051b97 100644
--- a/assets/_default/single.scss
+++ b/assets/_default/single.scss
@@ -1,5 +1,6 @@
 @import '../partials/main';
 @import '../partials/nav';
+@import '../partials/syntax';
 
 .section-article {
   article {
diff --git a/assets/index.scss b/assets/index.scss
index 09c1b47..01f289a 100644
--- a/assets/index.scss
+++ b/assets/index.scss
@@ -44,10 +44,8 @@ header {
     border: 1px solid rgb(60, 60, 90);
     border-radius: 5px;
     color: rgb(255, 255, 255);
-    display: grid;
-    grid-template-areas: "img h1"
-                         "img p";
-    grid-template-columns: 120px 1fr;
+    display: flex;
+    flex-flow: column;
     height: max-content;
     padding: 20px;
     transition: background .2s;
@@ -55,20 +53,21 @@ header {
       background: rgb(70, 70, 105);
     }
     img {
-      border: 0px solid rgb(40, 40, 60);
-      border-radius: 5px 0px 0px 5px;
-      grid-area: img;
-      height: 180px;
-      margin: -20px;
+      background: rgb(80, 80, 120);
+      border-radius: 5px 5px 0px 0px;
+      margin: -20px -20px 10px -20px;
+      max-height: 250px;
+      max-width: calc(100% + 40px);
       object-fit: cover;
-      width: 120px;
+      order: -1;
     }
     h1 {
-      grid-area: h1;
-      margin: 0px;
+      font-size: 20px;
+      font-weight: 400;
+      margin: 0;
     }
     .meta {
-      grid-area: p;
+      font-size: 15px;
       margin: 0;
     }
     .author {
@@ -108,20 +107,23 @@ header {
     img {
       background: rgb(80, 80, 120);
       border-radius: 5px 5px 0px 0px;
-      margin: -20px -20px 20px -20px;
+      margin: -20px -20px 10px -20px;
       max-height: 170px;
       max-width: calc(100% + 40px);
       object-fit: cover;
       order: -1;
     }
     h1 {
-      margin-top: 0;
+      font-size: 20px;
+      font-weight: 400;
+      margin: 0;
     }
     .meta {
+      font-size: 15px;
       margin: 0;
     }
     .status {
-      color: rgb(200, 200, 230);
+      color: rgb(215, 215, 225);
       font-style: italic;
     }
   }
diff --git a/assets/partials/_nav.scss b/assets/partials/_nav.scss
index cc1fdd3..00f3c09 100644
--- a/assets/partials/_nav.scss
+++ b/assets/partials/_nav.scss
@@ -2,6 +2,8 @@ nav {
   background: rgb(60, 60, 90);
   overflow-x: auto;
   overflow-y: hidden;
+  position: sticky;
+  top: 0;
   white-space: nowrap;
   .container {
     align-items: center;
diff --git a/assets/partials/_syntax.scss b/assets/partials/_syntax.scss
new file mode 100644
index 0000000..915d5a9
--- /dev/null
+++ b/assets/partials/_syntax.scss
@@ -0,0 +1,270 @@
+ .chroma { // background
+  background: rgb(30, 30, 45);
+  border-radius: 5px;
+  color: rgb(245, 245, 255);
+  .x { // other
+    
+  }
+  .err { // error
+    
+  }
+  .lntd { // lineTableTD
+    border: 0;
+    margin: 0;
+    padding: 0 0 0 20px;
+    vertical-align: top;
+  }
+  .lntable { // lineTable
+    border: 0; 
+    border-spacing: 0; 
+    display: block;
+    margin: 0; 
+    overflow: auto; 
+    padding: 0; 
+    width: auto; 
+  }
+  .hl { // lineHighlight
+    background: #ffffcc;
+    display: block;
+    width: 100%;
+  }
+  .lnt { // lineNumbersTable
+    color: rgb(215, 215, 225);
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+  }
+  .ln { // lineNumbers
+    color: rgb(215, 215, 225);
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+  }
+  .k { // keyword
+    color: #ff79c6;
+  }
+  .kc { // keywordConstant
+    color: #ff79c6;
+  }
+  .kd { // keywordDeclaration
+    color: #8be9fd;
+    font-style: italic;
+  }
+  .kn { // keywordNamespace
+    color: #ff79c6;
+  }
+  .kp { // keywordPseudo
+    color: #ff79c6;
+  }
+  .kr { // keywordReserved
+    color: #ff79c6;
+  }
+  .kt { // keywordType
+    color: #8be9fd;
+  }
+  .n { // name
+  
+  }
+  .na { // nameAttribute
+    color: #50fa7b;
+  }
+  .nb { // nameBuiltin
+    color: #8be9fd;
+    font-style: italic
+  }
+  .bp { // nameBuiltinPseudo
+    
+  }
+  .nc { // nameClass
+    color: #50fa7b;
+  }
+  .no { // nameConstant
+    
+  }
+  .nd { // nameDecorator
+    
+  }
+  .ni { // nameEntity
+    
+  }
+  .ne { // nameException
+    
+  }
+  .nf { // nameFunction
+    color: #50fa7b;
+  }
+  .fm { // nameFunctionMagic
+    
+  }
+  .nl { // nameLabel
+    color: #8be9fd;
+    font-style: italic;
+  }
+  .nn { // nameNamespace
+    
+  }
+  .nx { // nameOther
+    
+  }
+  .py { // nameProperty
+    
+  }
+  .nt { // nameTag
+    color: rgb(255, 255, 255);
+  }
+  .nv { // nameVariable
+    color: #8be9fd;
+    font-style: italic;
+  }
+  .vc { // nameVariableClass
+    color: #8be9fd;
+    font-style: italic;
+  }
+  .vg { // nameVariableGlobal
+    color: #8be9fd;
+    font-style: italic;
+  }
+  .vi { // nameVariableInstance
+    color: #8be9fd;
+    font-style: italic;
+  }
+  .vm { // nameVariableMagic
+    
+  }
+  .l { // literal
+    
+  }
+  .ld { // literalDate
+    
+  }
+  .s { // literalString
+    color: #f1fa8c;
+  }
+  .sa { // literalStringAffix
+    color: #f1fa8c;
+  }
+  .sb { // literalStringBacktick
+    color: #f1fa8c;
+  }
+  .sc { // literalStringChar
+    color: #f1fa8c;
+  }
+  .dl { // literalStringDelimiter
+    color: #f1fa8c;
+  }
+  .sd { // literalStringDoc
+    color: #f1fa8c;
+  }
+  .s2 { // literalStringDouble
+    color: #f1fa8c;
+  }
+  .se { // literalStringEscape
+    color: #f1fa8c;
+  }
+  .sh { // literalStringHeredoc
+    color: #f1fa8c;
+  }
+  .si { // literalStringInterpol
+    color: #f1fa8c;
+  }
+  .sx { // literalStringOther
+    color: #f1fa8c;
+  }
+  .sr { // literalStringRegex
+    color: #f1fa8c;
+  }
+  .s1 { // literalStringSingle
+    color: #f1fa8c;
+  }
+  .ss { // literalStringSymbol
+    color: #f1fa8c;
+  }
+  .m { // literalNumber
+    color: #bd93f9;
+  }
+  .mb { // literalNumberBin
+    color: #bd93f9;
+  }
+  .mf { // literalNumberFloat
+    color: #bd93f9;
+  }
+  .mh { // literalNumberHex
+    color: #bd93f9;
+  }
+  .mi { // literalNumberInteger
+    color: #bd93f9;
+  }
+  .il { // literalNumberIntegerLong
+    color: #bd93f9;
+  }
+  .mo { // literalNumberOct
+    color: #bd93f9;
+  }
+  .o { // operator
+    color: #ff79c6;
+  }
+  .ow { // operatorWord
+    color: #ff79c6;
+  }
+  .p { // punctuation
+    
+  }
+  .c { // comment
+    color: #6272a4;
+  }
+  .ch { // commentHashbang
+    color: #6272a4;
+  }
+  .cm { // commentMultiline
+    color: #6272a4;
+  }
+  .c1 { // commentSingle
+    color: #6272a4;
+  }
+  .cs { // commentSpecial
+    color: #6272a4;
+  }
+  .cp { // commentPreproc
+    color: #ff79c6;
+  }
+  .cpf { // commentPreprocFile
+    color: #ff79c6;
+  }
+  .g { // generic
+    
+  }
+  .gd { // genericDeleted
+    color: #8b080b;
+  }
+  .ge { // genericEmph
+    text-decoration: underline;
+  }
+  .gr { // genericError
+    
+  }
+  .gh { // genericHeading
+    font-weight: bold;
+  }
+  .gi { // genericInserted
+    font-weight: bold;
+  }
+  .go { // genericOutput
+    color: #44475a;
+  }
+  .gp { // genericPrompt
+    
+  }
+  .gs { // genericStrong
+    
+  }
+  .gu { // genericSubheading
+    font-weight: bold;
+  }
+  .gt { // genericTraceback
+    
+  }
+  .gl { // genericUnderline
+    text-decoration: underline;
+  }
+  .w { // textWhitespace
+    
+  }
+ }
diff --git a/config.yaml b/config.yaml
index c21d73d..e6d5a23 100644
--- a/config.yaml
+++ b/config.yaml
@@ -49,3 +49,11 @@ menu:
     title: source code
     url: https://git.vrifox.cc/vrifox/vrifox.cc
     weight: 3
+markup:
+  highlight:
+    anchorLineNos: true
+    lineNos: true
+    lineNumbersInTable: true
+    noClasses: false
+    style: dracula
+    tabWidth: 2