diff --git a/src/Pages/Reports/TipAmountSettlement/Settlement.jsx b/src/Pages/Reports/TipAmountSettlement/Settlement.jsx
new file mode 100644
index 0000000..b9ed493
--- /dev/null
+++ b/src/Pages/Reports/TipAmountSettlement/Settlement.jsx
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Messages } from "../../../Components/Notifications/Messages";
+import TipAmountSettlementList from "./TipAmountSettlementList";
+import EmployeeSettlement from "../EmployeeSettlement/EmployeeSettlement";
+import "./Settlement.scss"; 
+
+const Settlement = () => {
+  const [selectedComponent, setSelectedComponent] = useState("tips");
+
+  const messageType = "";
+  const messageData = [];
+  const onComplete = () => {};
+
+  return (
+    <div className="userPageTable">
+      <div className="userPageContent">
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+
+        {/* ✅ Tabs */}
+        <div className="formAddNew">
+          <div className="settlementTabs">
+            
+            <div
+              className={`tabItem ${
+                selectedComponent === "tips" ? "active" : ""
+              }`}
+              onClick={() => setSelectedComponent("tips")}
+            >
+              Tip Settlement
+            </div>
+
+            <div
+              className={`tabItem ${
+                selectedComponent === "insentive" ? "active" : ""
+              }`}
+              onClick={() => setSelectedComponent("insentive")}
+            >
+              Incentive Settlement
+            </div>
+
+          </div>
+        </div>
+
+        {/* ✅ Content */}
+        <div className="tabContent">
+          {selectedComponent === "tips" ? (
+            <TipAmountSettlementList />
+          ) : (
+            <EmployeeSettlement />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settlement;
\ No newline at end of file