diff --git a/pom.xml b/pom.xml
index 03acbe264c7443b99d400f5a34f7e8de61dd122f..e0f6309be36885dedced625ffd70b4e941e3cddd 100644
--- a/pom.xml
+++ b/pom.xml
@@ -23,6 +23,11 @@
     </properties>
 
     <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-freemarker</artifactId>
+        </dependency>
+
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
diff --git a/src/main/java/de/deadlocker8/budgetmaster/Main.java b/src/main/java/de/deadlocker8/budgetmaster/Main.java
index 68f1c48fd2d2410413d0ac68dd823e0ffa8c96bf..5b24672164c9f4d51ba1ca46676a5084d506886a 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/Main.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/Main.java
@@ -1,9 +1,17 @@
 package de.deadlocker8.budgetmaster;
 
+import de.deadlocker8.budgetmaster.logic.utils.Strings;
+import logger.FileOutputMode;
+import logger.Logger;
 import org.springframework.boot.ApplicationArguments;
 import org.springframework.boot.ApplicationRunner;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import tools.Localization;
+import tools.PathUtils;
+
+import java.io.File;
+import java.util.Locale;
 
 
 @SpringBootApplication
@@ -17,7 +25,8 @@ public class Main implements ApplicationRunner
 	@Override
 	public void run(ApplicationArguments args) throws Exception
 	{
-//		Localization.init("de/deadlocker8/budgetmaster/languages/");
+		//TODO: disabled due to #280 - Spring log messages are consumed by Logger
+//		Localization.init("languages/");
 //		Localization.loadLanguage(Locale.ENGLISH);
 //
 //		String logLevelParam = args.getOptionValues("loglevel").get(0);
diff --git a/src/main/java/de/deadlocker8/budgetmaster/controller/TestController.java b/src/main/java/de/deadlocker8/budgetmaster/controller/IndexController.java
similarity index 64%
rename from src/main/java/de/deadlocker8/budgetmaster/controller/TestController.java
rename to src/main/java/de/deadlocker8/budgetmaster/controller/IndexController.java
index 3f2e448b4b4f7abdaa307086bb277114cd742daa..47684ea7d9d46c828b2875b971cc57c279d367c4 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/controller/TestController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/controller/IndexController.java
@@ -4,11 +4,11 @@ import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 
 @Controller
-public class TestController
+public class IndexController
 {
-	@RequestMapping("/hello")
-	public String greeting()
+	@RequestMapping("/")
+	public  String index()
 	{
-		return "greeting";
+		return "index";
 	}
 }
\ No newline at end of file
diff --git a/src/main/java/de/deadlocker8/budgetmaster/controller/LoginController.java b/src/main/java/de/deadlocker8/budgetmaster/controller/LoginController.java
new file mode 100644
index 0000000000000000000000000000000000000000..53d11fb0e12cd7280b23dbfeacc65307ef722eb9
--- /dev/null
+++ b/src/main/java/de/deadlocker8/budgetmaster/controller/LoginController.java
@@ -0,0 +1,14 @@
+package de.deadlocker8.budgetmaster.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+public class LoginController
+{
+	@RequestMapping("/login")
+	public String login()
+	{
+		return "login";
+	}
+}
\ No newline at end of file
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
new file mode 100644
index 0000000000000000000000000000000000000000..107dcd93606afb514204d6ee2fc2b41507f56ad8
--- /dev/null
+++ b/src/main/resources/application.properties
@@ -0,0 +1,4 @@
+server.port=9000
+
+spring.freemarker.template-loader-path=classpath:/templates
+spring.freemarker.suffix=.ftl
\ No newline at end of file
diff --git a/src/main/resources/de/deadlocker8/budgetmaster/icon.png b/src/main/resources/de/deadlocker8/budgetmaster/icon.png
deleted file mode 100644
index be71fa009b5091dc1b6cdd99c2c171609d25339e..0000000000000000000000000000000000000000
Binary files a/src/main/resources/de/deadlocker8/budgetmaster/icon.png and /dev/null differ
diff --git a/src/main/resources/de/deadlocker8/budgetmaster/languages/_de.properties b/src/main/resources/languages/_de.properties
similarity index 100%
rename from src/main/resources/de/deadlocker8/budgetmaster/languages/_de.properties
rename to src/main/resources/languages/_de.properties
diff --git a/src/main/resources/de/deadlocker8/budgetmaster/languages/_en.properties b/src/main/resources/languages/_en.properties
similarity index 100%
rename from src/main/resources/de/deadlocker8/budgetmaster/languages/_en.properties
rename to src/main/resources/languages/_en.properties
diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css
new file mode 100644
index 0000000000000000000000000000000000000000..3c25e5685a3bb4574e3e73d10dcba3b72e519392
--- /dev/null
+++ b/src/main/resources/static/css/login.css
@@ -0,0 +1,33 @@
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 0 auto;
+}
+
+#logo-container {
+    height: 12vmin;
+}
+
+#logo {
+    max-height: 10vmin;
+}
+
+/* label focus color */
+.input-field input[type=password]:focus + label {
+    color: #212121 !important;
+}
+/* label underline focus color */
+.input-field input[type=password]:focus {
+    border-bottom: 1px solid #212121 !important;
+    box-shadow: 0 1px 0 0 #CCCCCC !important;
+}
+
+.full-height {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..24650f85a79fe4e328398d1012dd8b2a12cb8de7
--- /dev/null
+++ b/src/main/resources/static/css/main.css
@@ -0,0 +1,19 @@
+.budgetmaster-blue {
+    background-color: #2E79B9;
+}
+
+.budgetmaster-blue-text {
+    color: #2E79B9;
+}
+
+.budgetmaster-blue-light {
+    background-color: rgba(46, 121, 185, 0.8);
+}
+
+.btn:hover {
+	background-color: #70A3CF;
+}
+
+.bold {
+	font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..b0481a6d13afce94dfb0533aa53adb7b3e30d6e8
--- /dev/null
+++ b/src/main/resources/static/css/style.css
@@ -0,0 +1,101 @@
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+header, main, footer {
+    margin-left: 350px;
+}
+
+@media only screen and (max-width: 992px) {
+    header, main, footer {
+        margin-left: 0;
+    }
+}
+
+main {
+    flex: 1 0 auto;
+}
+
+.main-card {
+    margin: auto;
+    width: 95%;
+    padding: 2rem;
+}
+
+#nav-logo-container {
+    padding: 10px 0 10px 10px;
+    height: 100px !important;
+}
+
+#nav-logo {
+    max-height: 80px;
+}
+
+#logo {
+    max-height: 100px;
+}
+
+.page-footer {
+    padding-top: 0;
+}
+
+.nav-padding {
+    padding: 0 0 0 32px !important;
+}
+
+.no-padding {
+    padding: 0;
+}
+
+.no-margin-bottom {
+    margin-bottom: 0;
+}
+
+.text-red {
+    color: #D82C29;
+}
+
+.text-green {
+    color: #5cb85c;
+}
+
+.color-red {
+    background-color: #D82C29;
+}
+
+.color-green {
+    background-color: #5cb85c;
+}
+
+.budget-bar-container {
+    margin: auto;
+    width: 85%;
+    height: 3%;
+}
+
+.budget-bar {
+    height: 100%;
+}
+
+.icon-budget {
+    font-size: 5.5vmin !important;
+}
+
+.icon-chevron {
+    font-size: 6vmin !important;
+}
+
+.date {
+    font-size: 4vmin;
+    text-transform: capitalize;
+}
+
+.budget-headline {
+    font-size: 2.5vmin;
+}
+
+.budget {
+    font-size: 3.5vmin;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/images/Logo.png b/src/main/resources/static/images/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ff7d25dfd01ac049876fefa71618f9abf0af3b2
Binary files /dev/null and b/src/main/resources/static/images/Logo.png differ
diff --git a/src/main/resources/static/images/Logo_with_text.png b/src/main/resources/static/images/Logo_with_text.png
new file mode 100644
index 0000000000000000000000000000000000000000..117cde86d948ee4916497efe552cbc91ef2b86e7
Binary files /dev/null and b/src/main/resources/static/images/Logo_with_text.png differ
diff --git a/src/main/resources/static/js/main.js b/src/main/resources/static/js/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..831194ff07c2fe89012cef584439e5b74be99b52
--- /dev/null
+++ b/src/main/resources/static/js/main.js
@@ -0,0 +1,5 @@
+$( document ).ready(function() {
+    $(".button-collapse").sideNav({
+        menuWidth: 350, // Default is 300
+    });
+});
\ No newline at end of file
diff --git a/src/main/resources/templates/index.ftl b/src/main/resources/templates/index.ftl
new file mode 100644
index 0000000000000000000000000000000000000000..c072ce5da5bdeeda81050543161baeea81cd032c
--- /dev/null
+++ b/src/main/resources/templates/index.ftl
@@ -0,0 +1,98 @@
+<html>
+    <head>
+        <title>BudgetMaster</title>
+        <meta charset="UTF-8"/>
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
+        <link type="text/css" rel="stylesheet" href="/css/main.css"/>
+        <link type="text/css" rel="stylesheet" href="/css/style.css"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    </head>
+    <body class="budgetmaster-blue-light">
+        <ul id="slide-out" class="side-nav fixed">
+            <li><a href="" class="waves-effect" id="nav-logo-container"><img id="nav-logo" src="/images/Logo_with_text.png"></a></li>
+            <li><div class="divider"></div></li>
+            <li class="active"><a href="#!" class="waves-effect"><i class="material-icons">home</i>Startseite</a></li>
+            <li><a href="#!" class="waves-effect"><i class="material-icons">list</i>Buchungen</a></li>
+            <li>
+                <ul class="collapsible collapsible-accordion no-padding">
+                    <li>
+                        <a class="collapsible-header nav-padding"><i class="material-icons">show_chart</i>Diagramme</a>
+                        <div class="collapsible-body nav-padding">
+                            <ul>
+                                <li><a href="#!" class="waves-effect">Eingaben/Ausgaben nach Kategorien</a></li>
+                                <li><a href="#!" class="waves-effect">Eingaben/Ausgaben pro Monat</a></li>
+                                <li><a href="#!" class="waves-effect">Eingaben/Ausgaben nach Tags</a></li>
+                                <li><a href="#!" class="waves-effect">Verbrauch nach Kategorien</a></li>
+                                <li><a href="#!" class="waves-effect">Histogramm</a></li>
+                            </ul>
+                        </div>
+                    </li>
+                </ul>
+            </li>
+            <li><a href="#!" class="waves-effect"><i class="material-icons">description</i>Berichte</a></li>
+            <li><a href="#!" class="waves-effect"><i class="material-icons">label</i>Kategorien</a></li>
+            <li><a href="#!" class="waves-effect"><i class="material-icons">settings</i>Einstellungen</a></li>
+            <li><div class="divider"></div></li>
+            <li><a href="#!" class="waves-effect"><i class="material-icons">lock</i>Logout</a></li>
+        </ul>
+        <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
+
+        <main>
+            <div class="card main-card">
+                <div class="container">
+                    <div class="section center-align">
+                        <a href="" class="waves-effect grey-text text-darken-4"><i class="material-icons icon-chevron">chevron_left</i></a>
+                        <a href="" class="waves-effect grey-text text-darken-4 date">September 2018</a>
+                        <a href="" class="waves-effect grey-text text-darken-4"><i class="material-icons icon-chevron">chevron_right</i></a>
+                    </div>
+                </div>
+                <div class="hide-on-small-only"><br></div>
+                <div class="container">
+                    <div class="row">
+                        <div class="col s12 m4">
+                            <div class="icon-block">
+                                <h1 class="center text-green"><i class="material-icons icon-budget">file_download</i></h1>
+                                <h5 class="center budget">2350,15 €</h5>
+                                <h5 class="center grey-text text-darken-1 budget-headline">Einnahmen</h5>
+                            </div>
+                        </div>
+                        <div class="col s12 m4">
+                            <div class="icon-block">
+                                <h1 class="center text-red"><i class="material-icons icon-budget">file_upload</i></h1>
+                                <h5 class="center budget">-576,33 €</h5>
+                                <h5 class="center grey-text text-darken-1 budget-headline">Ausgaben</h5>
+                            </div>
+                        </div>
+                        <div class="col s12 m4">
+                            <div class="icon-block">
+                                <h1 class="center budgetmaster-blue-text"><i class="material-icons icon-budget">account_balance</i></h1>
+                                <h5 class="center budget">1773,82 €</h5>
+                                <h5 class="center grey-text text-darken-1 budget-headline">Rest</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="hide-on-small-only"><br><br></div>
+                    <div class="row">
+                        <div class="col s12">
+                            <div class="budget-bar-container">
+                                <div class="budget-bar color-green" style="width: 100%"></div>
+                            </div>
+                            <div class="budget-bar-container">
+                                <div class="budget-bar color-red" style="width: 25%"></div>
+                            </div>
+                            <div class="budget-bar-container">
+                                <div class="budget-bar budgetmaster-blue" style="width: 75%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!--  Scripts-->
+        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+        <script src="/js/main.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/login.ftl b/src/main/resources/templates/login.ftl
new file mode 100644
index 0000000000000000000000000000000000000000..08c32a87fc25f423ec48a8535ded018fa1c6530b
--- /dev/null
+++ b/src/main/resources/templates/login.ftl
@@ -0,0 +1,41 @@
+<html>
+    <head>
+        <title>BudgetMaster - Login</title>
+        <meta charset="UTF-8"/>
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
+        <link type="text/css" rel="stylesheet" href="/css/main.css"/>
+        <link type="text/css" rel="stylesheet" href="/css/login.css"/>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    </head>
+    <body class="budgetmaster-blue-light">
+        <main>
+            <div class="row valign-wrapper full-height">
+                <div class="col l4 offset-l4 m6 offset-m3 s10 offset-s1">
+                    <div class="card">
+                        <div class="card-content">
+                            <span class="card-title">
+                                <div id="logo-container" class="center-align"><img id="logo" src="/images/Logo_with_text.png"></div>
+                            </span>
+                            <div class="row">
+                                <div class="input-field col s12">
+                                    <input id="password" type="password" class="validate">
+                                    <label for="password">Passwort</label>
+                                </div>
+                            </div>
+                            <div class="right-align">
+                                <a class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons right">send</i>Login</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+    <!--  Scripts-->
+    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+    <script src="/js/main.js"></script>
+    </body>
+</html>
\ No newline at end of file