diff --git a/pages/hack-school/images/promises.png b/pages/hack-school/images/promises.png
new file mode 100644
index 0000000..fbee6c5
Binary files /dev/null and b/pages/hack-school/images/promises.png differ
diff --git a/pages/hack-school/js.mdx b/pages/hack-school/js.mdx
index ce84942..c6f30de 100644
--- a/pages/hack-school/js.mdx
+++ b/pages/hack-school/js.mdx
@@ -59,7 +59,7 @@ let greeting = "say Hello instead";
 if (true) {
     let greeting = "say Hello instead";
     console.log(greeting); // "say Hello instead"
-    //no error because differet scope
+    //no error because different scope
 }
 
 console.log(greeting); // "say Hi"
@@ -132,7 +132,7 @@ const organization = {
     }
 }
 ```
-**We can acess properties of an object either through the dot notaion or the bracket notation**
+**We can access properties of an object either through the dot notation or the bracket notation**
 
 Accessing properties (dot notation):
 ```javascript copy showLineNumbers
@@ -361,6 +361,8 @@ A promise has a parameter that is known as the Executor function. This function
 
 `reject`: This function is called when the asynchronous operation fails. It accepts a single argument, which is the reason (error) for the rejection.
 
+![text-formatting-example](pages/hack-school/images/promises.png)
+
 ```javascript copy showLineNumbers
 let checkLength = new Promise((resolve, reject) => {
   let sentence = "Hack is the best";
diff --git a/pages/hack-school/toggle_component.jsx b/pages/hack-school/toggle_component.tsx
similarity index 66%
rename from pages/hack-school/toggle_component.jsx
rename to pages/hack-school/toggle_component.tsx
index c170613..34f371f 100644
--- a/pages/hack-school/toggle_component.jsx
+++ b/pages/hack-school/toggle_component.tsx
@@ -1,12 +1,17 @@
 // to do: styling
 
-import React, { useState } from 'react';
 
-const ToggleCodeBlock = ({ children }) => {
+import { useState, ReactNode, FC } from 'react';
+
+interface ToggleCodeBlockProps {
+  children: ReactNode;
+}
+
+const ToggleCodeBlock: FC<ToggleCodeBlockProps> = ({ children }) => {
   const [isVisible, setIsVisible] = useState(false);
 
   const toggleVisibility = () => {
-    setIsVisible(!isVisible);
+   setIsVisible((isVisible) => !isVisible);
   };
 
   return (