diff --git a/.github/ISSUE_TEMPLATE/new_field.md b/.github/ISSUE_TEMPLATE/new_field.md
new file mode 100644
index 00000000..6b483e5e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/new_field.md
@@ -0,0 +1,88 @@
+---
+name: New Component
+about: Use when creating or updating a react component.
+title: ""
+type: Task
+labels: triage
+---
+
+<!-- Add an intro -->
+
+
+<!-- describe a use case if not covered in intro -->
+
+
+## 📝 Details
+<!-- 
+
+Describe in detail the following:
+
+- New component and its functionality
+- How it will work, be laid out, new ui features etc
+- anything else relevant
+
+-->
+
+## :link: Links
+<!--
+    - Add relevant links here in list format
+    - if there is none, notate with _Nil_
+-->
+
+
+
+## 🚧 Tasks
+
+<!-- Don't remove tasks strike them out. use `~~` before and after the item. i.e. `- ~~[ ] Model Created~~` note: don't include the list dash-->
+
+- [ ] 🆕 Add the Component
+
+- [ ] 🛠️ Ensure the is a `@see` link to the Demo site of the component added to "code api docs"
+
+- [ ] 🔄 Mock API Data added (both the `GET` and `OPTIONS` request object)
+
+- [ ] User Documentation added/updated
+
+---
+
+<!-- Add additional tasks here and as a check box list -->
+
+
+
+### 🧪 Tests
+
+Coverage must be >=90%.
+
+- Tests
+    - [ ] Component.
+    - [ ] Each feature the component has.
+    - [ ] Error free.
+
+
+## ✅ Requirements
+
+A Requirement is a **must have**. In addition will also **need** be tested.
+
+- [ ] Must **not** produce console errors
+
+<!--
+
+When detailing requirements the following must be taken into account:
+
+- what the user should be able to do
+
+- what the user should not be able to do
+
+- what should occur when a user performs an action
+
+-->
+
+- Functional Requirements
+
+
+- Non-Functional Requirements
+
+
+---
+
+<!-- Add additional requirement here and as a check box list -->
diff --git a/src/components/CardDataSet.tsx b/src/components/CardDataSet.tsx
index 928bb48a..81a6f3cc 100644
--- a/src/components/CardDataSet.tsx
+++ b/src/components/CardDataSet.tsx
@@ -67,7 +67,7 @@ export type DataCardProps = {
  * @category Component
  * @since 0.12.0
  */
-const DataCard = ({
+const CardDataSet = ({
     hasRowDelete = false,
     isDraggable = false,
     isExpandable = false,
@@ -212,4 +212,4 @@ const DataCard = ({
     );
 }
  
-export default DataCard;
+export default CardDataSet;
diff --git a/src/layout/Ticket.tsx b/src/layout/Ticket.tsx
index a1b81c44..7100c9d8 100644
--- a/src/layout/Ticket.tsx
+++ b/src/layout/Ticket.tsx
@@ -35,7 +35,7 @@ import { Fields } from "../components/DisplayFields";
 import urlBuilder from "../hooks/urlBuilder";
 import UserContext from "../hooks/UserContext";
 import URLSanitize from "../functions/URLSanitize";
-import DataCard from "../components/CardDataSet";
+import CardDataSet from "../components/CardDataSet";
 
 
 /**
@@ -325,13 +325,13 @@ const Ticket = (): React.JSX.Element => {
                                 { ! new_ticket &&
                                 <>
 
-                                <DataCard
+                                <CardDataSet
                                     hasRowDelete = {true}
                                     isExpandable = {true}
                                     url = { URLSanitize(ticket_data?._urls?.ticket_dependencies) }
                                 />
 
-                                <DataCard
+                                <CardDataSet
                                     hasRowDelete = {true}
                                     isExpandable = {true}
                                     url = { URLSanitize(ticket_data?._urls?.linked_models) }