diff --git a/public/css/login.css b/public/css/login.css
index 16a6ff1..d40ff46 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -7,8 +7,10 @@ form {
   display: flex;
   align-items: center;
   flex-direction: column;
-  max-width: 1000px;
+  max-width: 500px;
   margin: 0 auto;
+  width:100%;
+  padding:8px;
 }
 
 
@@ -18,7 +20,7 @@ form {
   display: block;
   font-weight: 600;
   color: #4c4c4c;
-  width: 500px;
+  width: 100%;
   margin-bottom: 10px;
   border: 2px solid #d9d9d9;
-}
\ No newline at end of file
+}
diff --git a/public/css/navbar.css b/public/css/navbar.css
index 5cb0cb9..2a5afb1 100644
--- a/public/css/navbar.css
+++ b/public/css/navbar.css
@@ -125,7 +125,7 @@ div.avatar {
 
 .box-username {
     display: flex;
-    align-items: center;
+    justify-content: center;
     font-size: 18px;
     font-weight: 700;
     color: #4d18e6;
diff --git a/public/css/thread.css b/public/css/thread.css
index b67a5d7..bdc159a 100644
--- a/public/css/thread.css
+++ b/public/css/thread.css
@@ -137,4 +137,66 @@
   display: block;
   margin: 8px;
   cursor: pointer;
-}
\ No newline at end of file
+}
+.dots-menu a:hover:nth-child(1){
+color:#e70000}
+.dots-menu a:hover:nth-child(2){
+color:#4d18e6}
+
+
+/* Media Query  */
+
+@media(max-width:980px){
+  .message{
+     margin: 10px 20px;
+  max-width: 100%;
+    flex-direction:column;
+    position:relative;
+  }
+  .message .left{
+      padding: 40px;
+border:none;
+    border-bottom: 2px solid #d9d9d9;
+
+  }
+  .message .left img{
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      margin-right: 5px;
+      position: absolute;
+      left: 20px;
+      top: 20px;
+  }
+  .message .left .username{
+    position: absolute;
+    top: 20px;
+    left: 80px;
+  }
+  .message .date:nth-of-type(3){
+    position: absolute;
+right: 20px;
+top: 20px;
+  }
+   .message .date:nth-of-type(2){
+    position: absolute;
+right: 20px;
+top: 40px;
+  }
+
+  .dots{
+   position: absolute;
+right: auto;
+top: 70px;
+left: 40px;
+  }
+  .dots-menu{
+position: absolute;
+left: 70px;
+top: 60px;
+width: 120px;
+  }
+  .dots-menu.active{
+    display:flex;
+  }
+}
diff --git a/views/thread.ejs b/views/thread.ejs
index 8a3c1b1..4cda078 100644
--- a/views/thread.ejs
+++ b/views/thread.ejs
@@ -94,8 +94,12 @@
   <% if (user){ %>
 
   <div class="message">
-    <form id="send">
-      <textarea rows="4" cols="100" name="content"></textarea>
+    <form id="send" style="width:100%">
+      <textarea rows="4"  
+        style="
+  width: 100%;
+  margin: 10px;
+  border: 2px solid #e3e3e3;"  name="content"></textarea>
       <input name="threadID" type="hidden" value="<%= thread.id %>"></input>
       <input name="page" type="hidden" value="<%= page %>"></input>
 
@@ -153,4 +157,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>