diff --git a/src/components/builder/lists/List.js b/src/components/builder/lists/List.js
index 6d72f1cd..896e33b1 100644
--- a/src/components/builder/lists/List.js
+++ b/src/components/builder/lists/List.js
@@ -21,7 +21,7 @@ const List = ({
   hasDate,
   event,
 }) => {
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
   const items = useSelector(path, []);
   const { emitter } = useContext(ModalContext);
 
@@ -49,7 +49,7 @@ const List = ({
                     startDate: x.startDate,
                     endDate: x.endDate,
                     language: i18n.language,
-                  }))
+                  }, t))
               }
               text={text || get(x, textPath, '')}
               onEdit={() => handleEdit(x)}
diff --git a/src/modals/DataModal.js b/src/modals/DataModal.js
index f6b99c5b..70e386a6 100644
--- a/src/modals/DataModal.js
+++ b/src/modals/DataModal.js
@@ -85,7 +85,7 @@ const DataModal = ({
   };
 
   const getTitle = isEmpty(title)
-    ? getModalText(isEditMode, name)
+    ? getModalText(isEditMode, name, t)
     : isEditMode
     ? title.edit
     : title.create;
diff --git a/src/templates/blocks/Education/EducationA.js b/src/templates/blocks/Education/EducationA.js
index 2ac50d87..25ac5fee 100644
--- a/src/templates/blocks/Education/EducationA.js
+++ b/src/templates/blocks/Education/EducationA.js
@@ -1,37 +1,41 @@
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, safetyCheck } from '../../../utils';
 
-const EducationItem = ({ item, language }) => (
-  <div>
-    <div className="flex justify-between items-center">
-      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{item.institution}</h6>
-        <span className="text-xs">
-          <strong>{item.degree}</strong> {item.field}
-        </span>
-      </div>
-      <div className="flex flex-col items-end text-right">
-        {item.startDate && (
-          <h6 className="text-xs font-medium mb-1">
-            (
-            {formatDateRange({
-              startDate: item.startDate,
-              endDate: item.endDate,
-              language,
-            })}
-            )
-          </h6>
-        )}
-        <span className="text-sm font-medium">{item.gpa}</span>
+const EducationItem = ({ item, language }) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col text-left mr-2">
+          <h6 className="font-semibold">{item.institution}</h6>
+          <span className="text-xs">
+            <strong>{item.degree}</strong> {item.field}
+          </span>
+        </div>
+        <div className="flex flex-col items-end text-right">
+          {item.startDate && (
+            <h6 className="text-xs font-medium mb-1">
+              (
+              {formatDateRange({
+                startDate: item.startDate,
+                endDate: item.endDate,
+                language,
+              }, t)}
+              )
+            </h6>
+          )}
+          <span className="text-sm font-medium">{item.gpa}</span>
+        </div>
       </div>
+      {item.summary && (
+        <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+      )}
     </div>
-    {item.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
-    )}
-  </div>
-);
+  );
+};
 
 const EducationA = () => {
   const { data, heading: Heading } = useContext(PageContext);
diff --git a/src/templates/blocks/Work/WorkA.js b/src/templates/blocks/Work/WorkA.js
index 35be6948..2d7a4cee 100644
--- a/src/templates/blocks/Work/WorkA.js
+++ b/src/templates/blocks/Work/WorkA.js
@@ -1,32 +1,36 @@
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, safetyCheck } from '../../../utils';
 
-const WorkItem = ({ item, language }) => (
-  <div>
-    <div className="flex justify-between items-center">
-      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{item.company}</h6>
-        <span className="text-xs">{item.position}</span>
+const WorkItem = ({ item, language }) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col text-left mr-2">
+          <h6 className="font-semibold">{item.company}</h6>
+          <span className="text-xs">{item.position}</span>
+        </div>
+        {item.startDate && (
+          <h6 className="text-xs font-medium text-right">
+            (
+            {formatDateRange({
+              startDate: item.startDate,
+              endDate: item.endDate,
+              language,
+            }, t)}
+            )
+          </h6>
+        )}
       </div>
-      {item.startDate && (
-        <h6 className="text-xs font-medium text-right">
-          (
-          {formatDateRange({
-            startDate: item.startDate,
-            endDate: item.endDate,
-            language,
-          })}
-          )
-        </h6>
+      {item.summary && (
+        <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
       )}
     </div>
-    {item.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
-    )}
-  </div>
-);
+  );
+};
 
 const WorkA = () => {
   const { data, heading: Heading } = useContext(PageContext);
diff --git a/src/utils/index.js b/src/utils/index.js
index 156daef8..87e0daa9 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,9 +1,7 @@
 import dayjs from 'dayjs';
 import { get, isEmpty } from 'lodash';
-import { useTranslation } from 'react-i18next';
 
-export const getModalText = (isEditMode, type) => {
-  const { t } = useTranslation();
+export const getModalText = (isEditMode, type, t) => {
   return isEditMode
     ? `${t('shared.buttons.edit')} ${type}`
     : `${t('shared.buttons.add')} ${type}`;
@@ -26,8 +24,7 @@ export const formatDate = ({ date, language = 'en' }) => {
   return dayjs(date).locale(language.substr(0, 2)).format('MMMM YYYY');
 };
 
-export const formatDateRange = ({ startDate, endDate, language = 'en' }) => {
-  const { t } = useTranslation();
+export const formatDateRange = ({ startDate, endDate, language = 'en' }, t) => {
   const start = `${dayjs(startDate)
     .locale(language.substr(0, 2))
     .format('MMMM YYYY')}`;