diff --git a/.gitattributes b/.gitattributes
index 2125666142e..3eeae47c1a6 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1 +1,14 @@
-* text=auto
\ No newline at end of file
+scroll-bar
+* text=auto
+
+
+*.c text
+*.h text
+
+*.sln text eol=crlf
+
+*.png binary
+*.jpg binary
+
+* text=auto
+develop
diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100755
new mode 100644
diff --git a/package-lock.json b/package-lock.json
index 08ceb2deb4f..5ddabbbbc83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,10 @@
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.2",
         "@radix-ui/react-scroll-area": "^1.2.0",
+
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-scroll-area": "^1.2.1",
+
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.2",
         "@radix-ui/react-tooltip": "^1.1.4",
@@ -4151,9 +4155,15 @@
       }
     },
     "node_modules/@radix-ui/react-scroll-area": {
+ scroll-bar
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.1.tgz",
+      "integrity": "sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==",
+
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.0.tgz",
       "integrity": "sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==",
+ develop
       "dependencies": {
         "@radix-ui/number": "1.1.0",
         "@radix-ui/primitive": "1.1.0",
@@ -7756,7 +7766,6 @@
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.16.1.tgz",
       "integrity": "sha512-17FtCaz0cx7ssWYKXzGB0Vub8xHwpVPr+iPt2fHhLMDhVAPVrplD+rTQsZUsfb19LVBn5iwkEUFjQ1yVVJXsLA==",
       "hasInstallScript": true,
-      "license": "MIT",
       "dependencies": {
         "@cypress/request": "^3.0.6",
         "@cypress/xvfb": "^1.2.4",
diff --git a/package.json b/package.json
index 8fd129463e4..04989ea9b6d 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",
diff --git a/src/CAREUI/display/ScrollableColumn.tsx b/src/CAREUI/display/ScrollableColumn.tsx
new file mode 100644
index 00000000000..8a455b29d71
--- /dev/null
+++ b/src/CAREUI/display/ScrollableColumn.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface ScrollableColumnProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const ScrollableColumn: React.FC<ScrollableColumnProps> = ({
+  title,
+  children,
+}) => {
+  return (
+    <div className="border border-gray-300 m-2">
+      <h3 className="text-lg font-semibold">{title}</h3>
+      <ScrollArea className="h-[400px] overflow-hidden">
+        <div className="flex flex-col">{children}</div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default ScrollableColumn;
diff --git a/src/components/Kanban/Board.tsx b/src/components/Kanban/Board.tsx
index 337f98f1caf..470ea19b2c5 100644
--- a/src/components/Kanban/Board.tsx
+++ b/src/components/Kanban/Board.tsx
@@ -29,7 +29,6 @@ interface KanbanBoardProps<T extends { id: string }> {
   }[];
   itemRender: (item: T) => ReactNode;
 }
-
 export default function KanbanBoard<T extends { id: string }>(
   props: KanbanBoardProps<T>,
 ) {
@@ -37,7 +36,7 @@ export default function KanbanBoard<T extends { id: string }>(
 
   return (
     <div className="h-[calc(100vh-114px)] md:h-[calc(100vh-50px)]">
-      <div className="flex flex-col items-end justify-between md:flex-row">
+      <div className="flex flex-col items-center justify-between md:flex-row">
         <div>{props.title}</div>
         <div className="flex items-center gap-2 py-2">
           {[0, 1].map((button, i) => (
@@ -56,8 +55,9 @@ export default function KanbanBoard<T extends { id: string }>(
           ))}
         </div>
       </div>
+
       <DragDropContext onDragEnd={props.onDragEnd}>
-        <div className="h-full overflow-scroll" ref={board}>
+        <div className="h-full overflow-x-auto overflow-y-hidden" ref={board}>
           <div className="flex items-stretch px-0 pb-2">
             {props.sections.map((section, i) => (
               <KanbanSection<T>
@@ -73,7 +73,6 @@ export default function KanbanBoard<T extends { id: string }>(
     </div>
   );
 }
-
 export function KanbanSection<T extends { id: string }>(
   props: Omit<KanbanBoardProps<T>, "sections" | "onDragEnd"> & {
     section: KanbanBoardProps<T>["sections"][number];
@@ -92,8 +91,6 @@ export function KanbanSection<T extends { id: string }>(
   const defaultLimit = 14;
   const { t } = useTranslation();
 
-  // should be replaced with useInfiniteQuery when we move over to react query
-
   const fetchNextPage = async (refresh: boolean = false) => {
     if (!refresh && (fetchingNextPage || !hasMore)) return;
     if (refresh) setPages([]);
@@ -121,7 +118,6 @@ export function KanbanSection<T extends { id: string }>(
       const sectionElementHeight =
         sectionRef.current?.getBoundingClientRect().height;
       const scrolled = props.boardRef.current?.scrollTop;
-      // if user has scrolled 3/4th of the current items
       if (
         scrolled &&
         sectionElementHeight &&
@@ -130,7 +126,6 @@ export function KanbanSection<T extends { id: string }>(
         fetchNextPage();
       }
     };
-
     props.boardRef.current?.addEventListener("scroll", onBoardReachEnd);
     return () =>
       props.boardRef.current?.removeEventListener("scroll", onBoardReachEnd);
@@ -139,15 +134,12 @@ export function KanbanSection<T extends { id: string }>(
   useEffect(() => {
     fetchNextPage(true);
   }, [props.section]);
-
   return (
     <Droppable droppableId={section.id}>
       {(provided) => (
         <div
           ref={provided.innerRef}
-          className={
-            "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
-          }
+          className="relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
         >
           <div className="sticky top-0 rounded-xl bg-secondary-200 pt-2">
             <div className="mx-2 flex items-center justify-between rounded-lg border border-secondary-300 bg-white p-4">
@@ -159,7 +151,10 @@ export function KanbanSection<T extends { id: string }>(
               </div>
             </div>
           </div>
-          <div ref={sectionRef}>
+          <div
+            ref={sectionRef}
+            className="h-[calc(100vh-180px)] overflow-y-auto"
+          >
             {!fetchingNextPage && totalCount === 0 && (
               <div className="flex items-center justify-center py-10 text-secondary-500">
                 {t("no_results_found")}
@@ -190,5 +185,4 @@ export function KanbanSection<T extends { id: string }>(
     </Droppable>
   );
 }
-
 export type KanbanBoardType = typeof KanbanBoard;