diff --git a/src/renderer/components/SnippetsList.vue b/src/renderer/components/SnippetsList.vue
deleted file mode 100644
index 602bd13..0000000
--- a/src/renderer/components/SnippetsList.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div id="snippets-list">
-    <div id="search-buttons" class="columns">
-      <div class="column is-11">
-        <b-field>
-          <b-input placeholder="Search by name, description or language..."
-                   v-model="searchField"
-                   type="search"
-                   icon="search">
-          </b-input>
-        </b-field>
-      </div>
-      <div class="column is-1">
-        <button class="button is-dark is-pulled-right" @click="createSnippetModalActive = true">
-          <b-icon icon="plus"></b-icon>
-        </button>
-      </div>
-    </div>
-
-    <div v-if="snippetsFiltered.length > 0" class="columns snippets" v-for="snippet in snippetsFiltered">
-      <div class="column is-12 snippet-card">
-        <cb-snippet-card :snippet="snippet"></cb-snippet-card>
-      </div>
-    </div>
-    <div v-if="snippetsFiltered.length === 0 && searchField === ''" class="columns snippets">
-      <div class="column is-12 no-snippet">
-        <h1>Hey !</h1>
-        <h2>You don't have any snippet...</h2>
-        <button class="button is-primary" @click="createSnippetModalActive = true">
-          Create a new one :)
-        </button>
-      </div>
-    </div>
-    <div v-if="snippetsFiltered.length === 0 && searchField !== ''" class="columns snippets">
-      <div class="column is-12 no-snippet">
-        <h1>Oh :(</h1>
-        <h2>Sorry, no snippets found for your search</h2>
-      </div>
-    </div>
-
-    <b-modal :active.sync="createSnippetModalActive" has-modal-card>
-      <cb-create-snippet-modal></cb-create-snippet-modal>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-import Vuex from 'vuex';
-import SnippetCard from './SnippetsList/SnippetCard';
-import CreateSnippetModal from './SnippetsList/CreateSnippetModal';
-
-export default {
-  name: 'cb-snippets-list',
-  components: {
-    'cb-snippet-card': SnippetCard,
-    'cb-create-snippet-modal': CreateSnippetModal,
-  },
-  data() {
-    return {
-      searchField: '',
-      createSnippetModalActive: false,
-    };
-  },
-  mounted() {},
-  methods: {},
-  computed: {
-    ...Vuex.mapGetters(['snippets', 'snippetById', 'languageSelected']),
-    snippetsFiltered() {
-      const snippetsFiltered = this.snippets.filter(item =>
-        this.searchField
-          .split(' ')
-          .every(
-            el =>
-              item.name.indexOf(el) > -1 ||
-              item.description.indexOf(el) > -1 ||
-              item.language.indexOf(el) > -1
-          )
-      );
-
-      if (this.languageSelected !== 'all') {
-        return snippetsFiltered.filter(
-          snippet => snippet.language === this.languageSelected
-        );
-      }
-
-      return snippetsFiltered;
-    },
-  },
-  beforeRouteEnter(route, redirect, next) {
-    next(vm => {
-      vm.$store.dispatch('loadSnippets');
-    });
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.snippet-card {
-  padding: 0 12px;
-}
-
-.modal {
-  z-index: 1100;
-  text-align: center;
-}
-
-#snippets-list {
-  margin-top: 72px;
-
-  #search-buttons {
-    position: fixed;
-    top: 72px;
-    width: 73.5%;
-    z-index: 800;
-    background-color: white;
-  }
-
-  .snippets {
-    position: relative;
-    top: 54px;
-  }
-}
-
-.no-snippet {
-  text-align: center;
-  h1 {
-    margin-top: 100px;
-    font-size: 24px;
-  }
-  h2 {
-    font-size: 20px;
-    margin-bottom: 20px;
-  }
-}
-</style>
diff --git a/src/renderer/components/SnippetsList/CreateSnippetModal.vue b/src/renderer/components/SnippetsList/CreateSnippetModal.vue
deleted file mode 100644
index 3ed23ae..0000000
--- a/src/renderer/components/SnippetsList/CreateSnippetModal.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-  <form action="">
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Create snippet</p>
-      </header>
-
-      <section class="modal-card-body">
-        <b-field horizontal label="Name">
-          <b-input
-            type="text"
-            ref="snippetName"
-            v-model="snippet.name"
-            placeholder="Your snippet name"
-            d>
-          </b-input>
-        </b-field>
-
-        <b-field horizontal label="Description">
-          <b-input
-            type="text"
-            v-model="snippet.description"
-            placeholder="Your snippet description">
-          </b-input>
-        </b-field>
-
-        <b-field horizontal label="Language">
-          <b-select placeholder="Select a language" v-model="snippet.language" d>
-            <option
-              v-for="language in languages"
-              :value="language">
-              {{ language | capitalize }}
-            </option>
-          </b-select>
-        </b-field>
-
-        <b-field horizontal label="Content">
-          <editor v-model="snippet.content"
-                  :lang="snippet.language"
-                  theme="monokai"
-                  width="100%"
-                  height="260"
-          ></editor>
-        </b-field>
-
-        <!--<b-field horizontal label="Tags">
-          <b-taginput
-            v-model="snippet.tags"
-            icon="label"
-            placeholder="Add a tag"
-            maxtags="5">
-          </b-taginput>
-        </b-field>-->
-      </section>
-
-      <footer class="modal-card-foot">
-        <button class="button" type="button" @click="$parent.close()">Cancel</button>
-        <button class="button is-primary" type="button" :disabled="isDisabled" @click="createSnippet()">Create</button>
-      </footer>
-    </div>
-  </form>
-</template>
-
-<script>
-import editor from './Editor';
-
-export default {
-  name: 'cb-create-snippet-modal',
-  components: {
-    editor,
-  },
-  data() {
-    return {
-      snippet: {
-        name: '',
-        description: '',
-        language: 'text',
-        content: '',
-        // tags: []
-      },
-      languages: [
-        'text',
-        'elixir',
-        'elm',
-        'golang',
-        'haskell',
-        'html',
-        'java',
-        'javascript',
-        'json',
-        'jsx',
-        'jade',
-        'makefile',
-        'markdown',
-        'ocaml',
-        'perl',
-        'pgsql',
-        'php',
-        'python',
-        'ruby',
-        'scss',
-        'sh',
-        'swift',
-        'typescript',
-        'xml',
-      ],
-    };
-  },
-  mounted() {
-    this.$refs.snippetName.focus();
-  },
-  methods: {
-    createSnippet() {
-      this.$store.dispatch('addSnippet', this.snippet).then(() => {
-        this.$parent.close();
-      });
-    },
-  },
-  computed: {
-    isDisabled() {
-      return (
-        !/\S/.test(this.snippet.name) ||
-        !/\S/.test(this.snippet.language) ||
-        !/\S/.test(this.snippet.content)
-      );
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.modal-card {
-  width: 700px;
-}
-
-.help {
-  display: none !important;
-}
-</style>
diff --git a/src/renderer/components/SnippetsList/SnippetCard.vue b/src/renderer/components/SnippetsList/SnippetCard.vue
deleted file mode 100644
index 20bb119..0000000
--- a/src/renderer/components/SnippetsList/SnippetCard.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
-  <div class="box">
-    <article class="media">
-      <div class="media-content">
-        <div class="content">
-          <div id="card-header" class="columns">
-            <div id="name-category" class="column is-9">
-              <h4>{{snippet.name}}</h4>
-              <h5>({{snippet.language | capitalize}})</h5>
-            </div>
-            <div id="action-buttons" class="column is-3">
-              <div class="is-pulled-right">
-                <b-tooltip :active="showCopiedToClipboard" label="Copied !" position="is-bottom" always>
-                  <a id="copy-snippet"
-                     v-clipboard:copy="snippet.content"
-                     v-clipboard:success="onCopyClipboardSuccess"
-                     title="Copy to clipboard">
-                    <b-icon icon="clipboard"></b-icon>
-                  </a>
-                </b-tooltip>
-                <a id="update-snippet" @click="updateSnippetModalActive = true" title="Edit snippet">
-                  <b-icon icon="pencil"></b-icon>
-                </a>
-                <a id="delete-snippet" @click="deleteSnippet()" title="Delete snippet">
-                  <b-icon icon="trash"></b-icon>
-                </a>
-              </div>
-            </div>
-          </div>
-          <p>{{snippet.description}}</p>
-          <!--<b-taglist>
-            <b-tag v-for="tag in snippet.tags" type="is-light">{{tag}}</b-tag>
-          </b-taglist>-->
-          <editor :code="snippet.content"
-                  :lang="snippet.language"
-                  theme="monokai"
-                  width="100%"
-                  height="260"
-                  :readOnly="true"
-          ></editor>
-        </div>
-      </div>
-    </article>
-
-    <b-modal :active.sync="updateSnippetModalActive" has-modal-card>
-      <cb-update-snippet-modal :snippet="snippet"></cb-update-snippet-modal>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-import Vuex from 'vuex';
-import editor from './Editor';
-import UpdateSnippetModal from './UpdateSnippetModal';
-import BTooltip from '../../../../node_modules/buefy/src/components/tooltip/Tooltip.vue';
-
-export default {
-  name: 'cb-snippet-card',
-  components: {
-    BTooltip,
-    'cb-update-snippet-modal': UpdateSnippetModal,
-    editor,
-  },
-  props: {
-    snippet: Object,
-  },
-  data() {
-    return {
-      updateSnippetModalActive: false,
-      showCopiedToClipboard: false,
-    };
-  },
-  computed: {
-    ...Vuex.mapGetters(['snippets']),
-  },
-  methods: {
-    updateSnippet() {
-      this.$store.dispatch('updateSnippet', this.snippet);
-    },
-    deleteSnippet() {
-      this.$dialog.confirm({
-        title: 'Delete snippet',
-        message: 'Are you sure you want to delete this snippet ?',
-        confirmText: 'Delete',
-        type: 'is-danger',
-        hasIcon: true,
-        onConfirm: () => {
-          this.$store.dispatch('deleteSnippet', this.snippet);
-        },
-      });
-    },
-    onCopyClipboardSuccess() {
-      this.showCopiedToClipboard = true;
-      setTimeout(() => {
-        this.showCopiedToClipboard = false;
-      }, 1000);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.box {
-  margin: 16px 0;
-
-  .media-content {
-    overflow-x: hidden;
-  }
-
-  h5 {
-    font-size: 14px;
-    font-weight: 700;
-  }
-
-  p {
-    font-size: 14px;
-  }
-
-  #card-header {
-    margin-bottom: 0;
-
-    #name-category {
-      padding-bottom: 0;
-    }
-
-    #action-buttons {
-      padding-bottom: 0;
-
-      #delete-snippet {
-        color: $danger;
-
-        &:hover {
-          color: lighten($black, 20%);
-        }
-      }
-
-      #copy-snippet {
-        color: $dark;
-
-        &:hover {
-          color: lighten($black, 20%);
-        }
-      }
-    }
-  }
-
-  .modal {
-    z-index: 1100;
-    text-align: center;
-  }
-}
-
-.Code-Mirror-line {
-  padding: 0;
-}
-</style>
diff --git a/src/renderer/components/SnippetsList/UpdateSnippetModal.vue b/src/renderer/components/SnippetsList/UpdateSnippetModal.vue
deleted file mode 100644
index 2ef2e06..0000000
--- a/src/renderer/components/SnippetsList/UpdateSnippetModal.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <form action="">
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Update snippet</p>
-      </header>
-
-      <section class="modal-card-body">
-        <b-field horizontal label="Name">
-          <b-input
-            type="text"
-            ref="snippetName"
-            v-model="snippetUpdated.name"
-            placeholder="Your snippet name"
-            required>
-          </b-input>
-        </b-field>
-
-        <b-field horizontal label="Description">
-          <b-input
-            type="text"
-            v-model="snippetUpdated.description"
-            placeholder="Your snippet description">
-          </b-input>
-        </b-field>
-
-        <b-field horizontal label="Language">
-          <b-select placeholder="Select a language" v-model="snippetUpdated.language" required>
-            <option
-              v-for="language in languages"
-              :value="language">
-              {{ language | capitalize }}
-            </option>
-          </b-select>
-        </b-field>
-
-        <b-field horizontal label="Content">
-          <editor v-model="code"
-                  :lang="snippetUpdated.language"
-                  theme="monokai"
-                  width="100%"
-                  height="260"
-          ></editor>
-        </b-field>
-
-        <!--<b-field horizontal label="Tags">
-          <b-taginput
-            v-model="snippetUpdated.tags"
-            icon="label"
-            placeholder="Add a tag"
-            maxtags="5">
-          </b-taginput>
-        </b-field>-->
-      </section>
-
-      <footer class="modal-card-foot">
-        <button class="button" type="button" @click="$parent.close()">Cancel</button>
-        <button class="button is-primary" type="button" :disabled="isDisabled" @click="updateSnippet()">Update</button>
-      </footer>
-    </div>
-  </form>
-</template>
-
-<script>
-import editor from './Editor';
-
-export default {
-  name: 'cb-update-snippet-modal',
-  components: {
-    editor,
-  },
-  props: {
-    snippet: Object,
-  },
-  data() {
-    return {
-      code: '',
-      snippetUpdated: {
-        name: '',
-        description: '',
-        language: '',
-        content: '',
-        // tags: []
-      },
-      languages: [
-        'text',
-        'elixir',
-        'elm',
-        'golang',
-        'haskell',
-        'html',
-        'java',
-        'javascript',
-        'json',
-        'jsx',
-        'jade',
-        'makefile',
-        'markdown',
-        'ocaml',
-        'perl',
-        'pgsql',
-        'php',
-        'python',
-        'ruby',
-        'scss',
-        'sh',
-        'swift',
-        'typescript',
-        'xml',
-      ],
-    };
-  },
-  mounted() {
-    this.$refs.snippetName.focus();
-    this.code = Object.assign(this.snippet.content, {});
-    this.snippetUpdated = { ...this.snippet };
-    // this.snippetUpdated.tags = [...this.snippet.tags];
-  },
-  methods: {
-    updateSnippet() {
-      this.snippetUpdated.content = this.code;
-      this.$store.dispatch('updateSnippet', this.snippetUpdated).then(() => {
-        this.$store.dispatch('loadSnippets');
-        this.$parent.close();
-      });
-    },
-  },
-  computed: {
-    isDisabled() {
-      return (
-        !/\S/.test(this.snippetUpdated.name) ||
-        !/\S/.test(this.snippetUpdated.language) ||
-        !/\S/.test(this.code)
-      );
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.modal-card {
-  width: 700px;
-}
-
-.help {
-  display: none !important;
-}
-</style>
diff --git a/src/renderer/components/editor/Editor.html b/src/renderer/components/editor/Editor.html
new file mode 100644
index 0000000..83b2e45
--- /dev/null
+++ b/src/renderer/components/editor/Editor.html
@@ -0,0 +1 @@
+<div :style="{width: width ? px(width) : '100%'}"></div>
diff --git a/src/renderer/components/editor/Editor.scss b/src/renderer/components/editor/Editor.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/renderer/components/SnippetsList/Editor.vue b/src/renderer/components/editor/Editor.vue
similarity index 94%
rename from src/renderer/components/SnippetsList/Editor.vue
rename to src/renderer/components/editor/Editor.vue
index aaeddda..36afedb 100644
--- a/src/renderer/components/SnippetsList/Editor.vue
+++ b/src/renderer/components/editor/Editor.vue
@@ -1,5 +1,4 @@
-<template>
-  <div :style="{width: width ? px(width) : '100%'}"></div>
+<template src="./Editor.html">
 </template>
 
 <script>
@@ -78,6 +77,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style src="./Editor.scss" lang="scss">
 
 </style>
diff --git a/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.html b/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.html
new file mode 100644
index 0000000..10a40f6
--- /dev/null
+++ b/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.html
@@ -0,0 +1,60 @@
+<form action="">
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Create snippet</p>
+    </header>
+
+    <section class="modal-card-body">
+      <b-field horizontal label="Name">
+        <b-input
+          type="text"
+          ref="snippetName"
+          v-model="snippet.name"
+          placeholder="Your snippet name"
+          d>
+        </b-input>
+      </b-field>
+
+      <b-field horizontal label="Description">
+        <b-input
+          type="text"
+          v-model="snippet.description"
+          placeholder="Your snippet description">
+        </b-input>
+      </b-field>
+
+      <b-field horizontal label="Language">
+        <b-select placeholder="Select a language" v-model="snippet.language" d>
+          <option
+            v-for="language in languages"
+            :value="language">
+            {{ language | capitalize }}
+          </option>
+        </b-select>
+      </b-field>
+
+      <b-field horizontal label="Content">
+        <editor v-model="snippet.content"
+                :lang="snippet.language"
+                theme="monokai"
+                width="100%"
+                height="260"
+        ></editor>
+      </b-field>
+
+      <!--<b-field horizontal label="Tags">
+        <b-taginput
+          v-model="snippet.tags"
+          icon="label"
+          placeholder="Add a tag"
+          maxtags="5">
+        </b-taginput>
+      </b-field>-->
+    </section>
+
+    <footer class="modal-card-foot">
+      <button class="button" type="button" @click="$parent.close()">Cancel</button>
+      <button class="button is-primary" type="button" :disabled="isDisabled" @click="createSnippet()">Create</button>
+    </footer>
+  </div>
+</form>
diff --git a/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.scss b/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.scss
new file mode 100644
index 0000000..9d2b2c0
--- /dev/null
+++ b/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.scss
@@ -0,0 +1,7 @@
+.modal-card {
+  width: 700px;
+}
+
+.help {
+  display: none !important;
+}
diff --git a/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.vue b/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.vue
new file mode 100644
index 0000000..704b0f2
--- /dev/null
+++ b/src/renderer/components/modals/create-snippet-modal/CreateSnippetModal.vue
@@ -0,0 +1,72 @@
+<template src="./CreateSnippetModal.html">
+</template>
+
+<script>
+import editor from '../../editor/Editor';
+
+export default {
+  name: 'cb-create-snippet-modal',
+  components: {
+    editor,
+  },
+  data() {
+    return {
+      snippet: {
+        name: '',
+        description: '',
+        language: 'text',
+        content: '',
+        // tags: []
+      },
+      languages: [
+        'text',
+        'elixir',
+        'elm',
+        'golang',
+        'haskell',
+        'html',
+        'java',
+        'javascript',
+        'json',
+        'jsx',
+        'jade',
+        'makefile',
+        'markdown',
+        'ocaml',
+        'perl',
+        'pgsql',
+        'php',
+        'python',
+        'ruby',
+        'scss',
+        'sh',
+        'swift',
+        'typescript',
+        'xml',
+      ],
+    };
+  },
+  mounted() {
+    this.$refs.snippetName.focus();
+  },
+  methods: {
+    createSnippet() {
+      this.$store.dispatch('addSnippet', this.snippet).then(() => {
+        this.$parent.close();
+      });
+    },
+  },
+  computed: {
+    isDisabled() {
+      return (
+        !/\S/.test(this.snippet.name) ||
+        !/\S/.test(this.snippet.language) ||
+        !/\S/.test(this.snippet.content)
+      );
+    },
+  },
+};
+</script>
+
+<style src="./CreateSnippetModal.scss" lang="scss">
+</style>
diff --git a/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.html b/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.html
new file mode 100644
index 0000000..fa90ebb
--- /dev/null
+++ b/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.html
@@ -0,0 +1,60 @@
+<form action="">
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Update snippet</p>
+    </header>
+
+    <section class="modal-card-body">
+      <b-field horizontal label="Name">
+        <b-input
+          type="text"
+          ref="snippetName"
+          v-model="snippetUpdated.name"
+          placeholder="Your snippet name"
+          required>
+        </b-input>
+      </b-field>
+
+      <b-field horizontal label="Description">
+        <b-input
+          type="text"
+          v-model="snippetUpdated.description"
+          placeholder="Your snippet description">
+        </b-input>
+      </b-field>
+
+      <b-field horizontal label="Language">
+        <b-select placeholder="Select a language" v-model="snippetUpdated.language" required>
+          <option
+            v-for="language in languages"
+            :value="language">
+            {{ language | capitalize }}
+          </option>
+        </b-select>
+      </b-field>
+
+      <b-field horizontal label="Content">
+        <editor v-model="code"
+                :lang="snippetUpdated.language"
+                theme="monokai"
+                width="100%"
+                height="260"
+        ></editor>
+      </b-field>
+
+      <!--<b-field horizontal label="Tags">
+        <b-taginput
+          v-model="snippetUpdated.tags"
+          icon="label"
+          placeholder="Add a tag"
+          maxtags="5">
+        </b-taginput>
+      </b-field>-->
+    </section>
+
+    <footer class="modal-card-foot">
+      <button class="button" type="button" @click="$parent.close()">Cancel</button>
+      <button class="button is-primary" type="button" :disabled="isDisabled" @click="updateSnippet()">Update</button>
+    </footer>
+  </div>
+</form>
diff --git a/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.scss b/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.scss
new file mode 100644
index 0000000..9d2b2c0
--- /dev/null
+++ b/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.scss
@@ -0,0 +1,7 @@
+.modal-card {
+  width: 700px;
+}
+
+.help {
+  display: none !important;
+}
diff --git a/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.vue b/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.vue
new file mode 100644
index 0000000..28c426d
--- /dev/null
+++ b/src/renderer/components/modals/update-snippet-modal/UpdateSnippetModal.vue
@@ -0,0 +1,82 @@
+<template src="./UpdateSnippetModal.html">
+
+</template>
+
+<script>
+import editor from '../../editor/Editor';
+
+export default {
+  name: 'cb-update-snippet-modal',
+  components: {
+    editor,
+  },
+  props: {
+    snippet: Object,
+  },
+  data() {
+    return {
+      code: '',
+      snippetUpdated: {
+        name: '',
+        description: '',
+        language: '',
+        content: '',
+        // tags: []
+      },
+      languages: [
+        'text',
+        'elixir',
+        'elm',
+        'golang',
+        'haskell',
+        'html',
+        'java',
+        'javascript',
+        'json',
+        'jsx',
+        'jade',
+        'makefile',
+        'markdown',
+        'ocaml',
+        'perl',
+        'pgsql',
+        'php',
+        'python',
+        'ruby',
+        'scss',
+        'sh',
+        'swift',
+        'typescript',
+        'xml',
+      ],
+    };
+  },
+  mounted() {
+    this.$refs.snippetName.focus();
+    this.code = Object.assign(this.snippet.content, {});
+    this.snippetUpdated = { ...this.snippet };
+    // this.snippetUpdated.tags = [...this.snippet.tags];
+  },
+  methods: {
+    updateSnippet() {
+      this.snippetUpdated.content = this.code;
+      this.$store.dispatch('updateSnippet', this.snippetUpdated).then(() => {
+        this.$store.dispatch('loadSnippets');
+        this.$parent.close();
+      });
+    },
+  },
+  computed: {
+    isDisabled() {
+      return (
+        !/\S/.test(this.snippetUpdated.name) ||
+        !/\S/.test(this.snippetUpdated.language) ||
+        !/\S/.test(this.code)
+      );
+    },
+  },
+};
+</script>
+
+<style src="./UpdateSnippetModal.scss" lang="scss">
+</style>
diff --git a/src/renderer/components/snippets-list/SnippetsList.html b/src/renderer/components/snippets-list/SnippetsList.html
new file mode 100644
index 0000000..19634a0
--- /dev/null
+++ b/src/renderer/components/snippets-list/SnippetsList.html
@@ -0,0 +1,43 @@
+<div id="snippets-list">
+  <div id="search-buttons" class="columns">
+    <div class="column is-11">
+      <b-field>
+        <b-input placeholder="Search by name, description or language..."
+                 v-model="searchField"
+                 type="search"
+                 icon="search">
+        </b-input>
+      </b-field>
+    </div>
+    <div class="column is-1">
+      <button class="button is-dark is-pulled-right" @click="createSnippetModalActive = true">
+        <b-icon icon="plus"></b-icon>
+      </button>
+    </div>
+  </div>
+
+  <div v-if="snippetsFiltered.length > 0" class="columns snippets" v-for="snippet in snippetsFiltered">
+    <div class="column is-12 snippet-card">
+      <cb-snippet-card :snippet="snippet"></cb-snippet-card>
+    </div>
+  </div>
+  <div v-if="snippetsFiltered.length === 0 && searchField === ''" class="columns snippets">
+    <div class="column is-12 no-snippet">
+      <h1>Hey !</h1>
+      <h2>You don't have any snippet...</h2>
+      <button class="button is-primary" @click="createSnippetModalActive = true">
+        Create a new one :)
+      </button>
+    </div>
+  </div>
+  <div v-if="snippetsFiltered.length === 0 && searchField !== ''" class="columns snippets">
+    <div class="column is-12 no-snippet">
+      <h1>Oh :(</h1>
+      <h2>Sorry, no snippets found for your search</h2>
+    </div>
+  </div>
+
+  <b-modal :active.sync="createSnippetModalActive" has-modal-card>
+    <cb-create-snippet-modal></cb-create-snippet-modal>
+  </b-modal>
+</div>
diff --git a/src/renderer/components/snippets-list/SnippetsList.scss b/src/renderer/components/snippets-list/SnippetsList.scss
new file mode 100644
index 0000000..899e5d8
--- /dev/null
+++ b/src/renderer/components/snippets-list/SnippetsList.scss
@@ -0,0 +1,37 @@
+.snippet-card {
+  padding: 0 12px;
+}
+
+.modal {
+  z-index: 1100;
+  text-align: center;
+}
+
+#snippets-list {
+  margin-top: 72px;
+
+  #search-buttons {
+    position: fixed;
+    top: 72px;
+    width: 73.5%;
+    z-index: 800;
+    background-color: white;
+  }
+
+  .snippets {
+    position: relative;
+    top: 54px;
+  }
+}
+
+.no-snippet {
+  text-align: center;
+  h1 {
+    margin-top: 100px;
+    font-size: 24px;
+  }
+  h2 {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+}
diff --git a/src/renderer/components/snippets-list/SnippetsList.vue b/src/renderer/components/snippets-list/SnippetsList.vue
new file mode 100644
index 0000000..923ec36
--- /dev/null
+++ b/src/renderer/components/snippets-list/SnippetsList.vue
@@ -0,0 +1,55 @@
+<template src="./SnippetsList.html">
+</template>
+
+<script>
+import Vuex from 'vuex';
+import SnippetCard from './snippet-card/SnippetCard';
+import CreateSnippetModal from '../modals/create-snippet-modal/CreateSnippetModal';
+
+export default {
+  name: 'cb-snippets-list',
+  components: {
+    'cb-snippet-card': SnippetCard,
+    'cb-create-snippet-modal': CreateSnippetModal,
+  },
+  data() {
+    return {
+      searchField: '',
+      createSnippetModalActive: false,
+    };
+  },
+  mounted() {},
+  methods: {},
+  computed: {
+    ...Vuex.mapGetters(['snippets', 'snippetById', 'languageSelected']),
+    snippetsFiltered() {
+      const snippetsFiltered = this.snippets.filter(item =>
+        this.searchField
+          .split(' ')
+          .every(
+            el =>
+              item.name.indexOf(el) > -1 ||
+              item.description.indexOf(el) > -1 ||
+              item.language.indexOf(el) > -1
+          )
+      );
+
+      if (this.languageSelected !== 'all') {
+        return snippetsFiltered.filter(
+          snippet => snippet.language === this.languageSelected
+        );
+      }
+
+      return snippetsFiltered;
+    },
+  },
+  beforeRouteEnter(route, redirect, next) {
+    next(vm => {
+      vm.$store.dispatch('loadSnippets');
+    });
+  },
+};
+</script>
+
+<style src="./SnippetsList.scss" lang="scss">
+</style>
diff --git a/src/renderer/components/snippets-list/snippet-card/SnippetCard.html b/src/renderer/components/snippets-list/snippet-card/SnippetCard.html
new file mode 100644
index 0000000..d3d8fb8
--- /dev/null
+++ b/src/renderer/components/snippets-list/snippet-card/SnippetCard.html
@@ -0,0 +1,47 @@
+<div class="box" xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
+  <article class="media">
+    <div class="media-content">
+      <div class="content">
+        <div id="card-header" class="columns">
+          <div id="name-category" class="column is-9">
+            <h4>{{snippet.name}}</h4>
+            <h5>({{snippet.language | capitalize}})</h5>
+          </div>
+          <div id="action-buttons" class="column is-3">
+            <div class="is-pulled-right">
+              <b-tooltip :active="showCopiedToClipboard" label="Copied !" position="is-bottom" always>
+                <a id="copy-snippet"
+                   v-clipboard:copy="snippet.content"
+                   v-clipboard:success="onCopyClipboardSuccess"
+                   title="Copy to clipboard">
+                  <b-icon icon="clipboard"></b-icon>
+                </a>
+              </b-tooltip>
+              <a id="update-snippet" @click="updateSnippetModalActive = true" title="Edit snippet">
+                <b-icon icon="pencil"></b-icon>
+              </a>
+              <a id="delete-snippet" @click="deleteSnippet()" title="Delete snippet">
+                <b-icon icon="trash"></b-icon>
+              </a>
+            </div>
+          </div>
+        </div>
+        <p>{{snippet.description}}</p>
+        <!--<b-taglist>
+          <b-tag v-for="tag in snippet.tags" type="is-light">{{tag}}</b-tag>
+        </b-taglist>-->
+        <editor :code="snippet.content"
+                :lang="snippet.language"
+                theme="monokai"
+                width="100%"
+                height="260"
+                :readOnly="true"
+        ></editor>
+      </div>
+    </div>
+  </article>
+
+  <b-modal :active.sync="updateSnippetModalActive" has-modal-card>
+    <cb-update-snippet-modal :snippet="snippet"></cb-update-snippet-modal>
+  </b-modal>
+</div>
diff --git a/src/renderer/components/snippets-list/snippet-card/SnippetCard.scss b/src/renderer/components/snippets-list/snippet-card/SnippetCard.scss
new file mode 100644
index 0000000..d361f44
--- /dev/null
+++ b/src/renderer/components/snippets-list/snippet-card/SnippetCard.scss
@@ -0,0 +1,53 @@
+.box {
+  margin: 16px 0;
+
+  .media-content {
+    overflow-x: hidden;
+  }
+
+  h5 {
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  p {
+    font-size: 14px;
+  }
+
+  #card-header {
+    margin-bottom: 0;
+
+    #name-category {
+      padding-bottom: 0;
+    }
+
+    #action-buttons {
+      padding-bottom: 0;
+
+      #delete-snippet {
+        color: $danger;
+
+        &:hover {
+          color: lighten($black, 20%);
+        }
+      }
+
+      #copy-snippet {
+        color: $dark;
+
+        &:hover {
+          color: lighten($black, 20%);
+        }
+      }
+    }
+  }
+
+  .modal {
+    z-index: 1100;
+    text-align: center;
+  }
+}
+
+.Code-Mirror-line {
+  padding: 0;
+}
diff --git a/src/renderer/components/snippets-list/snippet-card/SnippetCard.vue b/src/renderer/components/snippets-list/snippet-card/SnippetCard.vue
new file mode 100644
index 0000000..361a8a0
--- /dev/null
+++ b/src/renderer/components/snippets-list/snippet-card/SnippetCard.vue
@@ -0,0 +1,56 @@
+<template src="./SnippetCard.html">
+</template>
+
+<script>
+import Vuex from 'vuex';
+import editor from '../../editor/Editor';
+import UpdateSnippetModal from '../../modals/update-snippet-modal/UpdateSnippetModal';
+import BTooltip from '../../../../../node_modules/buefy/src/components/tooltip/Tooltip.vue';
+
+export default {
+  name: 'cb-snippet-card',
+  components: {
+    BTooltip,
+    'cb-update-snippet-modal': UpdateSnippetModal,
+    editor,
+  },
+  props: {
+    snippet: Object,
+  },
+  data() {
+    return {
+      updateSnippetModalActive: false,
+      showCopiedToClipboard: false,
+    };
+  },
+  computed: {
+    ...Vuex.mapGetters(['snippets']),
+  },
+  methods: {
+    updateSnippet() {
+      this.$store.dispatch('updateSnippet', this.snippet);
+    },
+    deleteSnippet() {
+      this.$dialog.confirm({
+        title: 'Delete snippet',
+        message: 'Are you sure you want to delete this snippet ?',
+        confirmText: 'Delete',
+        type: 'is-danger',
+        hasIcon: true,
+        onConfirm: () => {
+          this.$store.dispatch('deleteSnippet', this.snippet);
+        },
+      });
+    },
+    onCopyClipboardSuccess() {
+      this.showCopiedToClipboard = true;
+      setTimeout(() => {
+        this.showCopiedToClipboard = false;
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style src="./SnippetCard.scss" lang="scss">
+</style>
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index a83c34e..a36c42d 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -8,7 +8,7 @@ export default new Router({
     {
       path: '/',
       name: 'cb-snippets-list',
-      component: require('@/components/SnippetsList').default,
+      component: require('@/components/snippets-list/SnippetsList').default,
     },
     {
       path: '*',