diff --git a/src/app/fyle/split-expense/split-expense.page.html b/src/app/fyle/split-expense/split-expense.page.html
index 9ce083aa88..ea6bd16818 100644
--- a/src/app/fyle/split-expense/split-expense.page.html
+++ b/src/app/fyle/split-expense/split-expense.page.html
@@ -8,7 +8,7 @@
       </ion-buttons>
 
       <div class="split-expense--header-block">
-        <div class="split-expense--header-title" mode="md">Split by {{ splitExpenseHeader }}</div>
+        <div class="split-expense--header-title" mode="md">Split expense</div>
         <ion-buttons>
           <ion-button
             (click)="save()"
@@ -26,30 +26,45 @@
 </ion-header>
 
 <div class="split-expense--top-bar">
-  <app-fy-alert-info [type]="'warning'" [message]="'Split expense cannot be undone'"></app-fy-alert-info>
+  <app-fy-alert-info
+    [type]="'warning'"
+    [message]="'Split expense is a permanent action and cannot be undone.'"
+  ></app-fy-alert-info>
 
   <div class="split-expense--amount-block" *ngIf="amount">
     <div class="split-expense--amount-block__label">
-      Total:
-      <div class="split-expense--split-amount">{{ currency }} {{totalSplitAmount}}</div>
+      No.of splits
+      <div class="split-expense--split-amount">{{splitExpensesFormArray.controls.length}}</div>
     </div>
     <div class="split-expense--amount-block__label">
-      Remaining:
+      Total amount
+      <div class="split-expense--split-amount">{{ currency }} {{totalSplitAmount}}</div>
+    </div>
+    <div class="split-expense--amount-block__label split-expense--remaining-amount">
+      Remaining amount
       <div class="split-expense--split-amount">{{ currency }} {{remainingAmount }}</div>
     </div>
   </div>
+  <div *ngIf="splitExpensesFormArray.controls.length === 30" class="split-expense--error-message-block">
+    <mat-icon class="split-expense--error-icon" svgIcon="danger-fill"></mat-icon>
+    <div>Cannot have more than 30 splits for an expense.</div>
+  </div>
+  <div *ngIf="showErrorBlock" class="split-expense--error-message-block">
+    <mat-icon class="split-expense--error-icon" svgIcon="danger-fill"></mat-icon>
+    <div>{{errorMessage}}</div>
+  </div>
 </div>
 
 <ion-content>
   <div class="split-expense--container">
     <div class="split-expense--card" *ngFor="let splitExpenseForm of splitExpensesFormArray.controls; index as i">
       <div class="split-expense--card-header">
-        <p
-          class="split-expense--index"
-          [ngClass]="{'split-expense--remove': splitExpensesFormArray.controls.length > 2}"
-        >
-          SPLIT {{ i + 1 }}
-        </p>
+        <div class="split-expense--card-header-left-content">
+          <div class="split-expense--icon-container">
+            <mat-icon class="split-expense--split-count-icon" svgIcon="split"></mat-icon>
+          </div>
+          <div class="split-expense--index">Split {{ i + 1 }}</div>
+        </div>
         <mat-icon
           class="split-expense--remove-icon"
           *ngIf="splitExpensesFormArray.controls.length > 2"
@@ -78,7 +93,7 @@
           </div>
 
           <div class="split-expense--item split-expense--percentage">
-            <span class="split-expense--label">Percentage</span>
+            <span class="split-expense--label">Amount in %</span>
             <input
               inputmode="decimal"
               type="number"
@@ -90,6 +105,30 @@
           </div>
         </div>
 
+        <div class="split-expense--main-block">
+          <div
+            class="split-expense--item split-expense--date"
+            [ngClass]="{'split-expense--date-invalid': splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid}"
+          >
+            <div class="split-expense--label split-expense--date-label">Date of spend</div>
+            <span class="split-expense--mandatory">*</span>
+            <input
+              appFormatDate
+              class="split-expense--date-input date-input__format smartlook-show"
+              type="date"
+              formControlName="txn_dt"
+              [min]="minDate"
+              [max]="maxDate"
+            />
+          </div>
+          <div
+            class="split-expense--error"
+            *ngIf="splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid"
+          >
+            Please select a valid date.
+          </div>
+        </div>
+
         <div class="split-expense--main-block">
           <div class="split-expense--internal-block" *ngIf="splitType === 'categories'">
             <div *ngIf="categories$|async as categories">
@@ -152,30 +191,6 @@
               Please select a cost center.
             </div>
           </div>
