diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4f4773f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+config.php
diff --git a/api.php b/api.php
index 23cd699..3e5c43e 100644
--- a/api.php
+++ b/api.php
@@ -1,4 +1,6 @@
 <?php
+require_once("config.php");
+
 class write {
   public static function do($json) {
     print_r(json_encode($json));
diff --git a/config.default.php b/config.default.php
new file mode 100644
index 0000000..943d1d8
--- /dev/null
+++ b/config.default.php
@@ -0,0 +1,6 @@
+<?php
+// Rename this file as config.php and fill in the details below.
+$conf = array();
+$conf["apiurl"] = ""; // L'adreça de l'API del graf original.
+$conf["password"] = ""; // La contrasenya perquè la gent pugui entrar al graf.
+
diff --git a/graf.php b/graf.php
index ed44ecb..56cf71b 100644
--- a/graf.php
+++ b/graf.php
@@ -1,3 +1,18 @@
+<?php
+require_once("config.php");
+
+session_start();
+
+if (!isset($_POST["password"])) {
+    header("Location: login.php");
+    exit();
+}
+
+if ($_POST["password"] != "forallexists") {
+    header("Location: login.php?msg=wrong");
+    exit();
+}
+?>
 <!DOCTYPE html>
 <html>
   <head>
diff --git a/img/graf_screenshot.png b/img/graf_screenshot.png
new file mode 100644
index 0000000..6c685e0
--- /dev/null
+++ b/img/graf_screenshot.png
Binary files differ
diff --git a/index.php b/index.php
index ba99d6f..80523c8 100644
--- a/index.php
+++ b/index.php
@@ -10,7 +10,17 @@
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
 
     <style>
-
+    .mdl-card {
+      height: 320px;
+    }
+    .mdl-card > .mdl-card__title.graf {
+      color: #fff;
+      background: url("img/graf_screenshot.png") center top 15% no-repeat #46B6AC;
+    }
+    .misc {
+      color: #fff;
+      background: #00695C;
+    }
     </style>
   </head>
   <body>
@@ -25,15 +35,28 @@
         <div class="page-content">
           <div class="mdl-grid">
             <div class="mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-card">
-              <div class="mdl-card__title mdl-card--expand">
+              <div class="mdl-card__title mdl-card--expand graf">
                 <h2 class="mdl-card__title-text">El graf</h2>
               </div>
               <div class="mdl-card__supporting-text">
-                El graf
+                Una versió de només lectura del graf, optimitzada per navegadors móvils i amb una interfície millorada.
               </div>
               <div class="mdl-card__actions mdl-card--border">
                 <a href="graf.php" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
-                  Ves-hi
+                  Vés-hi
+                </a>
+              </div>
+            </div>
+            <div class="mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-card">
+              <div class="mdl-card__title mdl-card--expand misc">
+                <h2 class="mdl-card__title-text">Miscelània</h2>
+              </div>
+              <div class="mdl-card__supporting-text">
+                Mira estadístiques sobre el graf, les últimes incorporacions i rep per correu electrònic les últimes novetats del graf.
+              </div>
+              <div class="mdl-card__actions mdl-card--border">
+                <a href="javascript:alert('En construcció');" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+                  Vés-hi
                 </a>
               </div>
             </div>
diff --git a/login.php b/login.php
new file mode 100644
index 0000000..4c3ccec
--- /dev/null
+++ b/login.php
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Graf alternatiu FME</title>
+
+    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
+
+    <style>
+    .page-content {
+      display: block;
+      max-width: 500px;
+      margin-top: 16px;
+      margin-left: auto;
+      margin-right: auto;
+      padding: 16px;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+      <header class="mdl-layout__header">
+        <div class="mdl-layout__header-row">
+          <!-- Title -->
+          <span class="mdl-layout-title">Graf alternatiu FME</span>
+        </div>
+      </header>
+      <main class="mdl-layout__content">
+        <div class="page-content mdl-shadow--4dp">
+          <form action="graf.php" method="POST">
+            <div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield"><input class="mdl-textfield__input" type="password" name="password" id="password"><label class="mdl-textfield__label" for="password">Contrasenya</label></div>
+            <p><button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect" type="submit">Entrar</button></p>
+          </form>
+        </div>
+      </main>
+    </div>
+    <div class="mdl-snackbar mdl-js-snackbar"><div class="mdl-snackbar__text"></div><button type="button" class="mdl-snackbar__action"></button></div>
+    
+    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
+
+    <?php
+    if (isset($_GET["msg"]) && $_GET["msg"] == "wrong") {
+      echo "<script>window.addEventListener('load', function() { var notification = document.querySelector('.mdl-js-snackbar'); notification.MaterialSnackbar.showSnackbar({ message: 'Contrasenya incorrecta' }); });</script>";
+    }
+    ?>  
+   </body>
+</html>