diff --git a/packages/app/src/pages/login/index.jsx b/packages/app/src/pages/login/index.jsx
index 3f29f7ac..c0c075c1 100755
--- a/packages/app/src/pages/login/index.jsx
+++ b/packages/app/src/pages/login/index.jsx
@@ -7,6 +7,28 @@ import { Footer } from "components"
 
 import "./index.less"
 
+const GradientSVG = () => {
+    return <svg height="100%" width="100%">
+        <defs>
+            <linearGradient id="0" x1="0" y1="0.5" x2="1" y2="0.5">
+                <stop offset="0%" stop-color="rgba(225, 0, 209, 0.1)" />
+                <stop offset="25%" stop-color="rgba(233, 0, 182, 0.08)" />
+                <stop offset="50%" stop-color="rgba(240, 0, 154, 0.05)" />
+                <stop offset="100%" stop-color="rgba(255, 0, 0, 0)" />
+            </linearGradient>
+            <radialGradient id="1" gradientTransform="translate(-0.81 -0.5) scale(2, 1.2)">
+                <stop offset="0%" stop-color="rgba(255, 96, 100, 0.2)" />
+                <stop offset="20%" stop-color="rgba(255, 96, 100, 0.16)" />
+                <stop offset="40%" stop-color="rgba(255, 96, 100, 0.12)" />
+                <stop offset="60%" stop-color="rgba(255, 96, 100, 0.08)" />
+                <stop offset="100%" stop-color="rgba(255, 96, 100, 0)" />
+            </radialGradient>
+        </defs>
+        <rect fill="url(#0)" height="100%" width="100%" />
+        <rect fill="url(#1)" height="100%" width="100%" />
+    </svg>
+}
+
 export default (props) => {
     const [wallpaperData, setWallpaperData] = React.useState(null)
 
@@ -35,61 +57,64 @@ export default (props) => {
     }, [])
 
     return <div className="loginPage">
-        <div
-            style={{
-                backgroundImage: `url(${wallpaperData?.url})`,
-            }}
-            className="wallpaper"
-        >
-            <p>
-                {wallpaperData?.author ? wallpaperData.author : null}
-            </p>
+        <div className="background">
+            <GradientSVG />
         </div>
 
         <div className="wrapper">
-            <img src={window.isMobile ? config.logo.alt : config.logo.full} className="logo" />
+            <div
+                className="wrapper_background"
+                style={{
+                    backgroundImage: wallpaperData ? `url(${wallpaperData.url})` : null,
+                    animation: wallpaperData ? "opacityIn 1s" : null
+                }}
+            />
 
             <div className="content">
-                <div className="title">
-                    <h1>A prototype of a social network</h1>
+                <div className="content_header">
+                    <img src={window.isMobile ? config.logo.alt : config.logo.full} className="logo" />
                 </div>
 
-                {props.session && <div className="session_available">
-                    <h3><Icons.AlertCircle /> You already have a valid session.</h3>
-                    <div className="session_card">
-                        @{props.session.username}
-                    </div>
+                <div className="actions">
                     <antd.Button
+                        onClick={onClickLogin}
+                        size="large"
+                        icon={<Icons.LogIn />}
                         type="primary"
-                        onClick={() => window.app.setLocation(config.app?.mainPath ?? "/home")} >
-                        Go to home
+                    >
+                        Continue with a Comty™ Account
                     </antd.Button>
-                </div>}
-
-                <div className="buttonsBox">
-                    <div className="register">
-                        <antd.Button
-                            type="primary"
-                            size="large"
-                            onClick={onClickRegister}
-                        >
-                            Create a new account
-                        </antd.Button>
-                        <p>Registering a new account accepts the <a>Terms and Conditions</a> and <a>Privacy policy</a> for the services provided by {config.author}</p>
-                    </div>
-
-                    <h3>
-                        You have already an account?
-                    </h3>
 
                     <antd.Button
                         onClick={onClickLogin}
+                        size="large"
+                        icon={<Icons.LogIn />}
+                        type="primary"
+                        disabled
                     >
