diff --git a/daily-thought-frontend/src/components/questions/QuestionList.tsx b/daily-thought-frontend/src/components/questions/QuestionList.tsx
index 6c74c962f759c4ae0e9fd0dbf51e8da148e21701..049e02bec1c4796b5cfb9cb96c8c17b219c3f022 100644
--- a/daily-thought-frontend/src/components/questions/QuestionList.tsx
+++ b/daily-thought-frontend/src/components/questions/QuestionList.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { QuestionRecord } from '@/hooks/useQuestions';
 import { TrashIcon } from '@heroicons/react/24/outline';
+import styles from '../../styles/Scrollbox.module.css';
 
 type QuestionListProps = {
   questions: QuestionRecord[];
@@ -9,7 +10,10 @@ type QuestionListProps = {
 const QuestionList: FC<QuestionListProps> = ({ questions }) => (
   <ul
     role="list"
-    className="flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 "
+    className={
+      'flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 mt-4 ' +
+      styles['scrollbox-shadows']
+    }
   >
     {questions.map((question: QuestionRecord) => (
       <li
diff --git a/daily-thought-frontend/src/styles/Scrollbox.module.css b/daily-thought-frontend/src/styles/Scrollbox.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..26c6b89221e7cd5b2d714f602fd19c829f36159b
--- /dev/null
+++ b/daily-thought-frontend/src/styles/Scrollbox.module.css
@@ -0,0 +1,9 @@
+.scrollbox-shadows {
+  background: /* Shadow covers */
+  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
+  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}