diff --git a/src/components/atoms/Extracurricular/Extracurricular.tsx b/src/components/atoms/Extracurricular/Extracurricular.tsx
new file mode 100644
index 0000000..8ac334f
--- /dev/null
+++ b/src/components/atoms/Extracurricular/Extracurricular.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Box, SxProps, Theme, Typography, TypographyProps } from '@mui/material'
+
+type ExtracurricularProps = {
+  title: string
+  year?: string | number
+  titleProps?: TypographyProps
+  Component?: React.ElementType
+  sx?: SxProps<Theme>
+}
+
+const Extracurricular = ({ Component = Box, ...props }: ExtracurricularProps) => {
+  return (
+    <Component sx={{ pl: 2, ...props.sx }} display="flex" columnGap={1} alignItems="flex-start">
+      <Typography variant="body1" flexGrow={1} {...props.titleProps}>
+        {props.title}
+      </Typography>
+      {props.year && (
+        <Typography variant="subtitle1" color="primary.main">
+          {props.year}
+        </Typography>
+      )}
+    </Component>
+  )
+}
+
+export default Extracurricular
diff --git a/src/components/atoms/Extracurricular/index.tsx b/src/components/atoms/Extracurricular/index.tsx
new file mode 100644
index 0000000..edb63ba
--- /dev/null
+++ b/src/components/atoms/Extracurricular/index.tsx
@@ -0,0 +1 @@
+export { default } from './Extracurricular'