diff --git a/package-lock.json b/package-lock.json
index 48a0ef92..de56ff35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,8 @@
         "react-datepicker": "^6.1.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.48.2",
+        "react-loading-skeleton": "^3.4.0",
+        "react-multi-carousel": "^2.8.5",
         "uuidv4": "^6.2.13",
         "yarn": "^1.22.19",
         "zod": "^3.22.4"
@@ -44,6 +46,7 @@
         "@types/react": "18.0.14",
         "@types/react-datepicker": "^6.0.1",
         "@types/react-dom": "18.0.5",
+        "@types/react-image-gallery": "^1.2.4",
         "@typescript-eslint/eslint-plugin": "^5.33.0",
         "@typescript-eslint/parser": "^5.33.0",
         "autoprefixer": "^10.4.7",
@@ -1456,6 +1459,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-image-gallery": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-image-gallery/-/react-image-gallery-1.2.4.tgz",
+      "integrity": "sha512-H0xpmT5rlSH0qiTvcUDCPDLRBi3J3Xa4COqaDqGb7ffLFpQoPAxpZdNuKCuThhFI0xJmNnMubZiD6B3kCBHtcw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -6065,6 +6077,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz",
+      "integrity": "sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-multi-carousel": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz",
+      "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/react-onclickoutside": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
diff --git a/package.json b/package.json
index 86bf8a9b..b5649fbe 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
     "react-datepicker": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
+    "react-loading-skeleton": "^3.4.0",
+    "react-multi-carousel": "^2.8.5",
     "uuidv4": "^6.2.13",
     "yarn": "^1.22.19",
     "zod": "^3.22.4"
@@ -46,6 +48,7 @@
     "@types/react": "18.0.14",
     "@types/react-datepicker": "^6.0.1",
     "@types/react-dom": "18.0.5",
