diff --git a/src/widgets/courses-school/lib/getCourseIcon.tsx b/src/widgets/courses-school/lib/getCourseIcon.tsx
deleted file mode 100644
index a49ff7001..000000000
--- a/src/widgets/courses-school/lib/getCourseIcon.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { IconsTitle, icons } from './icons.data';
-
-export const getCourseIcon = (title: IconsTitle) => {
-  return icons[title];
-};
diff --git a/src/widgets/courses-school/lib/icons.data.tsx b/src/widgets/courses-school/lib/icons.data.tsx
deleted file mode 100644
index 43925b38a..000000000
--- a/src/widgets/courses-school/lib/icons.data.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { COURSE_TITLES } from '@/shared/data/courseTitles.data';
-import { AngularIcon, AwsLogo, HtmlIcon, JavascriptIcon, NodeJsIcon, ReactIcon } from '@/shared/icons';
-
-export const icons = {
-  [COURSE_TITLES.JS_PRESCHOOL_RU]: <HtmlIcon />,
-  [COURSE_TITLES.JS_EN]: <JavascriptIcon />,
-  [COURSE_TITLES.JS_RU]: <JavascriptIcon />,
-  [COURSE_TITLES.REACT]: <ReactIcon />,
-  [COURSE_TITLES.ANGULAR]: <AngularIcon />,
-  [COURSE_TITLES.NODE]: <NodeJsIcon />,
-  [COURSE_TITLES.AWS_FUNDAMENTALS]: <AwsLogo />,
-  [COURSE_TITLES.AWS_CLOUD_DEVELOPER]: <AwsLogo />,
-};
-
-export type IconsTitle = keyof typeof COURSE_TITLES;
diff --git a/src/widgets/courses-school/ui/CourseCard.tsx b/src/widgets/courses-school/ui/CourseCard.tsx
index aca550bba..35f9117a5 100644
--- a/src/widgets/courses-school/ui/CourseCard.tsx
+++ b/src/widgets/courses-school/ui/CourseCard.tsx
@@ -1,10 +1,16 @@
+import classNames from 'classnames/bind';
 import { Course } from '@/app/types';
 import { ArrowIcon } from '@/shared/icons';
+import Image from '@/shared/ui/image';
 import { LinkCustom } from '@/shared/ui/link-custom';
 
+import styles from './courses.module.scss';
+
+const cx = classNames.bind(styles);
+
 type addFields = {
   buttonText: string;
-  icon: JSX.Element | null;
+  iconSrc: string;
 };
 
 type PropsType = Pick<Course, 'title' | 'language' | 'startDate' | 'detailsUrl'> & addFields;
