diff --git a/src/components/FeedbackForm/index.js b/src/components/FeedbackForm/index.js
index 778eb1d9..166b6c10 100644
--- a/src/components/FeedbackForm/index.js
+++ b/src/components/FeedbackForm/index.js
@@ -50,7 +50,7 @@ export const FeedbackForm = () => {
       <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!'}}
+        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..6b39d56f
--- /dev/null
+++ b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+
+export const FormRequestArticle = (props) => {
+  // const [url, setUrl] = useState('#')
+
+  const { form } = props
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  })
+
+  // const [email, setEmail] = useState('')
+  // const [name, setName] = useState('')
+  //
+  // const [requestType, setRequestType] = useState('tutorial')
+  // const [title, setTitle] = useState('')
+  // const [why, setWhy] = useState('')
+  // const [otherInformation, setOtherInformation] = useState('')
+  // const [submitIssue, setSubmitIssue] = useState('')
+
+  const requestTypes = ['Tutorial', 'Guide', 'Video', 'Image']
+
+  const initFormData = {
+    // name: '',
+    // email: '',
+    requestType: requestTypes[0],
+    title: '',
+    publicationLocation: '',
+    why: '',
+    otherInformation: '',
+    submitIssue: '',
+  }
+
+  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)
+    // let query = { message, email, name, url }
+
+
+    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={`name`} required={true} placeholder={`Name`} maxLength={50}*/}
+        {/*       value={formData.name} onChange={handleInputChange}*/}
+        {/*/>*/}
+        {/*<input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`} maxLength={100}*/}
+        {/*       value={formData.email} onChange={handleInputChange}*/}
+        {/*/>*/}
+        <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`} 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}
+        />
+        <input type="text" className="form-control" name={`submitIssue`} required={false} placeholder={`Submit an Issue / Pull Request`} maxLength={100}
+               value={formData.submitIssue} onChange={handleInputChange}
+        />
+      </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
index 4c6baca5..8502300f 100644
--- a/src/components/ModalFormSpark/index.js
+++ b/src/components/ModalFormSpark/index.js
@@ -1,59 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import { useFormspark } from '@formspark/use-formspark'
+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 [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, props.show]);
-
-  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 && (
     <Modal
       {...props}
@@ -76,95 +29,8 @@ export const ModalFormSpark = (props) => {
           <p className={!form.title ? 'pe-32' : ''}>{form.description}</p>
         )}
 
-        {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.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>
+        {(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
index b6f07190..0433e1c4 100644
--- a/src/components/RequestArticle/index.js
+++ b/src/components/RequestArticle/index.js
@@ -24,7 +24,7 @@ export const RequestArticle = ({label, form}) => {
 
       <ModalFormSpark
         show={modalShow}
-        form={form}
+        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");
+  }
+}