diff --git a/DESCRIPTION b/DESCRIPTION
index bbbd059..31dc777 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -1,20 +1,23 @@
 Package: signature.r
 Title: Fill your email signature
 Version: 0.0.0.9000
-Authors@R: person('Arthur', 'Bréant', email = 'arthur@thinkr.fr', role = c('cre', 'aut'))
+Authors@R: 
+    person("Arthur", "Bréant", , "arthur@thinkr.fr", role = c("cre", "aut"))
 Description: Fill in your email signature from Thinkr template.
 License: MIT + file LICENSE
+URL: https://github.com/ThinkR-open/signature.r
+BugReports: https://github.com/ThinkR-open/signature.r/issues
 Imports: 
+    bslib,
     config (>= 0.3.2),
     golem (>= 0.4.1),
+    sass,
     shiny (>= 1.9.1)
-Encoding: UTF-8
-LazyData: true
-RoxygenNote: 7.3.2
-URL: https://github.com/ThinkR-open/signature.r
-BugReports: https://github.com/ThinkR-open/signature.r/issues
 Suggests: 
     spelling,
     testthat (>= 3.0.0)
 Config/testthat/edition: 3
+Encoding: UTF-8
 Language: en-US
+LazyData: true
+RoxygenNote: 7.3.2
diff --git a/NAMESPACE b/NAMESPACE
index 8218a94..dcbc301 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -2,12 +2,17 @@
 
 export(run_app)
 import(shiny)
+importFrom(bslib,bs_add_rules)
+importFrom(bslib,bs_theme)
+importFrom(bslib,input_dark_mode)
 importFrom(golem,activate_js)
 importFrom(golem,add_resource_path)
 importFrom(golem,bundle_resources)
 importFrom(golem,favicon)
 importFrom(golem,with_golem_options)
+importFrom(sass,sass_file)
 importFrom(shiny,HTML)
+importFrom(shiny,NS)
 importFrom(shiny,column)
 importFrom(shiny,shinyApp)
 importFrom(shiny,tagAppendAttributes)
diff --git a/R/app_server.R b/R/app_server.R
index f431311..4001fac 100644
--- a/R/app_server.R
+++ b/R/app_server.R
@@ -5,5 +5,5 @@
 #' @import shiny
 #' @noRd
 app_server <- function(input, output, session) {
-  # Your application server logic
+  mod_navbar_server("navbar")
 }
diff --git a/R/app_ui.R b/R/app_ui.R
index b3e77fc..740a386 100644
--- a/R/app_ui.R
+++ b/R/app_ui.R
@@ -9,8 +9,10 @@ app_ui <- function(request) {
     # Leave this function for adding external resources
     golem_add_external_resources(),
     # Your application UI logic
-    fluidPage(
-      h1("signature.r")
+    fixedPage(
+      theme = signature_theme(),
+      mod_navbar_ui("navbar"),
+      div()
     )
   )
 }
@@ -39,3 +41,21 @@ golem_add_external_resources <- function() {
     # for example, you can add shinyalert::useShinyalert()
   )
 }
+
+#' signature_theme
+#'
+#' @importFrom bslib bs_theme bs_add_rules
+#' @importFrom sass sass_file
+#'
+#' @noRd
+signature_theme <- function() {
+  bs_theme(
+    version = 5,
+    primary = "#b8b8dc",
+    secondary = "#f15522",
+    info = "#494955"
+  ) |>
+    bs_add_rules(
+      sass_file(app_sys("app", "www", "signature.scss"))
+    )
+}
diff --git a/R/mod_navbar.R b/R/mod_navbar.R
new file mode 100644
index 0000000..39cd7c0
--- /dev/null
+++ b/R/mod_navbar.R
@@ -0,0 +1,42 @@
+#' navbar UI Function
+#'
+#' @description A shiny Module.
+#'
+#' @param id,input,output,session Internal parameters for {shiny}.
+#'
+#' @noRd
+#'
+#' @importFrom shiny NS tagList
+#' @importFrom bslib input_dark_mode
+mod_navbar_ui <- function(id) {
+  ns <- NS(id)
+  tagList(
+    tags$nav(
+      class = "navbar navbar-light bg-transparent",
+      div(
+        class = "container-fluid",
+        a(
+          class = "navbar-brand",
+          href = "/",
+          "Signature.r"
+        ),
+        input_dark_mode()
+      )
+    )
+  )
+}
+
+#' navbar Server Functions
+#'
+#' @noRd
+mod_navbar_server <- function(id) {
+  moduleServer(id, function(input, output, session) {
+    ns <- session$ns
+  })
+}
+
+## To be copied in the UI
+# mod_navbar_ui("navbar")
+
+## To be copied in the server
+# mod_navbar_server("navbar)
diff --git a/dev/02_dev.R b/dev/02_dev.R
index a14d967..394f82c 100644
--- a/dev/02_dev.R
+++ b/dev/02_dev.R
@@ -20,8 +20,7 @@ attachment::att_amend_desc()
 
 ## Add modules ----
 ## Create a module infrastructure in R/
