diff --git a/.github/workflows/dev-build.yaml b/.github/workflows/dev-build.yaml
index 6b53ebf3..3610d638 100644
--- a/.github/workflows/dev-build.yaml
+++ b/.github/workflows/dev-build.yaml
@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ["web-push-notifications-bootstrap"] # put your current branch to create a build. Core team only.
+    branches: ["4963-sidebar-selection-srcoll-into-view"] # put your current branch to create a build. Core team only.
     paths-ignore:
       - "**.md"
       - "cloud-deployments/*"
diff --git a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
index 9b189ff9..ac7955da 100644
--- a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
+++ b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { CaretRight } from "@phosphor-icons/react";
 import { Link, useLocation } from "react-router-dom";
 import { safeJsonParse } from "@/utils/request";
+import useScrollActiveItemIntoView from "@/hooks/useScrollActiveItemIntoView";
 
 export default function MenuOption({
   btnText,
@@ -25,6 +26,18 @@ export default function MenuOption({
     location: location.pathname,
   });
 
+  const isActive = hasChildren
+    ? (!isExpanded &&
+        childOptions.some((child) => child.href === location.pathname)) ||
+      location.pathname === href
+    : location.pathname === href;
+
+  const { ref } = useScrollActiveItemIntoView({
+    isActive,
+    behavior: "instant",
+    block: "center",
+  });
+
   if (hidden) return null;
 
   // If this option is a parent level option
@@ -43,12 +56,6 @@ export default function MenuOption({
     if (flex && !!user && !roles.includes(user?.role)) return null;
   }
 
-  const isActive = hasChildren
-    ? (!isExpanded &&
-        childOptions.some((child) => child.href === location.pathname)) ||
-      location.pathname === href
-    : location.pathname === href;
-
   const handleClick = (e) => {
     if (hasChildren) {
       e.preventDefault();
@@ -73,6 +80,7 @@ export default function MenuOption({
         `}
       >
         <Link
+          ref={ref}
           to={href}
           className={`flex flex-grow items-center px-[12px] h-[32px] font-medium ${
             isChild ? "hover:text-white" : "text-white light:text-black"
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
index be9b6762..d30e218c 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
@@ -1,3 +1,4 @@
+import useScrollActiveItemIntoView from "@/hooks/useScrollActiveItemIntoView";
 import Workspace from "@/models/workspace";
 import paths from "@/utils/paths";
 import showToast from "@/utils/toast";
@@ -30,6 +31,11 @@ export default function ThreadItem({
     ? paths.workspace.chat(slug)
     : paths.workspace.thread(slug, thread.slug);
 
+  const { ref } = useScrollActiveItemIntoView({
+    isActive,
+    behavior: "instant",
+    block: "center",
+  });
   return (
     <div
       className="w-full relative flex h-[38px] items-center border-none rounded-lg"
@@ -88,6 +94,7 @@ export default function ThreadItem({
           </div>
         ) : (
           <a
+            ref={ref}
             href={
               window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo
             }
diff --git a/frontend/src/hooks/useScrollActiveItemIntoView.js b/frontend/src/hooks/useScrollActiveItemIntoView.js
new file mode 100644
index 00000000..8bc4bd93
--- /dev/null
+++ b/frontend/src/hooks/useScrollActiveItemIntoView.js
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Hook that scrolls an element into view when it becomes active.
+ * @param {Object} options - The options for the hook.
+ * @param {boolean} options.isActive - Whether the element is currently active.
+ * @param {"smooth" | "instant" | "auto"} options.behavior - The scroll behavior.
+ * @param {"start" | "center" | "end" | "nearest"} options.block - The vertical alignment of the element within the scrollable container.
+ * @returns {{ ref: React.RefObject<HTMLElement> }} An object containing the ref to attach to the target element.
+ */
+export default function useScrollActiveItemIntoView({
+  isActive,
+  behavior,
+  block,
+}) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (isActive) {
+      ref.current.scrollIntoView({
+        behavior,
+        block,
+      });
+    }
+  }, [isActive]);
+
+  return {
+    ref,
+  };
+}