diff --git a/assets/style.css b/assets/style.css
index 1973a04..b0ee548 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -58,6 +58,11 @@ h1, h2 {
     margin-top: 0;
 }
 
+.tools {
+    list-style-position: inside;
+    padding-left: 0;
+}
+
 @media (min-width: 650px) {
     .cols {
         grid-template-columns: repeat(2, 1fr);
diff --git a/web/handler/common.go b/web/handler/common.go
index cdff09d..f42fec1 100644
--- a/web/handler/common.go
+++ b/web/handler/common.go
@@ -22,7 +22,7 @@ var TplCommonMap = map[string]string{
 <body>
     <header>
         <nav>
-            <a href="/">status.cafe</a>
+            <a href="/">status.cafe</a> <a href="/intro">intro</a>
             {{ if .logged }}
             <a href="/settings">settings</a> <a href="/users/{{ .logged }}">{{ .logged }}</a> (<a href="/logout">logout</a>)
             {{ else }}
diff --git a/web/handler/handler.go b/web/handler/handler.go
index 432c032..f8ba2e4 100644
--- a/web/handler/handler.go
+++ b/web/handler/handler.go
@@ -77,8 +77,11 @@ func New(cfg *config.Config, sess *session.Session, data *storage.Storage) (http
 	router.HandleFunc("/remove", h.handleRemoveStatus)
 	router.HandleFunc("/edit", h.showEditStatusView).Methods(http.MethodGet)
 	router.HandleFunc("/edit", h.updateStatus).Methods(http.MethodPost)
-
+	router.HandleFunc("/current-status.js", h.showCurrentStatusJSView).Methods(http.MethodGet)
+	router.HandleFunc("/current-status", h.showCurrentStatusView).Methods(http.MethodGet)
 	router.HandleFunc("/manage", h.showManageView).Methods(http.MethodGet)
+	router.HandleFunc("/intro", h.showIntroView).Methods(http.MethodGet)
+	router.HandleFunc("/about/status-updater", h.showStatusUpdaterView).Methods(http.MethodGet)
 	router.HandleFunc("/users/{user}.atom", h.showAtomView).Methods(http.MethodGet)
 	router.HandleFunc("/users/{user}", h.showUserView).Methods(http.MethodGet)
 	router.HandleFunc("/users/{user}/status.json", h.showUserStatusView).Methods(http.MethodGet)
diff --git a/web/handler/html.go b/web/handler/html.go
index 9b9f051..5a649b9 100644
--- a/web/handler/html.go
+++ b/web/handler/html.go
@@ -62,6 +62,48 @@ var TplMap = map[string]string{
 </script>
 </body>
 </html>`,
+	"current_status": `{{ define "content" }}
+<div class="cols">
+    <section>
+        <h1>Current Status Widget</h1>
+        <form method="get" action="/current-status">
+            <table>
+                <tr>
+                    <td>name:</td>
+                    <td><input type="text" name="name" id="name" value="{{ .name }}"/></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><input type="submit" value="create HTML"/></td>
+                </tr>
+            </table>
+        </form>
+        <p>Past this code into your HTML file:</p>
+        <textarea id="code-html" style="width: 100%; height: 75px;"></textarea>
+    </section>
+    <section>
+        <h2>Preview</h2>
+        {{ if .name }}
+        <script src="https://status.cafe/current-status.js?name={{ .name }}"></script>
+        {{ else }}
+        <p>Add your name and click "generate HTML" to see a preview.</p>
+        {{ end }}
+    </section>
+</div>
+<script>
+    function getHTML(name) {
+        return '<s'+'cript src="https://status.cafe/current-status.js?name=' + name + '"></s'+'cript>'
+    }
+    function preview() {
+        const name = document.getElementById("name").value
+        if (name) {
+            const code = getHTML(document.getElementById("name").value)
+            document.getElementById("code-html").value = code
+        }
+    }
+    preview()
+</script>
+{{ end }}`,
 	"edit_status": `{{ define "content" }}
 <section>
     <h1>Edit status</h1>
@@ -92,10 +134,10 @@ var TplMap = map[string]string{
                 <textarea name="content" maxlength="140" placeholder="What's new?" required style="width: 100%; box-sizing: border-box; height: 100px;" autofocus></textarea>
             </div>
             <input type="submit" value="Submit">
-            <h3>Update status with bookmarklet</h3>
-            <p>Drag to your bookmarks to update from anywhere: <a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status.cafe</a></p>
-            <h3>Display status on your homepage</h3>
-            <p>todo</p>
+            <ul class="tools">
+                <li>Install the <a href="/about/status-updater">status updater</a> bookmarklet</li>
+                <li>Add the <a href="/current-status">current status widget</a> to your homepage</li>
+            </ul>
         </form>
     </section>
     <section>
@@ -107,6 +149,38 @@ var TplMap = map[string]string{
         {{ end }}
     </section>
 </div>
+{{ end }}`,
+	"intro": `{{ define "content" }}
+<section>
+    <h1>Introduction</h1>
+    <p>
+        Welcome! You've just found a little internet tool that lets you set your current status
+        and see the status of others.
+    </p>
+
+    <h2>Your status</h2>
+    <p>
+        Once you've registered, you will be able to set your current status. A status is anything you are currently doing,
+        on your mind, or that you think about. It can be your mood, the song you are listening to, the book you are reading, or the new
+        cool link you've just found. A status has a maximum length of 140 characters and can be updated as often as you'd like.
+    </p>
+    <h2>Status updater</h2>
+    <p>
+        Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
+        profile page.
+    </p>
+    <h2>Homepage widgets</h2>
+    <h3>Current Status Widget</h3>
+    <h3>Status Feed Widget</h3>
+<!--    wip -->
+    <p>Use the current status widget to display your latest status directly on
+        homepage, or the status feed widget to display the last few ones.
+    </p>
+    <p>
+        Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
+        profile page, which aggregates all your statuses. You can fully customize it with CSS and HTML. Make it yours!
+    </p>
+</section>
 {{ end }}`,
 	"login": `{{ define "content" }}
 <section>
@@ -215,6 +289,28 @@ var TplMap = map[string]string{
         <input type="submit" value="Submit">
     </form>
 </section>
+{{ end }}`,
+	"status-updater": `{{ define "content" }}
+<section>
+    <h1>Status Updater</h1>
+    <p>
+        Instead of having to come back each time you want to set a new status, you can install the
+        status updater bookmarklet directly to your web browser. That way, you will be able to update your status
+        from anywhere.
+    </p>
+    <p>
+        Curious about what a bookmarklet is? It's simply a little javascript link that's placed on your browser's bookmark toolbar.
+        You can think about them as tiny programs.
+    </p>
+    <h2>Instructions</h2>
+    <p>
+        Drag the following link to your bookmarks toolbar:
+    </p>
+    <p>
+        <a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status updater</a>
+    </p>
+    <p>That's it! From now on, whenever you want to update your status, click the status updater button from your bookmarks and a pop-up window will launch to let you update it.</p>
+</section>
 {{ end }}`,
 	"user": `{{ define "head" }}
 <style>{{ .style }}</style>
@@ -224,14 +320,32 @@ var TplMap = map[string]string{
 <div class="cols">
     <section>
         <h2>{{ .user }}</h2>
+        {{ if .picture }}
         <img src="{{ .picture }}" width="100" class="profile-picture"/>
+        {{ end }}
         <dl>
             <dt>Homepage</dt>
-            <dd><a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
+            <dd>
+                {{ if .homepage }}
+                <a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
+                {{ else }}
+                Not defined
+                {{ end }}
             <dt>Email</dt>
-            <dd><a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
+            <dd>
+                {{ if .email }}
+                <a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
+                {{ else }}
+                Not defined
+                {{ end }}
             <dt>About</dt>
-            <dd>{{ .about }}</dd>
+            <dd>
+                {{ if .about }}
+                {{ .about }}
+                {{ else }}
+                Not defined
+                {{ end }}
+            </dd>
         </dl>
     </section>
     <section>
diff --git a/web/handler/html/common/layout.html b/web/handler/html/common/layout.html
index 25502e7..fb82bfd 100644
--- a/web/handler/html/common/layout.html
+++ b/web/handler/html/common/layout.html
@@ -12,7 +12,7 @@
 <body>
     <header>
         <nav>
-            <a href="/">status.cafe</a>
+            <a href="/">status.cafe</a> <a href="/intro">intro</a>
             {{ if .logged }}
             <a href="/settings">settings</a> <a href="/users/{{ .logged }}">{{ .logged }}</a> (<a href="/logout">logout</a>)
             {{ else }}
diff --git a/web/handler/html/current_status.html b/web/handler/html/current_status.html
new file mode 100644
index 0000000..914342a
--- /dev/null
+++ b/web/handler/html/current_status.html
@@ -0,0 +1,42 @@
+{{ define "content" }}
+<div class="cols">
+    <section>
+        <h1>Current Status Widget</h1>
+        <form method="get" action="/current-status">
+            <table>
+                <tr>
+                    <td>name:</td>
+                    <td><input type="text" name="name" id="name" value="{{ .name }}"/></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><input type="submit" value="create HTML"/></td>
+                </tr>
+            </table>
+        </form>
+        <p>Past this code into your HTML file:</p>
+        <textarea id="code-html" style="width: 100%; height: 75px;"></textarea>
+    </section>
+    <section>
+        <h2>Preview</h2>
+        {{ if .name }}
+        <script src="https://status.cafe/current-status.js?name={{ .name }}"></script>
+        {{ else }}
+        <p>Add your name and click "generate HTML" to see a preview.</p>
+        {{ end }}
+    </section>
+</div>
+<script>
+    function getHTML(name) {
+        return '<s'+'cript src="https://status.cafe/current-status.js?name=' + name + '"></s'+'cript>'
+    }
+    function preview() {
+        const name = document.getElementById("name").value
+        if (name) {
+            const code = getHTML(document.getElementById("name").value)
+            document.getElementById("code-html").value = code
+        }
+    }
+    preview()
+</script>
+{{ end }}
\ No newline at end of file
diff --git a/web/handler/html/index.html b/web/handler/html/index.html
index a3d0adc..ae34eca 100644
--- a/web/handler/html/index.html
+++ b/web/handler/html/index.html
@@ -11,10 +11,10 @@
                 <textarea name="content" maxlength="140" placeholder="What's new?" required style="width: 100%; box-sizing: border-box; height: 100px;" autofocus></textarea>
             </div>
             <input type="submit" value="Submit">
-            <h3>Update status with bookmarklet</h3>
-            <p>Drag to your bookmarks to update from anywhere: <a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status.cafe</a></p>
-            <h3>Display status on your homepage</h3>
-            <p>todo</p>
+            <ul class="tools">
+                <li>Install the <a href="/about/status-updater">status updater</a> bookmarklet</li>
+                <li>Add the <a href="/current-status">current status widget</a> to your homepage</li>
+            </ul>
         </form>
     </section>
     <section>
diff --git a/web/handler/html/intro.html b/web/handler/html/intro.html
new file mode 100644
index 0000000..b25faa7
--- /dev/null
+++ b/web/handler/html/intro.html
@@ -0,0 +1,32 @@
+{{ define "content" }}
+<section>
+    <h1>Introduction</h1>
+    <p>
+        Welcome! You've just found a little internet tool that lets you set your current status
+        and see the status of others.
+    </p>
+
+    <h2>Your status</h2>
+    <p>
+        Once you've registered, you will be able to set your current status. A status is anything you are currently doing,
+        on your mind, or that you think about. It can be your mood, the song you are listening to, the book you are reading, or the new
+        cool link you've just found. A status has a maximum length of 140 characters and can be updated as often as you'd like.
+    </p>
+    <h2>Status updater</h2>
+    <p>
+        Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
+        profile page.
+    </p>
+    <h2>Homepage widgets</h2>
+    <h3>Current Status Widget</h3>
+    <h3>Status Feed Widget</h3>
+<!--    wip -->
+    <p>Use the current status widget to display your latest status directly on
+        homepage, or the status feed widget to display the last few ones.
+    </p>
+    <p>
+        Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
+        profile page, which aggregates all your statuses. You can fully customize it with CSS and HTML. Make it yours!
+    </p>
+</section>
+{{ end }}
\ No newline at end of file
diff --git a/web/handler/html/status-updater.html b/web/handler/html/status-updater.html
new file mode 100644
index 0000000..0b65adb
--- /dev/null
+++ b/web/handler/html/status-updater.html
@@ -0,0 +1,22 @@
+{{ define "content" }}
+<section>
+    <h1>Status Updater</h1>
+    <p>
+        Instead of having to come back each time you want to set a new status, you can install the
+        status updater bookmarklet directly to your web browser. That way, you will be able to update your status
+        from anywhere.
+    </p>
+    <p>
+        Curious about what a bookmarklet is? It's simply a little javascript link that's placed on your browser's bookmark toolbar.
+        You can think about them as tiny programs.
+    </p>
+    <h2>Instructions</h2>
+    <p>
+        Drag the following link to your bookmarks toolbar:
+    </p>
+    <p>
+        <a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status updater</a>
+    </p>
+    <p>That's it! From now on, whenever you want to update your status, click the status updater button from your bookmarks and a pop-up window will launch to let you update it.</p>
+</section>
+{{ end }}
\ No newline at end of file
diff --git a/web/handler/html/user.html b/web/handler/html/user.html
index 93a6099..c3a64db 100644
--- a/web/handler/html/user.html
+++ b/web/handler/html/user.html
@@ -6,14 +6,32 @@
 <div class="cols">
     <section>
         <h2>{{ .user }}</h2>
+        {{ if .picture }}
         <img src="{{ .picture }}" width="100" class="profile-picture"/>
+        {{ end }}
         <dl>
             <dt>Homepage</dt>
-            <dd><a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
+            <dd>
+                {{ if .homepage }}
+                <a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
+                {{ else }}
+                Not defined
+                {{ end }}
             <dt>Email</dt>
-            <dd><a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
+            <dd>
+                {{ if .email }}
+                <a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
+                {{ else }}
+                Not defined
+                {{ end }}
             <dt>About</dt>
-            <dd>{{ .about }}</dd>
+            <dd>
+                {{ if .about }}
+                {{ .about }}
+                {{ else }}
+                Not defined
+                {{ end }}
+            </dd>
         </dl>
     </section>
     <section>
diff --git a/web/handler/intro_show.go b/web/handler/intro_show.go
new file mode 100644
index 0000000..fccb7db
--- /dev/null
+++ b/web/handler/intro_show.go
@@ -0,0 +1,13 @@
+package handler
+
+import "net/http"
+
+func (h *Handler) showIntroView(w http.ResponseWriter, r *http.Request) {
+	user, _ := h.getUser(r)
+	h.renderLayout(w, "intro", nil, user)
+}
+
+func (h *Handler) showStatusUpdaterView(w http.ResponseWriter, r *http.Request) {
+	user, _ := h.getUser(r)
+	h.renderLayout(w, "status-updater", nil, user)
+}
diff --git a/web/handler/user_show.go b/web/handler/user_show.go
index 404f2c5..cdf2f0e 100644
--- a/web/handler/user_show.go
+++ b/web/handler/user_show.go
@@ -189,12 +189,23 @@ func (h *Handler) showUserStatusImageView(w http.ResponseWriter, r *http.Request
 		foreground = "#" + c
 	}
 
-	width := 350
-	dc := gg.NewContext(width, 84)
+	width := 125
+	dc := gg.NewContext(width, 125)
 	dc.SetHexColor(background)
 	dc.Clear()
 	dc.SetHexColor(foreground)
-	dc.DrawStringWrapped(text, 8, 4, 0, 0, float64(width-(2*16)), 1.5, gg.AlignLeft)
+	font, err := truetype.Parse(goregular.TTF)
+	if err != nil {
+		panic("")
+	}
+	face := truetype.NewFace(font, &truetype.Options{
+		Size: 9,
+	})
+	dc.SetFontFace(face)
+	if err != nil {
+		fmt.Println(err)
+	}
+	dc.DrawStringWrapped(text, 8, 4, 0, 0, float64(width-(2*8)), 1.5, gg.AlignLeft)
 	dc.EncodePNG(w)
 	//dc.SavePNG("out.png")
 
diff --git a/web/handler/widget_show.go b/web/handler/widget_show.go
new file mode 100644
index 0000000..3d78791
--- /dev/null
+++ b/web/handler/widget_show.go
@@ -0,0 +1,33 @@
+package handler
+
+import (
+	"net/http"
+)
+
+func (h *Handler) showCurrentStatusJSView(w http.ResponseWriter, r *http.Request) {
+	name := r.URL.Query().Get("name")
+	w.Write([]byte(`
+document.writeln('<div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div>');
+fetch("https://status.cafe/users/` + name + `/status.json")
+  .then( r => r.json() )
+  .then( r => {
+    if (!r.content.length) {
+      document.getElementById("statuscafe-content").innerHTML = "No status yet."
+      return
+    }
+    document.getElementById("statuscafe-username").innerHTML = '<a href="https://status.cafe/users/` + name + `">' + r.author + '</a>\'s status, updated ' + r.timeAgo
+    document.getElementById("statuscafe-content").innerHTML = r.content
+  })
+`))
+}
+
+func (h *Handler) showCurrentStatusView(w http.ResponseWriter, r *http.Request) {
+	logged, _ := h.getUser(r)
+	name := r.URL.Query().Get("name")
+	if name == "" {
+		name = logged
+	}
+	h.renderLayout(w, "current_status", map[string]interface{}{
+		"name": name,
+	}, logged)
+}
