diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..d055112
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,32 @@
+import { Button, Typography } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import { Container } from "./Container";
+import { ArrowBack } from "@mui/icons-material";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { useNavigation } from "@react-navigation/native";
+import { StackParamsList } from "../types";
+
+export const Layout: React.FC<PropsWithChildren<{ title: string }>> = ({
+  children,
+  title,
+}) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<StackParamsList>>();
+
+  return (
+    <Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
+      <Button
+        startIcon={<ArrowBack />}
+        color="info"
+        sx={{ mb: 4 }}
+        onClick={() => navigation.navigate("Home")}
+      >
+        Home
+      </Button>
+      <Typography variant="h4" sx={{ mb: 4 }}>
+        {title}
+      </Typography>
+      <Container>{children}</Container>
+    </Container>
+  );
+};
diff --git a/src/screens/AddNetwork.tsx b/src/screens/AddNetwork.tsx
index e8b1a80..ee0cd68 100644
--- a/src/screens/AddNetwork.tsx
+++ b/src/screens/AddNetwork.tsx
@@ -29,10 +29,9 @@ import {
   getInternetCredentials,
   setInternetCredentials,
 } from "../utils/key-store";
-import { Button, Divider, Grid, Typography } from "@mui/material";
-import { Container } from "../components/Container";
-import { ArrowBack } from "@mui/icons-material";
+import { Divider, Grid } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
+import { Layout } from "../components/Layout";
 
 const ethNetworkDataSchema = z.object({
   chainId: z.string().nonempty({ message: EMPTY_FIELD_ERROR }),
@@ -214,141 +213,154 @@ const AddNetwork = () => {
   }, [namespace, reset]);
 
   return (
-    <Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
-      <Button
-        startIcon={<ArrowBack />}
-        color="info"
-        sx={{ mb: 4 }}
-        onClick={() => navigation.navigate("Home")}
-      >
-        Home
-      </Button>
-      <Typography variant="h4" sx={{ mb: 4 }}>
-        Add Network
-      </Typography>
-      <Container>
-        <SelectNetworkType updateNetworkType={updateNetworkType} />
-        <Divider flexItem sx={{ my: 4 }} />
+    <Layout title="Add Network">
+      <SelectNetworkType updateNetworkType={updateNetworkType} />
+      <Divider flexItem sx={{ my: 4 }} />
 
-        <Grid container spacing={2} sx={{ px: 1 }}>
-          <Grid item xs={6}>
+      <Grid container spacing={2} sx={{ px: 1 }}>
+        <Grid item xs={6}>
+          <Controller
+            control={control}
+            name="chainId"
+            defaultValue=""
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  value={value}
+                  label="Chain ID"
+                  onBlur={onBlur}
+                  onChangeText={(textValue) => onChange(textValue)}
+                />
+                <HelperText type="error">{errors.chainId?.message}</HelperText>
+              </>
+            )}
+          />
+        </Grid>
+
+        <Grid item xs={6}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="networkName"
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  label="Network Name"
+                  value={value}
+                  onBlur={onBlur}
+                  onChangeText={(textValue) => onChange(textValue)}
+                />
+                <HelperText type="error">
+                  {errors.networkName?.message}
+                </HelperText>
+              </>
+            )}
+          />
+        </Grid>
+
+        <Grid item xs={6}>
+          <Controller
+            control={control}
+            name="rpcUrl"
+            defaultValue=""
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  label="New RPC URL"
+                  onBlur={onBlur}
+                  value={value}
+                  onChangeText={(textValue) => onChange(textValue)}
+                />
+                <HelperText type="error">{errors.rpcUrl?.message}</HelperText>
+              </>
+            )}
+          />
+        </Grid>
+
+        <Grid item xs={6}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="blockExplorerUrl"
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  value={value}
+                  label="Block Explorer URL  (Optional)"
+                  onBlur={onBlur}
+                  onChangeText={(textValue) => onChange(textValue)}
+                />
+                <HelperText type="error">
+                  {errors.blockExplorerUrl?.message}
+                </HelperText>
+              </>
+            )}
+          />
+        </Grid>
+        <Grid item xs={namespace === EIP155 ? 12 : 6}>
+          <Controller
+            control={control}
+            name="coinType"
+            defaultValue=""
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  value={value}
+                  label="Coin Type"
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                />
+                <HelperText type="error">{errors.coinType?.message}</HelperText>
+              </>
+            )}
+          />
+        </Grid>
+        {namespace === EIP155 ? (
+          <Grid item xs={12}>
             <Controller
               control={control}
-              name="chainId"
+              name="currencySymbol"
               defaultValue=""
               render={({ field: { onChange, onBlur, value } }) => (
                 <>
                   <TextInput
                     mode="outlined"
                     value={value}
-                    label="Chain ID"
+                    label="Currency Symbol"
                     onBlur={onBlur}
                     onChangeText={(textValue) => onChange(textValue)}
                   />
                   <HelperText type="error">
-                    {errors.chainId?.message}
+                    {
+                      (
+                        errors as FieldErrors<
+                          z.infer<typeof ethNetworkDataSchema>
+                        >
+                      ).currencySymbol?.message
+                    }
                   </HelperText>
                 </>
               )}
             />
           </Grid>
-
-          <Grid item xs={6}>
-            <Controller
-              control={control}
-              defaultValue=""
-              name="networkName"
-              render={({ field: { onChange, onBlur, value } }) => (
-                <>
-                  <TextInput
-                    mode="outlined"
-                    label="Network Name"
-                    value={value}
-                    onBlur={onBlur}
-                    onChangeText={(textValue) => onChange(textValue)}
-                  />
-                  <HelperText type="error">
-                    {errors.networkName?.message}
-                  </HelperText>
-                </>
-              )}
-            />
-          </Grid>
-
-          <Grid item xs={6}>
-            <Controller
-              control={control}
-              name="rpcUrl"
-              defaultValue=""
-              render={({ field: { onChange, onBlur, value } }) => (
-                <>
-                  <TextInput
-                    mode="outlined"
-                    label="New RPC URL"
-                    onBlur={onBlur}
-                    value={value}
-                    onChangeText={(textValue) => onChange(textValue)}
-                  />
-                  <HelperText type="error">{errors.rpcUrl?.message}</HelperText>
-                </>
-              )}
-            />
-          </Grid>
-
-          <Grid item xs={6}>
-            <Controller
-              control={control}
-              defaultValue=""
-              name="blockExplorerUrl"
-              render={({ field: { onChange, onBlur, value } }) => (
-                <>
-                  <TextInput
-                    mode="outlined"
-                    value={value}
-                    label="Block Explorer URL  (Optional)"
-                    onBlur={onBlur}
-                    onChangeText={(textValue) => onChange(textValue)}
-                  />
-                  <HelperText type="error">
-                    {errors.blockExplorerUrl?.message}
-                  </HelperText>
-                </>
-              )}
-            />
-          </Grid>
-          <Grid item xs={namespace === EIP155 ? 12 : 6}>
-            <Controller
-              control={control}
-              name="coinType"
-              defaultValue=""
-              render={({ field: { onChange, onBlur, value } }) => (
-                <>
-                  <TextInput
-                    mode="outlined"
-                    value={value}
-                    label="Coin Type"
-                    onBlur={onBlur}
-                    onChangeText={onChange}
-                  />
-                  <HelperText type="error">
-                    {errors.coinType?.message}
-                  </HelperText>
-                </>
-              )}
-            />
-          </Grid>
-          {namespace === EIP155 ? (
-            <Grid item xs={12}>
+        ) : (
+          <>
+            <Grid item xs={6}>
               <Controller
                 control={control}
-                name="currencySymbol"
+                name="nativeDenom"
                 defaultValue=""
                 render={({ field: { onChange, onBlur, value } }) => (
                   <>
                     <TextInput
                       mode="outlined"
                       value={value}
-                      label="Currency Symbol"
+                      label="Native Denom"
                       onBlur={onBlur}
                       onChangeText={(textValue) => onChange(textValue)}
                     />
@@ -356,112 +368,82 @@ const AddNetwork = () => {
                       {
                         (
                           errors as FieldErrors<
-                            z.infer<typeof ethNetworkDataSchema>
+                            z.infer<typeof cosmosNetworkDataSchema>
                           >
-                        ).currencySymbol?.message
+                        ).nativeDenom?.message
                       }
                     </HelperText>
                   </>
                 )}
               />
             </Grid>
-          ) : (
-            <>
-              <Grid item xs={6}>
-                <Controller
-                  control={control}
-                  name="nativeDenom"
-                  defaultValue=""
-                  render={({ field: { onChange, onBlur, value } }) => (
-                    <>
-                      <TextInput
-                        mode="outlined"
-                        value={value}
-                        label="Native Denom"
-                        onBlur={onBlur}
-                        onChangeText={(textValue) => onChange(textValue)}
-                      />
-                      <HelperText type="error">
-                        {
-                          (
-                            errors as FieldErrors<
-                              z.infer<typeof cosmosNetworkDataSchema>
-                            >
-                          ).nativeDenom?.message
-                        }
-                      </HelperText>
-                    </>
-                  )}
-                />
-              </Grid>
-              <Grid item xs={6}>
-                <Controller
-                  control={control}
-                  name="addressPrefix"
-                  defaultValue=""
-                  render={({ field: { onChange, onBlur, value } }) => (
-                    <>
-                      <TextInput
-                        mode="outlined"
-                        value={value}
-                        label="Address Prefix"
-                        onBlur={onBlur}
-                        onChangeText={(textValue) => onChange(textValue)}
-                      />
-                      <HelperText type="error">
-                        {
-                          (
-                            errors as FieldErrors<
-                              z.infer<typeof cosmosNetworkDataSchema>
-                            >
-                          ).addressPrefix?.message
-                        }
-                      </HelperText>
-                    </>
-                  )}
-                />
-              </Grid>
-              <Grid item xs={6}>
-                <Controller
-                  control={control}
-                  name="gasPrice"
-                  defaultValue=""
-                  render={({ field: { onChange, onBlur, value } }) => (
-                    <>
-                      <TextInput
-                        mode="outlined"
-                        value={value}
-                        label="Gas Price"
-                        onBlur={onBlur}
-                        onChangeText={onChange}
-                      />
-                      <HelperText type="error">
-                        {
-                          (
-                            errors as FieldErrors<
-                              z.infer<typeof cosmosNetworkDataSchema>
-                            >
-                          ).gasPrice?.message
-                        }
-                      </HelperText>
-                    </>
-                  )}
-                />
-              </Grid>
-            </>
-          )}
-        </Grid>
-        <LoadingButton
-          variant="contained"
-          loading={isSubmitting}
-          disabled={isSubmitting}
-          onClick={handleSubmit(submit)}
-          sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }}
-        >
-          {isSubmitting ? "Adding" : "Submit"}
-        </LoadingButton>
-      </Container>
-    </Container>
+            <Grid item xs={6}>
+              <Controller
+                control={control}
+                name="addressPrefix"
+                defaultValue=""
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <>
+                    <TextInput
+                      mode="outlined"
+                      value={value}
+                      label="Address Prefix"
+                      onBlur={onBlur}
+                      onChangeText={(textValue) => onChange(textValue)}
+                    />
+                    <HelperText type="error">
+                      {
+                        (
+                          errors as FieldErrors<
+                            z.infer<typeof cosmosNetworkDataSchema>
+                          >
+                        ).addressPrefix?.message
+                      }
+                    </HelperText>
+                  </>
+                )}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <Controller
+                control={control}
+                name="gasPrice"
+                defaultValue=""
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <>
+                    <TextInput
+                      mode="outlined"
+                      value={value}
+                      label="Gas Price"
+                      onBlur={onBlur}
+                      onChangeText={onChange}
+                    />
+                    <HelperText type="error">
+                      {
+                        (
+                          errors as FieldErrors<
+                            z.infer<typeof cosmosNetworkDataSchema>
+                          >
+                        ).gasPrice?.message
+                      }
+                    </HelperText>
+                  </>
+                )}
+              />
+            </Grid>
+          </>
+        )}
+      </Grid>
+      <LoadingButton
+        variant="contained"
+        loading={isSubmitting}
+        disabled={isSubmitting}
+        onClick={handleSubmit(submit)}
+        sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }}
+      >
+        {isSubmitting ? "Adding" : "Submit"}
+      </LoadingButton>
+    </Layout>
   );
 };
 
