diff --git a/_config.yml b/_config.yml
index f693d531..a2b32365 100644
--- a/_config.yml
+++ b/_config.yml
@@ -62,6 +62,7 @@ web-app-mode: True
 
 post-preview-words: 80
 big-post-preview-words: 200
+excerpt_separator: <!--more-->
 
 #paginate: 5
 
@@ -95,5 +96,6 @@ sass:
 
 gems:
   - github-pages
+  - jekyll-feed
   #- jekyll-paginate
   #- jemoji
diff --git a/_includes/footer.html b/_includes/footer.html
index 4ff61d93..d2e97c91 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -22,7 +22,7 @@
           </a>
         </li>
         <li>
-          <a href="#">
+          <a href="{{site.baseurl}}/feed.xml">
             <i class="fa fa-rss" aria-hidden="true"></i>
           </a>
         </li>
diff --git a/_includes/hero_area.html b/_includes/hero_area.html
index 2968df7b..21f94fd4 100644
--- a/_includes/hero_area.html
+++ b/_includes/hero_area.html
@@ -1,22 +1,20 @@
 <!-- Hero Area Section -->
 
 <section id="hero-area">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-12">
-
-                <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
-                  <h1 class="title">{{site.title}}</h1>
-                  <h2 class="subtitle">{{site.subtitle}}</h2>
-                  <p>{{ site.description }}</p>
-                  <a href="#download" class="btn btn-primary btn-lg blue-bg">Download Now!</a>
-                  <a href="#about" class="btn btn-common btn-lg">Learn More</a>
-                </div>
-
-                <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
-            </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
+          <h1 class="title">{{site.title}}</h1>
+          <h2 class="subtitle">{{site.subtitle}}</h2>
+          <p>{{ site.description }}</p>
+          <a href="#download" class="btn btn-primary btn-lg blue-bg">Download Now!</a>
+          <a href="#about" class="btn btn-common btn-lg">Learn More</a>
         </div>
+        <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
+      </div>
     </div>
+  </div>
 </section>
 
 <!-- Hero Area Section End-->
diff --git a/_includes/news.html b/_includes/news.html
index 935ad037..a95ef8f8 100644
--- a/_includes/news.html
+++ b/_includes/news.html
@@ -2,59 +2,53 @@
 {% assign post_1 = site.posts[0] %}
 {% assign post_2 = site.posts[1] %}
 {% assign post_3 = site.posts[2] %}
-    <section id="{{ page.section-type }}">
-        <div class="container">
-            <div class="row">
-            <h1 class="title">{{ page.title }}</h1>
-                {% if post_1 != nil %}
-                <div class="col-md-8">
-                    <h2><a href="{{site.baseurl}}{{ post_1.url }}">{{post_1.title}} </a></h2>
-                    <p>Published on {{ post_1.date | date: "%Y-%m-%d"}} by {{ post_1.author }}</p>
-                    <img src="{{site.baseurl}}/img/posts/{{ post_1.image }}" class="img-responsive" />
-                    {% if post_1.content contains '<!--more-big-->' %}
-                        {{ post_1.content | split:'<!--more-big-->' | first | markdownify}}
-                        <a href="{{site.baseurl}}{{ post_1.url }}">read more</a>
-                    {% else %}
-                        {{ post_1.content | truncatewords: site.big-post-preview-words, "" | markdownify }}
-                        {% if (post_1.content | number_of_words) > site.big-post-preview-words %}
-                            <a href="{{site.baseurl}}{{ post_1.url }}">read more</a>
-                        {% endif %}
-                    {% endif %}
-                </div>
-                {% endif %}
-                <div class="col-md-4">
-                {% if post_2 != nil %}
-                <div class="col-lg-12">
-                    <h3><a href="{{site.baseurl}}{{ post_2.url }}">{{ post_2.title }}</a></h3>
-                    <p>Published on {{ post_2.date | date: "%Y-%m-%d"}} by {{ post_2.author }}</p>
-                    {% if post_2.content contains '<!--more-->' %}
-                        {{ post_2.content | split:'<!--more-->' | first | markdownify}}
-                        <a href="{{site.baseurl}}{{ post_2.url }}">read more</a>
-                    {% else %}
-                        {{ post_2.content | truncatewords: site.post-preview-words, "" | markdownify }}
-                        {% if (post_2.content | number_of_words) > site.post-preview-words %}
-                            <a href="{{site.baseurl}}{{ post_2.url }}">read more</a>
-                        {% endif %}
-                    {% endif %}
-                </div>
-                {% endif %}
-                {% if post_3 != nil %}
-                <div class="col-lg-12">
-                    <h3><a href="{{site.baseurl}}{{ post_3.url }}">{{ post_3.title }}</a></h3>
-                    <p>Published on {{ post_3.date | date: "%Y-%m-%d"}} by {{ post_3.author }}</p>
-                    {% if post_3.content contains '<!--more-->' %}
-                        {{ post_3.content | split:'<!--more-->' | first | markdownify}}
-                        <a href="{{site.baseurl}}{{ post_3.url }}">read more</a>
-                    {% else %}
-                        {{ post_3.content | truncatewords: site.post-preview-words, "" | markdownify }}
-                        {% if (post_3.content | number_of_words) > site.post-preview-words %}
-                            <a href="{{site.baseurl}}{{ post_3.url }}">read more</a>
-                        {% endif %}
-                    {% endif %}
-                </div>
-                {% endif %}
-                </div>
-            </div>
+<section id="{{ page.section-type }}">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+
+
+      <h1 class="title">{{ page.title }}</h1>
+      {% if post_1 != nil %}
+      <div class="col-md-8 news-card">
+        <img src="{{site.baseurl}}/img/posts/{{ post_1.image }}" class="img-responsive" />
+        <div class="news-card-text dark-bg">
+          <div class="post-info red-text">
+            <i class="fa fa-calendar" aria-hidden="true"></i>
+            {{ post_1.date | date_to_long_string }}
+          </div>
+          <h2><a href="{{site.baseurl}}{{ post_1.url }}">{{post_1.title}} </a></h2>
         </div>
