> For the complete documentation index, see [llms.txt](https://thanhminh.gitbook.io/user-agent-generator/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://thanhminh.gitbook.io/user-agent-generator/overview/custom.md).
# Custom
Note: During the time that you are modifying, you should be use development server that help you create a local server and you can see it directly. To use it, first you need to install [Node.js](https://nodejs.org/en/), then open terminal / command prompt and type: "npm run serve" to start development server:
Open link "":
## Layout
### 1. Title
Open "src/App.vue" and you will see:
Take a look at \ element, if you change text inside, the title will change.
Example: 
Result:
### 2. Toolbar's color
Take a look at the color attribute in \ element, if you change text inside, the color of toolbar will change.
Note: Find color here: [Vuetify](https://vuetifyjs.com/en/style/colors)
Example:
### Result:
### 3. Drawer
Scroll down and you will see:
Look at the its properties, you probably understand what it means. You can freely change the "icon" and "title" property, but be careful with the "path" property.
Find icon here: [Material Icon](https://material.io/icons/)
## Category page
Open file "category.vue" in folder "src/pages":
Just change each element in "colors" array to the color that you want.
## Custom page
All of the instruction above are special things. All pages of this app located in folder "src/pages", to find out which component corresponds to which router, open file "routes.ts" in "src":
You can add any element such as \
, \
, \
,.... Example, in file "index.vue" that it match route "/":
I'm going add a \
element:
Result:
It is similar to other components, but if you want to add some element like button, you won't want to use \