diff --git a/frontend/VirtualCollection/.gitignore b/frontend/VirtualCollection/.gitignore
index ec8a36a..7958014 100644
--- a/frontend/VirtualCollection/.gitignore
+++ b/frontend/VirtualCollection/.gitignore
@@ -12,3 +12,4 @@ web-build/
 
 # macOS
 .DS_Store
+ios
diff --git a/frontend/VirtualCollection/__tests__/App.test.tsx b/frontend/VirtualCollection/__tests__/App.test.tsx
index b52fd1b..3598380 100644
--- a/frontend/VirtualCollection/__tests__/App.test.tsx
+++ b/frontend/VirtualCollection/__tests__/App.test.tsx
@@ -3,6 +3,8 @@ import renderer from 'react-test-renderer';
 
 import App from '../App';
 
+jest.mock('expo-linking');
+
 describe('<App />', () => {
     it('matches snapshot', () => {
         const tree = renderer.create(<App />).toJSON();
diff --git a/frontend/VirtualCollection/__tests__/__snapshots__/App.test.tsx.snap b/frontend/VirtualCollection/__tests__/__snapshots__/App.test.tsx.snap
index 438e23b..427233d 100644
--- a/frontend/VirtualCollection/__tests__/__snapshots__/App.test.tsx.snap
+++ b/frontend/VirtualCollection/__tests__/__snapshots__/App.test.tsx.snap
@@ -4,15 +4,423 @@ exports[`<App /> matches snapshot 1`] = `
 <View
   style={
     Object {
-      "alignItems": "center",
-      "backgroundColor": "#fff",
       "flex": 1,
-      "justifyContent": "center",
     }
   }
 >
-  <Text>
-    Open up App.js to start working on your app!
-  </Text>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "rgb(242, 242, 242)",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "rgb(255, 255, 255)",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  Login
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          pointerEvents="box-none"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "rgb(242, 242, 242)",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "flex": 1,
+                            "flexDirection": "column",
+                            "justifyContent": "center",
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "green",
+                              "borderRadius": 100,
+                              "height": 100,
+                              "width": 100,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "marginVertical": 30,
+                            }
+                          }
+                        >
+                          <Text
+                            style={
+                              Object {
+                                "fontSize": 20,
+                                "fontWeight": "900",
+                                "textAlign": "center",
+                              }
+                            }
+                          >
+                            Virtual Collection
+                          </Text>
+                          <Text
+                            style={
+                              Object {
+                                "color": "#57886C",
+                                "fontSize": 18,
+                                "fontWeight": "800",
+                                "textAlign": "center",
+                              }
+                            }
+                          >
+                            Explore with us
+                          </Text>
+                        </View>
+                        <View
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            Object {
+                              "backgroundColor": "#9CC69F",
+                              "borderRadius": 50,
+                              "paddingVertical": 12,
+                              "width": 250,
+                            }
+                          }
+                        >
+                          <Text
+                            style={
+                              Object {
+                                "textAlign": "center",
+                              }
+                            }
+                          >
+                            Login with Google
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
 </View>
 `;
diff --git a/frontend/VirtualCollection/app.json b/frontend/VirtualCollection/app.json
index d455291..150d883 100644
--- a/frontend/VirtualCollection/app.json
+++ b/frontend/VirtualCollection/app.json
@@ -16,9 +16,11 @@
         },
         "assetBundlePatterns": ["**/*"],
         "ios": {
-            "supportsTablet": true
+            "supportsTablet": true,
+            "bundleIdentifier": "com.app.floradora"
         },
         "android": {
+            "package": "com.app.floradora",
             "adaptiveIcon": {
                 "foregroundImage": "./assets/adaptive-icon.png",
                 "backgroundColor": "#FFFFFF"
@@ -26,6 +28,7 @@
         },
         "web": {
             "favicon": "./assets/favicon.png"
-        }
+        },
+        "scheme": "com.app.floradora"
     }
 }
diff --git a/frontend/VirtualCollection/index.js b/frontend/VirtualCollection/index.js
new file mode 100644
index 0000000..1d6e981
--- /dev/null
+++ b/frontend/VirtualCollection/index.js
@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
diff --git a/frontend/VirtualCollection/metro.config.js b/frontend/VirtualCollection/metro.config.js
new file mode 100644
index 0000000..035d04a
--- /dev/null
+++ b/frontend/VirtualCollection/metro.config.js
@@ -0,0 +1,5 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+import { getDefaultConfig } from 'expo/metro-config';
+
+// eslint-disable-next-line no-undef
+export default getDefaultConfig(__dirname);
diff --git a/frontend/VirtualCollection/package-lock.json b/frontend/VirtualCollection/package-lock.json
index 091a265..c5cf223 100644
--- a/frontend/VirtualCollection/package-lock.json
+++ b/frontend/VirtualCollection/package-lock.json
@@ -9,17 +9,24 @@
             "version": "1.0.0",
             "dependencies": {
                 "@expo/webpack-config": "^0.17.2",
+                "@react-native-community/masked-view": "^0.1.11",
                 "@react-navigation/native": "^6.1.3",
                 "@react-navigation/native-stack": "^6.9.9",
                 "@react-navigation/stack": "^6.3.12",
                 "expo": "~47.0.12",
                 "expo-auth-session": "~3.8.0",
+                "expo-constants": "~14.0.2",
                 "expo-random": "~13.0.0",
+                "expo-splash-screen": "~0.17.5",
                 "expo-status-bar": "~1.4.2",
                 "expo-web-browser": "~12.0.0",
                 "react": "18.1.0",
                 "react-dom": "18.1.0",
                 "react-native": "0.70.5",
+                "react-native-gesture-handler": "^2.9.0",
+                "react-native-reanimated": "^3.0.2",
+                "react-native-safe-area-context": "^4.5.0",
+                "react-native-screens": "^3.20.0",
                 "react-native-web": "~0.18.9"
             },
             "devDependencies": {
@@ -1348,6 +1355,20 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/plugin-transform-object-assign": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz",
+            "integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.18.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/@babel/plugin-transform-object-super": {
             "version": "7.18.6",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
@@ -1851,7 +1872,6 @@
             "version": "2.0.17",
             "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
             "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-            "peer": true,
             "dependencies": {
                 "@types/hammerjs": "^2.0.36"
             },
@@ -2339,6 +2359,77 @@
                 "node": ">=10"
             }
         },
+        "node_modules/@expo/configure-splash-screen": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@expo/configure-splash-screen/-/configure-splash-screen-0.6.0.tgz",
+            "integrity": "sha512-4DyPoNXJqx9bN4nEwF3HQreo//ECu7gDe1Xor3dnnzFm9P/VDxAKdbEhA0n+R6fgkNfT2onVHWijqvdpTS3Xew==",
+            "dependencies": {
+                "color-string": "^1.5.3",
+                "commander": "^5.1.0",
+                "fs-extra": "^9.0.0",
+                "glob": "^7.1.6",
+                "lodash": "^4.17.15",
+                "pngjs": "^5.0.0",
+                "xcode": "^3.0.0",
+                "xml-js": "^1.6.11"
+            },
+            "bin": {
+                "configure-splash-screen": "build/index-cli.js",
+                "expo-splash-screen": "build/index-cli.js"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@expo/configure-splash-screen/node_modules/commander": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+            "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/@expo/configure-splash-screen/node_modules/fs-extra": {
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+            "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+            "dependencies": {
+                "at-least-node": "^1.0.0",
+                "graceful-fs": "^4.2.0",
+                "jsonfile": "^6.0.1",
+                "universalify": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@expo/configure-splash-screen/node_modules/jsonfile": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+            "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+            "dependencies": {
+                "universalify": "^2.0.0"
+            },
+            "optionalDependencies": {
+                "graceful-fs": "^4.1.6"
+            }
+        },
+        "node_modules/@expo/configure-splash-screen/node_modules/pngjs": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+            "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/@expo/configure-splash-screen/node_modules/universalify": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+            "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+            "engines": {
+                "node": ">= 10.0.0"
+            }
+        },
         "node_modules/@expo/dev-server": {
             "version": "0.1.124",
             "resolved": "https://registry.npmjs.org/@expo/dev-server/-/dev-server-0.1.124.tgz",
@@ -6377,6 +6468,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@react-native-community/masked-view": {
+            "version": "0.1.11",
+            "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.11.tgz",
+            "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==",
+            "deprecated": "Repository was moved to @react-native-masked-view/masked-view",
+            "peerDependencies": {
+                "react": ">=16.0",
+                "react-native": ">=0.57"
+            }
+        },
         "node_modules/@react-native/assets": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
