diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index f40a5c2..286ed64 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -19,6 +19,11 @@ $box-primary-disabled-background-color: $box-primary-background-color;
$box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
$box-primary-disabled-border: $box-primary-border;
+// Animation Box
+$animationbox-background-color: $background-primary-color;
+$animationbox-text-color: #ffff88;
+$animationbox-border: 15px solid #00a0c0;
+$animationbox-animation-color: rgba(0, 104, 152, 0.5);
// Button
$button-background-color: #00a0e0;
diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue
index 9986d07..92b0373 100644
--- a/client/src/components/ReadySet.vue
+++ b/client/src/components/ReadySet.vue
@@ -1,10 +1,158 @@
- ReadySet.vue
- {{ text }}
+
\ No newline at end of file
+
+const fadeOut = computed((): string | null => props.text === '' ? 'ready-set__container-inner__fade-out' : null)
+const textSize = computed((): string => {
+ if (props.text.length < 3) {
+ return 'ready-set__text__size-big'
+ } else if (props.text.length < 4) {
+ return 'ready-set__text__size-medium'
+ } else if (props.text.length > 5) {
+ return 'ready-set__text__size-small'
+ }
+})
+
+
+