diff --git a/src/app/components/FetchApi.tsx b/src/app/components/FetchApi.tsx
new file mode 100644
index 0000000..006f5cd
--- /dev/null
+++ b/src/app/components/FetchApi.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { axiosInstance } from "@/app/lib/axios";
+import { useRef } from "react";
+
+export const FetchApi = () => {
+	const listRef = useRef<HTMLUListElement>(null);
+
+	const handleFetch = async () => {
+		const response = await axiosInstance.get<{
+			message: string;
+		}>("/ping");
+
+		const li = document.createElement("li");
+		li.textContent = response.data.message;
+		listRef.current?.appendChild(li);
+	};
+
+	return (
+		<div>
+			<button
+				className="text-white px-2 py-2 bg-green-500 rounded-md"
+				onClick={handleFetch}
+			>
+				Fetch API
+			</button>
+			<ul ref={listRef}></ul>
+		</div>
+	);
+};
diff --git a/src/lib/axios.ts b/src/app/lib/axios.ts
similarity index 100%
rename from src/lib/axios.ts
rename to src/app/lib/axios.ts
diff --git a/src/lib/stringUtils.ts b/src/app/lib/stringUtils.ts
similarity index 100%
rename from src/lib/stringUtils.ts
rename to src/app/lib/stringUtils.ts
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 99f6387..9c3151f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
 import Header from "./components/Header";
+import { FetchApi } from "./components/FetchApi";
 
 const HomePage = () => {
 	return (
 		<>
 			<Header />
+			<FetchApi />
 		</>
 	);
 };
diff --git a/src/types/env.d.ts b/src/app/types/env.d.ts
similarity index 100%
rename from src/types/env.d.ts
rename to src/app/types/env.d.ts
diff --git a/src/types/next-auth.d.ts b/src/app/types/next-auth.d.ts
similarity index 100%
rename from src/types/next-auth.d.ts
rename to src/app/types/next-auth.d.ts