diff --git a/apps/landing/public/spinner.svg b/apps/landing/public/spinner.svg
new file mode 100644
index 00000000..654d4a89
--- /dev/null
+++ b/apps/landing/public/spinner.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#paint0_angular_691_3548_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 -0.00875 0.00875 0 12 12)"><foreignObject x="-1257.14" y="-1257.14" width="2514.29" height="2514.29"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(97, 89, 212, 0) 0deg,rgba(97, 88, 212, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM5.5 12C5.5 15.5899 8.41015 18.5 12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.38039216399192810,&#34;g&#34;:0.34901961684226990,&#34;b&#34;:0.83137255907058716,&#34;a&#34;:0.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.38115325570106506,&#34;g&#34;:0.34895390272140503,&#34;b&#34;:0.83194440603256226,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.38039216399192810,&#34;g&#34;:0.34901961684226990,&#34;b&#34;:0.83137255907058716,&#34;a&#34;:0.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.38115325570106506,&#34;g&#34;:0.34895390272140503,&#34;b&#34;:0.83194440603256226,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:7.8967279763808573e-13,&#34;m01&#34;:17.500001907348633,&#34;m02&#34;:3.250,&#34;m10&#34;:-17.500001907348633,&#34;m11&#34;:2.7221690613449256e-12,&#34;m12&#34;:20.750},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+<defs>
+<clipPath id="paint0_angular_691_3548_clip_path"><path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM5.5 12C5.5 15.5899 8.41015 18.5 12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12Z"/></clipPath></defs>
+</svg>
diff --git a/apps/landing/src/app/StarButton.css b/apps/landing/src/app/StarButton.css
new file mode 100644
index 00000000..23331d25
--- /dev/null
+++ b/apps/landing/src/app/StarButton.css
@@ -0,0 +1,9 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
diff --git a/apps/landing/src/app/StarButton.tsx b/apps/landing/src/app/StarButton.tsx
index f3eb6ed1..71f6dee7 100644
--- a/apps/landing/src/app/StarButton.tsx
+++ b/apps/landing/src/app/StarButton.tsx
@@ -1,10 +1,37 @@
+'use client'
+
+import './StarButton.css'
+
 import { Center, css, Flex, Image, Text } from '@devup-ui/react'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+export default function StarButton() {
+  const [starCount, setStarCount] = useState<number | null>(null)
 
-export default async function StarButton() {
-  const res = await fetch('https://api.github.com/repos/dev-five-git/devup-ui')
-  const data = await res.json()
-  const starCount = data.stargazers_count
+  useEffect(() => {
+    const abortController = new AbortController()
+    const fetchStarCount = async () => {
+      try {
+        const data = await fetch(
+          'https://api.github.com/repos/dev-five-git/devup-ui',
+          {
+            signal: abortController.signal,
+          },
+        ).then((res) => res.json())
+        setStarCount(data.stargazers_count)
+      } catch (error) {
+        console.error(error)
+      } finally {
+        setStarCount((prev) => (typeof prev === 'number' ? prev : -1))
+      }
+    }
+    fetchStarCount()
+
+    return () => {
+      abortController.abort()
+    }
+  }, [])
 
   return (
     <Link
@@ -58,9 +85,18 @@ export default async function StarButton() {
           h="100%"
           px="16px"
         >
-          <Text color="$primary" textAlign="center" typography="buttonLsemiB">
-            {starCount}
-          </Text>
+          {starCount === null ? (
+            <Image
+              alt="Loading"
+              animation="spin 1s linear infinite"
+              boxSize="20px"
+              src="/spinner.svg"
+            />
+          ) : (
+            <Text color="$primary" textAlign="center" typography="buttonLsemiB">
+              {starCount}
+            </Text>
+          )}
         </Center>
       </Flex>
     </Link>
diff --git a/apps/landing/src/app/markdown.css b/apps/landing/src/app/markdown.css
index 76722b3e..4cf3eb56 100644
--- a/apps/landing/src/app/markdown.css
+++ b/apps/landing/src/app/markdown.css
@@ -1,4 +1,4 @@
-@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
+@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css);
 
 table {
     border-collapse: collapse;