Hi Gaurav,

Please find the snippet below.

bootconfig.js

// The authorization/access scope(s) you wish to define for your application.
var oauthScopes = ["visualforce", "api"];

//The start data associated with the application.  Use SFHybridApp.LocalAppStartData for a "local"
//PhoneGap-based application, and SFHybridApp.RemoteAppStartData for a Visualforce-based
//application.  The default representations are below, or you can look at the data
//classes in SFHybridApp.js to see how you can further customize your options.
//var startData = new SFHybridApp.LocalAppStartData();  // Used for local REST-based "index.html" PhoneGap apps.
var startData = new SFHybridApp.RemoteAppStartData("/apex/MobileHomePage"); // Used for Visualforce-based apps.

MobileHomePage.page

<apex:page showHeader="false" standardStylesheets="false" cache="false" doctype="html-5.0">
    <c:App > 
        <!--  H O M E  (single) -->
        <c:Page name="homePage" theme="touch">
            <c:Header >
                <h1>Welcome!</h1> 
            </c:Header>
            <c:Content >
                <a href="/apex/MobilePage" data-role="button">Contact List</a>
            </c:Content>
        </c:Page>
    </c:App>
    
    <style>
        [data-role="panel"][data-id="main"] [data-role="page"].ui-page .ui-content {
        background: white;
    }
    
        .ui-body-touch, .ui-overlay-touch {
	        font-family: Helvetica, Arial, sans-serif
	    }
    </style>
</apex:page>

MobilePage.page

<apex:page showHeader="false"  standardStylesheets="false" cache="false" doctype="html-5.0">
<c:App > 
    <apex:composition template="SplitViewTemplate"> 
        <apex:define name="menu">
            <c:Page name="list"  back="true" theme="touch">
                <c:Header >
                    <h1 style="font-size: 20px; margin: 0px;">All Contacts</h1> 
                </c:Header>
                <c:Content >
                    <c:List sobject="Contact" labelField="Name" subLabelField="Account.Name" sortByField="FirstName" listFilter="true"/>
                </c:Content>
                <c:Footer >
                <!--  ,'iconCls':'star' -->
                <c:Nav elemId="listNav"
                    pages="[{'page':'/apex/MobileHomePage','name':'Home'}]"/>
            </c:Footer>
            </c:Page>
        </apex:define>
        <apex:define name="main">
            <c:Page name="main" theme="touch">
                <c:Header >
                    <h1 style="font-size: 22px; margin: 0px;">Contact Details</h1>
                </c:Header>
                <c:Content >
                    <c:Detail sobject="Contact"/>
                </c:Content>
            </c:Page>
        </apex:define>
    </apex:composition>
</c:App>
<style>
    .ui-body-touch, .ui-overlay-touch {
        font-family: Helvetica, Arial, sans-serif
    }
</style>
</apex:page>