diff --git a/src/App.jsx b/src/App.jsx
index e63e8c3..cbba53b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -41,9 +41,9 @@ function App() {
     setAlert({
       msg: message
     })
-    setTimeout(() => {
-      setAlert(null);
-    }, 3500);
+     setTimeout(() => {
+       setAlert(null);
+     }, 3500);
   }
 
   return (
diff --git a/src/components/Alert/Alert.css b/src/components/Alert/Alert.css
new file mode 100644
index 0000000..8800eb0
--- /dev/null
+++ b/src/components/Alert/Alert.css
@@ -0,0 +1,8 @@
+.addMarginBottom{
+    margin-bottom: 5% ;
+}
+@media (min-width:321px) and (max-width:621px){
+    .addMarginBottom{
+        margin-bottom: 12% ;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
index 993451b..905b324 100644
--- a/src/components/Alert/Alert.jsx
+++ b/src/components/Alert/Alert.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
-
+import './Alert.css'
 const Alert = (props) => {
   return (
-    <div style={{ height: '50px' }} className='text-center align-center'>
+    <div style={{ height: '50px'}} className='text-center align-center addMarginBottom'>
       {props.alert && <div className={`alert alert-warning alert-dismissible fade show`} role="alert">
         {props.alert.msg}
       </div>}