diff --git a/components/slack/project.js b/components/slack/project.js
index e3116818..c944decc 100644
--- a/components/slack/project.js
+++ b/components/slack/project.js
@@ -16,7 +16,8 @@ export default function Project({ title, description, color, img, itemId }) {
         transformOrigin: 'center',
         mr: 16,
         // this is v janky please ignore, thank you.
-        ml: ['1rem', '1rem', '1rem', `${itemId === 0 && 'calc(50vw - 36.5rem)'}`]
+        ml: ['1rem', '1rem', '1rem', `${itemId === 0 && 'calc(50vw - 36.5rem)'}`],
+        scrollSnapAlign: 'center'
       }}
       itemId={itemId}
     >
diff --git a/pages/slack.js b/pages/slack.js
index cef0b5d0..bd76d904 100644
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -27,6 +27,7 @@ const SlackPage = () => {
         {` 
         .react-horizontal-scrolling-menu--scroll-container {
           scrollbar-width: none;
+          scroll-snap-type: x mandatory;
         }
 
         .react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
@@ -97,7 +98,7 @@ const SlackPage = () => {
         }}
       >
         <Box onMouseEnter={disableScroll} onMouseLeave={enableScroll}>
-          <ScrollMenu Footer={Arrows} transitionDuration={900}>
+          <ScrollMenu Footer={Arrows} transitionBehavior="smooth" noPolyfill>
             {projects.map((project, i) => (
               <Project
                 title={project.title}