diff --git a/public/Styles.css b/public/Styles.css
index fa69284..4f5efce 100644
--- a/public/Styles.css
+++ b/public/Styles.css
@@ -1,49 +1,88 @@
+:root{
+    --back:#121212;
+    --secondback:#161618;
+    --titles:rgb(50, 197, 207);
+    --tc:#c2c2c2;
+    --content:rgb(131, 224, 224);
+    --input:#2f3742;
+    --button:white;
+    /* rgb(188, 253, 250)
+    rgb(50, 197, 207) 
+    #364f64*/
+}
 body{
-    background: rgb(221, 254, 255);
+    background: var(--back);
     overflow: auto;
 }
 .navbar{
-   background: rgb(188, 253, 250);
+   background: var(--secondback);
+   position: absolute;
+   top: 0px;
+   left: 0px;
+   width:100vh;
    display: flex;
-   align-items: center;
-   border-radius: 1vw;
+   align-items: stretch;
+   width: 100%;
+   height: fit-content;
 }
-.navbar:hover{
-    box-shadow:  2px 1px 2px rgb(197, 197, 197);
+.nav1{
+    width: 50%;
+    display: flex;
+    justify-content: flex-start;
 }
 .nav2{
+    width: 50%;
     display: flex;
-    justify-content: end;
-    align-items: flex-end;
-    margin-left: 25vw;
+    justify-content: flex-end;
+}
+.icon{
+    font-size: 100%;
 }
 .top{
-    font-size:1.35vw;
+    font-size:1rem;
     padding-left: 3vw;
     padding-top: 1vh;
     padding-right: 2vw;
     align-items: center;
     padding-bottom: 1vh;
-    color:rgb(114, 113, 113) ;
+    color:var(--tc) ;
+
 
 }
 .top:hover{
-    color: rgb(0, 47, 255);
+    background-color: white;
+    transition-duration: 0.5s;
 }
 .top1{
-    font-size:1.35vw;
+    font-size:1rem;
     padding-left: 3vw;
     padding-top: 1vh;
     padding-right: 2vw;
     align-items: center;
     padding-bottom: 1vh;
-    color:rgb(114, 113, 113) ;
+    color:var(--tc) ;
     white-space: nowrap;
 }
-.top1:hover{
-    color: rgb(0, 47, 255);
+#ham-item{
+    top: 32px;
+    display: none;
+    z-index: 1000;
+}
+.hamburger{
+    position: fixed;
+    right: 10px;
+    top: 4px;
+    display: none;
+    color: var(--tc);
+}
+@media screen and (max-width: 760px){
+    .nav2{
+        display: none;
+    }
+    .hamburger{
+        display: inline-block;
+    }
 }
- 
 .error{
     padding-top: 2vh;
     margin-left: 3vw;
@@ -61,90 +100,162 @@ body{
     font-size: large;
 }
 .ab{
-    font-family: 'Montserrat', sans-serif;
+    color: var(--tc);
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
 }
-.footer{
-   
-    position: absolute;
-    bottom: 0;
+.mode{
+    display: flex;
     align-items: center;
+    justify-content: center;
+    position: fixed;
+    bottom:60px;
+    border-radius: 50%;
+    font-size: 3vmin;
+    background-color: var(--button);
+    height: 6vmin;
+    width: 6vmin;
+    cursor: pointer;
+    color: var(--input);
+}
+.footer{
+    padding :10px;
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    width: 100%;
+    background-color: var(--secondback);
+    color: var(--tc);
+    text-align: center;
 }
 .copyright{
      
     margin-left:45vw;
-    text-align: center;color:gray;
+    text-align: center;color:var(--tc);
+}
+.main-home{
+    background-color: inherit;
+    display: flex;
+    padding-top: 30px;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
 }
 .welcome{
-    text-align: center;
-    font-size: larger;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 900;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    text-align: right;
+     font-size: calc(30px + 30 * ((100vmin - 320px) / 680));
+    /* max 60px and min 30px*/
+    font-family: 'Ubuntu', sans-serif;
+    border-right: 4px solid blue;
+    width: 50vmin;
+    height:45vmin;
+    padding-top: 30px;
+    padding-right: 20px;
+}
+.create-home{
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    width: 50vmin;
+    height:45vmin;
+    padding: 20px;
+    margin-top: 50px;
+}
+.text1{
+    color:rgb(7, 147, 182);
+    margin-bottom: 2vmin;
+}
+.text2{
+    color: blueviolet;
+}
+.create-home button{
+    font-size: 3.5vmin;
+    border-radius: 7px;
+    background: linear-gradient(90deg,aqua,rgb(0, 119, 255));
+    outline: none;
+    border: none;
+    width:80%;
+    height:30%;
+    margin-bottom: 20px;
+    transition-duration: 0.5s;
 }
-.wel{
-    margin-top: 10vh;
+.create-home button:hover{
+    transform: scale(110%);
+    transition-duration: 0.5s ;
 }
 .create{
-    justify-content: center;
-    margin-left: 44.5vw;
-    margin-top: 8vh;
-    width: 10vw;
-    height: 5vh;
-    border-radius: 1.2vh;
     border: none;
-   background-color: rgb(238, 238, 238);
-   font-size:15px;
-   font-weight: 900;
-   font-family: 'Montserrat', sans-serif;
-}
-.create:hover{
-    background-color: gainsboro;
-    transform: scale(1.02);
+    background-color: inherit;   
+}
+.textedit{
+    display: flex;
+    justify-content: center;
+}
+.create i{
+    color: var(--titles);
+}
+.create i:hover{
+    transform: scale(120%);
     transition-duration: 0.5s;
 }
+.create-div{
+    width:23vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .form{
     margin-top: 7vh;
     flex: none;
     text-align: center;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
 }
 .submit{
     margin-top: 3vh;
-    height: 5vh;
-    width: 5vw;
-    border-radius: 1vw;
+    height: 30px;
+    width: 60px;
+    border-radius: 5px;
     outline: none;
     border: none;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     font-weight:bolder;
+    font-size: 1em;
 }
 .input{
-    height: 8vh;
-    width: 35vw;
+    height: 40px;
+    width: 75%;
+    max-width: 400px;
     overflow:scroll;
     margin-top: 2vh;
-    border-radius: 0.5vw;
-    background-color: rgb(199, 251, 255);
+    border-radius: 5px;
+    background-color: var(--input);
    scrollbar-base-color:rgb(196, 251, 255) ;
     scrollbar-width: thin;
     outline: none;
     padding: 1vw;
     border: none;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
+    margin-bottom: 30px;
      
 }
+
  .input:focus{
-    background-color:rgb(148, 230, 255);
+    
      border: none;
-     transition-duration: 0.5s; color: rgb(94, 94, 94);
-     font-family: 'Montserrat', sans-serif;
+     border-bottom: 2px solid rgb(170, 96, 0);
+     transition-duration: 0.1s; color: rgb(94, 94, 94);
+     font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
  }
 .input1{
-    height: 15vh;
-    width: 35vw;
+    height: 50vh;
+    width: 90vw;
     overflow:scroll;
     margin-top: 2vh;
     border-radius: 1vw;
@@ -154,32 +265,72 @@ body{
     padding: 1vw;
     background-color: rgb(199, 251, 255);
     scrollbar-base-color:rgb(196, 251, 255) ;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 900;
-}
-.input1:focus{
-    background-color:rgb(148, 230, 255);
-    border: none;
-    transition-duration: 0.5s;
-    color: rgb(94, 94, 94);
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
 }
 .input-div{
     text-align: center;
     padding-bottom: 2vh;
     font-size: large;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
+    color:var(--tc);
+}
+.title{
+
+    font-size: 3.5vmin;
+    height:8vmin;
+    margin:8px;
+    padding: 10px;
+    width: 20vw;
+    background:var(--titles);
+    margin-bottom: 0px;
+    border-radius: 5px 5px 0px 0px;
+    text-align: center;
 }
 .blog-contents{
-    margin-left: 3vw;
-    margin-top: 3vh;
+    width: 20vw;
+    height: 25vmin;
+    margin:8px;
+    margin-top: 0px;
+    padding: 10px;
+    padding-top: 15px;
     text-decoration: none;
     color: inherit;
-    font-size: 1.5vw;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 900;
+    font-size: 3vmin;
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 400;
+
+    background:  var(--content);
+    border-radius: 0px 0px 5px 5px;
+}
+.blog-contents a{
+    text-decoration: none;
+    color:inherit;
+    cursor: default;
+    pointer-events: none;    
+}
+.content{
+    overflow: hidden;
+    word-wrap: break-word;
+    height:70%;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+}
+.blog-container{
+    margin-top: 10vh;
+    height:120vh;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content:space-evenly;
+    padding-bottom: 40px;
+}
+.blogg{
+    transition-duration: 0.5s;
+}
+.blogg:hover{
+    transform: scale(105%);
+    transition-duration: 0.5s;
 }
 .empty-contents{
     margin-left: 3vw;
@@ -188,90 +339,112 @@ body{
     color: inherit;
     font-size: 1.5vw;
     text-align: center;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
 }
 .detail{
     display: flex;
-    justify-content: space-evenly;
-    font-family: 'Montserrat', sans-serif;
-    font-weight:bold;
-    color: blue;
+    justify-content: space-between;
+    font-family: "Ubuntu",'Segoe UI', 'sans-serif';
+    padding-bottom: 30px;
+    margin-bottom: 10px;
     
 }
+.detail a{
+    text-decoration: none;
+    font-style: italic;
+    border-bottom:2px dotted; 
+    color: black;
+}
 .main{
+    font-size: 3vmin;
     margin-top: 3vh;
-    width: 30vw;
-    background-color: rgb(199, 251, 255);
-    text-align: center;
+    width: 70vw;
+    background-color: white;
     border-radius: 1vw;
-}
-.blo{
-    padding: 3px;
-}
-.main:hover{
+    padding: 30px;
     box-shadow:  2px 1px 2px rgb(197, 197, 197);
 }
+.blo-title{
+    font-weight: 680;
+    padding: 10px;
+    text-align: center;
+    font-size: inherit;
+}
 .del{
+    display: none;
     margin-top: 3vh;
-    border-radius: 2vh;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 900;
+    border-radius: 5px;
+    background-color: red;
+    color: white;
+    font-family: 'Ubuntu', sans-serif;
+    height: fit-content;
 }
 .delete{
     border-radius: 2vh;
     padding: 0.5vw;
-    background-color: white;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 900;
+    font-family: 'Segoe UI', 'sans-serif';
+
 }
-.delete:hover{
+.del:hover{
     cursor: pointer;
-    box-shadow: 1px 2px gray;
-    transform: scale(2);
+    background-color: red;
+    transform: scale(110%);
     transition-duration: 0.5;
-    color: red;
+    color: white;
 }
-.signup{
-     align-self: center;
+.s{
+    position: fixed;
+    top: 90px;
+    width: 100%;
+    display: flex;
     justify-content: center;
-      width: 25vw;
-      height: auto;
-    margin-top: 22vh;
-    margin-left: 35vw;
-    background-color:white;
+    align-items: center;
+}
+.signup{
+      width:60%;
+      max-width: 270px;
+      height: 50vh;
+    background-color:var(--input);
+    color: var(--tc);
      display: flex;
-     border-radius: 2vw;
+     border-radius: 8px;
      padding: 2px;
-     font-family: 'Montserrat', sans-serif;
+     font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
 }
  .sign{
      padding: 2px;
       outline: none;
-    border-radius: 1vh;
-     border-color: gray;
+    border-radius: 5px;
+    border: none;
+    background-color: white;
      border-width: 1px;
-     width: 15vw;
-     height: 3.5vh;
-     color: rgb(134, 134, 134); 
-     font-size: small; 
-     font-family: 'Montserrat', sans-serif;
+     width: 90%;
+     height: 5vmin; 
+     font-family: 'Ubuntu', sans-serif;
     font-weight: bold;
     letter-spacing: 1px;
+    margin:10px 10px 20px 10px;
+    margin-bottom: 20px;
+    margin-top: 10px;
+ }
+ .sign:focus{
+     transition-duration: 0.1s;
+     border-bottom: 3px solid rgb(170, 96, 0);
  }
 .submit2{
-    justify-self: center;
-    margin-left: 5vw;
-    height: 5vh;
-    width: 5vw;
-    border-radius: 1vw;
+    margin-left: auto;
+    height: 30px;
+    width: 60px;
+    border-radius: 5px;
     outline: none;
     border: none;
     margin-top: 5px;
     margin-bottom: 5px;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 900;
+    background-color: rgb(101, 101, 255);
 
 }
 .emailerror{
diff --git a/public/partials/footer.ejs b/public/partials/footer.ejs
index d0a5968..7f0878f 100644
--- a/public/partials/footer.ejs
+++ b/public/partials/footer.ejs
@@ -1,3 +1,10 @@
-<div class="footer">
-    <p class = "copyright">&copy Srijan Majumdar</p>
+<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
+<div class="container">
+<span class="mode" onclick="toggle()">
+    <i class='fas fa-moon ' id="light"></i>
+    <i class='fas fa-sun' id="dark"></i>
+</span>
+<div class="footer copyright">
+        &copy Srijan Majumdar
+</div>
 </div>
\ No newline at end of file
diff --git a/public/partials/navbar.ejs b/public/partials/navbar.ejs
index 06713c4..f0c34f8 100644
--- a/public/partials/navbar.ejs
+++ b/public/partials/navbar.ejs
@@ -1,7 +1,14 @@
 <div class="navbar">
+    <div class="nav1">
     <div class= "top"><a class = "nav" href="/">HOME</a></div>
     <div class= "top"><a class = "nav" href="/about">ABOUT</a></div>
     <div class= "top"><a class = "nav" href="/blogs">BLOGS</a></div>
+    </div>
+    <buttom class="hamburger" id="hamburger" onclick="menubar()">
+        <span class="icon">
+            <i class='fas fa-bars'></i>
+        </span>
+    </buttom>
     <div class = "nav2">
           <% if(user){%>
     <div class= "top1">Welcome <%= user.email %></div>
@@ -11,4 +18,24 @@
     <div class= "top"><a class = "nav" href="/login">LOGIN</a></div>
     <%}%>
     </div>
-</div>
\ No newline at end of file
+</div>
+<div class="navbar" id="ham-item">
+    <div>
+        <% if(user){%>
+  <div class= "top1" style="width: 100vw;">Welcome <%= user.email %></div>
+  <div class= "top" style="width: 100vw;"><a class = "nav" href="/logout">LOGOUT</a></div>
+  <%}else{%>
+  <div class= "top" style="width: 100vw;"><a class = "nav" href="/signup">SIGN UP</a></div>
+  <div class= "top" style="width: 100vw;"><a class = "nav" href="/login">LOGIN</a></div>
+  <%}%>
+  </div>
+</div>
+<script>
+    const st=document.getElementById('ham-item');
+    function menubar(){
+        if(window.getComputedStyle(st).getPropertyValue('display')=='none')
+            st.style='display:block;';
+        else
+            st.style='display:none;';
+    }
+</script>
\ No newline at end of file
diff --git a/public/partials/script.ejs b/public/partials/script.ejs
new file mode 100644
index 0000000..a64d564
--- /dev/null
+++ b/public/partials/script.ejs
@@ -0,0 +1,25 @@
+<script>
+    if(document.cookie=="")
+        document.cookie="light";
+    function toggle(){
+        if(document.cookie=="light")
+            document.cookie="dakr";
+        else
+            document.cookie="light";
+        document. location. reload()
+    }
+    console.log(document.cookie);
+    tr=document.querySelector(':root');
+    if(document.cookie=="light"){
+        tr.style.setProperty('--back','rgb(221, 254, 255)');
+        tr.style.setProperty('--secondback','rgb(188, 253, 250)');
+        tr.style.setProperty('--titles','rgb(50, 197, 207)');
+        tr.style.setProperty('--tc','black');
+        tr.style.setProperty('--content','rgb(131, 224, 224)');
+        tr.style.setProperty('--button','#121212');
+        tr.style.setProperty('--input','rgb(188, 253, 250)');
+        document.getElementById('dark').style='display:none;';
+    }
+    else
+        document.getElementById('light').style='display:none;';
+</script>
\ No newline at end of file
diff --git a/views/404.ejs b/views/404.ejs
index 4fd294e..3183854 100644
--- a/views/404.ejs
+++ b/views/404.ejs
@@ -10,5 +10,6 @@
            <p>Oops! Could not find that page.</p>
         </div>
         <%- include('../public/partials/footer') %>
+        <%- include('../public/partials/script') %>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/about.ejs b/views/about.ejs
index f2c7a5c..baaaf64 100644
--- a/views/about.ejs
+++ b/views/about.ejs
@@ -15,5 +15,6 @@
             </p>
         </div>
         <%- include('../public/partials/footer') %>
+        <%- include('../public/partials/script') %>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/create.ejs b/views/create.ejs
index 3a77fb6..2d905dd 100644
--- a/views/create.ejs
+++ b/views/create.ejs
@@ -6,20 +6,44 @@
       <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
         <title><%= title%></title>
         <link rel="stylesheet" href="/Styles.css">
-    </head>
+        <script src="https://cdn.tiny.cloud/1/qkdqmlly0fvfgkb5ntqofqke7mynu27gcfzvetmgm2ktzvwi/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+        </head>
+        <script>
+          console.log(document.cookie);
+          if(document.cookie=="")
+            document.cookie="light";
+          if(document.cookie=='light')
+            theme='oxide';
+          else
+            theme='oxide-dark';
+            
+            tinymce.init({
+              selector: '#main',
+              content_css:document.cookie,
+              skin:theme,
+              plugins: 'casechange table link quickbars',
+              toolbar: 'fontselect fontsizeselect | bold italic underline | quicklink blockquote casechange',
+              toolbar_mode: 'floating',
+              branding:false,
+              elementpath:false,
+              width : "1076"
+            });
+        </script>
+      </head>
     <body>
         <%- include('../public/partials/navbar') %>
           <form class = "form" action="/blogs" method = "POST">
             <label class="input-div">Blog title</label>
               <div >
-                <textarea class = "input"type="text" id = "title" name="title" required></textarea>
+                <input class = "input"type="text" id = "title" name="title" required></textarea>
               </div>
               <label class="input-div">Blog Description</label>
-              <div >
+              <div class="textedit">
                 <textarea class = "input1"type="text" id = "main" name="main" required></textarea>
               </div>
               <button class = "submit">Submit</button>
          </form>
-        <%- include('../public/partials/footer') %>
+         <%- include('../public/partials/footer') %>
+        <%- include('../public/partials/script') %>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/details.ejs b/views/details.ejs
index 3193427..8a030b4 100644
--- a/views/details.ejs
+++ b/views/details.ejs
@@ -4,6 +4,7 @@
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <title><%= title%></title>
         <link rel="stylesheet" href="/Styles.css">
     </head>
@@ -11,10 +12,13 @@
         <%- include('../public/partials/navbar') %>
         <div class="detail">
             <div class = "main">
-                <p class = "blo"><%=data.main%></p>
+                <h1><p class="blo-title"><%=data.title%></p></h1>
+                <%-data.main%>
             </div>
             <div class = "del">
-                 <a class = "delete" data-doc="<%= data._id%>">Delete</a>
+                 <a class = "delete" data-doc="<%= data._id%>">
+                     <i class="material-icons" style="font-size: 7vmin;">delete</i>
+                </a>
             </div>
         </div>
         <%- include('../public/partials/footer') %>
@@ -29,5 +33,6 @@
                 .catch((err)=>{console.log(err);})
             })
         </script>
+        <%- include('../public/partials/script') %>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 3e1bcda..ffc0a8a 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -6,15 +6,23 @@
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
         <title><%= title%></title>
         <link rel="stylesheet" href="/Styles.css">
+        <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
     </head>
     <body>
         <%- include('../public/partials/navbar') %>
-        <div class = "wel">
-            <p class = "welcome">Welcome User</p>
-        </div>
-        <div >
-            <button class="create" onclick="window.location.href='/create';">Create Blog</button>
+        <div class="main-home">
+            <div class = "wel">
+                <p class = "welcome">
+                <span class="text1">Welcome User</span><br>
+                <span class="text2">Start a New Blog</span>
+                </p>
+            </div>
+            <div class="create-home">
+                <button onclick="window.location.href='/create';">Create Blog</button>
+                <button onclick="window.location.href='/blogs';">View Blogs</button>
+            </div>
         </div>
         <%- include('../public/partials/footer') %>
+        <%- include('../public/partials/script') %>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/login.ejs b/views/login.ejs
index f8ae518..88305f0 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -9,18 +9,20 @@
     </head>
     <body>
         <%- include('../public/partials/navbar') %>
+        <div class="s">
         <div class="signup">
             <form autocomplete="off">
-                <h2>Login</h2>
-                <div><label for = "email">Email</label></div>
+                <h2 style="margin-left:10px ;margin-top: 30px;">Login</h2>
+                <div style="margin-left:10px ;"><label for = "email">Email</label></div>
                 <input type="text" name="email" class = "sign" autocomplete="off">
-                <div class="emailerror"></div>
-                <div><label for = "password">Password</label></div>
+                <div class="emailerror" ></div>
+                <div style="margin-left:10px ;"><label for = "password">Password</label></div>
                 <input type="password" name="password" class = "sign" autocomplete="off">
                 <div class="passworderror"></div>
-                <button class = "submit2">Submit</button>
+                <button class = "submit2" style="margin-left:10px ;">Submit</button>
             </form>
         </div>
+    </div>
         <%- include('../public/partials/footer') %>
 
         <script>
@@ -56,5 +58,6 @@
                 
             })
         </script>
+        <%- include('../public/partials/script') %>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/signup.ejs b/views/signup.ejs
index 0927d49..5940bda 100644
--- a/views/signup.ejs
+++ b/views/signup.ejs
@@ -9,18 +9,20 @@
     </head>
     <body>
         <%- include('../public/partials/navbar') %>
+        <div class="s">
         <div class="signup">
             <form autocomplete="off">
-                <h2>Sign Up</h2>
-                <div><label for = "email">Email</label></div>
+                <h2 style="margin-top: 30px; margin-left: 10px;">Sign Up</h2>
+                <div style="margin-left: 10px;"><label for = "email">Email</label></div>
                 <input type="text" name="email" class = "sign" autocomplete="off" >
                 <div class="emailerror"></div>
-                <div><label for = "password">Password</label></div>
+                <div style="margin-left: 10px;"><label for = "password" >Password</label></div>
                 <input type="password" name="password" class = "sign"autocomplete="off" >
                 <div class="passworderror"></div>
-                <button class = "submit2">Submit</button>
+                <button class = "submit2" style="margin-left: 10px;">Submit</button>
             </form>
         </div>
+        </div>
         <%- include('../public/partials/footer') %>
 
         <script>
@@ -55,5 +57,6 @@
                 
             })
         </script>
+        <%- include('../public/partials/script') %>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/view-blogs.ejs b/views/view-blogs.ejs
index 8be04ba..f6029c1 100644
--- a/views/view-blogs.ejs
+++ b/views/view-blogs.ejs
@@ -6,18 +6,38 @@
         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
         <title><%= title%></title>
         <link rel="stylesheet" href="/Styles.css">
+        <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
     </head>
     <body>
         <%- include('../public/partials/navbar') %>
-       <div >
+       <div class="blog-container">
+        
         <%if(data.length>0){ %> 
+            <div class="create-div">
+                <button class="create" onclick="window.location.href='/create';">
+                    <i class='fas fa-plus-circle' style='font-size:14vmin;'></i>
+                </button>
+            </div>
             <%data.forEach(data=>{%>
-                <div class="blog-contents"><ul><li><a class ="nav" href='/blogs/<%= data._id%>'><%= data.title %></a></li></ul></div>
+                <div class="blogg">
+                <a class ="nav" href='/blogs/<%= data._id%>'>
+                <div class="title">
+                    <%= data.title %>
+                </div>
+                </a>
+                <div class="blog-contents">
+                    <div class="content">
+                        <%- data.main %>
+                    </div>   
+                    ...
+                </div>
+            </div>
             <%})%> 
         <%}else{%>
             <p class="empty-contents">No Blogs to Display !</p>
        <% }%>
        </div>
-        <%- include('../public/partials/footer') %>
-    </body>
+    
+       <%- include('../public/partials/footer') %>
+       <%- include('../public/partials/script') %>
 </html>
\ No newline at end of file