diff --git a/componentes/escrever.php b/componentes/escrever.php
new file mode 100644
index 0000000..490176e
--- /dev/null
+++ b/componentes/escrever.php
@@ -0,0 +1,39 @@
+<link rel="stylesheet" href="css/escrever.css" />
+<div id="write">
+    <div id="embed-write">
+        <img src="assets/invalid-file.png"/>
+        <ul>
+            <li>
+                <input type="text" min="150" max="300" placeholder="titulo da sua historia">
+            </li>
+            <li>
+                <textarea min="190" max="380" placeholder="escreva a sinopse da sua historia"></textarea>
+            </li>
+            <li id="tags">
+
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+                <label><input type="checkbox">ovo</label>
+
+                <!-- so para saber como vai ficar, tenho que remover depois -->
+            </li>
+        </ul>
+    </div>
+    <div id="text-write">
+        <ul>
+        </ul>
+        <li>
+            <textarea placeholder="escreva sua historia aqui"></textarea>
+        </li>
+        <a id="btn">enviar</a>
+    </div>
+</div>
diff --git a/componentes/inicio.php b/componentes/inicio.php
index aa1c161..249d058 100644
--- a/componentes/inicio.php
+++ b/componentes/inicio.php
@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="css/inicio.css" />
 <nav id="search">
     <hgroup>
         <h1>Bem-vindos a biblioteca secreta</h1>
@@ -25,12 +26,7 @@
                     <label>Titulo da Historia</label>
                     <h3>27/07/2025</h3>
                     <p>
-                        bla bla bla bla bla bla bla bla bla bla bla bla
-                        blabla bla bla bla bla bla bla bla bla bla bla
-                        bla blabla bla bla bla bla bla bla bla bla bla
-                        bla bla blabla bla bla bla bla bla bla bla bla
-                        bla bla bla blabla bla bla bla bla bla bla bla
-                        bla bla bla bla bla
+bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla
                     </p>
                 </hgroup>
             </li>
diff --git a/css/LoginStyle.css b/css/LoginStyle.css
deleted file mode 100644
index 64f2900..0000000
--- a/css/LoginStyle.css
+++ /dev/null
@@ -1,82 +0,0 @@
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Inter', sans-serif;
-}
-
-body {
-  background-color: #1d1d1d;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.login-container {
-  background-color: #9cc1d921;
-  padding: 40px;
-  border-radius: 20px;
-  box-shadow: 0 0 20px rgba(0,0,0,0.5);
-  width: 300px;
-  text-align: center;
-}
-
-.login-container h2 {
-  color: white;
-  margin-bottom: 30px;
-  font-weight: 500;
-}
-
-.input-box {
-  position: relative;
-  margin-bottom: 20px;
-}
-
-.input-box i {
-  position: absolute;
-  top: 12px;
-  left: 10px;
-  color: white;
-}
-
-.input-box input {
-  width: 100%;
-  padding: 10px 10px 10px 35px;
-  border: none;
-  border-radius: 10px;
-  background: #1f1f1f;
-  color: white;
-  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
-}
-
-.input-box input::placeholder {
-  color: #aaa;
-}
-
-.buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 10px;
-}
-
-.btn {
-  width: 48%;
-  padding: 10px;
-  background-color: #385c737e;
-  border: none;
-  border-radius: 8px;
-  color: white;
-  cursor: pointer;
-  transition: 0.3s;
-}
-
-.btn:hover {
-  background-color: #444;
-}
-
-.forgot {
-  width: 100%;
-  margin-top: 10px;
-}
diff --git a/css/escrever.css b/css/escrever.css
new file mode 100644
index 0000000..2e329d0
--- /dev/null
+++ b/css/escrever.css
@@ -0,0 +1,64 @@
+#write {
+    width: 100%;
+    min-height: 90dvh;
+    display: flex;
+    #embed-write {
+        max-width: 50dvh;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        img {
+            object-fit: cover;
+            width: 50dvh;
+            height: 50dvh;
+            margin: 0 0 1dvw 0;
+        }
+        ul {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            li {
+                margin: 0 0 1dvh 0;
+                width: 95%;
+                input[type="text"] {
+                    width: 100%;
+                    outline: none;
+                    font-size: 1.3em;
+                }
+                textarea {
+                    font-size: 1.3em;
+                    outline: none;
+                    resize: none;
+                    width: 100%;
+                    height: 25dvh;
+                }
+            }
+        }
+    }
+    #text-write {
+        position: relative;
+        width: calc(100% - 50dvh - 2px);
+        border-left: solid 2px var(--btn);
+        ul {
+            width: 100%;
+            min-height: 3dvw;
+            background: purple;
+        }
+        li {
+            width: 100%;
+            textarea {
+                width: 100%;
+                height: 39dvw;
+                resize: none;
+                padding: 1dvh;
+            }
+        }
+        #btn {
+            position: absolute;
+            text-align: center;
+            border-radius: 0;
+            width: 100%;
+            bottom: 0;
+        }
+    }
+}
diff --git a/css/style.css b/css/home.css
similarity index 56%
rename from css/style.css
rename to css/home.css
index d5fbc9f..f449f8e 100644
--- a/css/style.css
+++ b/css/home.css
@@ -87,62 +87,3 @@
         }
     }
 }
