diff --git a/src/App/Templates/Table.purs b/src/App/Templates/Table.purs
index 556f773..166b002 100644
--- a/src/App/Templates/Table.purs
+++ b/src/App/Templates/Table.purs
@@ -50,7 +50,7 @@ owned_domains domains_i_exclusively_own action_enter_domain action_transfer_doma
     then Web.table [] [ owned_domains_table_header
                       , HH.tbody_ $ map owned_domain_row domains_i_exclusively_own
                       ]
-    else Bulma.p "No domain yet."
+    else Web.p "No domain yet."
   where
     owned_domains_table_header :: HH.HTML w i
     owned_domains_table_header
@@ -63,7 +63,7 @@ owned_domains domains_i_exclusively_own action_enter_domain action_transfer_doma
     owned_domain_row domain = HH.tr_
       [ HH.td_ [ Button.btn domain.name (action_enter_domain domain.name) ]
       , case domain.transfer_key of
-          Just key -> HH.td_ [ Bulma.p "Token key:", Bulma.p key ]
+          Just key -> HH.td_ [ Web.p "Token key:", Web.p key ]
           Nothing  -> HH.td_ [ Button.btn_abbr "Generate a token to transfer the ownership of a domain." "Transfer" (action_transfer_domain domain.name) ]
       , HH.td_ [ Button.btn_abbr "Generate a token to share the ownership of a domain." "Share" (action_share_domain domain.name) ]
       , HH.td_ [ Button.alert_btn_abbr "Delete the domain. This will remove all zone data and the domain won't be served anymore." "Delete" (action_delete_domain domain.name) ]
@@ -75,7 +75,7 @@ shared_domains domains_i_share action_enter_domain action_unshare_domain action_
     then Web.table [] [ shared_domains_table_header
                       , HH.tbody_ $ map shared_domain_row domains_i_share
                       ]
-    else Bulma.p "No domain yet."
+    else Web.p "No domain yet."
   where
     shared_domains_table_header :: HH.HTML w i
     shared_domains_table_header
@@ -96,7 +96,7 @@ shared_domains domains_i_share action_enter_domain action_unshare_domain action_
 
 -- | Render all Resource Records.
 resource_records :: forall w i. Array ResourceRecord -> (Int -> i) -> (Int -> i) -> (Int -> i) -> HH.HTML w i
-resource_records [] _ _ _ = Bulma.box [Bulma.zone_rr_title "Resource records", Bulma.subtitle "No records for now"]
+resource_records [] _ _ _ = Web.box [Bulma.zone_rr_title "Resource records", Bulma.subtitle "No records for now"]
 resource_records records action_create_or_update_rr action_delete_rr action_new_token
   = HH.div_ $
          (rr_box [bg_color_ro] tag_soa      soa_table_header       table_content        all_soa_rr)
@@ -143,7 +143,7 @@ resource_records records action_create_or_update_rr action_delete_rr action_new_
          -> Array (HH.HTML w i)
   rr_box colors title header dp rrs =
     if A.length rrs > 0
-    then [ Bulma.box_with_tag colors title [Web.table_ [C.margin_left 3] [] [header, dp rrs]] ]
+    then [ Web.box_with_tag colors title [Web.table_ [C.margin_left 3] [] [header, dp rrs]] ]
     else []
   --title_col_props = C.is 1
 
@@ -176,96 +176,96 @@ resource_records records action_create_or_update_rr action_delete_rr action_new_
         , HH.td_ [ HH.text $ maybe "" show rr.minttl  ]
         ]
       "SRV" ->
