diff --git a/.eleventyignore b/.eleventyignore
index 577d558..b43bf86 100644
--- a/.eleventyignore
+++ b/.eleventyignore
@@ -1,2 +1 @@
 README.md
-user-guide
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 2a5df66..a1fdcc3 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -76,6 +76,7 @@
           <li><a href="https://penpot.app/privacy.html">Privacy policy</a></li>
         </ul>
         <ul class="footer-block">
+          <li><a href="/user-guide">User guide</a></li>
           <li><a href="/developer-guide">Developer guide</a></li>
           <li><a href="/faqs">FAQs</a></li>
         </ul>
@@ -99,7 +100,7 @@
     </footer>
 
     <!-- Current page: {{ page.url | url }} -->
-    
+
     <!-- Matomo -->
     <script type="text/javascript">
       var _paq = window._paq = window._paq || [];
diff --git a/_includes/layouts/user-guide.njk b/_includes/layouts/user-guide.njk
index 49e2801..aa56fc1 100644
--- a/_includes/layouts/user-guide.njk
+++ b/_includes/layouts/user-guide.njk
@@ -18,11 +18,11 @@ templateClass: tmpl-user-guide
 {%- endmacro -%}
 
 <div class="main-container with-sidebar">
-  <aside class="sidebar">
+  <aside id="stickySidebar" class="sidebar">
     {%- set root = '/user-guide/index' | find -%}
-    <div id="toc-title">Table of contents</div>
     <div id="toc">
-      <a href="{{ root.url }}">{{ root.data.title }}</a>
+      <div class="header mobile" id="toc-title">{{ root.data.title }}</div>
+      <a class="header" href="{{ root.url }}">{{ root.data.title }}</a>
       {{ show_children(root) }}
     </div>
   </aside>
diff --git a/css/index.css b/css/index.css
index 57dcd41..45b30cf 100644
--- a/css/index.css
+++ b/css/index.css
@@ -36,12 +36,16 @@ h1, h2, h3,
   max-width: 42rem;
   position: relative;
 }
+img {
+  width: 100%;
+}
 p,
 li {
   line-height: 1.6;
 }
 ul, ol {
   margin-bottom: 2rem;
+  padding-left: 1rem;
 }
 li {
   margin-bottom: 1rem;
@@ -458,6 +462,10 @@ a[href].direct-link:focus:visited,
   padding: 2rem;
   border-radius: 4px;
 }
+.hint {
+  font-size: 0.9rem;
+  margin-bottom: 2rem;
+}
 
 .search {
   position: absolute;
@@ -635,6 +643,69 @@ a[href].direct-link:focus:visited,
 }
 
 
