diff --git a/src/app/(pages)/projects/_components/PastProjectCard.tsx b/src/app/(pages)/projects/_components/PastProjectCard.tsx
index b97f3c7..dd04307 100644
--- a/src/app/(pages)/projects/_components/PastProjectCard.tsx
+++ b/src/app/(pages)/projects/_components/PastProjectCard.tsx
@@ -3,33 +3,42 @@ import React from 'react';
 import { ProjectDataType } from '@/lib/notion/projects';
 import { CldImage } from 'next-cloudinary';
 import { CardContent, CardTitle } from '@/components/ui/card';
+import LinkButton from '@/components/LinkButton';
+import { FaGithub } from 'react-icons/fa';
 
 export default function PastProjectCard({ data }: { data: ProjectDataType }) {
   return (
-    <a href={'/projects/' + data.pageId}>
-      <div className="bg-gradient-to-t from-[#0170DC] to-[#6191BC] rounded-[40px] flex flex-col max-h-[500px] p-4 outline hover:outline-white hover:outline-4 transition-all ease-in-out duration-150">
-        {data.logoUrl && (
-          <div className="flex justify-center items-center mb-4">
-            <CldImage
-              src={data.logoUrl}
-              alt={data.companyName}
-              width={250}
-              height={250}
-              className="w-48 h-48 object-fill"
-            />
+    <div className="relative">
+      <a href={'/projects/' + data.pageId}>
+        <div className="flex flex-col justify-end items-center min-h-[400px] max-h-[500px] p-4 rounded-[40px] hover:outline hover:outline-4 hover:outline-white transition-all ease-in-out duration-150 bg-gradient-to-t from-[#0170DC] to-[#6191BC]">
+          {data.logoUrl && (
+            <div className="mb-4">
+              <CldImage
+                src={data.logoUrl}
+                alt={data.companyName}
+                width={250}
+                height={250}
+                className="w-48 h-48 object-fill"
+              />
+            </div>
+          )}
+          <div className="flex flex-col items-center text-center gap-4">
+            <CardTitle className="flex md:items-center text-4xl text-white md:h-[80px]">{data.companyName}</CardTitle>
+            <CardContent className="text-2xl md:text-base text-white">
+              <p className="hidden md:line-clamp-4 h-[100px]">{data.description}</p>
+              <p className="block md:hidden">{data.productName}</p>
+            </CardContent>
           </div>
-        )}
-        <div className="flex flex-col gap-4">
-          <div>
-            <CardTitle className="text-4xl text-center text-white h-[80px] flex items-center justify-center">
-              {data.companyName}
-            </CardTitle>
-          </div>
-          <CardContent className="text-md text-center text-white">
-            <p className="h-[100px] line-clamp-4">{data.description}</p>
-          </CardContent>
         </div>
-      </div>
-    </a>
+      </a>
+      <LinkButton
+        href={data.gitHubUrl ?? '/projects'}
+        newTab={true}
+        variant="icon"
+        className="md:hidden absolute top-0 right-0"
+      >
+        <FaGithub className="h-[80px] w-[80px] md:h-12 md:w-12 text-white" />{' '}
+      </LinkButton>
+    </div>
   );
 }
diff --git a/src/app/(pages)/projects/_components/ProjectCard.tsx b/src/app/(pages)/projects/_components/ProjectCard.tsx
index b848791..b25cbf9 100644
--- a/src/app/(pages)/projects/_components/ProjectCard.tsx
+++ b/src/app/(pages)/projects/_components/ProjectCard.tsx
@@ -8,7 +8,9 @@ import { FaArrowCircleRight } from 'react-icons/fa';
 
 export default function ProjectCard({ data }: { data: ProjectDataType }) {
   return (
-    <Card className={`flex justify-center items-center w-[300px] rounded-[30px] md:w-full `}>
+    <Card
+      className={`flex justify-center items-center w-full rounded-[40px] md:h-auto shadow-[2px_6px_4px_0px_rgba(0,0,0,0.25)]`}
+    >
       {data.logoUrl && (
         <CldImage
           src={data.logoUrl}
@@ -19,24 +21,31 @@ export default function ProjectCard({ data }: { data: ProjectDataType }) {
         />
       )}
 
-      <div>
-        <CardHeader>
-          <CardTitle className="text-4xl">{data.companyName}</CardTitle>
-          <CardDescription className="text-xl">{data.productName}</CardDescription>
+      <div className="flex flex-col justify-end md:justify-between min-h-[320px] md:min-h-full">
+        <CardHeader className="flex flex-col justify-between items-start pr-2 md:items-center md:block">
+          <CardTitle className="text-4xl font-bold">{data.companyName}</CardTitle>
+          <div className="flex flex-row md:pt-0 md:items-center">
+            <CardDescription className="text-2xl md:text-xl font-medium pt-2 md:pt-0">
+              {data.productName}
+            </CardDescription>
+            {data.logoUrl && (
+              <CldImage src={data.logoUrl} alt={data.companyName} width={120} height={120} className="md:hidden" />
+            )}
+          </div>
         </CardHeader>
-        <CardContent className={'md:h-24 overflow-hidden text-md mb-5'}>
+        <CardContent className={'hidden md:block md:h-24 overflow-hidden text-md mb-5'}>
           <p>{data.description}</p>
         </CardContent>
-        <CardFooter className={'space-x-4 text-xs md:text-lg'}>
+        <CardFooter className={'space-x-4 text-xs md:text-lg justify-end md:justify-start pb-4 md:pb-6'}>
           {data.gitHubUrl && (
             <LinkButton href={data.gitHubUrl} newTab={true} variant="icon">
               {' '}
-              <FaGithub className="text-5xl text-black hover:text-blueprint transition-colors ease-in-out duration-300" />{' '}
+              <FaGithub className="text-6xl md:text-5xl text-black hover:text-blueprint transition-colors ease-in-out duration-300" />{' '}
             </LinkButton>
           )}
           {data.pageId && (
             <LinkButton href={'/projects/' + data.pageId} newTab={true} variant="icon">
-              <FaArrowCircleRight className="text-5xl" />
+              <FaArrowCircleRight className="text-6xl md:text-5xl" />
             </LinkButton>
           )}
         </CardFooter>
diff --git a/src/app/(pages)/projects/page.tsx b/src/app/(pages)/projects/page.tsx
index 006c65b..f92386b 100644
--- a/src/app/(pages)/projects/page.tsx
+++ b/src/app/(pages)/projects/page.tsx
@@ -9,7 +9,7 @@ export default async function Projects() {
   const pastProjects = res.filter(project => !isCurrentProject(project));
 
   return (
-    <div className="space-y-6">
+    <div className="md:space-y-6">
       <CurrentProjects projects={currentProjects} />
       <PastProjects projects={pastProjects} />
     </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ee5d4cb..1069db7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,7 +9,7 @@ import { Toaster } from '@/components/ui/toaster';
 import './globals.css';
 import 'react-notion-x/src/styles.css';
 
-const poppins = Poppins({ subsets: ['latin'], weight: ['400', '500', '600'] });
+const poppins = Poppins({ subsets: ['latin'], weight: ['400', '500', '600', '700'] });
 
 export const metadata: Metadata = {
   title: 'Carleton Blueprint',