diff --git a/src/main/resources/org/example/petshopdesktop/modelviews/sale-view.fxml b/src/main/resources/org/example/petshopdesktop/modelviews/sale-view.fxml
index 26b24418..4556d5d4 100644
--- a/src/main/resources/org/example/petshopdesktop/modelviews/sale-view.fxml
+++ b/src/main/resources/org/example/petshopdesktop/modelviews/sale-view.fxml
@@ -2,7 +2,10 @@
 
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
+<?import javafx.scene.control.ComboBox?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Separator?>
+<?import javafx.scene.control.Spinner?>
 <?import javafx.scene.control.TableColumn?>
 <?import javafx.scene.control.TableView?>
 <?import javafx.scene.control.TextField?>
@@ -18,7 +21,7 @@
    <children>
       <HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" spacing="20.0">
          <children>
-            <Label text="Sales History" textFill="#2c3e50">
+            <Label text="Sales" textFill="#2c3e50">
                <font>
                   <Font name="System Bold" size="30.0" />
                </font>
@@ -26,7 +29,7 @@
                   <Insets />
                </HBox.margin>
             </Label>
-            <Label text="(View Only)" textFill="#7f8c8d">
+            <Label fx:id="lblModeNote" text="" textFill="#7f8c8d">
                <font>
                   <Font name="System Bold" size="16.0" />
                </font>
@@ -45,12 +48,95 @@
             </Button>
          </children>
       </HBox>
-      <HBox alignment="CENTER_LEFT" prefHeight="37.0" prefWidth="727.0" spacing="10.0" style="-fx-background-color: white; -fx-background-radius: 14; -fx-border-width: 2; -fx-border-radius: 14;">
+
+      <VBox fx:id="vbCreateSale" spacing="12.0" style="-fx-background-color: #ffffff; -fx-background-radius: 12; -fx-border-color: #e6e6e6; -fx-border-radius: 12; -fx-border-width: 1;">
+         <padding>
+            <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
+         </padding>
+         <children>
+            <Label text="Create Sale" textFill="#2c3e50">
+               <font>
+                  <Font name="System Bold" size="18.0" />
+               </font>
+            </Label>
+            <HBox alignment="CENTER_LEFT" spacing="10.0">
+               <children>
+                  <ComboBox fx:id="cbProduct" prefHeight="36.0" prefWidth="360.0" promptText="Select a product" />
+                  <Spinner fx:id="spQuantity" prefHeight="36.0" prefWidth="110.0" />
+                  <Button fx:id="btnAddToCart" mnemonicParsing="false" onAction="#btnAddToCart" prefHeight="36.0" style="-fx-background-color: #FF6b6b; -fx-cursor: hand; -fx-background-radius: 8;" text="Add" textFill="WHITE">
+                     <font>
+                        <Font name="System Bold" size="13.0" />
+                     </font>
+                     <padding>
+                        <Insets bottom="8.0" left="18.0" right="18.0" top="8.0" />
+                     </padding>
+                  </Button>
+                  <Button fx:id="btnRemoveSelected" mnemonicParsing="false" onAction="#btnRemoveSelected" prefHeight="36.0" style="-fx-background-color: #34495E; -fx-cursor: hand; -fx-background-radius: 8;" text="Remove Selected" textFill="WHITE">
+                     <font>
+                        <Font name="System Bold" size="13.0" />
+                     </font>
+                     <padding>
+                        <Insets bottom="8.0" left="18.0" right="18.0" top="8.0" />
+                     </padding>
+                  </Button>
+               </children>
+            </HBox>
+            <TableView fx:id="tvCart" prefHeight="170.0" style="-fx-background-color: white; -fx-background-radius: 10;" VBox.vgrow="NEVER">
+               <columns>
+                  <TableColumn fx:id="colCartProduct" prefWidth="310.0" text="Product" />
+                  <TableColumn fx:id="colCartQty" prefWidth="90.0" text="Qty" />
+                  <TableColumn fx:id="colCartUnitPrice" prefWidth="120.0" text="Unit Price" />
+                  <TableColumn fx:id="colCartTotal" prefWidth="120.0" text="Total" />
+               </columns>
+            </TableView>
+            <Separator />
+            <HBox alignment="CENTER_LEFT" spacing="12.0">
+               <children>
+                  <Label text="Payment" textFill="#2c3e50">
+                     <font>
+                        <Font name="System Bold" size="13.0" />
+                     </font>
+                  </Label>
+                  <ComboBox fx:id="cbPaymentMethod" prefHeight="34.0" prefWidth="160.0" />
+                  <Region HBox.hgrow="ALWAYS" />
+                  <Label text="Total:" textFill="#2c3e50">
+                     <font>
+                        <Font name="System Bold" size="13.0" />
+                     </font>
+                  </Label>
+                  <Label fx:id="lblCartTotal" text="\$0.00" textFill="#2c3e50">
+                     <font>
+                        <Font name="System Bold" size="16.0" />
+                     </font>
+                  </Label>
+                  <Region prefWidth="20.0" />
+                  <Button fx:id="btnClearCart" mnemonicParsing="false" onAction="#btnClearCart" prefHeight="36.0" style="-fx-background-color: transparent; -fx-border-color: #FF6b6b; -fx-border-radius: 8; -fx-cursor: hand;" text="Clear" textFill="#FF6b6b">
+                     <font>
+                        <Font name="System Bold" size="13.0" />
+                     </font>
+                     <padding>
+                        <Insets bottom="8.0" left="18.0" right="18.0" top="8.0" />
+                     </padding>
+                  </Button>
+                  <Button fx:id="btnSaveSale" mnemonicParsing="false" onAction="#btnSaveSale" prefHeight="36.0" style="-fx-background-color: #4ECDC4; -fx-cursor: hand; -fx-background-radius: 8;" text="Save Sale" textFill="WHITE">
+                     <font>
+                        <Font name="System Bold" size="13.0" />
+                     </font>
+                     <padding>
+                        <Insets bottom="8.0" left="18.0" right="18.0" top="8.0" />
+                     </padding>
+                  </Button>
+               </children>
+            </HBox>
+         </children>
+      </VBox>
+
+      <HBox alignment="CENTER_LEFT" prefHeight="37.0" prefWidth="727.0" spacing="10.0" style="-fx-background-color: white; -fx-background-radius: 14; -fx-border-width: 1; -fx-border-radius: 14; -fx-border-color: #e6e6e6;">
          <padding>
             <Insets bottom="10.0" left="15.0" right="15.0" top="10.0" />
          </padding>
          <children>
