diff --git a/apps/fronted/src/components/preview/ExperienceSection.tsx b/apps/fronted/src/components/preview/ExperienceSection.tsx
index bdfb579..e79a413 100644
--- a/apps/fronted/src/components/preview/ExperienceSection.tsx
+++ b/apps/fronted/src/components/preview/ExperienceSection.tsx
@@ -14,7 +14,7 @@ interface ExperienceItemProps {
   globalSettings?: GlobalSettings;
 }
 
-const ExperienceItem: React.FC<ExperienceItemProps> = React.forwardRef(
+const ExperienceItem = React.forwardRef<HTMLDivElement, ExperienceItemProps>(
   ({ experience, globalSettings }, ref) => {
     return (
       <motion.div
@@ -44,6 +44,8 @@ const ExperienceItem: React.FC<ExperienceItemProps> = React.forwardRef(
   }
 );
 
+ExperienceItem.displayName = "ExperienceItem";
+
 const ExperienceSection: React.FC<ExperienceSectionProps> = ({
   experiences,
   globalSettings,
diff --git a/apps/fronted/src/components/preview/ProjectSection.tsx b/apps/fronted/src/components/preview/ProjectSection.tsx
index 70e4911..9334734 100644
--- a/apps/fronted/src/components/preview/ProjectSection.tsx
+++ b/apps/fronted/src/components/preview/ProjectSection.tsx
@@ -5,6 +5,49 @@ import { motion, AnimatePresence } from "framer-motion";
 import SectionTitle from "./SectionTitle";
 import { Project, GlobalSettings } from "@/types/resume";
 
+interface ProjectItemProps {
+  project: Project;
+  globalSettings?: GlobalSettings;
+}
+
+const ProjectItem = React.forwardRef<HTMLDivElement, ProjectItemProps>(
+  ({ project, globalSettings }, ref) => {
+    return (
+      <motion.div
+        layout
+        style={{
+          marginTop: `${globalSettings?.paragraphSpacing}px`,
+        }}
+      >
+        <motion.div
+          layout="position"
+          className="flex items-center justify-between"
+        >
+          <h3 className="font-medium">{project.name}</h3>
+          {project.date && <div>{project.date}</div>}
+        </motion.div>
+        {project.role && (
+          <motion.div layout="position" className="font-medium text-baseFont">
+            {project.role}
+          </motion.div>
+        )}
+        {project.description && (
+          <motion.div
+            layout="position"
+            style={{
+              fontSize: `${globalSettings?.baseFontSize || 14}px`,
+              lineHeight: globalSettings?.lineHeight || 1.6,
+            }}
+            dangerouslySetInnerHTML={{ __html: project.description }}
+          ></motion.div>
+        )}
+      </motion.div>
+    );
+  }
+);
+
+ProjectItem.displayName = "ProjectItem";
+
 interface ProjectSectionProps {
   projects: Project[];
   globalSettings?: GlobalSettings;
@@ -44,45 +87,4 @@ const ProjectSection: React.FC<ProjectSectionProps> = ({
   );
 };
 
-interface ProjectItemProps {
-  project: Project;
-  globalSettings?: GlobalSettings;
-}
-
-const ProjectItem: React.FC<ProjectItemProps> = React.forwardRef(
-  ({ project, globalSettings }, ref) => {
-    return (
-      <motion.div
-        layout
-        style={{
-          marginTop: `${globalSettings?.paragraphSpacing}px`,
-        }}
-      >
-        <motion.div
-          layout="position"
-          className="flex items-center justify-between"
-        >
-          <h3 className="font-medium">{project.name}</h3>
-          {project.date && <div>{project.date}</div>}
-        </motion.div>
-        {project.role && (
-          <motion.div layout="position" className="font-medium text-baseFont">
-            {project.role}
-          </motion.div>
-        )}
-        {project.description && (
-          <motion.div
-            layout="position"
-            style={{
-              fontSize: `${globalSettings?.baseFontSize || 14}px`,
-              lineHeight: globalSettings?.lineHeight || 1.6,
-            }}
-            dangerouslySetInnerHTML={{ __html: project.description }}
-          ></motion.div>
-        )}
-      </motion.div>
-    );
-  }
-);
-
 export default ProjectSection;