diff --git a/src/screens/EditNetwork.tsx b/src/screens/EditNetwork.tsx
index 2cf11bd..e82482a 100644
--- a/src/screens/EditNetwork.tsx
+++ b/src/screens/EditNetwork.tsx
@@ -20,10 +20,9 @@ import {
   EMPTY_FIELD_ERROR,
   INVALID_URL_ERROR,
 } from "../utils/constants";
-import { Container } from "../components/Container";
-import { Button, Divider, Grid, Typography } from "@mui/material";
+import { Divider, Grid, Typography } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
-import { ArrowBack } from "@mui/icons-material";
+import { Layout } from "../components/Layout";
 
 const ethNetworksFormSchema = z.object({
   // Adding type field for resolving typescript error
@@ -99,127 +98,114 @@ const EditNetwork = ({ route }: EditNetworkProps) => {
   const isCosmos = networkData.namespace === COSMOS;
 
   return (
-    <Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
-      <Button
-        startIcon={<ArrowBack />}
-        color="info"
-        sx={{ mb: 4 }}
-        onClick={() => navigation.navigate("Home")}
-      >
-        Home
-      </Button>
-      <Typography variant="h4" sx={{ mb: 4 }}>
-        Edit Network
+    <Layout title="Edit Network">
+      <Typography fontSize="1.5rem" fontWeight={500}>
+        Edit {networkData?.networkName} details
       </Typography>
-      <Container>
-        <Typography fontSize="1.5rem" fontWeight={500}>
-          Edit {networkData?.networkName} details
-        </Typography>
-        <Divider flexItem sx={{ my: 4 }} />
-        <Grid container spacing={2}>
-          <Grid item xs={6}>
-            <Controller
-              control={control}
-              defaultValue={networkData.networkName}
-              name="networkName"
-              render={({ field: { onChange, onBlur, value } }) => (
-                <>
-                  <TextInput
-                    mode="outlined"
-                    label="Network Name"
-                    value={value}
-                    onBlur={onBlur}
-                    onChangeText={(textValue) => onChange(textValue)}
-                  />
-                  <HelperText type="error">
-                    {errors.networkName?.message}
-                  </HelperText>
-                </>
-              )}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <Controller
-              control={control}
-              name="rpcUrl"
-              defaultValue={networkData.rpcUrl}
-              render={({ field: { onChange, onBlur, value } }) => (
-                <>
-                  <TextInput
-                    mode="outlined"
-                    label="New RPC URL"
-                    onBlur={onBlur}
-                    value={value}
-                    onChangeText={(textValue) => onChange(textValue)}
-                  />
-                  <HelperText type="error">{errors.rpcUrl?.message}</HelperText>
-                </>
-              )}
-            />
-          </Grid>
-
-          <Grid item xs={isCosmos ? 6 : 12}>
-            <Controller
-              control={control}
-              defaultValue={networkData.blockExplorerUrl}
-              name="blockExplorerUrl"
-              render={({ field: { onChange, onBlur, value } }) => (
-                <>
-                  <TextInput
-                    mode="outlined"
-                    value={value}
-                    label="Block Explorer URL  (Optional)"
-                    onBlur={onBlur}
-                    onChangeText={(textValue) => onChange(textValue)}
-                  />
-                  <HelperText type="error">
-                    {errors.blockExplorerUrl?.message}
-                  </HelperText>
-                </>
-              )}
-            />
-          </Grid>
-          {isCosmos && (
-            <Grid item xs={6}>
-              <Controller
-                control={control}
-                name="gasPrice"
-                defaultValue={networkData.gasPrice}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <>
-                    <TextInput
-                      mode="outlined"
-                      value={value}
-                      label="Gas Price"
-                      onBlur={onBlur}
-                      onChangeText={onChange}
-                    />
-                    <HelperText type="error">
-                      {
-                        (
-                          errors as FieldErrors<
-                            z.infer<typeof cosmosNetworksFormDataSchema>
-                          >
-                        ).gasPrice?.message
-                      }
-                    </HelperText>
-                  </>
-                )}
-              />
-            </Grid>
-          )}
+      <Divider flexItem sx={{ my: 4 }} />
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <Controller
+            control={control}
+            defaultValue={networkData.networkName}
+            name="networkName"
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  label="Network Name"
+                  value={value}
+                  onBlur={onBlur}
+                  onChangeText={(textValue) => onChange(textValue)}
+                />
+                <HelperText type="error">
+                  {errors.networkName?.message}
+                </HelperText>
+              </>
+            )}
+          />
         </Grid>
