diff --git a/src/Shared.elm b/src/Shared.elm
index 1520c3e..05a3dcb 100644
--- a/src/Shared.elm
+++ b/src/Shared.elm
@@ -10,7 +10,7 @@ module Shared exposing
 
 import Browser.Navigation exposing (Key)
 import Html exposing (..)
-import Html.Attributes exposing (class, href)
+import Html.Attributes exposing (class, href, src, alt, width, height, style)
 import Spa.Document exposing (Document)
 import Spa.Generated.Route as Route
 import Url exposing (Url)
@@ -69,10 +69,20 @@ view { page, toMsg } model =
     { title = page.title
     , body =
         [ div [ class "bg-dark" ] 
-            [ nav [ class "navbar navbar-expand-lg navbar-dark bg-primary sticky-top" ]
-                [ a [ class "navbar-brand", href (Route.toString Route.Top) ] [ text "abra apps" ] 
+            [ nav 
+                [ class "navbar navbar-expand-lg sticky-top font-weight-bold"
+                , style "background" "#ff4f88" ]
+                [ a [ class "navbar-brand text-dark", href (Route.toString Route.Top) ] 
+                    [ img 
+                        [ src "/logo.png"
+                        , class "d-inline-block align-top mr-2"
+                        , alt "" 
+                        , width 30
+                        , height 30 ] []
+                    , text "abra apps" 
+                    ] 
                 , ul [ class "navbar-nav" ]
-                    [ li [ class "nav-tem" ] [ a [ class "nav-link", href (Route.toString Route.About) ] [ text "about" ] ]
+                    [ li [ class "nav-tem" ] [ a [ class "nav-link text-dark", href (Route.toString Route.About) ] [ text "about" ] ]
                     ]
                 ]
             , div [ class "container-fluid" ] page.body