diff --git a/src/css/styles.css b/src/css/styles.css
index 0fb42ca..9aa6830 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,7 +1,9 @@
+
 /* https://github.com/pure-css/pure/blob/master/site/static/layouts/side-menu/styles.css */
 
 body {
     color: #777;
+    font-size: 20px;
 }
 
 #navbar-image {
@@ -58,9 +60,10 @@ The content `<div>` is where all your content goes.
      color: #333;
      text-align: center;
      padding: 2.5em 2em 0;
-     border-bottom: 1px solid #eee;
+     border-bottom: 1px solid #00000088;
+     margin-bottom: 2.5em;
  }
-    .header h1 {
+    /* .header h1 {
         margin: 0.2em 0;
         font-size: 3em;
         font-weight: 300;
@@ -70,7 +73,7 @@ The content `<div>` is where all your content goes.
         color: #ccc;
         padding: 0;
         margin-top: 0;
-    }
+    } */
 
 .content-subhead {
     margin: 50px 0 20px 0;
@@ -252,3 +255,105 @@ Hides the menu at `48em`, but modify this based on your app's needs.
         left: 150px;
     }
 }
+
+/*  */
+
+.pure-menu {
+    box-sizing: border-box;
+}
+
+.pure-menu-fixed {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 3;
+}
+
+.pure-menu-list,
+.pure-menu-item {
+    position: relative;
+}
+
+.pure-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.pure-menu-item {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+
+.pure-menu-link,
+.pure-menu-heading {
+    display: block;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+
+/* https://github.com/pure-css/pure/blob/master/src/menus/css/menus-skin.css */
+.pure-menu-separator,
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+    background-color: #ccc;
+    height: 1px;
+    margin: .3em 0;
+}
+
+.pure-menu-horizontal .pure-menu-separator {
+    width: 1px;
+    height: 1.3em;
+    margin: 0 .3em ;
+}
+
+/* Need to reset the separator since submenu is vertical */
+.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
+    display: block;
+    width: auto;
+}
+
+.pure-menu-heading {
+    text-transform: uppercase;
+    color: #565d64;
+}
+
+.pure-menu-link {
+    color: #777;
+}
+
+.pure-menu-children {
+    background-color: #fff;
+}
+
+.pure-menu-link,
+.pure-menu-heading {
+    padding: .5em 1em;
+}
+
+.pure-menu-disabled {
+    opacity: .5;
+}
+
+.pure-menu-disabled .pure-menu-link:hover {
+    background-color: transparent;
+    cursor: default;
+}
+
+.pure-menu-active > .pure-menu-link,
+.pure-menu-link:hover,
+.pure-menu-link:focus {
+    background-color: #eee;
+}
+
+.pure-menu-selected > .pure-menu-link,
+.pure-menu-selected > .pure-menu-link:visited {
+    color: #000;
+}
+
+/*  */
+
+.nani_card-link:hover {
+  filter: brightness(90%);
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index d0f4aba..e5573c2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,36 +7,51 @@ title: "Nani"
 ---
 
 <header class="header">
-  <h1>Welcome to nani.wtf</h1>
+  <h1 class="display-1">Welcome to nani.wtf</h1>
   <img
     alt="A woman sitting on a bench amongst trees at the end of a boardwalk leading to a pond with mountains in the background"
     src="./images/robert-pearce-UwHN0jU_YqQ-unsplash-800w.jpg"
     style="max-width:500px;"
+    class="mb-4"
   />
 </header>
 <main>
   <section class="content">
-    <div class="pure-g">
-      <div class="pure-u-1-2 pure-u-md-1-2">
-        <h2>Posts</h2>
-        <ul>
-          $for(posts)$
-            <li>
-              <div><a href=".$url$">$title$</a></div>
-              <small>$date$</small>
-            </li>
-          $endfor$
-        </ul>
+    <div class="container">
+      <div class="row">
+
+        <!-- POSTS  -->
+        <div class="col">
+          <h2 class="text-center">Posts</h2>
+          <ul>
+            $for(posts)$
+              <div class="card nani_card-link my-3">
+                <img src="$image$" class="card-img-top" alt="">
+                <div class="card-body">
+                  <h5 class="card-title">$title$</h5>
+                  <small class="card-text ">$date$</small>
+                  <p class="card-text">$desc$</p>
+                </div>
+                <a href="$url$" class="stretched-link"></a>
+              </div>
+            $endfor$
+          </ul>
+        </div>
+
+        <div class="col"></div>
+
+        <!-- 語源 -->
+        <div class="col">
+          <h2 class="text-center">語源</h2>
+          <ul>
+            $for(gogen)$
+              <li>
+                <div><a href=".$url$">$titleHtml$</a></div>
+              </li>
+            $endfor$
+          </ul>
+        </div>
       </div>
-      <div class="pure-u-1-2 pure-u-md-1-2">
-        <h2>語源</h2>
-        <ul>
-          $for(gogen)$
-            <li>
-              <div><a href=".$url$">$titleHtml$</a></div>
-            </li>
-          $endfor$
-        </ul>
     </div>
   </section>
 </main>
diff --git a/src/templates/default.html b/src/templates/default.html
index 2964f0b..b5e62f3 100644
--- a/src/templates/default.html
+++ b/src/templates/default.html
@@ -45,27 +45,24 @@
       <meta property="twitter:image" content="$root$$image$">
     $endif$
 
-    <!-- $if(authorTwitter)$ -->
-      <!-- <meta property="twitter:creator" content="$authorTwitter$"> -->
-    <!-- $endif$ -->
-
     <link rel="shortcut icon" href="/images/nani.svg">
     <link rel="canonical" href="$root$$url$">
+    <link rel="stylesheet" href="/css/code.css" />
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
     <link rel="stylesheet" href="/css/default.css" />
     <link rel="stylesheet" href="/css/styles.css" />
-    <link rel="stylesheet" href="/css/code.css" />
-    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
+
   </head>
   <body>
 
     <div id="layout">
-      <!-- Menu toggle -->
-      <a href="#menu" id="menuLink" class="menu-link">
-        <!-- Hamburger icon -->
-        <span></span>
-      </a>
       <div id="menu"> <div class="pure-menu">
-          <a class="pure-menu-heading" href="/"><img id="navbar-image" class="pure-image-responsive" src="/images/header-nani.svg"/></a>
+          <a class="pure-menu-heading" href="/">
+            <img id="navbar-image" class="pure-image-responsive py-4" src="/images/header-nani.svg"/>
+          </a>
     
               <ul class="pure-menu-list">
                   <li class="pure-menu-item"><a href="/" class="pure-menu-link">Posts</a></li>
diff --git a/src/templates/gogen.html b/src/templates/gogen.html
index 6f72eb8..ddc229a 100644
--- a/src/templates/gogen.html
+++ b/src/templates/gogen.html
@@ -14,6 +14,12 @@
       $endif$
     </header>
     <section class="content">
+      $if(notFinishedYet)$
+        <div class="d-flex justify-content-center">
+          <aside class="alert alert-warning"><strong>NOTE:</strong> This page might not be complete just yet.</aside>
+        </div>
+      $endif$
+
       $body$
     </section>
   </article>
diff --git a/ssg/src/Formats/Gogen.hs b/ssg/src/Formats/Gogen.hs
index 4ca5b4e..2f158eb 100644
--- a/ssg/src/Formats/Gogen.hs
+++ b/ssg/src/Formats/Gogen.hs
@@ -1,44 +1,41 @@
 {-# LANGUAGE QuasiQuotes, FlexibleContexts #-}
 
-module Formats.Gogen (
-  convertFuriganaTitle,
-  convertFuriganaTitleHtml,
-  gogenCtx,
-) where
+module Formats.Gogen (gogenCtx) where
 
 import Hakyll
 import Debug.Trace (traceId)
 import Data.Maybe (fromMaybe)
-import Text.Regex.PCRE.Heavy (gsub, re)
+import Control.Applicative (empty)
+import Text.Regex.PCRE.Heavy (Regex, gsub, re)
 
---------------------------------------------------------------------------------
--- FURIGANA CONVERSION
-
-type FuriganaTemplate = String
-
-convertTitle = updateFieldWith "title" "???"
-
-convertFuriganaTitle :: Item a -> Compiler String
-convertFuriganaTitle =  convertTitle replaceFuriganaWithKanji
-
-convertFuriganaTitleHtml :: Item a -> Compiler String
-convertFuriganaTitleHtml = convertTitle replaceFuriganaWithHtml
 
 updateFieldWith :: String -> String -> (String -> String) -> Item a -> Compiler String
 updateFieldWith field defaultPreviousValue f = 
   fmap updateField . getMetadata . itemIdentifier
     where
       updateField :: Metadata -> String
-      updateField = traceId . f . fromMaybe defaultPreviousValue . lookupString field
+      updateField = f . fromMaybe defaultPreviousValue . lookupString field
+
+ifField :: String -> (Item a -> Compiler ContextField) -> Context a
+ifField key value = Context $ \k _ i -> if k == key then value i else empty
+
+--------------------------------------------------------------------------------
+-- FURIGANA CONVERSION
+
+type FuriganaTemplate = String
+
+convertTitle :: (String -> String) -> Item a -> Compiler String
+convertTitle = updateFieldWith "title" "???"
+
+furiganaRegex :: Regex
+furiganaRegex = [re|\[(.*?)\]\((.*?)\)|]
 
 replaceFuriganaWithKanji :: FuriganaTemplate -> String
-replaceFuriganaWithKanji = gsub [re|\[(.*?)\]\((.*?)\)|] (\(kanji:kana:_) -> kanji :: String)
+replaceFuriganaWithKanji = gsub furiganaRegex (\(kanji:_) -> kanji :: String)
 
 replaceFuriganaWithHtml :: FuriganaTemplate -> String
-replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub regex matchToHtml
+replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub furiganaRegex matchToHtml
   where
-    regex = [re|\[(.*?)\]\((.*?)\)|]
-
     between :: String -> String -> String -> String
     between x y s = x ++ s ++ y
 
@@ -47,7 +44,18 @@ replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub regex matchToHtml
       let defaultKanji = if kanji == "" then "〇" else kanji
       in foldr1 (++) ["<rb>", defaultKanji, "</rb> <rp>(</rp><rt>", kana, "</rt><rp>)</rp>"]
 
+convertFuriganaTitle :: Item a -> Compiler String
+convertFuriganaTitle =  convertTitle replaceFuriganaWithKanji
 
+convertFuriganaTitleHtml :: Item a -> Compiler String
+convertFuriganaTitleHtml = convertTitle replaceFuriganaWithHtml
+
+convertFinishedValue :: Item a -> Compiler ContextField
+convertFinishedValue i = do 
+  s <- getMetadataField (itemIdentifier i) "finished"
+  case s of
+    Just "true" -> empty
+    _ -> return (StringField "true")
 
 {- |
   title: String
@@ -60,10 +68,13 @@ replaceFuriganaWithHtml = between "<ruby>" "</ruby>" . gsub regex matchToHtml
   leads_here: Maybe [String]
   alternatives: Maybe [String]
   see_also: Maybe [String]
+  sources: Maybe [String]
 -}
 gogenCtx :: Context String
 gogenCtx =
   dateField "date" "%Y-%m-%d"
+  <> ifField "notFinishedYet" convertFinishedValue
+  <> field "title" convertFuriganaTitle
   <> field "titleHtml" convertFuriganaTitleHtml
-  <> defaultContext
-  <> constField "lang" "en"
\ No newline at end of file
+  <> constField "lang" "en"
+  <> defaultContext
\ No newline at end of file
diff --git a/ssg/src/Main.hs b/ssg/src/Main.hs
index 34e3e7b..3164d29 100644
--- a/ssg/src/Main.hs
+++ b/ssg/src/Main.hs
@@ -3,8 +3,6 @@
 import Control.Monad (forM_)
 import Data.Maybe (fromMaybe)
 import Hakyll
-import qualified Data.Text as T
-import qualified Data.Text.Slugger as Slugger
 import Text.Pandoc
   ( Extension (Ext_fenced_code_attributes, Ext_footnotes, Ext_gfm_auto_identifiers, Ext_implicit_header_references, Ext_smart),
     Extensions,
@@ -83,8 +81,6 @@ main = hakyllWith config $ do
   match "gogen/*" $ do
     let ctx =
           constField "type" "article"
-          <> field "title" convertFuriganaTitle
-          <> field "titleHtml" convertFuriganaTitleHtml
           <> constField "root" root
           <> constField "siteName" siteName
           <> gogenCtx
@@ -248,4 +244,4 @@ feedConfiguration =
     , feedAuthorName = "h7x4"
     , feedAuthorEmail = "h7x4@protonmail.com"
     , feedRoot = root
-    }
+    }
\ No newline at end of file