diff --git a/src/components/sections/dictionary/courselist/CourseListTabs.jsx b/src/components/sections/dictionary/courselist/CourseListTabs.jsx
index 9d03173..3f15d10 100644
--- a/src/components/sections/dictionary/courselist/CourseListTabs.jsx
+++ b/src/components/sections/dictionary/courselist/CourseListTabs.jsx
@@ -17,6 +17,8 @@ import courseListsShape from '../../../../shapes/state/dictionary/CourseListsSha
 
 import Scroller from '../../../Scroller';
 
+import styles from './CourseListTabs.module.scss';
+
 class CourseListTabs extends Component {
   componentDidUpdate(prevProps, prevState, snapshot) {
     const { user, selectedListCode } = this.props;
@@ -176,58 +178,48 @@ class CourseListTabs extends Component {
     const { user, selectedListCode } = this.props;
 
     return (
-      <div className={classNames('tabs', 'tabs--course-list')}>
+      <div className={classNames('tabs', styles.wrapper)}>
         <Scroller noScrollX={false} noScrollY={true} expandBottom={2}>
-          <div className={classNames('tabs__flexbox')}>
+          <div className={styles.list}>
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.SEARCH ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.SEARCH}
               onClick={() => this.changeTab(CourseListCode.SEARCH)}>
               <i className={classNames('icon', 'icon--tab-search')} />
-              <span>{t('ui.tab.searchShort')}</span>
+              <span className={styles.title}>{t('ui.tab.searchShort')}</span>
             </div>
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.BASIC ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.BASIC}
               onClick={() => this.changeTab(CourseListCode.BASIC)}>
               <i className={classNames('icon', 'icon--tab-basic')} />
-              <span>{t('ui.tab.basicShort')}</span>
+              <span className={styles.title}>{t('ui.tab.basicShort')}</span>
             </div>
             {!user
               ? null
               : user.departments.map((d) => (
                   <div
-                    className={classNames(
-                      'tabs__elem',
-                      selectedListCode === d.code ? 'tabs__elem--selected' : null,
-                    )}
                     key={d.code}
+                    className={styles.tab}
+                    aria-selected={selectedListCode === d.code}
                     onClick={() => this.changeTab(d.code)}>
                     <i className={classNames('icon', 'icon--tab-major')} />
-                    <span>{t('ui.tab.majorShort')}</span>
+                    <span className={styles.title}>{t('ui.tab.majorShort')}</span>
                   </div>
                 ))}
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.HUMANITY ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.HUMANITY}
               onClick={() => this.changeTab(CourseListCode.HUMANITY)}>
               <i className={classNames('icon', 'icon--tab-humanity')} />
-              <span>{t('ui.tab.humanityShort')}</span>
+              <span className={styles.title}>{t('ui.tab.humanityShort')}</span>
             </div>
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.TAKEN ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.TAKEN}
               onClick={() => this.changeTab(CourseListCode.TAKEN)}>
               <i className={classNames('icon', 'icon--tab-taken')} />
-              <span>{t('ui.tab.takenShort')}</span>
+              <span className={styles.title}>{t('ui.tab.takenShort')}</span>
             </div>
           </div>
         </Scroller>
