diff --git a/1-vue-getting-started/metadata.md b/1-vue-getting-started/metadata.md
new file mode 100644
index 0000000..b6eba04
--- /dev/null
+++ b/1-vue-getting-started/metadata.md
@@ -0,0 +1,111 @@
+# Title
+
+Getting started with creating web apps with Vue.js
+
+## Role(s)
+
+- student
+- developer
+
+## Level
+
+- intermediate
+
+## Product(s)
+
+- Vue.js
+- Azure Static Web Apps
+- Visual Studio Code
+
+## Prerequisites
+
+- HTML/CSS
+- Git
+- npm
+- JavaScript
+
+## Summary
+
+Vue.js is a progressive web framework allowing developers to get up and running quickly, with just the addition of a `script` tag. However, Vue.js can also grow with you, and can be used to create large scalable applications. In this module we will explore the core concepts of Vue.js, and how to get started.
+
+## Learning objectives
+
+1. Creating an app
+1. Working with data
+
+## Chunk your content into subtasks
+
+Identify the subtasks of *module title*
+
+| Subtask | What part of the introduction scenario does this subtask satisfy? | How will you assess it: **Exercise or Knowledge check**? | Which learning objective(s) does this help meet? | Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with? |
+| ---- | ---- | ---- | ---- | ---- |
+| Creating your first app | Creating an app | Exercise | Creating an app | Yes |
+| Displaying data | Working with data | Exercise | Working with data | Binding data to attributes |
+| Binding data to attributes | Working with data | Exercise | Working with data | Displaying data |
+
+## Outline the units
+
+1. **Introduction to Vue.js**
+
+    Vue.js is a progressive web framework. We will see how this can help you creating your applications.
+
+1. **Getting started with Vue.js**
+
+    We will see how to add Vue.js to an application, and explore the concept of state.
+
+    - Adding Vue.js
+    - Creating an app
+    - Adding data
+
+1. **Exercise - Creating an app with Vue.js**
+
+    Let's create our first Vue.js application
+
+    - Adding Vue.js
+    - Adding data
+    - Displaying data
+
+    1. Clone the starter
+    1. Link to library
+    1. Create JavaScript file
+    1. Import and mount the application
+    1. Use the data
+    1. Launch the page
+
+1. **Attribute binding**
+
+    Beyond displaying data on the page, you can also bind data to attributes. We will discuss the various options and syntax available to you.
+
+    - Attribute binding
+    - v-bind
+    - : shortcut
+    - Style and attributes
+
+1. **Exercise - Attribute binding**
+
+    Let's see how you can bind values to attributes.
+
+    - Add data to the application
+    - Bind to attributes
+
+    1. Add properties to the data object
+    1. Add HTML
+    1. Test the results
+    1. Play
+
+1. **Summary**
+
+    We saw how to create a project using Vue.js, and a couple of the different ways we can interact with data.
+
+1. **Knowledge check**
+
+    What types of questions will test *learning objective*? *[(Knowledge check guidance)](https://review.docs.microsoft.com/learn-docs/docs/id-guidance-knowledge-check)*
+
+    - Multiple choice
+
+## Notes
+
+Note any additional information that may be beneficial to this content such as links, reference material, etc.
+
+- [Vue.js](https://v3.vuejs.org/)
+- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview)
diff --git a/2-dynamic-rendering/metadata.md b/2-dynamic-rendering/metadata.md
new file mode 100644
index 0000000..06327b7
--- /dev/null
+++ b/2-dynamic-rendering/metadata.md
@@ -0,0 +1,102 @@
+# Title
+
+Dynamic page displays with Vue.js
+
+## Role(s)
+
+- student
+- developer
+
+## Level
+
+- intermediate
+
+## Product(s)
+
+- Vue.js
+- Azure Static Web Apps
+- Visual Studio Code
+
+## Prerequisites
+
+- Vue.js
+- HTML/CSS
+- Git
+- npm
+- JavaScript
+
+## Summary
+
+One of the goals of any web framework is to update the display based on data values. We will explore how you can make your page dynamic based on the values, and display lists of information.
+
+## Learning objectives
+
+1. Displaying lists
+1. Conditional rendering
+
+## Chunk your content into subtasks
+
+Identify the subtasks of *module title*
+
+| Subtask | What part of the introduction scenario does this subtask satisfy? | How will you assess it: **Exercise or Knowledge check**? | Which learning objective(s) does this help meet? | Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with? |
+| ---- | ---- | ---- | ---- | ---- |
+| Displaying lists of data | Displaying lists | Exercise | Displaying lists | Yes |
+| Showing or hiding information | Conditional rendering | Exercise | Conditional rendering | Yes |
+
+## Outline the units
+
+1. **Overview of dynamic displays**
+
+    When working with data you need the ability to change the display. We will explore some of the core concepts to make this happen.
+
+1. **Rendering lists**
+
+    Let's see how we can use a directive to loop through an array of information
+
+    - v-for syntax
+    - working with keys
+
+1. **Exercise - Rendering lists**
+
+    Let's display a list of information
+
+    - Displaying list data
+
+    1. Clone the starter
+    1. Display the list
+    1. Exploring the code
+    1. Test the page
+
+1. **Conditional rendering**
+
+    There are times when you don't want to show certain information based on the data. We will see how we can control if and when to display values.
+
+    - v-if/v-else
+    - v-show
+
+1. **Exercise - Conditional rendering**
+
+    Let's implement conditional rendering
+
+    - v-if/v-else
+    - v-show
+
+    1. Add the code
+    1. Test the display
+
+1. **Summary**
+
+    We saw how to control the display with data in Vue.js
+
+1. **Knowledge check**
+
+    What types of questions will test *learning objective*? *[(Knowledge check guidance)](https://review.docs.microsoft.com/learn-docs/docs/id-guidance-knowledge-check)*
+
+    - Multiple choice
+
+## Notes
+
+Note any additional information that may be beneficial to this content such as links, reference material, etc.
+
+- [Vue.js](https://v3.vuejs.org/)
+- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview)
diff --git a/2-dynamic-rendering/quiz.md b/2-dynamic-rendering/quiz.md
index 8914711..3efb5d0 100644
--- a/2-dynamic-rendering/quiz.md
+++ b/2-dynamic-rendering/quiz.md
@@ -2,16 +2,31 @@ Choose the best response for each of the questions below. Then select **Check yo
 
 ## quiz title: Check your knowledge
 
-## Multiple Choice
-Which of the following statements is accurate with respect to the way Vue enables list rendering most efficiently?
+What directive do you use to iterate through a list of items?
 
-()`v-if` should be used to cycle through a list of array items in the browser.{{Incorrect. `v-for` is the simplest way to cycle through a list of array objects. Add the `v-for` directive to an `<li>` tag (rather than the `<ul>` or `<ol>` tag) using syntax like the following: `<li v-for="group_discount in group_discounts">{{ group_discount }}</li>`.}}
-()`v-else` should be used to cycle through a list of array items in the browser.{{Incorrect. `v-for` is the simplest way to cycle through a list of array objects. Add the `v-for` directive to an `<li>` tag (rather than the `<ul>` or `<ol>` tag) using syntax like the following: `<li v-for="group_discount in group_discounts">{{ group_discount }}</li>`.}}
-(x)`v-for`should be used to cycle through a list of array items in the browser.{{Correct! `v-for` is the simplest way to cycle through a list of array objects. Add the `v-for` directive to an `<li>` tag (rather than the `<ul>` or `<ol>` tag) using syntax like the following: `<li v-for="group_discount in group_discounts">{{ group_discount }}</li>`.}}
+(x) `v-for`
+    `v-for` allows you to iterate through an array of items
+( ) `v-show`
+    `v-show` allows you to toggle display, but not iterate through items
+( ) `v-else`
+    `v-else` is used with v-if to add Boolean logic
+( ) `v-if`
+    `v-if` is used to add Boolean logic
 
-## Multiple Choice
-Which of the following statements is accurate with respect to the way Vue enables conditional rendering?
+What directive do you use to determine if you should display data?
 
-()`v-show` removes an HTML element from the DOM temporarily in order to prevent the browser from displaying designated content.{{Incorrect. `v-show` will leave the HTML elements in the DOM and write an inline CSS style in the HTML tag to prevent content from being displayed in the browser. The `v-show` option may be the most efficient processing method for any item where you want to toggle its visibility multiple times.}}
-()`v-else` directive must be used in conjunction with `v-if`.{{Incorrect. It is technically not necessary to use the `v-else` directive if you do not need to display an alternative. You can simply use a `v-if` statement to either display an element or not.}}
-(x)`v-if`, `v-else-if` and `v-else` can be used to add layers of complexity for conditional rendering {{Correct! For complicated decision-making you can set a numeric property in order to compute mathematical decisions that you can then layer in your HTML interface with a set of `v-if`, `v-else-if` and `v-else` directives to define multiple conditions.}}
+( ) `v-for`
+    `v-for` allows you to iterate through an array of items
+(x) `v-show`
+    `v-show` allows you to toggle display
+( ) `v-bind`
+    `v-bind` allows you to bind attribute values
+
+What directive is used to implement Boolean logic?
+
+( ) `v-for`
+    `v-for` is used to iterate through an array of items
+( ) `v-bind`
+    `v-bind` is used to bind values to attributes
+(x) `v-if`
+    `v-if` is used to implement Boolean logic
diff --git a/3-data-events/5-computed-properties.md b/3-data-events/5-computed-properties.md
index 6885b96..d8e78d9 100644
--- a/3-data-events/5-computed-properties.md
+++ b/3-data-events/5-computed-properties.md
@@ -27,4 +27,3 @@ const app = Vue.createApp({
 ```
 
 The fields `lastName` and `firstName` are concatenated using a string literal.
-
diff --git a/3-data-events/metadata.md b/3-data-events/metadata.md
new file mode 100644
index 0000000..3b1caec
--- /dev/null
+++ b/3-data-events/metadata.md
@@ -0,0 +1,124 @@
+# Title
+
+Working with data and events in Vue.js
+
+## Role(s)
+
+- student
+- developer
+
+## Level
+
+- intermediate
+
+## Product(s)
+
+- Vue.js
+- Azure Static Web Apps
+- Visual Studio Code
+
+## Prerequisites
+
+- HTML/CSS
+- Git
+- npm
+- JavaScript
+- Vue.js
+
+## Summary
+
+Creating dynamic web applications typically allows users to interact with the page and data. In this module we will see how to add forms to a Vue.js page, and respond to user events. We will also see how we can add computed values to calculate values based on updates to the data.
+
+## Learning objectives
+
+1. Working with forms
+1. Adding events
+1. Computed properties
+
+## Chunk your content into subtasks
+
+Identify the subtasks of *module title*
+
+| Subtask | What part of the introduction scenario does this subtask satisfy? | How will you assess it: **Exercise or Knowledge check**? | Which learning objective(s) does this help meet? | Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with? |
+| ---- | ---- | ---- | ---- | ---- |
+| Adding a form to a page | Working with forms | Exercise | Working with forms | Adding a form to a page |
+| Binding data to a form | Working with forms | Exercise | Working with forms | Adding a form to a page |
+| Responding to user events | Adding events | Exercise | Adding events | Yes |
+| Calculating values dynamically | Computed properties | Exercise | Computed properties | Yes |
+
+## Outline the units
+
+1. **Overview of dynamic data and events**
+
+    Let's see how we can incorporate interactivity into a Vue.js application.
+
+1. **Working with forms**
+
+    Let's explore how to bind Vue.js data to a form.
+
+    - v-model directive
+    - Binding to various controls
+
+1. **Exercise - Binding data to forms**
+
+    Let's add a form to a page and bind data
+
+    - Adding a form
+    - Binding data
+
+    1. Clone the starter
+    1. Create the form
+    1. Walk through the code
+    1. Test the results
+
+1. **Working with events**
+
+    Events are raised when the user interacts with the page. Let's see how we can respond to events.
+
+    - Event concepts
+    - Binding to events
+
+1. **Exercise - Adding event handlers**
+
+    Let's add events to a page
+
+    - Adding the code
+    - Adding the control
+
+    1. Add the function
+    1. Add the button
+    1. Test the page
+
+1. **Understanding computed properties**
+
+    Computed properties allow you to add new values based on existing data
+
+    - Explaining computed properties
+    - Adding computed properties
+
+1. **Exercise - Adding computed properties**
+
+    Let's add a computed property
+
+    - computed properties
+
+    1. Add the computed property
+    1. Add the display to the page
+    1. Test the page
+
+1. **Summary**
+
+    We saw how to allow the user to interact with the page.
+
+1. **Knowledge check**
+
+    What types of questions will test *learning objective*? *[(Knowledge check guidance)](https://review.docs.microsoft.com/learn-docs/docs/id-guidance-knowledge-check)*
+
+    - Multiple choice
+
+## Notes
+
+Note any additional information that may be beneficial to this content such as links, reference material, etc.
+
+- [Vue.js](https://v3.vuejs.org/)
+- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview)
diff --git a/3-data-events/quiz.md b/3-data-events/quiz.md
new file mode 100644
index 0000000..09ae399
--- /dev/null
+++ b/3-data-events/quiz.md
@@ -0,0 +1,34 @@
+# Quiz
+
+What is the shortcut to bind functions to events in Vue.js?
+
+( ) `:`
+    `:` is not the shortcut for binding functions to events
+( ) `v-bind`
+    `v-bind` is not used for binding events
+(x) `@`
+    `@` is the shortcut for binding functions to events
+( ) `v-for`
+    `v-for` is used to iterate through arrays
+
+What directive is used to create a two-way binding between data and a form control?
+
+( ) `v-for`
+    `v-for` is used to iterate through arrays
+(x) `v-model`
+    `v-model` creates a two-way binding
+( ) `v-bind`
+    `v-bind` creates a one-way binding
+( ) `v-if`
+    `v-if` is used for Boolean logic
+
+What HTML control is best suited for working with Boolean values?
+
+( ) `textarea`
+    `textarea` is designed for larger amounts of text
+(x) `checkbox`
+    `checkbox` is designed for Boolean values
+( ) `input type="text"`
+    `input type="text"` is designed for smaller amounts of text
+( ) `input type="email"`
+    `input type="email"` is designed for email addresses
diff --git a/4-cli-components/metadata.md b/4-cli-components/metadata.md
new file mode 100644
index 0000000..fc005a1
--- /dev/null
+++ b/4-cli-components/metadata.md
@@ -0,0 +1,150 @@
+# Title
+
+Getting started with Vue CLI and single-file components in Vue.js
+
+## Role(s)
+
+- student
+- developer
+
+## Level
+
+- intermediate
+
+## Product(s)
+
+- Vue.js
+- Azure Static Web Apps
+- Visual Studio Code
+
+## Prerequisites
+
+- HTML/CSS
+- Git
+- npm
+- JavaScript
+- Vue.js
+
+## Summary
+
+While it is possible to create Vue.js applications using purely JavaScript, most developers need more power and flexibility. By using Vue CLI and single-file components you can use more robust tooling to enhance the development experience. We will see how to use Vue CLI to bootstrap an application, and how to create reusable components in Vue.
+
+## Learning objectives
+
+1. Using Vue CLI
+1. Creating components
+
+## Chunk your content into subtasks
+
+Identify the subtasks of *module title*
+
+| Subtask | What part of the introduction scenario does this subtask satisfy? | How will you assess it: **Exercise or Knowledge check**? | Which learning objective(s) does this help meet? | Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with? |
+| ---- | ---- | ---- | ---- | ---- |
+| Creating a Vue application | Using Vue CLI | Exercise | Using Vue CLI | yes |
+| Creating a component | Creating components | Exercise | Creating components | Making components reusable with props and custom events |
+| Making components reusable with props and custom events | Creating Vue CLI | | Exercise | Creating components | Creating a component |
+
+## Outline the units
+
+1. **Introducing Vue CLI and custom components**
+
+    We start by talking about what Vue CLI and components are.
+
+1. **Getting started with Vue CLI**
+
+    Let's talk about Vue CLI and its capabilities
+
+    - Vue CLI
+    - Installation
+    - Use
+
+1. **Exercise - Creating an application with Vue CLI**
+
+    Let's create an application with Vue CLI
+
+    - Installing Vue CLI
+    - Running Vue CLI
+
+    1. Installing Vue CLI
+    1. Bootstrapping an application
+    1. Exploring the code
+    1. Running the development server
+
+1. **Getting started with Vue components**
+
+    Vue components allow you to create reusable building blocks.
+
+    - Component concepts
+    - Vue files
+    - Importing components
+
+1. **Exercise - Creating a component**
+
+    Let's create our first component
+
+    - Creating a component
+    - Adding the code
+    - Importing the component
+
+    1. Install extensions
+    1. Create the component
+    1. Update the script
+    1. Add the template
+    1. Add style
+    1. Use the host
+    1. Test the application
+
+1. **Component props**
+
+    Props allow you to pass values into a component to make it more reusable
+
+    - The reason for props
+    - Adding props
+
+1. **Exercise - Adding props to a component**
+
+    Let's add props to a component
+
+    - Adding and using props
+
+    1. Create the component
+    1. Add props and computed value
+    1. Add the template display
+    1. Add the component to the page
+    1. Test the results
+
+1. **Custom events for components**
+
+    You can raise custom events from components
+
+    - Why use custom events
+    - Adding custom events
+
+1. **Exercise - Adding a custom event to a component**
+
+    Let's add a custom event
+
+    - Working with custom events
+
+    1. Creating the component
+    1. Adding the code
+    1. Adding the display template
+    1. Add the component to the page
+    1. Test the results
+
+1. **Summary**
+
+    We saw how to create custom components and use Vue CLI
+
+1. **Knowledge check**
+
+    What types of questions will test *learning objective*? *[(Knowledge check guidance)](https://review.docs.microsoft.com/learn-docs/docs/id-guidance-knowledge-check)*
+
+    - Multiple choice
+
+## Notes
+
+Note any additional information that may be beneficial to this content such as links, reference material, etc.
+
+- [Vue.js](https://v3.vuejs.org/)
+- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview)
diff --git a/4-cli-components/quiz.md b/4-cli-components/quiz.md
new file mode 100644
index 0000000..2d1391f
--- /dev/null
+++ b/4-cli-components/quiz.md
@@ -0,0 +1,32 @@
+# Quiz
+
+What property is used to register custom events for a component?
+
+( ) `events`
+    `events` is not a property for components
+(x) `emits`
+    `emits` is used to register custom events for a component
+( ) `props`
+    `props` is used to add property values you can pass into a component
+( ) `methods`
+    `methods` is used to store functions available to the component
+
+What command is used in Vue CLI to create a new web application?
+
+(x) create
+    create is used to create new applications
+( ) help
+    help will display the help screen for Vue CLI
+( ) info
+    info will print debugging information for a Vue application
+
+What to steps are required to import a component?
+
+(x) `import ComponentName from 'ComponentName.vue'
+    You must import the component using `import`
+( ) List the name of the component in `methods`
+    `methods` stores a list of methods not components
+( ) List the name of the component in `props`
+    `props` stores a list of props for a component
+(x) List the name of the component in `components`
+    You must list the component in `components`