@@ -6658,8 +6759,7 @@
         "node_modules/@types/hammerjs": {
             "version": "2.0.41",
             "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-            "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
-            "peer": true
+            "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA=="
         },
         "node_modules/@types/html-minifier-terser": {
             "version": "5.1.2",
@@ -12458,6 +12558,18 @@
                 "expo": "*"
             }
         },
+        "node_modules/expo-splash-screen": {
+            "version": "0.17.5",
+            "resolved": "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-0.17.5.tgz",
+            "integrity": "sha512-ejSO78hwHXz8T9u8kh8t4r6CR4h70iBvA65gX8GK+dYxZl6/IANPbIb2VnUpND9vqfW+JnkDw+ZFst+gDnkpcQ==",
+            "dependencies": {
+                "@expo/configure-splash-screen": "^0.6.0",
+                "@expo/prebuild-config": "5.0.7"
+            },
+            "peerDependencies": {
+                "expo": "*"
+            }
+        },
         "node_modules/expo-status-bar": {
             "version": "1.4.2",
             "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.4.2.tgz",
@@ -13782,7 +13894,6 @@
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
             "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-            "peer": true,
             "dependencies": {
                 "react-is": "^16.7.0"
             }
@@ -13790,8 +13901,7 @@
         "node_modules/hoist-non-react-statics/node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-            "peer": true
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
         "node_modules/hosted-git-info": {
             "version": "3.0.8",
@@ -20045,6 +20155,11 @@
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
             "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
         },
+        "node_modules/lodash.isequal": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+            "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+        },
         "node_modules/lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -23029,7 +23144,6 @@
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
             "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-            "peer": true,
             "dependencies": {
                 "loose-envify": "^1.4.0",
                 "object-assign": "^4.1.1",
@@ -23039,8 +23153,7 @@
         "node_modules/prop-types/node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-            "peer": true
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
         "node_modules/proxy-addr": {
             "version": "2.0.7",
@@ -23591,7 +23704,6 @@
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
             "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==",
-            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -23667,7 +23779,6 @@
             "version": "2.9.0",
             "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
             "integrity": "sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==",
-            "peer": true,
             "dependencies": {
                 "@egjs/hammerjs": "^2.0.17",
                 "hoist-non-react-statics": "^3.3.0",
@@ -23685,21 +23796,38 @@
             "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
             "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
         },
+        "node_modules/react-native-reanimated": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.0.2.tgz",
+            "integrity": "sha512-8Et90yTI9yxchGbDP79k391XZqc/64zNbASbGy8X3Vgv4EbZ1M3IkKwcIbZmbVwpA804VJ6V9nJAGUh9fP0LrA==",
+            "dependencies": {
+                "@babel/plugin-transform-object-assign": "^7.16.7",
+                "@babel/preset-typescript": "^7.16.7",
+                "convert-source-map": "^1.7.0",
+                "invariant": "^2.2.4",
+                "lodash.isequal": "^4.5.0",
+                "setimmediate": "^1.0.5",
+                "string-hash-64": "^1.0.3"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0",
+                "react": "*",
+                "react-native": "*"
+            }
+        },
         "node_modules/react-native-safe-area-context": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz",
             "integrity": "sha512-0WORnk9SkREGUg2V7jHZbuN5x4vcxj/1B0QOcXJjdYWrzZHgLcUzYWWIUecUPJh747Mwjt/42RZDOaFn3L8kPQ==",
-            "peer": true,
             "peerDependencies": {
                 "react": "*",
                 "react-native": "*"
             }
         },
         "node_modules/react-native-screens": {
-            "version": "3.19.0",
-            "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.19.0.tgz",
-            "integrity": "sha512-Ehsmy7jr3H3j5pmN+/FqsAaIAD+k+xkcdePfLcg4rYRbN5X7fJPgaqhcmiCcZ0YxsU8ttsstP9IvRLNQuIkRRA==",
-            "peer": true,
+            "version": "3.20.0",
+            "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.20.0.tgz",
+            "integrity": "sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg==",
             "dependencies": {
                 "react-freeze": "^1.0.0",
                 "warn-once": "^0.1.0"
@@ -25491,6 +25619,11 @@
                 "safe-buffer": "~5.1.0"
             }
         },
+        "node_modules/string-hash-64": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz",
+            "integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw=="
+        },
         "node_modules/string-length": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -28562,6 +28695,17 @@
                 "uuid": "dist/bin/uuid"
             }
         },
