authentik/website/docs/customize/interfaces/_global/customcss.mdx

### Custom CSS

To further modify the look of authentik, a custom CSS file can be created. Creating such a file is outside the scope of this document.

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs
  defaultValue="docker-compose"
  values={[
    {label: 'docker-compose', value: 'docker-compose'},
    {label: 'Kubernetes', value: 'kubernetes'},
  ]}>
  <TabItem value="docker-compose">
Create a `docker-compose.override.yml` file and add this block to mount the custom CSS file:

```yaml
services:
    server:
        volumes:
            - ./my-css-file.css:/web/dist/custom.css
```

Afterwards, run the upgrade commands from the latest release notes.

  </TabItem>
  <TabItem value="kubernetes">
Create a ConfigMap with your css file:

```yaml
apiVersion: v1
kind: ConfigMap
metadata:
    name: authentik-custom-css
    namespace: authentik
data:
    custom.css: |
        ...
```

Then, in the helm chart add this to your `values.yaml` file:

```yaml
volumes:
    - name: custom-css
      configMap:
          name: authentik-custom-css
volumeMounts:
    - name: custom-css
      mountPath: /web/dist/custom.css
      subPath: custom.css
```

Afterwards, run the upgrade commands from the latest release notes.

  </TabItem>
</Tabs>