diff --git a/src/components/Footer/footer.module.css b/src/components/Footer/footer.module.css
new file mode 100644
index 00000000..5f1c5f66
--- /dev/null
+++ b/src/components/Footer/footer.module.css
@@ -0,0 +1,10 @@
+.footer {
+    padding: var(--size-m);
+    color: var(--color-text-opposite);
+    background-color: var(--color-back-opposite);
+    font-size: var(--font-size-second);
+
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+}
+
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 0f0361a1..cfc5b7fe 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,3 +1,6 @@
+import s from './footer.module.css'
+
+import cx from 'classnames'
 import { Copyright } from '../Copyright'
 import { Author } from './Author'
 import { Block } from '../Block'
@@ -9,9 +12,9 @@ export interface IFooterProps {
 }
 
 export const Footer: React.FC<IFooterProps> = props => (
-    <footer className={'opposite'}>
+    <footer className={cx(s.footer, 'opposite')}>
         <Block direction={'vertical'} style={{
-            marginBottom: 'var(--size-m)',
+            marginBottom: 'var(--size-l)',
         }}>
             <Contacts />
         </Block>
diff --git a/src/style/style.css b/src/style/style.css
index e7de3e2e..b2f90e00 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -77,13 +77,6 @@ body {
     font-family: var(--text-font);
 }
 
-footer {
-    padding: var(--size-m);
-    color: var(--color-text-opposite);
-    background-color: var(--color-back-opposite);
-    font-size: var(--font-size-second);
-}
-
 h1 {
     font-family: var(--title-font);
     text-align: center;