+        "node_modules/xml-js": {
+            "version": "1.6.11",
+            "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+            "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+            "dependencies": {
+                "sax": "^1.2.4"
+            },
+            "bin": {
+                "xml-js": "bin/cli.js"
+            }
+        },
         "node_modules/xml-name-validator": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
@@ -29588,6 +29732,14 @@
                 "@babel/helper-plugin-utils": "^7.18.6"
             }
         },
+        "@babel/plugin-transform-object-assign": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz",
+            "integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.18.6"
+            }
+        },
         "@babel/plugin-transform-object-super": {
             "version": "7.18.6",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
@@ -29938,7 +30090,6 @@
             "version": "2.0.17",
             "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
             "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-            "peer": true,
             "requires": {
                 "@types/hammerjs": "^2.0.36"
             }
@@ -30323,6 +30474,58 @@
             "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-47.0.0.tgz",
             "integrity": "sha512-r0pWfuhkv7KIcXMUiNACJmJKKwlTBGMw9VZHNdppS8/0Nve8HZMTkNRFQzTHW1uH3pBj8jEXpyw/2vSWDHex9g=="
         },
+        "@expo/configure-splash-screen": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@expo/configure-splash-screen/-/configure-splash-screen-0.6.0.tgz",
+            "integrity": "sha512-4DyPoNXJqx9bN4nEwF3HQreo//ECu7gDe1Xor3dnnzFm9P/VDxAKdbEhA0n+R6fgkNfT2onVHWijqvdpTS3Xew==",
+            "requires": {
+                "color-string": "^1.5.3",
+                "commander": "^5.1.0",
+                "fs-extra": "^9.0.0",
+                "glob": "^7.1.6",
+                "lodash": "^4.17.15",
+                "pngjs": "^5.0.0",
+                "xcode": "^3.0.0",
+                "xml-js": "^1.6.11"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+                    "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg=="
+                },
+                "fs-extra": {
+                    "version": "9.1.0",
+                    "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+                    "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+                    "requires": {
+                        "at-least-node": "^1.0.0",
+                        "graceful-fs": "^4.2.0",
+                        "jsonfile": "^6.0.1",
+                        "universalify": "^2.0.0"
+                    }
+                },
+                "jsonfile": {
+                    "version": "6.1.0",
+                    "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+                    "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+                    "requires": {
+                        "graceful-fs": "^4.1.6",
+                        "universalify": "^2.0.0"
+                    }
+                },
+                "pngjs": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+                    "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+                },
+                "universalify": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+                    "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+                }
+            }
+        },
         "@expo/dev-server": {
             "version": "0.1.124",
             "resolved": "https://registry.npmjs.org/@expo/dev-server/-/dev-server-0.1.124.tgz",
@@ -33402,6 +33605,12 @@
                 "joi": "^17.2.1"
             }
         },