-                        Login
+                        Continue with a RageStudio© ID™
                     </antd.Button>
                 </div>
+
+                <h4>Or create a new account</h4>
+
+                <div className="actions">
+                    <antd.Button
+                        onClick={onClickRegister}
+                        icon={<Icons.UserPlus />}
+                        type="primary"
+                    >
+                        Create a Comty™ Account
+                    </antd.Button>
+
+                    <p>
+                        <Icons.Info />
+                        Registering a new account accepts the <a>Terms and Conditions</a> and <a>Privacy policy</a> for the services provided by {config.author}
+                    </p>
+                </div>
             </div>
-            <Footer />
         </div>
+
+        <Footer />
     </div>
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/login/index.less b/packages/app/src/pages/login/index.less
index b537e129..899d237c 100755
--- a/packages/app/src/pages/login/index.less
+++ b/packages/app/src/pages/login/index.less
@@ -1,108 +1,116 @@
 .loginPage {
     display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+
+    align-items: center;
 
     width: 100vw;
     height: 100vh;
 
-    align-items: right;
-    justify-content: right;
+    font-family: "Space Grotesk", sans-serif;
 
-    .wallpaper {
+    .background {
         position: absolute;
-        display: flex;
-        z-index: 10;
 
-        backdrop-filter: blur(20px);
+        z-index: 50;
 
         top: 0;
         left: 0;
 
-        width: 56vw;
+        width: 100vw;
         height: 100vh;
 
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
+        svg {
+            margin: 0;
 
-        //filter: blur(4px);
+            opacity: 0;
 
-        font-size: 15px;
-
-        align-items: self-end;
-        justify-content: left;
-
-        padding: 20px;
-
-        p {
-            font-weight: bold;
-            text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
-                1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
+            animation: opacityIn 3s ease-in-out 0s forwards;
         }
     }
 
     .wrapper {
-        z-index: 20;
-
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
 
-        width: 45vw;
-        height: 100vh;
+        position: relative;
 
-        padding: 30px 50px;
-
-        border-radius: 20px 0 0 20px;
+        z-index: 55;
 
         background-color: var(--background-color-accent);
+        outline: 1px solid var(--border-color);
+        border-radius: 12px;
 
-        border-left: 1px solid var(--border-color);
+        min-height: 50vh;
 
-        .logo {
-            height: 8vh;
-            min-height: 80px;
-            width: fit-content;
-        }
+        .wrapper_background {
+            height: 100%;
+            width: 300px;
 
-        .session_available {
-            margin-bottom: 20px;
+            border-radius: 12px;
+
+            background-position: center;
+            background-size: cover;
+            background-repeat: no-repeat;
         }
 
         .content {
             display: flex;
             flex-direction: column;
 
-            padding-top: 10px;
-            padding-left: 40px;
+            align-items: center;
+            justify-content: center;
 
-            .title {
-                h1 {
-                    font-family: 'Space Grotesk', sans-serif;
-                    font-size: 2rem;
-                    font-weight: 700;
+            max-width: 500px;
+
+            padding: 40px;
+
+            .content_header {
+                height: 70px;
+
+                margin-bottom: 50px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
                 }
             }
 
-            .buttonsBox {
-                width: fit-content;
-                border: 1px solid var(--border-color);
-                border-radius: 12px;
+            .actions {
+                display: flex;
+                flex-direction: column;
 
-                padding: 20px 50px;
+                align-items: center;
+                justify-content: center;
 
-                .register {
-                    p {
-                        margin-top: 10px;
-                        word-wrap: break-word;
-                        max-width: 300px;
+                width: 100%;
 
-                        font-size: 11px;
+                margin-bottom: 20px;
 
-                        color: var(--background-color-contrast);
+                .ant-btn {
+                    width: 100%;
+                    margin-bottom: 20px;
+
+                    font-weight: 500;
+                    letter-spacing: -0.6px;
+
+                    &:last-child {
+                        margin-bottom: 0;
                     }
-
-                    margin-bottom: 50px;
                 }
             }
         }
     }
+}
+
+@keyframes opacityIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
\ No newline at end of file