diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 5ec67af2f..1db464da7 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,22 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="herotitle_font" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HtmlUnknownTarget" enabled="false" level="WARNING" enabled_by_default="false" />
   </profile>
 </component>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0cf5f10d5..039532059 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,26 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="move to mdx" />
+    <list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="feedback system">
+      <change afterPath="$PROJECT_DIR$/docs/tutorial/en/intro/overview.md" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/docs/tutorial/en/intro/whats-sern.md" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/docs/tutorial/en/intro/who-are-we.md" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/docs/tutorial/en/preparing/package-manager.md" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/docs/tutorial/langchooser.md" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/GuideFeedback/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/GuideFeedback/index.module.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/GuideFeedback/modal.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/docs/tutorial/en/intro/overview.mdx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/docs/tutorial/en/intro/whats-sern.mdx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/docs/tutorial/en/intro/who-are-we.mdx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/docs/tutorial/en/preparing/package-manager.mdx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/docs/tutorial/langchooser.mdx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/custom.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/custom.css" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -13,6 +32,14 @@
   <component name="ComposerSettings">
     <execution />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="CSS File" />
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Merge.Settings">
     <option name="BRANCH" value="master" />
   </component>
@@ -55,29 +82,30 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "Git.Branch.Popup.ShowAllRemotes": "true",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "feat/tutorial",
-    "ignore.virus.scanning.warn.message": "true",
-    "last_opened_file_path": "C:/Users/jacob/OneDrive/Desktop/Projects/sern/website",
-    "node.js.detected.package.eslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "project.structure.last.edited": "Modules",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.0",
-    "settings.editor.selected.configurable": "Errors",
-    "ts.external.directory.path": "E:\\IntelliJ IDEA 2022.1.1\\plugins\\JavaScriptLanguage\\jsLanguageServicesImpl\\external",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;Git.Branch.Popup.ShowAllRemotes&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;feat/tutorial&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/USER/Desktop/Development/mainwebsite&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Modules&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.0&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;E:\\IntelliJ IDEA 2022.1.1\\plugins\\JavaScriptLanguage\\jsLanguageServicesImpl\\external&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -161,7 +189,14 @@
       <workItem from="1673974979200" duration="2385000" />
       <workItem from="1674757791435" duration="925000" />
       <workItem from="1693943174979" duration="3494000" />
-      <workItem from="1693998900601" duration="699000" />
+      <workItem from="1693998900601" duration="4854000" />
+      <workItem from="1694013887941" duration="680000" />
+      <workItem from="1694014634755" duration="3452000" />
+      <workItem from="1694086921138" duration="3532000" />
+      <workItem from="1694095607446" duration="2640000" />
+      <workItem from="1694170854677" duration="225000" />
+      <workItem from="1694463335421" duration="56000" />
+      <workItem from="1694533500197" duration="919000" />
     </task>
     <task id="LOCAL-00001" summary="feat: remove old index.html in static/">
       <created>1660418841831</created>
@@ -392,7 +427,15 @@
       <option name="project" value="LOCAL" />
       <updated>1693999615376</updated>
     </task>
-    <option name="localTasksCounter" value="33" />
+    <task id="LOCAL-00033" summary="add title">
+      <option name="closed" value="true" />
+      <created>1693999895960</created>
+      <option name="number" value="00033" />
+      <option name="presentableId" value="LOCAL-00033" />
+      <option name="project" value="LOCAL" />
+      <updated>1693999895960</updated>
+    </task>
+    <option name="localTasksCounter" value="34" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -410,8 +453,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="fix: broken link" />
-    <MESSAGE value="chore: edit link so no new windows" />
     <MESSAGE value="chore: fix typo" />
     <MESSAGE value="feat: adding width attr" />
     <MESSAGE value="feat: adding blogs" />
@@ -435,6 +476,8 @@
     <MESSAGE value="rephrasing a bit and ropox introduction invasion" />
     <MESSAGE value="add introduction for me (im egoist)" />
     <MESSAGE value="move to mdx" />
