diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 1c0f338..0000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: Issue::Bug
-assignees: ''
-
----
-
-**Describe the bug**
-<!-- A clear and concise description of what the bug is. -->
-
-**Expected behavior**
-<!-- A clear and concise description of what you expected to happen. -->
-
-**Screenshots**
-<!-- If applicable, add screenshots to help explain your problem. -->
-
-**Environment:<!-- (please complete the following information) -->**
-<!-- Check like `- [x]`. -->
- - Distribution
-   - [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
-   - [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
-   - [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)
- - Firefox Version: <!--[write from `about:support` - `version`]-->
- - OS:
-   - [ ] Linux
-   - [ ] Windows
-   - [ ] Mac
-   - [ ] Other: 
- - Theme:
-   - [ ] Light
-   - [ ] Dark
-   - [ ] Alpenglow (System: Light)
-   - [ ] Alpenglow (System: Dark)
-   - [ ] System Default
-     - GTK Theme Name (Linux only): <!-- For example: Adwaita, Adwaita-Dark, Breath, Breath-Dark. Run `gsettings get org.gnome.desktop.interface gtk-theme` to output this -->
-   - [ ] Other: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))
-
-<details><summary><strong><code>user.js</code> setup</strong></summary><br>
-
-<!-- Your user.js setup -->
-```javascript
-// Your settings
-```
-</details>
- 
-**Additional context**
-<!-- Add any other context about the problem here. -->
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000..ec78dfa
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,143 @@
+name: Bug report
+description: Create a report to help us improve
+labels: ["Issue::Bug"]
+
+body:
+# == Bug Infos =================================================================
+  - type: markdown
+    id: bug-infos
+    attributes:
+      value: "## Bug Infos"
+  - type: textarea
+    id: describe-the-bug
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+      placeholder: Tell us what you want!
+    validations:
+      required: false
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If is helpful to attach screenshots or video similar to the desired features.
+      placeholder: Drag or paste images or videos to upload
+    validations:
+      required: false
+
+# == Environments ===============================================================
+  - type: markdown
+    id: environments
+    attributes:
+      value: "## Environments"
+
+  - type: dropdown
+    id: os
+    attributes:
+      label: OS
+      options:
+        - Linux
+        - Mac OS
+        - Windows 11
+        - Windows 10
+        - Windows 8
+        - Windows 7
+        - Others
+      multiple: true
+    validations:
+      required: true
+  - type: input
+    id: os-others
+    attributes:
+      label: OS - Others
+      description: Enter only if you choose `Others` from the OS
+      placeholder: e.g. FreeBSD
+    validations:
+      required: false
+
+  - type: input
+    id: firefox-version
+    attributes:
+      label: Firefox Version
+      description: Write from `about:support` - `version`
+      placeholder: e.g. v101.1b3
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: distribution
+    attributes:
+      label: Distribution
+      options:
+        - label: "[Original Lepton](https://github.com/black7375/Firefox-UI-Fix)"
+        - label: "[Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)"
+        - label: "[Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)"
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: theme
+    attributes:
+      label: Theme
+      options:
+        - label: "Light"
+        - label: "Dark"
+        - label: "Alpenglow (System: Light)"
+        - label: "Alpenglow (System: Dark)"
+        - label: "System Default"
+        - label: "Others: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))"
+    validations:
+      required: true
+  - type: textarea
+    id: theme-more-info
+    attributes:
+      label: Theme - More Info
+      description: |
+        Enter only for the following cases:
+
+        - Choose `System Default` with linux users
+          Tip: Run `gsettings get org.gnome.desktop.interface gtk-theme` to output this
+        - Choose `Others`
+      placeholder: |
+        Example for each case
+
+        - Adwaita, Adwaita-Dark, Breath, Breath-Dark
+        - Your theme links like https://addons.mozilla.org/en-US/firefox/addon/photon-colors/
+    validations:
+      required: false
+
+  - type: textarea
+    id: user-js-setup
+    attributes:
+      label: "`user.js` setup"
+      description: |
+        Your `user.js` or `about:config` settings
+      placeholder: Please tell me your settings
+      value: |
+        <details><summary><strong><code>user.js</code> setup</strong></summary><br>
+
+        ```javascript
+        // Your settings
+        ```
+        </details>
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+      placeholder: Anything to write down or refer to is fine
+    validations:
+      required: false
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index 9b544b9..0000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: 'Issue::Enhancement'
-assignees: ''
-
----
-
-**Is your feature request related to a problem?**
-<!-- A clear and concise description of what the problem is. Ex. I don't like this design that [...] -->
-
-**The solution I'd like**
-<!-- A clear and concise description of what you want to happen. -->
-
-**Screenshots or video**
-<!-- It is helpful to attach screenshots or video similar to the desired features. -->
-
-**Alternatives I've considered**
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-**Additional context**
-<!-- Add any other context or screenshots about the feature request here. -->
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000..39e42a0
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,49 @@
+name: Feature request
+description: Suggest an idea for this project
+labels: ["Issue::Enhancement"]
+
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: Is your feature request related to a problem?
+      description: A clear and concise description of what the problem is.
+      placeholder: Ex. I don't like this design that [...]
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: The solution I'd like
+      description: A clear and concise description of what you want to happen.
+      placeholder: Tell us what you want!
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots or video
+      description: It is helpful to attach screenshots or video similar to the desired features.
+      placeholder: You can drag & drop to attach files
+    validations:
+      required: false
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives I've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+      placeholder: It would be great if you have a relevant image or link
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+      placeholder: Anything to write down or refer to is fine
+    validations:
+      required: false
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index d1da789..c570874 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,24 +1,19 @@
 **Describe the PR**
 <!-- A clear and concise description of what the PR is. -->
 
+**PR Type**
+<!-- Check like `- [x]`. -->
+
+- [ ] `Add:` Add feature or enhanced.
+- [ ] `Fix:` Bug fix or change default values.
+- [ ] `Clean:` Refactoring.
+- [ ] `Doc:` Update docs.
+
 **Related Issue**
 <!--Related or discussed issues. If it's a big change, it's a good idea to open an issue ahead of time. -->
 
 **Screenshots**
 <!-- If applicable, add screenshots to help explain your commit. -->
 
-**Environment (please complete the following information):**
-<!-- Check like `- [x]`. -->
-
- - PR Type
-   - [ ] `Add:` Add feature or enhanced.
-   - [ ] `Fix:` Bug fix or change default values.
-   - [ ] `Clean:` Refactoring.
-   - [ ] `Doc:` Update docs.
- - Distribution
-   - [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
-   - [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
-   - [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)
-
 **Additional context**
 <!-- Add any other context about the commit here. -->