diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
index 4e478724..7b728591 100644
--- a/frontend/src/components/nav/Navbar.tsx
+++ b/frontend/src/components/nav/Navbar.tsx
@@ -58,6 +58,7 @@ const Navbar = () => {
       path: "/research",
       icon: <FaWpexplorer className="h-5 w-5" />,
       description: "",
+      isExternal: false,
     },
   ];
 
@@ -67,28 +68,43 @@ const Navbar = () => {
     title,
     children,
     icon,
+    isExternal,
   }: {
     className?: string;
     href: string;
     title: string;
     children: string;
     icon: React.ReactNode;
+    isExternal: boolean;
   }) => {
     return (
       <li>
         <NavigationMenuLink asChild>
-          <a
-            href={href}
-            className={`block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-gray-1 hover:text-primary-9 focus:bg-gray-1 focus:text-primary-9 ${className}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <div className="flex items-center text-sm font-semibold leading-none">
-              <span className="mr-2">{icon}</span>
-              <span>{title}</span>
-            </div>
-            <p className="line-clamp-2 text-sm leading-snug">{children}</p>
-          </a>
+          {isExternal ? (
+            <a
+              href={href}
+              className={`block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-gray-1 hover:text-primary-9 focus:bg-gray-1 focus:text-primary-9 ${className}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="flex items-center text-sm font-semibold leading-none">
+                <span className="mr-2">{icon}</span>
+                <span>{title}</span>
+              </div>
+              <p className="line-clamp-2 text-sm leading-snug">{children}</p>
+            </a>
+          ) : (
+            <Link
+              to={href}
+              className={`block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-gray-1 hover:text-primary-9 focus:bg-gray-1 focus:text-primary-9 ${className}`}
+            >
+              <div className="flex items-center text-sm font-semibold leading-none">
+                <span className="mr-2">{icon}</span>
+                <span>{title}</span>
+              </div>
+              <p className="line-clamp-2 text-sm leading-snug">{children}</p>
+            </Link>
+          )}
         </NavigationMenuLink>
       </li>
     );
@@ -156,6 +172,7 @@ const Navbar = () => {
                             href={item.path}
                             icon={item.icon}
                             className="group"
+                            isExternal={item.isExternal !== false}
                           >
                             {item.description}
                           </ListItem>
diff --git a/frontend/src/components/pages/ResearchPage.tsx b/frontend/src/components/pages/ResearchPage.tsx
index 03613297..018494c2 100644
--- a/frontend/src/components/pages/ResearchPage.tsx
+++ b/frontend/src/components/pages/ResearchPage.tsx
@@ -55,7 +55,7 @@ const MediumArticles: React.FC = () => {
   }
 
   return (
-    <div className="container mx-auto mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-6">
+    <div className="container mx-auto mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 p-6">
       {articles.map((article, index) => (
         <MediumCard key={index} article={article} />
       ))}
@@ -91,54 +91,54 @@ const MediumCard: React.FC<{ article: ResearchPost }> = ({ article }) => {
         : "https://miro.medium.com/v2/resize:fill:40:40/1*REeM2VDUPg7VWMU1UwnsBw.png";
 
   return (
-    <div className="max-w-md mx-auto p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
-      <div className="eu m ev ew ex ey">
-        <a
-          href={article.link}
-          className="flex mb-4"
-          style={{ position: "relative" }}
-        >
+    <div className="max-w-full p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-transform duration-300 ease-in-out hover:-translate-y-1 flex flex-col h-full">
+      <a
+        href={article.link}
+        className="flex mb-4"
+        style={{ position: "relative" }}
+      >
+        <img
+          src={randomImage}
+          alt={article.title}
+          className="w-full h-56 object-cover rounded-t-lg"
+          onError={(e) => {
+            (e.target as HTMLImageElement).src = fallbackImage;
+          }}
+        />
+      </a>
+
+      <div className="flex-grow p-4 flex flex-col">
+        <div className="flex items-center mb-4">
           <img
-            src={randomImage}
-            alt={article.title}
-            className="m ke kf kg kh w-full object-cover rounded-t-lg h-56"
-            onError={(e) => {
-              (e.target as HTMLImageElement).src = fallbackImage;
-            }}
+            src={authorImage}
+            alt={article.author}
+            className="rounded-full h-10 w-10"
           />
-        </a>
-
-        <div className="p-4">
-          <div className="flex items-center mb-4">
-            <img
-              src={authorImage}
-              alt={article.author}
-              className="rounded-full h-10 w-10"
-            />
-            <div className="ml-3">
-              <p className="text-gray-700 font-bold">{article.author}</p>
-              <p className="text-sm text-gray-500">
-                {new Date(article.pubDate).toLocaleDateString()}
-              </p>
-            </div>
-          </div>
-
-          <a href={article.link} className="block">
-            <h2 className="text-xl font-semibold text-gray-900 mb-2 hover:underline">
-              {article.title}
-            </h2>
-            <p className="text-sm text-gray-600 line-clamp-3 mb-4">
-              {article.description.replace(/<\/?[^>]+(>|$)/g, "")}
+          <div className="ml-3">
+            <p className="text-gray-700 font-bold text-base">
+              {article.author}
             </p>
-          </a>
+            <p className="text-sm text-gray-500">
+              {new Date(article.pubDate).toLocaleDateString()}
+            </p>
+          </div>
         </div>
 
-        <div className="flex justify-between items-center">
+        <a href={article.link} className="block flex-grow">
+          <h2 className="text-xl font-semibold text-gray-900 mb-2 hover:underline">
+            {article.title}
+          </h2>
+          <p className="text-base text-gray-600 line-clamp-3 mb-4">
+            {article.description.replace(/<\/?[^>]+(>|$)/g, "")}
+          </p>
+        </a>
+
+        <div className="flex justify-between items-center mt-auto">
           <a
             href={article.link}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-indigo-600 hover:text-indigo-800 text-sm font-medium"
+            className="text-indigo-600 hover:text-indigo-800 text-sm font-medium whitespace-nowrap"
           >
             Read More
           </a>