-    <option name="LAST_COMMIT_MESSAGE" value="move to mdx" />
+    <MESSAGE value="add title" />
+    <MESSAGE value="feedback system" />
+    <option name="LAST_COMMIT_MESSAGE" value="feedback system" />
   </component>
 </project>
\ No newline at end of file
diff --git a/docs/tutorial/en/intro/overview.mdx b/docs/tutorial/en/intro/overview.md
similarity index 94%
rename from docs/tutorial/en/intro/overview.mdx
rename to docs/tutorial/en/intro/overview.md
index 228e1e2d7..a52619035 100644
--- a/docs/tutorial/en/intro/overview.mdx
+++ b/docs/tutorial/en/intro/overview.md
@@ -1,3 +1,8 @@
+---
+title: Overview
+---
+import GuideFeedback from "../../src/components/GuideFeedback";
+
 # Guide Overview
 Welcome to the sern Discord Bot Development Guide! 🚀 
 
@@ -33,3 +38,6 @@ Understand why sern, what is it and what does it solve.
 - **Conclusion** Reflect on what you've learned and your next steps in Discord bot development and sern.
 
 We're excited to embark on this journey with you. Each section is designed to build upon the previous one, so feel free to follow along step by step or jump to the topics that interest you the most. By the end of this guide, you'll have the skills and knowledge to create, deploy, and manage your own Discord bot using sern.
+
+---
+<GuideFeedback />
\ No newline at end of file
diff --git a/docs/tutorial/en/intro/whats-sern.mdx b/docs/tutorial/en/intro/whats-sern.md
similarity index 90%
rename from docs/tutorial/en/intro/whats-sern.mdx
rename to docs/tutorial/en/intro/whats-sern.md
index e0ff96c66..0f848f479 100644
--- a/docs/tutorial/en/intro/whats-sern.mdx
+++ b/docs/tutorial/en/intro/whats-sern.md
@@ -1,8 +1,7 @@
 ---
 title: What is sern?
 ---
