diff --git a/src/app/components/navigation/navigation.component.html b/src/app/components/navigation/navigation.component.html
index 9b27688..38e4bb6 100644
--- a/src/app/components/navigation/navigation.component.html
+++ b/src/app/components/navigation/navigation.component.html
@@ -25,4 +25,4 @@
       </li>-->
     </ul>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/components/newsletter-card/newsletter-card.component.html b/src/app/components/newsletter-card/newsletter-card.component.html
index f89d6d4..dc8d29b 100644
--- a/src/app/components/newsletter-card/newsletter-card.component.html
+++ b/src/app/components/newsletter-card/newsletter-card.component.html
@@ -1,27 +1,26 @@
 <div class="top-middle-container">
-  <div class="fullwidth-top-middle-box">
-    <div class="top-middle-content">
-      <a class="preview" routerLink="/home">
-        <div class="background-image"></div>
-        <div class="main-text">
-          <div class="featured-text">Get the best new products in angular world right in your inbox, every day</div>
-          <span class="text-base">Angular Hunt Daily Digest, Wednesday</span>
-        </div>
-      </a>
-      <div class="cta">
-        <!--<span class="bold-text">Get the best new products in your inbox, every day
+    <div class="fullwidth-top-middle-box">
+        <div class="top-middle-content">
+            <a class="preview" routerLink="/home">
+                <div class="background-image"></div>
+                <div class="main-text">
+                    <div class="featured-text">Get the best new products in angular world right in your inbox, every day</div>
+                    <span class="text-base">Angular Hunt Daily Digest, Wednesday</span>
+                </div>
+            </a>
+            <div class="cta">
+                <!--<span class="bold-text">Get the best new products in your inbox, every day
                       <img draggable="false" class="emoji" alt="👉" src="https://twemoji.maxcdn.com/36x36/1f449.png">
                     </span>-->
-        <form class="form_2">
-          <div class="fieldWrap">
-            <input #email class="field_base" data-test="newsletter-subscribe-input" 
-              placeholder="Your email" name="email" type="email">
-          </div>
-          <button (click)="onSubscribe(email.value)" class="button_mediumSize" data-test="newsletter-subscribe-button">
-            <div class="buttonContainer">Subscribe</div>
-          </button>
-        </form>
-      </div>
+                <form class="form_2">
+                    <div class="fieldWrap">
+                        <input #email class="field_base" data-test="newsletter-subscribe-input" placeholder="Your email" name="email" type="email">
+                    </div>
+                    <button (click)="onSubscribe(email.value)" class="button_mediumSize" data-test="newsletter-subscribe-button">
+                        <div class="buttonContainer">Subscribe</div>
+                    </button>
+                </form>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html
index 5edb9ec..e3f3b6a 100644
--- a/src/app/components/project-card/project-card.component.html
+++ b/src/app/components/project-card/project-card.component.html
@@ -3,11 +3,8 @@
     <img [src]="project.image_url" style="object-fit: cover; object-position: center" width="80" height="80">
   </div>
   <div class="content-post-bottom">
-
     <div class="title-bottom">{{project.name}}</div>
     <div class="text-post">{{project.description | trimText}}</div>
-
-
     <div class="meta">
       <!--<div class="topic">-->
       <!--<a class="button_smallSize" title="Tech" href="/topics/tech">
@@ -27,12 +24,12 @@
           </div>
         </a>
         <button class="vote-button-ion" [class.active]="isUpvotedByCurrUser" (click)="onToggleUpvote()">
-            <i  class='ion-arrow-up-b'></i>
-            <div class="button-base"> {{ project.upvotes }} </div>
-          </button>
+          <i  class='ion-arrow-up-b'></i>
+          <div class="button-base"> {{ project.upvotes }} </div>
+        </button>
         <button class="vote-button-chat">
-            <i class="ion-chatbubble"></i>
-            <div class="button-base">&nbsp;25</div>
+          <i class="ion-chatbubble"></i>
+          <div class="button-base">&nbsp;25</div>
         </button>
       </div>
     </div>
diff --git a/src/app/components/project/project.component.css b/src/app/components/project/project.component.css
index 27c01d4..be8fe04 100644
--- a/src/app/components/project/project.component.css
+++ b/src/app/components/project/project.component.css
@@ -1,9 +1,8 @@
 .main {
   background-color: #fff;
   border: 1px solid #e8e8e8;
-  min-width: 0;
-  width:702px;
- }
+  font-size: 15px;
+}
 
 .top {
   position: relative;
@@ -19,35 +18,34 @@
 }
 
 .canvas ol {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    position: relative;
-  }
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  position: relative;
+}
 
 .canvas li {
-    height: 360px;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    margin: 0 10px 20px 0;
-  }
+  height: 360px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  margin: 0 10px 20px 0;
+}
   
-
 .container-text {
-    position: relative;
-    height: 360px;
-    width: 202.759px
+  position: relative;
+  height: 360px;
+  width: 202.759px
 }
 
 .thumbsnails {
-    margin-left: 40px !important;
-    display: -ms-flexbox !important;
-    display: flex !important; 
+  margin-left: 40px !important;
+  display: -ms-flexbox !important;
+  display: flex !important; 
 }
 
 .thumbnail_u {
@@ -57,13 +55,10 @@
   margin-right: 10px;
 }
 
