diff --git a/src/App.css b/src/App.css
index 16fffbd..d530647 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,32 +2,12 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
 /*@media (prefers-reduced-motion: no-preference) {*/
 /*  .App-logo {*/
 /*    animation: App-logo-spin infinite 20s linear;*/
 /*  }*/
 /*}*/
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/src/components/auth/GetStarted.jsx b/src/components/auth/GetStarted.jsx
index 9caa172..82cc459 100644
--- a/src/components/auth/GetStarted.jsx
+++ b/src/components/auth/GetStarted.jsx
@@ -5,14 +5,14 @@ import myLinks from '../../myLinks';
 
 export default function GetStarted() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo2} className="App-logo" alt="logo" />
-          <p className=''>
+      <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
+        <header className="flex flex-col gap-2 justify-center items-center text-lg sm:text-2xl font-bold">
+          <img src={logo2} className="h-32 sm:h-72 w-auto" alt="logo" />
+          <p className='w-full text-center'>
             digiFi - Banking Offers Emulator Systems.
           </p>
           <Link
-            className="App-link"
+            className="mt-2 px-2 py-1 text-emerald-600 bg-emerald-100/90 rounded"
             to={myLinks.login}
             href="https://reactjs.org"
             // target="_blank"