diff --git a/components/Event/Header.tsx b/components/Event/Header.tsx
index 92515ac7..c0a9fc8e 100644
--- a/components/Event/Header.tsx
+++ b/components/Event/Header.tsx
@@ -19,7 +19,7 @@ const Header = () => {
         <HeaderBox>
           {/* Arrow icon */}
           <Image
-            src="/event/arrow-left.png"
+            src="/event/arrow-left.svg"
             alt=""
             width={48}
             height={48}
diff --git a/pages/volunteerHistory.tsx b/pages/volunteerHistory.tsx
index f3d0b830..f89c84aa 100644
--- a/pages/volunteerHistory.tsx
+++ b/pages/volunteerHistory.tsx
@@ -32,7 +32,7 @@ const VolunteerHistoryPage = () => {
       <HeaderContainer>
         <IconLink href="#" onClick={() => history.back()}>
           <Image
-            src="/event/arrow-left.png"
+            src="/event/arrow-left.svg"
             alt="Go Back"
             width="40"
             height="40"
diff --git a/public/event/arrow-left.png b/public/event/arrow-left.png
deleted file mode 100644
index 94e7c62d..00000000
Binary files a/public/event/arrow-left.png and /dev/null differ
diff --git a/public/event/arrow-left.svg b/public/event/arrow-left.svg
new file mode 100644
index 00000000..8fd0be5f
--- /dev/null
+++ b/public/event/arrow-left.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.5 24H7.5" stroke="#2C2C2C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 10.5L7.5 24L21 37.5" stroke="#2C2C2C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>