diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index 5b817ee..8350afa 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -10,7 +10,7 @@ import { ThemeProvider } from '../../context/ThemeContext';
  */
 const Layout = ({ stars, children }) => {
     return (
-        <div className='flex flex-col justify-between min-h-screen'>
+        <div className='flex flex-col justify-between min-h-screen font-[poppins]'>
             <ThemeProvider>
                 <Header
                     notice={"Under Construction"}
diff --git a/src/components/Resources/ResourceCard.jsx b/src/components/Resources/ResourceCard.jsx
new file mode 100644
index 0000000..fdd93fd
--- /dev/null
+++ b/src/components/Resources/ResourceCard.jsx
@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom";
+
+const ResourceCard = ({idx, resource}) => {
+  return   <div key={idx} className="dark:bg-black rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
+  {resource.image && (
+      <img
+          src={resource.image}
+          alt={resource.title}
+          className="w-full h-40 object-cover object-center"
+      />
+  )}
+  <div className="p-6">
+      <h3 className="text-lg font-semibold mb-2">{resource.title}</h3>
+      <p className="text-gray-700 mb-4">{resource.description}</p>
+      <Link
+          to={resource.link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-600 hover:underline"
+      >
+          Learn More
+      </Link>
+  </div>
+</div>;
+};
+
+export default ResourceCard;
diff --git a/src/components/Resources/ResourceSection.jsx b/src/components/Resources/ResourceSection.jsx
index 11df0e6..6d18c56 100644
--- a/src/components/Resources/ResourceSection.jsx
+++ b/src/components/Resources/ResourceSection.jsx
@@ -1,18 +1,11 @@
-import { Link } from "react-router-dom";
+import ResourceCard from "./ResourceCard";
 
 const ResourceSection = ({ title, resources }) => (
-    <section className="my-10">
-        <h2 className="text-2xl font-bold mb-4">{title}</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <section className="my-12">
+        <h2 className="text-3xl font-bold mb-10 text-center">{title}</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
             {resources.map((resource, index) => (
-                <div key={index} className="p-4 bg-black rounded-lg shadow-md flex flex-col items-center overflow-hidden">
-                    {resource.image && <img src={resource.image} alt={resource.title} className="mb-4 object-cover object-center w-full h-36 rounded-t-lg" />}
-                    <h3 className="text-xl font-semibold mb-2">{resource.title}</h3>
-                    <p className="mb-4">{resource.description}</p>
-                    <Link to={resource.link} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
-                        Learn More
-                    </Link>
-                </div>
+              <ResourceCard idx={index} resource={resource} />
             ))}
         </div>
     </section>