diff --git a/QandA/frontend/src/HomePage.tsx b/QandA/frontend/src/HomePage.tsx
index 8aab876..bfbe1eb 100644
--- a/QandA/frontend/src/HomePage.tsx
+++ b/QandA/frontend/src/HomePage.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { QuestionList } from './QuestionList';
+import { getUnansweredQuestions } from './QuestionsData';
 
 export const HomePage = () => (
   <div>
@@ -6,5 +8,6 @@ export const HomePage = () => (
       <h2>Unanswered Questions</h2>
       <button>Ask a question</button>
     </div>
+    <QuestionList data={getUnansweredQuestions()} />
   </div>
 );
diff --git a/QandA/frontend/src/Question.tsx b/QandA/frontend/src/Question.tsx
new file mode 100644
index 0000000..018230a
--- /dev/null
+++ b/QandA/frontend/src/Question.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { QuestionData } from './QuestionsData';
+
+interface Props {
+  data: QuestionData;
+}
+
+export const Question = ({ data }: Props) => (
+  <div>
+    <div>{data.title}</div>
+    <div>
+      {`Ask by ${
+        data.userName
+      } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
+    </div>
+  </div>
+);
diff --git a/QandA/frontend/src/QuestionList.tsx b/QandA/frontend/src/QuestionList.tsx
index 2488454..636d484 100644
--- a/QandA/frontend/src/QuestionList.tsx
+++ b/QandA/frontend/src/QuestionList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Question } from './Question';
 import { QuestionData } from './QuestionsData';
 
 interface Props {
@@ -8,7 +9,9 @@ interface Props {
 export const QuestionList = ({ data }: Props) => (
   <ul>
     {data.map((question) => (
-      <li key={question.questionId}></li>
+      <li key={question.questionId}>
+        <Question data={question} />
+      </li>
     ))}
   </ul>
 );