-
-#posts {
-    background-color: #0000007a;
-    padding: 4dvw 0 4dvw 0;
-    margin: 4dvw 0 0 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-
-    ul {
-        width: calc(100% - 5dvw);
-        display: flex;
-        flex-wrap: wrap;
-        gap: 1.5vw;
-        a {
-            width: calc(33.33% - 1dvw - 2px);
-            height: 30dvh;
-            overflow: hidden;
-            border-radius: 1dvw;
-            li {
-                overflow: hidden;
-                width: 100%;
-                background: rgb(15, 15, 15);
-                display: flex;
-                img {
-                    width: 25dvh;
-                    height: 30dvh;
-                    object-fit: cover;
-                }
-                hgroup {
-                    width: calc(100% - 25dvh);
-                    label {
-                        display: block;
-                        width: 100%;
-                        text-align: center;
-                        font-size: 1.5em;
-                        font-family: "Special Gothic Expanded One", sans-serif;
-                        color: var(--btn);
-                    }
-                    h3 {
-                        font-family: Arial;
-                        display: block;
-                        width: 100%;
-                        text-align: right;
-                    }
-                    p {
-                        font-family: Arial;
-                        white-space: pre-wrap;
-                    }
-                }
-            }
-            box-shadow: 0 0 0 #000000;
-        }
-        a:hover {
-            box-shadow: 0 0 5vw #84e9ffa7;
-            z-index: 100;
-        }
-    }
-}
diff --git a/css/inicio.css b/css/inicio.css
new file mode 100644
index 0000000..f5c6a67
--- /dev/null
+++ b/css/inicio.css
@@ -0,0 +1,58 @@
+#posts {
+    background-color: #0000007a;
+    padding: 4dvw 0 4dvw 0;
+    margin: 4dvw 0 0 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    ul {
+        width: calc(100% - 5dvw);
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1.5vw;
+        a {
+            width: calc(33.33% - 1dvw - 2px);
+            height: 30dvh;
+            overflow: hidden;
+            border-radius: 1dvw;
+            li {
+                overflow: hidden;
+                width: 100%;
+                background: rgb(15, 15, 15);
+                display: flex;
+                img {
+                    width: 25dvh;
+                    height: 30dvh;
+                    object-fit: cover;
+                }
+                hgroup {
+                    width: calc(100% - 25dvh);
+                    label {
+                        display: block;
+                        width: 100%;
+                        text-align: center;
+                        font-size: 1.5em;
+                        font-family: "Special Gothic Expanded One", sans-serif;
+                        color: var(--btn);
+                    }
+                    h3 {
+                        font-family: Arial;
+                        display: block;
+                        width: 100%;
+                        text-align: right;
+                    }
+                    p {
+                        font-family: Arial;
+                        white-space: pre-wrap;
+                    }
+                }
+            }
+            box-shadow: 0 0 0 #000000;
+        }
+        a:hover {
+            box-shadow: 0 0 5vw #84e9ffa7;
+            z-index: 100;
+        }
+    }
+}
diff --git a/css/Login-e-Registro.css b/css/sing.css
similarity index 100%
rename from css/Login-e-Registro.css
rename to css/sing.css
diff --git a/index.php b/index.php
index 5d83d54..e374693 100644
--- a/index.php
+++ b/index.php
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="stylesheet" href="css/base.css" />
-        <link rel="stylesheet" href="css/style.css" />
+        <link rel="stylesheet" href="css/home.css" />
         <script type="text/javascript" src="javascript/libs/vanila.js"></script>
         <title>;-;</title>
     </head>
@@ -13,12 +13,12 @@
             <label>Logo</label>
             <header>
                 <ul>
-                    <li id="btn">
-                        <a href="index.php"> Inicio </a>
-                    </li>
-                    <li id="btn">
-                        <a href="index.php?pg=2"> Escrever Historia </a>
-                    </li>
+                    <a href="index.php"><li id="btn">
+                        Inicio
+                    </li></a>
+                    <a href="index.php?pg=2"><li id="btn">
+                        Escrever Historia
+                    </li></a>
                 </ul>
             </header>
         </div>
diff --git a/sing.php b/sing.php
index 9bd33ec..818ca58 100644
--- a/sing.php
+++ b/sing.php
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Login e Registro</title>
 
-    <link rel="stylesheet" href="css/Login-e-Registro.css"/>
+    <link rel="stylesheet" href="css/sing.css"/>
     <link rel="stylesheet" href="css/base.css"/>
 </head>
 <body>