-    </section>
+      </div>
+      {% endif %}
+      <div class="col-md-4">
+        {% if post_2 != nil %}
+        <div class="col-lg-12 news-card">
+          <img src="{{site.baseurl}}/img/posts/{{ post_2.image }}" class="img-responsive" />
+          <div class="news-card-text dark-bg">
+            <div class="post-info red-text">
+              <i class="fa fa-calendar" aria-hidden="true"></i>
+              {{ post_2.date | date_to_long_string }}
+            </div>
+            <h3><a href="{{site.baseurl}}{{ post_2.url }}">{{post_2.title}} </a></h3>
+          </div>
+        </div>
+        {% endif %}
+        {% if post_3 != nil %}
+        <div class="col-lg-12 news-card">
+          <img src="{{site.baseurl}}/img/posts/{{ post_2.image }}" class="img-responsive" />
+          <div class="news-card-text dark-bg">
+            <div class="post-info red-text">
+              <i class="fa fa-calendar" aria-hidden="true"></i>
+              {{ post_3.date | date_to_long_string }}
+            </div>
+            <h3><a href="{{site.baseurl}}{{ post_3.url }}">{{post_3.title}} </a></h3>
+          </div>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    </div>
+  </div>
+</section>
 <!-- Help Section End -->
diff --git a/_layouts/post.html b/_layouts/post.html
index 698f0be1..9f1e522f 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -9,12 +9,12 @@
 
   {% include navigation.html %}
 
-  <section id="{{ page.section-type }}">
+  <section class="{{ page.section-type }}">
     <div class="container">
       <div class="row">
         <br />
         <h1 class="">{{page.title}}</h1>
-        <p class="post-info">
+        <div class="post-info">
           <i class="fa fa-calendar" aria-hidden="true"></i> {{ page.date | date_to_long_string }}
           <a href="https://github.com/{{ page.author }}" class="author-link">
             <img class="avatar" src="https://github.com/{{ page.author }}.png?size=18" alt="{{ page.author }}">
@@ -25,15 +25,14 @@
             {{ tag }}
           </div>
           {% endfor %}
-        </p>
-        <img src="{{site.baseurl}}/img/posts/{{ page.image }}" class="img-responsive" />
+        </div>
         {{ page.content | markdownify }}
       </div>
     </div>
   </section>
 
   {% include footer.html %}
-  
+
   {% include js.html %}
 
 </body>
