# Customize Kibana 6.5 Login Page

**URL:** <https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153>\
**Category:** Kibana\
**Created:** [November 17, 2018, 5:40am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153 "2018-11-17T05:40:12Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Sjaak01](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@Sjaak01](https://discuss.elastic.co/u/Sjaak01)\
**Post date:** [November 21, 2018, 2:53am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/3 "2018-11-21T02:53:21Z")

</div>

In case somebody else is looking into customizing Kibana 6.5 I've found the files that need to be edited for most of the basic stuff.

**Browser title and loading logo (1)**  
`kibana-6.5.0/src/ui/ui_render/views/chrome.pug`

- Look for "kibana" and change that to a different text if you want a different title displayed in the browser.
- If you want to change the Kibana logo in the circular loading logo, look for a base64 string and replace this with a base64 of your own image. You can also change the hex code for the color of the loading circle etc.

**Loading logo (2)**  
`kibana-6.5.0/src/ui/ui_render/views/ui_app.pug`

- Apply the same changes you made for the loading logo in chrome.pug to ui\_app.pug as well.

**Favicons**  
`src/ui/public/assets/favicons`

- Contains the favicons. Simply overwrite them with your own.

**Login page welcom text & sub text**  
`node_modules/x-pack/plugins/security/public/views/login/components/login_page/login_page.js`

- Search for the welcome text and sub text and replace it with your own.

**Add background image to login page**  
`node_modules/x-pack/plugins/security/public/index.css`

- Open this file and look for `.loginWelcome`. Add some css such as background-image: url() if you want to add a image as background.

**Remove Kibana background images on login page**  
`node_modules/x-pack/plugins/security/public/views/login.less`

- Delete everything in this file if you want the Kibana background (left bottom and top right images) to become invisible.

**Remove Kibana background images on spaces page**  
`/node_modules/x-pack/plugins/spaces/public/views/space_selector/space_selector.less`

- Same as above, simply delete all the data from the file.

**Remove small Kibana logo**  
`/node_modules/@elastic/eui/dist/eui_theme_light.css`  
`/node_modules/@elastic/eui/dist/eui_theme_k6_light.css`

- The Kibana logo inside the small circle on the login and spaces page is generated from java or something. I'm not sure how it works but the only way I found to get rid of it is by setting the`height` and `width` of `.euiIcon--Large` in both files to 0px.

**Add your own logo to login page and space page**  
`/node_modules/x-pack/plugins/spaces/public/index.css`  
`node_modules/x-pack/plugins/security/public/index.css`

- If you followed the steps above you'll be left with an empty white circle. In my case I wanted to add my own logo so I added some background-image css to `.spcSapceSelector __logo` and `.loginWelcome__ logo`.

**Change side bar logo**  
`src/ui/public/chrome/directives/global_nav/global_nav.less`

- Look for `.logo-small` and change the image path.

**Change full screen logo**  
`/src/core_plugins/kibana/public/index.css`

- Look for `.dshExitFullScreenButton__logo` and delete the image string. You can change this to your own path.

Keep in mind that some of these changes might require Kibana to re-optimize. Stop Kibana and delete the optimize folder and start Kibana again.

---

_[View the full topic](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153)._