+        "@react-native-community/masked-view": {
+            "version": "0.1.11",
+            "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.11.tgz",
+            "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==",
+            "requires": {}
+        },
         "@react-native/assets": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
@@ -33641,8 +33850,7 @@
         "@types/hammerjs": {
             "version": "2.0.41",
             "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-            "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
-            "peer": true
+            "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA=="
         },
         "@types/html-minifier-terser": {
             "version": "5.1.2",
@@ -38129,6 +38337,15 @@
                 "base64-js": "^1.3.0"
             }
         },
+        "expo-splash-screen": {
+            "version": "0.17.5",
+            "resolved": "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-0.17.5.tgz",
+            "integrity": "sha512-ejSO78hwHXz8T9u8kh8t4r6CR4h70iBvA65gX8GK+dYxZl6/IANPbIb2VnUpND9vqfW+JnkDw+ZFst+gDnkpcQ==",
+            "requires": {
+                "@expo/configure-splash-screen": "^0.6.0",
+                "@expo/prebuild-config": "5.0.7"
+            }
+        },
         "expo-status-bar": {
             "version": "1.4.2",
             "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.4.2.tgz",
@@ -39135,7 +39352,6 @@
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
             "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-            "peer": true,
             "requires": {
                 "react-is": "^16.7.0"
             },
@@ -39143,8 +39359,7 @@
                 "react-is": {
                     "version": "16.13.1",
                     "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-                    "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-                    "peer": true
+                    "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
                 }
             }
         },
