diff --git a/resources/scripts/App.vue b/resources/scripts/App.vue
index 6404c2a..6691896 100644
--- a/resources/scripts/App.vue
+++ b/resources/scripts/App.vue
@@ -1,9 +1,4 @@
 <template>
-    <Alert
-        v-if="onBreak"
-        :message="'🍵 Break time. Grab a tea!'"
-        @alertClosed="endBreak"
-    />
     <Timer
         :minutes="timeRemaining[0]"
         :seconds="timeRemaining[1]"
@@ -32,6 +27,14 @@
             class="grid"
         />
     </form>
+
+    <Transition name="fade">
+        <BreakAlert
+            v-if="onBreak"
+            :timeLeft="`${formatTime(timeRemaining)}`"
+            @alertClosed="endBreak"
+        />
+    </Transition>
 </template>
 <script setup lang="ts">
 import { PropType, reactive, ref } from "vue";
@@ -39,7 +42,7 @@ import { PropType, reactive, ref } from "vue";
 import Timer from "./components/Timer.vue";
 import TeamMember from "./components/TeamMember.vue";
 import BreaksToggle from "./components/BreaksToggle.vue";
-import Alert from "./components/Alert.vue";
+import BreakAlert from "./components/BreakAlert.vue";
 
 import {
     updateTray,
@@ -250,4 +253,14 @@ async function randomizeTeamOrder() {
     padding: 0 0.5rem;
     margin: 0;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
 </style>
diff --git a/resources/scripts/components/Alert.vue b/resources/scripts/components/Alert.vue
deleted file mode 100644
index d5a6038..0000000
--- a/resources/scripts/components/Alert.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <div class="alert">
-        <p>{{ message }}</p>
-        <button aria-label="Close" @click="close">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-    message: {
-        type: String,
-        required: true
-    },
-});
-
-const emit = defineEmits(["alertClosed"]);
-
-function close() {
-    emit("alertClosed");
-}
-</script>
-
-<style scoped>
-.alert {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px 20px;
-    margin: 10px;
-    background-color: var(--secondary);
-    opacity: 0.9;
-    border-radius: 3px;
-}
-
-p,
-button {
-    width: auto;
-    margin: 0;
-    color: var(--primary-inverse);
-}
-
-button {
-    background-color: transparent;
-    border: none;
-    padding: 10px 0 10px 10px;
-    font-weight: 600;
-}
-
-button:hover {
-    color: var(--primary);
-}
-</style>
\ No newline at end of file
diff --git a/resources/scripts/components/BreakAlert.vue b/resources/scripts/components/BreakAlert.vue
new file mode 100644
index 0000000..71a23a0
--- /dev/null
+++ b/resources/scripts/components/BreakAlert.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="alert">
+        <h1>🍵 Break</h1>
+        <output class="timer">{{ timeLeft }}</output>
+        <button class="close" aria-label="Close" @click="close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <button @click="close">Skip break</button>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    timeLeft: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits(["alertClosed"]);
+
+function close() {
+    emit("alertClosed");
+}
+</script>
+
+<style scoped>
+.alert {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 15px 20px;
+    margin: 10px;
+    background-color: var(--secondary);
+    border-radius: 3px;
+    z-index: 1;
+    text-align: center;
+    gap: 3rem;
+}
+
+.timer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+    border: 3px solid var(--primary-inverse);
+    border-radius: 100px;
+    font-size: 6rem;
+    color: var(--primary-inverse);
+    width: 100%;
+    font-weight: 600;
+}
+
+h1,
+p,
+button {
+    color: var(--primary-inverse);
+    font-size: 3rem;
+    font-weight: 400;
+    margin: 0;
+}
+
+.close {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    width: auto;
+    background-color: transparent;
+    border: none;
+    padding: 0 10px 10px 10px;
+}
+
+.close:hover,
+.close:active {
+    color: var(--primary);
+}
+</style>