-
-<!-- Rephrasing and title done by Ethan -->
+import GuideFeedback from "../../src/components/GuideFeedback";
 
 We're a discord bot framework. The lack of tooling in the discord.js community is apparent, and is also monolithic. You can make bots easily and concisely with our suite of tools. We're also a community. Please join [here](https://sern.dev/discord)!  
 
@@ -21,3 +20,6 @@ sern tries to solve all these problems. This tutorial is for anyone and everyone
 - from my personal experience, the community feels pretentious and mean.
 - discord.js discord chat feels pretentious and unwelcome to beginners.
 - From community plugins to container, swap out tooling and things with ease. 
+
+---
+<GuideFeedback />
\ No newline at end of file
diff --git a/docs/tutorial/en/intro/who-are-we.mdx b/docs/tutorial/en/intro/who-are-we.md
similarity index 78%
rename from docs/tutorial/en/intro/who-are-we.mdx
rename to docs/tutorial/en/intro/who-are-we.md
index 5f36b6334..215ff47cf 100644
--- a/docs/tutorial/en/intro/who-are-we.mdx
+++ b/docs/tutorial/en/intro/who-are-we.md
@@ -1,9 +1,10 @@
 ---
 title: Who are we?
 ---
+import GuideFeedback from "../../src/components/GuideFeedback";
 
 Who are we?
-Meet the passionate minds behind sern, working tirelessly to make your Discord bot development experience exceptional. Whether we're coding, designing, or building infrastructure, our common goal is to provide you the neccecities and bring your bot ideas to life. No matter who writes what, we're all in this together, dedicated to providing the best possible guidance and support as you explore the world of sern. Your success is our success, and we're excited to be part of your Discord bot development journey. Let's create amazing bots together!
+Meet the passionate minds behind sern, working tirelessly to make your Discord bot development experience exceptional. Whether we're coding, designing, or building infrastructure, our common goal is to provide you the neccecities and bring your bot ideas to life.
 
 # serendipity
 
@@ -22,4 +23,7 @@ Hey there, I'm ropox! 👋
 
 I'm not just a programmer; I'm one of the passionate maintainers of the sern framework. My mission is to demystify Discord bot development and ensure it's accessible to everyone. But that's not all – I wear multiple hats, including design (i designed the logo) and infrastructure 
 
-some say [I'm the coolest of all](/blog/newlogo#ropox-thing)
\ No newline at end of file
+some say [I'm the coolest of all](/blog/newlogo#ropox-thing)
+
+---
+<GuideFeedback />
\ No newline at end of file
diff --git a/docs/tutorial/en/preparing/package-manager.mdx b/docs/tutorial/en/preparing/package-manager.md
similarity index 82%
rename from docs/tutorial/en/preparing/package-manager.mdx
rename to docs/tutorial/en/preparing/package-manager.md
index 1fe49a136..cca932134 100644
--- a/docs/tutorial/en/preparing/package-manager.mdx
+++ b/docs/tutorial/en/preparing/package-manager.md
@@ -1,6 +1,7 @@
 ---
 title: Choosing a package manager
 ---
+import GuideFeedback from "../../src/components/GuideFeedback";
 
 <!-- Rephrasing and title done by Ethan -->
 
@@ -17,4 +18,7 @@ For this tutorial, we'll be using **[Yarn](https://yarnpkg.com)**. It's made by
 1. **Performance:** Yarn is fast and has efficient dependency management.
 2. **Lockfile:** Yarn's `yarn.lock` file ensures deterministic builds, crucial for collaboration.
 3. **Offline Mode:** Yarn offers a reliable offline mode, ideal for environments with limited internet access.
-4. **Plug-n-play:** Yarn Berry (2) introduces "plug-n-play" (PnP), reducing disk space usage.
\ No newline at end of file
+5. **Plug-n-play:** Yarn Berry (2) introduces "plug-n-play" (PnP), reducing disk space usage.
+
+---
+<GuideFeedback />
\ No newline at end of file
diff --git a/docs/tutorial/langchooser.md b/docs/tutorial/langchooser.md
new file mode 100644
index 000000000..97d71414f
--- /dev/null
+++ b/docs/tutorial/langchooser.md
@@ -0,0 +1,13 @@
+---
+title: Choose your language
+---
+
+import GuideFeedback from "../../src/components/GuideFeedback";
+
+Choose your language:
+- [English](./en/intro/whats-sern)
+- [Español](./es)
+- [Turkish](./tr)
+
+---
+<GuideFeedback />
\ No newline at end of file
diff --git a/docs/tutorial/langchooser.mdx b/docs/tutorial/langchooser.mdx
deleted file mode 100644
index 7828ee3d7..000000000
--- a/docs/tutorial/langchooser.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-# Welcome!
-
-Choose your language:
-- [en](./en/intro/whats-sern)
-- [es (WIP)](./es)
-- [tr (WIP)](./tr)
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4f175da41..dbf90c70a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,13 @@
         "@docusaurus/preset-classic": "^2.4.0",
         "@docusaurus/theme-search-algolia": "^2.4.0",
         "@mdx-js/react": "^1.6.22",
-        "clsx": "^1.2.1",
+        "axios": "^1.5.0",
         "jsdoc-parse-plus": "^1.3.0",
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-modal": "^3.16.1",
+        "react-turnstile": "^1.1.1"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "2.0.0-rc.1",
@@ -2010,11 +2012,11 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2032,6 +2034,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/@babel/template": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
@@ -4253,6 +4260,11 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -4294,11 +4306,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
-      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
       "dependencies": {
-        "follow-redirects": "^1.14.7"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "node_modules/babel-loader": {
@@ -4991,6 +5005,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
@@ -5727,6 +5752,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6194,6 +6227,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -6619,6 +6657,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9719,6 +9770,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -10064,6 +10120,24 @@
         "webpack": ">=4.41.1 || 5.x"
       }
     },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-router": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
@@ -10128,6 +10202,15 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-turnstile": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-turnstile/-/react-turnstile-1.1.1.tgz",
+      "integrity": "sha512-oUxMFUKmYm655yqbGDreqshyMtzgNdpmeKprRGpEzsTfhE1lXO0MmSBpiRS+6TxXYxLEipwnS7vR9Q88dbeHWg==",
+      "peerDependencies": {
+        "react": ">= 17.0.0",
+        "react-dom": ">= 17.0.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -12468,6 +12551,22 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/wait-on/node_modules/axios": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
+      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "dependencies": {
+        "follow-redirects": "^1.14.7"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -14473,11 +14572,18 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "@babel/runtime": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+        }
       }
     },
     "@babel/runtime-corejs3": {
@@ -16245,6 +16351,11 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -16264,11 +16375,13 @@
       }
     },
     "axios": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
-      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
       "requires": {
-        "follow-redirects": "^1.14.7"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "babel-loader": {
@@ -16757,6 +16870,14 @@
       "resolved": "https://registry.npmjs.org/combine-promises/-/combine-promises-1.1.0.tgz",
       "integrity": "sha512-ZI9jvcLDxqwaXEixOhArm3r7ReIivsXkpbyEWyeOhzz1QS0iSgBPnWvEqvIQtYyamGCYA88gFhmUrs9hrrQ0pg=="
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "comma-separated-tokens": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
@@ -17260,6 +17381,11 @@
         "slash": "^3.0.0"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -17600,6 +17726,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -17926,6 +18057,16 @@
         }
       }
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -20074,6 +20215,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -20332,6 +20478,17 @@
         "@babel/runtime": "^7.10.3"
       }
     },