-        <LoadingButton
-          variant="contained"
-          loading={isSubmitting}
-          disabled={isSubmitting}
-          onClick={handleSubmit(submit)}
-          sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }}
-        >
-          {isSubmitting ? "Adding" : "Submit"}
-        </LoadingButton>
-      </Container>
-    </Container>
+        <Grid item xs={6}>
+          <Controller
+            control={control}
+            name="rpcUrl"
+            defaultValue={networkData.rpcUrl}
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  label="New RPC URL"
+                  onBlur={onBlur}
+                  value={value}
+                  onChangeText={(textValue) => onChange(textValue)}
+                />
+                <HelperText type="error">{errors.rpcUrl?.message}</HelperText>
+              </>
+            )}
+          />
+        </Grid>
+
+        <Grid item xs={isCosmos ? 6 : 12}>
+          <Controller
+            control={control}
+            defaultValue={networkData.blockExplorerUrl}
+            name="blockExplorerUrl"
+            render={({ field: { onChange, onBlur, value } }) => (
+              <>
+                <TextInput
+                  mode="outlined"
+                  value={value}
+                  label="Block Explorer URL  (Optional)"
+                  onBlur={onBlur}
+                  onChangeText={(textValue) => onChange(textValue)}
+                />
+                <HelperText type="error">
+                  {errors.blockExplorerUrl?.message}
+                </HelperText>
+              </>
+            )}
+          />
+        </Grid>
+        {isCosmos && (
+          <Grid item xs={6}>
+            <Controller
+              control={control}
+              name="gasPrice"
+              defaultValue={networkData.gasPrice}
+              render={({ field: { onChange, onBlur, value } }) => (
+                <>
+                  <TextInput
+                    mode="outlined"
+                    value={value}
+                    label="Gas Price"
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                  />
+                  <HelperText type="error">
+                    {
+                      (
+                        errors as FieldErrors<
+                          z.infer<typeof cosmosNetworksFormDataSchema>
+                        >
+                      ).gasPrice?.message
+                    }
+                  </HelperText>
+                </>
+              )}
+            />
+          </Grid>
+        )}
+      </Grid>
+      <LoadingButton
+        variant="contained"
+        loading={isSubmitting}
+        disabled={isSubmitting}
+        onClick={handleSubmit(submit)}
+        sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }}
+      >
+        {isSubmitting ? "Adding" : "Submit"}
+      </LoadingButton>
+    </Layout>
   );
 };
 
