diff --git a/frontend/components/DatasetsPage.tsx b/frontend/components/DatasetsPage.tsx
new file mode 100644
index 0000000..9ed1d82
--- /dev/null
+++ b/frontend/components/DatasetsPage.tsx
@@ -0,0 +1,111 @@
+"use client";
+import { useState, useEffect } from "react";
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Icon,
+  Stack,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { ReactElement } from "react";
+import {
+  FcAbout,
+  FcAssistant,
+  FcCollaboration,
+  FcDonate,
+  FcManager,
+} from "react-icons/fc";
+
+import Link from "next/link";
+
+import { datasets } from "@/app/datasets/config";
+
+import axios from "axios";
+import { useQuery } from "react-query";
+import { API_URL } from "@/app/config";
+
+const fetchDatasets = async () => {
+  try {
+    const response = await axios.get(`${API_URL}/datasets/`, {});
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching datasets:", error);
+    return [];
+  }
+};
+
+interface CardProps {
+  heading: string;
+  href: string;
+}
+
+function capitalizeFirstLetter(word: string) {
+  if (!word) return word;
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}
+
+const Card = ({ heading, href }: CardProps) => {
+  return (
+    <Box
+      maxW={{ base: "full", md: "275px" }}
+      w={"full"}
+      borderWidth="1px"
+      borderRadius="lg"
+      overflow="hidden"
+      borderColor={"a4borange"}
+      p={5}
+    >
+      <Stack align={"start"} spacing={2}>
+        <Box mt={2}>
+          <Heading size="md">{heading}</Heading>
+        </Box>
+        <Link href={href}>
+          <Button variant={"link"} textColor={"a4borange"} size={"sm"}>
+            Learn more
+          </Button>
+        </Link>
+      </Stack>
+    </Box>
+  );
+};
+
+export default function DatasetsList() {
+  const [datasets, setDatasets] = useState([]);
+  const { isLoading, error, data } = useQuery("fetchDatasets", fetchDatasets);
+
+  useEffect(() => {
+    if (error || isLoading) {
+      setDatasets([]);
+    } else {
+      setDatasets(data);
+    }
+  }, [error, data, isLoading]);
+  return (
+    <Box p={4}>
+      <Stack spacing={4} as={Container} maxW={"3xl"} textAlign={"center"}>
+        <Heading fontSize={{ base: "2xl", sm: "4xl" }} fontWeight={"bold"}>
+          Datasets
+        </Heading>
+        <Text color={"gray.600"} fontSize={{ base: "sm", sm: "lg" }}>
+          Browse through the different datasets that we have built at AI4Bharat
+        </Text>
+      </Stack>
+
+      <Container maxW={"5xl"} mt={12}>
+        <Flex flexWrap="wrap" gridGap={6} justify="center">
+          {datasets.map((dataset: any) => (
+            <Card
+              key={dataset.title}
+              heading={capitalizeFirstLetter(dataset.title)}
+              href={dataset.website_link || ""}
+            />
+          ))}
+        </Flex>
+      </Container>
+    </Box>
+  );
+}
diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
index bba7472..aafacbd 100644
--- a/frontend/components/Hero.tsx
+++ b/frontend/components/Hero.tsx
@@ -37,7 +37,11 @@ export default function Hero() {
       >
         <Stack flex={1} spacing={{ base: 5, md: 10 }}>
           <HStack>
-            <Image src={"/assets/logos/ai4baltlogo.webp"} />
+            <Image
+              height={150}
+              width={150}
+              src={"/assets/logos/ai4bclogo.png"}
+            />
             <Heading
               ml={5}
               lineHeight={1.1}
diff --git a/frontend/public/assets/logos/ai4bclogo.png b/frontend/public/assets/logos/ai4bclogo.png
new file mode 100644
index 0000000..ceeec37
Binary files /dev/null and b/frontend/public/assets/logos/ai4bclogo.png differ
diff --git a/frontend/src/app/datasets/[title]/page.tsx b/frontend/src/app/datasets/[title]/page.tsx
index 71d304d..6c43af5 100644
--- a/frontend/src/app/datasets/[title]/page.tsx
+++ b/frontend/src/app/datasets/[title]/page.tsx
@@ -1,16 +1,7 @@
+import { datasets } from "../config";
+
 export async function generateStaticParams() {
-  let params: any[] = [
-    { title: "svarah" },
-    { title: "lahaja" },
-    { title: "shrutilipi" },
-    { title: "sangraha" },
-    { title: "samanantar" },
-    { title: "aksharantar" },
-    { title: "IndicVoices-R" },
-    { title: "IndicOOV" },
-    { title: "FBI" },
-    { title: "Bhasha-Abhijnaanam" },
-  ];
+  let params: any[] = datasets;
 
   return params;
 }
diff --git a/frontend/src/app/datasets/config.tsx b/frontend/src/app/datasets/config.tsx
new file mode 100644
index 0000000..618ba05
--- /dev/null
+++ b/frontend/src/app/datasets/config.tsx
@@ -0,0 +1,12 @@
+export const datasets = [
+  { title: "svarah" },
+  { title: "lahaja" },
+  { title: "shrutilipi" },
+  { title: "sangraha" },
+  { title: "samanantar" },
+  { title: "aksharantar" },
+  { title: "IndicVoices-R" },
+  { title: "IndicOOV" },
+  { title: "FBI" },
+  { title: "Bhasha-Abhijnaanam" },
+];
diff --git a/frontend/src/app/datasets/page.tsx b/frontend/src/app/datasets/page.tsx
new file mode 100644
index 0000000..48e5f14
--- /dev/null
+++ b/frontend/src/app/datasets/page.tsx
@@ -0,0 +1,5 @@
+import DatasetsList from "../../../components/DatasetsPage";
+
+export default function DatasetsPage() {
+  return <DatasetsList />;
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 1e0fdf1..0598fba 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -6,6 +6,9 @@ export const metadata: Metadata = {
   title: "AI4Bharat",
   description:
     "AI4Bharat is a research lab at IIT Madras which works on developing open-source datasets, tools, models and applications for Indian languages.",
+  openGraph: {
+    images: "/assets/logos/ai4bclogo.png",
+  },
 };
 
 export default function RootLayout({