+    "@types/react-image-gallery": "^1.2.4",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.4.7",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 12a703d9..6887c826 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/src/app/public/about/page.tsx b/src/app/public/about/page.tsx
index a9fd485c..fded5386 100644
--- a/src/app/public/about/page.tsx
+++ b/src/app/public/about/page.tsx
@@ -23,7 +23,7 @@ const AboutLayout = () => {
     };
   }, []);
   return (
-    <div className="flex-col justify-center gap-y-4 py-6 sm:flex sm:w-full sm:px-0">
+    <div className="flex flex-col justify-center gap-y-4 py-6 sm:w-full sm:px-0">
       <span className="pt-6 text-center text-4xl font-semibold sm:text-left">
         Our Story
       </span>
diff --git a/src/app/public/team/page.tsx b/src/app/public/team/page.tsx
index 7ad1ab25..dab40c7c 100644
--- a/src/app/public/team/page.tsx
+++ b/src/app/public/team/page.tsx
@@ -32,7 +32,7 @@ const PublicLayout = () => {
       <span className="pt-6 text-center text-4xl font-semibold sm:text-left">
         Meet TLP
       </span>
-      <p className="mt-7 leading-7">
+      <p className="mb-4 mt-7 leading-7">
         The Legacy Project, Inc. (TLP) connects college students with local
         elders in their community with the purpose of building strong
         intergenerational relationships and documenting the life histories of
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 5e13cb53..59b6f150 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -48,7 +48,12 @@ const Navbar = () => {
   return (
     <nav className="fixed top-0 z-20 flex h-[60px] w-full flex-row items-center justify-between border border-dark-tan bg-med-tan px-[30px] py-3 shadow-md shadow-gray-400 sm:px-[50px] md:px-[93px]">
       <Link href="/public" onClick={() => setDropdownVisible(false)}>
-        <Image src={logoicon} alt="Legacy Logo" className="w-[200px]" />
+        <Image
+          src={logoicon}
+          alt="Legacy Logo"
+          className="w-[200px]"
+          priority
+        />
       </Link>
 
       <div className="visible z-10">
diff --git a/src/components/PhotoCarousel.tsx b/src/components/PhotoCarousel.tsx
index f25b5289..07d58706 100644
--- a/src/components/PhotoCarousel.tsx
+++ b/src/components/PhotoCarousel.tsx
@@ -1,118 +1,82 @@
-import React, { useState, useEffect, useRef } from "react";
-import Image from "next/legacy/image";
+"use client";
 
-type PhotoProps = {
-  filePath: string;
-};
+import "src/styles/animation.css";
+import React from "react";
+import NextImage from "next/image";
+import "react-loading-skeleton/dist/skeleton.css";
+import Skeleton from "react-loading-skeleton";
+import "react-multi-carousel/lib/styles.css";
+import Carousel from "react-multi-carousel";
 
 interface PhotoCarouselParams {
   imagePaths: string[];
 }
 
-const PhotoCarousel = ({ imagePaths }: PhotoCarouselParams) => {
-  const [photos, setPhotos] = useState<PhotoProps[]>([]);
-  const [activeIndex, setActiveIndex] = useState<number>(0);
-  const [show, setShow] = useState<number>(1);
-  const widthRef = useRef<HTMLHeadingElement>(null);
-
-  const [elemWidth, setElemWidth] = useState<number>(0);
+const Image = ({ path }: { path: string }) => {
+  const [loaded, setLoaded] = React.useState(false);
+  const [preloaded, setPreloaded] = React.useState(false);
 
-  useEffect(() => {
-    function handleResize() {
-      setElemWidth(widthRef.current ? widthRef.current.offsetWidth : 0);
-      const showVal = widthRef.current
-        ? Math.floor(widthRef.current.offsetWidth / 250)
-        : 1;
-      setShow(showVal || 1);
-    }
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
+  React.useEffect(() => {
+    setTimeout(() => {
+      setPreloaded(true);
+    }, 2000);
   }, []);
 
-  const carouselHeight = elemWidth / show;
-  const carouselPad = 20;
+  return (
+    <div className={"aspect-square h-full w-full"}>
+      {(!preloaded || !loaded) && <Skeleton className="h-full w-full" />}
+      <NextImage
+        className={preloaded && loaded ? "object-cover" : "invisible"}
+        src={path}
+        alt="Gallery"
+        layout="fill"
+        data-loaded="false"
+        onLoadingComplete={() => {
+          setLoaded(true);
+        }}
+      />
+    </div>
+  );
+};
 
-  const nextIndex = () => {
-    setActiveIndex((prevIndex) => (prevIndex + 1) % photos.length);
-  };
+const PhotoCarousel = ({ imagePaths }: PhotoCarouselParams) => {
+  const photos = React.useMemo(
+    () => imagePaths.map((path) => <Image key={path} path={path} />),
+    [imagePaths]
+  );
 
-  const prevIndex = () => {
-    setActiveIndex(
-      (prevIndex) => (prevIndex - 1 + photos.length) % photos.length
-    );
+  const responsive = {
+    superLargeDesktop: {
+      // the naming can be any, depends on you.
+      breakpoint: { max: 4000, min: 3000 },
+      items: 5,
+    },
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 4,
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 2,
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1,
+    },
   };
 
-  useEffect(() => {
-    setPhotos(
-      imagePaths.map((path) => ({
-        filePath: path,
-      }))
-    );
-  }, [imagePaths]);
-
   return (
-    <div className="flex w-full flex-col place-content-center gap-y-8 py-6">
-      <div className="relative flex items-center justify-center">
-        <svg
-          width="64"
-          height="64"
-          viewBox="0 0 64 64"
-          fill="none"
-          className="hover:cursor-pointer"
-          onClick={() => prevIndex()}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M41.0933 44.24L28.8799 32L41.0933 19.76L37.3333 16L21.3333 32L37.3333 48L41.0933 44.24Z"
-            fill="#000022"
-          />
-        </svg>
-
-        <div
-          className="relative flex w-full flex-row justify-between overflow-hidden ease-in-out"
-          style={{ height: carouselHeight - carouselPad }}
-          ref={widthRef}
-        >
-          {photos.map((photo, index) => (
-            <div
-              key={photo.filePath}
-              className={
-                "absolute aspect-square h-full select-none object-cover transition-all"
-              }
-              style={{
-                left:
-                  ((index - activeIndex + photos.length) % photos.length) *
-                  (carouselHeight + carouselPad / 2),
-              }}
-            >
-              <Image
-                className="object-cover"
-                layout="fill"
-                src={photo.filePath}
-                alt={"object cover"}
-              />
-            </div>
-          ))}
-        </div>
-        <svg
-          width="64"
-          height="64"
-          viewBox="0 0 64 64"
-          fill="none"
-          onClick={() => nextIndex()}
-          className="hover:cursor-pointer"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M22.9067 19.76L35.1201 32L22.9067 44.24L26.6667 48L42.6667 32L26.6667 16L22.9067 19.76Z"
-            fill="#000022"
-          />
-        </svg>
-      </div>
-    </div>
+    <Carousel
+      responsive={responsive}
+      partialVisbile={false}
+      sliderClass="gap-x-4"
+      swipeable={false}
+      ssr
+    >
+      {photos}
+      {/* @note - We add an empty div because the last image is cut */}
+      <div />
+    </Carousel>
   );
 };
 
diff --git a/src/styles/animation.css b/src/styles/animation.css
new file mode 100644
index 00000000..ca504ab0
--- /dev/null
+++ b/src/styles/animation.css
@@ -0,0 +1,32 @@
+.skeleton {
+  position: relative;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+@keyframes shimmer {
+  from {
+    transform: "translateX(-100%)";
+  }
+  to {
+    transform: "translateX(100%)";
+  }
+}
+
+&.skeleton {
+  background: "var(--gray-4)";
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0.2) 20%,
+      rgba(255, 255, 255, 0.5) 60%,
+      rgba(255, 255, 255, 0)
+    );
+    animation: shimmer 2s infinite;
+  }
+}