         (for [{:keys [name i]} models]
           [:option {:value i :key i} name])
         ]
+
+       [:label {:style {:margin-top "20px" :font-size "large"}} "Input a text"]
        [:textarea
         {:style textarea-style
          :on-change (fn [evt] (do (re-frame/dispatch [:change-text (-> evt .-target .-value)]) (re-frame/dispatch [:syllaby]))) :value @text-in}]
-       [:pre @text-syllabied]
+       [:label {:style {:margin-top "20px" :font-size "large"}} "This is the output"]
+       [:p {:style {:background "azure"}} @text-syllabied]
+       [:label {:style {:margin-top "20px" :font-size "large"}} "The text in table form (without punctuation)"]
        [:table.table.table-striped.table-bordered.table-hover.table-condensed.syllabied
         [:tbody
          [:tr [:th] (for [{:keys [short name]} models] [:th {:key name :title name} short])]
          (for
-             [[word syll-models] (filter #(not= (first %) " ") @splitted-mapped)]
+             [[word syll-models] (filter #(not (contains? punctuation-set (first %))) @splitted-mapped)]
            [:tr {:key (rand) :value (not= word " ")} [:td word]
             (map-indexed (fn [ix word] [:td {:key ix} word]) syll-models)
             ]

       {:style {:margin-top "10px"}}
       [:div.progress-bar.progress-bar-success {:style {:width (str @user-progress "%")}}]])))

(def textarea-style {:width "100%" :height 200})

(def models
  [

        done (re-frame/subscribe [:key-in-db :done])
        ]
    (fn []
      [:div.panel.panel-default {:style {:padding "20px"}}
       [:h2.ribbon "Your turn!"]
       [:h4 "Here you can check yourself: Which model follows your intution?"]
       [:div
        [:strong "Important: "]
        "Set the division with a dash '-': 'игорь' -> 'и-горь'. There will be 10 words to divide."
        [:div.input-group.col-sm-4
