# Customize Azion Console with Console Kit

Azion **Console Kit** allows you to craft a custom Azion interface to fit your business needs. In this guide, you'll learn how to make some simple visual changes to the Azion Console.

:::caution[warning]
To follow this guide, you must first [setup your Console Kit project](/en/documentation/devtools/console-kit/#setting-up-a-project) on a forked repository in your account and initialize the project using Azion CLI to run it locally. Then, you can work on changing the forked version of the Azion Console and, once you're done, deliver the project to the edge using the CLI.
:::

---

## Adding an interface component and creating a route function for navigation

In this example, you'll add a new user interface (UI) component to a list view to draw attention to an important step of a workflow process for Console users. 

You'll add the `InlineMessage` and `PrimeButton` components to the **Applications** list view to alert your users that they must create a domain to see applications online, with a button action that directs users to the `create-domain` route. To do so:

1. Open the Console Kit project in your IDE.
2. Run `azion dev` to initialize a local development server.
3. In the `src/views` folder, locate the Application list view and modify the code as follows:

```js title="src/views/EdgeApplications/ListView.vue"
  ...
  import { computed, ref } from 'vue'

  // import statement for the InlineMessage component
  import InlineMessage from 'primevue/inlinemessage'

  // import statement for the PrimeButton component
  import Illustration from '@/assets/svg/illustration-layers.vue'

  // import statement for the router function
  import { useRouter } from 'vue-router'
  ...
```

4. In the constant declaration section of the code, create the `router` const to reference the router function:

```js title="src/views/EdgeApplications/ListView.vue"
  ...
  defineOptions({ name: 'list-edge-applications' })

  // reference the router function for the button action
  const router = useRouter()
  ...  
```

5. Create the `navigateToDomains` function that will be executed when the user clicks the `PrimeButton` before closing the `<script>` tag:

```js title="src/views/EdgeApplications/ListView.vue"
  ...
  
  // on push action to redirect user to create-domain route
  function navigateToDomains() {
    router.push({ name: 'create-domain' })
  }
</script>
```

:::tip
You can use this function with the routes defined in the `src/router/routes` folder.
:::

6. Now add the elements to the layout of the list view inside the `<template>` tag:

```html title="src/views/EdgeApplications/ListView.vue"
    ...
    <template #heading>
      <PageHeadingBlock pageTitle="Applications"></PageHeadingBlock>

      <!--- add the InlineMessage component and customize the message with the button --->
      <InlineMessage
        class="w-fit"
        severity="warn"
        >Remember to create a
        <PrimeButton
          link
          size="small"
          class="p-0"
          @click="navigateToDomains"
        >
          Domain
        </PrimeButton>
         and select an application to launch online.
      </InlineMessage>
    </template>
    <template #content>
    ...
```

7. On the browser, access the localhost address and navigate to the **Applications** page. You should see the `InlineMessage` element with a `PrimeButton` under the heading.
8. After you're done, run `azion deploy` to launch the changes to the edge.