diff --git a/components/Projects/ProjectInfoPanel/SkillList.js b/components/Projects/ProjectInfoPanel/SkillList.js
index bdd6909..2868fb1 100644
--- a/components/Projects/ProjectInfoPanel/SkillList.js
+++ b/components/Projects/ProjectInfoPanel/SkillList.js
@@ -35,7 +35,7 @@ export default function SkillList({ skills, bubbleColor, textColor }) {
           return (
             <SkillBubble
               title={skill.title}
-              key={skill.slug}
+              key={`${skill.slug}_skilllist`}
               custom={index}
               hoverColor={{
                 bg: bubbleColor,
diff --git a/components/Projects/ProjectPost/PostPano.js b/components/Projects/ProjectPost/PostPano.js
index 23d02b3..587973e 100644
--- a/components/Projects/ProjectPost/PostPano.js
+++ b/components/Projects/ProjectPost/PostPano.js
@@ -84,7 +84,7 @@ export default function PostPano({ src, children }) {
       <AnimatePresence>
         {!isReady && (
           <PlaceholderImage
-            key={`${src}_placeholder`}
+            key={`${src}_placeholder_pano`}
             initial="hidden"
             animate="visible"
             exit="exit"
diff --git a/components/Projects/ProjectPost/PostVideo.js b/components/Projects/ProjectPost/PostVideo.js
index 3e00ad2..b46b752 100644
--- a/components/Projects/ProjectPost/PostVideo.js
+++ b/components/Projects/ProjectPost/PostVideo.js
@@ -128,7 +128,7 @@ export default function PostVideo({
         <AnimatePresence>
           {!playing && (
             <PlaceholderImage
-              key={`${src}_placeholder`}
+              key={`${src}_placeholder_video`}
               initial="hidden"
               animate="visible"
               exit="exit"
diff --git a/components/Projects/ProjectsScroller.js b/components/Projects/ProjectsScroller.js
index 8f16a14..c7418ba 100644
--- a/components/Projects/ProjectsScroller.js
+++ b/components/Projects/ProjectsScroller.js
@@ -121,13 +121,26 @@ export default function ProjectScroller({ projects, bgColor, primaryColor }) {
           onPanStart={handlePanStart}
           onPan={handlePan}
           onPanEnd={handlePanEnd}
-          style={{ cursor: panning ? "grabbing" : "grab" }}
+          style={{
+            cursor: panning ? "grabbing" : "grab",
+            gridTemplateColumns: `repeat(${Math.min(
+              3,
+              projects.length
+            )}, 340px)`,
+          }}
         >
           {[
-            ...projects.slice(rollerPos, rollerPos + 3),
+            ...projects.slice(
+              rollerPos,
+              rollerPos + Math.min(3, projects.length)
+            ),
             ...projects.slice(
               0,
-              3 - projects.slice(rollerPos, rollerPos + 3).length
+              Math.min(3, projects.length) -
+                projects.slice(
+                  rollerPos,
+                  rollerPos + Math.min(3, projects.length)
+                ).length
             ),
           ].map((project, index) => {
             return (
diff --git a/components/Skills/SkillScroller.js b/components/Skills/SkillScroller.js
index d4a9d3f..6445e7b 100644
--- a/components/Skills/SkillScroller.js
+++ b/components/Skills/SkillScroller.js
@@ -141,7 +141,7 @@ export default function SkillScroller({ skills }) {
           return (
             <SkillBubble
               title={skill.title}
-              key={skill.slug}
+              key={`${skill.slug}_scroller`}
               variants={bubbleV}
               custom={index}
               bgColor={theme.primary}
diff --git a/components/Skills/SkillsCard/SkillRoller.js b/components/Skills/SkillsCard/SkillRoller.js
index 9f55e76..9ca893d 100644
--- a/components/Skills/SkillsCard/SkillRoller.js
+++ b/components/Skills/SkillsCard/SkillRoller.js
@@ -57,7 +57,7 @@ export default function SkillRoller({
           <SkillBubble
             title={skill.title}
             id={skill.slug}
-            key={skill.slug}
+            key={`${skill.slug}_roller`}
             top={index === 0 ? true : false}
             bottom={index === numSkills - 1 ? true : false}
             hoverColor={{
diff --git a/components/layout.js b/components/layout.js
index cf72325..9fd5012 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -2,7 +2,7 @@ import { ThemeContext } from "styled-components";
 import { motion } from "framer-motion";
 import { useContext } from "react";
 
-function Layout({ children }) {
+function Layout({ children, className }) {
   const theme = useContext(ThemeContext);
 
   return (
@@ -12,6 +12,7 @@ function Layout({ children }) {
         overflow: "scroll",
         width: "100%",
       }}
+      className={className}
     >
       {children}
     </motion.div>
diff --git a/pages/_app.js b/pages/_app.js
index 9fb23ac..16c6927 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -3,6 +3,7 @@ import { createGlobalStyle } from "styled-components";
 import { ThemeControlProvider } from "@/lib/Context/ThemeContext";
 import Layout from "@/components/layout";
 import Head from "next/head";
+import { Raleway } from "next/font/google";
 
 const GlobalStyle = createGlobalStyle`
 html {
@@ -33,7 +34,6 @@ html {
     font-size: 1rem;
     font-weight: 200;
     font-style: normal;
-    font-family: 'Raleway', sans-serif;
     color: hsla(0,0%,28.63%,1);
     min-height: 100vh;
   }
@@ -102,6 +102,8 @@ function handleExitComplete() {
   }
 }
 
+const raleway = Raleway({ subsets: ["latin"] });
+
 function MyApp({ Component, pageProps, router }) {
   return (
     <>
@@ -110,14 +112,13 @@ function MyApp({ Component, pageProps, router }) {
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
         <meta name="msapplication-TileColor" content="#00aba9" />
         <meta name="theme-color" content="#ffffff" />
-
         <meta name="author" content="Rory Bourdon" />
         <meta charSet="utf-8" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
       <ThemeControlProvider>
         <GlobalStyle />
-        <Layout>
+        <Layout className={raleway.className}>
           <AnimatePresence
             mode="wait"
             onExitComplete={() => handleExitComplete()}
diff --git a/pages/_document.js b/pages/_document.js
index 5669654..56465ba 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -26,18 +26,7 @@ export default class MyDocument extends Document {
   render() {
     return (
       <Html>
-        <Head>
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link
-            rel="preconnect"
-            href="https://fonts.gstatic.com"
-            crossOrigin="true"
-          />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,800;1,100;1,200;1,300;1,400;1,800&display=swap"
-            rel="stylesheet"
-          />
-        </Head>
+        <Head />
         <body>
           <Script
             id="theme-script"