+
+ &INTEREST.
+ &TOTAL_STUDENTS_DISP. Students · &ATTENDANCE_RATE.% Attendance · &GRADUATION_RATE.% Grad
+
+
+ ```
+
+ ![Page Designer](images/edit-cards.png =40%x*)
+
+4. Click **Save and Run** page.
![Page Designer](images/run-app.png " ")
![App login screen](images/login.png =40%x*)
![App is displayed](images/first-app.png " ")
-## Task 4: Customize the Application Theme
+## Task 4: Improve the UI
+
+1. Click **Edit Page 1** from the Developer Toolbar.
+ ![App is displayed](images/edit1.png " ")
+
+2. In the Rendering Tree, select **Search**.
+
+ In the Property Editor, switch to the **Attributes** tab and enter the following:
+ - Total Row Count Label: **Schools:**
+
+ ![Page Designer](images/row-count-label.png " ")
+
+3. Under Breadcrumb Bar, select **Highschools**. In the Property Editor, enter the following:
+ - Name: **New York City**
+ - Title: **New York City**
+
+ ![Page Designer](images/breadcrumb-title.png " ")
+
+4. Under Body > Button Bar, right-click **RESET** and select **Delete**.
+
+ ![Page Designer](images/reset-del.png " ")
+
+5. Locate **P1\_ORDER\_BY** page item and drag and drop it under Button Bar.
+ ![Page Designer](images/move-order-by.png " ")
+
+6. In the Property Editor, enter/select the following:
+ - Layout > Slot: **Next**
+ - Under Appearance:
+ - Template: **Hidden**
+ - Icon: **fa-sort-amount-desc**
+
+ - Advanced > CSS Classes: **no-item-ui**
+
+ ![Page Designer](images/order-by-properties.png " ")
+ - List of Values > Static Values: Enter the following and click **OK**.
+
+ |Display Value | Return Value|
+ |---------------|------------|
+ |Total Students| TOTAL\_STUDENTS|
+ |Attendance Rate| ATTENDANCE\_RATE|
+ {: title="List of Values"}
+
+ ![Page Designer](images/lov.png " ")
+
+7. In the Rendering Tree, select **Search Results** region.
+
+ In the Property Editor, under Source, select **Order by Item** and enter the following and then click **OK**.
+ | Clause | Key | Display |
+ |--------|-----|---------|
+ | TOTAL\_STUDENTS desc| TOTAL_STUDENTS | Total Students|
+ | SCHOOL\_NAME| SCHOOL\_NAME | School Name|
+ | NEIGHBORHOOD| NEIGHBORHOOD| Neighborhood|
+ | ATTENDANCE\_RATE desc| ATTENDANCE\_RATE | Attendance Rate|
+ {: title="Order By Clauses"}
+
+ ![Page Designer](images/order-by-item.png " ")
+
+ ![Page Designer](images/clauses.png " ")
+
+8. Click **Save and Run** page.
+
+## Task 5: Customize the Application Theme
1. From the Developer Toolbar, click **Customize** and select **Theme Roller**.
![Application page in runtime](images/dev-toolbar.png " ")
-2. In the Theme Roller dialog, for Select Theme, choose **Redwood Light**. Click **Save**.
+2. In the Theme Roller dialog, enter/select the following:
+ - Select Theme: **Redwood Light**
+ - Under Redwood Options:
+ - Pillar: **Rose**
+ - Under Appearance:
+ - Header: **Dark**
+ - Navigation: **Dark**
+ - Body Header: **Dark**
+ - Custom CSS:
+ ```
+