+ {isDark ? : }
+ {isDark ? 'Light Mode' : 'Dark Mode'}
+
+ );
+}
+
+export default Theme;
diff --git a/src/components/Theme/Theme.styles.js b/src/components/Theme/Theme.styles.js
new file mode 100644
index 000000000..b184f971c
--- /dev/null
+++ b/src/components/Theme/Theme.styles.js
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { DarkMode } from '@styled-icons/material-outlined/DarkMode';
+import { DarkMode as DarkModeFilled } from '@styled-icons/material/DarkMode';
+
+export const IconContainer = styled.div`
+ color: #fff;
+ flex-direction: row;
+ align-items: center;
+ display: flex;
+ float: right;
+ margin-right: 16px;
+`;
+
+export const IconLight = styled(DarkMode)`
+ color: #fff;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+`;
+
+export const IconDark = styled(DarkModeFilled)`
+ color: #fff;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+`;
diff --git a/src/components/Theme/index.js b/src/components/Theme/index.js
new file mode 100644
index 000000000..3a1173d5d
--- /dev/null
+++ b/src/components/Theme/index.js
@@ -0,0 +1 @@
+export { default } from './Theme.component';
diff --git a/src/components/VideoCard/VideoCard.component.jsx b/src/components/VideoCard/VideoCard.component.jsx
new file mode 100644
index 000000000..585c6d8f4
--- /dev/null
+++ b/src/components/VideoCard/VideoCard.component.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Image, Title, Container, Description } from './VideoCard.styles';
+
+const VideoCard = ({ title, description, image, width, height }) => {
+ return (
+