I am developing an app using jquery mobile and phonegap , it is working well on the web , check it.
[http://zabatni.azurewebsites.net](http://zabatni.azurewebsites.net/)
check the app in this url and then have a look at this image
![enter image description here][2]

[https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t34.0-12/10815890\_590581161042731\_1362713195\_n.jpg?efg=eyJvbGF0Ijo4MH0%3D&oh=41a5dfdc51c34472b435a10f805a5679&oe=547F792B&**gda**=1417623611\_d3eca3b5ed6dcabe7d24d5cbd11a05be](https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t34.0-12/10815890_590581161042731_1362713195_n.jpg?efg=eyJvbGF0Ijo4MH0%3D&oh=41a5dfdc51c34472b435a10f805a5679&oe=547F792B&__gda__=1417623611_d3eca3b5ed6dcabe7d24d5cbd11a05be)

```
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">

    <title>Zabatni</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="css/index.css" />

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />

    <link rel="stylesheet" href="css/theme/maintheme.css" />
  <link rel="stylesheet" href="css/theme/jquery.mobile.icons.min.css" 

  </head> 
<body> 

<div data-role="page" id="mainpage" data-theme="b">

    <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /> 
  </div>
    </div><!-- /header -->

    <div data-role="content" class="contentcontainer" >   
    <div class="ui-grid-c">
<div class="ui-block-a"><a href="#category"> <img src="img/maincategoryicons/mata3em.png" class="maincategoryicons" /> <p class="categorytitle" lang="ar">ظبطني<br/>مطاعم</p></a></div>
<div class="ui-block-b" ><img src="img/maincategoryicons/cafes.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>كافيهات</p></div>
<div class="ui-block-c"><a href="#" onclick="myalert()"><img src="img/maincategoryicons/clothes.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>ملابس</p></a></div>
<div class="ui-block-d"><img src="img/maincategoryicons/agheza.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>أجهزة</p></div>
<div class="ui-block-a"><img src="img/maincategoryicons/realestate.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>عقارات</p></div>
<div class="ui-block-b"><img src="img/maincategoryicons/furniture.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>أثاث</p></div>
<div class="ui-block-c"><img src="img/maincategoryicons/cars.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>سيارات</p></div>
<div class="ui-block-d"><img src="img/maincategoryicons/tourism.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>سياحة</p></div>
<div class="ui-block-a"><img src="img/maincategoryicons/jewllery.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>مجوهرات</p></div>
<div class="ui-block-b"><img src="img/maincategoryicons/accessories.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>اكسسوارات</p></div>
<div class="ui-block-c"><img src="img/maincategoryicons/market.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>ماركت</p></div>
<div class="ui-block-d"><img src="img/maincategoryicons/ceramic.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>سيراميك</p></div>
<div class="ui-block-a"><img src="img/maincategoryicons/shoes.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>أحذية</p></div>
<div class="ui-block-b"><img src="img/maincategoryicons/gym.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>جيم</p></div>
<div class="ui-block-c"><img src="img/maincategoryicons/glasses.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>مطاعم</p></div>

</div>

        </div><!-- /content -->
<div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home">home</a></li>
            <li><a href="#aboutuspage" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#" data-icon="gear">Settings</a></li>
            <li><a href="#search" data-icon="phone">Search</a></li>
        </ul>
    </div><!-- /navbar -->
</div>
</div><!-- /page -->
<div data-role="page" id="aboutuspage" data-theme="b" >
      <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /></div>
    </div><!-- /header -->
    <div data-role="content">
        All copyrights served &copy; Albara
    </div>
<div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#mainpage" data-icon="home">home</a></li>
            <li><a href="#" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#settings" data-icon="gear">Settings</a></li>
            <li><a href="#search" data-icon="search">Search</a></li>

        </ul>
    </div><!-- /navbar -->
</div>

</div>
<div data-role="page" id="contactus" data-theme="b"></div>

    <!--newpage-->
    <div data-role="page" id="search" data-theme="a">
      <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /> 
  </div>
    </div><!-- /header -->
    <div data-rolw="content">
        <ul data-role="listview" data-filter="true" class="search" >
           <li><a href="#"><img src="images/nike.jpg">جزمة نايك برباط</a></li> 
           <li><a href="#"><img src="images/pizza.jpg"> بيتزا بالمشروم</a></li> 
           <li><a href="#"><img src="images/phone.jpg">موبايل ايفون بخطين</a></li> 
           <li><a href="#"><img src="images/ring.jpg">خاتم الماز بينور في الضلمة</a></li> 
           <li><a href="#"><img src="images/apartment.jpg">شقي ايجار جديد جدا</a></li> 

        </ul>
    </div>
    <div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home">home</a></li>
            <li><a href="#aboutuspage" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#" data-icon="gear">Settings</a></li>
            <li><a href="#" data-icon="phone">Search</a></li>
        </ul>

    </div><!-- /navbar -->
</div>
    </div>
<div data-role="page" id="category"data-theme="a">
 <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /> 
  </div>
   </div><!-- /header -->
<div data-role="content">
    <ul data-role="listview" data-filter="true">
        <li><img src="images/pizza.jpg">بيتزا</li>
        <li><img src="images/categoryimages/kebda.jpg">سندوتش كبجة</li>
        <li><img src="images/categoryimages/ta3mia.jpg">شندوتش طعمية</li>
        <li><img src="images/categoryimages/msmt.jpg">كوارع</li>
    </ul>

</div>
   <div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#mainpage" data-icon="home">home</a></li>
            <li><a href="#aboutuspage" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#" data-icon="gear">Settings</a></li>
            <li><a href="#" data-icon="phone">Search</a></li>
        </ul>
    </div><!-- /navbar -->
</div>

</div>
<script>
function myalert(){
    alert("Hello! I am an alert box!!");

}

</script>
   <script src="css/jquery-1.11.1.min.js"></script>
    <script src="css/jquery.mobile-1.4.5.min.js"></script>
        <script src="js/index.js"></script>
        <script type="text/javascript" src="cordova.js"></script>

</body>
</html>

```

when i test it even using ripple it works very fine, why the app ui change and how to make it look like the website ?