-        [ HH.td_ [ Bulma.p rr.name ]
-        , HH.td_ [ Bulma.p $ maybe "tcp" show rr.protocol ]
-        , HH.td_ [ Bulma.p rr.target ]
-        , HH.td_ [ Bulma.p $ maybe "" show rr.port ]
-        , HH.td_ [ Bulma.p $ show rr.ttl ]
-        , HH.td_ [ Bulma.p $ maybe "" show rr.priority ]
-        , HH.td_ [ Bulma.p $ maybe "" show rr.weight ]
+        [ HH.td_ [ Web.p rr.name ]
+        , HH.td_ [ Web.p $ maybe "tcp" show rr.protocol ]
+        , HH.td_ [ Web.p rr.target ]
+        , HH.td_ [ Web.p $ maybe "" show rr.port ]
+        , HH.td_ [ Web.p $ show rr.ttl ]
+        , HH.td_ [ Web.p $ maybe "" show rr.priority ]
+        , HH.td_ [ Web.p $ maybe "" show rr.weight ]
         , if rr.readonly
           then HH.td_ [ Button.btn_readonly ]
           else HH.td_ [ Button.btn_modify (action_create_or_update_rr rr.rrid), Button.btn_delete (action_delete_rr rr.rrid) ]
         ]
       "CAA"  ->
-        [ HH.td_ [ Bulma.p rr.name ]
-        , HH.td_ [ Bulma.p $ show rr.ttl ]
+        [ HH.td_ [ Web.p rr.name ]
+        , HH.td_ [ Web.p $ show rr.ttl ]
         ] <> case rr.caa of
           Just caa ->
-            [ HH.td_ [ Bulma.p $ show caa.flag ]
-            , HH.td_ [ Bulma.p $ show caa.tag ]
-            , HH.td_ [ Bulma.p caa.value ]
+            [ HH.td_ [ Web.p $ show caa.flag ]
+            , HH.td_ [ Web.p $ show caa.tag ]
+            , HH.td_ [ Web.p caa.value ]
             , if rr.readonly
               then HH.td_ [ Button.btn_readonly ]
               else HH.td_ [ Button.btn_modify (action_create_or_update_rr rr.rrid), Button.btn_delete (action_delete_rr rr.rrid) ]
             ]
-          Nothing -> [Bulma.p "Problem: there is no CAA data." ]
+          Nothing -> [Web.p "Problem: there is no CAA data." ]
       "SPF"  ->
-        [ HH.td_ [ Bulma.p rr.name ]
-        , HH.td_ [ Bulma.p $ show rr.ttl ]
-        -- , HH.td_ [ Bulma.p $ maybe "(default)" id rr.v ] -- For now, version isn't displayed.
-        , HH.td_ [ Bulma.p $ maybe "" (A.fold <<< A.intersperse " " <<< map show_mechanism) rr.mechanisms ]
-        , HH.td_ [ Bulma.p $ maybe "" (A.fold <<< A.intersperse " " <<< map show_modifier)  rr.modifiers ]
-        , HH.td_ [ Bulma.p $ maybe "" fancy_qualifier_display rr.q ]
+        [ HH.td_ [ Web.p rr.name ]
+        , HH.td_ [ Web.p $ show rr.ttl ]
+        -- , HH.td_ [ Web.p $ maybe "(default)" id rr.v ] -- For now, version isn't displayed.
+        , HH.td_ [ Web.p $ maybe "" (A.fold <<< A.intersperse " " <<< map show_mechanism) rr.mechanisms ]
+        , HH.td_ [ Web.p $ maybe "" (A.fold <<< A.intersperse " " <<< map show_modifier)  rr.modifiers ]
+        , HH.td_ [ Web.p $ maybe "" fancy_qualifier_display rr.q ]
         , if rr.readonly
           then HH.td_ [ Button.btn_readonly ]
           else HH.td_ [ Button.btn_modify (action_create_or_update_rr rr.rrid), Button.btn_delete (action_delete_rr rr.rrid) ]
         ]
       "DKIM"  ->
-        [ HH.td_ [ Bulma.p rr.name ]
-        , HH.td_ [ Bulma.p $ show rr.ttl ]
+        [ HH.td_ [ Web.p rr.name ]
+        , HH.td_ [ Web.p $ show rr.ttl ]
         ] <> case rr.dkim of
           Just dkim ->
             [
-            -- , HH.td_ [ Bulma.p $ maybe "(default)" id rr.v ] -- For now, version isn't displayed. Assume DKIM1.
-              HH.td_ [ Bulma.p $ maybe "" show dkim.h ]
-            , HH.td_ [ Bulma.p $ maybe "" show dkim.k ]
-            , HH.td_ [ Bulma.p $ CP.take 20    dkim.p ]
-            , HH.td_ [ Bulma.p $ fromMaybe ""  dkim.n ]
+            -- , HH.td_ [ Web.p $ maybe "(default)" id rr.v ] -- For now, version isn't displayed. Assume DKIM1.
+              HH.td_ [ Web.p $ maybe "" show dkim.h ]
+            , HH.td_ [ Web.p $ maybe "" show dkim.k ]
+            , HH.td_ [ Web.p $ CP.take 20    dkim.p ]
+            , HH.td_ [ Web.p $ fromMaybe ""  dkim.n ]
             , if rr.readonly
               then HH.td_ [ Button.btn_readonly ]
               else HH.td_ [ Button.btn_modify (action_create_or_update_rr rr.rrid), Button.btn_delete (action_delete_rr rr.rrid) ]
             ]
-          Nothing -> [Bulma.p "Problem: there is no DKIM data." ]
+          Nothing -> [Web.p "Problem: there is no DKIM data." ]
       "DMARC"  ->
-        [ HH.td_ [ Bulma.p rr.name ]
-        , HH.td_ [ Bulma.p $ show rr.ttl ]
+        [ HH.td_ [ Web.p rr.name ]
+        , HH.td_ [ Web.p $ show rr.ttl ]
         ] <> case rr.dmarc of
           Just dmarc ->
             [
-            -- , HH.td_ [ Bulma.p $ maybe "(default)" id rr.v ] -- For now, version isn't displayed. Assume DMARC1.
-              HH.td_ [ Bulma.p $ show dmarc.p               ]
-            , HH.td_ [ Bulma.p $ maybe "" show dmarc.sp     ]
-            , HH.td_ [ Bulma.p $ maybe "" show dmarc.adkim  ]
-            , HH.td_ [ Bulma.p $ maybe "" show dmarc.aspf   ]
-            , HH.td_ [ Bulma.p $ maybe "" show dmarc.pct    ]
-            , HH.td_ [ Bulma.p $ maybe "" show dmarc.fo     ]
-            , HH.td_ [ Bulma.p $ maybe "" show dmarc.ri     ]
+            -- , HH.td_ [ Web.p $ maybe "(default)" id rr.v ] -- For now, version isn't displayed. Assume DMARC1.
+              HH.td_ [ Web.p $ show dmarc.p               ]
+            , HH.td_ [ Web.p $ maybe "" show dmarc.sp     ]
+            , HH.td_ [ Web.p $ maybe "" show dmarc.adkim  ]
+            , HH.td_ [ Web.p $ maybe "" show dmarc.aspf   ]
+            , HH.td_ [ Web.p $ maybe "" show dmarc.pct    ]
+            , HH.td_ [ Web.p $ maybe "" show dmarc.fo     ]
+            , HH.td_ [ Web.p $ maybe "" show dmarc.ri     ]
             -- TODO? rua & ruf
             -- , HH.td_ [ ] -- For now, assume AFRF.
             , if rr.readonly
               then HH.td_ [ Button.btn_readonly ]
               else HH.td_ [ Button.btn_modify (action_create_or_update_rr rr.rrid), Button.btn_delete (action_delete_rr rr.rrid) ]
             ]
-          Nothing -> [Bulma.p "Problem: there is no DMARC data." ]
+          Nothing -> [Web.p "Problem: there is no DMARC data." ]
       "MX"  ->
-        [ HH.td_ [ Bulma.p rr.name ]
-        , HH.td_ [ Bulma.p $ show rr.ttl ]
-        , HH.td_ [ Bulma.p $ maybe "" show rr.priority ]
-        , HH.td_ [ Bulma.p rr.target ]
+        [ HH.td_ [ Web.p rr.name ]
+        , HH.td_ [ Web.p $ show rr.ttl ]
+        , HH.td_ [ Web.p $ maybe "" show rr.priority ]
+        , HH.td_ [ Web.p rr.target ]
         , if rr.readonly
           then HH.td_ [ Button.btn_readonly ]
           else HH.td_ [ Button.btn_modify (action_create_or_update_rr rr.rrid), Button.btn_delete (action_delete_rr rr.rrid) ]
         ]
       _     ->
         [ txt_name rr.rrtype
-        , HH.td_ [ Bulma.p rr.name ]
-        , HH.td_ [ Bulma.p $ show rr.ttl ]
-        , HH.td_ [ Bulma.p rr.target ]
+        , HH.td_ [ Web.p rr.name ]
+        , HH.td_ [ Web.p $ show rr.ttl ]
+        , HH.td_ [ Web.p rr.target ]
         ] <> if rr.readonly
           then [ HH.td_ [ Button.btn_readonly ] ]
           else [ HH.td_ [ Button.btn_modify (action_create_or_update_rr rr.rrid), Button.btn_delete (action_delete_rr rr.rrid) ]
-               , HH.td_ [ maybe (show_token_or_btn rr) Bulma.p rr.token ]
+               , HH.td_ [ maybe (show_token_or_btn rr) Web.p rr.token ]
                ]
 
   show_token_or_btn rr =
diff --git a/src/Bulma.purs b/src/Bulma.purs
index 63ab4f6..e604e3b 100644
--- a/src/Bulma.purs
+++ b/src/Bulma.purs
@@ -15,20 +15,6 @@ import Halogen.HTML.Core (AttrName(..))
 outside_link :: forall w i. Array HH.ClassName -> String -> String -> HH.HTML w i
 outside_link classes url title = HH.a [ HP.classes classes, HP.target "_blank", HP.href url ] [ HH.text title ]
 
-columns :: forall (w :: Type) (i :: Type).
-  Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
-columns classes = HH.div [ HP.classes ([C.columns] <> classes) ]
-
-columns_ :: forall (w :: Type) (i :: Type). Array (HH.HTML w i) -> HH.HTML w i
-columns_ = columns []
-
-column :: forall (w :: Type) (i :: Type).
-  Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
-column classes = HH.div [ HP.classes ([C.column] <> classes) ]
-
-column_ :: forall (w :: Type) (i :: Type). Array (HH.HTML w i) -> HH.HTML w i
-column_ = column []
-
 zone_rr_title :: forall (w :: Type) (a :: Type). String -> HH.HTML w a
 zone_rr_title title
   = HH.h3 [ HP.classes [C.title, C.has_text_light, C.has_background_dark] ]
@@ -37,27 +23,6 @@ zone_rr_title title
 subtitle :: forall (w :: Type) (a :: Type). String -> HH.HTML w a
 subtitle title = HH.h2 [ HP.classes [C.subtitle, C.is4] ] [ HH.text title ]
 
-hdiv :: forall (w :: Type) (a :: Type). Array (HH.HTML w a) -> HH.HTML w a
-hdiv = HH.div [ HP.classes [HH.ClassName "mt-5"] ]
-
---offcolumn :: forall (w :: Type) (a :: Type).
---  Int -> Int -> Array (HH.HTML w a) -> HH.HTML w a
---offcolumn 0      size = HH.div [ HP.classes [HH.ClassName ("mt-"<>show size)] ]
---offcolumn offset size
---  = column [ HH.ClassName ("is-offset-" <> (show offset) <> " is-" <> (show size)) ]
-
-textarea_ :: forall w i. Array HH.ClassName -> String -> String -> (String -> i) -> HH.HTML w i
-textarea_ classes placeholder value action
-  = HH.textarea
-      [ HE.onValueInput action
-      , HP.value value
-      , HP.placeholder placeholder
-      , HP.classes $ [C.textarea] <> classes
-      ]
-
-textarea :: forall w i. String ->  String -> (String -> i) -> HH.HTML w i
-textarea placeholder value action = textarea_ [] placeholder value action
-
 -- | Create a `level`, different components that should appear on the same horizontal line.
 -- | First argument, elements that should appear on the left, second on the right.
 level :: forall w i. Array (HH.HTML w i) -> Array (HH.HTML w i) -> HH.HTML w i
@@ -73,75 +38,9 @@ section_small = HH.section [ HP.classes [C.section, C.is_small] ]
 section_medium :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
 section_medium = HH.section [ HP.classes [C.section, C.medium] ]
 
-box :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-box = HH.div [HP.classes [C.box]]
-
-box_ :: forall w i. Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
-box_ classes = HH.div [HP.classes $ [C.box] <> classes]
-
-hero :: forall w i. String -> String -> HH.HTML w i
-hero _title _subtitle
-  = HH.section [ HP.classes [C.hero, C.is_info, C.is_small] ]
-      [ HH.div [ HP.classes [C.hero_body] ]
-          [ HH.p [ HP.classes [C.title] ] [ HH.text _title ]
-          , HH.p [ HP.classes [C.subtitle] ] [ HH.text _subtitle ]
-          ]
-      ]
-
-small_hero :: forall w i. String -> String -> HH.HTML w i
-small_hero _title _subtitle =
-  HH.section [ HP.classes [C.hero, C.is_info, C.is_small] ]
-    [ HH.div [ HP.classes [C.hero_body] ]
-        [ HH.div [ HP.classes [C.container, C.has_text_centered] ]
-            [ HH.p [ HP.classes [C.title] ]    [ HH.text _title ]
-            , HH.p [ HP.classes [C.subtitle] ] [ HH.text _subtitle ]
-            ]
-        ]
-    ]
-
-hero_danger_txt :: forall w i. String -> String -> HH.HTML w i
-hero_danger_txt _title _subtitle
-  = hero_danger [ HH.text _title ] [ HH.text _subtitle ]
-
-hero_danger :: forall w i. Array (HH.HTML w i) -> Array (HH.HTML w i) -> HH.HTML w i
-hero_danger _title _subtitle
-  = HH.section [ HP.classes [C.hero, C.is_danger, C.is_small] ]
-      [ HH.div [ HP.classes [C.hero_body] ]
-          [ HH.p [ HP.classes [C.title] ] _title
-          , HH.p [ HP.classes [C.subtitle] ] _subtitle
-          ]
-      ]
-
-header :: forall w i. String -> String -> HH.HTML w i
-header = hero
-
-container :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-container = HH.div [HP.classes [C.container, C.is_info]]
-
 data_target :: forall r i. String -> HP.IProp r i
 data_target = HP.attr (AttrName "data-target")
 
-modal_ :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-modal_ = HH.div [HP.classes [C.modal, C.is_active]]
-modal_background :: forall w i. HH.HTML w i
-modal_background = HH.div [HP.classes [C.modal_background]] []
-modal_card_large :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-modal_card_large = HH.div [HP.classes [C.modal_card, C.is_large]]
-modal_header :: forall w i. String -> HH.HTML w i
-modal_header title = HH.header [HP.classes [C.modal_card_head]]
-  [ HH.p [HP.classes [C.modal_card_title]] [HH.text title]
-  ]
-modal_body :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-modal_body = HH.section [HP.classes [C.modal_card_body]]
-modal_foot :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-modal_foot = HH.div [HP.classes [C.modal_card_foot]]
-
-cancel_button :: forall w i. i -> HH.HTML w i
-cancel_button action
-  = HH.button [ HP.classes [C.button]
-              , HE.onClick \_ -> action
-              ] [HH.text "Cancel"]
-
 tile :: forall w i. Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
 tile classes = HH.div [HP.classes ([C.tile] <> classes)]
 
@@ -154,78 +53,5 @@ tile_danger classes = tile $ [C.is_danger, C.notification] <> classes
 tile_warning :: forall w i. Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
 tile_warning classes = tile $ [C.is_warning, C.notification] <> classes
 
-article_ :: forall w i. Array HH.ClassName -> HH.HTML w i -> HH.HTML w i -> HH.HTML w i
-article_ classes head body = HH.article [HP.classes $ [C.message] <> classes]
-  [ HH.div [HP.classes [C.message_header]] [head]
-  , HH.div [HP.classes [C.message_body]  ] [body]
-  ]
-
-article :: forall w i. HH.HTML w i -> HH.HTML w i -> HH.HTML w i
-article head body = article_ [] head body
-
-error_message :: forall w i. HH.HTML w i -> HH.HTML w i -> HH.HTML w i
-error_message head body = article_ [C.is_danger] head body
-
--- | `modal`: create a modal by providing a few things:
--- | - a title (a simple String)
--- | - a body (`HTML` content)
--- | - a footer (`HTML` content)
-modal :: forall w i. String -> Array (HH.HTML w i) -> Array (HH.HTML w i) -> HH.HTML w i
-modal title body foot =
-  modal_
-    [ modal_background
-    , modal_card_large [modal_header title, modal_body body]
-    , modal_foot foot
-    ]
-
 tag_light_info :: forall w i. String -> HH.HTML w i
 tag_light_info str = HH.span [HP.classes [C.tag, C.is_info, C.is_light]] [HH.text str]
-
-div_large_content :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-div_large_content content = HH.div [HP.classes [C.is_large, C.content]] content
-
-div_content :: forall w i. Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
-div_content classes content = HH.div [HP.classes ([C.content] <> classes)] content
-
-explanation :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-explanation content = HH.blockquote [HP.classes [HH.ClassName "justified"]] content
-
-quote :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-quote content = div_content [] [ explanation content ]
-
-simple_quote :: forall w i. String -> HH.HTML w i
-simple_quote content = quote [ p content ]
-
--- | Box with tags.
--- |```
--- |box_with_tag [C.has_background_danger_light] some_tag [Bulma.p "Hello"]
--- |```
-box_with_tag :: forall w action.
-  Array HH.ClassName            -- css classes (like the color)
-  -> HH.HTML w action           -- tag (title for the box)
-  -> Array (HH.HTML w action)   -- box content
-  -> HH.HTML w action
-box_with_tag colors tag xs
-  = box_
-    ([C.no_padding_left, C.no_padding_top] <> colors)
-    [tag, HH.div [HP.classes [C.restore_padding_left, C.restore_padding_top]] xs]
-
--- GENERIC HTML API
-
-code :: forall w i. String -> HH.HTML w i
-code str = HH.code_ [ HH.text str ]
-
-text :: forall w i. String -> HH.HTML w i
-text = HH.text
-
-p :: forall w i. String -> HH.HTML w i
-p str = HH.p_ [ HH.text str ]
-
-p_ :: forall w i. Array HH.ClassName -> String -> HH.HTML w i
-p_ classes str = HH.p [HP.classes classes] [ HH.text str ]
-
-strong :: forall w i. String -> HH.HTML w i
-strong str = HH.strong_ [ HH.text str ]
-
-hr :: forall w i. HH.HTML w i
-hr = HH.hr_
diff --git a/src/Web.purs b/src/Web.purs
index 726abf8..3c79f63 100644
--- a/src/Web.purs
+++ b/src/Web.purs
@@ -2,22 +2,32 @@
 -- | to have a consistent style through all the website.
 module Web
   ( module Bulma
+  , module Web.Basics
+  , module Web.Box
   , module Web.Button
   , module Web.Checkbox
+  , module Web.Column
   , module Web.Field
   , module Web.Header
+  , module Web.Hero
   , module Web.Input
+  , module Web.Modal
   , module Web.Notification
-  , module Web.Table
   , module Web.Tab
+  , module Web.Table
   , module Web.Tag
   ) where
 
-import Web.Button (alert_btn, alert_btn_abbr, btn, btn_, btn_abbr, btn_abbr_, btn_add, btn_delete, btn_delete_ro, btn_modify, btn_modify_ro, btn_readonly, btn_ro, btn_save, btn_validation, btn_validation_, delete_btn)
+import Web.Basics
+import Web.Box
+import Web.Button (alert_btn, alert_btn_abbr, btn, btn_, btn_abbr, btn_abbr_, btn_add, btn_delete, btn_delete_ro, btn_modify, btn_modify_ro, btn_readonly, btn_ro, btn_save, btn_validation, btn_validation_, cancel_button, delete_btn)
 import Web.Checkbox (checkbox)
+import Web.Column (column, column_, columns, columns_)
 import Web.Field (btn_labeled, div_field, div_field_, div_field_content, div_field_label, error_field_entry, field_entry, new_domain_field, option, select, selection, selection', selection_field, selection_field', selection_field'', side_text_above_input)
 import Web.Header (h1, h3, h4)
+import Web.Hero (hero, hero_danger, hero_danger_txt, small_hero)
 import Web.Input (box_input, box_input_, box_password, box_password_, email_input, field_inner, input_classes, input_with_side_text, password_input, password_input_confirmation, password_input_new, render_input, token_input, username_input)
+import Web.Modal (modal, modal_, modal_background, modal_body, modal_card_large, modal_foot, modal_header)
 import Web.Notification (error_box, notification, notification', notification_block', notification_danger, notification_danger', notification_danger_block', notification_primary, notification_primary', notification_success, notification_warning, notification_warning')
 import Web.Table (table, table_)
 import Web.Tab (fancy_tabs, tab_entry, tabs)
diff --git a/src/Web/Basics.purs b/src/Web/Basics.purs
new file mode 100644
index 0000000..7dee52f
--- /dev/null
+++ b/src/Web/Basics.purs
@@ -0,0 +1,72 @@
+module Web.Basics where
+
+import Prelude (($), (<>))
+
+import Halogen.HTML as HH
+import Halogen.HTML.Events as HE
+import Halogen.HTML.Properties as HP
+
+import CSSClasses as C
+
+code :: forall w i. String -> HH.HTML w i
+code str = HH.code_ [ HH.text str ]
+
+text :: forall w i. String -> HH.HTML w i
+text = HH.text
+
+p :: forall w i. String -> HH.HTML w i
+p str = HH.p_ [ HH.text str ]
+
+p_ :: forall w i. Array HH.ClassName -> String -> HH.HTML w i
+p_ classes str = HH.p [HP.classes classes] [ HH.text str ]
+
+strong :: forall w i. String -> HH.HTML w i
+strong str = HH.strong_ [ HH.text str ]
+
+hr :: forall w i. HH.HTML w i
+hr = HH.hr_
+
+div_large_content :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+div_large_content content = HH.div [HP.classes [C.is_large, C.content]] content
+
+div_content :: forall w i. Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
+div_content classes content = HH.div [HP.classes ([C.content] <> classes)] content
+
+explanation :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+explanation content = HH.blockquote [HP.classes [HH.ClassName "justified"]] content
+
+quote :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+quote content = div_content [] [ explanation content ]
+
+simple_quote :: forall w i. String -> HH.HTML w i
+simple_quote content = quote [ p content ]
+
+article_ :: forall w i. Array HH.ClassName -> HH.HTML w i -> HH.HTML w i -> HH.HTML w i
+article_ classes head body = HH.article [HP.classes $ [C.message] <> classes]
+  [ HH.div [HP.classes [C.message_header]] [head]
+  , HH.div [HP.classes [C.message_body]  ] [body]
+  ]
+
+article :: forall w i. HH.HTML w i -> HH.HTML w i -> HH.HTML w i
+article head body = article_ [] head body
+
+container :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+container = HH.div [HP.classes [C.container, C.is_info]]
+
+hdiv :: forall (w :: Type) (a :: Type). Array (HH.HTML w a) -> HH.HTML w a
+hdiv = HH.div [ HP.classes [HH.ClassName "mt-5"] ]
+
+error_message :: forall w i. HH.HTML w i -> HH.HTML w i -> HH.HTML w i
+error_message head body = article_ [C.is_danger] head body
+
+textarea_ :: forall w i. Array HH.ClassName -> String -> String -> (String -> i) -> HH.HTML w i
+textarea_ classes placeholder value action
+  = HH.textarea
+      [ HE.onValueInput action
+      , HP.value value
+      , HP.placeholder placeholder
+      , HP.classes $ [C.textarea] <> classes
+      ]
+
+textarea :: forall w i. String ->  String -> (String -> i) -> HH.HTML w i
+textarea placeholder value action = textarea_ [] placeholder value action
diff --git a/src/Web/Box.purs b/src/Web/Box.purs
new file mode 100644
index 0000000..d2db7fa
--- /dev/null
+++ b/src/Web/Box.purs
@@ -0,0 +1,28 @@
+module Web.Box where
+
+import Prelude
+
+import Halogen.HTML as HH
+import Halogen.HTML.Properties as HP
+
+import CSSClasses as C
+
+box :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+box = HH.div [HP.classes [C.box]]
+
+box_ :: forall w i. Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
+box_ classes = HH.div [HP.classes $ [C.box] <> classes]
+
+-- | Box with tags.
+-- |```
+-- |box_with_tag [C.has_background_danger_light] some_tag [Bulma.p "Hello"]
+-- |```
+box_with_tag :: forall w action.
+  Array HH.ClassName            -- css classes (like the color)
+  -> HH.HTML w action           -- tag (title for the box)
+  -> Array (HH.HTML w action)   -- box content
+  -> HH.HTML w action
+box_with_tag colors tag xs
+  = box_
+    ([C.no_padding_left, C.no_padding_top] <> colors)
+    [tag, HH.div [HP.classes [C.restore_padding_left, C.restore_padding_top]] xs]
diff --git a/src/Web/Button.purs b/src/Web/Button.purs
index c883c11..cf7761a 100644
--- a/src/Web/Button.purs
+++ b/src/Web/Button.purs
@@ -15,6 +15,7 @@ module Web.Button
   , btn_save
   , btn_validation
   , btn_validation_
+  , cancel_button
   , delete_btn
   ) where
 
@@ -97,3 +98,9 @@ alert_btn title action = btn_ [C.is_danger] title action
 
 delete_btn :: forall w i. i -> HH.HTML w i
 delete_btn action = HH.button [HE.onClick \_ -> action, HP.classes [C.delete]] []
+
+cancel_button :: forall w i. i -> HH.HTML w i
+cancel_button action
+  = HH.button [ HP.classes [C.button]
+              , HE.onClick \_ -> action
+              ] [HH.text "Cancel"]
diff --git a/src/Web/Column.purs b/src/Web/Column.purs
new file mode 100644
index 0000000..f0ca156
--- /dev/null
+++ b/src/Web/Column.purs
@@ -0,0 +1,28 @@
+module Web.Column where
+
+import Prelude ((<>))
+
+import Halogen.HTML as HH
+import Halogen.HTML.Properties as HP
+
+import CSSClasses as C
+
+columns :: forall (w :: Type) (i :: Type).
+  Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
+columns classes = HH.div [ HP.classes ([C.columns] <> classes) ]
+
+columns_ :: forall (w :: Type) (i :: Type). Array (HH.HTML w i) -> HH.HTML w i
+columns_ = columns []
+
+column :: forall (w :: Type) (i :: Type).
+  Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
+column classes = HH.div [ HP.classes ([C.column] <> classes) ]
+
+column_ :: forall (w :: Type) (i :: Type). Array (HH.HTML w i) -> HH.HTML w i
+column_ = column []
+
+--offcolumn :: forall (w :: Type) (a :: Type).
+--  Int -> Int -> Array (HH.HTML w a) -> HH.HTML w a
+--offcolumn 0      size = HH.div [ HP.classes [HH.ClassName ("mt-"<>show size)] ]
+--offcolumn offset size
+--  = column [ HH.ClassName ("is-offset-" <> (show offset) <> " is-" <> (show size)) ]
diff --git a/src/Web/Hero.purs b/src/Web/Hero.purs
new file mode 100644
index 0000000..4e593dc
--- /dev/null
+++ b/src/Web/Hero.purs
@@ -0,0 +1,39 @@
+module Web.Hero where
+
+import Halogen.HTML as HH
+import Halogen.HTML.Properties as HP
+
+import CSSClasses as C
+
+hero :: forall w i. String -> String -> HH.HTML w i
+hero _title _subtitle
+  = HH.section [ HP.classes [C.hero, C.is_info, C.is_small] ]
+      [ HH.div [ HP.classes [C.hero_body] ]
+          [ HH.p [ HP.classes [C.title] ] [ HH.text _title ]
+          , HH.p [ HP.classes [C.subtitle] ] [ HH.text _subtitle ]
+          ]
+      ]
+
+small_hero :: forall w i. String -> String -> HH.HTML w i
+small_hero _title _subtitle =
+  HH.section [ HP.classes [C.hero, C.is_info, C.is_small] ]
+    [ HH.div [ HP.classes [C.hero_body] ]
+        [ HH.div [ HP.classes [C.container, C.has_text_centered] ]
+            [ HH.p [ HP.classes [C.title] ]    [ HH.text _title ]
+            , HH.p [ HP.classes [C.subtitle] ] [ HH.text _subtitle ]
+            ]
+        ]
+    ]
+
+hero_danger_txt :: forall w i. String -> String -> HH.HTML w i
+hero_danger_txt _title _subtitle
+  = hero_danger [ HH.text _title ] [ HH.text _subtitle ]
+
+hero_danger :: forall w i. Array (HH.HTML w i) -> Array (HH.HTML w i) -> HH.HTML w i
+hero_danger _title _subtitle
+  = HH.section [ HP.classes [C.hero, C.is_danger, C.is_small] ]
+      [ HH.div [ HP.classes [C.hero_body] ]
+          [ HH.p [ HP.classes [C.title] ] _title
+          , HH.p [ HP.classes [C.subtitle] ] _subtitle
+          ]
+      ]
diff --git a/src/Web/Modal.purs b/src/Web/Modal.purs
new file mode 100644
index 0000000..b09f21a
--- /dev/null
+++ b/src/Web/Modal.purs
@@ -0,0 +1,38 @@
+module Web.Modal where
+
+import CSSClasses as C
+
+import Halogen.HTML as HH
+import Halogen.HTML.Properties as HP
+
+modal_background :: forall w i. HH.HTML w i
+modal_background = HH.div [HP.classes [C.modal_background]] []
+
+modal_card_large :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+modal_card_large = HH.div [HP.classes [C.modal_card, C.is_large]]
+
+modal_header :: forall w i. String -> HH.HTML w i
+modal_header title = HH.header [HP.classes [C.modal_card_head]]
+  [ HH.p [HP.classes [C.modal_card_title]] [HH.text title]
+  ]
+
+modal_body :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+modal_body = HH.section [HP.classes [C.modal_card_body]]
+
+modal_foot :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+modal_foot = HH.div [HP.classes [C.modal_card_foot]]
+
+-- | `modal`: create a modal by providing a few things:
+-- | - a title (a simple String)
+-- | - a body (`HTML` content)
+-- | - a footer (`HTML` content)
+modal :: forall w i. String -> Array (HH.HTML w i) -> Array (HH.HTML w i) -> HH.HTML w i
+modal title body foot =
+  modal_
+    [ modal_background
+    , modal_card_large [modal_header title, modal_body body]
+    , modal_foot foot
+    ]
+
+modal_ :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+modal_ = HH.div [HP.classes [C.modal, C.is_active]]