diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
index 735b1dd..3724840 100644
--- a/src/pages/Login/Login.jsx
+++ b/src/pages/Login/Login.jsx
@@ -8,6 +8,18 @@ const Login = () => {
QuickByte
+
)
diff --git a/src/pages/Login/styles.sass b/src/pages/Login/styles.sass
index 25de4a7..ac87baa 100644
--- a/src/pages/Login/styles.sass
+++ b/src/pages/Login/styles.sass
@@ -10,16 +10,16 @@
.login-container
display: flex
flex-direction: column
- align-items: center
justify-content: center
background-color: $background-opacity
backdrop-filter: blur(5rem)
border: 1px solid #515663
border-radius: 10px
- padding: 1rem 3rem
+ padding: 1rem 2rem
.login-header
display: flex
+ padding: 0 2rem
gap: 1rem
align-items: center
@@ -33,4 +33,51 @@
.login-header h1
margin: 0
- font-weight: 700
\ No newline at end of file
+ font-weight: 700
+
+.login-body
+ display: flex
+ flex-direction: column
+ gap: 1rem
+ margin-top: 1rem
+ max-width: 20rem
+
+.btn
+ display: flex
+ justify-content: center
+ align-items: center
+ padding: 0.5rem 1rem
+ border-radius: 0.5rem
+ background-color: $primary
+ color: $black
+ font-size: 16pt
+ font-weight: 700
+ cursor: pointer
+ border: none
+
+.login-body .text-right
+ text-align: right
+ text-decoration: none
+ color: $gray
+ font-weight: 700
+
+.login-group
+ display: flex
+ flex-direction: column
+ gap: 0.5rem
+
+.login-group label
+ color: $white
+
+.login-group input
+ padding: 0.5rem 1rem
+ border-radius: 0.5rem
+ background-color: $background-opacity
+ color: $white
+ border: 2px solid #515663
+ font-size: 18pt
+ width: auto
+
+.login-group input:focus
+ outline: none
+ border: 2px solid $primary
\ No newline at end of file