diff --git a/src/screens/SignMessage.tsx b/src/screens/SignMessage.tsx
index 267103f..1377128 100644
--- a/src/screens/SignMessage.tsx
+++ b/src/screens/SignMessage.tsx
@@ -1,22 +1,22 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { Button, Text, TextInput } from 'react-native-paper';
+import React, { useState } from "react";
+import { Text, TextInput } from "react-native-paper";
+import { Button, Divider, Stack } from "@mui/material";
 
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
 
-import { StackParamsList } from '../types';
-import styles from '../styles/stylesheet';
-import { signMessage } from '../utils/sign-message';
-import AccountDetails from '../components/AccountDetails';
+import { StackParamsList } from "../types";
+import { signMessage } from "../utils/sign-message";
+import AccountDetails from "../components/AccountDetails";
+import { Layout } from "../components/Layout";
 
-type SignProps = NativeStackScreenProps<StackParamsList, 'SignMessage'>;
+type SignProps = NativeStackScreenProps<StackParamsList, "SignMessage">;
 
 const SignMessage = ({ route }: SignProps) => {
   const namespace = route.params.selectedNamespace;
   const chainId = route.params.selectedChainId;
   const account = route.params.accountInfo;
 
-  const [message, setMessage] = useState<string>('');
+  const [message, setMessage] = useState<string>("");
 
   const signMessageHandler = async () => {
     const signedMessage = await signMessage({
@@ -29,31 +29,30 @@ const SignMessage = ({ route }: SignProps) => {
   };
 
   return (
-    <View style={styles.signPage}>
-      <View style={styles.accountInfo}>
-        <View>
-          <Text variant="titleMedium">
-            {account && `Account ${account.index + 1}`}
-          </Text>
-        </View>
-        <View style={styles.accountContainer}>
-          <AccountDetails account={account} />
-        </View>
-      </View>
+    <Layout title="Sign Message">
+      <Text variant="titleMedium">
+        {account && `Account ${account.index + 1}`}
+      </Text>
+      <AccountDetails account={account} />
 
-      <TextInput
-        mode="outlined"
-        placeholder="Enter your message"
-        onChangeText={text => setMessage(text)}
-        value={message}
-      />
+      <Stack spacing={4}>
+        <Divider flexItem />
+        <TextInput
+          mode="outlined"
+          placeholder="Enter your message"
+          onChangeText={(text) => setMessage(text)}
+          value={message}
+        />
 
-      <View style={styles.signButton}>
-        <Button mode="contained" onPress={signMessageHandler}>
+        <Button
+          variant="contained"
+          onClick={signMessageHandler}
+          sx={{ width: "200px", px: 4, py: 1, mt: 2 }}
+        >
           Sign
         </Button>
-      </View>
-    </View>
+      </Stack>
+    </Layout>
   );
 };