diff --git a/app/Providers/ViewServiceProvider.php b/app/Providers/ViewServiceProvider.php
index 38b8b60..c3e2969 100644
--- a/app/Providers/ViewServiceProvider.php
+++ b/app/Providers/ViewServiceProvider.php
@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use App\View\Composers\MallComposer;
+use App\View\Composers\ThemeComposer;
 use Illuminate\Support\Facades;
 use Illuminate\Support\ServiceProvider;
 
@@ -21,6 +22,7 @@ public function register(): void
      */
     public function boot(): void
     {
+        Facades\View::composer('layouts.app', ThemeComposer::class);
         Facades\View::composer('layouts.mall', MallComposer::class);
     }
 }
diff --git a/app/View/Composers/ThemeComposer.php b/app/View/Composers/ThemeComposer.php
new file mode 100644
index 0000000..ca499c0
--- /dev/null
+++ b/app/View/Composers/ThemeComposer.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\View\Composers;
+
+use Illuminate\View\View;
+
+class ThemeComposer
+{
+    /**
+     * Bind data to the view.
+     */
+    public function compose(View $view): void
+    {
+        $view->with('theme', 'classic');
+        $view->with('subTheme', 'normal');
+    }
+}
diff --git a/lang/en/app/register.php b/lang/en/app/register.php
index 2c716a4..10216c5 100644
--- a/lang/en/app/register.php
+++ b/lang/en/app/register.php
@@ -28,4 +28,12 @@
     'form.required' => '* is required',
 
     'form.register-btn' => 'Register',
+
+    'header-form.step-1' => 'Register',
+    'header-form.step-2' => 'Download',
+    'header-form.step-3' => 'Play for free',
+
+    'header-form.hint-username' => 'Only letters and numbers allowed.<br />Length between 5 and 16 characters.',
+    'header-form.hint-email' => 'The activation link will be sent to this address.',
+    'header-form.hint-password' => 'Only letters and numbers allowed.<br />Length between 5 and 16 characters.',
 ];
diff --git a/lang/ro/app/register.php b/lang/ro/app/register.php
index 76fc58d..49af1e4 100644
--- a/lang/ro/app/register.php
+++ b/lang/ro/app/register.php
@@ -28,4 +28,12 @@
     'form.required' => '* este necesar',
 
     'form.register-btn' => 'Înregistrare',
+
+    'header-form.step-1' => 'Înregistrează-te',
+    'header-form.step-2' => 'Descarcă',
+    'header-form.step-3' => 'Joacă gratis',
+
+    'header-form.hint-username' => 'Sunt permise doar litere și cifre.<br />Lungime între 5 și 16 caractere.',
+    'header-form.hint-email' => 'Un link de activare va fi trimis la această adresă.',
+    'header-form.hint-password' => 'Sunt permise doar litere și cifre.<br />Lungime între 5 și 16 caractere.',
 ];
