diff --git a/.github/ISSUE_TEMPLATE/Mobile_responsiveness.md b/.github/ISSUE_TEMPLATE/Mobile_responsiveness.md
deleted file mode 100644
index b7f24cd511..0000000000
--- a/.github/ISSUE_TEMPLATE/Mobile_responsiveness.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: 'Responsiveness on mobile '
-about: 'Standard HackforLA issue template '
-title: 'Mobile Responsiveness on [name of the page] : [quick recap of the bug here]'
-labels: 'role: design'
-assignees: ''
-
----
-
-### Overview
-We need to check the mobile version of every pages on the website so that we correct any bug that is appearing on mobile.
-
-REPLACE THIS TEXT -
-1. Explain the bug that you have observed
-2. Put a screenshot of the bug: you can use the following template to create a drop down image
-
-TITLE IMAGE
-
-PASTE_YOUR_IMAGE_HERE
-
-
-### Action Items
-Design:
-- [ ] Check the mobile responsiveness of this page (use your mobile to do it ;) )
-- [ ] If there is any bug/any inconsistency or problem, however small or large, edit this issue and list the bug with screenshots in the Overview section above :arrow_up:. _You have more than one bug? duplicate this issue and create one issue per bug.
-- [ ] List all the changes to implement to correct the bug (eg: resizing..) in the development action items below :arrow_down:. (don't hesitate to create 1 checkbox for each changes)
-- [ ] Put the issue(s) in the review column to check the feasibility with the devs.
-
-Development
-- [ ] Implement the following changes : "_list your changes here_ "
-- [ ] Ensure that the correction doesn't break any other pages that is connected to the one your changing. For that, check [the sitemap](https://www.hackforla.org/sitemap.xml)
-
-
-### Resources/Instructions
-REPLACE THIS TEXT - Provide links to the figma file (if there is one), and to the page where the bug is observed.
diff --git a/.github/ISSUE_TEMPLATE/Mobile_responsiveness.yml b/.github/ISSUE_TEMPLATE/Mobile_responsiveness.yml
new file mode 100644
index 0000000000..92b37f7562
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/Mobile_responsiveness.yml
@@ -0,0 +1,48 @@
+name: 'Responsiveness on mobile '
+description: 'Standard HackforLA issue template '
+title: 'Mobile Responsiveness on [name of the page] : [quick recap of the bug here]'
+labels: ['role: design']
+# assignees:
+
+body:
+ - type: textarea
+ id: overview
+ attributes:
+ label: Overview
+ description: |
+ We need to check the mobile version of every pages on the website so that we correct any bug that is appearing on mobile.
+ 1. Explain the bug that you have observed
+ 2. Put a screenshot of the bug: you can use the following template to create a drop down image
+ value: |
+
+ TITLE IMAGE
+ 
+
+ validations:
+ required: true
+ - type: markdown
+ attributes:
+ value: "## Action Items"
+ - type: checkboxes
+ id: action-design
+ attributes:
+ label: "Design:"
+ options:
+ - label: "Check the mobile responsiveness of this page (use your mobile to do it ;) )"
+ - label: "If there is any bug/any inconsistency or problem, however small or large, edit this issue and list the bug with screenshots in the Overview section above. _You have more than one bug? duplicate this issue and create one issue per bug. "
+ - label: "List all the changes to implement to correct the bug (eg: resizing..) in the development action items below. (don't hesitate to create 1 checkbox for each changes)"
+ - label: "Put the issue(s) in the review column to check the feasibility with the devs. "
+ - type: textarea
+ id: action-development
+ attributes:
+ label: Development
+ value: |
+ - [ ] Implement the following changes : '_list your changes here_ '
+ - [ ] Ensure that the correction doesn't break any other pages that is connected to the one your changing. For that, check [the sitemap](https://www.hackforla.org/sitemap.xml)
+ - type: textarea
+ id: resources-instructions
+ attributes:
+ label: Resources/Instructions
+ description: Provide links to the figma file (if there is one), and to the page where the bug is observed.
+ validations:
+ required: true
\ No newline at end of file