diff --git a/docusaurus.config.js b/docusaurus.config.js
index 41fac199..d89f2262 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -44,6 +44,14 @@ const config = {
         title: 'Report an Issue',
         url : 'https://github.com/rsksmart/devportal/issues',
       },
+      requestArticle : {
+        title: 'Request an Article',
+        form : {
+          id : '5qQ40ScPu',
+          title : 'Request a New Article',
+          description : 'Looking for information we haven’t covered? Fill out the form below to request a new article, and we’ll consider it in future updates.',
+        }
+      },
     }
   },
   // GitHub pages deployment config.
diff --git a/src/components/FeedbackForm/index.js b/src/components/FeedbackForm/index.js
index 8174d0a4..166b6c10 100644
--- a/src/components/FeedbackForm/index.js
+++ b/src/components/FeedbackForm/index.js
@@ -1,160 +1,7 @@
-import React, {useState, useEffect} from "react";
+import React, {useState} from "react";
 import Translate from '@docusaurus/Translate';
-import Modal from 'react-bootstrap/Modal';
-import {useFormspark} from "@formspark/use-formspark";
 
-function MyVerticallyCenteredModal(props) {
-  const [url, setUrl] = useState('#');
-
-  const [submit, submitting] = useFormspark({
-    formId: `vg6LeINWT`,
-  });
-
-  const [message, setMessage] = useState("");
-  const [email, setEmail] = useState("");
-  const [name, setName] = useState("");
-
-  const [sending, setSending] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-
-  const totalStars = 5;
-  const [rating, setRating] = useState(props.rating || 0);
-  const [hover, setHover] = useState(null);
-
-  useEffect(() => {
-    setRating(props.rating);
-
-    if (window) {
-      setUrl(window.location.origin + window.location.pathname);
-    }
-  }, [props.rating, props.show]);
-
-  const onSubmit = async (e) => {
-    if (submitting) return;
-
-    e.preventDefault();
-    setSending(true);
-    await submit(
-      {message, email, name, rating, url}
-    );
-    setSubmitted(true);
-    setSending(false);
-    setMessage("");
-    setEmail("");
-    setName("");
-    setRating(0);
-    setTimeout(() => {
-      setSubmitted(false);
-    }, 4000)
-  };
-
-  return (
-    <Modal
-      {...props}
-      size="md"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-    >
-      <button onClick={props.onHide} className={'btn-blank d-flex position-absolute end-0 top-0 text-body me-32 mt-32 z-1'}>
-        <svg width="24" height="24">
-          <use xlinkHref="#icon-close-circle"/>
-        </svg>
-      </button>
-      <Modal.Body>
-        <Modal.Title as={'h4'} id="contained-modal-title-vcenter" className={'mb-16 subtitle-2 pe-32'}>
-          Thank you for your feedback!
-        </Modal.Title>
-        <p>We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!</p>
-        <div className="my-32 d-flex gap-12 justify-content-between align-items-center">
-          <span>Current rating</span>
-          <div className={'d-flex gap-8'}>
-            {[...Array(totalStars)].map((star, index) => {
-              const currentRating = index + 1;
-
-              return (
-                <label key={index}
-                       onMouseEnter={() => setHover(currentRating)}
-                       onMouseLeave={() => setHover(null)}
-                >
-                  <input
-                    disabled={submitting}
-                    className={`d-none`}
-                    key={star}
-                    type="radio"
-                    name="rating"
-                    value={currentRating}
-                    onChange={() => setRating(currentRating)}
-                  />
-                  <svg width="23" height="24" viewBox="0 0 23 24" fill="none">
-                    <path
-                      d="M11.5 5.18625L13.4837 9.19688L13.8144 9.91563L14.5331 10.0234L18.9606 10.6631L15.8125 13.7538L15.2734 14.2784L15.4028 14.9972L16.1575 19.4031L12.1972 17.3259L11.5 17.0312L10.8315 17.3834L6.87123 19.4319L7.58998 15.0259L7.71936 14.3072L7.18748 13.7538L4.01061 10.6272L8.43811 9.9875L9.15686 9.87969L9.48748 9.16094L11.5 5.18625ZM11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z"
-                      fill="currentColor"/>
-                    <path d="M11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z" fill={currentRating <= (hover || rating) ? "currentColor" : "none"}/>
-                  </svg>
-                </label>
-              );
-            })}
-          </div>
-        </div>
-        <form onSubmit={onSubmit}>
-          <div className="d-flex flex-column gap-12 mb-24">
-            <input type="hidden" name="rating" value={rating}/>
-            <input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`}
-                   value={name} onChange={(e) => setName(e.target.value)}
-            />
-            <input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`}
-                   value={email} onChange={(e) => setEmail(e.target.value)}
-            />
-
-            <textarea required={true} value={message} placeholder={`Message`} className="form-control" rows={4}
-                      onChange={(e) => setMessage(e.target.value)}/>
-          </div>
-
-          <div className={`d-flex justify-content-between align-items-center`}>
-            <button type={`button`} className={`btn-blank`} onClick={props.onHide}>
-              {!submitted ? (`Not now`) : (`Close`)}
-            </button>
-
-            <button
-              className="btn position-relative py-10"
-              type="submit" disabled={submitting}
-            >
-              <span>
-                {sending && (
-                  <>
-                    Submitting
-                    <div className="spinner-border" role="status">
-                      <span className="visually-hidden">Loading...</span>
-                    </div>
-                  </>
-                )}
-                {!sending && !submitted && (
-                  <>
-                    Submit
-                    <svg width="16" height="17">
-                      <use xlinkHref="#icon-arrow-right"/>
-                    </svg>
-                  </>
-                )}
-                {!sending && submitted && (
-                  <>
-                    Submitted
-                    <svg width="16" height="17">
-                      <use xlinkHref="#icon-check-circle"/>
-                    </svg>
-                  </>
-                )}
-              </span>
-            </button>
-
-          </div>
-        </form>
-
-
-      </Modal.Body>
-    </Modal>
-  );
-}
+import { ModalFormSpark } from "/src/components/ModalFormSpark";
 
 export const FeedbackForm = () => {
 
@@ -200,9 +47,10 @@ export const FeedbackForm = () => {
         })}
       </div>
 
