diff --git a/_includes/index.html b/_includes/index.html
index 2f93160b..99812f1f 100644
--- a/_includes/index.html
+++ b/_includes/index.html
@@ -1,51 +1,171 @@
-<style type="text/css">
-body {
-    background: #384452;
-    background-image: url("assets/images/background.png");
-    background-size: 100%;
-    background-repeat: no-repeat;
-    background-position: 0px 60px;
-    color: #ffffff;
-    background-color: #690700;
-}
-
-p {
-    color: #ffffff;
-}
-</style>
-
-<div class="container mt">
-    <div class="row">
-        <div class="col-lg-12">
-            <table>
-                <tr>
-                    <td>
-                        <div class="space100">
-                            <img src="assets/images/title.png" alt="#NeIC2017 title" style="width: 500px; float: right;">
-                        </div>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <div class="space50">
-                            {{ content }}
-                            <a class="typeform-share btn btn-success"
-                               href="/registration/"
-                               data-mode="1"
-                               target="_blank">Register here</a>
-                        </div>
-                    </td>
-                </tr>
-            </table>
-            <img src="assets/images/logo/neic-white.svg"
-                 alt="NeIC logo"
-                 style="width: 150px; margin-right: 50px; margin-top: 50px;">
-            <img src="assets/images/logo/nordforsk.png"
-                 alt="NordForsk logo"
-                 style="width: 150px; margin-right: 50px; margin-top: 50px;">
-            <img src="assets/images/logo/lenovo.svg"
-                 alt="Lenovo logo"
-                 style="width: 92px; margin-right: 50px; margin-top: 50px;">
+<section class="banner">
+	<video autoplay loop class="bg-video" style="width:100% ; height: auto; min-width:100%; min-height:100%; object-fit: cover; preload=auto; position:absolute; z-index: -1; " poster="{{ site.baseurl }}/assets/images/banner.png">
+              <source src="video/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
+      </video>
+      <div class="mob-video">
+      <!-- Button trigger modal -->
+      <button type="button" class="mob-video-play btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+
+      </button>
+
+      <!-- Modal -->
+
+      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
+
+            <div class="modal-body">
+		    <video loop class="bg-video-mob" style="width:100% ; height: auto; min-width:100%; min-height:100%; object-fit: cover; preload=auto; z-index: 0;" controls="false"  poster="{{ site.baseurl }}/assets/images/banner.png">
+                              <source src="video/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
+                      </video>
+
+            </div>
+
+          </div>
         </div>
