diff --git a/app/page.tsx b/app/page.tsx
index 55484b6..4ffd7bf 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,29 +1,35 @@
+"use client"
+
 import Image from "next/image"
 import Link from "next/link"
 import PSELogo from "@/public/icons/archstar.webp"
 import ArrowRightVector from "@/public/icons/arrow-right.svg"
-import PSEIcon1 from "@/public/icons/pseicon1.svg"
-import PSEIcon2 from "@/public/icons/pseicon2.svg"
-import PSEIcon3 from "@/public/icons/pseicon3.svg"
+import { motion } from "framer-motion"
 
 import { siteConfig } from "@/config/site"
+import News from "@/components/sections/News"
 import WhatWeDo from "@/components/sections/WhatWeDo"
 import { ArrowRightUp } from "@/components/svgs/arrows"
 
 export default function IndexPage() {
   return (
     <section className="flex flex-col bg-main-gradient">
-      <div className="flex w-full flex-col justify-between gap-5 px-[32px] py-5 md:flex-row md:px-20">
+      <div className="flex w-full flex-col justify-between gap-5 p-7 md:flex-row md:px-20">
         <div className="flex w-full flex-col justify-center gap-5 md:w-[660px]">
-          <h6 className="font-sans text-lg uppercase tracking-[0.2625rem] text-orange lg:text-xl">
+          <h6 className="font-sans text-sm uppercase tracking-widest text-orange xl:text-lg">
             Privacy + Scaling Explorations
           </h6>
-          <h1 className="text-4xl font-[700] lg:text-7xl">
+          <motion.h1
+            className="text-4xl font-bold lg:text-5xl xl:text-7xl"
+            initial={{ y: 16, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.8 }}
+          >
             Programmable cryptography for people like you
-          </h1>
+          </motion.h1>
           <Link href={"/projects"} className="flex items-center gap-2">
             <h1 className="border-b-2 border-orange text-base font-medium uppercase">
-              Explore The Project Library
+              Explore Project Library
             </h1>
             <Image
               src={ArrowRightVector}
@@ -38,105 +44,7 @@ export default function IndexPage() {
         </div>
       </div>
 
-      <div className="flex flex-col bg-white">
-        <div className="flex flex-col justify-between gap-5 border-y border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20">
-          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
-            <div className="flex w-[280px] items-center justify-start gap-2">
-              <Image src={PSEIcon1} alt="pseicon1" height={16} width={16} />
-              <p className="text-base font-[700] uppercase tracking-wide text-orange">
-                Learn and Share
-              </p>
-            </div>
-            <p className="text-xl font-[500]">
-              Diving into Plonk accumulation via aPlonk by Ralph Toledo
-            </p>
-          </div>
-          <Link
-            href={"https://www.youtube.com/live/hRXgf6T2yb8?feature=share"}
-            target="_blank"
-            rel="noreferrer"
-            className="flex items-center justify-start gap-5 md:justify-center"
-          >
-            <p className="border-b-2 border-orange text-base font-[500] uppercase">
-              Watch
-            </p>
-            <ArrowRightUp color="black" />
-          </Link>
-        </div>
-        <div className="flex flex-col justify-between gap-5 border-b border-black px-[32px] py-5  md:flex-row md:gap-0 lg:px-20">
-          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
-            <div className="flex w-[280px] items-center justify-start gap-2">
-              <Image src={PSEIcon1} alt="pseicon1" height={16} width={16} />
-              <p className="text-base font-[700] uppercase tracking-wide text-orange">
-                Learn and Share
-              </p>
-            </div>
-            <p className="text-xl font-[500]">
-              Folding Circom Circuit: A ZKML Case Study - Dr. Cathie So
-            </p>
-          </div>
-          <Link
-            href={"https://www.youtube.com/live/jb6HDEtY4CI?feature=share"}
-            target="_blank"
-            rel="noreferrer"
-            className="flex items-center justify-start gap-5 md:justify-center"
-          >
-            <p className="border-b-2 border-orange text-base font-[500] uppercase">
-              Watch
-            </p>
-            <ArrowRightUp color="black" />
-          </Link>
-        </div>
-        <div className="flex flex-col justify-between gap-5 border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20">
-          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
-            <div className="flex w-[280px] items-center justify-start gap-2">
-              <Image src={PSEIcon2} alt="pseicon1" height={16} width={16} />
-              <p className="text-base font-[700] uppercase tracking-wide text-orange">
-                Event
-              </p>
-            </div>
-            <p className="text-xl font-[500]">PSE @ETH Global Paris</p>
-          </div>
-          <Link
-            href={"https://ethglobal.com/events/paris2023"}
-            target="_blank"
-            rel="noreferrer"
-            className="flex items-center justify-start gap-5 md:justify-center"
-          >
-            <p className="border-b-2 border-orange text-base font-[500] uppercase">
-              Attend
-            </p>
-            <ArrowRightUp color="black" />
-          </Link>
-        </div>
-        <div className="flex flex-col justify-between gap-5 border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20">
-          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
-            <div className="flex w-[280px] items-center justify-start gap-2">
-              <Image src={PSEIcon3} alt="pseicon1" height={16} width={16} />
-              <p className="text-base font-[700] uppercase tracking-wide text-orange">
-                Blog Post
-              </p>
-            </div>
-            <p className="text-xl font-[500]">
-              zkEVM Community Edition Part 3: Logic and Structure
-            </p>
-          </div>
-          <Link
-            href={
-              "https://mirror.xyz/privacy-scaling-explorations.eth/shl8eMBiObd6_AUBikXZrjKD4fibI6xUZd7d9Yv5ezE"
-            }
-            target="_blank"
-            passHref
-            rel="noreferrer"
-            className="flex items-center justify-start gap-5 md:justify-center"
-          >
-            <p className="border-b-2 border-orange text-base font-[500] uppercase">
-              read
-            </p>
-            <ArrowRightUp color="black" />
-          </Link>
-        </div>
-      </div>
+      <News />
 
       <div className="bg-radial-gradient flex flex-col gap-32 px-6 py-24 md:px-12">
         <section className="relative grid w-full grid-cols-1 gap-10 overflow-hidden lg:grid-cols-3 lg:gap-0">
diff --git a/components/sections/News.tsx b/components/sections/News.tsx
new file mode 100644
index 0000000..1ec59f3
--- /dev/null
+++ b/components/sections/News.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import Image from "next/image"
+import { newsItems } from "@/data/news"
+import PSELearnIcon from "@/public/icons/pseicon1.svg"
+import PSEEventIcon from "@/public/icons/pseicon2.svg"
+import PSEPostIcon from "@/public/icons/pseicon3.svg"
+import { motion } from "framer-motion"
+import { ArrowUpRight } from "lucide-react"
+
+import { NewsInterface } from "@/lib/types"
+
+const newsTypes = {
+  learn: {
+    type: "Learn & Share",
+    icon: PSELearnIcon,
+    defaultActionLabel: "Watch",
+  },
+  event: {
+    type: "Event",
+    icon: PSEEventIcon,
+    defaultActionLabel: "Attend",
+  },
+  post: {
+    type: "Blog Post",
+    icon: PSEPostIcon,
+    defaultActionLabel: "Read",
+  },
+}
+
+type NewsType = typeof newsTypes
+
+const showMove = {
+  initial: { opacity: 0, y: 10 },
+  hover: { opacity: 1, y: 0, transition: { duration: 0.2 } },
+}
+
+const News = () => {
+  return (
+    <ul className="bg-white">
+      <h4 className="bg-slate-500 px-6 py-2 text-lg font-bold uppercase tracking-wide text-slate-50 backdrop-blur-sm lg:px-20">
+        what&apos;s happening
+      </h4>
+      {newsItems.map((item: NewsInterface, index) => {
+        const newsType = newsTypes[item.type as keyof NewsType]
+        return (
+          <motion.a
+            href={item.action.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            key={index}
+            className="group block h-fit w-full cursor-pointer gap-3 border-b border-t-0 border-slate-950/70 px-6 py-4 transition-all first:border-t xl:px-20"
+            whileHover={"hover"}
+            initial={"initial"}
+            animate={"animate"}
+          >
+            <li className="h-full w-full items-center justify-between lg:flex">
+              <div className="lg:flex lg:gap-12 xl:gap-56">
+                <div className="flex w-48 items-center gap-2">
+                  <Image
+                    src={newsType["icon"]}
+                    alt="pseicon1"
+                    className="h-4 object-fill"
+                  />
+                  <p className="text-sm font-semibold uppercase tracking-widest text-orange">
+                    {newsType["type"]}
+                  </p>
+                </div>
+                <p className="p-1 lg:hidden"></p>
+                <p className="border-b-2 border-b-transparent text-slate-950 group-hover:border-b-orange lg:text-lg">
+                  {item.title}
+                </p>
+              </div>
+              <motion.p variants={showMove} className="hidden gap-1 lg:flex">
+                <span className="text-sm font-semibold uppercase tracking-wide text-orange">
+                  {item.action.label || newsType["defaultActionLabel"]}
+                </span>
+                <ArrowUpRight size={18} className="opacity-50" />
+              </motion.p>
+            </li>
+          </motion.a>
+        )
+      })}
+    </ul>
+  )
+}
+
+export default News
diff --git a/data/news.ts b/data/news.ts
new file mode 100644
index 0000000..3e06f0b
--- /dev/null
+++ b/data/news.ts
@@ -0,0 +1,37 @@
+import { NewsInterface } from "@/lib/types"
+
+export const newsItems: NewsInterface[] = [
+  {
+    type: "learn",
+    title: "Diving into Plonk accumulation via aPlonk by Ralph Toledo",
+    action: {
+      label: "Watch",
+      url: "https://www.youtube.com/live/hRXgf6T2yb8",
+    },
+  },
+  {
+    type: "learn",
+    title: "Folding Circom Circuit: A ZKML Case Study - Dr. Cathie So",
+    action: {
+      label: "Watch",
+      url: "https://www.youtube.com/live/jb6HDEtY4CI",
+    },
+  },
+  {
+    type: "event",
+    title: "PSE @ ETHGlobal Paris",
+    action: {
+      label: "Attend",
+      url: "https://ethglobal.com/events/paris2023",
+    },
+  },
+  {
+    type: "post",
+    title:
+      " zkEVM Community Edition Part 3: Logic and StructureZKProof Community Event",
+    action: {
+      label: "Read",
+      url: "https://mirror.xyz/privacy-scaling-explorations.eth/shl8eMBiObd6_AUBikXZrjKD4fibI6xUZd7d9Yv5ezE",
+    },
+  },
+]
diff --git a/lib/types.ts b/lib/types.ts
new file mode 100644
index 0000000..2782f4f
--- /dev/null
+++ b/lib/types.ts
@@ -0,0 +1,9 @@
+export interface NewsInterface {
+  type: string
+  title: string
+  expires?: string
+  action: {
+    label: string
+    url: string
+  }
+}