diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7c2feb7
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}
diff --git a/components/Card.vue b/components/Card.vue
index 6294167..a56554b 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
   .card(:class="{ cardActive: isActive }")
-    p.card--title {{resource.title}}
+    .card--meta
+      img.card--favicon(:src="'https://www.google.com/s2/favicons?domain=' + resource.url" aria-hidden="true")
+      p.card--title {{resource.title}}
     p.card--description {{resource.desc}}
     .card--links
       a.card--reference(@click='createCopyUrl(resource)') Copy
@@ -33,6 +35,17 @@ export default {
     box-shadow:inset 0px 0px 0px 3px #08e5ff;
   }
 
+  &--meta {
+    display: flex;
+    align-items: center;
+  }
+
+  &--favicon {
+    height: 16px;
+    width: 16px;
+    margin-right: .5rem;
+  }
+
   &--reference {
     cursor: pointer;
     display: flex;
@@ -65,7 +78,7 @@ export default {
     flex-direction: column;
     font-size: 13px;
     color: white;
-    margin: 0 0 .7rem 0;
+    margin: .7rem 0 .7rem 0;
     line-height: 1.3;
     letter-spacing: .5px;
     max-width: 15rem;
diff --git a/components/TableRow.vue b/components/TableRow.vue
index ff30ccf..d4595ba 100644
--- a/components/TableRow.vue
+++ b/components/TableRow.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
   tr.tableRow(:class="{ rowActive: isActive }")
+    td.tableRow--favicon
+      img(:src="'https://www.google.com/s2/favicons?domain=' + resource.url" aria-hidden="true")
     td.tableRow--title {{resource.title}}
     td.tableRow--description {{resource.desc}}
     td.tableRow--links
@@ -33,7 +35,7 @@ export default {
   transition: 0.2s ease-in-out;
   width: 1fr;
   display: grid;
-  grid-template-columns: minmax(150px, 2fr) 8fr 125px;
+  grid-template-columns: 1.5rem minmax(150px, 2fr) 8fr 125px;
 
   &--title {
     color: white;
diff --git a/resources/design.json b/resources/design.json
index bb98f75..765ad66 100644
--- a/resources/design.json
+++ b/resources/design.json
@@ -6,145 +6,151 @@
       "title": "UX/UI Designer Roadmap 2017",
       "desc": "Roadmap to becoming a UI/UX Designer in 2017",
       "url": "https://github.com/togiberlin/ui-ux-designer-roadmap",
-      "tags": []
+      "tags": ["career", "ui", "ux"]
     },
     {
       "title": "Undraw",
       "desc": "Free vector illustrations for your website.",
       "url": "https://undraw.co",
-      "tags": []
+      "tags": ["illustration", "svg", "ui"]
     },
     {
       "title": "Practical UI tips",
       "desc": "7 Tips to boost your UI design.",
       "url": "https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886",
-      "tags": []
+      "tags": ["ui", "tips", "tricks"]
     },
     {
       "title": "UI tips",
       "desc": "Design tips by Steve Schoger",
       "url": "https://twitter.com/i/moments/880688233641848832",
-      "tags": []
+      "tags": ["ui", "tips", "tricks"]
     },
     {
       "title": "Colorhunt",
       "desc": "Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes",
       "url": "http://colorhunt.co/",
-      "tags": []
+      "tags": ["color", "palette"]
     },
     {
       "title": "Flatuicolorpicker",
       "desc": "Flatuicolorpicker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs",
       "url": "http://www.flatuicolorpicker.com",
-      "tags": []
+      "tags": ["color", "palette"]
     },
     {
       "title": "awwwards",
       "desc": "The awards for design, creativity and innovation on the Internet. Get your inspiration here or even submit your own website!",
       "url": "https://awwwards.com",
-      "tags": []
+      "tags": ["inspiration", "awards"]
     },
     {
       "title": "One Page Love",
       "desc": "One Page websites, templates and resources",
       "url": "https://onepagelove.com/",
-      "tags": []
+      "tags": ["templates", "inspiration"]
     },
     {
       "title": "CSS Winner",
       "desc": "CSS Winner is a unique global platform awarding and showcasing the best websites and promoting innovative web designers, developers and agencies. We popularize the websites designed elsewhere through CSS Winner, increasing competence and coherence in collation and awarding them.",
       "url": "https://www.csswinner.com/",
-      "tags": []
+      "tags": ["inspiration", "awards"]
     },
     {
       "title": "Httpster",
       "desc": "Httpster is an inspiration resource showcasing totally rocking websites made by people from all over the world.",
       "url": "https://httpster.net/",
-      "tags": []
+      "tags": ["inspiration", "showcase"]
     },
     {
       "title": "siteinspire",
       "desc": "siteInspire is a showcase of the finest web and interactive design.",
       "url": "https://www.siteinspire.com",
-      "tags": []
+      "tags": ["inspiration", "showcase"]
     },
     {
       "title": "ShapeFactory",
       "desc": "Simple design tools for everyone. Simply create a logo, pigment/color scheme, gradient or duetone style.",
       "url": "https://shapefactory.co",
-      "tags": []
+      "tags": ["tools", "housestyle", "generator"]
     },
     {
       "title": "lapa.ninja",
       "desc": "The best resources for learning design.",
       "url": "https://www.lapa.ninja/learn/",
-      "tags": []
-    },
-    {
-      "title": "Typography Handbook",
-      "desc": "A concise, referential guide on best web typographic practices.",
-      "url": "http://typographyhandbook.com",
-      "tags": []
+      "tags": ["educational", "tutorial", "learning"]
     },
     {
       "title": "Hyperpixel.io",
       "desc": "Discover the latest designs for your own inspiration from our curated list of landing pages.",
       "url": "https://hyperpixel.io/",
-      "tags": []
+      "tags": ["inspiration", "showcase"]
     },
     {
       "title": "sharpen.design",
       "desc": "Sharpen is where designers hone their craft - randomly generated design challenges.",
       "url": "https://sharpen.design/",
-      "tags": []
+      "tags": ["challenges", "practice", "generator"]
     },
     {
       "title": "Good UI",
       "desc": "A Good User Interface Is One That's Backed By Reproducible Evidence (A/B Tests)",
       "url": "https://goodui.org/",
-      "tags": []
+      "tags": ["educational", "inspiration"]
     },
     {
       "title": "SVG ON THE WEB",
       "desc": "A Practical Guide",
       "url": "https://svgontheweb.com/",
-      "tags": []
+      "tags": ["educational", "guide", "svg"]
     },
     {
       "title": "UI Gradients",
-      "desc": "Beautiful colour gradients for design and code.",
-      "url": "https://uigradients.com/#NoontoDusk",
-      "tags": []
+      "desc": "Beautiful color gradients for design and code.",
+      "url": "https://uigradients.com/",
+      "tags": ["generator", "inspiration", "color"]
     },
     {
       "title": "evernote.design",
       "desc": "Basically webgems but just for design.",
       "url": "https://evernote.design",
-      "tags": []
+      "tags": ["inspiration", "resources", "collection"]
     },
     {
       "title": "Inclusive Components",
       "desc": "A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.",
       "url": "https://inclusive-components.design",
-      "tags": []
+      "tags": ["educational", "inclusive", "accessibility"]
     },
     {
       "title": "UX Collective",
       "desc": "A Medium-based blog, curating articles on modern UX Design practices, conventions, and ideas.",
       "url": "https://uxdesign.cc/",
-      "tags": []
+      "tags": ["reading", "inspiration", "educational"]
     },
     {
       "title": "Codrops",
       "desc": "Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.",
       "url": "https://tympanus.net/codrops/",
-      "tags": []
+      "tags": ["reading", "educational"]
     },
     {
-      "title": "Fontjoy",
-      "desc": "Generate font combinations with deep learning.",
-      "url": "https://fontjoy.com/",
-      "tags": []
+      "title": "Hero Patterns",
+      "desc": "A collection of repeatable SVG background patterns for you to use on your web projects.",
+      "url": "https://www.heropatterns.com/",
+      "tags": ["background", "pattern", "svg"]
+    },
+    {
+      "title": "Subtle Patterns",
+      "desc": "A collection of subtle patterns to use in your projects.",
+      "url": "https://www.toptal.com/designers/subtlepatterns/",
+      "tags": ["background", "pattern", "subtle"]
+    },
+    {
+      "title": "Cool Backgrounds",
+      "desc": "descCool Backgrounds offers a selection of beautiful, enticing image backgrounds to add to your blog post, website, or wallpaper.",
+      "url": "https://coolbackgrounds.io/",
+      "tags": ["background", "inspiration"]
     },
     {
       "title": "Can't Unsee",
@@ -163,6 +169,54 @@
       "desc": "GoodBrief is a random generator for design briefs. Choose the type of creative work and the industry, and goodbrief will generate a unique brief.",
       "url": "http://goodbrief.io",
       "tags": ["generator"]
+    },
+    {
+      "title": "Google Fonts",
+      "desc": "Large library of high-quality, free web fonts.",
+      "url": "https://fonts.google.com/",
+      "tags": ["typography", "collection"]
+    },
+    {
+      "title": "Practical Typography",
+      "desc": "A just-deep-enough dive into typography for designers.",
+      "url": "https://practicaltypography.com/",
+      "tags": ["typography", "educational", "reading"]
+    },
+    {
+      "title": "Wakamai Fondue",
+      "desc": "Extensive font file analyzer that tells you everything you need to know about your font.",
+      "url": "https://wakamaifondue.com/",
+      "tags": ["typography", "tools"]
+    },
+    {
+      "title": "Typewolf",
+      "desc": "Discover trending fonts and pairings from around the web.",
+      "url": "https://www.typewolf.com/",
+      "tags": ["typography", "collection", "inspiration"]
+    },
+    {
+      "title": "Typography Handbook",
+      "desc": "A concise, referential guide on best web typographic practices.",
+      "url": "http://typographyhandbook.com",
+      "tags": ["typography", "guide", "best practices", "educational"]
+    },
+    {
+      "title": "Fontjoy",
+      "desc": "Generate font combinations with deep learning.",
+      "url": "https://fontjoy.com/",
+      "tags": ["typography", "tools"]
+    },
+    {
+      "title": "Web Color Data",
+      "desc": "Disover color palettes of popular websites.",
+      "url": "http://webcolourdata.com/",
+      "tags": ["color", "palette", "inspiration"]
+    },
+    {
+      "title": "Adobe Color",
+      "desc": "Create a color palette with this helpful tool of Adobe.",
+      "url": "https://color.adobe.com/",
+      "tags": ["color", "palette"]
     }
   ]
 }
diff --git a/resources/frontend.json b/resources/frontend.json
index 80c11b6..2a152e4 100644
--- a/resources/frontend.json
+++ b/resources/frontend.json
@@ -31,6 +31,24 @@
       "desc": "Basic HTML & CSS for NON-WEB DESIGNERS",
       "url": "http://www.dontfeartheinternet.com/",
       "tags": []
+    },
+    {
+      "title": "The Font Loading Checklist",
+      "desc": "Four important considerations when loading web fonts.",
+      "url": "https://www.zachleat.com/web/font-checklist/",
+      "tags": ["typography", "tips", "best practices"]
+    },
+    {
+      "title": "My Device",
+      "desc": "Inspect the root css rules and viewport measurements of your device, and compare it to other devices.",
+      "url": "https://www.mydevice.io/",
+      "tags": ["viewport", "measurements", "responsive"]
+    },
+    {
+      "title": "Layers of CSS Box Model",
+      "desc": "Understand in which order the elements of the CSS box model are stacked.",
+      "url": "https://hicksdesign.co.uk/boxmodel/",
+      "tags": ["educational", "css"]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/resources/index.js b/resources/index.js
index e01b213..440f7dd 100644
--- a/resources/index.js
+++ b/resources/index.js
@@ -16,6 +16,12 @@ import icons from './icons'
 import accessibility from './accessibility'
 import contentCreators from './contentCreators'
 
+const sortByTitle = ({ title: titleA }, { title: titleB }) => {
+  if(titleA < titleB) return -1
+  if(titleA > titleB) return 1
+  return 0
+}
+
 export default [
   css,
   daily,
@@ -33,5 +39,6 @@ export default [
   utility,
   icons,
   accessibility,
-  contentCreators,
-]
+  contentCreators
+].sort(sortByTitle)
+