-    </div>
-</div>
+      </div>
+      </div>
+      <a class="learn-more-link smooth" href="#about">Learn more</a>
+</section>
+
+<section class="about" id="about">
+      <div class="container">
+              <div class="row" style="position: relative">
+              <div class="col-md-7" style="position: static;">
+                      <div class="content">
+                      <h2>About Us</h2>
+                      <p>The Nordic e-Infrastructure Collaboration (NeIC) facilitates development and operation of high-quality e-Infrastructure solutions in areas of joint Nordic interest. NeIC is a distributed organisation consisting of technical experts from academic high-performance computing centres across the Nordic countries.</p>
+                      <a href="about.php" class="read-more white-hover-btn">Read More</a>
+                      </div>
+              </div>
+              <div class="col-md-5">
+
+                      <h2>ACTIVITIES</h2>
+                      <ul class="linl-list">
+                              <li><a href="#">Biodiversity</a></a></li>
+                              <li><a href="#">Glenna2</a></li>
+                              <li><a href="#">NeIC 2017 Conference</a></li>
+                              <li><a href="#">Nordic WLCG tier-1 facility</a></li>
+                              <li><a href="#">NeIC office</a></li>
+                              <li><a href="#">Pool competencies</a></li>
+                              <li><a href="#">Project analysis</a></li>
+                              <li><a href="#">Training</a></li>
+                              <li><a href="#">Tryggve</a></li>
+                      </ul>
+              </div>
+              </div>
+
+      </div>
+</section>
+
+<section class="current-events">
+      <div class="container">
+      <div class="col-md-12">
+      <div class="row">
+              <div class="event-wrap">
+		      <div class="right-event" style="background-image: url({{ site.baseurl }}/assets/images/current-event-bg.png);"></div>
+
+                      <div class="left-event">
+                              <h2>CURRENT EVENTS</h2>
+                              <ul class="event-list">
+                                      <li>
+                                      <h4 class="event-title"><a href="#">NEIC 2017 CONFERENCE</a></h4>
+                                      <p class="event-details">UMEÅ, SWEDEN | MAY 30 - JUN 01</p>
+                                      <p class="description">Crossing boundaries, changing the world Meet the people who design the infrastructure that you use every day. Influence the infrastructure that you will use tomorrow. </p>
+                                      <a class="read-more" href="#">READ MORE &raquo;</a>
+                                      </li>
+                                      <li>
+                                      <h4 class="event-title"><a href="#">NEIC 2017 SENSITIVE DATA WORKSHOP</a></h4>
+                                      <p class="event-details">NEIC OFFICES | MAY 30</p>
+                                      <p class="description">Workshop on use of sensitive data in research, including secure IT services and highlights of the outcomes of the Nordic Tryggve project, ethical and legal issues regarding the use of sensitive data, as well as researchers’ presentations on how the research data is currently being managed in the research community.</p>
+                                      <a class="read-more" href="#">READ MORE &raquo;</a>
+                                      </li>
+                                      <li>
+                                      <h4 class="event-title"><a href="#">NEIC ALL HANDS MEETING 2018</a></h4>
+                                      <p class="event-details">NEIC OFFICES | JAN 29 - FEB 02 </p>
+                                      <p class="description">The annual NeIC All Hands Meeting 2018</p>
+                                      <a class="read-more" href="#">READ MORE &raquo;</a>
+                                      </li>
+                              </ul>
+                      </div>
+
+                      <div class="clearfix"></div>
+                      </div>
+
+              </div>
+      </div>
+      </div>
+
+</section>
+
+<section class="mission" style="background-image: url({{ site.baseurl }}/assets/images/our-mission-bg.png);">
+      <div class="container">
+              <div class="mission-data">
+                      <h1 class="om-head">OUR MISSION:</h1>
+                      <p class="description">Development of best-in-class e-infrastructure services beyond national capabilities.</p>
+              </div>
+      </div>
+</section>
+
+<section class="latest-news">
+      <div class="container">
+              <h2>LATEST NEWS</h2>
+              <div class="description-block">
+              <p>Mauris mauris nunc, condimentum eget quam sit amet, ullamcorper sodales augue. Suspendisse sodales felis quam. Quisque mauris nisl, dignissim et dolor vel.</p>
+              </div>
+
+                      <div class="left-news">
+			      <div class="mob news-bg" style="background-image: url({{ site.baseurl }}/assets/images/news-blog-1.png);"></div>
+                              <div class="lite-white-bg">
+                              <h4><a href="#">BETTER SOFTWARE LEADS TO BETTER SCIENCE</a></h4>
+                              <p class="date">MARCH 15 2017</p>
+
+                              <p class="description">Software and computing skills have become essential in most fields of research, but researchers are often struggling with software that is unnecessarily complex and therefore not sustainable. But help is at hand, in the shape of workshops that promote better software development practices in scientific communities across the Nordic countries.</p>
+                              <a href="" class="read-more">read more &raquo;</a>
+                              </div>
+
+
+			      <div class="desktop news-bg" style="background-image: url({{ site.baseurl }}/assets/images/news-blog-1.png);"></div>
+
+
+              </div>
+              <div class="right-news">
+
+
+		      <div class="desktop news-bg" style="background-image: url({{ site.baseurl }}/assets/images/news-blog-2.png);"></div>
+		      <div class="mob news-bg" style="background-image: url({{ site.baseurl }}/assets/images/news-blog-2.png);"></div>
+                              <div class="lite-white-bg">
+                              <h4><a href="#">NEW REPORT: ETHICAL REVIEW, DATA PROTECTION AND BIOMEDICAL RESEARCH IN THE NORDIC COUNTRIES – A LEGAL PERSPECTIVE</a></h4>
+                              <p class="date">MARCH 15 2017</p>
+
+                              <p class="description">The latest NordForsk Policy Paper gives an overview of the existing legislation in the Nordic countries regarding the collection and re-use of health-related personal data in medical research.</p>
+                              <a href="" class="read-more">read more &raquo;</a>
+                              </div>
+
+
+
+              </div>
+
+
+              <div class="left-news">
+
+		      <div class="mob news-bg" style="background-image: url({{ site.baseurl }}/assets/images/news-blog-3.png);"></div>
+                              <div class="lite-white-bg">
+                              <h4><a href="#">THE SMARTEST STORAGE FOR THE WORLD’S LARGEST DATA VOLUMES</a></h4>
+                              <p class="date">APRIL 7 2017</p>
+
+                              <p class="description">CERN’s Large Hadron Collider is the world’s largest, between four Nordic countries.</p>
+                              <a href="" class="read-more">read more &raquo;</a>
+                              </div>
+
+			      <div class="desktop news-bg" style="background-image: url({{ site.baseurl }}/assets/images/news-blog-3.png);"></div>
+
+              </div>
+
+                      <a class="see-more-news black-hover-btn" href="#">See more News</a>
+
+
+
+      </div>
+</section>
diff --git a/index.html b/index.html
deleted file mode 100644
index 15c96f51..00000000
--- a/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Home
-permalink: /
----
-
-<h2> Welcome </h2>
-
-This is an experimental website where we play around to find out how we would like
-to structure our web information for easy maintenance in the future.
-
-<div class="events-container">
-  <h3>Current events</h3>
-  <p><a href="{{ site.baseurl }}/events">All current events</a></p>
-  <ul id="calendar-events-list">
-    <li v-for="event in events" :style="{ 'font-weight': event.hashtags.indexOf('highlight') != -1 ? 'bold' : 'normal' }">
-      <a :href="event.url"><span v-text="event.dates.start + ': ' + event.title"></span></a>
-      <a class="anchorjs-link " :href="event.calendarUrl" :aria-label="'Calendar link for: ' + event.title.toLowerCase()" data-anchorjs-icon="📅" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 1em; line-height: 1; font-family: anchorjs-icons; padding-left: 0.375em;"></a>
-    </li>
-  </ul>
-  <p><a href="{{ site.baseurl }}/events/past/"> Past events </a></p>
-</div>
-
-<h3> News </h3>
-
-<a href="{{site.baseurl}}/news/">See all news</a>
-
-{% assign latest_news = site.posts | slice: 0,10 %}
-{% for post in latest_news %}
-<h4> <a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a> </h4>
-<p> {{ post.date | date: "%Y-%m-%d" }} </p>
-<p> {{ post.summary }} </p>
-{% endfor %}
-
-<a href="{{site.baseurl}}/news/">See all news</a>
diff --git a/index.md b/index.md
new file mode 100644
index 00000000..5803983a
--- /dev/null
+++ b/index.md
@@ -0,0 +1,5 @@
+---
+title: Home
+include: index
+permalink: /
+---