diff --git a/templates/Binarity/Resources/assets/css/app.css b/templates/Binarity/Resources/assets/css/app.css
index 90085b44..199b6fa4 100644
--- a/templates/Binarity/Resources/assets/css/app.css
+++ b/templates/Binarity/Resources/assets/css/app.css
@@ -46,7 +46,7 @@ audio:not([controls]) {
 
 a {
 	background-color: transparent;
-	color: #8aa800;
+	color: #7cad2a;
 	text-decoration: none;
 	line-height: inherit;
 	cursor: pointer;
@@ -1818,7 +1818,7 @@ h1,h2,h3,h4,h5,h6 {
 	font-family: "Hind Siliguri", Helvetica, Roboto, Arial, sans-serif;
 	font-weight: 500;
 	font-style: normal;
-	color: #8aa800;
+	color: #7cad2a;
 	text-rendering: optimizeLegibility;
 	margin-top: 0;
 	margin-bottom: 0.5rem;
@@ -2166,7 +2166,7 @@ p + .stat {
 	color: #fefefe;
 }
 .button.success {
-	background-color: #8aa800;
+	background-color: #7cad2a;
 	color: #fefefe;
 }
 .button.success:hover,.button.success:focus {
@@ -2217,8 +2217,8 @@ p + .stat {
 	color: #3c3c3c;
 }
 .button.hollow.success {
-	border: 1px solid #8aa800;
-	color: #8aa800;
+	border: 1px solid #7cad2a;
+	color: #7cad2a;
 }
 .button.hollow.success:hover,.button.hollow.success:focus {
 	border-color: #455400;
@@ -2269,7 +2269,7 @@ p + .stat {
 	width: 100%;
 	height: 2.4375rem;
 	padding: 0.5rem;
-	border: 1px solid #8aa800;
+	border: 1px solid #7cad2a;
 	margin: 0 0 1rem;
 	font-family: inherit;
 	font-size: 1rem;
@@ -2282,7 +2282,7 @@ p + .stat {
 	-moz-appearance: none;
 }
 [type='text']:focus,[type='password']:focus,[type='date']:focus,[type='datetime']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='week']:focus,[type='email']:focus,[type='number']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='url']:focus,[type='color']:focus,textarea:focus {
-	border: 2px solid #8aa800;
+	border: 2px solid #7cad2a;
 	background-color: #fefefe;
 	outline: none;
 	box-shadow: 0 0 5px #414042;
@@ -2530,7 +2530,7 @@ select[multiple] {
 	color: #fefefe;
 }
 .badge.success {
-	background: #8aa800;
+	background: #7cad2a;
 	color: #fefefe;
 }
 .badge.warning {
@@ -2652,7 +2652,7 @@ select[multiple] {
 	color: #fefefe;
 }
 .button-group.success .button {
-	background-color: #8aa800;
+	background-color: #7cad2a;
 	color: #fefefe;
 }
 .button-group.success .button:hover,.button-group.success .button:focus {
@@ -3052,7 +3052,7 @@ select[multiple] {
 	width: 0;
 	height: 0;
 	border: inset 5px;
-	border-color: #8aa800 transparent transparent;
+	border-color: #7cad2a transparent transparent;
 	border-top-style: solid;
 	border-bottom-width: 0;
 	right: 5px;
@@ -3085,7 +3085,7 @@ select[multiple] {
 	width: 0;
 	height: 0;
 	border: inset 5px;
-	border-color: transparent #8aa800 transparent transparent;
+	border-color: transparent #7cad2a transparent transparent;
 	border-right-style: solid;
 	border-left-width: 0;
 }
@@ -3095,7 +3095,7 @@ select[multiple] {
 	width: 0;
 	height: 0;
 	border: inset 5px;
-	border-color: transparent transparent transparent #8aa800;
+	border-color: transparent transparent transparent #7cad2a;
 	border-left-style: solid;
 	border-right-width: 0;
 }
@@ -3122,7 +3122,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -3149,7 +3149,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -3159,7 +3159,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -3188,7 +3188,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -3215,7 +3215,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -3225,7 +3225,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -3254,7 +3254,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -3281,7 +3281,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -3291,7 +3291,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -3320,7 +3320,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -3347,7 +3347,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -3357,7 +3357,7 @@ select[multiple] {
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -3410,7 +3410,7 @@ select[multiple] {
 	width: 0;
 	height: 0;
 	border: inset 5px;
-	border-color: transparent #8aa800 transparent transparent;
+	border-color: transparent #7cad2a transparent transparent;
 	border-right-style: solid;
 	border-left-width: 0;
 }
@@ -3420,7 +3420,7 @@ select[multiple] {
 	width: 0;
 	height: 0;
 	border: inset 5px;
-	border-color: transparent transparent transparent #8aa800;
+	border-color: transparent transparent transparent #7cad2a;
 	border-left-style: solid;
 	border-right-width: 0;
 }
@@ -3469,7 +3469,7 @@ select[multiple] {
 	color: #fefefe;
 }
 .label.success {
-	background: #8aa800;
+	background: #7cad2a;
 	color: #fefefe;
 }
 .label.warning {
@@ -3563,7 +3563,7 @@ html,body {
 }
 .off-canvas {
 	position: fixed;
-	background: #8aa800;
+	background: #7cad2a;
 	z-index: 50;
 	max-height: 100%;
 	overflow-y: auto;
@@ -3837,7 +3837,7 @@ html,body {
 	background-color: #777;
 }
 .progress.success .progress-meter {
-	background-color: #8aa800;
+	background-color: #7cad2a;
 }
 .progress.warning .progress-meter {
 	background-color: #ffc339;
@@ -4349,7 +4349,7 @@ table.hover tr:nth-of-type(even):hover {
 	background: #0a0a0a;
 	color: #fefefe;
 	padding: 0.5rem;
-	background-color: #8aa800;
+	background-color: #7cad2a;
 	margin-bottom: 25px;
 	width: 100%;
 	z-index: 1000;
@@ -5404,6 +5404,9 @@ table.hover tr:nth-of-type(even):hover {
 .m-l-40 {
 	margin-left: 40px;
 }
+.p-0 {
+	padding: 0;
+}
 .p-lr-15 {
 	padding-left: 15px;
 	padding-right: 15px;
@@ -5460,7 +5463,7 @@ table.hover tr:nth-of-type(even):hover {
 	text-decoration: underline;
 }
 .green-text {
-	color: #8aa800 !important;
+	color: #7cad2a !important;
 }
 .white-text {
 	color: #fefefe !important;
@@ -5601,14 +5604,14 @@ textarea,textarea:focus {
 	text-transform: uppercase;
 }
 .member-list {
-	border-right: 2px solid #8aa800;
+	border-right: 2px solid #7cad2a;
 }
 .member {
 	margin-bottom: 15px;
 	clear: both;
 }
 .contact-address {
-	background-color: #8aa800;
+	background-color: #7cad2a;
 }
 .contact-address div {
 	margin: 15px auto;
@@ -5689,24 +5692,24 @@ a#responsive-menu-button {
 a#responsive-menu-button:hover {
 	text-decoration: none;
 }
-footer {
+#footer {
 	width: 100%;
 	display: block;
-	background-color: #8aa800;
+	background-color: #7cad2a;
 	text-align: center;
 }
-footer .social-icons {
+#footer .social-icons {
 	margin: 20px auto 0;
 	float: none;
 	display: inline-block;
 }
-footer .binarity-info {
+#footer .binarity-info {
 	margin: 5px auto 20px;
 	float: none;
 	display: inline-block;
 	text-align: center;
 }
-footer .binarity-info:before {
+#footer .binarity-info:before {
 	content: '';
 	width: 50px;
 	position: relative;
@@ -6096,7 +6099,7 @@ footer .binarity-info:before {
 		font-size: 1.7rem;
 	}
 	.off-canvas#responsive-menu .main-menu.menu > li > a:hover,.off-canvas#responsive-menu .main-menu.menu > li.active > a {
-		color: #8aa800;
+		color: #7cad2a;
 	}
 	.off-canvas#responsive-menu .main-menu.menu > li.active > a {
 		font-size: 2.2rem;
@@ -6301,7 +6304,7 @@ footer .binarity-info:before {
 .dark-background table tbody tr td:first-child:before {
 	content: '•';
 	margin-right: 5px;
-	color: #8aa800;
+	color: #7cad2a;
 }
 
 
@@ -6348,7 +6351,7 @@ footer .binarity-info:before {
 }
 .outline {
 	position: absolute;
-	width: 165px;
+	width: 166px;
 	height: 137px;
 	z-index: 2;
 	background: url(../images/hexagon_green_outline.png);
@@ -7955,7 +7958,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -7982,7 +7985,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -7992,7 +7995,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -8021,7 +8024,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -8048,7 +8051,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -8058,7 +8061,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -8087,7 +8090,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -8114,7 +8117,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -8124,7 +8127,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -8153,7 +8156,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: #8aa800 transparent transparent;
+		border-color: #7cad2a transparent transparent;
 		border-top-style: solid;
 		border-bottom-width: 0;
 		right: 5px;
@@ -8180,7 +8183,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent #8aa800 transparent transparent;
+		border-color: transparent #7cad2a transparent transparent;
 		border-right-style: solid;
 		border-left-width: 0;
 	}
@@ -8190,7 +8193,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		width: 0;
 		height: 0;
 		border: inset 5px;
-		border-color: transparent transparent transparent #8aa800;
+		border-color: transparent transparent transparent #7cad2a;
 		border-left-style: solid;
 		border-right-width: 0;
 	}
@@ -9107,7 +9110,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 		font-size: 1.7rem;
 	}
 	.off-canvas#responsive-menu .main-menu.menu > li > a:hover,.off-canvas#responsive-menu .main-menu.menu > li.active > a {
-		color: #8aa800;
+		color: #7cad2a;
 	}
 	.off-canvas#responsive-menu .main-menu.menu > li.active > a {
 		font-size: 2.2rem;
@@ -9260,7 +9263,6 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 
 
 @media (max-width: 400px) {
-
 	.title-bar-title img {
 		width: 100px;
 		height: auto;
@@ -9278,3 +9280,29 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
 }
 
 
+
+.article-list-item .date.big {
+	font-size: 4em;
+	line-height: 1em;
+}
+
+.article-list-item .gravatar {
+	border-radius: 50%;
+}
+
+.article-list-item .author {
+	line-height: 1;
+	text-align: center;
+}
+
+
+.article-list-item article {
+	padding: 0;
+	padding-right: 15px;
+}
+
+.article-list-item footer {
+	font-weight: bold; font-size: 120%;
+	padding: 0;
+	padding-right: 15px;
+}
\ No newline at end of file
diff --git a/templates/Binarity/Resources/assets/images/hexagon_green.png b/templates/Binarity/Resources/assets/images/hexagon_green.png
index 3f2d1b0f..ab4866a7 100644
Binary files a/templates/Binarity/Resources/assets/images/hexagon_green.png and b/templates/Binarity/Resources/assets/images/hexagon_green.png differ
diff --git a/templates/Binarity/Resources/assets/images/hexagon_green_outline.png b/templates/Binarity/Resources/assets/images/hexagon_green_outline.png
index 8f4fb533..20bceabc 100644
Binary files a/templates/Binarity/Resources/assets/images/hexagon_green_outline.png and b/templates/Binarity/Resources/assets/images/hexagon_green_outline.png differ
diff --git a/templates/Binarity/Resources/assets/images/menu_logo.png b/templates/Binarity/Resources/assets/images/menu_logo.png
index 54d16d31..5752e5eb 100644
Binary files a/templates/Binarity/Resources/assets/images/menu_logo.png and b/templates/Binarity/Resources/assets/images/menu_logo.png differ
diff --git a/templates/Binarity/Resources/views/modules/article/visitor/default.blade.php b/templates/Binarity/Resources/views/modules/article/visitor/default.blade.php
index 901e8526..adbbb08c 100644
--- a/templates/Binarity/Resources/views/modules/article/visitor/default.blade.php
+++ b/templates/Binarity/Resources/views/modules/article/visitor/default.blade.php
@@ -3,18 +3,67 @@
 @include(\App\Helpers\Template::name('metaInformation'))
 
 @section('content')
-    <h1 class="text-center uppercase m-b-25">{{$page->title}}</h1>
 
-    <div class="row">
-        {!! $page->content !!}
+    <div class="row article-list-item">
+        <aside class="column text-right large-1">
+            <div class="date">
+                <span class="date day big">@customDate('j', $page->created_at)</span>
+                <br>
+                <span class="date uppercase month">@monthName($page->created_at)</span>
+            </div>
+            <div class="m-t-25 author">
+                <img class="gravatar" src="@gravatar($page->author->email, 50)" alt="">
+                <br />
+                <small>{{$page->author->name}}</small>
 
-        @forelse($page->comments as $comment)
-            {{$comment->author}}: {{$comment->content}}
-        @empty
-            <div class="callout info">Nic tu neni.</div>
-        @endforelse
+            </div>
+        </aside>
+        <div class="column large-11">
+            <h1>{{$page->title}}</h1>
 
+            <article class="text-justify">
+                {!! $page->content !!}
+            </article>
+        </div>
+    </div>
+    <div class="row m-t-50">
 
+        <h3>Komentáře</h3>
+        @foreach($page->comments as $comment)
+            <img src="@gravatar($comment->author->email)" alt=""> {{$comment->author->name}}: {{$comment->content}}
+        @endforeach
+
+        @if(session('success'))
+            <div class="callout succes">
+                Komentář úspěšně uložen.
+            </div>
+        @endif
+
+        <form method="post" action="{{route('comments.new', ['id' => $page->id])}}">
+            {!! csrf_field() !!}
+
+            @if($loggedUser)
+                <img src="@gravatar($loggedUser->email)" alt=""> {{$loggedUser->name}}
+            @else
+                <div class="row">
+                    <div class="column medium-6">
+                        <input type="text" name="name" required placeholder="Jméno">
+                    </div>
+                    <div class="column medium-6">
+                        <input type="email" name="email" required placeholder="E-mail">
+                    </div>
+                </div>
+            @endif
+
+            <div class="row">
+                <div class="column medium-12">
+                    <textarea name="message" required>{{old('message')}}</textarea>
+
+                    <button type="submit" class="button success">Uložit</button>
+
+                </div>
+            </div>
+        </form>
 
     </div>
 
diff --git a/templates/Binarity/Resources/views/modules/articlelist/visitor/default.blade.php b/templates/Binarity/Resources/views/modules/articlelist/visitor/default.blade.php
index 529720f5..fc71f3b7 100644
--- a/templates/Binarity/Resources/views/modules/articlelist/visitor/default.blade.php
+++ b/templates/Binarity/Resources/views/modules/articlelist/visitor/default.blade.php
@@ -10,6 +10,41 @@
     </div>
 
     @foreach($articles as $article)
-    <h2><a href="{{route('page.content', ['url' => $article->url])}}">{{$article->title}}</a></h2>
+        <div class="column large-6 article-list-item">
+            <div class="row">
+                <aside class="column text-right large-3">
+                    <div class="date">
+                     <span class="date day big">@customDate('j', $article->created_at)</span>
+                        <br>
+                        <span class="date uppercase month">@monthName($article->created_at)</span>
+                    </div>
+                    <div class="m-t-25 author">
+                        {{--<small>{{str_limit($article->author->name, 15)}}</small>--}}
+                        <img class="gravatar" src="@gravatar($article->author->email, 35)" alt="">
+                    </div>
+                </aside>
+
+                <header>
+                    <h5>
+                        <a href="{{route('page.content', ['url' => $article->url])}}">
+                            {{$article->title}}
+                        </a>
+                    </h5>
+                </header>
+                <article class="p-0 column text-justify large-9">
+                    {{str_limit($article->meta_description, 250)}}
+
+                    <a href="{{route('page.content', ['url' => $article->url])}}">více</a>
+                </article>
+
+                <footer class="text-right">
+                    <a href="{{route('page.content', ['url' => $article->url])}}#comments">
+                        <i class="fa fa-fw fa-comments"></i> {{$article->comments->count()}}
+                    </a>
+                </footer>
+            </div>
+        </div>
+
+        {{--        <h2><a href="{{route('page.content', ['url' => $article->url])}}">{{$article->title}}</a></h2>--}}
     @endforeach
 @endsection
\ No newline at end of file
diff --git a/templates/Binarity/Resources/views/visitor/layout.blade.php b/templates/Binarity/Resources/views/visitor/layout.blade.php
index f3313846..284e5ef1 100644
--- a/templates/Binarity/Resources/views/visitor/layout.blade.php
+++ b/templates/Binarity/Resources/views/visitor/layout.blade.php
@@ -104,7 +104,7 @@
             @yield('content')
 
 
-            <footer class="hide-for-large">
+            <footer id="footer" class="hide-for-large">
                 <ul class="social-icons menu">
                     @if (!empty(setting('facebookProfile')))
                         <li>