diff --git a/src/components/answer.vue b/src/components/answer.vue
new file mode 100755
index 0000000..b188f80
--- /dev/null
+++ b/src/components/answer.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    {{ a }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'answer',
+  props: {
+    a: String
+  }
+}
+</script>
+
diff --git a/src/components/qa.vue b/src/components/qa.vue
new file mode 100755
index 0000000..57d8f5b
--- /dev/null
+++ b/src/components/qa.vue
@@ -0,0 +1,32 @@
+<template>
+  <div id='qa'>
+    <question :q='q'/>
+    <answer :a='a'/>
+  </div>
+</template>
+
+<script>
+import question from './question.vue'
+import answer from './answer.vue'
+
+export default {
+  name: 'qa',
+  components: {
+    question,
+    answer,
+  },
+  props: {
+    q: String,
+    a: String
+  }
+}
+</script>
+
+<style scoped>
+#qa{
+  --block-spacing: 7.5em;
+
+  margin-top: var(--block-spacing);
+  margin-bottom: var(--block-spacing);
+}
+</style>
diff --git a/src/components/question.vue b/src/components/question.vue
new file mode 100755
index 0000000..7507d2b
--- /dev/null
+++ b/src/components/question.vue
@@ -0,0 +1,24 @@
+<template>
+  <div id='question_box'>
+    {{ q }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'question',
+  props: {
+    q: String
+  }
+}
+</script>
+
+<style scoped>
+#question_box {
+  --text-spacing: 0.75em;
+
+  font-style: italic;
+  margin-top: var(--text-spacing);
+  margin-bottom: var(--text-spacing);
+}
+</style>