+    "react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-router": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
@@ -20380,6 +20537,12 @@
         "use-latest": "^1.2.1"
       }
     },
+    "react-turnstile": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-turnstile/-/react-turnstile-1.1.1.tgz",
+      "integrity": "sha512-oUxMFUKmYm655yqbGDreqshyMtzgNdpmeKprRGpEzsTfhE1lXO0MmSBpiRS+6TxXYxLEipwnS7vR9Q88dbeHWg==",
+      "requires": {}
+    },
     "readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -22056,6 +22219,24 @@
         "lodash": "^4.17.21",
         "minimist": "^1.2.5",
         "rxjs": "^7.5.4"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.25.0",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
+          "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+          "requires": {
+            "follow-redirects": "^1.14.7"
+          }
+        }
+      }
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
       }
     },
     "watchpack": {
diff --git a/package.json b/package.json
index ecff52b00..687edee99 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,13 @@
     "@docusaurus/preset-classic": "^2.4.0",
     "@docusaurus/theme-search-algolia": "^2.4.0",
     "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
+    "axios": "^1.5.0",
     "jsdoc-parse-plus": "^1.3.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-modal": "^3.16.1",
+    "react-turnstile": "^1.1.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.0-rc.1",
diff --git a/src/components/GuideFeedback/index.js b/src/components/GuideFeedback/index.js
new file mode 100644
index 000000000..a3b6e2918
--- /dev/null
+++ b/src/components/GuideFeedback/index.js
@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import styles from "./index.module.css";
+import Modal from 'react-modal';
+import Turnstile from "react-turnstile";
+
+const customStyles = {
+    content: {
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      transform: 'translate(-50%, -50%)',
+      backgroundColor: 'var(--ifm-background-color)',
+      width: '60vw',
+      height: '60vh',
+      overflow: 'hidden',
+    },
+    feedbackBox: {
+        width: '100%',
+        height: '65%',
+        resize: 'none'
+    }
+};
+
+export default function GuideFeedback() {
+    const [feedback, setFeedback] = useState('');
+    const [inputText, setInputText] = useState('');
+    const [modalIsOpen, setModalIsOpen] = useState(false);
+    const [isSubmitted, setSubmitted] = useState(false);
+    const [turnstileToken, setTurnstileToken] = useState('');
+    const handleFeedbackChange = (e) => {
+        setInputText(e.target.value);
+    };
+    const handleSubmit = () => {
+        if (!turnstileToken) return
+        fetch("https://automata.srizan.dev/tutorial/feedback", {
+            method: "POST",
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ 
+              inputText, 
+              feedback,
+              turnstileToken,
+              // route trimming (removing /docs/tutorial/) is done from automata (backend)
+              route: window.location.pathname
+            }),
+            mode: 'cors'
+        }).then(() => {
+            closeModal();
+            setSubmitted(true)
+        }).catch((e) => {
+            closeModal();
+            alert('Well, that didn\'t work! Try again later. If it\'s urgent join https://sern.dev/discord :)')
+            console.error(e)
+        })
+    };
+    const openModal = () => {
+        setModalIsOpen(true);
+    };
+    const closeModal = () => {
+        setModalIsOpen(false);
+    };
+    return (
+      <div>
+        <Modal
+          isOpen={modalIsOpen}
+          onRequestClose={closeModal}
+          style={customStyles}
+          contentLabel="Example Modal"
+          ariaHideApp={false}
+        >
+          <h1>
+            {feedback === "up"
+              ? "Thank you!"
+              : "Sorry you didn't like it! Can you help us improve?"}
+          </h1>
+          <textarea
+            style={customStyles.feedbackBox}
+            value={inputText}
+            onChange={handleFeedbackChange}
+            placeholder="If you have any more feedback, please let us know! (optional)"
+          />
+          <div style={{ display: 'flex' }}>
+          <Turnstile
+            sitekey={
+              "0x4AAAAAAAJ518xa-S0l-saQ"
+            }
+            onVerify={(token) => {
+              setTurnstileToken(token);
+            }}
+            
+            theme={
+              window
+                .getComputedStyle(document.body)
+                .getPropertyValue("--ifm-color-primary") === "#ae2a55"
+                ? "light"
+                : "dark"
+            }
+            style={{
+                width: '270px',
+                height: '63px'
+            }} />
+          <button
+            onClick={handleSubmit}
+            style={{
+              marginLeft: "auto",
+              order: 2,
+              height: "10vh",
+              width: "30%",
+              backgroundColor: "var(--ifm-color-primary)",
+            }}
+          >
+            Submit
+          </button>
+          </div>
+        </Modal>
+        <div className={styles.inline}>
+          <p
+            className={styles.thumbsUpButton}
+            onClick={() => {
+              if (!isSubmitted) openModal();
+              setFeedback("up");
+            }}
+          >
+            👍
+          </p>
+          <p
+            className={styles.thumbsDownButton}
+            onClick={() => {
+              if (!isSubmitted) openModal();
+              setFeedback("down");
+            }}
+          >
+            👎
+          </p>
+        </div>
+      </div>
+    );
+}
+
+// tf did u do seren :
+
diff --git a/src/components/GuideFeedback/index.module.css b/src/components/GuideFeedback/index.module.css
new file mode 100644
index 000000000..4b454d8ee
--- /dev/null
+++ b/src/components/GuideFeedback/index.module.css
@@ -0,0 +1,26 @@
+.inline {
+    display: flex;
+    justify-content: left;
+}
+
+.thumbsUpButton, .thumbsDownButton {
+    border: none;
+    padding-top: 10px;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    font-size: 15px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+}
+
+.thumbsUpButton {
+    background-color: var(--ifm-color-primary);
+    cursor: pointer;
+}
+
+.thumbsDownButton {
+    background-color: var(--ifm-color-primary-dark);
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/src/components/GuideFeedback/modal.js b/src/components/GuideFeedback/modal.js
new file mode 100644
index 000000000..2294798e2
--- /dev/null
+++ b/src/components/GuideFeedback/modal.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import NiceModal from '@ebay/nice-modal-react';
+
+const modal = ({ closeModal, handleFeedbackChange, handleSubmit }) => {
+    return (
+        <div>  
+          <div className="modal">
+            <div className="modal-content">
+              <span className="close" onClick={closeModal}>&times;</span>
+              <h2>Feedback</h2>
+              <textarea
+                placeholder="Enter your feedback..."
+                value={feedback}
+                onChange={handleFeedbackChange}
+              ></textarea>
+              <button onClick={handleSubmit}>Submit</button>
+            </div>
+          </div>
+      </div>
+    )
+}
+
+export default function GuideFeedbackModal({ fb }) {
+
+  
+
+    return (
+        <div>
+            <modal />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index ca43e5897..98ee35f21 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -40,5 +40,5 @@
   --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(82, 78, 183, 0.3);
   --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Meslo NGF', 'Menlo', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
-   --ifm-navbar-background-color :#66002a
+  --ifm-navbar-background-color: #66002a;
 }