diff --git a/lib/mv_web/components/layouts/root.html.heex b/lib/mv_web/components/layouts/root.html.heex
index f6c3014..3ba099d 100644
--- a/lib/mv_web/components/layouts/root.html.heex
+++ b/lib/mv_web/components/layouts/root.html.heex
@@ -33,7 +33,44 @@
- <.flash_group flash={@flash} />
+
+ <.flash id="flash-success-root" kind={:success} flash={@flash} />
+ <.flash id="flash-warning-root" kind={:warning} flash={@flash} />
+ <.flash id="flash-info-root" kind={:info} flash={@flash} />
+ <.flash id="flash-error-root" kind={:error} flash={@flash} />
+
+ <.flash
+ id="client-error-root"
+ kind={:error}
+ title={gettext("We can't find the internet")}
+ phx-disconnected={
+ show(".phx-client-error #client-error-root") |> JS.remove_attribute("hidden")
+ }
+ phx-connected={hide("#client-error-root") |> JS.set_attribute({"hidden", ""})}
+ hidden
+ >
+ {gettext("Attempting to reconnect")}
+ <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
+
+
+ <.flash
+ id="server-error-root"
+ kind={:error}
+ title={gettext("Something went wrong!")}
+ phx-disconnected={
+ show(".phx-server-error #server-error-root") |> JS.remove_attribute("hidden")
+ }
+ phx-connected={hide("#server-error-root") |> JS.set_attribute({"hidden", ""})}
+ hidden
+ >
+ {gettext("Attempting to reconnect")}
+ <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
+
+
{@inner_content}