diff --git a/README.md b/README.md
index cd95801..c86f403 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 ## Best Practices:
 
+### Router
+
 - Views are components but should be used as a page for the router to mount. Really you could rename View directory Pages if you cared.
 - Reusable componets should be located in the components directory.
 - Use Named Routes like `<router-link :to="{ name: 'home' }">Home</router-link>|` so you are changing url paths only in one place (`routes.js`).
@@ -10,7 +12,15 @@
 - Using `$route` within your component limits it's flexibility. Within the `router.js` you can use the `props: true` attribute on a route. This will send the route params into the component as props. This will allow you to also reuse a componet as a child component sending in the username as a prop. Think of a Modal that an admin would use to see a users profile info without navigating to the user's Page.
 - Linking to Dynamic routes looks like: `<router-link :to="{ name: 'user, params: { username: 'Drew'} }">Drew's user page</router-link>`
 
+### Components
+
 - You should register globally 'Base' components. So the components you will use frequently. Examples could be `BaseIcon.vue` or maybe a `BaseButton.vue` component.
+- A BaseIcon was created and registered Globally with props that let us dynamically link to symbols in the `feather-sprite.svg` located in our public folder. The dynamic registration of components came from a recipe in the Vue documentation. It required installing `lodash` as an npm dependecy.
+- Commonly reusable components like display elemtents, form elements, buttons, and modals can be created like our Base Components using props, but if we want a "dynamic" template we can use `Slots` to insert a custom template.
+- Slots get access to parent components (Data, computed properties).
+- Scoped slots are when you want the template code to have access to the child components data. (Advanced pattern).
+- Adding a name attribute to a slot `<slot name="heading"></slot>` allows you to use multiple slots in your component definition. Our parent component now would use `<h2 slot="heading">My header</h2>` to place the content appropriately
+- A `template` tag can be added to provide more than one tag within a slot block. The template can also make use of the `slot=` attribute. Using the `template` tag prevents your component code from getting cluttered with divs. You can also use whatever tags and Components are available to this component and pass it into slots.
 
 ## Project setup
 
diff --git a/src/components/BaseIcon.vue b/src/components/BaseIcon.vue
index ff14fe0..4c92ed3 100644
--- a/src/components/BaseIcon.vue
+++ b/src/components/BaseIcon.vue
@@ -2,8 +2,8 @@
   <div class="icon-wrapper">
     <svg class="icon" :width="width" :height="height">
       <use v-bind="{ 'xlink:href': '/feather-sprite.svg#' + name }"></use>
-      // notice +name here
     </svg>
+    <slot></slot>
   </div>
 </template>
 
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index 9fbeffd..ce49331 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -6,8 +6,7 @@
     <div class="event-card -shadow">
       <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
       <h4 class="title">{{ event.title }}</h4>
-      <BaseIcon name="users" />
-      <span>{{ event.attendees.length }} attending</span>
+      <BaseIcon name="users">{{ event.attendees.length }} attending</BaseIcon>
     </div>
   </router-link>
 </template>