diff --git a/components/UserNameForm.tsx b/components/UserNameForm.tsx
index e665697..c9f3c5e 100644
--- a/components/UserNameForm.tsx
+++ b/components/UserNameForm.tsx
@@ -1,4 +1,3 @@
-import AntDesign from '@expo/vector-icons/AntDesign';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'expo-router';
 import React, { useEffect } from 'react';
@@ -7,6 +6,7 @@ import { View, TouchableOpacity, KeyboardAvoidingView, Platform, ScrollView } fr
 import { z } from 'zod';
 
 import { useUserStore } from '../store/useUserStore';
+import RightCircleSvg from './atoms/Icons/RightCircle';
 
 import { Text, TextInput } from '~/components/atoms';
 
@@ -110,7 +110,7 @@ export default function UserNameForm() {
           disabled={!isValid}
           style={{ opacity: isValid ? 1 : 0.4 }} // Add this line
         >
-          <AntDesign name="rightcircle" size={56} color="#523AE4" />
+          <RightCircleSvg />
         </TouchableOpacity>
       </View>
     </KeyboardAvoidingView>
diff --git a/components/atoms/Button.tsx b/components/atoms/Button.tsx
index 31a7a5b..d337952 100644
--- a/components/atoms/Button.tsx
+++ b/components/atoms/Button.tsx
@@ -13,14 +13,9 @@ export const Button = forwardRef<TouchableOpacity, ButtonProps>(
       <TouchableOpacity
         ref={ref}
         {...touchableProps}
-        className={`${styles.button} ${touchableProps.className}`}>
-        <Text className={styles.buttonText}>{title}</Text>
+        className={`items-center justify-center rounded-[28px] bg-primary p-4 shadow-md ${touchableProps.className}`}>
+        <Text className="text-center text-lg font-semibold text-white">{title}</Text>
       </TouchableOpacity>
     );
   }
 );
-
-const styles = {
-  button: 'items-center bg-indigo-500 rounded-[28px] shadow-md p-4',
-  buttonText: 'text-white text-lg font-semibold text-center',
-};
diff --git a/components/atoms/Icons/RightCircle.tsx b/components/atoms/Icons/RightCircle.tsx
new file mode 100644
index 0000000..22d6ffb
--- /dev/null
+++ b/components/atoms/Icons/RightCircle.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Svg, { Rect, Path } from 'react-native-svg';
+
+interface RightCircleSvgProps {
+  width?: number;
+  height?: number;
+  backgroundFill?: string;
+  arrowFill?: string;
+  [key: string]: any;
+}
+
+const RightCircleSvg: React.FC<RightCircleSvgProps> = ({
+  width = 64,
+  height = 64,
+  backgroundFill = '#523AE4',
+  arrowFill = '#FAFAFA',
+  ...props
+}) => (
+  <Svg width={width} height={height} viewBox="0 0 64 64" fill="none" {...props}>
+    <Rect x={4} y={2} width={56} height={56} rx={28} fill={backgroundFill} />
+    <Path
+      d="M26.918 20.87a1.334 1.334 0 0 0 0 1.803l7.46 7.33-7.459 7.328a1.334 1.334 0 0 0 0 1.801 1.334 1.334 0 0 0 1.769.001L38 30l-9.311-9.131a1.334 1.334 0 0 0-1.771.001Z"
+      fill={arrowFill}
+    />
+  </Svg>
+);
+
+export default RightCircleSvg;
diff --git a/components/atoms/index.ts b/components/atoms/index.ts
index f7ec4d3..6782280 100644
--- a/components/atoms/index.ts
+++ b/components/atoms/index.ts
@@ -1,5 +1,4 @@
 export { Text } from './Text';
 export { TextInput } from './TextInput';
-
 export { TalkSvg } from './Icons/Talk';
 export { Button } from './Button';