diff --git a/public/assets/main/css/header-classic-btn.css b/public/assets/main/css/header-classic-btn.css
new file mode 100644
index 0000000..5a7cc1b
--- /dev/null
+++ b/public/assets/main/css/header-classic-btn.css
@@ -0,0 +1,60 @@
+.header-wrapper {
+    background: url(../img/header-bg-classic-btn.jpg) no-repeat 50% 0;
+    height: 230px;
+}
+
+.header-box {
+    margin: 160px 0 0 199px;
+}
+
+#userBox {
+    background: url(../img/user-box.jpg) no-repeat;
+    height:66px;
+    margin:125px 0 0 159px;
+    padding:10px 40px;
+    width:535px;
+}
+
+#regBtn {
+    background:url(../img/reg-btn-classic.jpg) no-repeat;
+    display:block;
+    color:#f2e69f;
+    font-size:18px;
+    font-weight:bold;
+    height:38px;
+    line-height:38px;
+    margin:0 auto;
+    text-align:center;
+    text-decoration:none;
+    text-shadow:2px 2px 5px #000000;
+    width:320px;
+}
+#regBtn:hover {background-position:0 -38px;}
+
+.header-box-nav-container{
+    background: url(../img/header-box.png) no-repeat;
+    margin: 2px 0 0 6px;
+}
+
+.welcome-text-left, .welcome-text-right{
+    margin-top: 1px;
+}
+
+.container-wrapper {
+    background: url(../img/container-bg-top-classic-btn.jpg) no-repeat 50% 0;
+}
+
+.col-1, .col-3 {
+    margin: -42px 0 0 11px;
+}
+
+.col-3 {
+    margin: -42px 9px 0 0;
+}
+
+.boxes-top {
+    background: url(../img/box-top-1-classic-btn.jpg) no-repeat;
+}
+.col-3 .boxes-top {
+    background: url(../img/box-top-2-classic-btn.jpg) no-repeat;
+}
diff --git a/public/assets/main/css/header-classic.css b/public/assets/main/css/header-classic.css
new file mode 100644
index 0000000..4ca5d8e
--- /dev/null
+++ b/public/assets/main/css/header-classic.css
@@ -0,0 +1,21 @@
+.header-wrapper {
+    background: url(../img/header-bg-classic.jpg) no-repeat 50% 0;
+    height: 250px;
+}
+
+#header {
+    height: 250px;
+}
+
+.header-box {
+    margin: 130px 0 0 199px;
+}
+
+.header-box-nav-container{
+    background: url(../img/header-box.png) no-repeat;
+    margin: 7px 0 0 6px;
+}
+
+.container-wrapper {
+    background: url(../img/container-bg-top-classic.jpg) no-repeat 50% 0;
+}
diff --git a/public/assets/main/img/box-top-1-classic-btn.jpg b/public/assets/main/img/box-top-1-classic-btn.jpg
new file mode 100644
index 0000000..5931bcd
Binary files /dev/null and b/public/assets/main/img/box-top-1-classic-btn.jpg differ
diff --git a/public/assets/main/img/box-top-2-classic-btn.jpg b/public/assets/main/img/box-top-2-classic-btn.jpg
new file mode 100644
index 0000000..254114c
Binary files /dev/null and b/public/assets/main/img/box-top-2-classic-btn.jpg differ
diff --git a/public/assets/main/img/container-bg-top-classic-btn.jpg b/public/assets/main/img/container-bg-top-classic-btn.jpg
new file mode 100644
index 0000000..d2fcb99
Binary files /dev/null and b/public/assets/main/img/container-bg-top-classic-btn.jpg differ
diff --git a/public/assets/main/img/container-bg-top-classic.jpg b/public/assets/main/img/container-bg-top-classic.jpg
new file mode 100644
index 0000000..3f38728
Binary files /dev/null and b/public/assets/main/img/container-bg-top-classic.jpg differ
diff --git a/public/assets/main/img/container-bg.jpg b/public/assets/main/img/container-bg.jpg
index f30680f..1c06872 100644
Binary files a/public/assets/main/img/container-bg.jpg and b/public/assets/main/img/container-bg.jpg differ
diff --git a/public/assets/main/img/header-bg-classic-btn.jpg b/public/assets/main/img/header-bg-classic-btn.jpg
new file mode 100644
index 0000000..956bda1
Binary files /dev/null and b/public/assets/main/img/header-bg-classic-btn.jpg differ
diff --git a/public/assets/main/img/header-bg-classic.jpg b/public/assets/main/img/header-bg-classic.jpg
new file mode 100644
index 0000000..7b65a54
Binary files /dev/null and b/public/assets/main/img/header-bg-classic.jpg differ
diff --git a/public/assets/main/img/reg-btn-classic.jpg b/public/assets/main/img/reg-btn-classic.jpg
new file mode 100644
index 0000000..d004474
Binary files /dev/null and b/public/assets/main/img/reg-btn-classic.jpg differ
diff --git a/public/assets/main/img/user-box.jpg b/public/assets/main/img/user-box.jpg
new file mode 100644
index 0000000..2029ba8
Binary files /dev/null and b/public/assets/main/img/user-box.jpg differ
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 125e855..9aa99b8 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -10,6 +10,11 @@
     <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" type="image/x-icon" />
     <link href="{{ asset('assets/main/css/reset.css') }}" rel="stylesheet" type="text/css" media="all"/>
     <link href="{{ asset('assets/main/css/all.css') }}" rel="stylesheet" type="text/css" media="all"/>
+    @if ($subTheme == 'classic')
+        <link href="{{ asset('assets/main/css/header-classic.css') }}" rel="stylesheet" type="text/css" media="all"/>
+    @elseif ($subTheme == 'classic-btn')
+        <link href="{{ asset('assets/main/css/header-classic-btn.css') }}" rel="stylesheet" type="text/css" media="all"/>
+    @endif
     <link  href="{{ asset('assets/main/css/plugins.css') }}" rel="stylesheet" type="text/css" media="screen" />
 
     <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="{{ asset('assets/main/css/ie6.css') }}" media="screen"/><![endif]-->
@@ -108,31 +113,102 @@
                 </a>
 
                 @guest