@@ -43869,6 +44084,11 @@
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
             "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
         },
+        "lodash.isequal": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+            "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+        },
         "lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -46280,7 +46500,6 @@
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
             "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-            "peer": true,
             "requires": {
                 "loose-envify": "^1.4.0",
                 "object-assign": "^4.1.1",
@@ -46290,8 +46509,7 @@
                 "react-is": {
                     "version": "16.13.1",
                     "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-                    "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-                    "peer": true
+                    "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
                 }
             }
         },
@@ -46704,7 +46922,6 @@
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
             "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==",
-            "peer": true,
             "requires": {}
         },
         "react-is": {
@@ -46781,7 +46998,6 @@
             "version": "2.9.0",
             "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
             "integrity": "sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==",
-            "peer": true,
             "requires": {
                 "@egjs/hammerjs": "^2.0.17",
                 "hoist-non-react-statics": "^3.3.0",
@@ -46795,18 +47011,30 @@
             "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
             "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
         },
+        "react-native-reanimated": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.0.2.tgz",
+            "integrity": "sha512-8Et90yTI9yxchGbDP79k391XZqc/64zNbASbGy8X3Vgv4EbZ1M3IkKwcIbZmbVwpA804VJ6V9nJAGUh9fP0LrA==",
+            "requires": {
+                "@babel/plugin-transform-object-assign": "^7.16.7",
+                "@babel/preset-typescript": "^7.16.7",
+                "convert-source-map": "^1.7.0",
+                "invariant": "^2.2.4",
+                "lodash.isequal": "^4.5.0",
+                "setimmediate": "^1.0.5",
+                "string-hash-64": "^1.0.3"
+            }
+        },
         "react-native-safe-area-context": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz",
             "integrity": "sha512-0WORnk9SkREGUg2V7jHZbuN5x4vcxj/1B0QOcXJjdYWrzZHgLcUzYWWIUecUPJh747Mwjt/42RZDOaFn3L8kPQ==",
-            "peer": true,
             "requires": {}
         },
         "react-native-screens": {
-            "version": "3.19.0",
-            "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.19.0.tgz",
-            "integrity": "sha512-Ehsmy7jr3H3j5pmN+/FqsAaIAD+k+xkcdePfLcg4rYRbN5X7fJPgaqhcmiCcZ0YxsU8ttsstP9IvRLNQuIkRRA==",
-            "peer": true,
+            "version": "3.20.0",
+            "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.20.0.tgz",
+            "integrity": "sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg==",
             "requires": {
                 "react-freeze": "^1.0.0",
                 "warn-once": "^0.1.0"
@@ -48249,6 +48477,11 @@
                 "safe-buffer": "~5.1.0"
             }
         },
+        "string-hash-64": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz",
+            "integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw=="
+        },
         "string-length": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -50639,6 +50872,14 @@
                 }
             }
         },
+        "xml-js": {
+            "version": "1.6.11",
+            "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+            "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+            "requires": {
+                "sax": "^1.2.4"
+            }
+        },
         "xml-name-validator": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
