diff --git a/types/GranblueElement.d.ts b/types/GranblueElement.d.ts
index 563f38e7..fe8c1c93 100644
--- a/types/GranblueElement.d.ts
+++ b/types/GranblueElement.d.ts
@@ -6,4 +6,5 @@ interface GranblueElement {
     en: string
     ja: string
   }
+  slug: string
 }
diff --git a/utils/elements.tsx b/utils/elements.tsx
index 9c99f870..a7d7d9c3 100644
--- a/utils/elements.tsx
+++ b/utils/elements.tsx
@@ -1,60 +1,73 @@
-const elements: GranblueElement[] = [
+export const elements: GranblueElement[] = [
   {
     id: 0,
     weaknessId: 0,
     name: {
-      en: 'null',
+      en: 'Null',
       ja: '無',
     },
+    slug: 'null',
   },
   {
     id: 1,
     weaknessId: 2,
     name: {
-      en: 'wind',
+      en: 'Wind',
       ja: '風',
     },
+    slug: 'wind',
   },
   {
     id: 2,
     weaknessId: 3,
     name: {
-      en: 'fire',
+      en: 'Fire',
       ja: '火',
     },
+    slug: 'fire',
   },
   {
     id: 3,
     weaknessId: 4,
     name: {
-      en: 'water',
+      en: 'Water',
       ja: '水',
     },
+    slug: 'water',
   },
   {
     id: 4,
     weaknessId: 1,
     name: {
-      en: 'earth',
+      en: 'Earth',
       ja: '土',
     },
+    slug: 'earth',
   },
   {
     id: 5,
     weaknessId: 5,
     name: {
-      en: 'dark',
+      en: 'Dark',
       ja: '闇',
     },
+    slug: 'dark',
   },
   {
     id: 6,
     weaknessId: 6,
     name: {
-      en: 'light',
+      en: 'Light',
       ja: '光',
     },
+    slug: 'light',
   },
 ]
 
-export default elements
+export function numberToElement(value: number) {
+  return elements.find((element) => element.id === value) || elements[0]
+}
+
+export function stringToElement(value: string) {
+  return elements.find((element) => element.name.en === value)
+}