+.intro-sections {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 0 0 4rem 0;
+  list-style: none;
+}
+.intro-sections li {
+  position: relative;
+  margin: 1rem 2rem 1rem 0;
+  background-color: #eee;
+  flex: 33%;
+  background-color: white;
+  box-shadow: 0px 4px 10px rgb(28 56 71 / 5%);
+  border: 1px solid var(--graylight);
+  border-radius: 8px;
+}
+.intro-sections li:hover {
+  border-color: var(--primary);
+}
+.intro-sections li > a {
+  display: block;
+  padding: 2.6rem;
+  color: var(--graydark);
+  text-decoration: none;
+}
+.intro-sections li h3 {
+  margin-top: 0;
+  padding-top: 0;
+  line-height: 1.2;
+}
+.intro-sections li p {
+  color: var(--graymedium);
+  font-size: 1.2rem;
+}
+
+
+table, tr, th, td {
+    color: var(--graydark);
+    padding: 1rem;
+    vertical-align: top;
+    border: 1px solid var(--graylight);
+    border-collapse: collapse;
+    font-size: 1.124rem;
+}
+table {
+  background-color: white;
+  box-shadow: 0px 4px 20px rgb(28 56 71 / 5%);
+}
+/* th {
+  background: rgba(0,0,0,.06);
+} */
+table>tbody>tr:first-child>td,
+table>thead>tr:first-child>th {
+    font-weight: bold;
+    background: none repeat scroll 0 0 #ededed;
+}
+table tr:nth-child(odd) {
+    background: rgba(0,0,0,.02);
+}
+
+
 @media (max-width: 900px) {
   hr {
     margin-top: 5rem;
diff --git a/img/interface-dashboard.png b/img/interface-dashboard.png
new file mode 100644
index 0000000..69341a4
Binary files /dev/null and b/img/interface-dashboard.png differ
diff --git a/img/interface-viewmode.png b/img/interface-viewmode.png
new file mode 100644
index 0000000..794d300
Binary files /dev/null and b/img/interface-viewmode.png differ
diff --git a/img/interface-workspace.png b/img/interface-workspace.png
new file mode 100644
index 0000000..3fbac6a
Binary files /dev/null and b/img/interface-workspace.png differ
diff --git a/img/viewport.png b/img/viewport.png
new file mode 100644
index 0000000..6016259
Binary files /dev/null and b/img/viewport.png differ
diff --git a/index.njk b/index.njk
index 5ad8d08..5b8f757 100644
--- a/index.njk
+++ b/index.njk
@@ -11,6 +11,13 @@ eleventyNavigation:
 <h1 class="main-title">Help center</h1>
 
 <ul class="help-sections">
+  <li>
+    <a href="/user-guide/">
+      <h3>User guide →</h3>
+      <p>Everything you need to know about how Penpot works.</p>
+      <span class="advice"> WIP </span>
+    </a>
+  </li>
   <li>
     <a href="/developer-guide/">
       <h3>Developer guide →</h3>
@@ -30,12 +37,6 @@ eleventyNavigation:
       <!-- p>Write us an email, join team discussions or chat with us.</p-->
     <!-- /a -->
   </li>
-  <li class="no-link soon">
-      <h3>User guide →</h3>
-      <!-- p>Everything you need to know about how Penpot works.</p -->
-      <p>While we finish the first version of the user guide you can watch tutorials at our <a href="https://www.youtube.com/channel/UCAqS8G72uv9P5HG1IfgnQ9g" target="_blank">Youtube channel</a>.</p>
-      <span class="advice"> Coming soon </span>
-  </li>
   <li class="github">
     <a href="https://github.com/penpot/">
       <svg width="357.782" height="349.03" viewBox="0 0 335.421 327.216">
diff --git a/user-guide/01-introduction/1-1-quickstart.njk b/user-guide/01-introduction/1-1-quickstart.njk
new file mode 100644
index 0000000..5496c15
--- /dev/null
+++ b/user-guide/01-introduction/1-1-quickstart.njk
@@ -0,0 +1,15 @@
+---
+title: Quickstart
+---
+
+<h1 id="section-1-1">Quickstart</h1>
+
+<p class="main-paragraph">You can start using Penpot right in your browser or installing it in a server of your own.</p>
+
+<h3>In the browser</h3>
+<p>To use Penpot online point your browser to <a href="https://design.penpot.app" target="_blank">design.penpot.app</a> and start designing. Use the latest Google Chrome or Mozilla Firefox for the best experience. We also provide specific support to WebKit (Safari / Epiphany).</p>
+<p>You simply go to <a href="https://penpot.app" target="_blank">penpot.app</a> and click on the Signup button. You will be asked to create an account. We only ask for an email. There are some authentication providers available, too.</p>
+
+<h3>In my own server</h3>
+<p>Current private Penpot instances are only requiring basic Docker knowledge.</p>
+<p>You can run your own Penpot server following these instructions: <a href="/developer-guide/configuration">help.penpot.app/developer-guide/configuration</a></p>
diff --git a/user-guide/01-introduction/1-2-shortcuts.njk b/user-guide/01-introduction/1-2-shortcuts.njk
new file mode 100644
index 0000000..4a11810
--- /dev/null
+++ b/user-guide/01-introduction/1-2-shortcuts.njk
@@ -0,0 +1,385 @@
+---
+title: Shortcuts
+---
+
+<h1 id="section-1-1">Shortcuts</h1>
+
+<p class="main-paragraph">Penpot provides shortcuts that help to speed your workflow. Many keyboard shortcuts appear next to the command names in menus.</p>
+
+<p class="main-paragraph">Here you can find a list of all keyboard shortcuts that you can use in Penpot. Bear in mind that most of them are at the workspace, where they are more needed.</p>
+
+<p>You can also check the shortcuts at its <a href="https://github.com/penpot/penpot/blob/develop/frontend/src/app/main/data/workspace/shortcuts.cljs" target="_blank">GitHub file</a></p>
+
+<h3 id="edit">Edit</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>Undo</td>
+      <td style="text-align: center;">Ctrl + z</td>
+      <td style="text-align: center;">⌘z</td>
+    </tr>
+    <tr>
+      <td>Redo</td>
+      <td style="text-align: center;">Ctrl + Shift + z</td>
+      <td style="text-align: center;">⌘⇧z</td>
+    </tr>
+    <tr>
+      <td>Clear undo</td>
+      <td style="text-align: center;">Ctrl + q</td>
+      <td style="text-align: center;">⌘q</td>
+    </tr>
+    <tr>
+      <td>Copy</td>
+      <td style="text-align: center;">Ctrl + c</td>
+      <td style="text-align: center;">⌘c</td>
+    </tr>
+    <tr>
+      <td>Duplicate</td>
+      <td style="text-align: center;">Ctrl + d</td>
+      <td style="text-align: center;">⌘d</td>
+    </tr>
+      <td>Cut</td>
+      <td style="text-align: center;">Ctrl + x</td>
+      <td style="text-align: center;">⌘x</td>
+    </tr>
+    <tr>
+      <td>Paste</td>
+      <td style="text-align: center;">Ctrl + v</td>
+      <td style="text-align: center;">⌘v</td>
+    </tr>
+    <tr>
+      <td>Delete</td>
+      <td style="text-align: center;">Supr, Delete</td>
+      <td style="text-align: center;">⌫</td>
+    </tr>
+    <tr>
+      <td>Start editing</td>
+      <td style="text-align: center;">Enter</td>
+      <td style="text-align: center;">Enter</td>
+    </tr>
+    <tr>
+      <td>Exit editing</td>
+      <td style="text-align: center;">Esc</td>
+      <td style="text-align: center;">Esc</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="modify-layers">Modify layers</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>Group</td>
+      <td style="text-align: center;">Ctrl + g</td>
+      <td style="text-align: center;">⌘g</td>
+    </tr>
+    <tr>
+      <td>Ungroup</td>
+      <td style="text-align: center;">Shift + g</td>
+      <td style="text-align: center;">⇧g</td>
+    </tr>
+    <tr>
+      <td>Mask</td>
+      <td style="text-align: center;">Ctrl + m</td>
+      <td style="text-align: center;">⌘m</td>
+    </tr>
+    <tr>
+      <td>Unmask</td>
+      <td style="text-align: center;">Ctrl + Shift + m</td>
+      <td style="text-align: center;">⌘⇧m</td>
+    </tr>
+    <tr>
+      <td>Create component</td>
+      <td style="text-align: center;">Ctrl + k</td>
+      <td style="text-align: center;">⌘k</td>
+    </tr>
+    <tr>
+      <td>Flip vertical</td>
+      <td style="text-align: center;">Ctrl + v</td>
+      <td style="text-align: center;">⌘v</td>
+    </tr>
+    <tr>
+      <td>Flip horizontal</td>
+      <td style="text-align: center;">Ctrl + h</td>
+      <td style="text-align: center;">⌘h</td>
+    </tr>
+    <tr>
+      <td>Bring forward</td>
+      <td style="text-align: center;">Ctrl + ↑</td>
+      <td style="text-align: center;">⌘↑</td>
+    </tr>
+    <tr>
+      <td>Bring to front</td>
+      <td style="text-align: center;">Ctrl + Shift + ↑</td>
+      <td style="text-align: center;">⌘⇧↑</td>
+    <tr>
+      <td>Send backwards</td>
+      <td style="text-align: center;">Ctrl + ↓</td>
+      <td style="text-align: center;">⌘↓</td>
+    </tr>
+    <tr>
+      <td>Send to back</td>
+      <td style="text-align: center;">Ctrl + Shift + ↓</td>
+      <td style="text-align: center;">⌘⇧↓</td>
+    </tr>
+    <tr>
+      <td>Move up</td>
+      <td style="text-align: center;">↑</td>
+      <td style="text-align: center;">↑</td>
+    </tr>
+    <tr>
+      <td>Move down</td>
+      <td style="text-align: center;">↓</td>
+      <td style="text-align: center;">↓</td>
+    </tr>
+    <tr>
+      <td>Move right</td>
+      <td style="text-align: center;">→</td>
+      <td style="text-align: center;">→</td>
+    </tr>
+    <tr>
+      <td>Move left</td>
+      <td style="text-align: center;">←</td>
+      <td style="text-align: center;">←</td>
+    </tr>
+    <tr>
+      <td>Move fast up</td>
+      <td style="text-align: center;">Shift + ↑</td>
+      <td style="text-align: center;">⇧↑</td>
+    </tr>
+    <tr>
+      <td>Move fast down</td>
+      <td style="text-align: center;">Shift + ↓</td>
+      <td style="text-align: center;">⇧↓</td>
+    </tr>
+    <tr>
+      <td>Move fast right</td>
+      <td style="text-align: center;">Shift + →</td>
+      <td style="text-align: center;">⇧→</td>
+    </tr>
+    <tr>
+      <td>Move fast left</td>
+      <td style="text-align: center;">Shift + ←</td>
+      <td style="text-align: center;">⇧←</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="tools">Tools</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>Artboard</td>
+      <td style="text-align: center;">a</td>
+      <td style="text-align: center;">a</td>
+    </tr>
+    <tr>
+      <td>Rectangle</td>
+      <td style="text-align: center;">r</td>
+      <td style="text-align: center;">r</td>
+    </tr>
+    <tr>
+      <td>Ellipse</td>
+      <td style="text-align: center;">e</td>
+      <td style="text-align: center;">e</td>
+    </tr>
+    <tr>
+      <td>Text</td>
+      <td style="text-align: center;">t</td>
+      <td style="text-align: center;">t</td>
+    </tr>
+    <tr>
+      <td>Path</td>
+      <td style="text-align: center;">p</td>
+      <td style="text-align: center;">p</td>
+    </tr>
+    <tr>
+      <td>Curve</td>
+      <td style="text-align: center;">Ctrl + c</td>
+      <td style="text-align: center;">⌘c</td>
+    </tr>
+    <tr>
+      <td>Image</td>
+      <td style="text-align: center;">k</td>
+      <td style="text-align: center;">k</td>
+    </tr>
+    <tr>
+      <td>Comment</td>
+      <td style="text-align: center;">c</td>
+      <td style="text-align: center;">c</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="main-menu">Main menu</h3>
+
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>Toggle rules</td>
+      <td style="text-align: center;">Ctrl + Shift + r</td>
+      <td style="text-align: center;">⌘⇧r</td>
+    </tr>
+    <tr>
+      <td>Toggle grid</td>
+      <td style="text-align: center;">Ctrl + '</td>
+      <td style="text-align: center;">⌘'</td>
+    </tr>
+    <tr>
+      <td>Toggle snap to grid</td>
+      <td style="text-align: center;">Ctrl + Shift + '</td>
+      <td style="text-align: center;">⌘⇧'</td>
+    </tr>
+    <tr>
+      <td>Toggle dynamic alignment</td>
+      <td style="text-align: center;">Ctrl + \</td>
+      <td style="text-align: center;">⌘\</td>
+    </tr>
+    <tr>
+      <td>Select all</td>
+      <td style="text-align: center;">Ctrl + a</td>
+      <td style="text-align: center;">⌘a</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="panels">Panels</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>Layers</td>
+      <td style="text-align: center;">Ctrl + l</td>
+      <td style="text-align: center;">⌘l</td>
+    </tr>
+    <tr>
+      <td>Assets</td>
+      <td style="text-align: center;">Ctrl + i</td>
+      <td style="text-align: center;">⌘i</td>
+    </tr>
+    <tr>
+      <td>History</td>
+      <td style="text-align: center;">Ctrl + h</td>
+      <td style="text-align: center;">⌘h</td>
+    </tr>
+    <tr>
+      <td>Color palette</td>
+      <td style="text-align: center;">Ctrl + p</td>
+      <td style="text-align: center;">⌘p</td>
+    </tr>
+    <tr>
+      <td>Color picker</td>
+      <td style="text-align: center;">i</td>
+      <td style="text-align: center;">i</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="zoom">Zoom</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>Zoom in</td>
+      <td style="text-align: center;">Ctrl + + <br> Ctrl-Scrollwheel <br> Pinch out (trackpad)</td>
+      <td style="text-align: center;">⌘+ <br> Option-Scrollwheel <br> Option-swipe (Magic Mouse) <br> Pinch out (trackpad) <br></td>
+    </tr>
+    <tr>
+      <td>Zoom out</td>
+      <td style="text-align: center;">Ctrl + - <br> Ctrl-Scrollwheel <br> Pinch in (trackpad)</td>
+      <td style="text-align: center;">⌘- <br> Option-Scrollwheel <br> Option-swipe (Magic Mouse) <br> Pinch in (trackpad) <br></td>
+    </tr>
+    <tr>
+      <td>Zoom to 100%</td>
+      <td style="text-align: center;">Ctrl + Shift + 0</td>
+      <td style="text-align: center;">⌘⇧0</td>
+    </tr>
+    <tr>
+      <td>Zoom to fit all</td>
+      <td style="text-align: center;">Ctrl + Shift + 1</td>
+      <td style="text-align: center;">⌘⇧1</td>
+    </tr>
+    <tr>
+      <td>Zoom to selected</td>
+      <td style="text-align: center;">Ctrl + Shift + 2</td>
+      <td style="text-align: center;">⌘⇧2</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="view-mode">View mode</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>Next frame</td>
+      <td style="text-align: center;">→</td>
+      <td style="text-align: center;">→</td>
+    </tr>
+    <tr>
+      <td>Previous frame</td>
+      <td style="text-align: center;">←</td>
+      <td style="text-align: center;">←</td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="goto-screens">Go to screens</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <tbody>
+    <tr>
+      <th width="NaN%" valign="top" class="cellrowborder"><strong>shortcut</strong></th>
+      <th width="NaN%" valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+    <tr>
+      <td>View mode</td>
+      <td style="text-align: center;">g v</td>
+      <td style="text-align: center;">g v</td>
+    </tr>
+    <tr>
+      <td>Dashboard</td>
+      <td style="text-align: center;">g d</td>
+      <td style="text-align: center;">g d</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/user-guide/01-introduction/1-3-info.njk b/user-guide/01-introduction/1-3-info.njk
new file mode 100644
index 0000000..75465e5
--- /dev/null
+++ b/user-guide/01-introduction/1-3-info.njk
@@ -0,0 +1,18 @@
+---
+title: Tutorials & info
+---
+
+<h1 id="section-1-1">Info & tutorials</h1>
+
+<p class="main-paragraph">Some useful links to better understand Penpot through answers and tutorials.</p>
+
+<h3 id="dev-diaries">Dev Diaries</h3>
+<p>The Dev Diaries are our release notes, where we jot down every new feature, enhancement and fix included in every release. There are also kudos to community contributors <3</p>
+
+<p>Wanna know what's new? take a look at our <a href="https://penpot.app/dev-diaries.html" target="_blank">Dev Diraries</a>.</p>
+
+<h3 id="video-tutorials">Video tutorials</h3>
+<p>Suscribe to the <a href="https://www.youtube.com/channel/UCAqS8G72uv9P5HG1IfgnQ9g" target="_blank">Penpot Youtube channel</a> o get updates when we upload new Penpot tutorials, demos of features and talks.</p>
+
+<h3 id="faqs">Frequently asked questions</h3>
+<p>If you have questions about the "Whys" or the "Hows" of Penpot we have collected and answered a bunch of the most common questions that we've been asked so far at <a href="/faqs/">Frequently asked questions</a></p>
diff --git a/user-guide/01-introduction/index.njk b/user-guide/01-introduction/index.njk
new file mode 100644
index 0000000..7601c4e
--- /dev/null
+++ b/user-guide/01-introduction/index.njk
@@ -0,0 +1,26 @@
+---
+title: 1· Introduction
+---
+
+<h1 id="section-1">Introduction</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/01-introduction/1-1-quickstart">
+      <h3>Quickstart →</h3>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/01-introduction/1-2-shortcuts">
+      <h3>Shortcuts →</h3>
+      <p>Speed your design workflow</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/01-introduction/1-3-info">
+      <h3>Info & tutorials →</h3>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+</ul>
diff --git a/user-guide/02-the-interface/index.njk b/user-guide/02-the-interface/index.njk
new file mode 100644
index 0000000..5b4e760
--- /dev/null
+++ b/user-guide/02-the-interface/index.njk
@@ -0,0 +1,120 @@
+---
+title: 2· The interface
+---
+
+<h1 id="the-interface">The interface</h1>
+<p class="main-paragraph">The Penpot interface has three main areas: the Dashboard, the Workspace and the View mode. Lets take a look at their composition and main features.</p>
+
+
+<h3 id="dashboard-interface">Dashboard</h3>
+<p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams.</p>
+
+<p>
+  <a href="/img/interface-dashboard.png" target="_blank">
+    <img src="/img/interface-dashboard.png" alt="Dashboard" />
+  </a>
+</p>
+
+<p class="hint">
+  <strong>1)</strong> Teams
+  <strong>2)</strong> Search files
+  <strong>3)</strong> Projects
+  <strong>4)</strong> Drafts
+  <strong>5)</strong> Shared Libraries
+  <strong>6)</strong> Pinned projects
+  <strong>7)</strong> User area
+  <strong>8)</strong> Comments notification
+  <strong>9)</strong> Create project
+  <strong>1)</strong> File card
+</p>
+
+<ol>
+  <li><strong>Teams:</strong> A team allows you to collaborate with other penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.</li>
+  <li><strong>Search:</strong> If you are looking for a specific file just type its title at the search box.</li>
+  <li><strong>Projects:</strong> A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.</li>
+  <li><strong>Drafts:</strong> The drafts section is where you can find the design files that are not inside any project.</li>
+  <li><strong>Shared Libraries:</strong> In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets. </li>
+  <li><strong>Pinned projects:</strong> If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them show at the sidebar.</li>
+  <li><strong>User area:</strong> This must be you! Change your profile, password or change the language from the settings. You can also find here a way to leave us feedback. We’d love to read your thoughts :)</li>
+  <li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team.</li>
+  <li><strong>Create project:</strong> Create as many projects as you need to organize your designs.</li>
+  <li><strong>File card:</strong> Basic information about a file at plain sight. How it looks like, last update or if it’s added as a Shared Library. You can rename or delete a file. A lot of more options coming soon.</li>
+</ol>
+
+
+
+<h3 id="workspace-interface">Workspace</h3>
+<p>The Workspace is where you actually create your designs. You have an infinite canvas where you can work directly but you also have the ability to create and work inside artboards that will help you to create pages and exportation units.</p>
+
+<p>
+  <a href="/img/interface-workspace.png" target="_blank">
+    <img src="/img/interface-workspace.png" alt="Workspace" />
+  </a>
+</p>
+
+<p class="hint">
+  <strong>1)</strong> Main menu
+  <strong>2)</strong> Users
+  <strong>3)</strong> File status
+  <strong>4)</strong> Zoom
+  <strong>5)</strong> View mode
+  <strong>6)</strong> Toolbar
+  <strong>7)</strong> Layers panel
+  <strong>8)</strong> Assets panel
+  <strong>9)</strong> History panel
+  <strong>1)</strong> Palettes panel
+  <strong>1)</strong> Prototype mode
+  <strong>1)</strong> Object properties
+</p>
+
+<ol>
+  <li><strong>Main menu:</strong> At the file main menu you are able to tweak your workspace configuration. Manage visibility for grids, rules, panels. Enable or disable sapping, dynamic alignment. Add or remove the file as Shared Library. There’s also a link to the feedback options.</li>
+  <li><strong>Users:</strong> You can see how many users are working in the file at the same time.</li>
+  <li><strong>File status:</strong> Information about the file saving state. Know if last changes are saved or if there is a problem.</li>
+  <li><strong>Zoom:</strong> Zoom options and shortcuts information.</li>
+  <li><strong>View mode:</strong> The view mode button launches a presentation with the artboards. See more about what you can do at the view mode. </li>
+  <li><strong>Toolbar:</strong> The toolbar is the place where you will find the tools to quick and easily create the different types of shapes: Artboard, rectangle, ellipse, text, graphic, path, free drawing and comments.</li>
+  <li><strong>Layers panel:</strong> The layers panel allows you to see and manage the layers and pages of a file. A file can have as many pages as you need. Each page has its own viewport (the almost infinite area where you actually create your designs) with its own layers. You can create, delete or reorder your pages at your needs.</li>
+  <li><strong>Assets panel:</strong> Each file has a default library (File Library) where that allows to store elements and styles that are likely to be reused. That includes components, graphics, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.</li>
+  <li><strong>History panel:</strong> The history panel keeps track of the latest changes on an opened file. You can do undo/redo to walk the changes and expand each one of them to get detailed information.</li>
+  <li><strong>Palettes panel:</strong> The colors palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries.</li>
+  <li><strong>Prototype mode:</strong> Penpot allows you to prototype interactions connecting artboards. Once selected the prototype mode at the right sidebar, select an element to drag a connection to another artboard. You’ll be able to see the interactive prototype in action in the view mode (access by clicking the play button at the top right).</li>
+  <li><strong>Object properties:</strong> At the Design panel you can find and edit the properties of a selected shape. The list of properties shown varies depending on the type of element. There are some common properties always set (like size and position) and others not set but available to be added (stroke, shadow, blur...).</li>
+</ol>
+
+
+
+<h3 id="viewmode-interface">View mode</h3>
+<p>Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have a code mode where you can get objects specifications and code snippets.</p>
+
+<p>
+  <a href="/img/interface-viewmode.png" target="_blank">
+    <img src="/img/interface-viewmode.png" alt="View mode" />
+  </a>
+</p>
+
+<p class="hint">
+  <strong>1)</strong> Frames view toggle
+  <strong>2)</strong> Frames counter
+  <strong>3)</strong> Play mode
+  <strong>4)</strong> Comments mode
+  <strong>5)</strong> Code mode
+  <strong>6)</strong> Interactions settings
+  <strong>7)</strong> Share link
+  <strong>8)</strong> Edit file (back to workspace)
+  <strong>9)</strong> Zoom
+  <strong>9)</strong> Fullscreen mode
+</p>
+
+<ol>
+  <li><strong>Artboards toggle:</strong> Opening the frames view displays a list of the artboards with thumbnails that provide a graphic overview of the file.</li>
+  <li><strong>Artboards counter:</strong> Artboards count and current position. </li>
+  <li><strong>Play mode:</strong> Default presentation mode where you can also play with interactions.</li>
+  <li><strong>Comments mode:</strong> Comments mode shows comments inside artboards and allows users to reply or add new ones.</li>
+  <li><strong>Code mode:</strong> At code mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup.</li>
+  <li><strong>Interactions settings:</strong> Select whether to highlight interactions active areas on click, all the time or not at all.</li>
+  <li><strong>Share link:</strong> Create a shareable link of the view mode to send it so developers, other designers or stakeholders can view the designs and access the code specifications regardless being at your team or even logged at Penpot.</li>
+  <li><strong>Edit file:</strong> Go back to the workspace.</li>
+  <li><strong>Zoom:</strong> Zoom options and shortcuts information.</li>
+  <li><strong>Fullscreen mode:</strong> Activate or deactivate browser fullscreen mode.</li>
+</ol>
diff --git a/user-guide/index.njk b/user-guide/index.njk
index d08fb34..a653f04 100644
--- a/user-guide/index.njk
+++ b/user-guide/index.njk
@@ -5,6 +5,23 @@ eleventyNavigation:
   order: 2
 ---
 