diff --git a/frontend/VirtualCollection/package.json b/frontend/VirtualCollection/package.json
index 49192c4..a72210a 100644
--- a/frontend/VirtualCollection/package.json
+++ b/frontend/VirtualCollection/package.json
@@ -1,11 +1,10 @@
 {
     "name": "virtualcollection",
     "version": "1.0.0",
-    "main": "node_modules/expo/AppEntry.js",
     "scripts": {
-        "start": "expo start",
-        "android": "expo start --android",
-        "ios": "expo start --ios",
+        "start": "expo start --dev-client",
+        "android": "expo run:android",
+        "ios": "expo run:ios",
         "web": "expo start --web",
         "lint": "eslint --ignore-path .eslintignore --ext .js,.ts,.tsx . && prettier --ignore-path .gitignore --check \"**/*.+(js|ts|json|tsx)\"",
         "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json|tsx)\"",
@@ -14,18 +13,25 @@
     },
     "dependencies": {
         "@expo/webpack-config": "^0.17.2",
+        "@react-native-community/masked-view": "^0.1.11",
         "@react-navigation/native": "^6.1.3",
         "@react-navigation/native-stack": "^6.9.9",
         "@react-navigation/stack": "^6.3.12",
         "expo": "~47.0.12",
+        "expo-auth-session": "~3.8.0",
+        "expo-constants": "~14.0.2",
+        "expo-random": "~13.0.0",
+        "expo-splash-screen": "~0.17.5",
         "expo-status-bar": "~1.4.2",
+        "expo-web-browser": "~12.0.0",
         "react": "18.1.0",
         "react-dom": "18.1.0",
         "react-native": "0.70.5",
-        "react-native-web": "~0.18.9",
-        "expo-auth-session": "~3.8.0",
-        "expo-random": "~13.0.0",
-        "expo-web-browser": "~12.0.0"
+        "react-native-gesture-handler": "^2.9.0",
+        "react-native-reanimated": "^3.0.2",
+        "react-native-safe-area-context": "^4.5.0",
+        "react-native-screens": "^3.20.0",
+        "react-native-web": "~0.18.9"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",
@@ -49,6 +55,12 @@
         "preset": "jest-expo",
         "transformIgnorePatterns": [
             "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
+        ],
+        "moduleFileExtensions": [
+            "tsx",
+            "ts",
+            "js",
+            "jsx"
         ]
     },
     "private": true
diff --git a/frontend/VirtualCollection/src/pages/LoginPage.tsx b/frontend/VirtualCollection/src/pages/LoginPage.tsx
index 96fcbe7..aabd79f 100644
--- a/frontend/VirtualCollection/src/pages/LoginPage.tsx
+++ b/frontend/VirtualCollection/src/pages/LoginPage.tsx
@@ -1,8 +1,48 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { ButtonStyle, Colors, Spacings, Texts } from '../styles';
-import { AppStackProps } from './types';
 
-export default function LoginPage({ navigation }: AppStackProps) {
+import * as Google from 'expo-auth-session/providers/google';
+import * as WebBrowser from 'expo-web-browser';
+import { useEffect, useState } from 'react';
+
+WebBrowser.maybeCompleteAuthSession();
+
+export default function LoginPage() {
+    const [token, setToken] = useState('');
+    const [userInfo, setUserInfo] = useState(null);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [request, response, promptAsync] = Google.useAuthRequest({
+        expoClientId: '485163119792-dbqlktvmh8046q5jaef2ton1riuvq9hs',
+        iosClientId: '485163119792-dbqlktvmh8046q5jaef2ton1riuvq9hs.apps.googleusercontent.com',
+        androidClientId: '485163119792-odmfe32gi9mgrib6qc953ctvgoq6p0kd.apps.googleusercontent.com',
+        redirectUri: 'com.app.floradora:/oauthredirect',
+    });
+
+    useEffect(() => {
+        if (response?.type === 'success') {
+            const token = response.authentication?.accessToken;
+            if (token) {
+                setToken(token);
+                getUserInfo();
+            }
+        }
+    }, [response, token]);
+
+    const getUserInfo = async () => {
+        try {
+            const response = await fetch('https://www.googleapis.com/userinfo/v2/me', {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+
+            const user = await response.json();
+            setUserInfo(user);
+        } catch (error) {
+            // Add your own error handler here
+        }
+        console.log(userInfo);
+    };
+
     return (
         <View style={styles.pageContainer}>
             <View style={styles.circle}></View>
@@ -10,7 +50,7 @@ export default function LoginPage({ navigation }: AppStackProps) {
                 <Text style={styles.titleText}>Virtual Collection</Text>
                 <Text style={styles.subheadingText}>Explore with us</Text>
             </View>
-            <Pressable style={styles.loginButton} onPress={() => navigation.navigate('Home')}>
+            <Pressable style={styles.loginButton} onPress={() => promptAsync()}>
                 <Text style={styles.loginButtonText}>Login with Google</Text>
             </Pressable>
         </View>