diff --git a/src/Tintin/ConfigurationLoading.hs b/src/Tintin/ConfigurationLoading.hs
--- a/src/Tintin/ConfigurationLoading.hs
+++ b/src/Tintin/ConfigurationLoading.hs
@@ -13,8 +13,6 @@
 import Universum.Unsafe (fromJust)
 import Text.Read (read)
 
-import qualified Universum.Debug as Debug
-
 loadInfo :: ( Has Logging.Capability eff
             , Has Filesystem.Capability eff
             )
diff --git a/src/Tintin/Html/Style.hs b/src/Tintin/Html/Style.hs
--- a/src/Tintin/Html/Style.hs
+++ b/src/Tintin/Html/Style.hs
@@ -4,7 +4,6 @@
 
 import Clay
 import qualified Clay.Media as Media
-import Clay.Selector
 
 style :: Text
 style = toText . render $ do
@@ -103,20 +102,32 @@
         display block
         textDecoration none
         fontWeight bold
+      ".tintin-fg-disabled" ? do
         ":hover" & do
-          textDecoration none
-          color white
-        ":active" & do
-          textDecoration none
-          color white
-        ":focus" & do
-          textDecoration none
-          color white
+           "mix-blend-mode" -: "normal"
+           Clay.filter $ invert (pct 0)
+           textDecoration none
+           color black
+      ".tintin-fg-active" ? do
+        ":hover" & do
+           "mix-blend-mode" -: "normal"
+           Clay.filter $ invert (pct 0)
+           textDecoration none
+           color white
 
+  "#menu-toggle" ? do
+    position absolute
+    img ? do
+      position absolute
+      left (px 0)
+    ".rotateIn" ? do
+      zIndex 999
+
   ".tintin-doc-topbar" ? do
-    height (rem 5)
+    height (rem 3)
     a ? do
       marginLeft (rem 1)
+      marginTop (rem 0)
       width (rem 1.5)
       img ? do
         Clay.filter (invert $ pct 70)
@@ -135,7 +146,6 @@
     marginLeft (rem $ -0.25)
     height (rem 1.75)
     Clay.filter (invert (pct 75))
-    -- Clay.filter (brightness 0.75)
 
   ".tintin-doc-footer" ? do
     bottom (px 0)
@@ -150,9 +160,6 @@
   "#content" ? do
     minHeight (pct 95)
 
-  ".tintin-generated-with" ? do
-    pass
-
   ".sidebar-nav" |> ".sidebar-brand" ? do
     height (rem 3)
     fontSize (rem 2)
@@ -167,7 +174,35 @@
   ".tintin-navbar" ? do
     fontWeight bold
     backgroundColor (rgba 255 255 255 0.15)
+    ".left-part" ? do
+      important $ paddingLeft (px 0)
+    ul ? do
+      marginTop (rem 1)
+      listStyleType none
+      li ? do
+        marginRight (rem 1)
+        display inline
+        a ? do
+          color black
+          Clay.filter $ invert (pct 35)
+          "mix-blend-mode" -: "difference"
+        "a:hover" ? do
+          "mix-blend-mode" -: "normal"
+          Clay.filter $ invert (pct 0)
+          textDecoration none
+          color black
 
+    ".tintin-navbar-active" ? do
+      a ? do
+        "mix-blend-mode" -: "normal"
+        Clay.filter $ invert (pct 0)
+        color white
+      "a:hover" ? do
+        "mix-blend-mode" -: "normal"
+        Clay.filter $ invert (pct 0)
+        textDecoration none
+        color white
+
   ".tintin-bg-70" ? do
     backgroundColor (rgba 255 255 255 0.15)
 
@@ -182,8 +217,11 @@
   ".tintin-fg-active" ? do
     color (rgba 255 255 255 1.0)
 
+
   ".tintin-fg-disabled" ? do
-    color (rgba 255 255 255 0.35)
+    color black
+    Clay.filter $ invert (pct 35)
+    "mix-blend-mode" -: "difference"
 
   footer ? do
     position relative
@@ -213,7 +251,6 @@
     "#page-content-wrapper" ? do
       padding (px 20) (px 20) (px 20) (px 20)
       position relative
-
 
 
 
diff --git a/src/Tintin/Html/Templating.hs b/src/Tintin/Html/Templating.hs
--- a/src/Tintin/Html/Templating.hs
+++ b/src/Tintin/Html/Templating.hs
@@ -44,17 +44,14 @@
                     ( toHtml $ Project.title p )
 
           nav_ [class_ "navbar navbar-expand-lg tintin-doc-topbar tintin-fg-white"] $ do
-            a_ [id_ "menu-open", href_ "#menu-toggle", class_ "d-none"] $
-              img_ [ src_ $ asset "menu.png", class_ "img-fluid" ]
-            a_ [id_ "menu-close", href_ "#menu-toggle"] $
-              img_ [ src_ $ asset "close.png", class_ "img-fluid" ]
+            a_ [id_ "menu-toggle", href_ "#menu-toggle", class_ ""] $ do
+              img_ [ src_ $ asset "menu.png", class_ "img-fluid animated rotateOut" ]
+              img_ [ src_ $ asset "close.png", class_ "img-fluid animated rotateIn" ]
 
           div_ [id_ "page-content-wrapper"] $ do
             div_ [class_ "container"] $ do
               div_ [class_ "col"] $
