diff --git a/src/components/loading.tsx b/src/components/loading.tsx
index 1cd5600..798b74f 100644
--- a/src/components/loading.tsx
+++ b/src/components/loading.tsx
@@ -1,11 +1,12 @@
 import { LoadingProps } from "@/interfaces/components";
 import { Center, Spinner, Text, VStack } from "@chakra-ui/react";
+import { LeapFrog } from "@uiball/loaders";
 
 const Loading = (props: LoadingProps) => {
   return (
     <Center>
-      <VStack spacing={3}>
-        <Spinner color="brand.purple" />
+      <VStack spacing={3} mt="3">
+        <LeapFrog size={32} speed={2.5} color="#4343E5" />
         <Text>{props.text}</Text>
       </VStack>
     </Center>
diff --git a/src/layout/header/categories.tsx b/src/layout/header/categories.tsx
index af69f48..549a0fb 100644
--- a/src/layout/header/categories.tsx
+++ b/src/layout/header/categories.tsx
@@ -2,13 +2,15 @@ import React from "react";
 import useSWR from "swr";
 import { getCategorySvgs } from "@/services";
 import CustomLink from "@/common/link";
-import { Box, Text } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
+import { RaceBy } from "@uiball/loaders";
 
 const Categories = () => {
   const { data, error } = useSWR(getCategorySvgs);
 
   if (error) return <div>failed to load</div>;
-  if (!data) return <div>loading...</div>;
+  if (!data)
+    return <RaceBy size={52} lineWeight={3} speed={1.4} color="#4343E5" />;
 
   return (
     <>