-      <MyVerticallyCenteredModal
+      <ModalFormSpark
         show={modalShow}
         rating={rating}
+        form={{id: 'vg6LeINWT', title: 'Thank you for your feedback!', description: 'We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!', type: 'feedback'}}
         onHide={() => setModalShow(false)}
       />
     </div>
diff --git a/src/components/ModalFormSpark/Forms/FormFeedback/index.js b/src/components/ModalFormSpark/Forms/FormFeedback/index.js
new file mode 100644
index 00000000..fe4fcc72
--- /dev/null
+++ b/src/components/ModalFormSpark/Forms/FormFeedback/index.js
@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+
+export const FormFeedback = (props) => {
+  const [url, setUrl] = useState('#');
+
+  const { form } = props;
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  });
+
+
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+
+  const [sending, setSending] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const totalStars = 5;
+  const [rating, setRating] = useState(props.rating || 0);
+  const [hover, setHover] = useState(null);
+
+  useEffect(() => {
+    if (props.rating) {
+      setRating(props.rating);
+    }
+
+    if (window) {
+      setUrl(window.location.origin + window.location.pathname);
+    }
+  }, [props.rating]);
+
+  const onSubmit = async (e) => {
+    if (submitting) return;
+
+    e.preventDefault();
+    setSending(true);
+    let query = {message, email, name, url}
+
+    query = props?.rating ? {...query, rating} : query;
+
+    await submit(query);
+    setSubmitted(true);
+    setSending(false);
+    setMessage("");
+    setEmail("");
+    setName("");
+    setRating(0);
+    setTimeout(() => {
+      setSubmitted(false);
+    }, 4000)
+  };
+
+  return form?.id && (
+    <>
+      {props?.rating && (
+        <div className="my-32 d-flex gap-12 justify-content-between align-items-center">
+          <span>Current rating</span>
+          <div className={'d-flex gap-8'}>
+            {[...Array(totalStars)].map((star, index) => {
+              const currentRating = index + 1;
+
+              return (
+                <label key={index}
+                       onMouseEnter={() => setHover(currentRating)}
+                       onMouseLeave={() => setHover(null)}
+                >
+                  <input
+                    disabled={submitting}
+                    className={`d-none`}
+                    key={star}
+                    type="radio"
+                    name="rating"
+                    value={currentRating}
+                    onChange={() => setRating(currentRating)}
+                  />
+                  <svg width="23" height="24" viewBox="0 0 23 24" fill="none">
+                    <path
+                      d="M11.5 5.18625L13.4837 9.19688L13.8144 9.91563L14.5331 10.0234L18.9606 10.6631L15.8125 13.7538L15.2734 14.2784L15.4028 14.9972L16.1575 19.4031L12.1972 17.3259L11.5 17.0312L10.8315 17.3834L6.87123 19.4319L7.58998 15.0259L7.71936 14.3072L7.18748 13.7538L4.01061 10.6272L8.43811 9.9875L9.15686 9.87969L9.48748 9.16094L11.5 5.18625ZM11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z"
+                      fill="currentColor"/>
+                    <path d="M11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z" fill={currentRating <= (hover || rating) ? "currentColor" : "none"}/>
+                  </svg>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="d-flex flex-column gap-12 mb-24">
+          {props?.rating && (
+            <input type="hidden" name="rating" value={rating}/>
+          )}
+          <input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`}
+                 value={name} onChange={(e) => setName(e.target.value)}
+          />
+          <input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`}
+                 value={email} onChange={(e) => setEmail(e.target.value)}
+          />
+
+          <textarea required={true} value={message} placeholder={`Message`} className="form-control" rows={4}
+                    onChange={(e) => setMessage(e.target.value)}/>
+        </div>
+
+        <div className={`d-flex justify-content-between align-items-center`}>
+          <button type={`button`} className={`btn-blank`} onClick={props.onDismiss}>
+            {!submitted ? (`Not now`) : (`Close`)}
+          </button>
+
+          <button
+            className="btn position-relative py-10"
+            type="submit" disabled={submitting}
+          >
+              <span>
+                {sending && (
+                  <>
+                    Submitting
+                    <div className="spinner-border" role="status">
+                      <span className="visually-hidden">Loading...</span>
+                    </div>
+                  </>
+                )}
+                {!sending && !submitted && (
+                  <>
+                    Submit
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-arrow-right"/>
+                    </svg>
+                  </>
+                )}
+                {!sending && submitted && (
+                  <>
+                    Submitted
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-check-circle"/>
+                    </svg>
+                  </>
+                )}
+              </span>
+          </button>
+
+        </div>
+      </form>
+    </>
+  );
+}
diff --git a/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
new file mode 100644
index 00000000..55c27c60
--- /dev/null
+++ b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+
+export const FormRequestArticle = (props) => {
+  const { form } = props
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  })
+
+  const requestTypes = ['Tutorial', 'Guide', 'Video', 'Image']
+
+  const initFormData = {
+    requestType: requestTypes[0],
+    title: '',
+    publicationLocation: '',
+    why: '',
+    otherInformation: '',
+  }
+
+  const [formData, setFormData] = useState(initFormData)
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [name]: value,
+    }))
+  }
+
+  const [sending, setSending] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+
+  useEffect(() => {
+    if (window) {
+      const url = window.location.origin + window.location.pathname;
+
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        url: url,
+      }))
+    }
+  }, [])
+
+  const onSubmit = async (e) => {
+    if (submitting) return
+
+    e.preventDefault()
+    setSending(true)
+
+    await submit(formData)
+    setSubmitted(true);
+    setSending(false);
+    setFormData(initFormData);
+
+    setTimeout(() => {
+      setSubmitted(false)
+    }, 4000)
+  }
+
+  return form?.id && (
+    <form onSubmit={onSubmit}>
+      <div className="d-flex flex-column gap-12 mb-24">
+      {requestTypes.length > 0 && (
+        <div>
+          {requestTypes.map((value, index) => (
+            <label className="form-check form-check-inline" key={index}>
+              <input className="form-check-input" type="radio" name="requestType" checked={formData.requestType === value} value={value} onChange={handleInputChange}/>
+              <span className="form-check-label">{value}</span>
+            </label>
+          ))}
+        </div>
+      )}
+        <input type="text" className="form-control" name={`title`} required={true} placeholder={`Title`} maxLength={100}
+               value={formData.title} onChange={handleInputChange}
+        />
+        <textarea className="form-control" name="why" placeholder={`Why / Reason for Request`} required={true} rows={3} maxLength={500}
+                  value={formData.why} onChange={handleInputChange}
+        />
+        <input type="text" className="form-control" name={`publicationLocation`} required={false} placeholder={`Publication location (E.g, DevPortal, Blog)`} maxLength={100}
+               value={formData.publicationLocation} onChange={handleInputChange}
+        />
+        <textarea className="form-control" name="otherInformation" placeholder={`Any other information`} required={false} rows={3} maxLength={500}
+                  value={formData.otherInformation} onChange={handleInputChange}
+        />
+        <div className="markdown mt-4">
+          <p className="mb-4 fw-bold">Are you a technical contributor?</p>
+          <p><a href="https://github.com/rsksmart/devportal" target="_blank" rel="noreferrer">Submit a Pull Request</a> or an Issue</p>
+        </div>
+      </div>
+
+      <div className={`d-flex justify-content-between align-items-center`}>
+        <button type={`button`} className={`btn-blank`} onClick={props.onDismiss}>
+          {!submitted ? (`Not now`) : (`Close`)}
+        </button>
+
+        <button
+          className="btn position-relative py-10"
+          type="submit" disabled={submitting}
+        >
+          <span>
+            {sending && (
+              <>
+                Submitting
+                <div className="spinner-border" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+              </>
+            )}
+            {!sending && !submitted && (
+              <>
+                Submit
+                <svg width="16" height="17">
+                  <use xlinkHref="#icon-arrow-right"/>
+                </svg>
+              </>
+            )}
+            {!sending && submitted && (
+              <>
+                Submitted
+                <svg width="16" height="17">
+                  <use xlinkHref="#icon-check-circle"/>
+                </svg>
+              </>
+            )}
+          </span>
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/src/components/ModalFormSpark/index.js b/src/components/ModalFormSpark/index.js
new file mode 100644
index 00000000..8502300f
--- /dev/null
+++ b/src/components/ModalFormSpark/index.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import Modal from 'react-bootstrap/Modal'
+import { FormFeedback } from './Forms/FormFeedback'
+import { FormRequestArticle } from './Forms/FormRequestArticle'
+
+export const ModalFormSpark = (props) => {
+
+  const { form } = props;
+
+  return form?.id && (
+    <Modal
+      {...props}
+      size="md"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <button onClick={props.onHide} className={`btn-blank d-flex position-absolute end-0 top-0 text-body z-1 ${!form.description && !form.title ? 'me-8 mt-8' : 'me-32 mt-32'}`}>
+        <svg width="24" height="24">
+          <use xlinkHref="#icon-close-circle"/>
+        </svg>
+      </button>
+      <Modal.Body>
+        {form?.title && (
+          <Modal.Title as={'h4'} id="contained-modal-title-vcenter" className={'mb-16 subtitle-2 pe-32'}>
+            {form.title}
+          </Modal.Title>
+        )}
+        {form.description && (
+          <p className={!form.title ? 'pe-32' : ''}>{form.description}</p>
+        )}
+
+        {(form?.type === 'feedback') && <FormFeedback form={form} rating={props.rating || null} onDismiss={props.onHide || null} />}
+        {(form?.type === 'request-article') && <FormRequestArticle form={form} onDismiss={props.onHide || null} />}
+
+      </Modal.Body>
+    </Modal>
+  );
+}
diff --git a/src/components/RequestArticle/index.js b/src/components/RequestArticle/index.js
new file mode 100644
index 00000000..0433e1c4
--- /dev/null
+++ b/src/components/RequestArticle/index.js
@@ -0,0 +1,32 @@
+import React, {useState} from "react";
+import Translate from '@docusaurus/Translate';
+
+import { ModalFormSpark } from "/src/components/ModalFormSpark";
+import IconArticle from "@theme/Icon/Article";
+
+export const RequestArticle = ({label, form}) => {
+
+  const [modalShow, setModalShow] = useState(false);
+
+  return label && form?.id && (
+    <>
+      <button className={`btn-blank link-base d-inline-flex gap-8 align-items-center`}
+              onClick={() => setModalShow(true)}
+              type="button"
+      >
+        <IconArticle/>
+        <Translate
+          id="theme.moreLinks.requestArticle"
+        >
+          {label}
+        </Translate>
+      </button>
+
+      <ModalFormSpark
+        show={modalShow}
+        form={{...form, type : "request-article"}}
+        onHide={() => setModalShow(false)}
+      />
+    </>
+  )
+}
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
index f8d3b825..4055eaae 100644
--- a/src/scss/abstracts/_variables.scss
+++ b/src/scss/abstracts/_variables.scss
@@ -562,3 +562,7 @@ $form-select-font-size-lg:        $input-font-size-lg;
 $form-select-border-radius-lg:    $input-border-radius-lg;
 
 $form-select-transition:          $input-transition;
+
+$form-check-input-checked-bg-color:     #{'var(--bs-body-bg)'};
+$form-check-input-checked-border-color: #{'var(--bs-body-color)'};
+$form-check-input-focus-box-shadow: 0 0 0 0.20rem rgba(var(--bs-body-color-rgb), 0.15)
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 9c141d3a..765ab73e 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -64,3 +64,9 @@ label {
     --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z' fill='white'/%3E%3C/svg%3E%0A");
   }
 }