diff --git a/_posts/2012-07-04-first-final-release.md b/_posts/2012-07-04-first-final-release.md
index c856b3a1..d9ba9bcc 100644
--- a/_posts/2012-07-04-first-final-release.md
+++ b/_posts/2012-07-04-first-final-release.md
@@ -4,14 +4,20 @@ section-type: post
 title: First final release!
 tags: [ 'release', '0.1' ]
 author: "flokuep"
-image: release-01.png
+image: "release-01.png"
 ---
+![Release 1]({{site.baseurl}}/img/posts/release-01.png){:.post-banner}
 
-#### Dear Vocaluxe fans,  
+Dear Vocaluxe fans,  
 
 just in time for the holidays we've compiled our first final release after roughly one year of development time - Vocaluxe 0.1 final is ready to be unleashed!
 <!--more-->
 So don't think twice and download it from Sourceforge. How about a round (or two?) of Vocaluxe between the egg hunt and the lamb roast?
 
 You don't want to wait for the next final release and want to follow the latest edge of development instead? Just follow the developers on the Github Vocaluxe repository!
-[![Song Selection]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection_Small.png){:class="img-responsive"}]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection.png){:class="img-responsive" data-lightbox="screenshots" data-title="Song Selection"}
+
+## Gallery
+
+{:class="post-gallery"}
+
+[![Song Selection]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection.png){:class="img-responsive"}]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection.png){:class="img-responsive" data-lightbox="screenshots" data-title="Song Selection"}
diff --git a/_posts/2012-12-21-second-release.md b/_posts/2012-12-21-second-release.md
index 35e162bc..f0daee41 100644
--- a/_posts/2012-12-21-second-release.md
+++ b/_posts/2012-12-21-second-release.md
@@ -4,14 +4,17 @@ section-type: post
 title: Second version released!
 tags: [ 'release', '0.2' ]
 author: "flokuep"
-image: release-02.png
+image: "release-02.png"
 ---
-#### Dear Vocaluxe fans,
+![Release 2]({{site.baseurl}}/img/posts/release-02.png){:.post-banner}
 
-#### we've finished Vocaluxe v0.2 after 8 months of development.  
-The new version has the following new features:
+Dear Vocaluxe fans,
+
+we've finished Vocaluxe v0.2 after 8 months of development.  
 <!--more-->
 
+The new version has the following new features:
+
 * Support for up to 6 microphones.
 * Medley mode
 * Short Song mode (short version of a song)
diff --git a/css/main.css b/css/main.css
index 8d720ae2..9f2a1dc7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -113,6 +113,7 @@ a:hover {
 
 .row {
   padding: 50px 0px;
+  margin: 0;
 }
 
 .btn {
@@ -351,6 +352,47 @@ a:hover {
 
 /**************/
 
+/*****News*****/
+
+
+#news img {
+  width: 100%;
+}
+
+#news .col-md-8,
+#news .col-lg-12 {
+  border: 1px solid black;
+  border-radius: 5px;
+}
+
+#news h2,
+#news h3 {
+  margin-top: 0;
+  margin-bottom: 25px;
+}
+
+#news .post-info {
+  font-size: 12pt;
+}
+
+#news .btn {
+  align-items:
+}
+
+.news-card {
+  padding: 0;
+}
+
+.news-card-text {
+  padding: 10px;
+  color: white  ;
+}
+
+.news-card-text a {
+  color: white;
+}
+
+/**************/
 
 /***Download***/
 
@@ -551,17 +593,32 @@ a:hover {
 
 /*****Post*****/
 
+.post .post-banner {
+  width: 100%;
+}
+
+.post-gallery {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.post-gallery a {
+  max-width: 220px;
+  margin: 4px;
+}
+
 .post-info {
   display: inline-block;
   margin-bottom: 15px;
+  font-size: 13pt;
 }
 
 .avatar {
   border-radius: 50%;
   position: relative;
   top: 3px;
-  height: 18px;
-  width: 18px;
+  height: 18px !important;
+  width: 18px !important;
   vertical-align: baseline;
 }
 
@@ -577,9 +634,9 @@ a:hover {
 .chip {
   display: inline-block;
   padding: 0 10px;
-  height: 28px;
+  height: 26px;
   color: white;
-  border-radius: 14px;
+  border-radius: 13px;
 }