             inputs (inputs/get-inputs-from-app-state owner)
             settings (state-utils/merge-inputs project inputs project-model/notification-keys)]
         (html
-         [:div
-          [:h2 "Chatroom setup for " (vcs-url/project-name (:vcs_url project))]
-          [:div.chat-rooms
-           (for [chat-spec [{:service "Hipchat"
-                             :doc (list [:p "To get your API token, create a \"notification\" token via the "
-                                         [:a {:href "https://hipchat.com/admin/api"} "HipChat site"] "."]
-                                        [:label ;; hipchat is a special flower
-                                         {:for "hipchat-notify"}
-                                         [:input#hipchat-notify
-                                          {:type "checkbox"
-                                           :checked (:hipchat_notify settings)
-                                           ;; n.b. can't use inputs-state b/c react won't changed
-                                           ;;      checked state without a rerender
-                                           :on-change #(utils/edit-input controls-ch (conj state/project-path :hipchat_notify) % :value (not (:hipchat_notify settings)))}]
-                                         [:span "Show popups"]])
-                             :inputs [{:field :hipchat_room :placeholder "Room"}
-                                      {:field :hipchat_api_token :placeholder "API"}]
-                             :show-fixed-failed? true
-                             :settings-keys project-model/hipchat-keys}
-
-                            {:service "Campfire"
-                             :doc [:p "To get your API token, visit your company Campfire, then click \"My info\". Note that if you use your personal API token, campfire won't show the notifications to you!"]
-                             :inputs [{:field :campfire_room :placeholder "Room"}
-                                      {:field :campfire_subdomain :placeholder "Subdomain"}
-                                      {:field :campfire_token :placeholder "API"}]
-                             :show-fixed-failed? true
-                             :settings-keys project-model/campfire-keys}
-
-                            {:service "Flowdock"
-                             :doc [:p "To get your API token, visit your Flowdock, then click the \"Settings\" icon on the left. On the settings tab, click \"Team Inbox\""]
-                             :inputs [{:field :flowdock_api_token :placeholder "API"}]
-                             :show-fixed-failed? false
-                             :settings-keys project-model/flowdock-keys}
-
-                            {:service "IRC"
-                             :doc nil
-                             :inputs [{:field :irc_server :placeholder "Hostname"}
-                                      {:field :irc_channel :placeholder "Channel"}
-                                      {:field :irc_keyword :placeholder "Private Keyword"}
-                                      {:field :irc_username :placeholder "Username"}
-                                      {:field :irc_password :placeholder "Password (optional)"}]
-                             :show-fixed-failed? true
-                             :settings-keys project-model/irc-keys}
-
-                            {:service "Slack"
-                             :doc [:p "To get your Webhook URL, visit Slack's "
-                                   [:a {:href "https://my.slack.com/services/new/circleci"}
-                                    "CircleCI Integration"]
-                                   " page, choose a default channel, and click the green \"Add CircleCI Integration\" button at the bottom of the page."]
-                             :inputs [{:field :slack_webhook_url :placeholder "Webhook URL"}]
-                             :show-fixed-failed? true
-                             :settings-keys project-model/slack-keys}
-
-                            {:service "Hall"
-                             :doc [:p "To get your Room / Group API token, go to "
-                                   [:strong "Settings > Integrations > CircleCI"]
-                                   " from within your Hall Group."]
-                             :inputs [{:field :hall_room_api_token :placeholder "API"}]
-                             :show-fixed-failed? true
-                             :settings-keys project-model/hall-keys}]]
-             (chatroom-item project-id settings controls-ch chat-spec))]])))))
-
-(defn webhooks [project-data owner]
-  (om/component
-   (html
-    [:div
-     [:h2 "Webhooks for " (vcs-url/project-name (get-in project-data [:project :vcs_url]))]
-     [:div.doc
-      [:p
-       "Circle also support webhooks, which run at the end of a build. They can be configured in your "
-       [:a {:href "https://circleci.com/docs/configuration#notify" :target "_blank"}
-        "circle.yml file"] "."]]])))
+          [:section
+           [:article
+            [:h2 "Chatroom Integrations"]
+            [:div.chat-rooms
+             (for [chat-spec [{:service "Hipchat"
+                               :doc (list [:p "To get your API token, create a \"notification\" token via the "
+                                           [:a {:href "https://hipchat.com/admin/api"} "HipChat site"] "."]
+                                          [:label ;; hipchat is a special flower
+                                           {:for "hipchat-notify"}
+                                           [:input#hipchat-notify
+                                            {:type "checkbox"
+                                             :checked (:hipchat_notify settings)
+                                             ;; n.b. can't use inputs-state b/c react won't changed
+                                             ;;      checked state without a rerender
+                                             :on-change #(utils/edit-input controls-ch (conj state/project-path :hipchat_notify) % :value (not (:hipchat_notify settings)))}]
+                                           [:span "Show popups"]])
+                               :inputs [{:field :hipchat_room :placeholder "Room"}
+                                        {:field :hipchat_api_token :placeholder "API"}]
+                               :show-fixed-failed? true
+                               :settings-keys project-model/hipchat-keys}
+
+                              {:service "Campfire"
+                               :doc [:p "To get your API token, visit your company Campfire, then click \"My info\". Note that if you use your personal API token, campfire won't show the notifications to you!"]
+                               :inputs [{:field :campfire_room :placeholder "Room"}
+                                        {:field :campfire_subdomain :placeholder "Subdomain"}
+                                        {:field :campfire_token :placeholder "API"}]
+                               :show-fixed-failed? true
+                               :settings-keys project-model/campfire-keys}
+
+                              {:service "Flowdock"
+                               :doc [:p "To get your API token, visit your Flowdock, then click the \"Settings\" icon on the left. On the settings tab, click \"Team Inbox\""]
+                               :inputs [{:field :flowdock_api_token :placeholder "API"}]
+                               :show-fixed-failed? false
+                               :settings-keys project-model/flowdock-keys}
+
+                              {:service "IRC"
+                               :doc nil
+                               :inputs [{:field :irc_server :placeholder "Hostname"}
+                                        {:field :irc_channel :placeholder "Channel"}
+                                        {:field :irc_keyword :placeholder "Private Keyword"}
+                                        {:field :irc_username :placeholder "Username"}
+                                        {:field :irc_password :placeholder "Password (optional)"}]
+                               :show-fixed-failed? true
+                               :settings-keys project-model/irc-keys}
+
+                              {:service "Slack"
+                               :doc [:p "To get your Webhook URL, visit Slack's "
+                                     [:a {:href "https://my.slack.com/services/new/circleci"}
+                                      "CircleCI Integration"]
+                                     " page, choose a default channel, and click the green \"Add CircleCI Integration\" button at the bottom of the page."]
+                               :inputs [{:field :slack_webhook_url :placeholder "Webhook URL"}]
+                               :show-fixed-failed? true
+                               :settings-keys project-model/slack-keys}
+
+                              {:service "Hall"
+                               :doc [:p "To get your Room / Group API token, go to "
+                                     [:strong "Settings > Integrations > CircleCI"]
+                                     " from within your Hall Group."]
+                               :inputs [{:field :hall_room_api_token :placeholder "API"}]
+                               :show-fixed-failed? true
+                               :settings-keys project-model/hall-keys}]]
+               (chatroom-item project-id settings controls-ch chat-spec))]]
+           [:article
+            (om/build webhooks project-data)]])))))
 
 (def status-styles
   {"badge" {:label "Badge" :string ".png?style=badge"}

                :experimental (om/build experiments project-data)
                :setup (om/build dependencies project-data)
                :tests (om/build tests project-data)
                :hooks (om/build chatrooms project-data)
                :webhooks (om/build webhooks project-data)
                :badges (om/build status-badges project-data)
                :ssh (om/build ssh-keys project-data)
                :checkout (om/build checkout-ssh-keys {:project-data project-data :user user})

             :or {scope "status" label ""}} (:new-api-token project-data)
            controls-ch (om/get-shared owner [:comms :controls])]
        (html
         [:section.circle-api-page
          [:article
           [:h2 "API tokens for " (vcs-url/project-name (:vcs_url project))]
           [:div.circle-api-page-inner
            [:p "Create and revoke project-specific API tokens to access this project's details using our API. First choose a scope "
             [:i.fa.fa-question-circle#scope-popover-hack {:title "Scope"}]
             " and then create a label."]
            [:form
             [:div.styled-select
              [:select {:name "scope" :value scope
                        :on-change #(utils/edit-input controls-ch (conj state/project-data-path :new-api-token :scope) %)}
               [:option {:value "status"} "Status"]
               [:option {:value "view-builds"} "Build Artifacts"]
               [:option {:value "all"} "All"]]
              [:i.fa.fa-chevron-down]]
             [:input
              {:required true, :type "text" :value (str label)
               :on-change #(utils/edit-input controls-ch (conj state/project-data-path :new-api-token :label) %)}]
             [:label {:placeholder "Token label"}]
             (forms/stateful-button
              [:input
               {:data-failed-text "Failed",
                :data-success-text "Created",
                :data-loading-text "Creating...",
                :on-click #(do (put! controls-ch [:saved-project-api-token {:project-id project-id
                                                                            :api-token {:scope scope
                                                                                        :label label}}])
                               false)
                :value "Create token",
                :type "submit"}])]
            (when-let [tokens (seq (:tokens project-data))]
              [:table
               [:thead
                [:th "Scope"]
                [:th "Label"]
                [:th "Token"]
                [:th "Created"]
                [:th]]
               [:tbody
                (for [{:keys [scope label token time]} tokens]
                  [:tr
                   [:td scope]
                   [:td label]
                   [:td [:span.code token]]
                   [:td time]
                   [:td
                    [:a.slideBtn
                     {:title "Remove this Key?",
                      :on-click #(put! controls-ch [:deleted-project-api-token {:project-id project-id
                                                                                :token token}])}
                     [:i.fa.fa-times-circle]
                     [:span " Remove"]]]])]])]]])))))

(defn artifacts [project-data owner]
  (om/component