-
-          <div class="split-expense--internal-block">
-            <div
-              class="split-expense--item split-expense--date"
-              [ngClass]="{'split-expense--date-invalid': splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid}"
-            >
-              <div class="split-expense--label split-expense--date-label">Date</div>
-              <span class="split-expense--mandatory">*</span>
-              <input
-                appFormatDate
-                class="split-expense--date-input date-input__format smartlook-show"
-                type="date"
-                formControlName="txn_dt"
-                [min]="minDate"
-                [max]="maxDate"
-              />
-            </div>
-            <div
-              class="split-expense--error"
-              *ngIf="splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid"
-            >
-              Please select a valid date.
-            </div>
-          </div>
         </div>
 
         <div
@@ -184,35 +199,23 @@
         ></div>
       </ng-container>
     </div>
-
-    <div class="split-expense--more-actions">
-      <div class="split-expense--add-more" *ngIf="splitExpensesFormArray.controls.length < 30" (click)="add()">
-        <mat-icon class="split-expense--add-more-icon" svgIcon="plus-square"></mat-icon>
-        <div class="text-center split-expense--add-more-label">Add Split</div>
-      </div>
-
-      <div *ngIf="splitExpensesFormArray.controls.length < 30" class="split-expense--more-actions__divider"></div>
-
-      <div class="split-expense--split-evenly" (click)="splitEvenly()">
-        <mat-icon class="split-expense--split-evenly-icon" svgIcon="split"></mat-icon>
-        <div class="text-center split-expense--split-evenly-label">Split Evenly</div>
-      </div>
-    </div>
-  </div>
-
-  <div class="split-expense--limit" *ngIf="splitExpensesFormArray.controls.length === 30">
-    <app-fy-alert-info
-      [type]="'warning'"
-      [message]="'Limit Reached: You cannot split an expense into more than 30 parts.'"
-    ></app-fy-alert-info>
   </div>
 </ion-content>
 
-<ion-footer *ngIf="showErrorBlock" class="split-expense--footer">
-  <div class="split-expense--error-container">
-    <div class="split-expense--error-message-block">
-      <mat-icon class="split-expense--error-icon" svgIcon="danger-fill"></mat-icon>
-      <p class="split-expense--error-message">{{errorMessage}}</p>
-    </div>
+<ion-footer>
+  <div class="split-expense--more-actions">
+    <button
+      class="btn-outline-secondary split-expense--add-more"
+      *ngIf="splitExpensesFormArray.controls.length < 30"
+      (click)="add()"
+    >
+      <mat-icon class="split-expense--add-more-icon" svgIcon="plus-square"></mat-icon>
+      <div class="split-expense--add-more-label">Add Split</div>
+    </button>
+
+    <button class="btn-outline-secondary split-expense--split-evenly" (click)="splitEvenly()">
+      <mat-icon class="split-expense--split-evenly-icon" svgIcon="split"></mat-icon>
+      <div class="split-expense--split-evenly-label">Split Evenly</div>
+    </button>
   </div>
 </ion-footer>
diff --git a/src/app/fyle/split-expense/split-expense.page.scss b/src/app/fyle/split-expense/split-expense.page.scss
index 327ae62e9a..31fbf3e831 100644
--- a/src/app/fyle/split-expense/split-expense.page.scss
+++ b/src/app/fyle/split-expense/split-expense.page.scss
@@ -42,7 +42,8 @@ $background-color: #fff;
 
   &--top-bar {
     background-color: $pure-white;
-    padding: 16px 16px 0 16px;
+    padding: 16px 16px 8px 16px;
+    gap: 10px;
   }
 
   &--container {
@@ -54,6 +55,7 @@ $background-color: #fff;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-bottom: 24px;
   }
 
   &--internal-block {
@@ -73,39 +75,59 @@ $background-color: #fff;
 
   &--card {
     padding: 16px;
-    margin-top: 24px;
+    margin-top: 18px;
     border-radius: 8px;
-    border: 1px solid $grey-lighter;
+    border: 1px solid $border-tertiary;
+    box-shadow: 0 0 4px 2px $shadow-xs;
   }
 
   &--card-header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+  }
+
+  &--card-header-left-content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &--icon-container {
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $off-white;
   }
 
   &--index {
     font-size: 14px;
     font-weight: 500;
-    color: $grey-light;
-    margin: 0 auto 12px;
     line-height: 18px;
   }
 
