diff --git a/package.json b/package.json
index dfdaccd9..607ac546 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@fluentui/react-components": "^9.32.3",
-    "@fluentui/react-hooks": "^8.6.29",
+    "@fluentui/react-hooks": "^8.6.30",
     "@fluentui/react-icons": "^2.0.218",
     "@griffel/react": "^1.5.15",
     "@lexical/clipboard": "^0.12.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de02ac97..dd92b91e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^9.32.3
     version: 9.32.3(@types/react-dom@18.2.8)(@types/react@18.2.23)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.20.2)
   '@fluentui/react-hooks':
-    specifier: ^8.6.29
-    version: 8.6.29(@types/react@18.2.23)(react@18.2.0)
+    specifier: ^8.6.30
+    version: 8.6.30(@types/react@18.2.23)(react@18.2.0)
   '@fluentui/react-icons':
     specifier: ^2.0.218
     version: 2.0.218(react@18.2.0)
@@ -757,15 +757,15 @@ packages:
       - scheduler
     dev: false
 
-  /@fluentui/react-hooks@8.6.29(@types/react@18.2.23)(react@18.2.0):
-    resolution: {integrity: sha512-MeVevmGJtrYxdhoarrkVWE0Hs4XdzOc9A3tiOjMBIcwOvoOYOAoOELoHK/wuulPVwUn2R9Y+7JpJ6oCe4ImdJw==}
+  /@fluentui/react-hooks@8.6.30(@types/react@18.2.23)(react@18.2.0):
+    resolution: {integrity: sha512-+EhJY2+C7wbWP+36zM4llc1KGY4/XWu36BnDumoKLJdcrnGilJHHQJ3pXhvJPf2f2mc7LoasCtQDmCQ5Tfzi3A==}
     peerDependencies:
       '@types/react': '>=16.8.0 <19.0.0'
       react: '>=16.8.0 <19.0.0'
     dependencies:
       '@fluentui/react-window-provider': 2.2.15(@types/react@18.2.23)(react@18.2.0)
       '@fluentui/set-version': 8.2.11
-      '@fluentui/utilities': 8.13.18(@types/react@18.2.23)(react@18.2.0)
+      '@fluentui/utilities': 8.13.19(@types/react@18.2.23)(react@18.2.0)
       '@types/react': 18.2.23
       react: 18.2.0
       tslib: 2.6.2
@@ -1581,8 +1581,8 @@ packages:
       '@swc/helpers': 0.5.2
     dev: false
 
-  /@fluentui/utilities@8.13.18(@types/react@18.2.23)(react@18.2.0):
-    resolution: {integrity: sha512-/0rX9EzltLKwU1SS14VV7agWoOzruVTU3oagZq1QgFAvoj8qi7fNqvSX/VEeRy+0gmbsCkrEViUPkmC7drKzPg==}
+  /@fluentui/utilities@8.13.19(@types/react@18.2.23)(react@18.2.0):
+    resolution: {integrity: sha512-v0WNV6NNQKi9nLttvc6btzxX3XOVRA817fZ7zBqsV6JWQGRfyrBwhskh6TUIgANJjPejz5nk05U6rvSWNUM+FQ==}
     peerDependencies:
       '@types/react': '>=16.8.0 <19.0.0'
       react: '>=16.8.0 <19.0.0'
@@ -1954,7 +1954,7 @@ packages:
       '@swc/helpers':
         optional: true
     dependencies:
-      '@swc/counter': 0.1.1
+      '@swc/counter': 0.1.2
       '@swc/types': 0.1.5
     optionalDependencies:
       '@swc/core-darwin-arm64': 1.3.90
@@ -1969,8 +1969,8 @@ packages:
       '@swc/core-win32-x64-msvc': 1.3.90
     dev: true
 
