diff --git a/project/ui/app.slint b/project/ui/app.slint
index 0bb5e5a..acb11a3 100644
--- a/project/ui/app.slint
+++ b/project/ui/app.slint
@@ -1,10 +1,15 @@
-import { Button, VerticalBox, HorizontalBox } from "std-widgets.slint";
+import { DatePickerPopup, Button, VerticalBox, HorizontalBox, ComboBox } from "std-widgets.slint";
 
 export component Prorater inherits Window {
     title: "Auto Spa Express - Prorater";
     width: 1024px;
     height: 720px;
 
+    in property <[string]> membership_names: ["Select One..."];
+    out property <string> current_membership;
+    out property <string> new_membership;
+    callback on_calculate();
+
     VerticalBox {
         Image {
             source: @image-url("../data/logo.png");
@@ -17,5 +22,74 @@ export component Prorater inherits Window {
             font-size: 4rem;
             horizontal-alignment: center;
         }
+
+        VerticalBox {
+            HorizontalBox {
+                VerticalBox {
+                    Text {
+                        text: "Current Membership";
+                        font-size: 1.25rem;
+                    }
+
+                    current_membership := ComboBox {
+                        model: root.membership_names;
+                        current-index: 0;
+                        selected(current-value) => {
+                            root.current_membership = current-value;
+                        }
+                    }
+                }
+
+                VerticalBox {
+                    Text {
+                        text: "New Membership";
+                        font-size: 1.25rem;
+                    }
+
+                    new_membership := ComboBox {
+                        model: root.membership_names;
+                        current-index: 0;
+                        selected(current-value) => {
+                            root.new_membership = current-value;
+                        }
+                    }
+                }
+            }
+        }
+
+        VerticalBox {
+            HorizontalBox {
+                last_billing_date := Button {
+                    text: "Last Billing Date";
+                    clicked => {
+                        date-picker.show();
+                    }
+                }
+            }
+        }
+
+        VerticalBox {
+            Button {
+                text: "Calculate";
+                clicked => {
+                    on_calculate();
+                }
+            }
+        }
+
+        date_picker := DatePickerPopup {
+            x: (root.width - self.width) / 2;
+            y: (root.height - self.height) / 2;
+            close-policy: PopupClosePolicy.no-auto-close;
+
+            accepted(date) => {
+                date_picker.close();
+                last-billing-date.text = date.month + "/" + date.day + "/" + date.year;
+            }
+
+            canceled => {
+                date-picker.close();
+            }
+        }
     }
 }