diff --git a/assets/images/buttons/close.png b/assets/images/buttons/close.png
new file mode 100644
index 0000000..040a791
Binary files /dev/null and b/assets/images/buttons/close.png differ
diff --git a/assets/images/buttons/microphone.png b/assets/images/buttons/microphone.png
new file mode 100644
index 0000000..aa29ec3
Binary files /dev/null and b/assets/images/buttons/microphone.png differ
diff --git a/assets/images/buttons/next.png b/assets/images/buttons/next.png
new file mode 100644
index 0000000..55d5303
Binary files /dev/null and b/assets/images/buttons/next.png differ
diff --git a/assets/images/buttons/previous.png b/assets/images/buttons/previous.png
new file mode 100644
index 0000000..da77c64
Binary files /dev/null and b/assets/images/buttons/previous.png differ
diff --git a/assets/images/buttons/sound.png b/assets/images/buttons/sound.png
new file mode 100644
index 0000000..35ffa00
Binary files /dev/null and b/assets/images/buttons/sound.png differ
diff --git a/assets/images/content_bg.png b/assets/images/content_bg.png
new file mode 100644
index 0000000..674a85f
Binary files /dev/null and b/assets/images/content_bg.png differ
diff --git a/assets/images/content_score_board.png b/assets/images/content_score_board.png
new file mode 100644
index 0000000..124442b
Binary files /dev/null and b/assets/images/content_score_board.png differ
diff --git a/lib/view/screens/content.dart b/lib/view/screens/content.dart
new file mode 100644
index 0000000..4fd9910
--- /dev/null
+++ b/lib/view/screens/content.dart
@@ -0,0 +1,76 @@
+import 'package:easy_learn/view/widgets/list_contents_box.dart';
+import 'package:easy_learn/view/widgets/score_board.dart';
+import 'package:flutter/material.dart';
+
+import 'package:easy_learn/view/widgets/custom_button.dart';
+
+class Content extends StatefulWidget {
+  const Content({Key? key, required this.category}) : super(key: key);
+
+  final String category;
+
+  @override
+  _ContentState createState() => _ContentState();
+}
+
+class _ContentState extends State<Content> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        decoration: const BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage('assets/images/content_bg.png'),
+            fit: BoxFit.cover
+          )
+        ),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Container(
+                  margin: const EdgeInsets.only(left: 10.0, bottom: 60.0),
+                  child: const CustomButton(name: 'close', size: 60.0,)
+                ),
+                const ScoreBoard(),
+                Container(
+                  margin: const EdgeInsets.only(right: 10.0, bottom: 60.0),
+                  child: const CustomButton(name: 'sound', size: 60.0,)
+                ),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                Container(
+                  margin: const EdgeInsets.only(left: 5.0),
+                  child: const CustomButton(name: 'previous', size: 100.0,)
+                ),
+                const SizedBox(
+                  width: 180,
+                  height: 180,
+                  child: ListContentsBox(
+                    imagePath: 'assets/images/list_contents_animals.png',
+                    title: 'Animals'
+                  ),
+                ),
+                Container(
+                  margin: const EdgeInsets.only(right: 5.0),
+                  child: const CustomButton(name: 'next', size: 100.0,)
+                )
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: const [
+                CustomButton(name: 'microphone', size: 190.0)
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/view/widgets/custom_button.dart b/lib/view/widgets/custom_button.dart
new file mode 100644
index 0000000..e08bbe0
--- /dev/null
+++ b/lib/view/widgets/custom_button.dart
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class CustomButton extends StatefulWidget {
+  const CustomButton({Key? key, required this.name, required this.size}) : super(key: key);
+
+  final String name;
+  final double size;
+
+  @override
+  _CustomButtonState createState() => _CustomButtonState();
+}
+
+class _CustomButtonState extends State<CustomButton> {
+  bool isTap = false;
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () {
+        setState(() {
+          isTap = true;
+        });
+      },
+      onTapDown: (x) {
+        setState(() {
+          isTap = false;
+        });
+      },
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 150),
+        width: isTap ? widget.size - 10 : widget.size,
+        height: isTap ? widget.size - 10 : widget.size,
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage('assets/images/buttons/${widget.name}.png'),
+          )
+        ),
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/view/widgets/score_board.dart b/lib/view/widgets/score_board.dart
new file mode 100644
index 0000000..aae6111
--- /dev/null
+++ b/lib/view/widgets/score_board.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class ScoreBoard extends StatelessWidget {
+  const ScoreBoard({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 250,
+      height: 200,
+      decoration: const BoxDecoration(
+        image: DecorationImage(
+          image: AssetImage('assets/images/content_score_board.png'),
+        )
+      ),
+    );
+  }
+}
\ No newline at end of file