diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/MarkerViewFragment.kt b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/MarkerViewFragment.kt
index 555f3cd3..3e1a82a6 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/MarkerViewFragment.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/MarkerViewFragment.kt
@@ -11,7 +11,6 @@ import com.github.braillesystems.learnbraille.data.entities.MarkerSymbol
 import com.github.braillesystems.learnbraille.data.entities.Material
 import com.github.braillesystems.learnbraille.databinding.FragmentMarkerViewBinding
 import com.github.braillesystems.learnbraille.res.showMarkerPrintRules
-import com.github.braillesystems.learnbraille.ui.dotsMode
 import com.github.braillesystems.learnbraille.ui.screens.AbstractFragmentWithHelp
 import com.github.braillesystems.learnbraille.ui.screens.BrailleDotsInfo
 import com.github.braillesystems.learnbraille.ui.screens.FragmentBinding
@@ -47,12 +46,9 @@ class MarkerViewFragment : AbstractFragmentWithHelp(R.string.browser_marker_view
         val text = showMarkerPrintRules.getValue(m.data.type)
         infoTextView.text = text
         checkedAnnounce(text)
-
         brailleDots.dotsState.display(m.data.brailleDots)
-        checkedToast(dotsMode(brailleDots.mode))
         flipButton.setOnClickListener {
             brailleDots.reflect().display(m.data.brailleDots)
-            checkedToast(dotsMode(brailleDots.mode))
         }
 
     }.root
diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/SymbolViewFragment.kt b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/SymbolViewFragment.kt
index ef427766..3ddec4c4 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/SymbolViewFragment.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/browser/SymbolViewFragment.kt
@@ -1,5 +1,7 @@
 package com.github.braillesystems.learnbraille.ui.screens.browser
 
+import android.animation.ObjectAnimator
+import android.animation.TypeEvaluator
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
@@ -10,7 +12,6 @@ import com.github.braillesystems.learnbraille.data.entities.Material
 import com.github.braillesystems.learnbraille.data.entities.Symbol
 import com.github.braillesystems.learnbraille.databinding.FragmentSymbolViewBinding
 import com.github.braillesystems.learnbraille.res.captionRules
-import com.github.braillesystems.learnbraille.ui.dotsMode
 import com.github.braillesystems.learnbraille.ui.screens.AbstractFragmentWithHelp
 import com.github.braillesystems.learnbraille.ui.screens.BrailleDotsInfo
 import com.github.braillesystems.learnbraille.ui.screens.FragmentBinding
@@ -18,7 +19,10 @@ import com.github.braillesystems.learnbraille.ui.showPrint
 import com.github.braillesystems.learnbraille.ui.views.BrailleDotsViewMode
 import com.github.braillesystems.learnbraille.ui.views.display
 import com.github.braillesystems.learnbraille.ui.views.dotsState