-  /@swc/counter@0.1.1:
-    resolution: {integrity: sha512-xVRaR4u9hcYjFvcSg71Lz5Bo4//CyjAAfMxa7UsaDSYxAshflUkVJWiyVWrfxC59z2kP1IzI4/1BEpnhI9o3Mw==}
+  /@swc/counter@0.1.2:
+    resolution: {integrity: sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==}
     dev: true
 
   /@swc/helpers@0.5.2:
@@ -2172,8 +2172,8 @@ packages:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
 
-  /postcss@8.4.30:
-    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
+  /postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -2393,7 +2393,7 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.18.20
-      postcss: 8.4.30
+      postcss: 8.4.31
       rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
diff --git a/src/Components/ShopCart/Confirm.tsx b/src/Components/ShopCart/Confirm.tsx
index 38f9a850..42338230 100644
--- a/src/Components/ShopCart/Confirm.tsx
+++ b/src/Components/ShopCart/Confirm.tsx
@@ -1,9 +1,13 @@
-import { Button, Field, Textarea, makeStyles, tokens } from "@fluentui/react-components";
+import { Button, Field, Textarea, Toast, ToastBody, ToastTitle, makeStyles, tokens, useToastController } from "@fluentui/react-components";
 import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/react-components/unstable";
 import { DismissRegular } from "@fluentui/react-icons";
-import { useBoolean } from "ahooks";
+import { useBoolean, useRequest } from "ahooks";
+import { useState } from "react";
 import { ColFlex } from "~/Helpers/Styles";
+import { use500Toast } from "~/Helpers/Toast";
+import { Hub } from "~/ShopNet";
 import { DelegateDataGrid } from "../DataGrid/Delegate";
+import { useRouter } from "../Router";
 import { CartColumns } from "./Columns";
 import { useShopCart } from "./Context";
 import { ConfirmPersona } from "./Persona";
@@ -27,12 +31,43 @@ export const useStyles = makeStyles({
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.3.1
+ * @version 0.4.0
  */
 export function Confirm() {
+  const [cmt, setCmt] = useState<string>();
   const [open, { toggle }] = useBoolean();
+
+  const { List, Update } = useShopCart();
+  const { Nav } = useRouter();
   const style = useStyles();
-  const { List } = useShopCart();
+
+  const { dispatchToast } = useToastController();
+  const dispatchError = use500Toast();
+
+  const { run } = useRequest(Hub.Order.Post.New, {
+    onFinally([req], data, e) {
+      if (e)
+        dispatchError(new Error("Cannot Create Order", {
+          cause: {
+            Request: req,
+            Error: e
+          }
+        }));
+
+      dispatchToast(
+        <Toast>
+          <ToastTitle>Order Placed</ToastTitle>
+          <ToastBody>Order Id: {data}</ToastBody>
+        </Toast>,
+        { intent: "success" }
+      );
+
+      Update([]);
+      toggle();
+      Nav("History", `${data}`);
+    },
+    manual: true,
+  })
 
   return <>
     <Button appearance="primary" onClick={toggle} disabled={!List.length}>Checkout</Button>
@@ -65,10 +100,18 @@ export function Confirm() {
           <DelegateDataGrid Items={List} Columns={CartColumns} NoHeader />
 
           <Field label="Comment" size="large">
-            <Textarea />
+            <Textarea value={cmt} onChange={(_, v) => setCmt(v.value)} maxLength={1000} />
           </Field>
 
-          <Button appearance="primary" className={style.sub} disabled={!List.length}>
+          <Button
+            appearance="primary"
+            className={style.sub}
+            disabled={!List.length}
+            onClick={() => run({
+              ShopCart: List,
+              Comment: cmt
+            })}
+          >
             Submit
           </Button>
         </div>
diff --git a/src/Helpers/Toast.tsx b/src/Helpers/Toast.tsx
new file mode 100644
index 00000000..2347a0c7
--- /dev/null
+++ b/src/Helpers/Toast.tsx
@@ -0,0 +1,23 @@
+import { Toast, ToastBody, ToastTitle, useToastController } from "@fluentui/react-components";
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+export function use500Toast() {
+  const { dispatchToast } = useToastController();
+
+  return (e: Error) => {
+    dispatchToast(
+      <Toast>
+        <ToastTitle>Internal Error</ToastTitle>
+        <ToastBody subtitle="More Info, See Console">{e.message || `${e}`}</ToastBody>
+      </Toast>,
+      { intent: "error" }
+    );
+
+    console.error(e.cause);
+    throw e;
+  };
+}
diff --git a/src/ShopNet/Order/Post.ts b/src/ShopNet/Order/Post.ts
new file mode 100644
index 00000000..1018c976
--- /dev/null
+++ b/src/ShopNet/Order/Post.ts
@@ -0,0 +1,28 @@
+import { random } from "lodash-es";
+import { ICartItem } from "~/Components/ShopCart";
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+interface INew {
+  ShopCart: ICartItem[];
+  Comment?: string;
+}
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+export class OrderPost {
+  /**
+   * @author Aloento
+   * @since 0.5.0
+   * @version 0.1.0
+   */
+  public static async New(req: INew): Promise<number> {
+    return random(1, 100);
+  }
+}
diff --git a/src/ShopNet/Order/index.ts b/src/ShopNet/Order/index.ts
new file mode 100644
index 00000000..a6444282
--- /dev/null
+++ b/src/ShopNet/Order/index.ts
@@ -0,0 +1,10 @@
+import { OrderPost } from "./Post";
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+export const Order = {
+  Post: OrderPost
+}
diff --git a/src/ShopNet/index.ts b/src/ShopNet/index.ts
index 16bd9ffa..603a43d8 100644
--- a/src/ShopNet/index.ts
+++ b/src/ShopNet/index.ts
@@ -1,4 +1,5 @@
 import { Gallery } from "./Gallery";
+import { Order } from "./Order";
 import { Product } from "./Product";
 import { User } from "./User";
 
@@ -11,4 +12,5 @@ export const Hub = {
   Gallery: Gallery,
   Product: Product,
   User: User,
+  Order: Order,
 }
diff --git a/src/index.tsx b/src/index.tsx
index 8e8c1842..ed02480c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import { BrandVariants, FluentProvider, createLightTheme } from "@fluentui/react-components";
+import { BrandVariants, FluentProvider, Toaster, createLightTheme } from "@fluentui/react-components";
 import ReactDOM from "react-dom/client";
 import { Layout } from "./Components/Layout";
 import { BrowserRouter } from "./Components/Router";
@@ -31,10 +31,11 @@ const Magenta: BrandVariants = {
 
 ReactDOM.createRoot(document.getElementById("LoveOTC")!).render(
   <BrowserRouter>
-    <FluentProvider applyStylesToPortals theme={createLightTheme(Magenta)}>
+    <FluentProvider theme={createLightTheme(Magenta)}>
       <ShopCartContext>
         <Layout>
           <EShopContent />
+          <Toaster pauseOnHover />
         </Layout>
       </ShopCartContext>
     </FluentProvider>