+.form-check-input:checked[type=radio]{
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
+  [data-theme='dark']:root & {
+    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
+  }
+}
diff --git a/src/theme/DocItem/MoreActions/index.js b/src/theme/DocItem/MoreActions/index.js
index 6a54e6a7..796e8090 100644
--- a/src/theme/DocItem/MoreActions/index.js
+++ b/src/theme/DocItem/MoreActions/index.js
@@ -13,6 +13,7 @@ import IconCommunity from "@theme/Icon/Community";
 import IconChangelog from "@theme/Icon/Changelog";
 
 import Link from '@docusaurus/Link';
+import { RequestArticle } from '../../../components/RequestArticle'
 
 export default function MoreActions({editUrl}) {
 
@@ -74,6 +75,11 @@ export default function MoreActions({editUrl}) {
           </Link>
         </li>
       )}
+      {links?.requestArticle && links.requestArticle?.form?.id && (
+        <li className={`py-3`}>
+          <RequestArticle label={links.requestArticle.title} form={links.requestArticle.form} />
+        </li>
+      )}
     </ul>
   </div>
 }
diff --git a/src/theme/Icon/Article/index.js b/src/theme/Icon/Article/index.js
new file mode 100644
index 00000000..0ae32a08
--- /dev/null
+++ b/src/theme/Icon/Article/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export default function IconArticle ({ className, ...restProps }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24"
+         fill="currentColor"
+         className={clsx(className)}
+         aria-hidden="true"
+         {...restProps}>
+        <path d="m19.27 6.97-5.24-5.25a.68.68 0 0 0-.53-.22H6c-.83 0-1.5.67-1.5 1.5v18c0 .82.67 1.5 1.5 1.5h12c.82 0 1.5-.68 1.5-1.5V7.5a.68.68 0 0 0-.23-.53ZM13.5 3.3l4.2 4.2h-4.2V3.3ZM18 21H6V3h6v4.5c0 .82.68 1.5 1.5 1.5H18v12Z"/>
+        <path d="M16.5 16.5h-9V18h9v-1.5ZM16.5 12h-9v1.5h9V12Z"/>
+    </svg>
+  )
+}