diff --git a/components/pages/home/sections/HeroSection.jsx b/components/pages/home/sections/HeroSection.jsx
index a1978fd..63f7b6d 100644
--- a/components/pages/home/sections/HeroSection.jsx
+++ b/components/pages/home/sections/HeroSection.jsx
@@ -6,7 +6,7 @@ import Typography from '@/components/common/Typography';
 import { Row, Column, Section, Stack } from '@/components/common/layout';
 import HeroImage from '../HeroImage';
 import Button from '../../../common/Button';
-import { useState, useEffect } from 'react';
+import useLatestVersionNumber from '@/hooks/useLatestVersionNumber';
 
 const ProductIconWrap = styled.div`
   width: 128px;
@@ -16,16 +16,7 @@ const ProductIconWrap = styled.div`
 
 const HeroSection = () => {
 
-  const [data, setData] = useState(null)
-  const versionNumber = data?.name ?? 'Loading...'
-
-  useEffect(() => {
-    fetch('https://api.github.com/repos/CodeEditApp/CodeEdit/releases/latest')
-      .then((res) => res.json())
-      .then((data) => {
-        setData(data)
-      })
-  }, [])
+  const versionNumber = useLatestVersionNumber();
 
   return (
     <Parallax
diff --git a/hooks/useLatestVersionNumber.js b/hooks/useLatestVersionNumber.js
new file mode 100644
index 0000000..6422bfe
--- /dev/null
+++ b/hooks/useLatestVersionNumber.js
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+const useLatestVersionNumber = () => {
+  const [versionNumber, setVersionNumber] = useState();
+
+  useEffect(() => {
+    fetch('https://api.github.com/repos/CodeEditApp/CodeEdit/releases/latest')
+      .then((res) => res.json())
+      .then((data) => {
+        setVersionNumber(data.name)
+      })
+  }, [])
+
+  return versionNumber ?? 'Loading...';
+};
+
+export default useLatestVersionNumber;