-<h1 id="user-guide">User guide</h1>
+<h1 id="user-guide">Welcome to the Penpot user guide.</h1>
 
-<p>(USER) hola Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p class="main-paragraph">In this documentation you will find (almost) everything you need to know about how to work with Penpot. From the interface basics to advanced functionality. Know details about topics such as prototyping, organizing your designs, or sharing to make a difference getting the best of Penpot.</p>
+
+<p class="advice">This documentation is a work in progress that will be updated frequently. If you have a suggestion, miss something or find anything incorrect, please write us at <a href="mailto:info@penpot.app" target="_blank">info@penpot.app</a>.</p>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/01-introduction/1-1-quickstart">
+      <h3>Quickstart</h3>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/01-introduction/02-the-interface/">
+      <h3>The interface</h3>
+      <p>Penpot's main areas and features</p>
+    </a>
+  </li>
+</ul>
diff --git a/user-guide/section-1/index.njk b/user-guide/section-1/index.njk
deleted file mode 100644
index 512cd7e..0000000
--- a/user-guide/section-1/index.njk
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Section 1
----
-
-<h1 id="section-1">Section 1</h1>
-
-<p>Hello...</p>
-
diff --git a/user-guide/section-1/section-1-1.njk b/user-guide/section-1/section-1-1.njk
deleted file mode 100644
index bd89fa3..0000000
--- a/user-guide/section-1/section-1-1.njk
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Section 1.1
----
-
-<h1 id="section-1-1">Section 1.1</h1>
-
-<p>Hello...</p>
-
diff --git a/user-guide/section-2/index.njk b/user-guide/section-2/index.njk
deleted file mode 100644
index 1f7ac0d..0000000
--- a/user-guide/section-2/index.njk
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Section 2
----
-
-<h1 id="section-2">Section 2</h1>
-
-<h2 id="section-2-sub-1">Section 2 sub 1</h2>
-<p>Hello...</p>
-
-<h2 id="section-2-sub-2">Section 2 sub 2</h2>
-<p>Hello...</p>
-
diff --git a/user-guide/section-3.njk b/user-guide/section-3.njk
deleted file mode 100644
index a4af1d6..0000000
--- a/user-guide/section-3.njk
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Section 3
----
-
-<h1 id="section-3">Section 3</h1>
-
-<h2 id="section-3-sub-1">Section 3 sub 1</h2>
-<p>Hello...</p>
-
-<h2 id="section-3-sub-2">Section 3 sub 2</h2>
-<p>Hello...</p>
-
-<h2 id="section-3-sub-3">Section 3 sub 3</h2>
-<p>Hello...</p>
-