@@ -15,16 +21,18 @@ export const CourseCard = ({
   startDate,
   detailsUrl,
   buttonText,
-  icon,
+  iconSrc,
 }: PropsType) => {
   return (
-    <section className="course-card">
-      <figure className="icon-container">{icon}</figure>
-      <div className="course-info">
-        <p className="name">{title}</p>
-        <p className="date">{`${startDate} • ${language[0].toUpperCase()}`}</p>
+    <section className={cx('course-card')}>
+      <figure className={cx('icon-container')}>
+        <Image src={iconSrc} alt={title} />
+      </figure>
+      <div className={cx('course-info')}>
+        <p className={cx('name')}>{title}</p>
+        <p className={cx('date')}>{`${startDate} • ${language[0].toUpperCase()}`}</p>
       </div>
-      <div className="details-container">
+      <div className={cx('details-container')}>
         <LinkCustom
           href={detailsUrl}
           icon={<ArrowIcon size="16px" />}
diff --git a/src/widgets/courses-school/ui/courses.module.scss b/src/widgets/courses-school/ui/courses.module.scss
new file mode 100644
index 000000000..f219bb270
--- /dev/null
+++ b/src/widgets/courses-school/ui/courses.module.scss
@@ -0,0 +1,91 @@
+.course-title {
+  margin-top: 24px;
+  margin-bottom: 0;
+
+  font-size: 36px;
+  font-weight: $font-weight-medium;
+  line-height: 44px;
+  letter-spacing: 0;
+}
+
+.image {
+  @include media-laptop {
+    margin-top: 24px;
+  }
+
+  img {
+    width: 299px;
+    height: 193px;
+  }
+}
+
+.course-list {
+  @include media-laptop {
+    width: 100%;
+  }
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  width: 800px;
+
+  .course-card {
+    @extend %transition-all;
+
+    @include media-hover {
+      &:hover {
+        box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
+      }
+    }
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    margin-top: 24px;
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+
+      img {
+        width: 48px;
+        height: 36px;
+        object-fit: contain;
+      }
+    }
+
+    .course-info {
+      width: 100%;
+      text-align: left;
+
+      .name {
+        margin-top: 0;
+        margin-bottom: 0;
+
+        font-size: 18px;
+        font-weight: $font-weight-medium;
+        line-height: 24px;
+        color: $color-black;
+      }
+
+      .date {
+        margin-top: 8px;
+        margin-bottom: 0;
+
+        font-size: 14px;
+        line-height: 20px;
+        color: $color-gray-600;
+      }
+    }
+
+    .details-container {
+      padding: 16px;
+    }
+  }
+}
diff --git a/src/widgets/courses-school/ui/courses.scss b/src/widgets/courses-school/ui/courses.scss
deleted file mode 100644
index cd754d0e0..000000000
--- a/src/widgets/courses-school/ui/courses.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.courses {
-  .title {
-    margin-top: 24px;
-    margin-bottom: 0;
-
-    font-size: 36px;
-    font-weight: $font-weight-medium;
-    line-height: 44px;
-    letter-spacing: 0;
-  }
-
-  .content {
-    .image {
-      @include media-laptop {
-        margin-top: 24px;
-      }
-
-      img {
-        width: 299px;
-        height: 193px;
-      }
-    }
-
-    .courses {
-      @include media-laptop {
-        width: 100%;
-      }
-
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: space-between;
-
-      width: 800px;
-
-      .course-card {
-        @extend %transition-all;
-
-        @include media-hover {
-          &:hover {
-            box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
-          }
-        }
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        width: 100%;
-        margin-top: 24px;
-
-        .icon-container {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 16px;
-
-          img {
-            width: 48px;
-            height: 36px;
-          }
-        }
-
-        .course-info {
-          width: 100%;
-          text-align: left;
-
-          .name {
-            margin-top: 0;
-            margin-bottom: 0;
-
-            font-size: 18px;
-            font-weight: $font-weight-medium;
-            line-height: 24px;
-            color: $color-black;
-          }
-
-          .date {
-            margin-top: 8px;
-            margin-bottom: 0;
-
-            font-size: 14px;
-            line-height: 20px;
-            color: $color-gray-600;
-          }
-        }
-
-        .details-container {
-          padding: 16px;
-        }
-      }
-    }
-  }
-}
diff --git a/src/widgets/courses-school/ui/courses.tsx b/src/widgets/courses-school/ui/courses.tsx
index 2eb9da4f8..894ef6b32 100644
--- a/src/widgets/courses-school/ui/courses.tsx
+++ b/src/widgets/courses-school/ui/courses.tsx
@@ -1,6 +1,5 @@
+import classNames from 'classnames/bind';
 import { CourseCard } from './CourseCard';
-import { getCourseIcon } from '../lib/getCourseIcon';
-import { IconsTitle } from '../lib/icons.data';
 import { selectCourses } from '../lib/selectCourses';
 import { ROUTES } from '@/app/const';
 
@@ -9,7 +8,9 @@ import { useWindowSize } from '@/shared/hooks/use-window-size';
 import { ArrowIcon, RsBanner } from '@/shared/icons';
 import { LinkCustom } from '@/shared/ui/link-custom';
 
-import './courses.scss';
+import styles from './courses.module.scss';
+
+const cx = classNames.bind(styles);
 
 export const Courses = () => {
   const size = useWindowSize();
@@ -25,16 +26,14 @@ export const Courses = () => {
     linkLabel = 'More';
   }
 
-  const coursesContent = coursesData?.map(({ title, language, startDate, detailsUrl }) => {
-    const courseIcon = getCourseIcon(title as IconsTitle);
-
+  const coursesContent = coursesData?.map(({ title, language, startDate, detailsUrl, iconSrc }) => {
     return (
       <CourseCard
         title={title}
         language={language}
         startDate={startDate}
         detailsUrl={detailsUrl}
-        icon={courseIcon}
+        iconSrc={iconSrc}
         buttonText={linkLabel}
         key={title}
       />
@@ -42,17 +41,17 @@ export const Courses = () => {
   });
 
   return (
-    <article id="upcoming-courses" className="courses container">
-      <section className="courses content">
-        <h4 className="title">Upcoming courses</h4>
-        <div className="column-2">
-          <div className="courses" data-testid="courses-list">
+    <article id="upcoming-courses" className={cx('container')}>
+      <section className={cx('content')}>
+        <h4 className={cx('course-title')}>Upcoming courses</h4>
+        <div className={cx('column-2')}>
+          <div className={cx('course-list')} data-testid="courses-list">
             {coursesContent}
             <LinkCustom href={ROUTES.COURSES} icon={<ArrowIcon />} variant="colored" button>
               Go to courses
             </LinkCustom>
           </div>
-          <figure className="image">
+          <figure className={cx('image')}>
             <RsBanner />
           </figure>
         </div>