# Change layout

Changing the project layout is as easy as stealing a child's candy.

Just browse to your `.env` file and change the layout name.

By default, ElectroAAC so far provides 2 layouts. **tibia-default** and **tibia-custom**

But you don't have to be attached to them. You can create your own layout. We will try?

### **Create your layout**

The first thing to do is think of a name. For the example, we will use the name electro-test.

Now that we have the name chosen, we need to create our .css fil&#x65;**.** For this, we will go to the `assets/css` folder and we will create a file called **`electro-test.css`**

#### Configure css

Now you can put any css code here that you think is necessary, you can also use our example that we are going to use as a base. We will put some css code that we think is important to have to configure it our way :)

```css
:root {
  --heading-color: #ffffff;
  --text-color: #ffffff;
  --title-color: #9cabb9;
  --red: #f56969;
  --green: #41c683;

  --main-color: #ff7403;
  --second-main-color: #ffd103;

  --bg-main-color: #361414;
  --bg-second-color: #593733;
  --bg-third-color: #301a07;
  --bg-fourth: #362114ed;
  --tables: #ab851a73;
  --tables-hover: #ab841a4b;
  --bg-dashboard-main-color: #1f2128;
  --bg-dashboard-content-color: #2a2d38;
}

#app {
  background-color: var(--bg-main-color);
}

#header {
  background: url('~assets/images/electro-test/top-header.jpg') !important;
}

#main {
  background-image: url('~assets/images/electro-test/background.jpg') !important;
  background-attachment: fixed;
  background-size: cover;
}

.widget-title {
  background: url('~assets/images/electro-test/top-header.jpg') !important;
}

.bg-third {
  background-color: rgb(255 165 0 / 23%) !important;
}
```

#### Create image folder

If you noticed the code, we are importing some images from a directory that doesn't exist yet. So let's create it:

In `assets/images` create a folder with the name of your project, in our case of the example, we will create a folder called **`electro-test`.**

In this folder, we want to place our own background image for both the website and our header.

#### Register in .env file

Now that we've created our css class and we've added our own images. Let's add it to our .env file

`LAYOUT='electro-test'`

Ready!! We created our own layout.
