diff --git a/src/app/pages/home/home.page.scss b/src/app/pages/home/home.page.scss
index fe37c47..3928bb5 100644
--- a/src/app/pages/home/home.page.scss
+++ b/src/app/pages/home/home.page.scss
@@ -260,6 +260,7 @@ ion-content {
         height: 150px;
         width: 100%;
         border-radius: 15px;
+        //background-color: #8b198e;
     }
   }
 
@@ -338,6 +339,15 @@ ion-content {
     box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     margin-bottom: 20px;
+    &.OFFERS{
+      background-color: #400741;
+      .name{
+        color: white;
+      }
+      .bg_text{
+        --background-color: white;
+      }
+    }
     &.PASTDUEJOB{
       background-color: #e0b4b4;
     }
diff --git a/src/app/pages/joboffers/joboffers.page.html b/src/app/pages/joboffers/joboffers.page.html
index 8c498dd..c9a444f 100644
--- a/src/app/pages/joboffers/joboffers.page.html
+++ b/src/app/pages/joboffers/joboffers.page.html
@@ -11,53 +11,100 @@
 
 
 <ion-content>
+    <div class="boxed_contents">
+        <div class="ion-padding">
+            <div class="flex">
+                <ion-label class="bold_text">You have {{total_offers}} Offer(s)</ion-label>
+                <!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
+            </div>
+
+            <div *ngFor="let item of myOffersData">
+                <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">Price : {{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div>
+                                </div>
+
+                                <div class="detail_txt">
+                                    {{item.job_description}}
+                                </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 class="top_banner">-->
+                <!--&lt;!&ndash;        <img class="offer_banner" alt="{{item.title}}" src="https://www.wrenchboard.com/assets/images/apps/offerslist/{{item.banner}}" />&ndash;&gt;-->
+                <!--        <img class="offer_banner" alt="{{item.title}}" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />-->
+
+                <!--      </div>-->
+                <!--      <ion-card-header>-->
+                <!--        <ion-card-title class="offer_title">{{item.title}}</ion-card-title>-->
+                <!--        <ion-card-subtitle>Expiration:{{item.expire | date}}</ion-card-subtitle>-->
+                <!--      </ion-card-header>-->
+
+                <!--      <ion-card-content>-->
+                <!--        {{item.job_description}}-->
+                <!--      </ion-card-content>-->
+
+                <!--      <ion-grid>-->
+                <!--        <ion-row>-->
+                <!--          <ion-col>-->
+                <!--            <ion-button size="small" (click)="requestReject(item)" color="danger" fill="outline">Reject</ion-button>-->
+                <!--          </ion-col>-->
+                <!--          <ion-col>-->
+
+                <!--          </ion-col>-->
+                <!--          <ion-col>-->
+                <!--            <ion-button size="small" (click)="requestStart(item)" color="success" fill="outline">Start Now</ion-button>-->
+                <!--          </ion-col>-->
+                <!--        </ion-row>-->
+                <!--      </ion-grid>-->
+
+
+            </div>
+
+
+
+        </div>
+    </div>
 <!--  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'">-->
 <!--    <div class="ion-padding">-->
 <!--      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
 <!--    </div>-->
 <!--  </div>-->
 
-  <div class="ion-padding">
-    <div class="flex">
-      <ion-label class="bold_text">You have {{total_offers}} Offer(s)</ion-label>
-<!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
-    </div>
 
-    <ion-card *ngFor="let item of myOffersData">
-      <div class="top_banner">
-<!--        <img class="offer_banner" alt="{{item.title}}" src="https://www.wrenchboard.com/assets/images/apps/offerslist/{{item.banner}}" />-->
-        <img class="offer_banner" alt="{{item.title}}" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />
-
-      </div>
-      <ion-card-header>
-        <ion-card-title class="offer_title">{{item.title}}</ion-card-title>
-        <ion-card-subtitle>Expiration:{{item.expire | date}}</ion-card-subtitle>
-      </ion-card-header>
-
-      <ion-card-content>
-        {{item.job_description}}
-      </ion-card-content>
-
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <ion-button size="small" (click)="requestReject(item)" color="danger" fill="outline">Reject</ion-button>
-          </ion-col>
-          <ion-col>
-
-          </ion-col>
-          <ion-col>
-            <ion-button size="small" (click)="requestStart(item)" color="success" fill="outline">Start Now</ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-
-
-    </ion-card>
-
-
-
-  </div>
 </ion-content>
 
 <!--<ion-footer>-->
diff --git a/src/app/pages/joboffers/joboffers.page.scss b/src/app/pages/joboffers/joboffers.page.scss
index 577688c..0f03041 100644
--- a/src/app/pages/joboffers/joboffers.page.scss
+++ b/src/app/pages/joboffers/joboffers.page.scss
@@ -1,5 +1,42 @@
 
 ion-content {
+  .offers_div{
+    background-color: aliceblue;
+    border-radius: 10px;
+    border-color: #383a3e;
+    margin: 10px 0 10px 0;
+    .offer_title{
+      font-size: 18px;
+      font-weight: bolder;
+    }
+    .action_area{
+      background-color:whitesmoke;
+    }
+    .offer_banner{
+      border-radius: 100%;
+      background-color: white;
+    }
+    .price{
+      margin-top: 5px;
+      margin-bottom: 5px;
+      color:green;
+      font-size: 14px;
+    }
+    .expire{
+      font-weight: bold;
+      color: red;
+      font-size: 10px;
+    }
+    .detail_txt{
+      font-size: 14px;
+      margin: 5px;
+      font-weight: bold;
+      background-color: white;
+      border-radius: 10px;
+      min-height: 120px;
+      padding: 3px;
+    }
+  }
   .back_image {
     width: 100%;
     height: 100px;
diff --git a/src/global.scss b/src/global.scss
index 3aa5d69..ba7e54b 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -286,4 +286,4 @@ ion-content{
     color: #8b198e;
     font-weight: bolder;
   }
-}
\ No newline at end of file
+}