# Overriding Ash Authentication Phoenix's default UI
Ash Authentication Phoenix provides a default UI implementation to get you started, however we wanted there to be a middle road between "you gets what you gets" and "¯\\_(ツ)_/¯ make your own". Thus AAP's system of UI overrides were born.
Every one of our LiveView components (and there are [quite a few of them](https://github.com/team-alembic/ash_authentication_phoenix/tree/main/lib/ash_authentication_phoenix/components)) has a number of hooks where you can override either the CSS styles, text or images.
## Understanding overrides
Let's start by looking at `AshAuthentication.Phoenix.Components.SignIn`, which introspects your authenticatable resources and renders the components for each of strategies with sign-in enabled.
The [component documentation](`AshAuthentication.Phoenix.Components.SignIn`) describes it's known overrides, expected properties and even which components are likely to be rendered within it.
By default, if the `overrides` prop is not set, then the defaults will be taken from [`AshAuthentication.Phoenix.Overrides.Default`](https://github.com/team-alembic/ash_authentication_phoenix/blob/main/lib/ash_authentication_phoenix/overrides/default.ex).
## Defining your own override module
If you find that the default overrides don't quite cut it for your application you can define your own override module with the `AshAuthentication.Phoenix.Overrides` module.
For example, if we wanted to change the default banner used on the sign-in page:
```elixir
defmodule MyAppWeb.AuthOverrides do
use AshAuthentication.Phoenix.Overrides
override AshAuthentication.Phoenix.Components.Banner do
set :image_url, "/images/rickroll.gif"
end
end
```
You don't have to define all overrides for all components - although you can - only the ones you actually want to change. This is why the `overrides` component property takes a list - each override module will be searched in the order they're provided until an override is found. Therefore to render the sign-in UI with only the banner image changed you could render the sign-in component with the `overrides` prop set to `[MyAppWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default]`.
## Overriding at the router
So far we have discussed how to override individual components when placing them in your own LiveView pages, however if you plan to re-use the default UI wholesale with only some overrides, then you can also provide your override options to the `AshAuthentication.Phoenix.Router.sign_in_route/1` and `AshAuthentication.Phoenix.Router.reset_route/1` route helpers in your Phoenix router:
```elixir
defmodule MyAppWeb.Router do
use MyAppWeb, :router
use AshAuthentication.Phoenix.Router
# ...
scope "/", MyAppWeb do
sign_in_route(overrides: [MyAppWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default])
end
end
```