diff --git a/src/components/Loader/Loader.module.css b/src/components/Loader/Loader.module.css
index 91209344..a423a407 100644
--- a/src/components/Loader/Loader.module.css
+++ b/src/components/Loader/Loader.module.css
@@ -10,14 +10,14 @@
   }
 }
 
-.loader {
+.Loader {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
 }
 
-.loader::before {
+.Loader::before {
   content: '';
   background-color: transparent;
   position: absolute;
@@ -32,7 +32,7 @@
   animation-delay: 0s;
 }
 
-.loader::after {
+.Loader::after {
   content: '';
   background-color: transparent;
   position: absolute;
diff --git a/src/components/Loader/Loader.test.tsx b/src/components/Loader/Loader.test.tsx
index 85122730..26d90087 100644
--- a/src/components/Loader/Loader.test.tsx
+++ b/src/components/Loader/Loader.test.tsx
@@ -27,13 +27,13 @@ describe('Loader', () => {
   describe('when rendered with additional class names', () => {
     it('should not replace the default classes', () => {
       const { getByTestId } = render(
-        <Loader data-testid="loaderElem" className="loader" />
+        <Loader data-testid="loaderElem" className="Loader" />
       );
 
       const loaderElem = getByTestId('loaderElem') as HTMLDivElement;
       const loaderClasses = loaderElem.className
         .split(' ')
-        .filter((classes) => classes.match('\\w*(loader)\\w*'));
+        .filter((classes) => classes.match('\\w*(Loader)\\w*'));
       expect(loaderClasses.length).toBe(2);
     });
   });
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index e388e83d..3831f50a 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -12,7 +12,7 @@ interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const Loader: React.FC<LoaderProps> = ({ size = 'lg', ...rest }) => {
   const mainClass = classNames(
-    styles.loader,
+    styles.Loader,
     rest.className,
     `${styles[size]}`
   );