-import com.github.braillesystems.learnbraille.utils.*
+import com.github.braillesystems.learnbraille.utils.checkedAnnounce
+import com.github.braillesystems.learnbraille.utils.getFragmentStringArg
+import com.github.braillesystems.learnbraille.utils.getValue
+import com.github.braillesystems.learnbraille.utils.parse
 
 class SymbolViewFragment : AbstractFragmentWithHelp(R.string.browser_symbol_view_help) {
 
@@ -48,10 +52,8 @@ class SymbolViewFragment : AbstractFragmentWithHelp(R.string.browser_symbol_view
         checkedAnnounce(showPrint(m.data))
 
         brailleDots.dotsState.display(m.data.brailleDots)
-        checkedToast(dotsMode(brailleDots.mode))
         flipButton.setOnClickListener {
             brailleDots.reflect().display(m.data.brailleDots)
-            checkedToast(dotsMode(brailleDots.mode))
         }
 
     }.root
diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/practice/CardFragment.kt b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/practice/CardFragment.kt
index 8590d13b..3470df29 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/practice/CardFragment.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/practice/CardFragment.kt
@@ -1,10 +1,12 @@
 package com.github.braillesystems.learnbraille.ui.screens.practice
 
+import android.graphics.drawable.TransitionDrawable
 import android.os.Bundle
 import android.os.Vibrator
 import android.view.*
 import android.widget.Button
 import android.widget.TextView
+import androidx.core.content.ContextCompat
 import androidx.core.content.getSystemService
 import androidx.databinding.DataBindingUtil
 import androidx.lifecycle.Observer
@@ -16,16 +18,18 @@ import com.github.braillesystems.learnbraille.databinding.FragmentCardBinding
 import com.github.braillesystems.learnbraille.res.captionRules
 import com.github.braillesystems.learnbraille.res.deckTagToName
 import com.github.braillesystems.learnbraille.res.inputMarkerPrintRules
-import com.github.braillesystems.learnbraille.ui.*
 import com.github.braillesystems.learnbraille.ui.brailletrainer.BrailleTrainer
 import com.github.braillesystems.learnbraille.ui.brailletrainer.BrailleTrainerSignalHandler
+import com.github.braillesystems.learnbraille.ui.inputPrint
 import com.github.braillesystems.learnbraille.ui.screens.*
+import com.github.braillesystems.learnbraille.ui.showHintToast
 import com.github.braillesystems.learnbraille.ui.views.*
 import com.github.braillesystems.learnbraille.utils.*
 import org.koin.android.ext.android.inject
 import org.koin.core.parameter.parametersOf
 import timber.log.Timber
 
+
 class CardFragment : AbstractFragmentWithHelp(R.string.practice_help) {
 
     // This value can change during ViewModel lifetime (ViewModelProvider does not call
@@ -86,7 +90,6 @@ class CardFragment : AbstractFragmentWithHelp(R.string.practice_help) {
         binding.flipButton.setOnClickListener {
             dotsState = binding.brailleDots.reflect().apply {
                 dotsState.subscribe(viewModel)
-                checkedToast(dotsMode(binding.brailleDots.mode))
                 if (viewModel.state == DotsChecker.State.HINT) {
                     viewModel.expectedDots?.let { display(it) }
                 }
@@ -114,16 +117,27 @@ class CardFragment : AbstractFragmentWithHelp(R.string.practice_help) {
         viewModel.observeCheckedOnFly(
             viewLifecycleOwner, { dotsState }, buzzer,
             block = { title = title(viewModel) },
-            softBlock = ::showCorrectToast
+            softBlock = {
+                announceCorrect()
+                binding.constraintLayout.background = context?.let { ContextCompat.getDrawable(it, R.drawable.background_animation_green) }
+                val transition = binding.constraintLayout.background as TransitionDrawable
+                transition.startTransition(500)
+                transition.reverseTransition(500)
+            }
         )
 
         viewModel.observeEventIncorrect(
             viewLifecycleOwner, { dotsState }, buzzer
         ) {
             viewModel.symbol.value
-                ?.let { showIncorrectToast(inputPrint(it)) }
+                ?.let { announceIncorrect(inputPrint(it)) }
                 ?: checkedToast(getString(R.string.input_loading))
             title = title(viewModel)
+
+            binding.constraintLayout.background = context?.let { ContextCompat.getDrawable(it, R.drawable.background_animation_red) }
+            val transition = binding.constraintLayout.background as TransitionDrawable
+            transition.startTransition(500)
+            transition.reverseTransition(500)
         }
 
         viewModel.observeEventHint(
@@ -158,10 +172,7 @@ class CardFragment : AbstractFragmentWithHelp(R.string.practice_help) {
                     getString(R.string.practice_deck_name_disabled_template)
                 }
                 toast(
-                    template.format(
-                        deckTagToName.getValue(tag),
-                        dotsMode(binding.brailleDots.mode)
-                    )
+                    template.format(deckTagToName.getValue(tag))
                 )
             }
         )
diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/AbstractStepFragment.kt b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/AbstractStepFragment.kt
index 110f2a5c..20e85375 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/AbstractStepFragment.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/AbstractStepFragment.kt
@@ -9,7 +9,6 @@ import android.widget.TextView
 import com.github.braillesystems.learnbraille.COURSE
 import com.github.braillesystems.learnbraille.R
 import com.github.braillesystems.learnbraille.data.entities.Step
-import com.github.braillesystems.learnbraille.ui.dotsMode
 import com.github.braillesystems.learnbraille.ui.screens.AbstractFragmentWithHelp
 import com.github.braillesystems.learnbraille.ui.screens.BrailleDotsInfo
 import com.github.braillesystems.learnbraille.ui.screens.FragmentBinding
@@ -18,7 +17,6 @@ import com.github.braillesystems.learnbraille.ui.screens.theory.getStepArg
 import com.github.braillesystems.learnbraille.ui.screens.theory.toCurrentStep
 import com.github.braillesystems.learnbraille.ui.screens.theory.toNextStep
 import com.github.braillesystems.learnbraille.ui.screens.theory.toPrevStep
-import com.github.braillesystems.learnbraille.utils.checkedToast
 import com.github.braillesystems.learnbraille.utils.navigate
 import com.github.braillesystems.learnbraille.utils.title
 
@@ -83,12 +81,6 @@ abstract class AbstractStepFragment(helpMsgId: HelpMsgId) : AbstractFragmentWith
 
     protected open fun iniStepHelper() = Unit
 
-    protected fun toastDotsMode() {
-        binding.brailleDotsInfo?.view?.mode?.let {
-            checkedToast(dotsMode(it))
-        }
-    }
-
     override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
         inflater.inflate(
             if (preferenceRepository.extendedAccessibilityEnabled) R.menu.steps_menu_hide
diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/input/AbstractInputStepFragment.kt b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/input/AbstractInputStepFragment.kt
index 58028265..26049080 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/input/AbstractInputStepFragment.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/input/AbstractInputStepFragment.kt
@@ -51,14 +51,12 @@ abstract class AbstractInputStepFragment(helpMsgId: HelpMsgId) : AbstractStepFra
 
         val buzzer: Vibrator? = activity?.getSystemService()
 
-        toastDotsMode()
         stepBinding.flipButton?.setOnClickListener {
             dotsState = stepBinding.brailleDotsInfo!!.view.reflect().apply {
                 subscribe(View.OnClickListener {
                     viewModel.onSoftCheck()
                     userTouchedDots = true
                 })
-                toastDotsMode()
                 if (viewModel.state == DotsChecker.State.HINT) {
                     display(expectedDots)
                 }
diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/show/AbstractShowStepFragment.kt b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/show/AbstractShowStepFragment.kt
index 8f233250..47106b6d 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/show/AbstractShowStepFragment.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/ui/screens/theory/steps/show/AbstractShowStepFragment.kt
@@ -13,10 +13,8 @@ abstract class AbstractShowStepFragment(helpMsgId: HelpMsgId) : AbstractStepFrag
         require(data is BaseShow)
         stepBinding.brailleDotsInfo?.view?.dotsState?.display(data.brailleDots)
             ?: error("Show step should have braille dots")
-        toastDotsMode()
         stepBinding.flipButton?.setOnClickListener {
             stepBinding.brailleDotsInfo?.view?.reflect()?.display(data.brailleDots)
-            toastDotsMode()
         }
     }
 }
diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/ui/views/BrailleDotsView.kt b/app/src/main/java/com/github/braillesystems/learnbraille/ui/views/BrailleDotsView.kt
index c4dc0a99..6a8a6a09 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/ui/views/BrailleDotsView.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/ui/views/BrailleDotsView.kt
@@ -18,9 +18,7 @@ import com.github.braillesystems.learnbraille.data.entities.spelling
 import com.github.braillesystems.learnbraille.data.repository.PreferenceRepository
 import com.github.braillesystems.learnbraille.ui.views.BrailleDotsViewMode.Reading
 import com.github.braillesystems.learnbraille.ui.views.BrailleDotsViewMode.Writing
-import com.github.braillesystems.learnbraille.utils.chainify
-import com.github.braillesystems.learnbraille.utils.forEach
-import com.github.braillesystems.learnbraille.utils.unreachable
+import com.github.braillesystems.learnbraille.utils.*
 import kotlinx.android.synthetic.main.braille_dots_view.view.*
 import org.koin.core.KoinComponent
 import org.koin.core.inject
@@ -96,18 +94,19 @@ class BrailleDotsView : ConstraintLayout, KoinComponent {
             reflectChecks()
         }
 
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
-            setBackgroundMode(mode)
-        } else {
-            Timber.w("Unable to set braille dots background due to low API level")
-        }
-
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
             setTraversalMode(mode)
         } else {
             Timber.w("API level < 22, unable co control accessibility traversal order")
         }
 
+        context.announce(
+            when (mode) {
+                Writing -> context.getString(R.string.braille_dots_mode_writing)
+                Reading -> context.getString(R.string.braille_dots_mode_reading)
+            }
+        )
+
         this.mode = mode
     }
 
@@ -117,27 +116,27 @@ class BrailleDotsView : ConstraintLayout, KoinComponent {
     }
 
     private fun setDescriptionMode(mode: BrailleDotsViewMode) {
-        when (mode) {
-            Writing -> forEach(
-                dotButton4 to R.string.braille_dot_1,
-                dotButton5 to R.string.braille_dot_2,
-                dotButton6 to R.string.braille_dot_3,
-                dotButton1 to R.string.braille_dot_4,
-                dotButton2 to R.string.braille_dot_5,
-                dotButton3 to R.string.braille_dot_6
-            ) { (dotButton, id) ->
-                dotButton.contentDescription = context.getString(id)
-            }
-            Reading -> forEach(
-                dotButton1 to R.string.braille_dot_1,
-                dotButton2 to R.string.braille_dot_2,
-                dotButton3 to R.string.braille_dot_3,
-                dotButton4 to R.string.braille_dot_4,
-                dotButton5 to R.string.braille_dot_5,
-                dotButton6 to R.string.braille_dot_6
-            ) { (dotButton, id) ->
-                dotButton.contentDescription = context.getString(id)
-            }
+        val dotsMapping = when (mode) {
+            Writing -> listOf(
+                Triple(dotButton4, R.string.braille_dot_1, R.string.braille_dot_1_text),
+                Triple(dotButton5, R.string.braille_dot_2, R.string.braille_dot_2_text),
+                Triple(dotButton6, R.string.braille_dot_3, R.string.braille_dot_3_text),
+                Triple(dotButton1, R.string.braille_dot_4, R.string.braille_dot_4_text),
+                Triple(dotButton2, R.string.braille_dot_5, R.string.braille_dot_5_text),
+                Triple(dotButton3, R.string.braille_dot_6, R.string.braille_dot_6_text)
+            )
+            Reading -> listOf(
+                Triple(dotButton1, R.string.braille_dot_1, R.string.braille_dot_1_text),
+                Triple(dotButton2, R.string.braille_dot_2, R.string.braille_dot_2_text),
+                Triple(dotButton3, R.string.braille_dot_3, R.string.braille_dot_3_text),
+                Triple(dotButton4, R.string.braille_dot_4, R.string.braille_dot_4_text),
+                Triple(dotButton5, R.string.braille_dot_5, R.string.braille_dot_5_text),
+                Triple(dotButton6, R.string.braille_dot_6, R.string.braille_dot_6_text)
+            )
+        }
+        dotsMapping.forEach { (dotButton, desc_id, caption_id) ->
+            dotButton.contentDescription = context.getString(desc_id)
+            dotButton.text = context.getString(caption_id)
         }
     }
 
@@ -179,14 +178,6 @@ class BrailleDotsView : ConstraintLayout, KoinComponent {
             next.accessibilityTraversalAfter = prev.id
         }
     }
-
-    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
-    private fun setBackgroundMode(mode: BrailleDotsViewMode) {
-        background = when (mode) {
-            Writing -> context.getDrawable(R.drawable.right_border)
-            Reading -> context.getDrawable(R.drawable.left_border)
-        }
-    }
 }
 
 val BrailleDotsView.dotsState: BrailleDotsState
diff --git a/app/src/main/java/com/github/braillesystems/learnbraille/utils/Utils.kt b/app/src/main/java/com/github/braillesystems/learnbraille/utils/Utils.kt
index 2bd2ae90..cb1f3801 100644
--- a/app/src/main/java/com/github/braillesystems/learnbraille/utils/Utils.kt
+++ b/app/src/main/java/com/github/braillesystems/learnbraille/utils/Utils.kt
@@ -1,11 +1,15 @@
 package com.github.braillesystems.learnbraille.utils
 
+import android.animation.ArgbEvaluator
+import android.animation.ObjectAnimator
 import android.content.Context
 import android.os.Vibrator
+import android.view.View
 import android.view.accessibility.AccessibilityEvent
 import android.widget.Toast
 import androidx.appcompat.app.ActionBar
 import androidx.appcompat.app.AppCompatActivity
+import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.fragment.app.Fragment
 import com.github.braillesystems.learnbraille.LearnBrailleApplication
 import com.github.braillesystems.learnbraille.R
@@ -68,6 +72,10 @@ fun Fragment.checkedAnnounce(
     announce(announcement)
 }
 
+fun Fragment.announceCorrect() = announce(getString(R.string.input_correct))
+
+fun Fragment.announceIncorrect(hint: String = "") =
+    announce("${getString(R.string.input_incorrect)} $hint")
 
 val Fragment.actionBar: ActionBar?
     get() = (activity as AppCompatActivity).supportActionBar
@@ -88,6 +96,14 @@ fun Fragment.updateTitle(title: String) {
     this.title = title
 }
 
+fun animateView(obj: View?, colorFrom: Int?, colorTo: Int?) {
+    val duration = 1000
+    ObjectAnimator
+        .ofObject(obj, "backgroundColor", ArgbEvaluator(), colorFrom, colorTo, colorFrom)
+        .setDuration(duration.toLong())
+        .start()
+}
+
 
 fun <T> stringify(s: SerializationStrategy<T>, obj: T) = Json.stringify(s, obj)
 fun <T> parse(d: DeserializationStrategy<T>, s: String) = Json.parse(d, s)
diff --git a/app/src/main/res/drawable/background_animation_green.xml b/app/src/main/res/drawable/background_animation_green.xml
new file mode 100644
index 00000000..fca1bc87
--- /dev/null
+++ b/app/src/main/res/drawable/background_animation_green.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<transition xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/background_blank" />
+    <item android:drawable="@drawable/background_gradient_green" />
+</transition>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/background_animation_red.xml b/app/src/main/res/drawable/background_animation_red.xml
new file mode 100644
index 00000000..bd7d45ad
--- /dev/null
+++ b/app/src/main/res/drawable/background_animation_red.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<transition xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/background_blank" />
+    <item android:drawable="@drawable/background_gradient_red" />
+</transition>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/background_blank.xml b/app/src/main/res/drawable/background_blank.xml
new file mode 100644
index 00000000..ac5748e7
--- /dev/null
+++ b/app/src/main/res/drawable/background_blank.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/colorBackground" />
+        </shape>
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/background_gradient_green.xml b/app/src/main/res/drawable/background_gradient_green.xml
new file mode 100644
index 00000000..d310f84a
--- /dev/null
+++ b/app/src/main/res/drawable/background_gradient_green.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <gradient
+                android:startColor="@color/colorBackground"
+                android:endColor="@color/lightGreen"
+                android:angle="90"/>
+        </shape>
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/background_gradient_red.xml b/app/src/main/res/drawable/background_gradient_red.xml
new file mode 100644
index 00000000..dabe091f
--- /dev/null
+++ b/app/src/main/res/drawable/background_gradient_red.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <gradient
+                android:startColor="@color/colorBackground"
+                android:centerColor="@color/colorBackground"
+                android:endColor="@color/lightRed"
+                android:angle="90"/>
+        </shape>
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/checked_round_checkbox.xml b/app/src/main/res/drawable/checked_round_checkbox.xml
index 281e0730..09bc4d3d 100644
--- a/app/src/main/res/drawable/checked_round_checkbox.xml
+++ b/app/src/main/res/drawable/checked_round_checkbox.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
-    <solid android:color="#263238" />
+    <solid android:color="@color/colorPrimary" />
     <size
         android:width="@dimen/braille_dot_size"
         android:height="@dimen/braille_dot_size" />
diff --git a/app/src/main/res/drawable/left_border.xml b/app/src/main/res/drawable/left_border.xml
deleted file mode 100644
index 58fc9043..00000000
--- a/app/src/main/res/drawable/left_border.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <item
-        android:bottom="15dp"
-        android:right="154dp"
-        android:top="15dp">
-        <shape android:shape="rectangle">
-            <solid android:color="@color/colorSecondary" />
-        </shape>
-    </item>
-    <item android:left="6dp">
-        <shape android:shape="rectangle">
-            <solid android:color="@color/colorBackground" />
-        </shape>
-    </item>
-
-</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/right_border.xml b/app/src/main/res/drawable/right_border.xml
deleted file mode 100644
index 80e932f5..00000000
--- a/app/src/main/res/drawable/right_border.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <item
-        android:bottom="15dp"
-        android:left="154dp"
-        android:top="15dp">
-        <shape android:shape="rectangle">
-            <solid android:color="@color/colorSecondary" />
-        </shape>
-    </item>
-    <item android:right="6dp">
-        <shape android:shape="rectangle">
-            <solid android:color="@color/colorBackground" />
-        </shape>
-    </item>
-
-</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/round_checkbox.xml b/app/src/main/res/drawable/round_checkbox.xml
index cd049921..e67a3adc 100644
--- a/app/src/main/res/drawable/round_checkbox.xml
+++ b/app/src/main/res/drawable/round_checkbox.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@drawable/checked_round_checkbox" android:state_checked="true" />
-    <item android:drawable="@drawable/checked_round_checkbox" android:state_pressed="true" />
-    <item android:drawable="@drawable/unchecked_round_checkbox" android:state_pressed="false" />
+    <item android:color="@color/colorBackground" android:drawable="@drawable/checked_round_checkbox" android:state_checked="true" />
+    <item android:color="@color/colorBackground" android:drawable="@drawable/checked_round_checkbox" android:state_pressed="true" />
+    <item android:color="@color/colorPrimary" android:drawable="@drawable/unchecked_round_checkbox" android:state_pressed="false" />
 </selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/to_progress.xml b/app/src/main/res/drawable/to_progress.xml
deleted file mode 100644
index fd4c2672..00000000
--- a/app/src/main/res/drawable/to_progress.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24.0"
-    android:viewportHeight="24.0">
-    <path
-        android:fillColor="#FF000000"
-        android:pathData="M12,2C8.13,2 5,5.13 5,9c0,5.25 7,13 7,13s7,-7.75 7,-13c0,-3.87 -3.13,-7 -7,-7zM12,11.5c-1.38,0 -2.5,-1.12 -2.5,-2.5s1.12,-2.5 2.5,-2.5 2.5,1.12 2.5,2.5 -1.12,2.5 -2.5,2.5z" />
-</vector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/unchecked_round_checkbox.xml b/app/src/main/res/drawable/unchecked_round_checkbox.xml
index 5909773d..f4ec9138 100644
--- a/app/src/main/res/drawable/unchecked_round_checkbox.xml
+++ b/app/src/main/res/drawable/unchecked_round_checkbox.xml
@@ -3,7 +3,7 @@
     android:shape="oval">
     <stroke
         android:width="@dimen/braille_dots_unchecked_width"
-        android:color="#263238" />
+        android:color="@color/colorPrimary" />
     <size
         android:width="@dimen/braille_dot_size"
         android:height="@dimen/braille_dot_size" />
diff --git a/app/src/main/res/layout/braille_dots_view.xml b/app/src/main/res/layout/braille_dots_view.xml
index 1535a5e8..599e082f 100644
--- a/app/src/main/res/layout/braille_dots_view.xml
+++ b/app/src/main/res/layout/braille_dots_view.xml
@@ -4,8 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/constraintLayoutButtons"
     android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    tools:background="@drawable/left_border">
+    android:layout_height="wrap_content">
 
     <com.github.braillesystems.learnbraille.ui.views.BrailleDotView
         android:id="@+id/dotButton1"
@@ -15,6 +14,7 @@
         android:layout_marginEnd="@dimen/braille_dots_inner_horizontal_margin"
         android:layout_marginBottom="@dimen/braille_dots_inner_vertical_margin"
         android:contentDescription="@string/braille_dot_1"
+        android:text="@string/braille_dot_1_text"
         app:layout_constraintBottom_toTopOf="@+id/dotButton2"
         app:layout_constraintEnd_toStartOf="@+id/dotButton4"
         app:layout_constraintHorizontal_bias="0.5"
@@ -30,6 +30,7 @@
         android:layout_marginEnd="@dimen/braille_dots_outer_horizontal_margin"
         android:layout_marginBottom="@dimen/braille_dots_inner_vertical_margin"
         android:contentDescription="@string/braille_dot_2"
+        android:text="@string/braille_dot_2_text"
         app:layout_constraintBottom_toTopOf="@+id/dotButton3"
         app:layout_constraintEnd_toStartOf="@+id/dotButton5"
         app:layout_constraintHorizontal_bias="0.5"
@@ -44,6 +45,7 @@
         android:layout_marginEnd="@dimen/braille_dots_outer_horizontal_margin"
         android:layout_marginBottom="@dimen/braille_dots_outer_vertical_margin"
         android:contentDescription="@string/braille_dot_3"
+        android:text="@string/braille_dot_3_text"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@+id/dotButton6"
         app:layout_constraintHorizontal_bias="0.5"
@@ -58,6 +60,8 @@
         android:layout_marginEnd="@dimen/braille_dots_outer_horizontal_margin"
         android:layout_marginBottom="@dimen/braille_dots_inner_vertical_margin"
         android:contentDescription="@string/braille_dot_4"
+        android:paddingEnd="@dimen/braille_dots_right_column_text_padding"
+        android:text="@string/braille_dot_4_text"
         app:layout_constraintBottom_toTopOf="@+id/dotButton5"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
@@ -72,6 +76,8 @@
         android:layout_marginEnd="@dimen/braille_dots_outer_horizontal_margin"
         android:layout_marginBottom="@dimen/braille_dots_inner_vertical_margin"
         android:contentDescription="@string/braille_dot_5"
+        android:paddingEnd="@dimen/braille_dots_right_column_text_padding"
+        android:text="@string/braille_dot_5_text"
         app:layout_constraintBottom_toTopOf="@+id/dotButton6"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
@@ -86,6 +92,8 @@
         android:layout_marginEnd="@dimen/braille_dots_outer_horizontal_margin"
         android:layout_marginBottom="@dimen/braille_dots_outer_vertical_margin"
         android:contentDescription="@string/braille_dot_6"
+        android:paddingEnd="@dimen/braille_dots_right_column_text_padding"
+        android:text="@string/braille_dot_6_text"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
diff --git a/app/src/main/res/layout/fragment_card.xml b/app/src/main/res/layout/fragment_card.xml
index f5af9814..21757bef 100644
--- a/app/src/main/res/layout/fragment_card.xml
+++ b/app/src/main/res/layout/fragment_card.xml
@@ -14,6 +14,7 @@
         android:id="@+id/constraintLayout"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:background="@drawable/background_animation_red"
         tools:context=".ui.screens.practice.CardFragment">
 
         <TextView
diff --git a/app/src/main/res/values-sw320dp/dimens.xml b/app/src/main/res/values-sw320dp/dimens.xml
index f95fc631..63de5629 100644
--- a/app/src/main/res/values-sw320dp/dimens.xml
+++ b/app/src/main/res/values-sw320dp/dimens.xml
@@ -9,6 +9,8 @@
     <dimen name="braille_dots_scale_of_one_dot">2.6</dimen>
     <dimen name="braille_dots_scale_of_view">1.1</dimen>
 
+    <dimen name="braille_dots_right_column_text_padding">0dp</dimen>
+
     <dimen name="practice_dots_vertical_bias">0.85</dimen>
     <dimen name="practice_buttons_vertical_bias">0.9</dimen>
 
diff --git a/app/src/main/res/values-sw360dp/dimens.xml b/app/src/main/res/values-sw360dp/dimens.xml
index 9fb5067e..584c44fb 100644
--- a/app/src/main/res/values-sw360dp/dimens.xml
+++ b/app/src/main/res/values-sw360dp/dimens.xml
@@ -9,6 +9,8 @@
     <dimen name="braille_dots_scale_of_one_dot">2.6</dimen>
     <dimen name="braille_dots_scale_of_view">1.25</dimen>
 
+    <dimen name="braille_dots_right_column_text_padding">0dp</dimen>
+
     <dimen name="letter_practice_scale_of_view">1</dimen>
     <dimen name="practice_dots_vertical_bias">0.85</dimen>
     <dimen name="practice_buttons_vertical_bias">0.9</dimen>
diff --git a/app/src/main/res/values-sw400dp/dimens.xml b/app/src/main/res/values-sw400dp/dimens.xml
index e0e9ebe7..38fac6e3 100644
--- a/app/src/main/res/values-sw400dp/dimens.xml
+++ b/app/src/main/res/values-sw400dp/dimens.xml
@@ -9,6 +9,8 @@
     <dimen name="braille_dots_scale_of_one_dot">2.6</dimen>
     <dimen name="braille_dots_scale_of_view">1.5</dimen>
 
+    <dimen name="braille_dots_right_column_text_padding">0dp</dimen>
+
     <dimen name="practice_dots_vertical_bias">0.85</dimen>
     <dimen name="practice_buttons_vertical_bias">0.9</dimen>
 
diff --git a/app/src/main/res/values-sw600dp/dimens.xml b/app/src/main/res/values-sw600dp/dimens.xml
index 32c7b84c..90791389 100644
--- a/app/src/main/res/values-sw600dp/dimens.xml
+++ b/app/src/main/res/values-sw600dp/dimens.xml
@@ -9,6 +9,8 @@
     <dimen name="braille_dots_scale_of_one_dot">2.6</dimen>
     <dimen name="braille_dots_scale_of_view">1.8</dimen>
 
+    <dimen name="braille_dots_right_column_text_padding">1dp</dimen>
+
     <dimen name="side_buttons_extended_width">80dp</dimen>
     <dimen name="side_buttons_width">65dp</dimen>
     <dimen name="practice_buttons_height">300dp</dimen>
diff --git a/app/src/main/res/values-sw720dp/dimens.xml b/app/src/main/res/values-sw720dp/dimens.xml
index 70f79b1a..4722a3d3 100644
--- a/app/src/main/res/values-sw720dp/dimens.xml
+++ b/app/src/main/res/values-sw720dp/dimens.xml
@@ -9,6 +9,8 @@
     <dimen name="braille_dots_scale_of_one_dot">2.6</dimen>
     <dimen name="braille_dots_scale_of_view">2.1</dimen>
 
+    <dimen name="braille_dots_right_column_text_padding">1dp</dimen>
+
     <dimen name="side_buttons_extended_width">90dp</dimen>
     <dimen name="side_buttons_width">75dp</dimen>
     <dimen name="practice_buttons_height">320dp</dimen>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 74e896d7..857ff4e5 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <color name="lightGreen">#9ff57a</color>
+    <color name="lightRed">#ff8282</color>
     <color name="colorPrimary">#263238</color>
     <color name="colorSecondary">#9e3d9a</color>
     <color name="colorOnPrimary">#ffffff</color>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index cacf9cb5..bd2407b8 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -8,6 +8,8 @@
     <dimen name="braille_dots_inner_vertical_margin">25dp</dimen>
     <dimen name="braille_dots_scale_of_one_dot">2.6</dimen>
     <dimen name="braille_dots_scale_of_view">1</dimen>
+    <!-- For whatever reason dots numbers in the right column appear not strictly in the middle, so we use padding to fix it-->
+    <dimen name="braille_dots_right_column_text_padding">1dp</dimen>
 
     <dimen name="practice_dots_vertical_bias">0.85</dimen>
     <dimen name="practice_buttons_vertical_bias">0.9</dimen>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 4c2357f1..ef1b10bb 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -129,10 +129,10 @@
     <string name="practice_actionbar_title_template">Практика: %d из %d</string>
     <string name="practice_actionbar_title">Практика</string>
     <string name="practice_deck_name_enabled_template">
-        Колода: \"%s\"\n\"%s\"\nПовторять только изученные: включено
+        Колода: \"%s\"\nПовторять только изученные: включено
     </string>
     <string name="practice_deck_name_disabled_template">
-        Колода: \"%s\"\n\"%s\"\nПовторять только изученные: выключено
+        Колода: \"%s\"\nПовторять только изученные: выключено
     </string>
     <string name="decks_list_title">Список колод</string>
     <string name="decks_list_no_material_in_deck">
@@ -150,6 +150,7 @@
     <string name="deck_name_markers">Специальные символы</string>
     <string name="deck_name_math">Математические символы</string>
 
+    <!-- TODO #278 correct help messages after un-setting dots background -->
 
     <string name="practice_help">
         <![CDATA[
@@ -405,6 +406,13 @@
     <string name="braille_dot_5">точка пять</string>
     <string name="braille_dot_6">точка шесть</string>
 
+    <string name="braille_dot_1_text">1</string>
+    <string name="braille_dot_2_text">2</string>
+    <string name="braille_dot_3_text">3</string>
+    <string name="braille_dot_4_text">4</string>
+    <string name="braille_dot_5_text">5</string>
+    <string name="braille_dot_6_text">6</string>
+
     <!--    Action menu-->
 
     <string name="menu_title_help">Справка</string>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index d2cfacdc..e8b9706a 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -44,7 +44,11 @@
         <item name="android:layout_height">wrap_content</item>
         <item name="android:scaleX">@dimen/braille_dots_scale_of_one_dot</item>
         <item name="android:scaleY">@dimen/braille_dots_scale_of_one_dot</item>
-        <item name="android:button">@drawable/round_checkbox</item>
+        <item name="android:button">@null</item>
+        <item name="android:background">@drawable/round_checkbox</item>
+        <item name="android:gravity">center</item>
+        <item name="android:textColor">@drawable/round_checkbox</item>
+        <item name="android:fontFamily">sans-serif-light</item>
     </style>
 
     <style name="bigLetterStyle">