diff --git a/apps/web/src/views/board/components/List.tsx b/apps/web/src/views/board/components/List.tsx
index 258436b9..fd07d3a0 100644
--- a/apps/web/src/views/board/components/List.tsx
+++ b/apps/web/src/views/board/components/List.tsx
@@ -95,7 +95,7 @@ export default function List({
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100"
+          className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 md:snap-none dark:border-dark-300 dark:bg-dark-100"
         >
           <div className="mb-2 flex justify-between">
             <form
diff --git a/apps/web/src/views/board/index.tsx b/apps/web/src/views/board/index.tsx
index a24523fd..11a76bbf 100644
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -634,7 +634,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
         <div
           ref={scrollRef}
           onMouseDown={onMouseDown}
-          className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300`}
+          className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 snap-x snap-mandatory overflow-y-hidden overflow-x-scroll overscroll-contain scroll-pl-[10px] scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 md:snap-none dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300`}
         >
           {isLoading ? (
             <div className="ml-[2rem] flex">
@@ -685,7 +685,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
                         ref={provided.innerRef}
                         {...provided.droppableProps}
                       >
-                        <div className="min-w-[2rem]" />
+                        <div className="min-w-[10px]" />
                         {boardData.lists.map((list, index) => (
                           <List
                             index={index}
diff --git a/apps/web/src/views/public/board/index.tsx b/apps/web/src/views/public/board/index.tsx
index 06c6c95f..bd325922 100644
--- a/apps/web/src/views/public/board/index.tsx
+++ b/apps/web/src/views/public/board/index.tsx
@@ -165,7 +165,7 @@ export default function PublicBoardView() {
           <div
             ref={scrollRef}
             onMouseDown={onMouseDown}
-            className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative h-full flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300"
+            className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative h-full flex-1 snap-x snap-mandatory overflow-y-hidden overflow-x-scroll overscroll-contain scroll-pl-[10px] scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 md:snap-none dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300"
           >
             {isLoading || !router.isReady ? (
               <div className="ml-[2rem] flex">
@@ -188,11 +188,11 @@ export default function PublicBoardView() {
               </div>
             ) : (
               <div className="flex">
-                <div className="min-w-[2rem]" />
+                <div className="min-w-[10px]" />
                 {data?.lists.map((list) => (
                   <div
                     key={list.publicId}
-                    className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100"
+                    className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 md:snap-none dark:border-dark-300 dark:bg-dark-100"
                   >
                     <div className="flex justify-between">
                       <span className="mb-4 block px-4 pt-1 text-sm font-medium text-neutral-900 dark:text-dark-1000">