diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
index 229914d..a301980 100644
--- a/src/components/Home/Home.tsx
+++ b/src/components/Home/Home.tsx
@@ -1,12 +1,11 @@
 import styles from "@/components/Home/Home.module.scss";
+import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
+import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
-import { useRoute } from "@/hooks/common/useRoute";
-
 const Home = () => {
-  // 이후 네이티브 라우팅으로 변경
-  const { navigateToReceiptEdit, navigateToRecognitionFail } = useRoute();
+  const { send } = useAppBridge();
 
   return (
     <div className={styles.Home}>
@@ -22,8 +21,16 @@ const Home = () => {
         <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
       </div>
       <div className={styles.HomeBottom}>
-        <IconButton text="갤러리" iconName="gallery" onClick={navigateToRecognitionFail} />
-        <IconButton text="카메라" iconName="camera" onClick={navigateToReceiptEdit} />
+        <IconButton
+          text="갤러리"
+          iconName="gallery"
+          onClick={() => send({ type: AppBridgeMessageType.OPEN_GALLERY })}
+        />
+        <IconButton
+          text="카메라"
+          iconName="camera"
+          onClick={() => send({ type: AppBridgeMessageType.OPEN_CAMERA })}
+        />
       </div>
     </div>
   );
diff --git a/src/components/provider/AppBridgeProvider/convertToNativeMessage.ts b/src/components/provider/AppBridgeProvider/convertToNativeMessage.ts
index 18d1b9a..8434239 100644
--- a/src/components/provider/AppBridgeProvider/convertToNativeMessage.ts
+++ b/src/components/provider/AppBridgeProvider/convertToNativeMessage.ts
@@ -24,6 +24,7 @@ const androidHandlers = {
 
 export function convertToIOSAppBridge(message: AppBridgeMessage) {
   const handler = iosHandlers[message.type];
+
   if (handler) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handler(message as any);
@@ -34,6 +35,7 @@ export function convertToIOSAppBridge(message: AppBridgeMessage) {
 
 export function convertToAndroidAppBridge(message: AppBridgeMessage) {
   const handler = androidHandlers[message.type];
+
   if (handler) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handler(message as any);
diff --git a/src/main.tsx b/src/main.tsx
index ae5863d..3a49d45 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,7 +5,9 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import AppRouter from "@/router/AppRouter";
 
+import { AppBridgeProvider } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
 import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider";
+import { UserAgentProvider } from "@/components/provider/UserAgentProvider";
 
 import "@/styles/reset.scss";
 import "@/styles/global.scss";
@@ -13,8 +15,12 @@ import "@/styles/global.scss";
 ReactDom.createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ReactQueryClientProvider>
-      <AppRouter />
-      <ReactQueryDevtools initialIsOpen={false} />
+      <UserAgentProvider>
+        <AppBridgeProvider>
+          <AppRouter />
+          <ReactQueryDevtools initialIsOpen={false} />
+        </AppBridgeProvider>
+      </UserAgentProvider>
     </ReactQueryClientProvider>
   </StrictMode>,
 );