diff --git a/lantern-club/src/components/Footer.tsx b/lantern-club/src/components/Footer.tsx
index 0b655e2f..7ac0782a 100644
--- a/lantern-club/src/components/Footer.tsx
+++ b/lantern-club/src/components/Footer.tsx
@@ -55,9 +55,9 @@ export default function Footer({ showAdminLogin }: { showAdminLogin: boolean })
         
         
         {/* Login/Submit column */}
-        <div className="flex flex-col md:flex-row items-center md:items-end justify-end p-4">
+        <div className="flex flex-col md:flex-row items-center md:items-end justify-end">
           {/* Login and Submit buttons here */}
-          <div className="font-nunitosans flex flex-col pb-5 md:pb-0 pr-0 md:pr-10 space-y-4 items-start justify-start">
+          <div className="font-nunitosans flex flex-col pt-5 md:-mt-8 pr-0 md:pr-10 scale-90 space-y-4 items-start justify-start">
             {!session ? (
               showAdminLogin && (
               <Buttonv2 text="Admin Login" action={() => signIn("google")} color="blue" width="w-48" />
@@ -72,9 +72,9 @@ export default function Footer({ showAdminLogin }: { showAdminLogin: boolean })
 
           </div>
 
-          <div className="flex">
+          <div className="flex scale-90 pb-2">
             <a href="https://www.linkedin.com/company/the-lantern-at-tufts-university/about/" target="_blank" rel="noopener noreferrer" className="flex mr-2 hover:#faac4b">
-              <div className="w-11 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
+              <div className="w-8 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
                 {/* <Image src={LinkedIn} alt="linkedin icon"/> */}
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                  <path className="fill-current "
@@ -82,7 +82,7 @@ export default function Footer({ showAdminLogin }: { showAdminLogin: boolean })
               </div>
             </a>
             <a href="https://www.instagram.com/thelanterntufts/" target="_blank" rel="noopener noreferrer">
-              <div className="w-11 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
+              <div className="w-8 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
                 {/* <Image src={Insta} alt="instagram icon" /> */}
                 <svg
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/lantern-club/src/components/Header.tsx b/lantern-club/src/components/Header.tsx
index 77253db3..02d3b36c 100644
--- a/lantern-club/src/components/Header.tsx
+++ b/lantern-club/src/components/Header.tsx
@@ -6,17 +6,15 @@ export default function Header({title}:{title:string}){
         backgroundColor: "#FECB66",
       }; 
     return(
-        <div className="drop-shadow-md">
-                <div className="flex items-start justify-center bg-center pb-20 bg-cover bg-no-repeat bg-[url('/images/header-bg.png')]"  id="header2-pent">
-                        <div className='flex flex-shrink-0'>
-                                <Image src={"/images/short-lantern.png"} height={90} width={90} alt="lantern logo" />
+        <div className="flex items-start justify-center bg-center pb-40 md:pb-24 bg-cover bg-no-repeat bg-[url('/images/header-bg.png')]"  id="header2-pent">
+                        <div className='flex flex-shrink-0 -mt-2 scale-90 md:scale-100'>
+                                <Image src={"/images/short-lantern.png"} height={77} width={77} alt="lantern logo" />
                         </div>
-                        <h1 className="flex text-4xl flex-shrink md:ml-16 md:mr-16 pt-24 md:text-8xl font-kiona text-center">{title}</h1>
-                        <div className='flex flex-shrink-0'>
-                                <Image src={"/images/short-lantern.png"} height={90} width={90}  alt="lantern logo" />
+                        <h1 className="flex text-5xl flex-shrink md:ml-16 md:mr-16 pt-28 md:pt-20 md:text-[5.2rem] font-kiona text-center">{title}</h1>
+                        <div className='flex flex-shrink-0 -mt-2 scale-90 md:scale-100'>
+                                <Image src={"/images/short-lantern.png"} height={77} width={77}  alt="lantern logo" />
                         </div>
-                </div>            
-        </div>
+                </div>     
 
 
 
diff --git a/lantern-club/src/components/Navbar.tsx b/lantern-club/src/components/Navbar.tsx
index 7436105a..75715271 100644
--- a/lantern-club/src/components/Navbar.tsx
+++ b/lantern-club/src/components/Navbar.tsx
@@ -33,17 +33,17 @@ const NavBar = () => {
   ];
 
   return (
-    <div className={nav ? 'fixed flex justify-between bg-white z-50 items-center h-28 w-screen px-4 text-lg font-kiona' : 'flex justify-between z-50 items-center h-28 max-w-screen mx-auto px-4 text-lg font-kiona'}>
+    <div className={nav ? 'fixed flex justify-between bg-white z-50 items-center w-screen h-28 px-4 text-base font-kiona' : 'flex justify-between z-50 items-center h-[6.5rem] max-w-screen mx-auto px-4 text-lg font-kiona'}>
       <div className={nav ? 'fixed z-50 pl-10 md:pl-20 pr-10 md:pr-20 flex-shrink-0 py-0' : 'z-50 pl-10 md:pl-20 pr-10 md:pr-20 flex-shrink-0 py-0'}>
-        <Link href="/" className="p-4 hover:underline">
-          <Image src={"/images/lantern-logo-blue.png"} height={82} width={82} alt="lantern logo" layout="intrinsic" />
+        <Link href="/" className="p-5 hover:underline">
+          <Image src={"/images/lantern-logo-blue.png"} height={75} width={75} alt="lantern logo" layout="intrinsic" />
         </Link>
       </div>
 
-      <ul className="flex flex-row justify-center z-10 space-x-8 hidden md:flex md:space-x-16 md:pr-20 pt-4 overflow-x-auto pb-4">
+      <ul className="flex flex-row justify-center z-10 space-x-2 hidden md:flex md:space-x-16 md:pr-16 py-2">
           {links.map((link, index) => (
             <li key={index}>
-              <Link href={link.url} className="hover:bg-nav-bg rounded-2xl p-3 relative transition-all duration-500">
+              <Link href={link.url} className="hover:bg-nav-bg text-base rounded-2xl px-4 py-3 relative transition-all duration-500">
                 {link.label}
               </Link>
             </li>
diff --git a/lantern-club/src/components/about/AboutUsII.tsx b/lantern-club/src/components/about/AboutUsII.tsx
index e190d49f..3e8833b4 100644
--- a/lantern-club/src/components/about/AboutUsII.tsx
+++ b/lantern-club/src/components/about/AboutUsII.tsx
@@ -22,9 +22,9 @@ export default function AboutUsII() {
   };
 
   return (
-    <div>
-      <div className="-mt-20 yellow-gradient py-40 px-4 md:px-20"> 
-        <p className="mb-10 md:mb-20 md:text-8xl text-6xl" style={header_font}>Who are we?</p>
+//     <div className="">
+      <div className="-mt-52 md:-mt-20 md:-mt-40 yellow-gradient w-full pb-56 pt-48 md:pt-48  md:pt-36 md:pb-60  px-4 md:px-20"  id="pentagon-body"> 
+        <p className="mb-10 md:mb-20 md:text-7xl pt-20 md:pt-1.5 text-6xl" style={header_font}>Who are we?</p>
 
         {/* First section */}
         
@@ -71,8 +71,8 @@ export default function AboutUsII() {
     
         
       </div>
-      <div className="h-10 md:h-20 w-full" style={triangle} id="triangle"></div>
+//       <div className="h-10 md:h-20 w-full" style={triangle} id="triangle"></div>
 
-     </div>
+//      </div>
   );
 }
\ No newline at end of file
diff --git a/lantern-club/src/components/about/AboutUsIII.tsx b/lantern-club/src/components/about/AboutUsIII.tsx
index f66453cc..cbcf24c4 100644
--- a/lantern-club/src/components/about/AboutUsIII.tsx
+++ b/lantern-club/src/components/about/AboutUsIII.tsx
@@ -25,15 +25,15 @@ export default function AboutUsIII() {
   };
 
   return (
-    <div>
-      <div className="md:-mt-20 -mt-10 py-40 px-4 md:px-20 orange-gradient" style={background}> 
-        <p className="md:text-8xl text-6xl" style={header_font}> What is STS?</p>
+      
+      <div className="pb-44 md:-mt-40 -mt-56 pt-40 md:pb-32 px-4 md:px-20 orange-gradient"   id="pentagon-body"> 
+        <p className="md:text-7xl text-6xl" style={header_font}> What is STS?</p>
         <div className="pale-yellow mellow-yellow-border" style={round_box}>
           <div className="flex flex-col md:flex-row items-center">
             <div className="w-full md:w-1/2 py-5 font-nunito text-lg md:text-xl px-4 md:px-0">
               <p>Science, Technology & Society (STS) is an interdisciplinary field of study that seeks to explore and understand the many ways that modern science and technology shape modern culture, values, and institutions, and how modern values shape science and technology. STS examines how science and technology emerge, how they enter society, how they change through social processes, and how society changes in response to science and technology. (<a href="https://majorsandminors.dasa.ncsu.edu/science-technology-society/#:~:text=Science%2C%20Technology%20%26%20Society%20(STS,values%20shape%20science%20and%20technology." target="_blank" rel="noopener noreferrer" className="text-sky-600 underline">NC State University.</a>)</p>
             </div>
-            <div className="w-full md:w-1/2 rounded-3xl relative h-80 md:h-auto ml-0 md:ml-10 mr-0 md:mr-4">
+            <div className="w-full md:w-1/2 rounded-3xl relative md:h-auto ml-0 md:ml-10 mr-0 md:mr-4">
               <Image
                 src={"/images/sts-resources.png"} 
                 alt="Background"
@@ -47,7 +47,5 @@ export default function AboutUsIII() {
         </div>
       </div>
       
-      <div className="h-10 md:h-20 w-full" style={triangle} id="triangle"></div>
-    </div>
   );
 }
\ No newline at end of file
diff --git a/lantern-club/src/components/about/AboutUsIV.tsx b/lantern-club/src/components/about/AboutUsIV.tsx
index 395092c1..44723ace 100644
--- a/lantern-club/src/components/about/AboutUsIV.tsx
+++ b/lantern-club/src/components/about/AboutUsIV.tsx
@@ -23,8 +23,8 @@ export default function AboutUsIV() {
 
   return (
     <div>
-      <div className="-mt-10 md:-mt-20 py-20 md:py-40 px-4 md:px-20 blue2-gradient" style={background}> 
-        <p style={header_font} className="md:text-8xl text-6xl"> Our Mission</p>
+      <div className="-mt-10 -mt-48 md:-mt-32 py-20 pt-56  md:py-40 px-4 md:px-20 blue2-gradient" id="pentagon2"> 
+        <p style={header_font} className="md:text-7xl text-6xl"> Our Mission</p>
 
         {/* Two boxes */}
         <div className="flex flex-col md:flex-row gap-10">
diff --git a/lantern-club/src/components/about/FadeInOutComponent.tsx b/lantern-club/src/components/about/FadeInOutComponent.tsx
new file mode 100644
index 00000000..e4a48577
--- /dev/null
+++ b/lantern-club/src/components/about/FadeInOutComponent.tsx
@@ -0,0 +1,39 @@
+// FadeInOutCompoentn.tsx
+import React, { ReactNode } from 'react';
+import { motion, useAnimation } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+
+const FadeInOutComponent = ({ children }: { children: ReactNode }) => {
+  const controls = useAnimation();
+  const { ref, inView } = useInView({
+    triggerOnce: false, // Set to true if you want the animation to occur only the first time the component comes into view
+    threshold: 0.01, // Adjust based on when you want the animation to trigger
+  });
+
+  React.useEffect(() => {
+    if (inView) {
+      controls.start('visible');
+    } else {
+      controls.start('hidden');
+    }
+  }, [controls, inView]);
+
+  const variants = {
+    visible: { opacity: 1, scale: 1 },
+    hidden: { opacity: 0, scale: 0.75 },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      animate={controls}
+      initial="hidden"
+      variants={variants}
+      transition={{ duration: 0.38 }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default FadeInOutComponent;
diff --git a/lantern-club/src/components/contact/Contact.tsx b/lantern-club/src/components/contact/Contact.tsx
index d04d4ea2..3dfc4291 100644
--- a/lantern-club/src/components/contact/Contact.tsx
+++ b/lantern-club/src/components/contact/Contact.tsx
@@ -67,10 +67,8 @@ export default function Contact() {
 
   return (
     <div>
-      <div className="h-20 w-full flex-1 mellow-yellow" id="triangle"> </div>
-      <div className="flex flex-col md:justify-center bg-gradient-to-b from-blue-g1 to-blue-g2 -mt-20">
-        <div className="h-20 w-full flex-1 mellow-yellow" id="triangle"></div>
-        <h1 className="mt-20 font-coolvetica text-center md:text-8xl text-6xl md:ml-16 pt-20">
+      <div className="flex flex-col md:justify-center bg-gradient-to-b from-blue-g1 to-blue-g2 px-4 -mt-48 md:-mt-28" id="pentagon2">
+        <h1 className="mt-20 font-coolvetica text-left md:text-7xl text-6xl md:ml-16 pt-16 pb-8">
           Get in touch!
         </h1>
         {/* Shows popup when the form is submitted */}
diff --git a/lantern-club/src/components/contact/MeetTheEboard.tsx b/lantern-club/src/components/contact/MeetTheEboard.tsx
index 6d492008..3cce6983 100644
--- a/lantern-club/src/components/contact/MeetTheEboard.tsx
+++ b/lantern-club/src/components/contact/MeetTheEboard.tsx
@@ -53,13 +53,13 @@ const MeetTheEBoard = ({data}: MeetTheEBoardProps): JSX.Element => {
 
     return(
         <div className="z-40">
-            <div className="flex flex-col -mt-20 pt-32 w-full yellow-gradient">
+            <div className="flex flex-col -mt-40 md:-mt-28 pt-32 pb-32 w-full yellow-gradient px-4 md:px-4" id="pentagon-body"> 
                     <div className="flex md:flex-row flex-col justify-center md:justify-start md:ml-16 md:grid md:grid-cols-2">
                         <div className="flex md:flex-row flex-col">
-                            <h1 className="font-coolvetica text-6xl text-center md:text-8xl w-12/12">
+                            <h1 className="font-coolvetica text-6xl text-center pt-6 md:text-7xl w-12/12">
                             Meet the E-Board
                             </h1>
-                            <div className="mt-14">
+                            <div className="md:mt-14">
                             {session?.user.isAdmin && (
                                 <p className="font-nunito underline text-center md:text-2xl text-lg md:mb-2 md:mt-0 -mt-6 md:ml-10 cursor-pointer transition-all duration-300 hover:text-orange-400" onClick={handleToggleEditView}>
                                 Edit
diff --git a/lantern-club/src/components/events/EventsI.tsx b/lantern-club/src/components/events/EventsI.tsx
index a07ee6ac..84493eb9 100644
--- a/lantern-club/src/components/events/EventsI.tsx
+++ b/lantern-club/src/components/events/EventsI.tsx
@@ -71,9 +71,9 @@ export default function EventsI({
           session={session}
           setShowAddModal={setShowAddModal}/>
       ) : (
-        <div className="-mt-20 py-40 px-8 md:px-20 bg-gradient-to-t from-contact-g2 to-g-yellow1">
+        <div className="-mt-32 py-40 px-8 md:px-20 bg-gradient-to-t from-contact-g2 to-g-yellow1" id="pentagon-body">
           <div className="flex flex-col md:flex-row mb-10 md:mb-20">
-             <h1 className={"font-coolvetica md:text-8xl text-6xl flex items-end"}>
+             <h1 className={"font-coolvetica md:text-7xl pt-6 text-6xl flex items-end"}>
                {session?.user.isAdmin && isAdminEdit ? "Edit Upcoming Events" : "Upcoming Events"}
                {session?.user.isAdmin && (
                 <button className="font-nunito underline text-2xl ml-7 mb-2 cursor-pointer relative transition-all duration-300 hover:text-orange-400" onClick={handleEditButtonClick}>Edit</button>
@@ -94,7 +94,7 @@ export default function EventsI({
             ssr={true}
             infinite={true}
             keyBoardControl={true}
-            containerClass="carousel-container pt-12 pb-20 mx-auto md:px-16"
+            containerClass="carousel-container pt-2 pb-6 mx-auto md:px-16"
             itemClass="flex justify-center md:justify-start"
             arrows={true}
           >
diff --git a/lantern-club/src/components/events/EventsII.tsx b/lantern-club/src/components/events/EventsII.tsx
index 550a6d17..9ec6e193 100644
--- a/lantern-club/src/components/events/EventsII.tsx
+++ b/lantern-club/src/components/events/EventsII.tsx
@@ -77,8 +77,8 @@ export default function EventsII({
   // ********* IS ADMIN EDIT BOOLEAN ********
   return (
     <div>
-      <div className=" -mt-20 py-40 px-8 md:px-20 blue2-gradient">
-        <h1 className={"mb-20 font-coolvetica md:text-8xl text-6xl flex"}>
+      <div className=" -mt-36 pt-28 px-8 md:px-20 blue2-gradient" id="pentagon2">
+        <h1 className={"mb-8 mt-12 font-coolvetica md:text-7xl text-6xl flex"}>
         {session?.user.isAdmin ? "Delete Past Events" : "Past Events"}
         </h1>
 
diff --git a/lantern-club/src/components/magazine/MagazineDisplay.tsx b/lantern-club/src/components/magazine/MagazineDisplay.tsx
index 2a39b6f4..70cac7d7 100644
--- a/lantern-club/src/components/magazine/MagazineDisplay.tsx
+++ b/lantern-club/src/components/magazine/MagazineDisplay.tsx
@@ -4,6 +4,8 @@ import Image from "next/image";
 import Link from "next/link"
 import { useSession } from 'next-auth/react';
 import extractFileNameFromURL from '@/utils/extractFileNameFromURL';
+
+import FadeInOutComponent from "@/components/about/FadeInOutComponent";
 // import Lantern from "../../images/bluelatern.png";
 
 
@@ -70,9 +72,9 @@ export default function MagazineDisplay ({ handleToggleAdminView, magazines }: M
       
       return (
         <div>
-            <div className="yellow-gradient -mt-20 py-40  px-2 md:px-20 w-full p-20">
-                <div className="flex gap-10 md:text-8xl text-6xl">
-                    <p style={headerFont}>Magazine Issues</p>
+            <div className="yellow-gradient -mt-36 pt-40 pb-56  px-2 md:px-20 w-full p-20"  id="pentagon-body">
+                <div className="flex gap-10 pt-6 md:text-7xl text-6xl">
+                    <p style={headerFont}>Featured Issue</p>
                     {session?.user.isAdmin && (
                     <button className="font-nunito underline text-2xl mb-2 -ml-2 cursor-pointer relative transition-all duration-300 hover:text-orange-400" onClick={handleToggleAdminView}>
                         Edit
@@ -93,66 +95,6 @@ export default function MagazineDisplay ({ handleToggleAdminView, magazines }: M
                 </div>
 
             </div> 
-            
-            {/* triangle man */}
-            <div className="h-20 w-full" style={triangle} id="triangle"></div>
-
-
-            {/* the blue guy  */}
-            {/* <div className="w-full blue2-gradient flex flex-col md:grid md:grid-cols-2 -mt-20 pb-20 pt-20 md:pt-0"> */}
-            <div className="-mt-20 p-20 pt-40 w-full blue2-gradient flex gap-5 flex-col">
-                <div className="grid grid-flow-col">
-                    {/* left container  */}
-                    <div>
-                        <p className="md:text-8xl text-6xl" style={headerFont}>Read Past Issues</p>
-                        <ul>
-                            {magazines.map((url: string, index) => {
-                                // Extract file name from the URL
-                                // console.log("url: ", url);
-                                let fileName = extractFileNameFromURL(url);
-                                // const keyName = "uploads/" + url.substring(url.lastIndexOf('/') + 1);
-                                // //const key = url.substring(url.lastIndexOf('/') + 1);
-                                // let fileName = keyName.substring(keyName.indexOf('_') + 1);
-                                // fileName = fileName.replace(/\.[^/.]+$/, "");
-
-                                return (
-                                    <li key={index}>
-
-                                        {/* gets rid of the file extension */}
-                                        <div className="flex pt-5 align-bottom">
-                                            <Link className="w-60 md:w-1/2 hover:underline" href={url} target="_blank" rel="noopener noreferrer" style={{fontWeight: 'normal'}}>
-                                                <span style={{transition: 'all 0.3s ease', fontWeight: 'bold', textDecoration: 'none'}}>
-                                                    {fileName}
-                                                </span>
-                                            </Link>
-                                        </div>
-
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    </div>
-                   {/* image side */}
-                   <div className="flex justify-center items-center">
-                        <div>
-                            <Image
-                                src={"/images/bluelatern.png"}
-                                height={280}
-                                width={280}
-                                // style={imageStyle}
-                                alt="submission poster"
-                            />
-                        </div>
-                    </div>
-
-
-                    
-                </div>
-
-                
-                
-          
-            </div>
 
         </div>
 
diff --git a/lantern-club/src/components/magazine/MagazineDisplay2.tsx b/lantern-club/src/components/magazine/MagazineDisplay2.tsx
new file mode 100644
index 00000000..de434475
--- /dev/null
+++ b/lantern-club/src/components/magazine/MagazineDisplay2.tsx
@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import Image from "next/image";
+import Link from "next/link"
+import { useSession } from 'next-auth/react';
+import extractFileNameFromURL from '@/utils/extractFileNameFromURL';
+
+import FadeInOutComponent from "@/components/about/FadeInOutComponent";
+// import Lantern from "../../images/bluelatern.png";
+
+
+
+interface MagazineDisplayProps {
+  handleToggleAdminView: () => void
+  magazines: any[]
+  
+}
+export default function MagazineDisplay ({ handleToggleAdminView, magazines }: MagazineDisplayProps) {
+    const triangle: React.CSSProperties = {
+        backgroundColor: "#FECB66",
+      };
+    const headerFont = {
+        fontFamily: 'coolvetica',
+        marginBottom: "3.5rem",
+        lineHeight: '1',
+      };
+      const subheaderFont = {
+        fontFamily: 'nunito',
+        fontSize: '30px',
+        lineHeight: '1',
+      };
+    
+      const { data: session } = useSession();
+      
+      const [fileList, setFileList] = useState([]);
+      const [currentImage, setCurrentImage] = useState('');
+      
+      const fetchFeatured = async () => {
+        try {
+          const response = await fetch("/api/content/magazine/featured", { method: "GET" });
+          const data = await response.json();
+          
+          if (!response.ok) {
+            throw new Error('Network response was not ok');
+          }
+          // console.log(data);
+          return data[0];
+        } catch (error) {
+          console.log("Error fetching featured mag:", error);
+        }
+      }
+
+      useEffect(() => {
+        const fetchFileList = async () => {
+          try {
+            const response = await axios.get('/api/content/magazine/');
+            setFileList(response.data.urls);
+            const featuredResponse = await fetch("/api/content/magazine/featured", { method: "GET" });
+            const featuredData = await featuredResponse.json();
+            if (featuredData.length > 0) {
+                    const featured = featuredData[0].cloudURL;
+                    setCurrentImage(featured);
+            }
+    
+          } catch (error) {
+            console.error('Error fetching file list:', error);
+          }
+        };
+    
+        fetchFileList();
+      }, []);
+      
+      return (
+            <div className="-mt-36 p-20  w-full blue2-gradient flex gap-5 flex-col"  id="pentagon2">
+                <div className="grid grid-flow-col">
+                    {/* left container  */}
+                    <div>
+                        <p className="md:text-7xl pt-12 text-6xl" style={headerFont}>Read Past Issues</p>
+                        <ul>
+                            {magazines.map((url: string, index) => {
+                                // Extract file name from the URL
+                                // console.log("url: ", url);
+                                let fileName = extractFileNameFromURL(url);
+                                // const keyName = "uploads/" + url.substring(url.lastIndexOf('/') + 1);
+                                // //const key = url.substring(url.lastIndexOf('/') + 1);
+                                // let fileName = keyName.substring(keyName.indexOf('_') + 1);
+                                // fileName = fileName.replace(/\.[^/.]+$/, "");
+
+                                return (
+                                    <li key={index}>
+
+                                        {/* gets rid of the file extension */}
+                                        <div className="flex pt-5 align-bottom">
+                                            <Link className="w-60 md:w-1/2 hover:underline" href={url} target="_blank" rel="noopener noreferrer" style={{fontWeight: 'normal'}}>
+                                                <span style={{transition: 'all 0.3s ease', fontWeight: 'bold', textDecoration: 'none'}}>
+                                                    {fileName}
+                                                </span>
+                                            </Link>
+                                        </div>
+
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </div>
+                   {/* image side */}
+                   <div className="flex justify-center items-center">
+                        <div>
+                            <Image
+                                src={"/images/bluelatern.png"}
+                                height={280}
+                                width={280}
+                                // style={imageStyle}
+                                alt="submission poster"
+                            />
+                        </div>
+                    </div>
+
+
+                    
+                </div>
+
+
+
+        </div>
+
+       
+      );
+     
+}
\ No newline at end of file
diff --git a/lantern-club/src/components/resources/ResourcesII.tsx b/lantern-club/src/components/resources/ResourcesII.tsx
index 11de4f58..8343f230 100644
--- a/lantern-club/src/components/resources/ResourcesII.tsx
+++ b/lantern-club/src/components/resources/ResourcesII.tsx
@@ -26,11 +26,10 @@ export default function ResourcesI() {
   };
 
   return (
-    <div>
-      <div className="-mt-20 overflow-scroll py-30 px-4 md:px-10 yellow-gradient" style={background}> 
+      <div className="-mt-32 md:-mt-24 overflow-scroll w-full pb-32 md:pb-0 px-4 md:px-10 yellow-gradient" id="pentagon-body"> 
         {/* text side */}
         <div className="pt-20 pb-12 px-4 md:px-0 md:ml-10">
-            <p className="py-5 mb-10 mt-10 md:text-8xl text-6xl" style={headerFontStyle}>
+            <p className="py-8 mb-10 mt-10 md:text-7xl text-6xl" style={headerFontStyle}>
                 Our E-List
             </p>
             <div className="flex-col md:flex-row md:grid md:grid-cols-2 orange mellow-yellow-border font-nunito text-xl" style={round_box}>
@@ -45,18 +44,18 @@ export default function ResourcesI() {
             </div>
           
         {/* Arrow */}
-        <div className="flex flex-col justify-around items-center max-w-screen-md mx-auto mt-6">
+        <div className="flex flex-col justify-center align-center text-center items-center max-w-screen-md pb-20 mx-auto mt-6">
           <div className="hidden md:block py-4">
             <div className="m:w-[92px] sm:h-[192px]">
                 <Image src={'/images/arrow_animation.png'} width={175} height={175} alt="arrow animation" />
             </div>
           </div>
           {/* Button */}
+          <div className='-ml-8 pt-36 md:pt-0'>
           <Buttonv2 text="Join our e-list!" action={() => window.open('https://docs.google.com/forms/d/e/1FAIpQLScoIJSqdbxqKcswFmnCiFj65L2_P7dqogSpGLegc0EaORK9MA/viewform')} color="blue" width="w-48" />
+          </div>
         </div>
       </div>
     </div>
-    <div className="h-20 flex w-full" style={triangleStyle} id="triangle"></div>
-  </div>
   );
 }
diff --git a/lantern-club/src/components/resources/ResourcesIII.tsx b/lantern-club/src/components/resources/ResourcesIII.tsx
index cd74167c..aeeca918 100644
--- a/lantern-club/src/components/resources/ResourcesIII.tsx
+++ b/lantern-club/src/components/resources/ResourcesIII.tsx
@@ -13,10 +13,10 @@ export default function HomepageIII() {
 
     return (
         <div>
-            <div className="-mt-20 py-20 px-4 md:px-10 blue2-gradient">
+            <div className="-mt-96 md:-mt-52 w-full py-40 px-4 md:px-10 blue2-gradient" id="pentagon2">
                 {/* text side */}
-                <div className="py-10 px-4 md:px-0 pb-14 md:ml-10">
-                    <p className="py-5 md:text-8xl text-6xl font-coolvetica">
+                <div className="py-8 px-4 md:px-0 pb-14 md:ml-10">
+                    <p className="pt-52 md:pt-20 pb-5 md:text-7xl text-6xl font-coolvetica">
                         What is the STS Department?
                     </p>
                 </div>
@@ -41,7 +41,7 @@ export default function HomepageIII() {
                                 University)
                             </p>
                         </div>
-                        <div className="relative md:w-1/2 h-96 md:h-auto flex justify-center">
+                        <div className="relative md:w-1/2  md:h-auto flex justify-center">
                             <Image
                                 src={"/images/vialPic.png"}
                                 width={450}
@@ -54,7 +54,7 @@ export default function HomepageIII() {
 
                     {/* Row 2 */}
                     <div className="flex flex-col-reverse md:flex-row items-center justify-center">
-                        <div className="relative w-full md:w-1/2 h-96 md:h-auto flex justify-center">
+                        <div className="relative w-full md:w-1/2  md:h-auto flex justify-center">
                             <Image
                                 src={"/images/plants.png"}
                                 width={450}
@@ -80,7 +80,7 @@ export default function HomepageIII() {
                                 Exciting and interdisciplinary courses are offered in the STS department---and cross-listed across multiple disciplines---each semester. Some recently offered examples include STS 32/ANTH 32 Introduction to the Anthropology of Science & Technology; STS 50-01 STS Lunch Seminar Series; STS 148/ANTH 148 Medical Anthropology; STS 12/HIST 12 History of Science, Technology, and Medicine; PHIL 0057/STS 0057/ENP 0028 Philosophy of Technology; CS 0028 Cyber-Security & Cyber-Warfare; ENG 0160 Environmental Justice and World Literature; SOC 0108 Epidemics: Plagues, People, and Politics.
                             </p>
                         </div>
-                        <div className="relative w-full md:w-1/2 h-96 md:h-auto flex justify-center pt-10">
+                        <div className="relative w-full md:w-1/2 md:h-auto flex justify-center pt-10">
                             <Image
                                 src={"/images/brain.png"}
                                 width={450}
diff --git a/lantern-club/src/pages/AboutUs.tsx b/lantern-club/src/pages/AboutUs.tsx
index 360099a8..0e4e236b 100644
--- a/lantern-club/src/pages/AboutUs.tsx
+++ b/lantern-club/src/pages/AboutUs.tsx
@@ -6,6 +6,7 @@ import AboutUsII from "@/components/about/AboutUsII";
 import AboutUsIII from "@/components/about/AboutUsIII";
 import AboutUsIV from "@/components/about/AboutUsIV";
 import Head from 'next/head';
+import FadeInOutComponent from '@/components/about/FadeInOutComponent';
 
 
 export default function AboutUs() {
@@ -15,10 +16,10 @@ export default function AboutUs() {
       <Head>
         <title>About Us | The Lantern</title>
       </Head>
-      <Header title="About Us"/>
-      <AboutUsII />
-      <AboutUsIII />
-      <AboutUsIV />
+      <FadeInOutComponent><Header title="About Us"/></FadeInOutComponent>
+      <FadeInOutComponent><AboutUsII /></FadeInOutComponent>
+      <FadeInOutComponent><AboutUsIII /></FadeInOutComponent>
+      <FadeInOutComponent><AboutUsIV /></FadeInOutComponent>
       <Footer showAdminLogin={false} />
     </div>
   );
diff --git a/lantern-club/src/pages/ContactUs.tsx b/lantern-club/src/pages/ContactUs.tsx
index 15c902e8..f6cd9c98 100644
--- a/lantern-club/src/pages/ContactUs.tsx
+++ b/lantern-club/src/pages/ContactUs.tsx
@@ -6,6 +6,7 @@ import Contact from "@/components/contact/Contact";
 import MeetTheEBoard from "@/components/contact/MeetTheEboard";
 import Head from 'next/head';
 import { ProfileType } from "@/types/profile";
+import FadeInOutComponent from "@/components/about/FadeInOutComponent";
 
 // import sampleData from "@/components/contact/sampleCardData.json";
 
@@ -17,9 +18,9 @@ export default function ContactUs({ profiles }: { profiles: ProfileType[] }) {
       <Head>
         <title>Contact Us | The Lantern</title>
       </Head>
-      <Header title="Contact Us" />
-      <MeetTheEBoard data={profiles} />
-      <Contact />
+      <FadeInOutComponent><Header title="Contact Us" /></FadeInOutComponent>
+      <FadeInOutComponent><MeetTheEBoard data={profiles} /></FadeInOutComponent>
+      <FadeInOutComponent><Contact /></FadeInOutComponent>
       <Footer showAdminLogin={true} />
     </>
   );
diff --git a/lantern-club/src/pages/Events.tsx b/lantern-club/src/pages/Events.tsx
index 1ef51534..604d5f97 100644
--- a/lantern-club/src/pages/Events.tsx
+++ b/lantern-club/src/pages/Events.tsx
@@ -8,6 +8,7 @@ import EventsI from "@/components/events/EventsI";
 import EventsII from "@/components/events/EventsII";
 import Head from 'next/head';
 import { useSession } from "next-auth/react";
+import FadeInOutComponent from "@/components/about/FadeInOutComponent";
 
 
 
@@ -30,21 +31,21 @@ export default function Events({ events } : { events: EventType[]}) {
       <Head>
         <title>Events | The Lantern</title> 
       </Head>
-      <Header title="Events"/>
-      <EventsI 
+      <FadeInOutComponent><Header title="Events"/></FadeInOutComponent>
+      <FadeInOutComponent><EventsI 
         isAdminEdit={isAdminEdit} 
         handleEditButtonClick={handleEditButtonClick} 
         events={events} 
         setShowAddModal={setShowAddModal}
         isLoading={false}
         session={session}
-      />
-      <EventsII 
+      /></FadeInOutComponent>
+      <FadeInOutComponent><EventsII 
         isAdminEdit={isAdminEdit} 
         events={events}
         isLoading={false}
         session={session}
-      />
+      /></FadeInOutComponent>
       <Footer showAdminLogin={true} />
     </div>
   );
diff --git a/lantern-club/src/pages/Magazine.tsx b/lantern-club/src/pages/Magazine.tsx
index 5ea75e04..2661510f 100644
--- a/lantern-club/src/pages/Magazine.tsx
+++ b/lantern-club/src/pages/Magazine.tsx
@@ -4,9 +4,11 @@ import NavBar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import MagazineAdmin from "@/components/magazine/MagazineAdmin";
 import MagazineDisplay from "@/components/magazine/MagazineDisplay";
+import MagazineDisplay2 from "@/components/magazine/MagazineDisplay2";
 import Header from "@/components/Header";
 import axios from 'axios';
 import Head from 'next/head';
+import FadeInOutComponent from "@/components/about/FadeInOutComponent";
 
 // import { useSession } from 'next-auth/react';
 
@@ -43,14 +45,17 @@ export default function Magazine() {
       <Head>
         <title>Magazine | The Lantern</title>
       </Head>
-      <Header title='Magazine'/>
+      <FadeInOutComponent><Header title='Magazine'/></FadeInOutComponent>
         <>
         {magazineList ? (
           // Render MagazineDisplay or MagazineAdmin based on showAdminView
           showAdminView ? (
-            <MagazineAdmin magazines={magazineList}  handleToggleAdminView={handleToggleAdminView}/>
+                <FadeInOutComponent><MagazineAdmin magazines={magazineList}  handleToggleAdminView={handleToggleAdminView}/></FadeInOutComponent>
           ) : (
-            <MagazineDisplay magazines={magazineList} handleToggleAdminView={handleToggleAdminView} />
+            <>
+            <FadeInOutComponent><MagazineDisplay magazines={magazineList} handleToggleAdminView={handleToggleAdminView} /></FadeInOutComponent>
+            <FadeInOutComponent><MagazineDisplay2 magazines={magazineList} handleToggleAdminView={handleToggleAdminView} /></FadeInOutComponent>
+            </>
           )
         ) : (
           // Render a loading state while magazineList is being fetched
diff --git a/lantern-club/src/pages/Resources.tsx b/lantern-club/src/pages/Resources.tsx
index 786b65d1..51647db2 100644
--- a/lantern-club/src/pages/Resources.tsx
+++ b/lantern-club/src/pages/Resources.tsx
@@ -3,6 +3,7 @@ import Footer from "@/components/Footer";
 import ResourcesII from "@/components/resources/ResourcesII";
 import ResourcesIII from "@/components/resources/ResourcesIII";
 import Head from 'next/head';
+import FadeInOutComponent from "@/components/about/FadeInOutComponent";
 
 
 import Header from "@/components/Header";
@@ -14,9 +15,9 @@ export default function Resources() {
       <Head>
         <title>Resources | The Lantern</title>
       </Head>
-      <Header title="Resources"/>
-      <ResourcesII />
-      <ResourcesIII />
+      <FadeInOutComponent><Header title="Resources"/></FadeInOutComponent>
+      <FadeInOutComponent><ResourcesII /></FadeInOutComponent>
+      <FadeInOutComponent><ResourcesIII /></FadeInOutComponent>
       <Footer showAdminLogin={false} />
     </>
   );
diff --git a/lantern-club/src/styles/globals.css b/lantern-club/src/styles/globals.css
index a94afe00..13ffc410 100644
--- a/lantern-club/src/styles/globals.css
+++ b/lantern-club/src/styles/globals.css
@@ -120,7 +120,7 @@ body {
 }
 
 #header2-pent {
-        clip-path: polygon(0 0, 0 75%, 50% 100%, 100% 75%, 100% 0%);
+        clip-path: polygon(0 0, 0 70%, 50% 100%, 100% 70%, 100% 0%);
 }
 
 #pentagon3 {