diff --git a/packages/web/src/components/molecules/ChatInput.tsx b/packages/web/src/components/molecules/ChatInput.tsx
index 1ef141cf..2512c299 100644
--- a/packages/web/src/components/molecules/ChatInput.tsx
+++ b/packages/web/src/components/molecules/ChatInput.tsx
@@ -9,7 +9,7 @@ import {
   h,
   padding,
   scroll,
-  scrollBar,
+  hideScrollBar,
   bg,
   justify,
   align,
@@ -42,7 +42,7 @@ const formStyle = css`
 
 const textAreaScrollStyle = css`
   ${scroll.y}
-  ${scrollBar}
+  ${hideScrollBar}
   overflow-y: scroll;
 `;
 
diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index ea4e2b41..eb4cef8c 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -14,7 +14,7 @@ import {
 import "@biseo/web/components/atoms/placeholder.css";
 import { TrashIcon } from "@biseo/web/assets";
 import { css } from "@emotion/react";
-import { scroll, scrollBar } from "@biseo/web/styles";
+import { scroll, hideScrollBar } from "@biseo/web/styles";
 
 interface ModalInnerProps extends PropsWithChildren {
   title: string;
@@ -219,7 +219,7 @@ ModalInner.TextButton = TextButton;
 const VoteOptions: React.FC<PropsWithChildren> = ({ children = null }) => {
   const scrollTyle = css`
     ${scroll.y}
-    ${scrollBar}
+    ${hideScrollBar}
   overflow-y: scroll;
   `;
   return (
diff --git a/packages/web/src/components/organisms/AgendaSection.tsx b/packages/web/src/components/organisms/AgendaSection.tsx
index f3c2f4e5..686772ac 100644
--- a/packages/web/src/components/organisms/AgendaSection.tsx
+++ b/packages/web/src/components/organisms/AgendaSection.tsx
@@ -8,7 +8,7 @@ import {
   isPreparingAgenda,
 } from "@biseo/web/utils/agenda";
 
-import { scroll } from "@biseo/web/styles";
+import { hideScrollBar, scroll } from "@biseo/web/styles";
 import { css } from "@emotion/react";
 
 const gridLayout = css`
@@ -73,7 +73,7 @@ export const AgendaSection: React.FC = () => {
   );
 
   return (
-    <section css={scroll.y}>
+    <section css={[scroll.y, hideScrollBar]}>
       <div css={gridLayout}>
         <AgendaCard.Group agendaStatus="ongoing">
           {getAgendaCards("ongoing")}
diff --git a/packages/web/src/styles/scroll.ts b/packages/web/src/styles/scroll.ts
index 0ad44386..fa6cdd6c 100644
--- a/packages/web/src/styles/scroll.ts
+++ b/packages/web/src/styles/scroll.ts
@@ -1,9 +1,9 @@
 import { css } from "@emotion/react";
 import { colors } from "@biseo/web/styles/color";
 
-export const scrollBar = css`
-  ::-webkit-scrollbar-thumb {
-    background-color: ${colors.gray400};
+export const hideScrollBar = css`
+  ::-webkit-scrollbar {
+    display: none;
   }
 `;
 
@@ -17,7 +17,7 @@ const applyDirection = (direction: "x" | "y") => css`
   ::-webkit-scrollbar-thumb {
     border: 4px solid transparent;
     background-clip: padding-box;
-
+    background-color: ${colors.gray400};
     border-radius: 100px;
   }