-
 .timestamp {
-  bottom:  0;
   padding: 5px;
   position: absolute;
-  right: 30px;
-  text-align: right;
+  right: 280px;
 }
 
 .secondaryText-base {
@@ -161,15 +156,10 @@
   text-decoration: none!important;
 }
 
-.action-section {
-  border-top: 1px solid #e8e8e8;
-  border-bottom: 1px solid #e8e8e8;
-  padding: 20px 0;
-}
-
 .action-inner {
+  width: 80%;
+  margin: 0 auto;
   display: flex;
-  margin: 0 40px;
 }
 
 .action-section a {
@@ -179,12 +169,12 @@
 .comboButton {
   display: inline-block;
   position: relative;
-  margin: 0 10px 0 0;
+  margin: 0 25px 0 0;
 }
 
 .secondaryBoldText {
   font-weight: 600;
-  font-size: 12px;
+  font-size: 17px;
   letter-spacing: .6px;
   line-height: 16px;
   text-transform: uppercase;
@@ -193,14 +183,14 @@
 .inactiveLink {
   background: #da552f;
   display: inline-block;
-  height: 34px;
+  height: 35px;
   line-height: 34px;
   box-sizing: border-box;
   border-radius: 3px 0 0 3px;
 }
 
 .inactiveLink a {
-  padding: 0 12px;
+  padding: 0 20px;
   color: #fff;
 }
 
@@ -209,12 +199,11 @@
   border-left: 1px solid #fff;
   /*cursor: pointer;*/
   text-align: center;
-  width: 28px;
+  width: 40px;
   background: #da552f;
   color: #fff;
   display: inline-block;
-  height: 34px;
-  line-height: 34px;
+  line-height: 33px;
   box-sizing: border-box;
   margin-left: -4px;
 }
@@ -226,7 +215,7 @@
 .button_mediumSize {
   background: #fff;
   color: #000;
-  height: 34px;
+  height: 35px;
   padding: 0 13px;
   border-radius: 3px;
   border: 1px solid #e8e8e8;
@@ -236,7 +225,7 @@
   text-align: center;
   text-decoration: none!important;
   font-weight: 600;
-  font-size: 12px;
+  font-size: 17px;
   letter-spacing: .6px;
   line-height: 16px;
   text-transform: uppercase;
@@ -262,6 +251,414 @@ a {
 share-buttons {
   float: left;
   padding: 10px;
-  width: 155px;
+  width: 210px;
   padding: 0px;
-}
\ No newline at end of file
+}
+
+
+/* Comment Section CSS and its Media Queries here*/
+
+.comment-part {
+  border: 1px solid #e8e8e8;
+  margin-top: 20px;
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.wrapper {
+  padding: 0 20px;
+  border-bottom: 1px solid #e8e8e8;
+  display: flex;
+}
+
+.hunter {
+  border-right: 1px solid #e8e8e8;
+  display: flex;
+  padding: 45px 0 20px 5px;
+  position: relative;
+}
+
+.makers {
+  padding-left: 0;
+  margin-left: 20px;
+  position: relative;
+  padding: 45px 0 20px 5px;
+}
+
+.title {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: .3px;
+  line-height: 16px;
+  text-transform: uppercase;
+  color: #999;
+}
+
+.item {
+  display: flex;
+  margin-right: 20px;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.user-image-v {
+ 
+  border: 1px solid white;
+  border-radius: 50%;
+  color: white;
+  font-size: 10px;
+  font-weight: 400;
+  height: 16px;
+  width: 15px;
+  position: absolute;
+  text-align: center;
+  line-height: 16px;
+  box-sizing: border-box;
+  top: 41px;
+  left: 0px;
+}
+
+.H-hunter {
+  background: black;
+}
+
+.M-maker {
+  background: green;  
+}
+
+.comment-section {
+  padding: 20px;
+}
+
+.discussion {
+  position: relative;
+}
+
+.heading-title {
+  font-size: 15px;
+  margin: 0 0 20px;
+  font-weight: 600;
+  line-height: 18px;
+  letter-spacing: .3px;
+  text-transform: uppercase;
+  color: #999
+}
+
+.comment {
+  margin: 0 0 10px;
+}
+
+.heading {
+  display: flex;
+  align-items: center;
+  margin: 0 0 10px;
+}
+
+.user-image {
+  margin: 0 15px 0 0;
+  display: inline-flex;
+  text-align: center;
+}
+
+.user-image img {
+  border-radius: 50%;
+}
+
+.boldtext_heading {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 18px;
+  color: #000;
+  text-decoration: none;
+  letter-spacing: .3px;
+}
+
+.boldtext_heading:hover {
+  text-decoration: underline;
+}
+
+.userName_text {
+  font-weight: 700;
+  margin-left: 10px;
+  line-height: 30px;
+  font-size: 14px;
+  color: #000;
+  text-decoration: none;
+}
+
+.userName_text:hover {
+  text-decoration: underline;
+}
+
+.text_subtle_base {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #999;
+  letter-spacing: .3px;
+}
+
+.show-more-body-text {
+  line-height: 20px;
+  margin: 0 0 10px 47px;
+  font-size: 15px;
+  font-weight: 400;
+  /*white-space: pre-line;*/
+  word-wrap: break-word;
+  letter-spacing: .3px;
+}
+
+.action-secondary-buttons {
+  margin: 0 0 10px 47px;
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: .3px;
+  line-height: 16px;
+  text-transform: uppercase;
+}
+
+.upvote-action {
+  color: #999;
+}
+
+.upvote-action:hover {
+  text-decoration: underline;  
+}
+
+.facebookShare {
+  margin: 0 0 10px 20px;
+  color: #999;
+}
+
+.facebookShare:hover {
+  color:  #3b5998;
+  text-decoration: underline;
+}
+
+.twitterShare {
+  margin: 0 0 10px 20px;
+  color: #999;  
+}
+
+.twitterShare:hover {
+  color:  #55acee;
+  text-decoration: underline;
+}
+
+.action {
+  margin: 0 5px 0 0;
+}
+
+.timestamphere {
+  text-decoration: none;
+  display: inline-block;
+  color: #c9c9c9;
+  margin: 0 0 10px 20px;
+}
+
+.timestamphere:hover {
+  text-decoration: underline;
+}
+
+.show-more-comments-container {
+  width: 100%;
+  height: 46px;
+  border: 1px solid #e8e8e8;
+  margin: 0 auto 20px;
+  border-radius: 3px;
+  background: #fff;
+  color: #000;
+  padding: 0 13px;
+  font-weight: 600;
+  letter-spacing: .3px;
+  line-height: 16px;
+  font-size: 13px;
+}
+
+.show-more-comments-container:hover {
+  background: #e8e8e8;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1023px) {
+  .image-div {
+    height: 360px;
+  }
+  .image-canvas {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  .action-inner {
+    width: 90%; 
+  }
+  .action-inner main {
+    width: 33%;
+  }
+  .comboButton {
+    float: right;
+    margin: 0 8% 0 0;
+  }
+  .action-inner aside {
+    width: 66%;
+  }
+  
+  share-buttons {
+    width: 103px;
+  }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 767px) {
+  .image-div {
+    height: 360px;
+  }
+  .image-canvas {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  .headline-base {
+    font-size: 26px;
+  }
+  .tagline-heading {
+    height: 40px;
+    overflow: hidden;
+    font-size: 15px;
+  }
+  .action-section a {
+    margin: 0;
+  }
+  .action-inner {
+    width: 96%; 
+  }
+  .action-inner main {
+    width: 30%; 
+  }
+  .action-inner aside {
+    width: 70%;
+  }
+  .inactivePopoverToggle {
+    width: 25px;
+    line-height: 34px;
+  }
+  .inactiveLink a {
+    padding: 0 10px;
+  }
+  .comboButton {
+    float: right;
+    margin: 0 10% 0 0;
+  }
+  .secondaryBoldText {
+    font-size: 11px;  
+  }
+  .button_mediumSize {
+    font-size: 11px;
+    padding: 0 10px;
+  }
+  share-buttons {
+    width: 73px;
+  }
+  .remaining-text {
+    font-size: 14px;
+  }
+  .timestamphere {
+    margin: 0 0 10px 10px;
+  }
+}
+
+@media only screen and (min-width: 0) and (max-width: 480px){
+  .image-div {
+    height: 360px;
+  }
+  .image-canvas {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  .information-section {
+    margin: 30px 10px;
+  }
+  .headline-base {
+    font-size: 20px;
+  }
+  .tagline-heading {
+    height: 40px;
+    overflow: hidden;
+    font-size: 15px;
+  }
+   .action-section a {
+    margin: 0;
+  }
+  .action-inner {
+    width: 100%; 
+  }
+  .action-inner main {
+    width: 30%; 
+  }
+  .action-inner aside {
+    width: 70%;
+  }
+  .inactivePopoverToggle {
+    width: 12px;
+    line-height: 34px;
+  }
+  .inactiveLink a {
+    padding: 0 3px;
+  }
+  .comboButton {
+    float: right;
+    margin: 0 10% 0 0;
+  }
+  .secondaryBoldText {
+    font-size: 10px;  
+  }
+  .button_mediumSize {
+    font-size: 10px;
+    padding: 0 2px;
+  }
+  share-buttons {
+    width: 60px;
+  }
+  .main-icons {
+    display: none;
+  }
+  .wrapper {
+    padding: 0 10px;
+  }
+  .item {
+    margin-right: 10px;
+  }
+  .user-image {
+    margin: 0 10px 0 0;
+  }
+  .userName_text {
+    margin-left: 0;
+    font-size: 11px;
+  }
+  .remaining-text {
+    font-size: 14px;
+  }
+  .timestamphere {
+    display: none;
+  }
+  .action-secondary-buttons {
+    font-size: 12px;
+  }
+}
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
diff --git a/src/app/components/project/project.component.html b/src/app/components/project/project.component.html
index 096c64d..e87a654 100644
--- a/src/app/components/project/project.component.html
+++ b/src/app/components/project/project.component.html
@@ -3,13 +3,12 @@
     <!--Image Container Here-->
     <section class="container-gallery">
       <div class="canvas">
-        <div>
+        <div class="image-div">
           <!--Image Here-->
-          <img [src]="project.image_url" style="height: 367px; width: 700px;" />
+          <img class="image-canvas" [src]="project.image_url" />
         </div>
       </div>
     </section>
-
     <!--Featured Border-->
     <!--<div class="timestamp">
       <span class="secondaryText-base">Featured
@@ -58,10 +57,10 @@ <h2 class="tagline-heading">{{ project.description }}</h2>
     <div class="action-inner">
       <main>
         <span class="comboButton">
-            <span class="secondaryBoldText">
-              <span class="inactiveLink">
-                <a target="_blank" [href]="project.git_url">visit site</a>
-              </span>
+          <span class="secondaryBoldText">
+            <span class="inactiveLink">
+              <a target="_blank" [href]="project.git_url">visit site</a>
+            </span>
             <span class="inactivePopoverToggle" data-test="show-more">
               <i class="ion-arrow-down-b"></i>
             </span>
@@ -69,41 +68,108 @@ <h2 class="tagline-heading">{{ project.description }}</h2>
         </span>
       </main>
       <aside>
-          <share-buttons [url]="project.git_url"
-            [image]="project.image_url" 
-            [title]="project.name" 
-            [description]="project.description"
-            [tags]="productTags"
-            [linkedIn]=false
-            [tumblr]=false
-            [google]=false
-            [pinterest]=false
-            [stumbleUpOn]=false
-            [reddit]=false
-            [whatsApp]=false
-            [defaultStyle]="false">
-          </share-buttons>
-          <button class="button_mediumSize">
-            <div class="buttonContainer">
-              <span class="icon">
-                <i class="ion-android-menu"></i>
-                <i class="ion-android-add"></i>
-                <span class="collectButtonLabel">&nbsp;Save for later</span>
-              </span>
-            </div>  
-          </button>
-          <button class="button_mediumSize" 
-            [class.active]="isUpvotedByCurrUser"
-            (click)="onToggleUpvote()">
-            <div class="buttonContainer">
-              <span class="icon">
-                <i class="ion-arrow-up-b"></i>
+        <share-buttons [url]="project.git_url" [image]="project.image_url" [title]="project.name" [description]="project.description"
+          [tags]="productTags" [linkedIn]=false [tumblr]=false [google]=false [pinterest]=false [stumbleUpOn]=false [reddit]=false
+          [whatsApp]=false [defaultStyle]="false">
+        </share-buttons>
+        <button class="button_mediumSize button-add-label">
+          <div class="buttonContainer">
+            <span class="icon">
+              <i class="ion-android-menu main-icons"></i>
+              <i class="ion-android-add main-icons"></i>
+              <span class="collectButtonLabel">&nbsp;Save for later</span>
+            </span>
+          </div>  
+        </button>
+        <button class="button_mediumSize button-icon" [class.active]="isUpvotedByCurrUser" (click)="onToggleUpvote()">
+          <div class="buttonContainer">
+            <span class="icon">
+              <i class="ion-arrow-up-b"></i>
                 <span class="collectButtonLabel">&nbsp;{{ project.upvotes }}</span>
-              </span>
-            </div>  
-          </button>
+            </span>
+          </div>  
+        </button>
       </aside>
     </div>
   </section>
   <!--Project Action Section Ends heres-->
-</main>
\ No newline at end of file
+
+  <!--Discussion and Author Detail Section-->
+  <section class="comment-part">
+    <div class="wrapper">
+      <div class="hunter">
+        <span class="title">Hunter</span>
+        <div class="item">
+          <a class="link" href="/@nitishkmrk">
+            <span class="user-image">
+              <div class="container-user-image" style="height:30px;width:30px;">
+                <img height="30" src="https://ph-avatars.imgix.net/717573/original?auto=format&amp;auto=compress&amp;codec=mozjpeg&amp;cs=strip&amp;w=30&amp;h=30&amp;fit=crop" srcset="https://ph-avatars.imgix.net/717573/original?auto=format&amp;auto=compress&amp;codec=mozjpeg&amp;cs=strip&amp;w=30&amp;h=30&amp;fit=crop&amp;dpr=2 2x, https://ph-avatars.imgix.net/717573/original?auto=format&amp;auto=compress&amp;codec=mozjpeg&amp;cs=strip&amp;w=30&amp;h=30&amp;fit=crop&amp;dpr=3 3x" width="30">
+              </div>
+              <div class="user-image-v H-hunter">H</div>
+            </span>
+          </a>
+          <a class="userName_text" href="/@nitishkmrk">Nitish Kumar</a>
+        </div>
+      </div>
+      <div class="makers">
+        <span class="title">Makers</span>
+        <div class="item">
+          <a class="link" href="/@nitishkmrk">
+            <span class="user-image">
+              <div class="container-user-image" style="height:30px;width:30px;">
+                <img height="30" src="https://ph-avatars.imgix.net/717573/original?auto=format&amp;auto=compress&amp;codec=mozjpeg&amp;cs=strip&amp;w=30&amp;h=30&amp;fit=crop" srcset="https://ph-avatars.imgix.net/717573/original?auto=format&amp;auto=compress&amp;codec=mozjpeg&amp;cs=strip&amp;w=30&amp;h=30&amp;fit=crop&amp;dpr=2 2x, https://ph-avatars.imgix.net/717573/original?auto=format&amp;auto=compress&amp;codec=mozjpeg&amp;cs=strip&amp;w=30&amp;h=30&amp;fit=crop&amp;dpr=3 3x" width="30">
+              </div>
+              <div class="user-image-v M-maker">M</div>
+            </span>
+          </a>
+          <a class="userName_text" href="/@nitishkmrk">Nitish Kumar</a>
+        </div>
+      </div>
+    </div>
+    <div class="comment-section">
+      <div class="discussion">
+        <h2 class="heading-title">discussion</h2>
+        <div class="comment">
+          <div class="heading">
+            <a class="user-image" href="">
+              <img height="32" width="32" src="https://pbs.twimg.com/profile_images/719715136634765314/XKBwV5Qd.jpg">
+            </a>
+            <div>
+              <a class="boldtext_heading remaining-text" href="">Yigit Pinarbasi</a>
+              <div class="text_subtle_base remaining-text">@yigitpinarbasi . Product Designer, Design Lead @epcsht</div>
+            </div>
+          </div>
+          <div class="show-more-body-text remaining-text">
+            <span>Never say "no" to icon packs!</span>
+          </div>
+          <div class="action-secondary-buttons">
+            <a class="upvote-action">
+              <span>
+                <i class="ion-arrow-up-b action"></i>
+              </span> 27
+            </a>
+            <a class="facebookShare">
+              <span>
+                <i class="ion-social-facebook action"></i>
+              </span>
+              <span class="sharelabel">Share</span>
+            </a>
+            <a class="twitterShare">
+              <span>
+                <i class="ion-social-twitter action"></i>
+              </span>
+              <span class="share-label">tweet</span>
+            </a>
+            <a class="timestamphere">
+              <span class="action">.</span>
+              <span class="times">11 days ago</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <button class="show-more-comments-container">
+        <div class="buttonContainer">Show all comments</div>
+      </button>
+    </div>
+  </section>
+</main>
diff --git a/src/app/components/shared/header/header.component.css b/src/app/components/shared/header/header.component.css
index fea200e..3b83b3a 100644
--- a/src/app/components/shared/header/header.component.css
+++ b/src/app/components/shared/header/header.component.css
@@ -1,71 +1,68 @@
 .header {
 	background: #fff;
-    border-bottom: 1px solid #e8e8e8;
-    position: relative;
+  border-bottom: 1px solid #e8e8e8;
+  position: relative;
 }
 .constraintWidth {
-	max-width: 1100px;
 	padding: 0 15px;
-	box-sizing: border-box;
-    margin: 0 auto;
-    min-width: 320px;
-
+	box-sizing: border-box;a
+  margin: 0 auto;
 }
 .content {
 	display: -ms-flexbox;
 	display: flex;
-    padding: 15px 0;
-    position: relative;
-    height: 32px;
-    justify-content: space-between;
-    -ms-flex-pack: justify;
+  padding: 15px 0;
+  position: relative;
+  height: 32px;
+  justify-content: space-between;
+  -ms-flex-pack: justify;
 }
 
 /*---------------LEFT SIDE--------------------*/
 
 .leftside {
 	ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    display: -ms-flexbox;
-    display: flex;
+  align-items: center;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .logo {
-    margin: 0 10px 0 0;
+  margin: 0 10px 0 0;
 }
 
 .name {
 	display: block;
 	position: relative;
-    top: 1px;
-    text-decoration: none;
+  top: 1px;
+  text-decoration: none;
 }
 
 .name strong {
 	color: #da552f;
-    display: block;
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 18px;
+  display: block;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 18px;
 }
 
 .name span {
 	display: block;
-    margin-top: 2px;
-    font-size: 13px;
-    color: #999;
+  margin-top: 2px;
+  font-size: 13px;
+  color: #999;
 }
 
 /*-----------------CENTER PART----------------*/
 
 .container {
 	left: 50%;
-    margin-left: -150px;
-    position: absolute;
-    top: 16px;
-    width: 280px;
+  margin-left: -150px;
+  position: absolute;
+  top: 16px;
+  width: 280px;
 }
 
 .form {
@@ -76,64 +73,62 @@
 
 .text {
 	font-size: 14px;
-    font-weight: 400;
-    line-height: 18px;
-    color: #999;
-    margin: 0;
+  font-weight: 400;
+  line-height: 18px;
+  color: #999;
+  margin: 0;
 }
 
 .ion-ios-search {
 	fill: #999;
-    font-size: 18px;
-    left: 8px;
-    position: absolute;
-    top: 8px;
-    
+  font-size: 18px;
+  left: 8px;
+  position: absolute;
+  top: 8px;
 }
 
 .input {
-    color: #999;
-    border: 1px solid #e8e8e8;
-    border-radius: 3px;
-    background: #fff;
-    height: 25px;
-    padding: 2px 10px 0 32px;
-    width: 100%;
+  color: #999;
+  border: 1px solid #e8e8e8;
+  border-radius: 3px;
+  background: #fff;
+  height: 25px;
+  padding: 2px 10px 0 32px;
+  width: 100%;
 }
 
 /*-------------------------------RIGHT SIDE----------------------*/
 
 .rightside {
 	display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
 }
 
 .ion-ios-more {
 	text-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-pack: center;
-    justify-content: center;
-    height: 32px;
-    width: 32px;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
 }
 
 .divider {
 	color: #e8e8e8;
-    margin-left: 13px;
-    border-left: 1px solid #e8e8e8;
-    height: 13px;
-    width: 3px;
+  margin-left: 13px;
+  border-left: 1px solid #e8e8e8;
+  height: 13px;
+  width: 3px;
 }
 
 .logged-in-user-area{
-  width: 200px;
   float: left;
 }
 
@@ -145,62 +140,62 @@
 
 .login {
 	height: 30px;
-    margin-left: 5px;
-    background: #fff;
-    border-color: #e8e8e8;
-    color: #000;
-    fill: #000;
-    padding: 0 13px;
-    font-weight: 600;
-    font-size: 12px;
-    line-height: 16px;
-    text-transform: uppercase;
-    border-radius: 3px;
-    border: 1px solid transparent;
-    box-sizing: border-box;
-    outline: 0;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none !important;
-    border: 1px solid #e8e8e8;
+  margin-left: 5px;
+  background: #fff;
+  border-color: #e8e8e8;
+  color: #000;
+  fill: #000;
+  padding: 0 13px;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  text-transform: uppercase;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  outline: 0;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none !important;
+  border: 1px solid #e8e8e8;
 
 }
 
 .signup {
-  	height: 30px;
-    margin-left: 5px;
-    background: #da552f;
-    border-color: #da552f;
-    color: #fff;
-    fill: #fff;
-    padding: 0 13px;
-    border-radius: 3px;
-    border: 1px solid transparent;
-    box-sizing: border-box;
-    outline: 0;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none !important;
-    font-weight: 600;
-    font-size: 12px;
-    /*font-weight: 400;*/
-    letter-spacing: .6px;
-    line-height: 16px;
-    text-transform: uppercase;
+  height: 30px;
+  margin-left: 5px;
+  background: #da552f;
+  border-color: #da552f;
+  color: #fff;
+  fill: #fff;
+  padding: 0 13px;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  outline: 0;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none !important;
+  font-weight: 600;
+  font-size: 12px;
+  /*font-weight: 400;*/
+  letter-spacing: .6px;
+  line-height: 16px;
+  text-transform: uppercase;
 }
 
 .signup:hover {
-	background: #ea532a;
+  background: #ea532a;
   border-color: #ea532a;
   cursor: pointer;
 }
@@ -208,14 +203,14 @@
 
 .buttoncontainer {
 	-ms-flex-align: center;
-    align-items: center;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    -ms-flex-pack: center;
-    justify-content: center;
-    width: inherit;
+  align-items: center;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: inherit;
 }
 
 .overlayInactive {
@@ -223,9 +218,9 @@
 }
 
 .avatar {
-    border-radius: 50%;
-    height: 32px;
-    width: 32px;
+  border-radius: 50%;
+  height: 32px;
+  width: 32px;
 }
 
 @media only screen and (min-width: 769px) {
@@ -278,7 +273,7 @@
     top: 7px;
   }
 
-  .ion-ios-search-strong{
+  .ion-ios-search-strong {
     color: #999;
     font-size: 20px;
     height: 14px;
@@ -295,5 +290,78 @@
   }       
 }
 
+@media only screen and (max-width: 414px) {
+  /*.input {
+    width: 80%;
+    border: none;
+    font-size: 16px;
+  }*/
+  /*.menu-button {
+    border: 1px solid #e8e8e8;
+    border-top: none;
+  }*/
+  /*.menu-button-mobile {
+    list-style: none;
+  }
+  .menu-screen {
+    text-decoration: none;
+    color: black;
+    font-size: 13px;
+  }
+  .close-button {
+    border: none;
+    background-color: white;
+    font-size: 25px;
+    font-weight: 600;
+    float: right;
+    margin-top: -409px;
+  }
+  .menu-mobile {
+    padding: 20px 0px;
+  }
+  .ion-ios-search-strong {
+    padding: 0;
+    margin-top: 10px;
+    padding-left: 5px;
+  }*/
+}
+
+.boxarrow {
+  background: #fff;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+  width: 140px;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  display: none;
+}
+
+.mobile-content-mobile {
+  list-style: none;
+  font-weight: 600;
+  font-size: 11px;
+  letter-spacing: .3px;
+  line-height: 16px;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 15px 20px;
+}
+.option-mobile {
+  padding-bottom: 15px;
+}
+.small-screen {
+  color: #999;
+  text-decoration: none;
+}
+.separator-bar {
+  background: #e8e8e8;
+  border: 0;
+  height: 1px;
+  margin: -5px 0;
+}
+
+
+
 
 
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 5100ac8..91e90f8 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -48,15 +48,93 @@
     <form class="mobile-form" method="GET" action="/search/posts">
       <label class="mobile-text">
         <i class="ion-ios-search-strong"></i>
-        <!--<input autocomplete="off" class="input" data-test="search-input" name="q" placeholder="Discover your next favorite things..." value="">-->
       </label>
     </form>
     <div class="mobile-logo">
       <img src="./../../../../assets/images/logo.png" alt="product hunt icon" height="32" width="32">  
     </div>
     <div class="mobile-icon">
-      <i class="ion-ios-more-outline"></i>
+      <i class="ion-ios-more-outline">
+      </i>
+      <div class="boxarrow">
+        <ul class="mobile-content-mobile">
+          <li class="option-mobile">
+            <a class="small-screen" href="/login">Log in / Sign up</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/ask">Ask</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/collection">collection</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/live">LIVE Chats</a>
+          </li>
+          <li class="option-mobile">
+            <hr class="separator-bar">
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/apps">Apps</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/meetups">Meetups</a>
+          </li>
+          <li class="option-mobile">
+            <hr class="separator-bar">
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/about">about</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/branding">Branding</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="https://help.producthunt.com">FAQ</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="/protips">PRO TIPS</a>
+          </li>
+          <li class="option-mobile">
+            <hr class="separator-bar">
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" target="_blank" href="https://medium.com/product-hunt">Blog</a>
+          </li>
+          <li class="option-mobile">
+            <a class="small-screen" href="radio">Radio</a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
+  <!--<div>
+    <i class="ion-ios-search-strong"></i>
+    <input autocomplete="off" class="input" data-test="search-input" name="q" placeholder="Discover your next favorite things..." value="">
+    <div class="menu-button">
+      <ul class="menu-button-mobile">
+        <li class="menu-mobile">
+          <a class="menu-screen" href="/slack">Slack</a>
+        </li>
+        <li class="menu-mobile">
+          <a class="menu-screen" href="/bots">Bots</a>
+        </li>
+        <li class="menu-mobile">
+          <a class="menu-screen" href="/mac-apps">Mac Apps</a>
+        </li>
+        <li class="menu-mobile">
+          <a class="menu-screen" href="/productivity">Productivity</a>
+        </li>
+        <li class="menu-mobile">
+          <a class="menu-screen" href="/developer-tools">Developer Tools</a>
+        </li>
+        <li class="menu-mobile">
+          <a class="menu-screen" href="/emojis">Emojis</a>
+        </li>
+      </ul>
+    </div>
+    <button class="close-button">
+      <i class="ion-ios-close-empty"></i>
+    </button>
+  </div>-->
+
 </div>
-<div>
\ No newline at end of file
diff --git a/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html b/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html
index d782cfe..4dd4f14 100644
--- a/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html
+++ b/src/app/components/shared/header/profile-dropdown/profile-dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="dropdown" dropdown>
+<span class="dropdown" dropdown>
   <a class="dropdown-toggle" dropdownToggle>
     <img class="avatar" [src]="user.avatar" alt="avatar">
     <!--<i class="fa fa-user" aria-hidden="true"></i>-->
@@ -13,5 +13,4 @@
     </li>
     <li><a (click)="logout()">Logout</a></li>
   </ul>
-</div>
-
+</span>
diff --git a/src/app/components/shared/modal/modal.component.css b/src/app/components/shared/modal/modal.component.css
index 1d407b2..69fa1ca 100644
--- a/src/app/components/shared/modal/modal.component.css
+++ b/src/app/components/shared/modal/modal.component.css
@@ -398,7 +398,7 @@ hr {
   height: 50px;
   overflow: scroll;
 }
-@media (min-width: 500px) {
+/*@media (min-width: 500px) {
   .modal-dialog {
     width: 500px;
     margin: 30px auto;
@@ -410,13 +410,13 @@ hr {
   .modal-sm {
     width: 300px;
   }
-}
+}*/
 
-@media (min-width: 992px) {
+/*@media (min-width: 992px) {
   .modal-lg {
     width: 100%;
   }
-}
+}*/
 .clearfix:before,
 .clearfix:after,
 .modal-header:before,
@@ -498,3 +498,26 @@ hr {
   position: relative;
 }
 
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+  .modal-dialog {
+    width: 90vw;
+    margin: 20px 5vw;
+  }
+} 
+
+@media only screen and (min-width: 481px) and (max-width: 767px) {
+  .modal-dialog {
+    width: 90vw;
+    margin: 20px 5vw;
+  }
+} 
+
+@media only screen and (min-width: 0) and (max-width: 480px) {
+  .modal-dialog {
+    width: 96vw;
+    margin: 20px 2vw;
+  }
+} 
+
+
+
diff --git a/src/app/components/shared/modal/modal.component.html b/src/app/components/shared/modal/modal.component.html
index b8f91ca..cc65474 100644
--- a/src/app/components/shared/modal/modal.component.html
+++ b/src/app/components/shared/modal/modal.component.html
@@ -1,6 +1,6 @@
 <div bsModal #lgModal="bs-modal" class="modal fade" 
-     tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
-     aria-hidden="true" (onHidden)="closeModal()">
+  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
+  aria-hidden="true" (onHidden)="closeModal()">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
diff --git a/src/app/container/app.component.css b/src/app/container/app.component.css
index a177c1f..5d13ca0 100644
--- a/src/app/container/app.component.css
+++ b/src/app/container/app.component.css
@@ -3,7 +3,6 @@
 }	
 
 .constraintWidth-conainer-content {
-  max-width: 1100px;
   -ms-flex-flow: row nowrap;
   flex-flow: row nowrap;
   display: -ms-flexbox;
@@ -14,7 +13,6 @@
   padding: 0 15px;
   box-sizing: border-box;
   margin: 0 auto;
-  min-width: 320px;
 }
 
 @media only screen and (max-width: 768px) {
diff --git a/src/app/container/app.component.html b/src/app/container/app.component.html
index b7c26fc..c26df36 100644
--- a/src/app/container/app.component.html
+++ b/src/app/container/app.component.html
@@ -6,7 +6,7 @@
 <div class="body-part">
   <div></div>
     <div class="constraintWidth-conainer-content" 
-        style="max-width: 1100px;">
+      style="max-width: 1100px;">
     <app-navigation [topics]="topics$ | async"></app-navigation>
     <div class="main-container">
       <router-outlet></router-outlet>
diff --git a/src/app/container/project-detail-page/project-detail-page.component.css b/src/app/container/project-detail-page/project-detail-page.component.css
index e69de29..7f588d4 100644
--- a/src/app/container/project-detail-page/project-detail-page.component.css
+++ b/src/app/container/project-detail-page/project-detail-page.component.css
@@ -0,0 +1,4 @@
+
+.app-project-component {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/container/project-detail-page/project-detail-page.component.html b/src/app/container/project-detail-page/project-detail-page.component.html
index 42d7fe2..1a9de14 100644
--- a/src/app/container/project-detail-page/project-detail-page.component.html
+++ b/src/app/container/project-detail-page/project-detail-page.component.html
@@ -1,5 +1,5 @@
 <app-modal>
-  <app-project [project]="project$ | async" 
+  <app-project class="app-project-component" [project]="project$ | async" 
     (toggleUpvoteClick)="toggleUpvote($event)"
     [isUpvotedByCurrUser] = "projectId | isUpvotedByCurrentUser: (upvotedProjectIds$ | async)"
     style="margin: 0 auto;"></app-project>
diff --git a/src/styles.css b/src/styles.css
index 073e468..cf4f32d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -8,17 +8,17 @@ html {
 }
 
 body {
-	background: #f9f9f9;
-	margin: 0;
+  background: #f9f9f9;
+  margin: 0;
   min-height: 100%;
   position: relative;
 }
 
 share-buttons button {
-    width: 70px;
-    height: 35px;
-    padding: none;
-    font-size: 1.2rem;
+  width: 70px;
+  height: 35px;
+  padding: none;
+  font-size: 1.2rem;
 }
 
 share-buttons .sb-buttons .facebook button {
@@ -33,6 +33,31 @@ share-buttons .sb-buttons .twitter button {
   color: white;
 }
 
+@media only screen and (min-width: 1024px) {
+  share-buttons button {
+    width: 90px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1023px) {
+  share-buttons button {
+    width: 42px;
+  }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 767px){
+  share-buttons button {
+    width: 30px;
+  }  
+} 
+
+@media only screen and (min-width: 0) and (max-width: 480px) {
+  share-buttons button {
+    width: 24px;
+    font-size: 16px;
+  }
+}
+
 .constraintWidth-conainer-content {
   max-width: 90%;
   -ms-flex-flow: row nowrap;
diff --git a/yarn.lock b/yarn.lock
index 9e0cd2d..5050caa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -140,6 +140,10 @@
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-2.0.2.tgz#8255e29cc0276f108784c90481e3b96e6713154b"
 
+"@ngrx/store-devtools@^3.2.4":
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/@ngrx/store-devtools/-/store-devtools-3.2.4.tgz#2ce4d13bf34848a9e51ec87e3b125ed67b51e550"
+
 "@ngrx/store@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-2.2.1.tgz#316ec1e43aa5a0166e5e6e1aa2c34a4049386510"
@@ -2108,8 +2112,8 @@ firebase@^3.0.0:
     xmlhttprequest "1.8.0"
 
 firebase@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/firebase/-/firebase-3.8.0.tgz#068e680aa82b05fa53fc13cb082f3bffac49d190"
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-3.9.0.tgz#c4237f50f58eeb25081b1839d6cbf175f8f7ed9b"
   dependencies:
     dom-storage "^2.0.2"
     faye-websocket "0.9.3"
@@ -3714,6 +3718,10 @@ nested-error-stacks@^1.0.0:
   dependencies:
     inherits "~2.0.1"
 
+ng2-adsense@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ng2-adsense/-/ng2-adsense-2.2.1.tgz#36a4cb448ba0ef72d50885dc8992ccf3653a905f"
+
 ng2-sharebuttons@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ng2-sharebuttons/-/ng2-sharebuttons-2.1.0.tgz#bcec5607e6983b1b999967e9331aaebdc519f456"