diff --git a/src/components/sections/dictionary/courselist/CourseListTabs.module.scss b/src/components/sections/dictionary/courselist/CourseListTabs.module.scss
new file mode 100644
index 0000000..2ca19d7
--- /dev/null
+++ b/src/components/sections/dictionary/courselist/CourseListTabs.module.scss
@@ -0,0 +1,72 @@
+@use '@/sass/abstracts/color' as color;
+@use '@/sass/abstracts/font' as font;
+@use '@/sass/abstracts/mixins' as *;
+@use '@/sass/abstracts/variables' as *;
+
+.wrapper {
+  grid-area: course-list-tabs;
+
+  overflow: hidden;
+
+  font-size: font.$size-small;
+  line-height: font.$line-height-small;
+  color: color.$text-light;
+}
+
+.list {
+  @include mixin-media-portrait {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.tab {
+  display: inline-block;
+
+  padding: $tab-padding;
+
+  background-color: color.$tab-background-dark;
+
+  text-align: center;
+  white-space: nowrap;
+
+  &[aria-selected='true'] {
+    background-color: color.$tab-background;
+
+    color: color.$text-normal;
+  }
+  &[aria-selected='false']:hover {
+    background-color: color.$tab-background-darker;
+    cursor: pointer;
+  }
+
+  @include mixin-media-landscape {
+    margin-bottom: $tab-margin;
+    margin-left: auto;
+    border-radius: $tab-border-radius 0 0 $tab-border-radius;
+
+    line-height: 0;
+
+    touch-action: pinch-zoom;
+  }
+  @include mixin-media-portrait {
+    flex: 1 1 0;
+
+    margin-right: $tab-margin;
+    border-radius: $tab-border-radius $tab-border-radius 0 0;
+
+    touch-action: pan-x pinch-zoom;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.title {
+  margin-left: 6px;
+
+  @include mixin-media-landscape {
+    display: none;
+  }
+}
diff --git a/src/components/sections/planner/courselist/CourseListTabs.jsx b/src/components/sections/planner/courselist/CourseListTabs.jsx
index 4f7a589..3064a79 100644
--- a/src/components/sections/planner/courselist/CourseListTabs.jsx
+++ b/src/components/sections/planner/courselist/CourseListTabs.jsx
@@ -17,6 +17,9 @@ import courseListsShape from '../../../../shapes/state/dictionary/CourseListsSha
 
 import Scroller from '../../../Scroller';
 
+// FIXME: It uses the dictionary style as the structure is the same.
+import styles from '../../dictionary/courselist/CourseListTabs.module.scss';
+
 class CourseListTabs extends Component {
   componentDidUpdate(prevProps, prevState, snapshot) {
     const { user, selectedListCode } = this.props;
@@ -176,58 +179,48 @@ class CourseListTabs extends Component {
     const { user, selectedListCode } = this.props;
 
     return (
-      <div className={classNames('tabs', 'tabs--course-list', 'mobile-hidden')}>
+      <div className={classNames('tabs', styles.wrapper, 'mobile-hidden')}>
         <Scroller noScrollX={false} noScrollY={true} expandBottom={2}>
-          <div className={classNames('tabs__flexbox')}>
+          <div className={styles.list}>
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.SEARCH ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.SEARCH}
               onClick={() => this.changeTab(CourseListCode.SEARCH)}>
               <i className={classNames('icon', 'icon--tab-search')} />
-              <span>{t('ui.tab.searchShort')}</span>
+              <span className={styles.title}>{t('ui.tab.searchShort')}</span>
             </div>
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.BASIC ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.BASIC}
               onClick={() => this.changeTab(CourseListCode.BASIC)}>
               <i className={classNames('icon', 'icon--tab-basic')} />
-              <span>{t('ui.tab.basicShort')}</span>
+              <span className={styles.title}>{t('ui.tab.basicShort')}</span>
             </div>
             {!user
               ? null
               : user.departments.map((d) => (
                   <div
-                    className={classNames(
-                      'tabs__elem',
-                      selectedListCode === d.code ? 'tabs__elem--selected' : null,
-                    )}
                     key={d.code}
+                    className={styles.tab}
+                    aria-selected={selectedListCode === d.code}
                     onClick={() => this.changeTab(d.code)}>
                     <i className={classNames('icon', 'icon--tab-major')} />
-                    <span>{t('ui.tab.majorShort')}</span>
+                    <span className={styles.title}>{t('ui.tab.majorShort')}</span>
                   </div>
                 ))}
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.HUMANITY ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.HUMANITY}
               onClick={() => this.changeTab(CourseListCode.HUMANITY)}>
               <i className={classNames('icon', 'icon--tab-humanity')} />
-              <span>{t('ui.tab.humanityShort')}</span>
+              <span className={styles.title}>{t('ui.tab.humanityShort')}</span>
             </div>
             <div
-              className={classNames(
-                'tabs__elem',
-                selectedListCode === CourseListCode.TAKEN ? 'tabs__elem--selected' : null,
-              )}
+              className={styles.tab}
+              aria-selected={selectedListCode === CourseListCode.TAKEN}
               onClick={() => this.changeTab(CourseListCode.TAKEN)}>
               <i className={classNames('icon', 'icon--tab-taken')} />
-              <span>{t('ui.tab.takenShort')}</span>
+              <span className={styles.title}>{t('ui.tab.takenShort')}</span>
             </div>
             {/* 장바구니로 바꾸기 */}
           </div>
diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss
index 754a1d8..c178dd2 100644
--- a/src/sass/App.module.scss
+++ b/src/sass/App.module.scss
@@ -332,7 +332,6 @@ a {
     }
   }
 
-  &--course-list,
   &--lecture-list {
     & .tabs__flexbox {
       @include mixin-media-portrait {
@@ -371,10 +370,6 @@ a {
     grid-area: lecture-list-tabs;
   }
 
-  &--course-list {
-    grid-area: course-list-tabs;
-  }
-
   &--timetable {
     grid-area: timetable-tabs;