diff --git a/app/(index,search,profile,login)/_layout.tsx b/app/(index,search,profile,login)/_layout.tsx
new file mode 100644
index 0000000..9aae952
--- /dev/null
+++ b/app/(index,search,profile,login)/_layout.tsx
@@ -0,0 +1,93 @@
+import { Stack } from "expo-router";
+import Head from "expo-router/head";
+import { Platform, PlatformColor, TouchableOpacity } from "react-native";
+import * as Share from "expo-sharing";
+import { Icon } from "@/components/icon";
+
+export const unstable_settings = {
+	initialRouteName: "index",
+	search: {
+		initialRouteName: "search",
+	},
+	profile: {
+		initialRouteName: "profile",
+	},
+	login: {
+		initialRouteName: "login",
+	},
+	avatar: {
+		initialRouteName: "avatar"
+	},
+};
+
+export default function DynamicLayout() {
+	return (
+		<Stack
+			screenOptions={{
+				headerTransparent: true,
+				headerLargeTitle: true,
+				headerLargeTitleShadowVisible: true,
+				// @ts-ignore 
+				headerLargeStyle: {
+					backgroundColor: PlatformColor("systemGroupedBackgroundColor"),
+				},
+				headerBlurEffect: "prominent",
+				headerShadowVisible: true,
+				headerStyle: {
+					backgroundColor: "rgba(255, 255, 255, 0.01)",
+				},
+				headerRight(props) {
+					if (isSharingAvailable()) {
+						return (
+							<ShareButton
+								{...props}
+							/>
+						);
+					} else {
+						return null;
+					}
+				},
+			}}
+		/>
+	);
+}
+function safeLocation() {
+	if (typeof window === "undefined") {
+		return "";
+	}
+	return window.location.toString();
+}
+
+const useLink = Head.useLink
+	? Head.useLink
+	: () => ({
+		url: safeLocation(),
+	});
+
+function ShareButton(props) {
+	const link = useLink?.();
+	const url = link?.url ?? safeLocation();
+	return (
+		<TouchableOpacity
+			activeOpacity={0.8}
+			onPress={() => {
+				Share.share({
+					url,
+				});
+			}}
+		>
+			{/* <Icon name="share" fill={props.tintColor} width={24} height={24} /> */}
+		</TouchableOpacity>
+	);
+}
+
+function isSharingAvailable() {
+	if (Platform.OS === "web") {
+		if (typeof navigator === "undefined") {
+			return false;
+		}
+
+		return !!navigator.share;
+	}
+	return true;
+}
diff --git a/app/(index,search,profile,login)/_layout.web.tsx b/app/(index,search,profile,login)/_layout.web.tsx
new file mode 100644
index 0000000..e820044
--- /dev/null
+++ b/app/(index,search,profile,login)/_layout.web.tsx
@@ -0,0 +1,93 @@
+import { Stack } from "expo-router";
+import Head from "expo-router/head";
+import { Platform, PlatformColor, TouchableOpacity } from "react-native";
+import * as Share from "expo-sharing";
+import { Icon } from "@/components/icon";
+
+export const unstable_settings = {
+	initialRouteName: "index",
+	search: {
+		initialRouteName: "search",
+	},
+	profile: {
+		initialRouteName: "profile",
+	},
+	login: {
+		initialRouteName: "login",
+	},
+	avatar: {
+		initialRouteName: "avatar"
+	},
+};
+
+export default function DynamicLayout() {
+	return (
+		<Stack
+			screenOptions={{
+				headerTransparent: true,
+				headerLargeTitle: true,
+				headerLargeTitleShadowVisible: true,
+				// @ts-ignore 
+				headerLargeStyle: {
+					// backgroundColor: PlatformColor("systemGroupedBackgroundColor"),
+				},
+				headerBlurEffect: "prominent",
+				headerShadowVisible: true,
+				headerStyle: {
+					backgroundColor: "rgba(255, 255, 255, 0.01)",
+				},
+				headerRight(props) {
+					if (isSharingAvailable()) {
+						return (
+							<ShareButton
+								{...props}
+							/>
+						);
+					} else {
+						return null;
+					}
+				},
+			}}
+		/>
+	);
+}
+function safeLocation() {
+	if (typeof window === "undefined") {
+		return "";
+	}
+	return window.location.toString();
+}
+
+const useLink = Head.useLink
+	? Head.useLink
+	: () => ({
+		url: safeLocation(),
+	});
+
+function ShareButton(props) {
+	const link = useLink?.();
+	const url = link?.url ?? safeLocation();
+	return (
+		<TouchableOpacity
+			activeOpacity={0.8}
+			onPress={() => {
+				Share.share({
+					url,
+				});
+			}}
+		>
+			{/* <Icon name="share" fill={props.tintColor} width={24} height={24} /> */}
+		</TouchableOpacity>
+	);
+}
+
+function isSharingAvailable() {
+	if (Platform.OS === "web") {
+		if (typeof navigator === "undefined") {
+			return false;
+		}
+
+		return !!navigator.share;
+	}
+	return true;
+}
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 08ff838..1a6aaab 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -238,7 +238,7 @@ const LayoutApp = () => {
 				<Tabs.Screen
 					name="(index)"
 					options={{
-						title: "Home",
+						title: "MeloCap",
 						tabBarIcon: makeIcon(
 							"home",
 							"home-active",
@@ -276,16 +276,6 @@ const LayoutApp = () => {
 						),
 					}}
 				/>
-				<Tabs.Screen
-					name="(avatar)"
-					options={{
-						title: "Avatar",
-						tabBarIcon: makeIcon(
-							"share",
-							"share",
-						),
-					}}
-				/>
 			</Tabs>
 		</GestureHandlerRootView>
 	);
diff --git a/data/index.tsx b/data/index.tsx
index 0d26e37..b774a76 100644
--- a/data/index.tsx
+++ b/data/index.tsx
@@ -249,4 +249,127 @@ export const DATA = [
 			},
 		],
 	},
