diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 7df4c0f..81525d0 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -82,7 +82,7 @@ const FooterLabeledSection = ({title, children}: {
 
 const Footer: NextPage = () => {
     return (
-        <div className="w-full mt-12 bg-neutral-800">
+        <div className="w-full bg-neutral-800">
             {/** yellow stripe */}
             <div className="bg-yellow-400 border-t-[1px] border-neutral-400 p-[4px]"></div>
 
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 4bdfd81..cfdae3d 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -16,9 +16,13 @@ interface Biography {
 
 const Biopgraphy = ({bodyName, name, title, body, img, position}: Biography) => {    
     return (
-        <section className={"sm:space-y-2 p-2 shadow-xl bg-yellow-100 flex flex-col border-y-2 sm:border-2 sm:rounded-2xl border-neutral-900 col-span-2 overflow-hidden" + (position === 'right' ? " lg:col-start-2 lg:rotate-3" : " lg:-rotate-3")}>
-            <div className="p-2">
-                <Image src={img} alt={`${name} profile`} width={128} height={128} className="shadow-lg shadow-neutral-600/50 rounded-full border border-neutral-900" />
+        <section className={"sm:space-y-2 p-2 sm:p-4 shadow-xl bg-yellow-100 flex flex-col border-y-2 sm:border-2 sm:rounded-2xl border-neutral-900 col-span-2 overflow-hidden" + (position === 'right' ? " lg:col-start-2 lg:rotate-3" : " lg:-rotate-3")}>
+            <div className="space-x-8 flex flex-row mb-2 items-center">
+                <Image src={img} alt={`${name} profile`} width={128} height={128} className="shadow-md shadow-neutral-600/50 rounded-lg border border-neutral-900" />
+                <div className="">
+                    <h1 className="text-2xl font-bold">{name}</h1>
+                    <h2 className="text-neutral-600 italic">{title}</h2>
+                </div>
             </div>
             <div className="col-span-2 p-2 bg-white rounded-lg border border-neutral-900">
                 {bodyName} {body}
@@ -67,20 +71,20 @@ const About: NextPage = () => {
             <div className="w-full">
                 <div className="mx-auto max-w-7xl sm:p-8">
                     {/** Small screens */}
-                    <div className="block sm:hidden w-full bg-neutral-900 p-4">
+                    <div className="sm:hidden w-full bg-neutral-900 p-4 border-b-2 border-yellow-400">
                         <h1 className="text-white text-4xl font-bold text-center">
                             Meet the Team
                             <HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave animate-hand_pop"/>
                         </h1>
                     </div>
                     {/** Large screens */}
-                    <div className="hidden sm:block mx-auto bg-neutral-900 p-4 mx-auto w-max rounded-xl mt-8 mb-20 border-2 border-neutral-300">
+                    <div className="hidden sm:block mx-auto bg-neutral-900 p-4 mx-auto w-max rounded-xl mt-8 mb-20 border-2 border-neutral-300 shadow-xl">
                         <h1 className="text-white text-4xl font-bold text-center">
                             Meet the Team
                             <HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave"/>
                         </h1>
                     </div>
-                    <div className="md:mt-16 mb-32 grid grid-cols-2 lg:grid-cols-3 sm:mt-4 md:space-y-24 sm:space-y-12 space-y-4">
+                    <div className="sm:my-16 grid grid-cols-2 lg:grid-cols-3 sm:mt-4 lg:space-y-24 sm:space-y-12">
                         {biographies.map((biography, index) => {
                             return (
                                 <Biopgraphy key={index} {...biography} />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f0f8bd0..747751a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -29,8 +29,8 @@ const Home: NextPage = () => {
               <div style={{
                 WebkitBackdropFilter: `blur(15px) contrast(50%)`,
                 backdropFilter: `blur(15px) contrast(50%)`,
-              }} className="grow min-h-[350px] w-full grid place-items-center">
-                <div className="space-y-8">
+              }} className="grow min-h-[350px] w-full flex flex-col">
+                <div className="space-y-8 my-auto h-min">
                   <h1 className="mx-auto text-center font-extrabold text-4xl max-w-lg text-yellow-200">Welcome to the Resource Center for Auditory Training!</h1>
                   <div className="flex flex-col w-[350px] sm:w-[400px] mx-auto p-4 bg-neutral-900 border space-y-4 border-neutral-500 rounded-md shadow-lg shadow-neutral-800/50">
                     <p className="text-2xl text-center text-neutral-100">Looking for resource recommendations?</p>
@@ -62,7 +62,7 @@ const Home: NextPage = () => {
           </div>
         </div>
         
-        <div className="max-w-5xl mx-auto p-12">
+        <div className="max-w-5xl mx-auto p-12 mb-12">
           <h1 className="font-extrabold text-4xl text-center">Want to learn more?</h1>
           <div className="flex flex-col pt-8 space-y-6">
             <section className="text-center mx-auto space-x-4">
diff --git a/src/pages/resources/[id].tsx b/src/pages/resources/[id].tsx
index c0ebb00..76d7773 100644
--- a/src/pages/resources/[id].tsx
+++ b/src/pages/resources/[id].tsx
@@ -120,7 +120,7 @@ const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>)
   return <>
     <div className="min-h-screen">
       <Header />
-      <main>
+      <main className="mb-12">
         <div className="flex py-4 flex-col flex-col-reverse sm:flex-row divide-x max-w-2xl mx-auto">
           <div className="text-lg flex flex-col justify-end font-bold my-5 mr-4">
             <div className="mx-4">