-golem::add_module(name = "name_of_module1", with_test = TRUE) # Name of the module
-golem::add_module(name = "name_of_module2", with_test = TRUE) # Name of the module
+golem::add_module(name = "navbar", with_test = TRUE)
 
 ## Add helper functions ----
 ## Creates fct_* and utils_*
diff --git a/dev/config_attachment.yaml b/dev/config_attachment.yaml
new file mode 100644
index 0000000..46e24ec
--- /dev/null
+++ b/dev/config_attachment.yaml
@@ -0,0 +1,12 @@
+path.n: NAMESPACE
+path.d: DESCRIPTION
+dir.r: R
+dir.v: vignettes
+dir.t: tests
+extra.suggests: ~
+pkg_ignore: ~
+document: yes
+normalize: yes
+inside_rmd: no
+must.exist: yes
+check_if_suggests_is_installed: yes
diff --git a/inst/app/www/signature.scss b/inst/app/www/signature.scss
new file mode 100644
index 0000000..d7eec44
--- /dev/null
+++ b/inst/app/www/signature.scss
@@ -0,0 +1,69 @@
+@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Permanent+Marker&display=swap");
+
+$info: #494955;
+$close: #ff5f57;
+$minimize: #febc2e;
+$zoom: #27c840;
+
+body {
+  font-family: "Lato", sans-serif;
+}
+
+.navbar {
+  padding: 1.5em 0;
+
+  .navbar-brand {
+    font-size: 1.5em;
+    font-family: "Permanent Marker", cursive;
+    pointer-events: none;
+    color: $secondary;
+  }
+}
+
+body {
+  font-family: "Lato", sans-serif;
+}
+
+.navbar {
+  padding: 1.5em 0;
+
+  .navbar-brand {
+    font-size: 1.5em;
+    font-family: "Permanent Marker", cursive;
+    pointer-events: none;
+    color: $secondary;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  grid-gap: 7px;
+  height: 20px;
+}
+
+.buttons-default {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.close {
+  @extend .buttons-default;
+  background: $close;
+  border: 1px solid $close;
+}
+
+.minimize {
+  @extend .buttons-default;
+  background: $minimize;
+  border: 1px solid $minimize;
+}
+
+.zoom {
+  @extend .buttons-default;
+  background: $zoom;
+  border: 1px solid $zoom;
+}
diff --git a/tests/testthat/test-mod_navbar.R b/tests/testthat/test-mod_navbar.R
new file mode 100644
index 0000000..cb6ae59
--- /dev/null
+++ b/tests/testthat/test-mod_navbar.R
@@ -0,0 +1,38 @@
+testServer(
+  mod_navbar_server,
+  # Add here your module params
+  args = list()
+  , {
+    ns <- session$ns
+    expect_true(
+      inherits(ns, "function")
+    )
+    expect_true(
+      grepl(id, ns(""))
+    )
+    expect_true(
+      grepl("test", ns("test"))
+    )
+    # Here are some examples of tests you can
+    # run on your module
+    # - Testing the setting of inputs
+    # session$setInputs(x = 1)
+    # expect_true(input$x == 1)
+    # - If ever your input updates a reactiveValues
+    # - Note that this reactiveValues must be passed
+    # - to the testServer function via args = list()
+    # expect_true(r$x == 1)
+    # - Testing output
+    # expect_true(inherits(output$tbl$html, "html"))
+})
+ 
+test_that("module ui works", {
+  ui <- mod_navbar_ui(id = "test")
+  golem::expect_shinytaglist(ui)
+  # Check that formals have not been removed
+  fmls <- formals(mod_navbar_ui)
+  for (i in c("id")){
+    expect_true(i %in% names(fmls))
+  }
+})
+