diff --git a/components/header.tsx b/components/header.tsx
index 8e6ceeff6..515ddafce 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -16,7 +16,7 @@ export function Header() {
href='/guides'>Guides
Videos
+ href='/watch'>Videos
Get Updates
diff --git a/pages/guides/index.tsx b/pages/guides/index.tsx
index f8263a38e..6f9b7ce21 100644
--- a/pages/guides/index.tsx
+++ b/pages/guides/index.tsx
@@ -1,4 +1,4 @@
-import { Badge, Box, Button, Container, Heading, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Container, Stack } from '@chakra-ui/react';
import { Header } from '../../components/header';
import { LinksList } from '../../components/links-list';
import { LinksListItem } from '../../components/links-list-item';
diff --git a/pages/watch/components/video-grid-item.tsx b/pages/watch/components/video-grid-item.tsx
new file mode 100644
index 000000000..fbebaee26
--- /dev/null
+++ b/pages/watch/components/video-grid-item.tsx
@@ -0,0 +1,69 @@
+import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+
+type VideoGridItemProps = {
+ title: string;
+ subtitle: string;
+ date: string;
+ isNew?: boolean;
+ isPro?: boolean;
+ colorIndex?: number;
+};
+
+const bgColorList = [
+ 'gray.900',
+ 'purple.900',
+ 'blue.900',
+ 'red.900',
+ 'green.900',
+ 'teal.900',
+ 'yellow.900',
+ 'cyan.900',
+ 'pink.900',
+
+ 'gray.800',
+ 'purple.800',
+ 'blue.800',
+ 'red.800',
+ 'green.800',
+ 'teal.800',
+ 'yellow.800',
+ 'cyan.800',
+ 'pink.800',
+
+ 'gray.700',
+ 'purple.700',
+ 'blue.700',
+ 'red.700',
+ 'green.700',
+ 'teal.700',
+ 'yellow.700',
+ 'cyan.700',
+ 'pink.700',
+
+ 'gray.600',
+ 'purple.600',
+ 'blue.600',
+ 'red.600',
+ 'green.600',
+ 'teal.600',
+ 'yellow.600',
+ 'cyan.600',
+ 'pink.600'
+];
+
+export function VideoGridItem(props: VideoGridItemProps) {
+ const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0 } = props;
+
+ return (
+
+