diff --git a/src/app/components/offers-received/offers-received.component.html b/src/app/components/offers-received/offers-received.component.html
index 238240e..93a26e8 100644
--- a/src/app/components/offers-received/offers-received.component.html
+++ b/src/app/components/offers-received/offers-received.component.html
@@ -1,79 +1,60 @@
 <div *ngFor="let item of offerData">
   <div class="offerBanner">
+    <div style="padding: 5px 0 5px 10px; color: red; font-weight: bolder; font-size: 16px;"> New Offer Expires : {{item.expire | date}}</div>
     <div style="display: flex;">
-      <div style="min-width: 120px; padding: 10px;" ><img
+      <div style="min-width: 90px; padding: 10px; max-width: 90px;" ><img
               class="bg_image back_image banner_image"
               alt="{{item.title}}" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />
       </div>
       <div>
-        <div>
-          <div class="offer_title" style="padding-top: 5px;">{{item.title}}</div>
-          <div class="price">Reward : {{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div>
+        <div style="width: 100%; flex-direction: column;">
+          <div class="offer_title">{{(item.title.length > 65) ? item.title.substring(0,64)+"...": item.title }}</div>
+
           <div style="display: flex; width: 100%;">
-            <div class="expire" style="width: 70%;">Expires : {{item.expire | date}}</div>
-            <div style="text-align: right; width: 30%; padding-right: 10px;">
-              <ion-button size="small" (click)="openOfferDetail(item)" color="success" fill="solid" shape="round">View</ion-button>
+<!--            <div class="expire" style="width: 70%;">Expires : {{item.expire | date}}</div>-->
+            <div style="width: 150px;" class="price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div>
+            <div style="text-align: right; padding-left: 5px;">
+              <ion-button size="small" (click)="openOfferDetail(item)" color="secondary" fill="outline" shape="round">{{  (currOpenOffer !='' && currOpenOffer==item.offer_uid)? 'Close': 'View'}} </ion-button>
             </div>
           </div>
 
         </div>
       </div>
     </div>
-    <div *ngIf="currOpenOffer==item.offer_uid" style="background-color: white; border-radius: 10px; margin: 15px; min-height: 180px; max-height: 220px;">
-      <div class="detail_txt">
-        {{(item.job_description.length<95)? item.job_description :item.job_description.substring(0,95)+'...' }}
-      </div>
-    </div>
-    <div style="display: flex; padding: 5px; width: 100%;">
-      <div style="width: 50%;">
-        <ion-button size="small" (click)="requestReject(item)" color="danger" fill="solid" shape="round">Reject</ion-button>
-      </div>
-      <div style="width: 50%; text-align: right;">
-        <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>
-      </div>
+    <div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid" style="border-radius: 10px; margin: 15px;">
+       <div>
+        <ion-list style="font-size: 14px;">
+            <ion-item>
+                <ion-label class="bold_text ion-text-wrap">{{item.title }}</ion-label>
+            </ion-item>
+            <ion-item>
+                <ion-label  class="ion-text-wrap">{{item.description}}</ion-label>
+            </ion-item>
+            <ion-item>
+                <ion-label  class="ion-text-nowrap price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}} {{item.timeline_days}} day(s) </ion-label>
+            </ion-item>
+
+            <ion-item>
+                <ion-textarea
+                        style="height: 120px; background-color: whitesmoke; margin: 0; font-size: 14px"
+                        [autoGrow]="false"
+                        [rows]="5"
+                        value={{item.job_description}}
+                >
+                </ion-textarea>
+            </ion-item>
+            <ion-item>
+                <div style="display: flex; padding: 5px; width: 100%;">
+                    <div style="width: 50%;">
+                        <ion-button size="small" (click)="requestReject(item)" color="danger" fill="clear" shape="round">Reject</ion-button>
+                    </div>
+                    <div style="width: 50%; text-align: right;">
+                        <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>
+                    </div>
+                </div>
+            </ion-item>
+        </ion-list>
+        </div>
     </div>
   </div>
-<!--  <div class="offers_div">-->
-
-<!--    <ion-grid>-->
-<!--      <ion-row>-->
-<!--        <ion-col>-->
-<!--          <img class="offer_banner" alt="{{item.title}}" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />-->
-<!--        </ion-col>-->
-<!--        <ion-col>-->
-<!--          <div>-->
-<!--            <div class="offer_title">{{item.title}}</div>-->
-<!--            <div class="expire">Expiration : {{item.expire | date}}</div>-->
-<!--            <div class="price">Reward : {{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div>-->
-<!--          </div>-->
-
-<!--          <div class="detail_txt">-->
-<!--            {{(item.job_description.length<95)? item.job_description :item.job_description.substring(0,95)+'...' }}-->
-<!--          </div>-->
-
-
-<!--        </ion-col>-->
-<!--      </ion-row>-->
-<!--      <ion-row>-->
-<!--        <ion-col>-->
-<!--          <ion-grid class="action_area">-->
-<!--            <ion-row>-->
-<!--              <ion-col>-->
-<!--                <ion-button size="small" (click)="requestReject(item)" color="danger" fill="solid" shape="round">Reject</ion-button>-->
-<!--              </ion-col>-->
-<!--              <ion-col>-->
-
-<!--              </ion-col>-->
-<!--              <ion-col>-->
-<!--                <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>-->
-<!--              </ion-col>-->
-<!--            </ion-row>-->
-<!--          </ion-grid>-->
-
-<!--        </ion-col>-->
-<!--      </ion-row>-->
-<!--    </ion-grid>-->
-
-
-<!--  </div>-->
 </div>
diff --git a/src/app/components/offers-received/offers-received.component.scss b/src/app/components/offers-received/offers-received.component.scss
index 2b6af04..5c88dde 100644
--- a/src/app/components/offers-received/offers-received.component.scss
+++ b/src/app/components/offers-received/offers-received.component.scss
@@ -7,14 +7,23 @@
   margin-bottom: 5px;
   //display: flex;
   .offer_title{
-    font-size: 18px;
+    font-size: 16px;
     font-weight: bolder;
+    //width: 100%;
+    //display: block;
+    //white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-top: 5px;
+    height: 55px;
+   // background-color:whitesmoke;
   }
   .price{
     margin-top: 5px;
     margin-bottom: 5px;
     color:green;
     font-size: 14px;
+    font-weight: bolder;
   }
   .expire{
     font-weight: bold;