diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index adebdcd0..6edbf379 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -15,7 +15,8 @@
         "react-chrome-extension-router": "^1.4.0",
         "react-dom": "^18.0.0",
         "react-hot-toast": "^2.4.1",
-        "react-icons": "^4.8.0"
+        "react-icons": "^4.8.0",
+        "swiper": "^9.4.0"
       },
       "devDependencies": {
         "@crxjs/vite-plugin": "^1.0.14",
@@ -5995,6 +5996,11 @@
       "deprecated": "Please use @jridgewell/sourcemap-codec instead",
       "dev": true
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -6205,6 +6211,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.0.tgz",
+      "integrity": "sha512-AKame5qkFnNKCJ8Bfn3YuOi/LoUuAESVdCv/BJH5fKgdAUFRtImZXV3gdYlYovXbasJDV6hHNWdQvdzPB6aebw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "dependencies": {
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz",
diff --git a/package.json b/package.json
index 70484b27..35ee42b6 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "react-chrome-extension-router": "^1.4.0",
     "react-dom": "^18.0.0",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^4.8.0"
+    "react-icons": "^4.8.0",
+    "swiper": "^9.4.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.14",
diff --git a/src/popup.css b/src/popup.css
index f51b059f..5cc2cc66 100644
--- a/src/popup.css
+++ b/src/popup.css
@@ -21,3 +21,16 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+:root {
+  --swiper-theme-color: hsla(19, 100%, 50%, 1);
+  --swiper-pagination-top: 5px;
+  --swiper-pagination-bullet-inactive-color: rgb(255, 159, 115);
+  --swiper-pagination-bullet-size: 6px;
+  --swiper-navigation-size: 18px;
+  --swiper-navigation-sides-offset:5px;
+}
+
+.swiper-pagination{
+  position: relative;
+}
\ No newline at end of file
diff --git a/src/popup/components/HighlightSlide.tsx b/src/popup/components/HighlightSlide.tsx
new file mode 100644
index 00000000..31e371ca
--- /dev/null
+++ b/src/popup/components/HighlightSlide.tsx
@@ -0,0 +1,69 @@
+
+interface HighlightSlideProps {
+    highlight: {
+        url: string;
+        title: string;
+        login: string;
+        highlight: string;
+    };
+}
+
+export const HighlightSlide = ({ highlight }: HighlightSlideProps) => {
+    const { url, title, login, highlight: highlightText } = highlight;
+
+    const openGraphSearchParameter = url.split("/").slice(3)
+        .join("/");
+    const openGraphUrl = `https://opengraph.githubassets.com/1/${openGraphSearchParameter}`;
+
+    return (
+        <div className="border border-white/40 rounded-md p-3 mt-2 bg-white">
+            {/* fixed height, content ellipsis */}
+            <h3 className="
+                text-base font-medium
+                overflow-hidden
+                line-clamp-2
+                h-6
+                leading-5
+            "
+            >
+                <a
+                    className="text-slate-800 cursor-pointer"
+                    href={url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    {title}
+                </a>
+            </h3>
+
+            <div className="flex items-center">
+                <span className="mr-2 text-slate-500">Author:</span>
+
+                <a
+                    className="text-orange cursor-pointer"
+                    href={`https://insights.opensauced.pizza/user/${login}`}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    {login}
+                </a>
+            </div>
+
+            <p className="
+                py-2 text-sm text-slate-500
+                overflow-hidden
+                line-clamp-3
+                h-16
+                leading-5
+            "
+            >
+                {highlightText}
+            </p>
+
+            <img
+                alt="OpenGraph"
+                src={openGraphUrl}
+            />
+
+        </div>);
+};
diff --git a/src/popup/pages/aiprdescription.tsx b/src/popup/pages/aiprdescription.tsx
index 1ebedba4..cf2e0dbc 100644
--- a/src/popup/pages/aiprdescription.tsx
+++ b/src/popup/pages/aiprdescription.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useReducer, useState } from "react";
+import React, { useEffect, useReducer } from "react";
 import { FaChevronLeft } from "react-icons/fa";
 import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
-import { ImSwitch } from "react-icons/im";
 import toast, { Toaster } from "react-hot-toast";
 
 import {
diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
index f9ac0b60..f0a3cb15 100644
--- a/src/popup/pages/home.tsx
+++ b/src/popup/pages/home.tsx
@@ -1,12 +1,13 @@
 import {
-    HiArrowLeft,
-    HiArrowRight,
     HiArrowTopRightOnSquare,
     HiOutlineQuestionMarkCircle,
     HiPencil,
     HiUserCircle,
 } from "react-icons/hi2";
 import { FiSettings } from "react-icons/fi";
+import { Navigation, Pagination, A11y } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/swiper-bundle.min.css";
 import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
 import { useAuth } from "../../hooks/useAuth";
 import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";
@@ -22,13 +23,13 @@ import Settings from "./settings";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
 import type { Highlight } from "../../ts/types";
 import { useIsGithubPRPageCheck } from "../../hooks/useGithubPRPageCheck";
+import { HighlightSlide } from "../components/HighlightSlide";
 
 const Home = () => {
     const { user } = useAuth();
     const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
     const { isGithubPRPage, prUrl, prTitle } = useIsGithubPRPageCheck();
     const [highlights, setHighlights] = useState<Highlight[]>([]);
-    const [currentPage, setCurrentPage] = useState(0);
 
     useEffect(() => {
         const fetchHighlights = async () => {
@@ -49,14 +50,6 @@ const Home = () => {
         void fetchHighlights();
     }, []);
 
-    const handlePrevious = () => {
-        setCurrentPage(prevPage => prevPage - 1);
-    };
-
-    const handleNext = () => {
-        setCurrentPage(prevPage => prevPage + 1);
-    };
-
     return (
         <div className="p-4 bg-slate-800">
             <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
@@ -87,76 +80,40 @@ const Home = () => {
                 </header>
 
                 <main className="main-content">
-                    <h3 className="text font-medium text-base leading-10">Latest Highlight:</h3>
+                    <a
+                        className="flex items-center text-white hover:text-orange no-underline gap-2 w-full font-medium text-lg leading-10"
+                        href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                            Highlights feed
+                        <HiArrowTopRightOnSquare />
+                    </a>
 
                     {highlights.length > 0 && (
+                        <Swiper
+                            navigation
+                            modules={[Navigation, Pagination, A11y]}
+                            pagination={{ clickable: true }}
+                            slidesPerView={1}
+                            spaceBetween={50}
+                        >
+                            {
+                                highlights.map((highlight, index) => (
+                                    <SwiperSlide key={index}>
+                                        <HighlightSlide
+                                            highlight={highlight}
+                                        />
+                                    </SwiperSlide>
+                                ))
+                            }
+                        </Swiper>
+                    )}
 
-                        <div className="border border-white/40 rounded-sm p-3 mt-2">
-                            <h3 className="text-base font-medium">
-                                <a
-                                    className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
-                                    href={highlights[currentPage]?.url}
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-                                >
-                                    {highlights[currentPage]?.title}
-                                </a>
-                            </h3>
-
-
-                            <div className="flex items-center">
-                                <div className="mr-2">Author:</div>
-
-                                <a
-                                    className="text-blue-500 hover:text-blue-700 underline cursor-pointer"
-                                    href={`https://insights.opensauced.pizza/user/${highlights[currentPage]?.login}`}
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-
-
-                                >
-                                    {highlights[currentPage]?.login}
-                                </a>
-                            </div>
-
-                            <p className="py-2">
-                                {highlights[currentPage]?.highlight}
-                            </p>
-
-                            <div className="flex justify-center">
-                                <div className="flex justify-center mt-4">
-                                    <button
-                                        className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50"
-                                        disabled={currentPage === 0}
-                                        onClick={handlePrevious}
-                                    >
-                                        <HiArrowLeft />
-                                    </button>
-
-                                    <button
-                                        className="px-4 py-2 rounded-md bg-blue-500 text-white disabled:opacity-50 ml-4"
-                                        disabled={currentPage === highlights.length - 1}
-                                        onClick={handleNext}
-                                    >
-                                        <HiArrowRight />
-                                    </button>
-                                </div>
-                            </div>
-                        </div>)}
 
                     <h3 className="text font-medium text-base leading-10">Tools:</h3>
 
                     <div className="tools flex flex-col gap-2">
-                        <a
-                            className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-                            href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
-                            rel="noreferrer"
-                            target="_blank"
-                        >
-                            <HiArrowTopRightOnSquare />
-                            Highlights feed
-                        </a>
-
                         <a
                             className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
                             href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`}
diff --git a/src/utils/fetchOpenSaucedApiData.ts b/src/utils/fetchOpenSaucedApiData.ts
index 5a657a7b..b04690bf 100644
--- a/src/utils/fetchOpenSaucedApiData.ts
+++ b/src/utils/fetchOpenSaucedApiData.ts
@@ -181,7 +181,7 @@ export const updateInsight = async (userToken: string, repoId: string, checked:
 };
 export const getHighlights = async (): Promise<Highlights | undefined> => {
     const response = await cachedFetch(
-        `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}`,
+        `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}?limit=10`,
         {
             method: "GET",
             expireInSeconds: 300,