-            <TextField fx:id="txtSearch" prefHeight="31.0" prefWidth="150.0" promptText="Search Sales History..." style="-fx-border-width: 0; -fx-background-color: transparent;" HBox.hgrow="ALWAYS">
+            <TextField fx:id="txtSearch" prefHeight="31.0" prefWidth="150.0" promptText="Search sales..." style="-fx-border-width: 0; -fx-background-color: transparent;" HBox.hgrow="ALWAYS">
                <font>
                   <Font size="15.0" />
                </font>
@@ -59,14 +145,14 @@
       </HBox>
       <TableView fx:id="tvSales" prefHeight="362.0" prefWidth="752.0" style="-fx-background-color: white; -fx-background-radius: 12;" VBox.vgrow="ALWAYS">
         <columns>
-          <TableColumn fx:id="colSaleId" prefWidth="42.28573799133301" text="ID" />
-          <TableColumn fx:id="colSaleDate" prefWidth="91.42858505249023" text="Date" />
-            <TableColumn fx:id="colCustomerName" prefWidth="146.28575134277344" text="Customer Name" />
-            <TableColumn fx:id="colServiceProduct" prefWidth="114.857177734375" text="Product/Service" />
-            <TableColumn fx:id="colSaleQuantity" prefWidth="70.85711669921875" text="Quantity" />
-            <TableColumn fx:id="colSaleUnitPrice" prefWidth="83.42855834960938" text="Unit Price" />
-            <TableColumn fx:id="colSaleTotal" prefWidth="83.4285888671875" text="Total" />
-            <TableColumn fx:id="colSalePaymentType" prefWidth="115.4285888671875" text="Payment Type" />
+          <TableColumn fx:id="colSaleId" prefWidth="50.0" text="ID" />
+          <TableColumn fx:id="colSaleDate" prefWidth="150.0" text="Date" />
+          <TableColumn fx:id="colEmployeeName" prefWidth="180.0" text="Employee" />
+          <TableColumn fx:id="colServiceProduct" prefWidth="170.0" text="Product" />
+          <TableColumn fx:id="colSaleQuantity" prefWidth="80.0" text="Qty" />
+          <TableColumn fx:id="colSaleUnitPrice" prefWidth="100.0" text="Unit Price" />
+          <TableColumn fx:id="colSaleTotal" prefWidth="100.0" text="Total" />
+          <TableColumn fx:id="colSalePaymentType" prefWidth="120.0" text="Payment" />
         </columns>
       </TableView>
    </children>