diff --git a/src/components/Home/Cards.astro b/src/components/Home/Cards.astro
new file mode 100644
index 0000000..dd16032
--- /dev/null
+++ b/src/components/Home/Cards.astro
@@ -0,0 +1,48 @@
+---
+import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
+import OpenAMPLogo from "../../assets/images/content/openAMP_LOGOMARKX.png";
+import dayjs from "dayjs";
+
+const blogs = await getCollection("news");
+
+const blogLists = blogs
+ .sort((a, b) => dayjs(b.data.date).diff(dayjs(a.data.date)))
+ .slice(0, 3);
+
+const ConvertDate = (input: any) => {
+ const dateObj = dayjs(input);
+ const dateString = dateObj.format("dddd, MMMM D, YYYY");
+ return dateString;
+};
+---
+
+
+ {
+ blogLists.map((blog: any) => (
+
+ ))
+ }
+
diff --git a/src/components/Home/Hero.astro b/src/components/Home/Hero.astro
index 5ef82cc..58e07fa 100644
--- a/src/components/Home/Hero.astro
+++ b/src/components/Home/Hero.astro
@@ -1,16 +1,10 @@
---
-import { getCollection } from "astro:content";
import { Image } from "astro:assets";
import logoImage from "../../assets/openAMP_combox_dark.svg";
-import FirstItem from "../News/FirstItem.astro";
-import dayjs from "dayjs";
+
import heroImage from "../../assets/images/triangle_background.png";
const { data } = Astro.props;
-const blogs = await getCollection("news");
-const blogLists = blogs
- .sort((a, b) => dayjs(b.data.date).diff(dayjs(a.data.date)))
- .slice(0, 2);
---