+	{
+		id: "6f7g8h9",
+		name: "Music Maniacs",
+		description: "Join us to connect with fellow music enthusiasts",
+		image: "https://picsum.photos/seed/696/3000/2000",
+		subGroups: [
+			{
+				id: "6fh9i1",
+				name: "Rock and Roll",
+				description: "Have fun.",
+				image: "https://picsum.photos/seed/696/3000/2000",
+			},
+			{
+				id: "6f7gh9i3",
+				name: "Jazz Vibes",
+				description: "Join for cool vibes.",
+				image: "https://picsum.photos/200/300?random=",
+			},
+		],
+	},
+	{
+		id: "6f7g8hi",
+		name: "Music Maniacs",
+		description: "Join us to connect with fellow music enthusiasts",
+		image: "https://picsum.photos/seed/696/3000/2000",
+		subGroups: [
+			{
+				id: "6f7g9i1",
+				name: "Rock and Roll",
+				description: "Have fun.",
+				image: "https://picsum.photos/seed/696/3000/2000",
+			},
+		],
+	},
+	{
+		id: "6f78h9i",
+		name: "Music Maniacs",
+		description: "Join us to connect with fellow music enthusiasts",
+		image: "https://picsum.photos/seed/696/3000/2000",
+		subGroups: [
+			{
+				id: "67g8h9i1",
+				name: "Rock and Roll",
+				description: "Have fun.",
+				image: "https://picsum.photos/seed/696/3000/2000",
+			},
+			{
+				id: "6f7gh9i2",
+				name: "Classical Harmony",
+				description: "Millenial",
+				image: "https://picsum.photos/seed/696/3000/2000",
+			},
+			{
+				id: "7g8h9i3",
+				name: "Jazz Vibes",
+				description: "Join for cool vibes.",
+				image: "https://picsum.photos/200/300?random=",
+			},
+		],
+	},
+	{
+		id: "4d56f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4dzze6f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4d5ea6f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4d5te6f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4d5e6ff7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4d5xxe6f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4d5exs6f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4d5esx6f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
+	{
+		id: "4d5elll6f7g",
+		name: "Travel Buddies",
+		description: "We are sharing travel experiences and tips.",
+		image: "https://example.com/images/travel-buddies.jpg",
+		subGroups: [],
+	},
 ];