diff --git a/frontend2.html b/frontend2.html
new file mode 100644
index 0000000..60be76f
--- /dev/null
+++ b/frontend2.html
@@ -0,0 +1,383 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
+          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
+          crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+          integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+          crossorigin="anonymous">
+    <title>(2) asdf@asdf.com</title>
+    <link rel="stylesheet" href="spinner.css">
+
+    <style>
+
+        html > body {
+            display: flex;
+            min-height: 100vh;
+            flex-direction: column;
+        }
+
+        .my-address {
+            background-color: #feffed;
+            padding: 0.5rem;
+            cursor: pointer;
+        }
+
+        header {
+            background-color: #f9f9f9;
+            padding-bottom: 1rem;
+            padding-top: 1rem;
+        }
+
+        main {
+            flex: 1; /* stick footer to the bottom */
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+        }
+
+        #language-selection {
+            width: 10rem;
+        }
+
+        footer {
+            padding-top: 3rem;
+            background-color: #dee2e6;
+        }
+
+        .open-collapse-button {
+            background-color: transparent;
+            width: 3rem;
+        }
+
+        .open-collapse-button > i {
+            font-size: 1.5em;
+        }
+
+        [aria-expanded="false"] .expand-button-closed {
+            display: block;
+        }
+
+        [aria-expanded="false"] .expand-button-opened {
+            display: none;
+        }
+
+        [aria-expanded="true"] .expand-button-closed {
+            display: none;
+        }
+
+        [aria-expanded="true"] .expand-button-opened {
+            display: block;
+        }
+
+        #new-content-avalable {
+            /*display: none;*/
+            text-align: center;
+        }
+
+        .email-body {
+            padding-left: 3rem;
+        }
+
+    </style>
+</head>
+<body>
+
+
+<div id="new-content-avalable" class="alert alert-info alert-fixed" role="alert">
+    <!--TODO: alert-fixed does not work -->
+    <strong>New mails</strong> have arrived - <a href="javascript:location.reload();" class="alert-link">reload!</a>
+</div>
+
+
+<header>
+
+    <div class="container">
+
+        <div class="row">
+
+
+            <p class="lead col">
+                Your disposable mailbox
+                <strong class="my-address" id="my-address"
+                        data-tooltip="tooltip" data-placement="top" title="Click to copy address"
+                        data-clipboard-target="#my-address">user@domain.com
+                </strong>
+                is ready.
+                <button type="button" class="btn btn-outline-primary"
+                        data-toggle="collapse" title="choose your own address"
+                        data-target=".change-address-toggle"
+                        data-tooltip="tooltip" aria-controls="address-box-edit" aria-expanded="false">change
+                    address
+                </button>
+                <button type="button" class="btn btn-outline-dark" data-tooltip="tooltip" data-placement="top"
+                        title="open random mailbox"><i class="fas fa-random"></i></button>
+
+            </p>
+            <div class="col-md-auto">
+                <select id="language-selection" class="custom-select float-right " title="Language">
+                    <option selected>English</option>
+                    <option value="1">Deutsch</option>
+                    <option value="2">Two</option>
+                    <option value="3">Three</option>
+                </select>
+            </div>
+        </div>
+
+        <form class="collapse change-address-toggle" id="address-box-edit">
+            <div class="card">
+                <div class="card-body">
+                    Choose your own address:
+                    <div class="form-row align-items-center">
+                        <div class="col-sm">
+                            <label class="sr-only" for="inlineFormInputName">Address</label>
+                            <input type="text" class="form-control" id="inlineFormInputName"
+                                   placeholder="address"
+                                   value="user123">
+                        </div>
+                        <div class="col-sm-4 my-1">
+                            <label class="sr-only" for="inlineFormInputGroupUsername">Domain</label>
+                            <div class="input-group">
+                                <div class="input-group-prepend">
+                                    <div class="input-group-text">@</div>
+                                </div>
+                                <select class="custom-select" id="inlineFormInputGroupUsername">
+                                    <option selected>domain.com</option>
+                                    <option value="3">asdf.com</option>
+                                </select>
+
+                            </div>
+                        </div>
+                        <div class="col-auto my-1">
+                            <button type="submit" class="btn btn-primary">Open mailbox</button>
+                        </div>
+                    </div>
+                    <br>
+                    Or geneate a random email address:
+                    <button type="button" class="btn btn-dark"><i class="fa fa-random"></i> Open random
+                        mailbox
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</header>
+
+<main>
+    <div class="container" id="map">
+
+        <div class="list-group">
+
+
+            <a class="list-group-item list-group-item-action" data-toggle="collapse" href="#mail-box-1"
+               role="button"
+               aria-expanded="false" aria-controls="mail-box-1">
+
+                <div class="media">
+                    <button class="btn btn-white open-collapse-button">
+                        <i class="fas fa-caret-right expand-button-closed"></i>
+                        <i class="fas fa-caret-down expand-button-opened"></i>
+                    </button>
+
+
+                    <div class="media-body">
+                        <h6 class="list-group-item-heading">Myservice Inc, UK <span class="text-muted">newsletter@reply.asdf.com</span>
+                            <small class="float-right">Today</small>
+                        </h6>
+                        <p class="list-group-item-text text-truncate">
+                            Sagen Sie uns Ihre Meinung!
+
+                            <span class="float-right primary">
+                            <button class="btn btn-outline-primary btn-sm">Download</button>
+                            <button class="btn btn-outline-danger btn-sm">Delete</button>
+                        </span>
+                        </p>
+                    </div>
+                </div>
+            </a>
+            <div id="mail-box-1" role="tabpanel" aria-labelledby="headingCollapse1"
+                 class="card-collapse collapse"
+                 aria-expanded="true">
+                <div class="card-body">
+                    <div class="card-block email-body">
+                        <p>Hi Joe</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu erat, luctus
+                            vitae
+                            consectetur imperdiet, congue sit amet purus. Vivamus vel aliquet neque. Aenean
+                            sed luctus
+                            justo, at tempus risus. Cras quis tempus nunc, vitae imperdiet neque. Ut feugiat
+                            risus non
+                            volutpat fermentum. Aliquam consectetur mauris ut leo faucibus, eu varius tortor
+                            posuere.
+                            Morbi dictum nunc quam, blandit viverra mi auctor vitae. Donec ornare venenatis
+                            augue vel
+                            vulputate. Nunc porttitor magna felis, eu suscipit orci auctor varius.
+                            Pellentesque posuere
+                            dolor ex, eu eleifend odio bibendum a. Pellentesque a placerat dolor, vel
+                            ultricies odio.
+                            Nunc feugiat nibh ac vehicula semper. Quisque sit amet aliquet nisi. Curabitur vel
+                            nulla
+                            venenatis, accumsan dolor ut, vestibulum urna. Morbi congue elit facilisis,
+                            vehicula felis
+                            in, placerat erat.
+
+                        <p>Regards,
+                            <br>jim</p>
+                    </div>
+                </div>
+            </div>
+
+
+            <!-- next email -->
+
+            <a class="list-group-item list-group-item-action" data-toggle="collapse" href="#mail-box-2"
+               role="button"
+               aria-expanded="false" aria-controls="mail-box-1">
+
+                <div class="media">
+                    <button class="btn btn-white open-collapse-button">
+                        <i class="fas fa-caret-right expand-button-closed"></i>
+                        <i class="fas fa-caret-down expand-button-opened"></i>
+                    </button>
+
+
+                    <div class="media-body">
+                        <h6 class="list-group-item-heading">Myservice Inc, UK <span class="text-muted">newsletter@reply.asdf.com</span>
+                            <small class="float-right">Today</small>
+                        </h6>
+                        <p class="list-group-item-text text-truncate">
+                            Sagen Sie uns Ihre Meinung!
+
+                            <span class="float-right primary">
+                            <button class="btn btn-outline-primary btn-sm">Download</button>
+                            <button class="btn btn-outline-danger btn-sm">Delete</button>
+                        </span>
+                        </p>
+                    </div>
+                </div>
+            </a>
+            <div id="mail-box-2" role="tabpanel" aria-labelledby="headingCollapse1"
+                 class="card-collapse collapse"
+                 aria-expanded="true">
+                <div class="card-body">
+                    <div class="card-block">
+                        <p>Hi Joe</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu erat, luctus
+                            vitae
+                            consectetur imperdiet, congue sit amet purus. Vivamus vel aliquet neque. Aenean
+                            sed luctus
+                            justo, at tempus risus. Cras quis tempus nunc, vitae imperdiet neque. Ut feugiat
+                            risus non
+                            volutpat fermentum. Aliquam consectetur mauris ut leo faucibus, eu varius tortor
+                            posuere.
+                            Morbi dictum nunc quam, blandit viverra mi auctor vitae. Donec ornare venenatis
+                            augue vel
+                            vulputate. Nunc porttitor magna felis, eu suscipit orci auctor varius.
+                            Pellentesque posuere
+                            dolor ex, eu eleifend odio bibendum a. Pellentesque a placerat dolor, vel
+                            ultricies odio.
+                            Nunc feugiat nibh ac vehicula semper. Quisque sit amet aliquet nisi. Curabitur vel
+                            nulla
+                            venenatis, accumsan dolor ut, vestibulum urna. Morbi congue elit facilisis,
+                            vehicula felis
+                            in, placerat erat.
+
+                        <p>Regards,
+                            <br>jim</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+
+        <hr>
+        <p>Emails will appear here automatically. They will be deleted after 30 days.</p>
+        <div class="spinner">
+            <div class="rect1"></div>
+            <div class="rect2"></div>
+            <div class="rect3"></div>
+            <div class="rect4"></div>
+            <div class="rect5"></div>
+        </div>
+    </div>
+</main>
+
+<footer>
+    <div class="container">
+        <p class="text-justify">This is a disposable mailbox service. Everybody can read all emails.
+            <a class="btn btn-dark btn-sm" data-toggle="collapse" href="#about" role="button"
+               aria-expanded="false"
+               aria-controls="about">
+                Show Details
+            </a>
+        </p>
+        <div class="card card-body collapse" id="about" style="max-width: 40rem">
+
+            <p class="text-justify">This keeps your main mailbox clean from spam.</p>
+
+            <p class="text-justify">Just choose an address and use it on websites you don't trust and don't
+                want to use
+                your
+                main email address.
+                Once you are done, you can just forget about the mailbox. All the spam stays here and does not
+                fill up
+                your
+                main mailbox.
+            </p>
+
+            <p class="text-justify">
+                You select the address you want to use and received emails will be displayed automatically.
+                There is not registration and no passwords. If you know the address, you can read the emails.
+                <strong>Basically, all emails are public. So don't use it for sensitive data.</strong>
+
+
+            </p>
+        </div>
+
+
+        <small>Powered by <a
+                href="https://github.com/synox/disposable-mailbox"><strong>synox/disposable-mailbox</strong></a>
+            | <a href="https://github.com/synox/disposable-mailbox">Contribute to the development on
+                Github.</a></small>
+    </div>
+</footer>
+
+
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+        crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
+        integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
+
+<script>
+    clipboard = new ClipboardJS('#my-address');
+    $(function () {
+        $('[data-tooltip="tooltip"]').tooltip()
+    });
+
+    /** from https://github.com/twbs/bootstrap/blob/c11132351e3e434f6d4ed72e5a418eb692c6a319/assets/js/src/application.js */
+    clipboard.on('success', function (e) {
+        $(e.trigger)
+        .attr('title', 'Copied!')
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle');
+        e.clearSelection();
+    })
+
+
+</script>
+</body>
+</html>
\ No newline at end of file
