# Folder  Structure & Layout

## Folder Structure

#### `public/`

This folder contains public assets like favicon, style.css, and index.html file

#### `src/`

This folder contains all the pages, components, apps, styles. This is the folder you can develop your project.

_**`@assets/`**_

This folder keeps images, fonts, icons, and less files.

_**`@config/`**_

This folder contaings config files for your app.

_**`@layout/`**_

This folder contains layout files with its components.

_**`@navigation/`**_

This folder contains sidebar menu items.

_**`@redux/`**_

This folder contains redux files for apps&#x20;

_**`@router/`**_

Router folder contains page routes and the main router

_**`@view/`**_

View folder contains all Yoda pages like apps component pages. You can write your all pages here.&#x20;

## Layout

Yoda has two layout types;

#### Vertical Layout

Vertical layout is the main layout of Yoda. Yoda Main pages use this layout.

#### Full Layout

Full layout is using for Login screens, Lock pages, and error pages.

### How to apply layout?

You can apply from router. When you create new page on `src/router/routes/pages.js`

```
{
    path: "/components/data-display/badge",
    component: lazy(() => import("../../view/components/data-display/badge")),
    layout: "VerticalLayout",
  },
```



