diff --git a/package.json b/package.json
index 20fb5d5..189611c 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,13 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^4.1.1",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-beta.3",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29..87a8317 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,4 @@
+.app-content {
+  padding: 20px;
+}
+
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b6931b5..60a7aa8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,22 @@
-<h1>
-  {{title}}
-</h1>
+<md-toolbar color="primary">
+  <span>Log Manager</span>
+  <span style="flex: 1 1 auto;"></span>
+  <span><button md-raised-button color="warn">Выхода нет</button></span>
+</md-toolbar>
+
+<md-card>
+  <md-input-container>
+    <input mdInput placeholder="Пароль" type="password">
+  </md-input-container>
+  <button (click)="showCon=!showCon" md-raised-button>Расшифровать заголовки</button>
+</md-card>
+
+<div *ngIf="showCon;else empty" class="app-content">
+  <md-card>
+    <md-checkbox>Kek</md-checkbox><p></p>
+    <button md-raised-button>Toggle</button>
+  </md-card>
+</div>
+
+<ng-template #empty>
+</ng-template>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ff63e05..d123a4d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  //title = 'app works!';
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 67ae491..fcf57fe 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,8 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MdButtonModule, MdCheckboxModule, MdToolbarModule, MdSidenavModule, MdCardModule} from '@angular/material';
 
 import { AppComponent } from './app.component';
+import { MdInputModule } from "@angular/material";
 
 @NgModule({
   declarations: [
@@ -12,7 +15,14 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    BrowserAnimationsModule,
+    HttpModule,
+    MdButtonModule,
+    MdCheckboxModule,
+    MdToolbarModule,
+    MdSidenavModule,
+    MdCardModule,
+    MdInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/index.html b/src/index.html
index 070a9b6..3ee9d36 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,13 +2,13 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>MyDayz</title>
+  <title>Log Manager</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body style="margin: 0;">
   <app-root>Loading...</app-root>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..3063ec3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