-  &--remove {
-    margin-left: 43%;
+  &--split-count-icon {
+    width: 20px;
+    height: 20px;
   }
 
   &--remove-icon {
     background: none;
-    height: 18px;
-    width: 18px;
+    color: $red;
+    height: 20px;
+    width: 20px;
   }
 
   &--amount-percentage {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    padding-bottom: 24px;
   }
 
   &--percentage {
@@ -192,97 +214,78 @@ $background-color: #fff;
   &--more-actions {
     display: flex;
     align-items: center;
-    margin: 36px 0;
-
-    &__divider {
-      width: 1px;
-      height: 18px;
-      margin: 0 20px;
-      background-color: $grey-lighter;
-      border-radius: 2px;
-    }
+    padding: 16px;
+    justify-content: space-between;
+    gap: 16px;
+    box-shadow: 0px 2px 10px 0px $shadow-lg;
   }
 
   &--add-more,
   &--split-evenly {
     display: flex;
     align-items: center;
-    color: $brand-primary;
+    justify-content: center;
+    padding: 12px 16px;
+    gap: 8px;
   }
 
   &--add-more-icon,
   &--split-evenly-icon {
     color: $brand-primary;
-    margin-right: 8px;
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
   }
 
   &--add-more-label,
   &--split-evenly-label {
-    color: $black-light;
-    font-size: 14px;
+    color: $blue-black;
+    font-size: 12px;
     line-height: 18px;
     font-weight: 500;
   }
 
-  &--primary-cta {
-    width: 100%;
-    height: 48px;
-    --border-width: 1px;
-  }
-
   &--amount-block {
     display: flex;
-    border-bottom: 1px solid $grey-lighter;
-    padding: 22px 0 20px 0;
+    padding: 12px;
+    border-radius: 8px;
+    background: $pink-gradient-light-2;
 
     &__label {
       font-size: 12px;
-      line-height: 16px;
+      line-height: 18px;
       color: $black-light;
-      font-weight: 400;
       width: 50%;
     }
   }
 
   &--split-amount {
     font-weight: 500;
-    font-size: 20px;
-    line-height: 26px;
+    font-size: 16px;
+    line-height: 20px;
     color: $blue-black;
   }
 
-  &--limit {
-    padding: 16px;
-    margin-bottom: 16px;
+  &--remaining-amount {
+    text-align: right;
   }
 
   &--error-message-block {
-    width: 100%;
-    color: $pure-white;
-    padding: 16px;
+    color: $blue-black;
+    border-radius: 4px;
+    background-color: $pale-pink;
+    font-size: 12px;
+    padding: 8px 12px;
+    line-height: 15px;
     display: flex;
     align-items: center;
-    height: 44px;
-  }
-
-  &--error-message {
-    margin: 0 !important;
-  }
-
-  &--error-container {
-    display: flex;
-    background-color: $red;
-    margin: 16px;
-    border-radius: 8px;
+    margin-top: 3px;
+    border: 1px solid $red-1;
   }
 
   &--error-icon {
-    margin-right: 10px;
-  }
-
-  &--footer {
-    background-color: $pure-white;
+    margin-right: 12px;
+    color: $red;
+    height: 18px;
+    width: 18px;
   }
 }
diff --git a/src/theme/colors.scss b/src/theme/colors.scss
index 2e304df20b..b05f6cb80d 100644
--- a/src/theme/colors.scss
+++ b/src/theme/colors.scss
@@ -45,6 +45,7 @@ $pink-shadow: #d7d7d799 !default;
 $success-bg: #e9f5ed !default;
 $black-shadow: rgba(0, 0, 0, 0.1) !default;
 $shadow-lg: rgba(44, 48, 78, 0.1);
+$shadow-xs: rgba(44, 48, 78, 0.06);
 
 $brand-primary: #ff3366 !default;
 $brand-primary-light: #fe5196 !default;
@@ -87,6 +88,7 @@ $pink-gradient: linear-gradient(162.38deg, $brand-primary 3.01%, $brand-primary-
 $pink-gradient-2: linear-gradient(97.33deg, #e1eeff 26.8%, #ffe4fb 97.18%);
 $pink-gradient-3: linear-gradient(97.33deg, #ffe4fb 26.8%, #e1eeff 97.18%);
 $pink-gradient-light: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%);
+$pink-gradient-light-2: linear-gradient(97deg, rgba(225, 238, 255, 0.5) 26.8%, rgba(255, 228, 251, 0.5) 97.18%);
 
 $light-pink: #fff2f3 !default;