-                div_ [ data_ "aos" "fade-left"
-                     , data_ "aos-duration" "800"
-                     , data_ "aos-once" "true"
+                div_ [ class_ "animated fadeIn"
                      ] $
                   toHtmlRaw $ Project.content page
       div_ [class_ "tintin-doc-footer clear-fix"]
@@ -92,9 +89,7 @@
       navbar
 
     section_ [ id_ "content"
-             , data_ "aos" "fade-up"
-             , data_ "aos-duration" "800"
-             , data_ "aos-once" "true"
+             , class_ "animated fadeIn"
              ] $ do
       div_ [class_ "container"] $ do
         div_ [class_ "content"
@@ -105,21 +100,21 @@
     tintinPostInit
  where
   navbar =
-    nav_ [ class_ "navbar navbar-expand-lg navbar-dark tintin-navbar"
+    nav_ [ class_ "tintin-navbar"
          , style_ "width: 100%;"
          ] $ do
-      div_ [ class_ "container" ] $ do
-        div_ [class_ "collapse navbar-collapse", id_ "navbarSupportedContent"] $ do
-          ul_ [class_ "navbar-nav mr-auto"] $ do
-            li_ [class_ "nav-item active"] $
-              a_ [class_ "nav-link active", href_ "index.html"] "Home"
+      div_ [ class_ "container d-flex align-items-center" ] $ do
+        div_ [class_ "mr-auto"] $ do
+          ul_ [class_ "left-part"] $ do
+            li_ [class_ "tintin-navbar-active"] $
+              a_ [class_ "", href_ "index.html"] "Home"
             let (page:_) = filter (\x -> "index.html" /= Project.filename x ) (Project.pages info)
-            li_ [class_ "nav-item"] $
-              a_ [class_ "nav-link", href_ (Project.filename page)] "Docs"
-        div_ $
-          ul_ [class_ "navbar-nav mr-sm-2"] $
-            li_ [class_ "nav-item"] $
-              a_ [class_ "nav-link", href_ $ "https://github.com/" <> Project.githubLink info] "View on GitHub"
+            li_ [class_ ""] $
+              a_ [class_ "", href_ (Project.filename page)] "Docs"
+        div_ [class_ ""]$
+          ul_ [class_ ""] $
+            li_ [class_ ""] $
+              a_ [class_ "", href_ $ "https://github.com/" <> Project.githubLink info] "View on GitHub"
 
   footer =
     footer_ [ class_ "tintin-bg-darkgrey tintin-fg-white"] $
@@ -140,9 +135,6 @@
   head_ $ do
     title_ ( toHtml $ name <> " - " <> title )
     link_ [ rel_ "stylesheet"
-          , href_ "https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"
-          ]
-    link_ [ rel_ "stylesheet"
           , href_ "https://fonts.googleapis.com/css?family=IBM+Plex+Sans|Montserrat:500"
           ]
     link_ [ rel_ "stylesheet"
@@ -151,6 +143,9 @@
     link_ [ rel_ "stylesheet"
           , href_ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night.min.css"
           ]
+    link_ [ rel_ "stylesheet"
+          , href_ "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
+          ]
     link_ [ rel_ "shortcut icon"
           , href_ ( asset $ "favicon-"
                   <> bgColorOf info
@@ -168,25 +163,11 @@
   script_ [ src_ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"] ( "" :: Text )
   script_ [ src_ "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/haskell.min.js"] ("" :: Text)
   script_ [ src_ "https://cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js" ] ( "" :: Text )
-  script_ "$(function() { AOS.init(); })"
-  script_ [ src_ "https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"] ("" :: Text)
-  script_ [ src_ "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js" ] ("" :: Text)
   script_ "hljs.initHighlightingOnLoad()"
-  script_ "$(function () {$(\"#menu-open\").click(function(e) {\
-        \e.preventDefault();\
-        \$(\"#wrapper\").toggleClass(\"toggled\");\
-        \anime({targets: \"#menu-open img\", scale: 0.125, rotate: '0deg'});\
-        \$(\"#menu-close\").toggleClass(\"d-none\");\
-        \$(\"#menu-open\").toggleClass(\"d-none\");\
-        \anime({targets: \"#menu-close img\", scale: 1, rotate: '180deg'});\
-    \})});"
-  script_ "$(function () {$(\"#menu-close\").click(function(e) {\
+  script_ "$(function () {$(\"#menu-toggle\").click(function(e) {\
         \e.preventDefault();\
         \$(\"#wrapper\").toggleClass(\"toggled\");\
-        \anime({targets: \"#menu-close img\", scale: 0.125, rotate: '0deg'});\
-        \$(\"#menu-close\").toggleClass(\"d-none\");\
-        \$(\"#menu-open\").toggleClass(\"d-none\");\
-        \anime({targets: \"#menu-open img\", scale: 1, rotate: '180deg'});\
+        \$(\"#menu-toggle img\").toggleClass(\"rotateIn rotateOut\");\
     \})});"
 
 
diff --git a/tintin.cabal b/tintin.cabal
--- a/tintin.cabal
+++ b/tintin.cabal
@@ -2,10 +2,10 @@
 --
 -- see: https://github.com/sol/hpack
 --
--- hash: 17f8750b877675fed81d3654d0bb35a9e8439dbb06bbacc90a1a368ff887a922
+-- hash: c2fcfd3f29faa9aee84968f000f40749efa16d012c5c88b61905dbc227981919
 
 name:           tintin
-version:        1.0.4
+version:        1.2.4
 synopsis:       A softer alternative to Haddock
 description:    Please see the website <https://theam.github.io/tintin>
 category:       Documentation