diff --git a/src/components/card.tsx b/src/components/card.tsx
index 9f28f2f..6e36850 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -14,12 +14,13 @@ type Props = {
 	description: string;
 	content: ContentType;
 	tags: string[];
+	preview: string;
 	selectedLang: string;
 	isLg: boolean;
 	isTab: boolean;
 };
 
-export default function Card({ name, content, description, tags, selectedLang, isLg, isTab }: Props) {
+export default function Card({ name, content, description, preview, tags, selectedLang, isLg, isTab }: Props) {
 	const toast = useToast();
 
 	const handleCardClick = throttle(async () => {
@@ -87,7 +88,7 @@ export default function Card({ name, content, description, tags, selectedLang, i
 						fontWeight={600}
 						color={lightDarkVal("black", "white")}
 					>
-						{getContent()}
+						{preview}
 					</Text>
 				</Flex>
 
diff --git a/src/graphql/queries.ts b/src/graphql/queries.ts
index 4040245..78e7365 100644
--- a/src/graphql/queries.ts
+++ b/src/graphql/queries.ts
@@ -7,7 +7,7 @@ query {
         description
         tags
         content
-        id
+        preview
     }
 }
 `
@@ -18,7 +18,7 @@ query getPatternsLike($name: String){
       name
       description
       tags
-      id
+      preview
       content
     }
   }
@@ -31,6 +31,7 @@ query getPatterns($where: patterns_bool_exp) {
     description
     tags
     content
+    preview
   }
 }
 `
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index d71dde4..126dbbb 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -2,38 +2,32 @@ import { SearchIcon } from "@chakra-ui/icons";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
 import {
 	Box,
-	Button,
-	Drawer,
+	Button, chakra, Drawer,
 	DrawerBody,
 	DrawerContent,
 	DrawerHeader,
 	DrawerOverlay,
-	Flex,
-	Grid,
+	Flex, FormControl,
+	FormHelperText,
+	FormLabel, Grid,
 	GridItem,
 	IconButton,
 	InputRightElement,
-	Text,
-	useDisclosure,
+	Text, useColorModeValue as lightDarkValue, useDisclosure,
 	useMediaQuery,
-	useToken,
-	useColorModeValue as lightDarkValue,
-	chakra,
-	FormControl,
-	FormHelperText,
-	FormLabel,
+	useToken
 } from "@chakra-ui/react";
 
-import { MultiValue, Select, SingleValue } from "chakra-react-select";
 import { useNhostClient } from "@nhost/react";
+import { MultiValue, Select, SingleValue } from "chakra-react-select";
 import _, { debounce } from "lodash";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import Card from "../components/card";
 import { PATTERNS, PATTERNS_AND_TAGS_Q, PATTERNS_LIKE } from "../graphql/queries";
 import { tagsObject } from "../utils/tags";
 
-import { SiJavascript, SiPython } from "react-icons/si";
 import { IoIosFunnel } from "react-icons/io";
+import { SiJavascript, SiPython } from "react-icons/si";
 
 type Filter = {
 	search: string;
@@ -49,6 +43,7 @@ type Pattern = {
 	description: string;
 	content: ContentType;
 	tags: string[];
+	preview: string;
 };
 
 type OptionType = {