diff --git a/README.md b/README.md
index 15ccb08..204af46 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,13 @@
 
 We are very excited to have you here!
 
-Basecode is a full-stack platform for creating web apps using Java/Kotlin and React. The platform consists of several
+Basecode is a full-stack scaffolding tool for Java/Kotlin + React applications. The platform consists of several
 generators to generate the basic structure of your web application.
 
-(Code generated by) Basecode is:
+The goal of Basecode is to minimize the time spent on bootstrapping a new project and maximize the time spent on
+delivering business value.
+
+Basecode / the code generated by Basecode is:
 
 - **Productive**, as it allows you to generate authentication and CRUD functionality with 1-N relations, including
   migrations, GraphQL schema files, unit tests and integration tests.
diff --git a/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Login.tsx.peb b/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Login.tsx.peb
index a4cf726..c7ff064 100644
--- a/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Login.tsx.peb
+++ b/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Login.tsx.peb
@@ -1,9 +1,9 @@
 import { showError } from '@lib/notifications'
-import { Header } from '@components/Header'
+import { Header } from '@components/ui/Header'
 import { gql, OperationResult, useMutation } from 'urql'
 import { Mutation } from '@generated/graphql'
 import { useFormik } from 'formik'
-import { Form } from '@components/Form'
+import { Form } from '@components/ui/Form'
 
 export interface LoginProps {
   onLogin?: () => void
diff --git a/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Register.tsx.peb b/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Register.tsx.peb
index dc206e8..db7ae64 100644
--- a/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Register.tsx.peb
+++ b/pkg/generator/templates/frontends/react/auth/[artifactId]-web/src/components/app/auth/Register.tsx.peb
@@ -1,10 +1,10 @@
 import { showError } from '@lib/notifications'
-import { Header } from '@components/Header'
+import { Header } from '@components/ui/Header'
 import { gql, OperationResult, useMutation{%if hasRelations%}, useQuery{%endif%} } from 'urql'{%if hasRelations%}
 import { useMemo } from 'react'{%endif%}
 import { Mutation{%if hasRelations%}, Query{%endif%}{%for field in fields%}{%if field.isFieldRelational%}, {{ field.fieldTypePascalCase }}{%endif%}{%endfor%} } from '@generated/graphql'
 import { useFormik } from 'formik'
-import { Form } from '@components/Form'
+import { Form } from '@components/ui/Form'
 import { showInfo } from '@lib/notifications'
 
 export interface RegisterProps { {%for field in fields%}{%if field.isFieldRelational%}
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Actions.test.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Actions.test.tsx.peb
similarity index 89%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Actions.test.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Actions.test.tsx.peb
index a7200e3..915c9a1 100644
--- a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Actions.test.tsx.peb
+++ b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Actions.test.tsx.peb
@@ -1,4 +1,4 @@
-import { Actions } from '@components/Actions'
+import { Actions } from '@components/ui/Actions'
 import { render, screen } from '@testing-library/react'
 
 describe('Actions', () => {
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Details.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Details.tsx.peb
similarity index 88%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Details.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Details.tsx.peb
index 57e832e..273d46b 100644
--- a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Details.tsx.peb
+++ b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Details.tsx.peb
@@ -1,4 +1,4 @@
-import { Details } from '@components/Details'
+import { Details } from '@components/ui/Details'
 import { render, screen } from '@testing-library/react'
 
 describe('Details', () => {
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Error.test.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Error.test.tsx.peb
similarity index 93%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Error.test.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Error.test.tsx.peb
index ff0dfe6..75a70c1 100644
--- a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Error.test.tsx.peb
+++ b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Error.test.tsx.peb
@@ -1,4 +1,4 @@
-import { Error } from '@components/Error'
+import { Error } from '@components/ui/Error'
 import { render, screen } from '@testing-library/react'
 import { CombinedError } from 'urql'
 
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Form.test.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Form.test.tsx.peb
similarity index 90%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Form.test.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Form.test.tsx.peb
index 407494d..6962da0 100644
--- a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Form.test.tsx.peb
+++ b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Form.test.tsx.peb
@@ -1,4 +1,4 @@
-import { Form } from '@components/Form'
+import { Form } from '@components/ui/Form'
 import { render, screen } from '@testing-library/react'
 
 describe('Form', () => {
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Header.test.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Header.test.tsx.peb
similarity index 87%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Header.test.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Header.test.tsx.peb
index e93457f..231a3d4 100644
--- a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Header.test.tsx.peb
+++ b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Header.test.tsx.peb
@@ -1,4 +1,4 @@
-import { Header } from '@components/Header'
+import { Header } from '@components/ui/Header'
 import { render, screen } from '@testing-library/react'
 
 describe('Header', () => {
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/List.test.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/List.test.tsx.peb
similarity index 97%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/List.test.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/List.test.tsx.peb
index 8348150..fac0e72 100644
--- a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/List.test.tsx.peb
+++ b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/List.test.tsx.peb
@@ -1,4 +1,4 @@
-import { List } from '@components/List'
+import { List } from '@components/ui/List'
 import { render, screen } from '@testing-library/react'
 
 describe('List', () => {
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Loader.test.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Loader.test.tsx.peb
similarity index 75%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Loader.test.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Loader.test.tsx.peb
index 03a9480..e7a4724 100644
--- a/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Loader.test.tsx.peb
+++ b/pkg/generator/templates/frontends/react/new/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/ui/Loader.test.tsx.peb
@@ -1,4 +1,4 @@
-import { Loader } from '@components/Loader'
+import { Loader } from '@components/ui/Loader'
 import { render } from '@testing-library/react'
 
 describe('Loader', () => {
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Actions.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Actions.tsx.peb
similarity index 100%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Actions.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Actions.tsx.peb
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Details.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Details.tsx.peb
similarity index 100%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Details.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Details.tsx.peb
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Error.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Error.tsx.peb
similarity index 100%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Error.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Error.tsx.peb
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Form.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Form.tsx.peb
similarity index 100%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Form.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Form.tsx.peb
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Header.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Header.tsx.peb
similarity index 100%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Header.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Header.tsx.peb
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/List.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/List.tsx.peb
similarity index 100%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/List.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/List.tsx.peb
diff --git a/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Loader.tsx.peb b/pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Loader.tsx.peb
similarity index 100%
rename from pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/Loader.tsx.peb
rename to pkg/generator/templates/frontends/react/new/[artifactId]-web/src/components/ui/Loader.tsx.peb
diff --git a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Details.tsx.peb b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Details.tsx.peb
index 8e3835a..22579e5 100644
--- a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Details.tsx.peb
+++ b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Details.tsx.peb
@@ -1,10 +1,10 @@
-import { Header } from '@components/Header'
+import { Header } from '@components/ui/Header'
 import { gql, useQuery } from 'urql'
 import { useMemo } from 'react'
 import { Query } from '@generated/graphql'
-import { Error } from '@components/Error'
-import { Loader } from '@components/Loader'
-import { Details } from '@components/Details'
+import { Error } from '@components/ui/Error'
+import { Loader } from '@components/ui/Loader'
+import { Details } from '@components/ui/Details'
 
 export interface {{ namePascalCase }}DetailsProps {
   id: string | number
diff --git a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Form.tsx.peb b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Form.tsx.peb
index 50b0c85..cbbf716 100644
--- a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Form.tsx.peb
+++ b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Form.tsx.peb
@@ -1,12 +1,12 @@
 import { showError, showInfo } from '@lib/notifications'
-import { Header } from '@components/Header'
+import { Header } from '@components/ui/Header'
 import { gql, OperationResult, useMutation, useQuery } from 'urql'
 import { useMemo } from 'react'
 import { Mutation, Query{%for field in fields%}{%if field.isFieldRelational%}, {{ field.fieldTypePascalCase }}{%endif%}{%endfor%} } from '@generated/graphql'
 import { useFormik } from 'formik'
-import { Error } from '@components/Error'
-import { Loader } from '@components/Loader'
-import { Form } from '@components/Form'
+import { Error } from '@components/ui/Error'
+import { Loader } from '@components/ui/Loader'
+import { Form } from '@components/ui/Form'
 
 export interface {{ namePascalCase }}FormProps {
   id?: string | number{%for field in fields%}{%if field.isFieldRelational%}
diff --git a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]List.tsx.peb b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]List.tsx.peb
index b671aa5..5c34462 100644
--- a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]List.tsx.peb
+++ b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]List.tsx.peb
@@ -1,11 +1,11 @@
 import { askConfirmation, showError, showInfo } from '@lib/notifications'
-import { Header } from '@components/Header'
+import { Header } from '@components/ui/Header'
 import { gql, useMutation, useQuery } from 'urql'
 import { useMemo } from 'react'
 import { Mutation, Query } from '@generated/graphql'
-import { Error } from '@components/Error'
-import { Loader } from '@components/Loader'
-import { List } from '@components/List'
+import { Error } from '@components/ui/Error'
+import { Loader } from '@components/ui/Loader'
+import { List } from '@components/ui/List'
 {%if hasRelations%}
 export interface {{ namePascalCase }}ListProps {{ "{" }}{%for field in fields%}{%if field.isFieldRelational%}
   {{ field.fieldNameCamelCase }}?: string | number{%endif%}{%endfor%}
diff --git a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/pages/[namePluralKebabCase]/index.tsx.peb b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/pages/[namePluralKebabCase]/index.tsx.peb
index fc0a87e..86f1aa9 100644
--- a/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/pages/[namePluralKebabCase]/index.tsx.peb
+++ b/pkg/generator/templates/frontends/react/scaffold/[artifactId]-web/src/pages/[namePluralKebabCase]/index.tsx.peb
@@ -1,6 +1,6 @@
 import { {{namePascalCase}}List } from '@components/app/{{nameKebabCase}}/{{namePascalCase}}List'
 import { DefaultLayout } from '@components/layout/DefaultLayout'
-import { Actions } from '@components/Actions'
+import { Actions } from '@components/ui/Actions'
 
 export default function {{namePluralPascalCase}}() {
   return (