diff --git a/assets/styles/app.css b/assets/styles/app.css
index dd6181a..b10a881 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1,276 @@
-body {
-    background-color: skyblue;
+@font-face {
+  font-family: "JetBrains";
+  src: 
+      local("JetBrainsMono-Medium.ttf"),
+      url("./fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2"),
+      url("./fonts/JetBrainsMono/JetBrainsMono-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+    font-family: "JetBrains";
+    src:
+        local("JetBrainsMono-MediumItalic.ttf"),
+        url(".fonts/JetBrainsMono/JetBrainsMono-Italic.woff2") format("woff2");
+    font-style: italic;
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "JetBrains";
+    src:
+        local("JetBrainsMono-Bold.ttf"),
+        url("./fonts/JetBrainsMono/JetBrainsMono-Bold.woff2") format("woff2");
+    font-style: normal;
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "JetBrains";
+    src:
+        local("JetBrainsMono-BoldItalic.ttf"),
+        url("./fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2") format("woff2");
+    font-style: italic;
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "JetBrains";
+    src:
+        local("JetBrainsMono-ExtraBold.ttf"),
+        url("./fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2") format("woff2");
+    font-style: normal;
+    font-weight: bolder;
+}
+
+@font-face {
+    font-family: "JetBrains";
+    src:
+        local("JetBrainsMono-ExtraBoldItalic.ttf"),
+        url("./fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
+    font-style: italic;
+    font-weight: bolder;
+}
+
+@font-face {
+    font-family: "JetBrains";
+    src:
+        local("JetBrainsMono-Light.ttf"),
+        url("./fonts/JetBrainsMono/JetBrainsMono-Light.woff2") format("woff2");
+    font-style: normal;
+    font-weight: lighter;
+}
+
+@font-face {
+    font-family: "JetBrains";
+    src:
+        local("JetBrainsMono-LightItalic.ttf"),
+        url("./fonts/JetBrainsMono/JetBrainsMono-LightItalic.woff2") format("woff2");
+    font-style: italic;
+    font-weight: lighter;
+}
+
+
+:root {
+    --color-black: #000000;
+    --color-white: #ffffff;
+    --color-background: #17150E;
+    --color-text: #E0D4A4;
+    --error-color: #FF2A1E;
+    --color-code-background: #383838;
+    --color-th-background: #383838;
+    --color-code: white;
+    --color-link-visited: #E496E7;
+    --color-link-normal: #4880E7;
+    
+    /* fonts */
+    --font-family: "JetBrains";
+    
+    --font-size-standard: 20px;
+    --font-size-h6: 24px;
+    --font-size-h5: 28px;
+    --font-size-h4: 32px;
+    --font-size-h3: 36px;
+    --font-size-h2: 40px;
+    --font-size-h1: 48px;
+    --font-size-td: 20px;
+    --font-size-th: 24px;
+    
+    --font-weight-th: bolder;
+    --font-weight-strong: bolder;
+    
+    --font-style-em: italic;
+}
+
+h6 {
+    font-family: var(--font-family);
+    font-weight: bold;
+    font-size: var(--font-size-h6);
+    text-decoration: none;
+}
+
+h5 {
+    font-family: var(--font-family);
+    font-weight: bold;
+    font-size: var(--font-size-h5);
+    text-decoration: none;
+}
+
+h4 {
+    font-family: var(--font-family);
+    font-weight: bold;
+    font-size: var(--font-size-h4);
+    text-decoration: none;
+}
+
+h3 {
+    font-family: var(--font-family);
+    font-weight: bold;
+    font-size: var(--font-size-h3);
+    text-decoration: none;
+}
+
+h2 {
+    font-family: var(--font-family);
+    font-weight: bolder;
+    font-size: var(--font-size-h2);
+    text-decoration: none;
+}
+
+h1 {
+    font-family: var(--font-family);
+    font-weight: bolder;
+    font-size: var(--font-size-h1);
+    text-decoration: none;
+}
+
+em {
+    font-style: var(--font-style-em);
+}
+
+strong {
+    font-weight: var(--font-weight-strong);
+}
+
+th {
+    background-color: var(--color-th-background);
+    color: var(--color-text);
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-size: var(--font-size-th);
+    font-weight: var(--font-weight-th);
+}
+
+
+td {
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    color: var(--color-text);
+    font-size: var(--font-size-td);
+}
+
+tr {
+    margin: 0px;
+    padding: 0px;
+}
+
+hr,vr {
+    color: var(--color-text);
+}
+
+a,a:hover {
+    text-decoration: underline;
+    color: var(--color-link-normal);
+}
+a:visited {
+    text-decoration: underline;
+    color: var(--color-link-visited);
+}
+
+body {
+    background-color: var(--color-background);
+    color: var(--color-text);
+    font-family: var(--font-family);
+    font-size: 20px;
+}
+
+.left {
+    text-align: left;
+}
+
+
+.center {
+    text-align: center;
+}
+
+.right {
+    text-align: right;
+}
+
+.error {
+    color: var(--error-color);
+}
+
+.frame {
+    border-width: 2px;
+    border-radius: 5px;
+    border-style: solid;
+    border-color: var(--color-text);
+}
+
+.frame-table th,
+.frame-table td {
+    padding: 5px;
+    border-width: 0px;
+}
+.center-box {
+  align-content:center;
+  text-align: center;
+  width: 100%;
+}
+
+.login-box {
+    min-width: 400px;
+    max-width: 600px;
+    position: relative;
+    display: inline-block;
+    padding: 20px;
+}
+
+.full-width {
+    width: 100%;
+}
+
+label {
+    font-size: 16px;
+}
+
+input[type=email],
+input[type=password],
+input[type=text]
+{
+    --color-text: #E0D4A4;
+    --background-color: 
+    height: 20px;
+    font-size: 16px;
+    background-color: var(--color-text);
+    color: var(--color-background);
+    border-radius: 2px;
+    border-width: 0px;
+    width: 100%;
+}
+
+code {
+    background-color: var(--color-code-background);
+    color: var(--color-code);
+}
+
+.td-color {
+    background-color: var(--color-background);
+    color: var(--color-text);
 }
diff --git a/config/packages/security.yaml b/config/packages/security.yaml
index b0c4897..c24e452 100644
--- a/config/packages/security.yaml
+++ b/config/packages/security.yaml
@@ -16,6 +16,16 @@ security:
         main:
             lazy: true
             provider: app_user_provider
+            form_login:
+                login_path: app_login
+                check_path: app_login
+                enable_csrf: true
+            logout:
+                path: app_logout
+                # where to redirect after logout
+                # target: app_any_route
+                # where to redirect after logout
+                # target: app_any_route
 
             # activate different ways to authenticate
             # https://symfony.com/doc/current/security.html#the-firewall
diff --git a/public/.htaccess b/public/.htaccess
new file mode 100644
index 0000000..69abcf2
--- /dev/null
+++ b/public/.htaccess
@@ -0,0 +1,6 @@
+RewriteEngine on
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule "^(.*)$" "/index.php/$1" [L,QSA]
+
+Options FollowSymlinks MultiViews
diff --git a/src/Controller/MainController.php b/src/Controller/MainController.php
new file mode 100644
index 0000000..dad4eaa
--- /dev/null
+++ b/src/Controller/MainController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\HttpKernel\KernelInterface;
+
+class MainController extends AbstractController
+{
+    #[Route('/', name: 'app_main')]
+    public function index(KernelInterface $kernel): Response
+    {
+        //$project_root = $kernel->getProjectDir();
+        
+        //if (!file_exists(join(DIRECTORY_SEPARATOR,[$project_root,'.env.local']))) {
+            //return $this->redirect('/setup');
+        //}
+        
+        return $this->render('main/index.html.twig', [
+            'controller_name' => $kernel->getProjectDir(),
+        ]);
+    }
+}
diff --git a/src/Controller/SecurityController.php b/src/Controller/SecurityController.php
new file mode 100644
index 0000000..76bf5c4
--- /dev/null
+++ b/src/Controller/SecurityController.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;
+
+class SecurityController extends AbstractController
+{
+    #[Route(path: '/login', name: 'app_login')]
+    public function login(AuthenticationUtils $authenticationUtils): Response
+    {
+        // get the login error if there is one
+        $error = $authenticationUtils->getLastAuthenticationError();
+
+        // last username entered by the user
+        $lastUsername = $authenticationUtils->getLastUsername();
+
+        return $this->render('security/login.html.twig', [
+            'last_username' => $lastUsername,
+            'error' => $error,
+        ]);
+    }
+
+    #[Route(path: '/logout', name: 'app_logout')]
+    public function logout(): void
+    {
+        throw new \LogicException('This method can be blank - it will be intercepted by the logout key on your firewall.');
+    }
+}
diff --git a/src/Controller/SetupController.php b/src/Controller/SetupController.php
new file mode 100644
index 0000000..41ed251
--- /dev/null
+++ b/src/Controller/SetupController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class SetupController extends AbstractController
+{
+    #[Route('/setup', name: 'app_setup')]
+    public function index(): Response
+    {
+        return $this->render('setup/index.html.twig', [
+            'controller_name' => 'SetupController',
+        ]);
+    }
+}
diff --git a/src/mydevel/Webroot/Controller/WebrootMainController.php b/src/mydevel/Webroot/Controller/WebrootMainController.php
new file mode 100644
index 0000000..63499a3
--- /dev/null
+++ b/src/mydevel/Webroot/Controller/WebrootMainController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class WebrootMainController extends AbstractController
+{
+    #[Route('/webroot/main', name: 'app_webroot_main')]
+    public function index(): Response
+    {
+        return $this->render('webroot_main/index.html.twig', [
+            'controller_name' => 'WebrootMainController',
+        ]);
+    }
+}
diff --git a/src/mydevel/Webroot/Controller/WebrootSetupController.php b/src/mydevel/Webroot/Controller/WebrootSetupController.php
new file mode 100644
index 0000000..c7d1daa
--- /dev/null
+++ b/src/mydevel/Webroot/Controller/WebrootSetupController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class WebrootSetupController extends AbstractController
+{
+    #[Route('/webroot/setup', name: 'app_webroot_setup')]
+    public function index(): Response
+    {
+        return $this->render('webroot_setup/index.html.twig', [
+            'controller_name' => 'WebrootSetupController',
+        ]);
+    }
+}
diff --git a/templates/main/index.html.twig b/templates/main/index.html.twig
new file mode 100644
index 0000000..6e177bd
--- /dev/null
+++ b/templates/main/index.html.twig
@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello MainController!{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+
+<div class="example-wrapper">
+    <h1>Hello {{ controller_name }}! ✅</h1>
+
+    This friendly message is coming from:
+    <ul>
+        <li>Your controller at <code>C:/msys64/home/c9mos/www/webroot/src/Controller/MainController.php</code></li>
+        <li>Your template at <code>C:/msys64/home/c9mos/www/webroot/templates/main/index.html.twig</code></li>
+    </ul>
+</div>
+{% endblock %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
new file mode 100644
index 0000000..9b6579e
--- /dev/null
+++ b/templates/security/login.html.twig
@@ -0,0 +1,41 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Log in!{% endblock %}
+
+{% block body %}
+    <form method="post">
+        {% if error %}
+            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+        {% endif %}
+
+        {% if app.user %}
+            <div class="mb-3">
+                You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
+            </div>
+        {% endif %}
+
+        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+        <label for="username">Username</label>
+        <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
+        <label for="password">Password</label>
+        <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
+
+        <input type="hidden" name="_csrf_token"
+               value="{{ csrf_token('authenticate') }}"
+        >
+
+        {#
+            Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
+            See https://symfony.com/doc/current/security/remember_me.html
+
+            <div class="checkbox mb-3">
+                <input type="checkbox" name="_remember_me" id="_remember_me">
+                <label for="_remember_me">Remember me</label>
+            </div>
+        #}
+
+        <button class="btn btn-lg btn-primary" type="submit">
+            Sign in
+        </button>
+    </form>
+{% endblock %}
diff --git a/templates/setup/index.html.twig b/templates/setup/index.html.twig
new file mode 100644
index 0000000..5113a9a
--- /dev/null
+++ b/templates/setup/index.html.twig
@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello SetupController!{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+
+<div class="example-wrapper">
+    <h1>Hello {{ controller_name }}! ✅</h1>
+
+    This friendly message is coming from:
+    <ul>
+        <li>Your controller at <code>C:/msys64/home/c9mos/www/webroot/src/Controller/SetupController.php</code></li>
+        <li>Your template at <code>C:/msys64/home/c9mos/www/webroot/templates/setup/index.html.twig</code></li>
+    </ul>
+</div>
+{% endblock %}
diff --git a/templates/webroot_main/index.html.twig b/templates/webroot_main/index.html.twig
new file mode 100644
index 0000000..74e6697
--- /dev/null
+++ b/templates/webroot_main/index.html.twig
@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello WebrootMainController!{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+
+<div class="example-wrapper">
+    <h1>Hello {{ controller_name }}! ✅</h1>
+
+    This friendly message is coming from:
+    <ul>
+        <li>Your controller at <code>C:/msys64/home/c9mos/www/webroot/src/Controller/WebrootMainController.php</code></li>
+        <li>Your template at <code>C:/msys64/home/c9mos/www/webroot/templates/webroot_main/index.html.twig</code></li>
+    </ul>
+</div>
+{% endblock %}
diff --git a/templates/webroot_setup/index.html.twig b/templates/webroot_setup/index.html.twig
new file mode 100644
index 0000000..9f184f0
--- /dev/null
+++ b/templates/webroot_setup/index.html.twig
@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello WebrootSetupController!{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+
+<div class="example-wrapper">
+    <h1>Hello {{ controller_name }}! ✅</h1>
+
+    This friendly message is coming from:
+    <ul>
+        <li>Your controller at <code>C:/msys64/home/c9mos/www/webroot/src/Controller/WebrootSetupController.php</code></li>
+        <li>Your template at <code>C:/msys64/home/c9mos/www/webroot/templates/webroot_setup/index.html.twig</code></li>
+    </ul>
+</div>
+{% endblock %}
diff --git a/templates/webrootlogin/login.html.twig b/templates/webrootlogin/login.html.twig
new file mode 100644
index 0000000..9b6579e
--- /dev/null
+++ b/templates/webrootlogin/login.html.twig
@@ -0,0 +1,41 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Log in!{% endblock %}
+
+{% block body %}
+    <form method="post">
+        {% if error %}
+            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+        {% endif %}
+
+        {% if app.user %}
+            <div class="mb-3">
+                You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
+            </div>
+        {% endif %}
+
+        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+        <label for="username">Username</label>
+        <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
+        <label for="password">Password</label>
+        <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
+
+        <input type="hidden" name="_csrf_token"
+               value="{{ csrf_token('authenticate') }}"
+        >
+
+        {#
+            Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
+            See https://symfony.com/doc/current/security/remember_me.html
+
+            <div class="checkbox mb-3">
+                <input type="checkbox" name="_remember_me" id="_remember_me">
+                <label for="_remember_me">Remember me</label>
+            </div>
+        #}
+
+        <button class="btn btn-lg btn-primary" type="submit">
+            Sign in
+        </button>
+    </form>
+{% endblock %}