-                    <div class="header-box">
-                        <div id="regBtn">
-                            <a id="toReg" href="{{ url('user/register') }}" title="{{ __('app/main.header.register_alt') }}">
+                    @if ($subTheme == 'classic')
+                        <div class="header-box">
+                            <ul class="top-nav">
+                                <li><span>1</span><a href="{{ url('user/register') }}">{{ __('app/register.header-form.step-1') }}</a></li>
+                                <li><span>2</span><a href="{{ url('main/download') }}">{{ __('app/register.header-form.step-2') }}</a></li>
+                                <li><span>3</span><a href="{{ url('main/howto') }}">{{ __('app/register.header-form.step-3') }}</a></li>
+                            </ul>
+                            <div id="err-register" style="display: none;"></div>
+                            <form action="{{ url('user/register-from-header') }}" method="post">
+                                @csrf
+
+                                <div class="form">
+                                    <fieldset>
+                                        <div class="box">
+                                            <label for="namefield">{{ __('app/register.form.username') }}</label>
+                                            <div class="input"><input type="text" id="namefield" name="header-form-login" maxlength="16" value="" onblur="registrationTooltip(this,'',1,false);" onfocus="registrationTooltip(this,'',1,true);"/></div>
+                                        </div>
+                                        <div class="box">
+                                            <label for="emailfield">{{ __('app/register.form.email') }}</label>
+                                            <div class="input input-2"><input type="text" id="emailfield" name="header-form-email" maxlength="64" value="" onblur="registrationTooltip(this,'',2,false);" onfocus="registrationTooltip(this,'',2,true);"/></div>
+                                        </div>
+                                        <div class="box">
+                                            <label for="pwdfield">{{ __('app/register.form.password') }}</label>
+                                            <div class="input input-3"><input type="password" id="pwdfield" name="header-form-password" maxlength="16" value="" onblur="registrationTooltip(this,'',3,false);" onfocus="registrationTooltip(this,'',3,true);"/></div>
+                                        </div>
+                                        <input type="submit" class="button" value="{{ __('app/register.form.register-btn') }}"/>
+                                    </fieldset>
+                                    <input class="form-agb-box" name="header-form-tac" type="checkbox" value="tac" />
+                                    <div class="agb-label">
+                                        {!! Str::inlineMarkdown(__('app/register.form.terms-and-conditions', ['termsUrl' => url('legal/terms'), 'privacyUrl' => url('legal/privacy')])) !!}
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                        <script type="text/javascript">
+                            function registrationTooltip(elem, text, hint, clear) {
+                                if (clear) {
+                                    if (elem.value === text) {
+                                        elem.value = '';
+                                    }
+
+                                    switch (hint) {
+                                        case 1:
+                                            $("#err-register").html("{!! __('app/register.header-form.hint-username') !!}");
+                                            $("#err-register").css("display", "block");
+                                            break;
+                                        case 2:
+                                            $("#err-register").html("{!! __('app/register.header-form.hint-email') !!}");
+                                            $("#err-register").css("display", "block");
+                                            break;
+                                        case 3:
+                                            $("#err-register").html("{!! __('app/register.header-form.hint-password') !!}");
+                                            $("#err-register").css("display", "block");
+                                            break;
+                                    }
+                                } else {
+                                    if ((elem.value === '') && (text != null)) {
+                                        elem.value = text;
+                                    }
+                                    $("#err-register").css("display", "none");
+                                }
+                            }
+                        </script>
+                    @elseif ($subTheme == 'classic-btn')
+                        <div class="header-box">
+                            <a id="regBtn" href="{{ url('user/register') }}" title="{{ __('app/main.header.register_alt') }}">
                                 {{ __('app/main.header.register') }}
                             </a>
-                            <div id="regSteps">
-                                <a href="{{ url('user/register') }}" title="{{ __('app/main.header.register_alt') }}">
-                                    <span>{{ __('app/main.header.register_steps_1') }}</span> »
-                                    <span>{{ __('app/main.header.register_steps_2') }}</span> »
-                                    <span>{{ __('app/main.header.register_steps_3') }}</span>
-                                </a>
-                            </div>
                         </div>
+                    @elseif ($subTheme == 'normal')
+                        <div class="header-box">
+                            <div id="regBtn">
+                                <a id="toReg" href="{{ url('user/register') }}" title="{{ __('app/main.header.register_alt') }}">
+                                    {{ __('app/main.header.register') }}
+                                </a>
+                                <div id="regSteps">
+                                    <a href="{{ url('user/register') }}" title="{{ __('app/main.header.register_alt') }}">
+                                        <span>{{ __('app/main.header.register_steps_1') }}</span> »
+                                        <span>{{ __('app/main.header.register_steps_2') }}</span> »
+                                        <span>{{ __('app/main.header.register_steps_3') }}</span>
+                                    </a>
+                                </div>
+                            </div>
 
-                        <script type="text/javascript">
-                            $('#regBtn').hover(
-                                function () {
-                                    $(this).addClass("reg-hover");
-                                },
-                                function () {
-                                    $(this).removeClass("reg-hover");
-                                }
-                            );
-                        </script>
-                    </div>
+                            <script type="text/javascript">
+                                $('#regBtn').hover(
+                                    function () {
+                                        $(this).addClass("reg-hover");
+                                    },
+                                    function () {
+                                        $(this).removeClass("reg-hover");
+                                    }
+                                );
+                            </script>
+                        </div>
+                    @endif
                 @else
                     <div id="userBox">
                         <div class="welcome-text welcome-text-left">{{ __('app/main.header.welcome', ['name' => Auth::user()->login]) }}</div>
@@ -300,7 +376,7 @@ function () {
                             </div>
                         </div>
                     </div>
-                    <div class="boxes-bottom"> </div>
+                    <div class="boxes-bottom"></div>
                 </div>
             </div>
         </div>