diff --git a/src/App.svelte b/src/App.svelte
index 74495d8..ce27c81 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -10,7 +10,8 @@
   import Toggle from "./widgets/Toggle.svelte";
   import Anydata from "./widgets/Anydata.svelte";
 
-  //import Modal from "svelte-simple-modal";
+  import Content from "./Content.svelte";
+  import Modal from "svelte-simple-modal";
 
   import Chart from "svelte-frappe-charts";
 
@@ -705,6 +706,9 @@
       <Route path="/about">
         <Card title={"Пример графика"}>
           <Chart data={datachart} type="line" />
+          <Modal>
+            <Content />
+          </Modal>
         </Card>
       </Route>
     </div>
diff --git a/src/Content.svelte b/src/Content.svelte
new file mode 100644
index 0000000..4f729c7
--- /dev/null
+++ b/src/Content.svelte
@@ -0,0 +1,13 @@
+<!-- Content.svelte -->
+<script>
+  import { getContext } from "svelte";
+  import Surprise from "./Surprise.svelte";
+
+  const { open } = getContext("simple-modal");
+
+  const showSurprise = () => {
+    open(Surprise, { message: "It's a modal!" });
+  };
+</script>
+
+<p><button on:click={showSurprise}>Show me a surprise!</button></p>
diff --git a/src/Surprise.svelte b/src/Surprise.svelte
new file mode 100644
index 0000000..bf7ca89
--- /dev/null
+++ b/src/Surprise.svelte
@@ -0,0 +1,8 @@
+<!-- Surprise.svelte -->
+<script>
+  export let message;
+</script>
+
+<p>
+  🎉 {message} 🍾
+</p>