diff --git a/app-categories.json b/app-categories.json
new file mode 100644
index 0000000..ede43dc
--- /dev/null
+++ b/app-categories.json
@@ -0,0 +1,12 @@
+{
+    "all": "All apps",
+    "file-sharing": "File Sharing & Synchronization",
+    "social-networks": "Social Networks & Communication",
+    "mail-messaging": "Mail & Messaging",
+    "media-entertainment": "Media & Entertainment",
+    "productivity-collaboration": "Productivity & Collaboration",
+    "security-privacy": "Security & Privacy",
+    "development-version-control": "Development & Version Control",
+    "home-automation": "Home Automation & Management",
+    "utilities-others": "Utilities & Others"
+}
diff --git a/app-detail.html b/app-detail.html
new file mode 100644
index 0000000..75f5828
--- /dev/null
+++ b/app-detail.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <title data-i18n="page_title_apps" >Apps | Syncloud</title>
+        <meta name="author" content="syncloud.org">
+        <meta name="description" content="Your Personal Server">
+        <meta name="keywords" content="Your Personal Server">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+        <meta name="HandheldFriendly" content="true" />
+        <meta name="MobileOptimized" content="width" />
+        <meta content="yes" name="apple-mobile-web-app-capable" />
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+        <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
+        <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
+        <link rel="manifest" href="/manifest.json">
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#64bc46">
+        <meta name="theme-color" content="#ffffff">
+
+        <link rel="stylesheet" href="css/landing_links.css" type="text/css">
+        <link rel="stylesheet" href="css/bootstrap.min.css">
+        <link rel="stylesheet" href="css/flags.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+        <link rel="stylesheet" href="css/apps.css">
+    </head>
+    <body style="display: none">
+        <!--HEADER-->
+        <div id="header"></div>
+        <!--headerbg-->
+        <div class="headerbg">
+            <div class="block1 wd12" id="block1">
+                <h1 data-i18n="apps" >Apps</h1>
+            </div>
+        </div>
+        <!--link_block2-->
+        <div class="link_block wd12" id="block2">
+            <div class="buttonblock" style="border-bottom: 1px solid #eee; padding-bottom: 1%; margin-bottom: 1%; text-align: right;">
+                <a class="button_border" style="padding: 1px 4px 1px 4px; width: auto;" href="apps.html">All Apps</a>
+            </div>
+            <div class="rowthree grid-view" id="apps-detail"></div>
+            </div>
+        </div>
+        <!--footer-->
+        <div id="footer"></div>
+        <script type="text/html" id='app-template-detail'>
+            <% _.each(apps, function (app) { %>
+               
+                    <div class="row app-detail-row d-flex align-items-stretch">
+                        <div class="col-md-6" style="text-align: center;">
+                            <img style="margin-left: 0; border-radius:20%;" src="images/apps/<%= app.id %>-128.png">
+                        </div>
+                        <div class="col-md-6" style="text-align: left;">
+                            <span style="font-size: 24px"><%= app.name %></span>
+                            <br><span><%= app.description %></span>
+                            <br><br><span><span style="color:#999;">Category: </span><span id="fixedCategory"><%= app.appcategory %></span></span>
+
+                        </div>
+                    </div>
+                    <div class="row d-flex align-items-stretch">
+                        <div class="col-md-6 app-detail">
+                            <span class="app-detail-title">Screenshots</span>
+                            <br>
+                            
+                            
+                            <div id="carouselWrapper">
+   <button id="zoomButton" class="zoom-in button_border_small btn button_border" style="padding: 1px 4px; width: auto;"><i class="fa-solid fa-magnifying-glass-plus"></i></button>                        
+  
+<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="min-height: 400px; padding-top: 40px;">
+    
+    <!-- Wrapper for carousel items -->
+    <div class="carousel-inner">
+        <% if (app.projectimgs.length > 0) { %>
+    <% _.each(app.projectimgs, function(img, index) { %>
+        <div class="item <%= index === 0 ? 'active' : '' %>">
+            <img class="carousel-img" src="<%= img %>" alt="Screenshot <%= index %>">
+            <br><span>Source:</span><a href="<%= img %>" target="_blank"><%= img %></a>
+        </div>
+    <% }); %>
+    <!-- Carousel indicators -->
+    <ol class="carousel-indicators" style="position: relative; margin: 0; left: 0; bottom: 0; width: 100%;">
+        <% _.each(app.projectimgs, function(img, index) { %>
+            <li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index === 0 ? 'active' : '' %>"></li>
+        <% }); %>
+    </ol>
+<% } else { %>
+    <span>No screenshots available yet.</span>
+<% } %>
+    </div>
+    <% if (app.projectimgs.length > 0) { %>
+    <!-- Carousel controls -->
+    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left"></span>
+    </a>
+    <a class="carousel-control right" href="#myCarousel" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right"></span>
+    </a>
+     <% } %>
+</div>
+</div>
+
+
+                        </div>
+                        <div class="col-md-6 app-detail">
+                            <span class="app-detail-title">Description</span>
+                            
+     <div id="overlay"> 
+     <div id="mdcontent2container"> <button class="button_border_small btn button_border" id="closebtn"><i class="fa-solid fa-xmark"></i></button> 
+     <div id="mdcontent2-overlay" data-url="<%= app.projectreadmeraw %>"></div> 
+     </div> 
+     </div> 
+     <div id="mdcontent2" class="fadeout" data-url="<%= app.projectreadmeraw %>"></div> 
+       <br>
+   
+     <button class="button_border_small btn button_border" id="toggleButton">Read Here</button> 
+     <br><a href="<%= app.projectreadme %>" target="_blank"><%= app.projectreadme %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                           
+ 
+
+                        </div>
+                    </div>
+                    
+                    <div class="row d-flex align-items-stretch">
+                        <div class="col-md-6 app-detail">
+                            <span style="color: #999; font-weight:bold;">About the project</span>
+                            <br><br><span  class="app-detail-title">Website</span>
+                            <br><a href="<%= app.projectwebsite %>" target="_blank"><%= app.projectwebsite %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                            <br><br><span class="app-detail-title">Repository</span>
+                            <br><a href="<%= app.projectcode %>" target="_blank"><%= app.projectcode %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                            <br><br><span class="app-detail-title">License</span>
+                            <br><span id="license-name"></span>
+                            <br><a href="<%= app.projectlicense %>" target="_blank"><%= app.projectlicense %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                            <br><br><span class="app-detail-title">Bug reporting</span>
+                            <br><a href="<%= app.projectissues %>" target="_blank"><%= app.projectissues %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                            <br><br><span class="app-detail-title">Stars</span>
+                            <br><div id="stars"><span id="stargazers-count"></span><span class="star">&#11088;</span></div>
+                        </div>
+                        <div class="col-md-6 app-detail">
+                            <span style="color: #999; font-weight:bold;">About the app</span>
+                            <br><br><span  class="app-detail-title">Repository</span>
+                            <br><a href="<%= app.appcode %>" target="_blank"><%= app.appcode %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                            <br><br><span  class="app-detail-title">Documentation</span>
+                            <br><a href="<%= app.appdocs %>" target="_blank"><%= app.appdocs %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                            <br><br><span class="app-detail-title">Bug reporting</span>
+                            <br><a href="<%= app.appissues %>" target="_blank"><%= app.appissues %>&nbsp;<i class="fas fa-external-link-alt"></i></a>
+                            <br><br><span class="app-detail-title">Version</span>
+                            <br><div id="app_version"></div>
+                        </div>
+                    </div>
+                    <div class="row d-flex align-items-stretch">
+                        <div class="col-md-6 app-detail">
+                            <span class="app-detail-title">Share</span>
+                            <br>    <a href="#" class="share-button" onclick="share('mastodon')">Mastodon <i class="fas fa-external-link-alt"></i></a>
+    <br><a href="#" class="share-button" onclick="share('signal')">Signal <i class="fas fa-external-link-alt"></i></a>
+    <br><a href="#" class="share-button" onclick="share('telegram')">Telegram <i class="fas fa-external-link-alt"></i></a>
+    <br><a href="#" class="share-button" onclick="share('email')">Email <i class="fas fa-external-link-alt"></i></a>
+                        </div>
+                        <div class="col-md-6 app-detail">
+                            <span class="app-detail-title">Embed</span>
+
+    <label  style="font-weight:inherit;" for="theme-select">Select Theme:</label>
+    <select id="theme-select" class="button_border form-control" style="padding: 1px 4px; width: auto;">
+        <option value="bright">Bright</option>
+        <option value="dark">Dark</option>
+    </select>
+
+    <br><span>Preview:</span>
+    <a id="theme-link" href="#" target="_blank">
+        <img id="theme-icon" class="svg-icon" src="https://github.com/syncloud/syncloud.org/raw/master/images/badge_bright.svg" alt="Syncloud App">
+    </a>
+    <br><span>Code:</span>
+    <div id="code-box">
+    <div id="code-content">
+    &lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;https://github.com/syncloud/syncloud.org/raw/master/images/badge_bright.svg&quot; alt=&quot;Syncloud App&quot;&gt; &lt;/a&gt;
+    </div>
+    <div>
+    <button id="copy-button" onclick="copyToClipboard()">Copy</button>
+</div>
+
+
+
+
+
+
+
+                        </div>
+                        </div>
+                    </div>
+                </div>
+            <% }); %>
+        </script>
+        
+        <!-- Scripts-->
+        <script src="js/jquery-1.11.3.min.js"></script>
+        <script src="js/jquery.scrollTo.min.js"></script>
+        <script src="js/google-analytics.js"></script>
+        <script src="js/i18next.min.js" ></script>
+        <script src="js/i18nextXHRBackend.min.js" ></script>
+        <script src="js/jquery-i18next.min.js" ></script>
+        <script src="js/i18nextBrowserLanguageDetector.min.js" ></script>
+        <script src="js/translation.js" ></script>
+        <script src="js/landing.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+       		<script src="js/jquery.flagstrap.js"></script>
+        <script src="js/underscore-min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>
+        <script src="https://underscorejs.org/underscore-min.js"></script>
+        <script src="js/app-detail.js"></script>
+
+        <!--[if lt IE 9]>
+        <script src="js/html5.js"></script>
+        <script src="js/IE9.js"></script>
+        <![endif]-->
+        <!-- END SCRIPTS -->
+    </body>
+</html>
diff --git a/apps.html b/apps.html
index 12a1fd1..72352e2 100644
--- a/apps.html
+++ b/apps.html
@@ -22,6 +22,9 @@
         <link rel="stylesheet" href="css/landing_links.css" type="text/css">
         <link rel="stylesheet" href="css/bootstrap.min.css">
         <link rel="stylesheet" href="css/flags.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+        <link rel="stylesheet" href="css/apps.css">
+
     </head>
     <body style="display: none">
         <!--HEADER-->
@@ -34,25 +37,50 @@ <h1 data-i18n="apps" >Apps</h1>
         </div>
         <!--link_block2-->
         <div class="link_block wd12" id="block2">
-            
-            <div class="rowthree" id="apps">
+<div class="container">
+    <div class="app-settings-row">
+        <div class="col-md-3 col-vert buttonblock">
+            <select class="button_border form-control mb-2" id="categories" name="categories"></select>
+        </div>
+        <div class="col-md-3 col-vert buttonblock">
+            <select class="button_border form-control" id="sort-apps" name="sort apps">
+                <option value="sort-a-z">A-Z</option>
+                <option value="sort-z-a">Z-A</option>
+                <option value="sort-categories">Categories</option>
+            </select>
+        </div>
+        <div class="col-md-6-search col-vert buttonblock flex-container-search">
+            <input type="text" id="search-bar" class="form-control" placeholder="Search for apps...">
+            <button class="button_border_small btn button_border" id="toggle-view" style="font-size: 140%;"><i class="fas fa-list"></i></button>
+        </div>
+    </div>
+</div>
+
+            <div class="rowthree-wrapper">
+            <div class="rowthree grid-view" id="apps"></div>
+            </div>
             </div>
         </div>
         <!--footer-->
         <div id="footer"></div>
         <script type="text/html" id='app-template'>
             <% _.each(apps, function (app) { %>
-                <div class="threeblock" style="padding: 0px 0px 15px 0px">
-                    <div style="margin-left: 0;; width: 30%; display:inline-block;vertical-align:top;text-align:left">
+                <div class="threeblock <%= app.appcategory %>">
+                    <a style="color: inherit; text-decoration: inherit;" href="app-detail.html?app=<%= encodeURIComponent(app.id) %>">
+                    <div class="app-image" style="margin-left: 0; display:inline-block;vertical-align:top;text-align:left">
                         <img style="margin-left: 0; border-radius:20%;" src="images/apps/<%= app.id %>-128.png">
                     </div>
-                    <div style="width: 60%; display:inline-block;vertical-align:top;text-align:left" >
-                        <div style="font-size: 20px"><%= app.name %></div>
-                        <div ><%= app.description %></div>
+                    <div style="width: 60%; display:inline-block;vertical-align:top;text-align:left">
+                        <div class="appnametext" style="font-size: 20px"><%= app.name %></div>
+                        <div><%= app.description %></div>
                     </div>
+                    <div class="appcategory"><%= app.appcategory %></div>
+                    </a>
                 </div>
             <% }); %>
         </script>
+        
+      
         <!-- Scripts-->
         <script src="js/jquery-1.11.3.min.js"></script>
         <script src="js/jquery.scrollTo.min.js"></script>
@@ -66,15 +94,9 @@ <h1 data-i18n="apps" >Apps</h1>
         <script src="js/bootstrap.min.js"></script>
        		<script src="js/jquery.flagstrap.js"></script>
         <script src="js/underscore-min.js"></script>
- 
-        <script>
-            $(document).ready(function() {
-                $.getJSON("apps.json").done(function (data) {
-                    $("#apps").html(_.template($("#app-template").html())(data));
-                });
-                init_page("apps");
-            });
-        </script>
+        <script src="js/apps.js"></script>
+        <script src="https://underscorejs.org/underscore-min.js"></script>
+        
         <!--[if lt IE 9]>
         <script src="js/html5.js"></script>
         <script src="js/IE9.js"></script>
diff --git a/apps.json b/apps.json
index 08f2aae..be8c716 100644
--- a/apps.json
+++ b/apps.json
@@ -1,159 +1,563 @@
 {
   "apps": [
     {
-      "name": "Nextcloud file sharing",
-      "id": "nextcloud",
-      "description": "Access & share your files from any device"
-    },
+    "name": "Nextcloud file sharing",
+    "id": "nextcloud",
+    "description": "Access & share your files from any device",
+    "appcode": "https://github.com/syncloud/nextcloud",
+    "appdocs": "https://github.com/syncloud/platform/wiki/Nextcloud",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/nextcloud/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/nextcloud/server",
+    "projectwebsite": "https://nextcloud.com/",
+    "projectreadme": "https://github.com/nextcloud/server/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/nextcloud/.github/refs/heads/master/profile/README.md",
+    "projectlicense": "https://github.com/nextcloud/server/blob/master/COPYING",
+    "projectimgs": ["https://raw.githubusercontent.com/nextcloud/screenshots/refs/heads/master/files/Contacts%20Menu.png", "https://raw.githubusercontent.com/nextcloud/screenshots/refs/heads/master/files/Files%20Overview.png", "https://raw.githubusercontent.com/nextcloud/screenshots/refs/heads/master/files/Welcome%20screen.png"],
+    "projectissues": "https://github.com/nextcloud/server/issues",
+    "projectrepoapi": "https://api.github.com/repositories/60243197",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "file-sharing"
+  },
+  {
+    "name": "Diaspora social network",
+    "id": "diaspora",
+    "description": "A privacy-aware, distributed, open source social network",
+    "appcode": "https://github.com/syncloud/diaspora",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/diaspora/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/diaspora/diaspora",
+    "projectwebsite": "https://diasporafoundation.org/",
+    "projectreadme": "https://github.com/diaspora/diaspora/blob/main/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/diaspora/diaspora/refs/heads/main/README.md",
+    "projectlicense": "https://github.com/diaspora/diaspora/blob/main/LICENSE.md",
+    "projectimgs": ["https://upload.wikimedia.org/wikipedia/commons/5/58/Diaspora_latest.png","https://upload.wikimedia.org/wikipedia/commons/archive/5/58/20170831022234!Diaspora_latest.png"],
+    "projectissues": "https://github.com/diaspora/diaspora/issues",
+    "projectrepoapi": "https://api.github.com/repositories/911765",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "social-networks"
+  },
+  {
+    "name": "Mail server",
+    "id": "mail",
+    "description": "Mail with Web interface and compatible with popular mail apps",
+    "appcode": "https://github.com/syncloud/mail",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/mail/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/roundcube/roundcubemail",
+    "projectwebsite": "https://roundcube.net/",
+    "projectreadme": "https://github.com/roundcube/roundcubemail/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/roundcube/roundcubemail/refs/heads/master/README.md",
+    "projectlicense": "https://github.com/roundcube/roundcubemail/blob/master/LICENSE",
+    "projectimgs": ["https://roundcube.net/screens/skins/elastic/desktop/screens/mailbox_widescreen.png","https://roundcube.net/screens/skins/elastic/desktop/screens/contacts.png"],
+    "projectissues": "https://github.com/roundcube/roundcubemail/issues",
+    "projectrepoapi": "https://api.github.com/repositories/4224042",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "mail-messaging"
+  },
+  {
+    "name": "File browser",
+    "id": "files",
+    "description": "Simple file browser",
+    "appcode": "https://github.com/syncloud/files",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/files/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/syncloud/files",
+    "projectwebsite": "https://github.com/syncloud/files",
+    "projectreadme": "",
+    "projectreadmeraw": "",
+    "projectlicense": "https://github.com/syncloud/files/blob/main/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/syncloud/files/issues",
+    "projectrepoapi": "https://api.github.com/repositories/55784707",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "file-sharing"
+  },
+  {
+    "name": "Rocket.Chat",
+    "id": "rocketchat",
+    "description": "Text, voice and video chat",
+    "appcode": "https://github.com/syncloud/rocketchat",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/rocketchat/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/RocketChat/Rocket.Chat",
+    "projectwebsite": "https://rocket.chat/",
+    "projectreadme": "https://github.com/RocketChat/Rocket.Chat/blob/develop/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/RocketChat/Rocket.Chat/refs/heads/develop/README.md",
+    "projectlicense": "https://github.com/RocketChat/Rocket.Chat/blob/develop/LICENSE",
+    "projectimgs": ["https://camo.githubusercontent.com/fcecafb4fdb35d736ae202333079097c2e9f337b84844ef8674ccbc6ecaf4acf/68747470733a2f2f676c6f62616c2d75706c6f6164732e776562666c6f772e636f6d2f3631316131396239383533623734313461306636623366362f3633313963373262626438616635633863323265666162365f6865726f496d6167652e77656270"],
+    "projectissues": "https://github.com/RocketChat/Rocket.Chat/issues",
+    "projectrepoapi": "https://api.github.com/repositories/35866694",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "social-networks"
+  },
+  {
+    "name": "GOGS git server",
+    "id": "gogs",
+    "description": "Distributed version control system",
+    "appcode": "https://github.com/syncloud/gogs",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/gogs/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/gogs/gogs",
+    "projectwebsite": "https://gogs.io/",
+    "projectreadme": "https://gogs.io/docs/intro",
+    "projectreadmeraw": "",
+    "projectlicense": "https://github.com/gogs/gogs/blob/master/LICENSE",
+    "projectimgs": ["https://gogs.io/img/screenshots/1.png","https://gogs.io/img/screenshots/2.png","https://gogs.io/img/screenshots/3.png","https://gogs.io/img/screenshots/4.png"],
+    "projectissues": "https://github.com/gogs/gogs/issues",
+    "projectrepoapi": "https://api.github.com/repositories/16752620",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "development-version-control"
+  },
+  {
+    "name": "Syncthing",
+    "id": "syncthing",
+    "description": "Continuous File Synchronization",
+    "appcode": "https://github.com/syncloud/syncthing",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/syncthing/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/syncthing/syncthing",
+    "projectwebsite": "https://syncthing.net/",
+    "projectreadme": "https://github.com/syncthing/syncthing/blob/main/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/syncthing/syncthing/refs/heads/main/README.md",
+    "projectlicense": "https://github.com/syncthing/syncthing/blob/main/LICENSE",
+    "projectimgs": ["https://docs.syncthing.net/_images/gui1.png"],
+    "projectissues": "https://github.com/syncthing/syncthing/issues",
+    "projectrepoapi": "https://api.github.com/repositories/14712850",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "file-sharing"
+  },
+  {
+    "name": "WordPress",
+    "id": "wordpress",
+    "description": "Blogging, mailing lists and forums, media galleries, and online stores",
+    "appcode": "https://github.com/syncloud/wordpress",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/wordpress/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/WordPress/WordPress",
+    "projectwebsite": "https://wordpress.org/",
+    "projectreadme": "https://wordpress.org/about/readme.html",
+    "projectreadmeraw": "https://raw.githubusercontent.com/WordPress/WordPress/refs/heads/master/readme.html",
+    "projectlicense": "https://github.com/WordPress/WordPress/blob/trunk/LICENSE",
+    "projectimgs": ["https://upload.wikimedia.org/wikipedia/commons/c/c6/WordPress_PostEdit.png","https://upload.wikimedia.org/wikipedia/commons/a/a2/WordPress_MP6_dashboard.png"],
+    "projectissues": "https://github.com/WordPress/WordPress/issues",
+    "projectrepoapi": "https://api.github.com/repositories/2889328",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "productivity-collaboration"
+  },
+  {
+    "name": "Standard Notes",
+    "id": "notes",
+    "description": "Standard Notes is an easy-to-use encrypted note-taking app",
+    "appcode": "https://github.com/syncloud/standardnotes",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/standardnotes/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/standardnotes/server",
+    "projectwebsite": "https://standardnotes.org/",
+    "projectreadme": "https://github.com/standardnotes/server/blob/main/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/standardnotes/server/refs/heads/main/README.md",
+    "projectlicense": "https://github.com/standardnotes/server/blob/main/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/standardnotes/server/issues",
+    "projectrepoapi": "https://api.github.com/repositories/504488350",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "productivity-collaboration"
+  },
+  {
+    "name": "Users",
+    "id": "users",
+    "description": "User management app",
+    "appcode": "https://github.com/syncloud/users",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/users/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/syncloud/users",
+    "projectwebsite": "https://github.com/syncloud/users",
+    "projectreadme": "",
+    "projectreadmeraw": "",
+    "projectlicense": "https://github.com/syncloud/users/blob/main/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/syncloud/users/issues",
+    "projectrepoapi": "https://api.github.com/repositories/156185918",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "utilities-others"
+  },
+  {
+    "name": "Pi-hole",
+    "id": "pihole",
+    "description": "Network-wide Ad Blocking",
+    "appcode": "https://github.com/syncloud/pihole",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/pihole/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/pi-hole/pi-hole",
+    "projectwebsite": "https://pi-hole.net/",
+    "projectreadme": "https://github.com/pi-hole/pi-hole/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/pi-hole/pi-hole/refs/heads/master/README.md",
+    "projectlicense": "https://github.com/pi-hole/pi-hole/blob/master/LICENSE",
+    "projectimgs": ["https://wp-cdn.pi-hole.net/wp-content/uploads/2020/04/Dashboard.png","https://wp-cdn.pi-hole.net/wp-content/uploads/2018/12/Screenshot-2018-12-19-17.39.58.png"],
+    "projectissues": "https://github.com/pi-hole/pi-hole/issues",
+    "projectrepoapi": "https://api.github.com/repositories/20619036",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "security-privacy"
+  },
+  {
+    "name": "OpenVPN",
+    "id": "openvpn",
+    "description": "Secure connection to your Syncloud device over the Internet",
+    "appcode": "https://github.com/syncloud/openvpn",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/openvpn/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/OpenVPN/openvpn",
+    "projectwebsite": "https://openvpn.net/",
+    "projectreadme": "https://github.com/OpenVPN/openvpn/blob/master/README",
+    "projectreadmeraw": "https://raw.githubusercontent.com/OpenVPN/openvpn/refs/heads/master/README",
+    "projectlicense": "https://github.com/OpenVPN/openvpn/blob/master/COPYING",
+    "projectimgs": [],
+    "projectissues": "https://github.com/OpenVPN/openvpn/issues",
+    "projectrepoapi": "https://api.github.com/repositories/4151993",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "security-privacy"
+  },
+  {
+    "name": "Plex Media Server",
+    "id": "plex",
+    "description": "Free movies and TV plus all your personal media libraries on every device. Master your Mediaverse",
+    "appcode": "https://github.com/syncloud/plex",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/plex/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/plexinc/pms-docker",
+    "projectwebsite": "https://www.plex.tv/",
+    "projectreadme": "https://github.com/plexinc/pms-docker/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/plexinc/pms-docker/refs/heads/master/README.md",
+    "projectlicense": "https://github.com/plexinc/pms-docker/blob/master/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/plexinc/pms-docker/issues",
+    "projectrepoapi": "https://api.github.com/repositories/75842869",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "media-entertainment"
+  },
+  {
+    "name": "Bitwarden",
+    "id": "bitwarden",
+    "description": "Password Manager",
+    "appcode": "https://github.com/syncloud/bitwarden",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/bitwarden/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/bitwarden/server",
+    "projectwebsite": "https://bitwarden.com/",
+    "projectreadme": "https://github.com/bitwarden/server/blob/main/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/bitwarden/server/refs/heads/main/README.md",
+    "projectlicense": "https://github.com/bitwarden/server/blob/master/LICENSE",
+    "projectimgs": ["https://raw.githubusercontent.com/bitwarden/brand/refs/heads/main/screenshots/apps-combo-logo.png","https://raw.githubusercontent.com/bitwarden/brand/refs/heads/main/screenshots/web-vault.png"],
+    "projectissues": "https://github.com/bitwarden/server/issues",
+    "projectrepoapi": "https://api.github.com/repositories/46755185",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "security-privacy"
+  },
+  {
+    "name": "Home Assistant",
+    "id": "home-assistant",
+    "description": "Home automation software designed to be the central control system for smart home devices",
+    "appcode": "https://github.com/syncloud/home-assistant",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/home-assistant/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/home-assistant/core",
+    "projectwebsite": "https://www.home-assistant.io/",
+    "projectreadme": "https://github.com/home-assistant/core/blob/dev/README.rst",
+    "projectreadmeraw": "https://raw.githubusercontent.com/home-assistant/core/refs/heads/dev/README.rst",
+    "projectlicense": "https://github.com/home-assistant/core/blob/master/LICENSE",
+    "projectimgs": ["https://raw.githubusercontent.com/home-assistant/core/dev/.github/assets/screenshot-states.png"],
+    "projectissues": "https://github.com/home-assistant/core/issues",
+    "projectrepoapi": "https://api.github.com/repositories/12888993",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "home-automation"
+  },
+  {
+    "name": "Jellyfin Media System",
+    "id": "jellyfin",
+    "description": "The Free Software Media System",
+    "appcode": "https://github.com/syncloud/jellyfin",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/jellyfin/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/jellyfin/jellyfin",
+    "projectwebsite": "https://jellyfin.org/",
+    "projectreadme": "https://github.com/jellyfin/jellyfin/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/jellyfin/jellyfin/master/README.md",
+    "projectlicense": "https://github.com/jellyfin/jellyfin/blob/master/LICENSE",
+    "projectimgs": ["https://jellyfin.org/assets/images/10.8-home-4a73a92bf90d1eeffa5081201ca9c7bb.png","https://jellyfin.org/assets/images/10.8-library-9c07ba46877a03e749c0c8b5ed157e53.png"],
+    "projectissues": "https://github.com/jellyfin/jellyfin/issues",
+    "projectrepoapi": "https://api.github.com/repositories/161012019",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "media-entertainment"
+  },
+  {
+    "name": "Collabora Online DE",
+    "id": "collabora",
+    "description": "Collabora Online to edit your Nextcloud Office documents",
+    "appcode": "https://github.com/syncloud/collabora",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/collabora/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/CollaboraOnline/online",
+    "projectwebsite": "https://www.collaboraoffice.com/",
+    "projectreadme": "https://github.com/CollaboraOnline/online/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/CollaboraOnline/online/master/README.md",
+    "projectlicense": "https://github.com/CollaboraOnline/online/blob/master/LICENSE",
+    "projectimgs": ["https://raw.githubusercontent.com/CollaboraOnline/CollaboraOnline.github.io/master/static/images/homepage-image.png"],
+    "projectissues": "https://github.com/CollaboraOnline/online/issues",
+    "projectrepoapi": "https://api.github.com/repositories/300155217",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "productivity-collaboration"
+  },
+  {
+    "name": "Mastodon",
+    "id": "mastodon",
+    "description": "Social Network",
+    "appcode": "https://github.com/syncloud/mastodon",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/mastodon/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/mastodon/mastodon",
+    "projectwebsite": "https://joinmastodon.org/",
+    "projectreadme": "https://github.com/mastodon/mastodon/blob/main/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/mastodon/mastodon/main/README.md",
+    "projectlicense": "https://github.com/mastodon/mastodon/blob/main/LICENSE",
+    "projectimgs": ["https://upload.wikimedia.org/wikipedia/commons/1/13/Mastodon_Single-column-layout.png"],
+    "projectissues": "https://github.com/mastodon/mastodon/issues",
+    "projectrepoapi": "https://api.github.com/repositories/52281283",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "social-networks"
+  },
+  {
+    "name": "Grocy",
+    "id": "grocy",
+    "description": "Groceries & household management",
+    "appcode": "https://github.com/syncloud/grocy",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/grocy/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/grocy/grocy",
+    "projectwebsite": "https://grocy.info/",
+    "projectreadme": "https://github.com/grocy/grocy/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/grocy/grocy/master/README.md",
+    "projectlicense": "https://github.com/grocy/grocy/blob/master/LICENSE",
+    "projectimgs": ["https://raw.githubusercontent.com/grocy/grocy/master/.github/publication_assets/stock.png","https://raw.githubusercontent.com/grocy/grocy/master/.github/publication_assets/shoppinglist.png","https://raw.githubusercontent.com/grocy/grocy/master/.github/publication_assets/mealplan.png","https://raw.githubusercontent.com/grocy/grocy/master/.github/publication_assets/chores.png"],
+    "projectissues": "https://github.com/grocy/grocy/issues",
+    "projectrepoapi": "https://api.github.com/repositories/88370518",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "home-automation"
+  },
+  {
+    "name": "Matrix",
+    "id": "matrix",
+    "description": "An open network for secure, decentralized communication",
+    "appcode": "https://github.com/syncloud/matrix",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/matrix/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/element-hq/synapse",
+    "projectwebsite": "https://element.io/",
+    "projectreadme": "https://github.com/element-hq/synapse/blob/develop/README.rst",
+    "projectreadmeraw": "https://raw.githubusercontent.com/element-hq/synapse/refs/heads/develop/README.rst",
+    "projectlicense": "https://github.com/element-hq/synapse/blob/master/LICENSE",
+    "projectimgs": ["https://element.io/blog/content/images/2020/07/Screenshot-2020-07-15-at-00.54.45.png"],
+    "projectissues": "https://github.com/element-hq/synapse/issues",
+    "projectrepoapi": "https://api.github.com/repositories/731190011",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "social-networks"
+  },
+  {
+    "name": "Crowdsec",
+    "id": "crowdsec",
+    "description": "Intrusion prevention system",
+    "appcode": "https://github.com/syncloud/crowdsec",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/crowdsec/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/crowdsecurity/crowdsec",
+    "projectwebsite": "https://crowdsec.net/",
+    "projectreadme": "https://github.com/crowdsecurity/crowdsec/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/crowdsecurity/crowdsec/refs/heads/master/README.md",
+    "projectlicense": "https://github.com/crowdsecurity/crowdsec/blob/main/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/crowdsecurity/crowdsec/issues",
+    "projectrepoapi": "https://api.github.com/repositories/264154402",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "security-privacy"
+  },
+  {
+    "name": "Calibre-Web",
+    "id": "calibre",
+    "description": "Browsing, reading and downloading eBooks",
+    "appcode": "https://github.com/syncloud/calibre",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/calibre/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/janeczku/calibre-web",
+    "projectwebsite": "https://github.com/janeczku/calibre-web",
+    "projectreadme": "https://github.com/janeczku/calibre-web/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/janeczku/calibre-web/master/README.md",
+    "projectlicense": "https://github.com/janeczku/calibre-web/blob/master/LICENSE",
+    "projectimgs": ["https://raw.githubusercontent.com/wiki/janeczku/calibre-web/images/main_screen.png"],
+    "projectissues": "https://github.com/janeczku/calibre-web/issues",
+    "projectrepoapi": "https://api.github.com/repositories/40089578",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "utilities-others"
+  },
+  {
+    "name": "ShairPort",
+    "id": "shairport",
+    "description": "AirPlay audio player",
+    "appcode": "https://github.com/syncloud/shairport",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/shairport/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/mikebrady/shairport-sync",
+    "projectwebsite": "https://github.com/mikebrady/shairport-sync",
+    "projectreadme": "https://github.com/mikebrady/shairport-sync/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/mikebrady/shairport-sync/master/README.md",
+    "projectlicense": "https://github.com/mikebrady/shairport-sync/blob/master/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/mikebrady/shairport-sync/issues",
+    "projectrepoapi": "https://api.github.com/repositories/19316865",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "media-entertainment"
+  },
+  {
+    "name": "PhotoPrism AI-Powered Photos",
+    "id": "photoprism",
+    "description": "AI-Powered Photos App for the Decentralized Web. We are on a mission to protect your freedom and privacy",
+    "appcode": "https://github.com/syncloud/photoprism",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/photoprism/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/photoprism/photoprism",
+    "projectwebsite": "https://photoprism.app/",
+    "projectreadme": "https://github.com/photoprism/photoprism/blob/develop/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/photoprism/photoprism/refs/heads/develop/README.md",
+    "projectlicense": "https://github.com/photoprism/photoprism/blob/main/LICENSE",
+    "projectimgs": ["https://camo.githubusercontent.com/baaeaca838da42c0087dcb2617311e8c342d0c244007d24d9bffc16a1225a746/68747470733a2f2f646c2e70686f746f707269736d2e6170702f696d672f75692f7365617263682d63617264732d766965772e6a7067"],
+    "projectissues": "https://github.com/photoprism/photoprism/issues",
+    "projectrepoapi": "https://api.github.com/repositories/119160553",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "media-entertainment"
+  },
+  {
+    "name": "Stable Diffusion",
+    "id": "stable-diffusion",
+    "description": "Generative artificial intelligence (generative AI) model that produces unique photorealistic images from text and image prompts",
+    "appcode": "https://github.com/syncloud/stable-diffusion",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/stable-diffusion/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/CompVis/stable-diffusion",
+    "projectwebsite": "https://stability.ai/",
+    "projectreadme": "https://github.com/CompVis/stable-diffusion/blob/main/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/README.md",
+    "projectlicense": "https://github.com/CompVis/stable-diffusion/blob/main/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/CompVis/stable-diffusion/issues",
+    "projectrepoapi": "https://api.github.com/repositories/523379232",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "development-version-control"
+  },
     {
-      "name": "Diaspora social network",
-      "id": "diaspora",
-      "description": "A privacy-aware, distributed, open source social network"
-    },
-    {
-      "name": "Mail server",
-      "id": "mail",
-      "description": "Mail with Web interface and compatible with popular mail apps"
-    },
-    {
-      "name": "File browser",
-      "id": "files",
-      "description": "Simple file browser"
-    },
-    {
-      "name": "Rocket.Chat",
-      "id": "rocketchat",
-      "description": "Text, voice and video chat"
-    },
-    {
-      "name": "GOGS git server",
-      "id": "gogs",
-      "description": "Distributed version control system"
-    },
-    {
-      "name": "Syncthing",
-      "id": "syncthing",
-      "description": "Continuous File Synchronization"
-    },
-    {
-      "name": "WordPress",
-      "id": "wordpress",
-      "description": "Blogging, mailing lists and forums, media galleries, and online stores"
-    },
-    {
-      "name": "Standard Notes",
-      "id": "notes",
-      "description": "Standard Notes is an easy-to-use encrypted note-taking app"
-    },
-    {
-      "name": "Users",
-      "id": "users",
-      "description": "User management app"
-    },
-    {
-      "name": "Pi-hole",
-      "id": "pihole",
-      "description": "Network-wide Ad Blocking"
-    },
-    {
-      "name": "OpenVPN",
-      "id": "openvpn",
-      "description": "Secure connection to your Syncloud device over the Internet"
-    },
-    {
-      "name": "Plex Media Server",
-      "id": "plex",
-      "description": "Free movies and TV plus all your personal media libraries on every device. Master your Mediaverse"
-    },
-    {
-      "name": "Bitwarden",
-      "id": "bitwarden",
-      "description": "Password Manager"
-    },
-    {
-      "name" : "Home Assistant",
-      "id" : "home-assistant",
-      "description": "Home automation software designed to be the central control system for smart home devices"
-    },
-    {
-      "name" : "Jellyfin Media System",
-      "id" : "jellyfin",
-      "description": "The Free Software Media System"
-    },
-    {
-      "name" : "Collabora Online DE",
-      "id" : "collabora",
-      "description": "Collabora Online to edit your Nextcloud Office documents"
-    },
-    {
-      "name" : "Mastodon",
-      "id" : "mastodon",
-      "description": "Social Network"
-    },
-    {
-      "name" : "Grocy",
-      "id" : "grocy",
-      "description": "Groceries & household management"
-    },
-    {
-      "name" : "Matrix",
-      "id" : "matrix",
-      "description": "An open network for secure, decentralized communication"
-    },
-    {
-      "name" : "Crowdsec",
-      "id" : "crowdsec",
-      "description": "Intrusion prevention system"
-    },
-    {
-      "name" : "Calibre-Web",
-      "id" : "calibre",
-      "description": "Browsing, reading and downloading eBooks"
-    },
-    {
-      "name" : "ShairPort",
-      "id" : "shairport",
-      "description": "AirPlay audio player"
-    },
-    {
-      "name" : "PhotoPrism AI-Powered Photos",
-      "id" : "photoprism",
-      "description": "AI-Powered Photos App for the Decentralized Web. We are on a mission to protect your freedom and privacy"
-    },
-    {
-      "name" : "Stable Diffusion",
-      "id" : "stable-diffusion",
-      "description": "Generative artificial intelligence (generative AI) model that produces unique photorealistic images from text and image prompts"
-    },
-    {
-      "name" : "Transmission",
-      "id" : "transmission",
-      "description": "A Fast, Easy and Free Bittorrent Client"
-    },
-    {
-      "name" : "Frigate NVR",
-      "id" : "frigate",
-      "description": "NVR With Realtime Object Detection for IP Cameras"
-    },
-    {
-      "name" : "YouTube Downloader",
-      "id" : "youtube",
-      "description": "YouTube downloader based on yt-dlp tool"
-    },
-    {
-      "name" : "PeerTube",
-      "id" : "peertube",
-      "description": "Decentralized video platform"
-    },
-    {
-      "name" : "Jitsi Meet",
-      "id" : "jitsimeet",
-      "description": "Secure and high quality meetings"
-    },
-    {
-      "name" : "Paperless-ngx",
-      "id" : "paperless",
-      "description": "Scan, index and archive all your physical documents"
-    }
+    "name": "Transmission",
+    "id": "transmission",
+    "description": "A Fast, Easy and Free Bittorrent Client",
+    "appcode": "https://github.com/syncloud/transmission",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/transmission/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/transmission/transmission",
+    "projectwebsite": "https://transmissionbt.com/",
+    "projectreadme": "https://github.com/transmission/transmission/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/transmission/transmission/master/README.md",
+    "projectlicense": "https://github.com/transmission/transmission/blob/master/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/transmission/transmission/issues",
+    "projectrepoapi": "https://api.github.com/repositories/35129809",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "utilities-others"
+  },
+  {
+    "name": "Frigate NVR",
+    "id": "frigate",
+    "description": "NVR With Realtime Object Detection for IP Cameras",
+    "appcode": "https://github.com/syncloud/frigate",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/frigate/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/blakeblackshear/frigate",
+    "projectwebsite": "https://frigate.video/",
+    "projectreadme": "https://github.com/blakeblackshear/frigate/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/blakeblackshear/frigate/master/README.md",
+    "projectlicense": "https://github.com/blakeblackshear/frigate/blob/master/LICENSE",
+    "projectimgs": ["https://private-user-images.githubusercontent.com/569905/337930841-5e713cb9-9db5-41dc-947a-6937c3bc376e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE4NjU4NjcsIm5iZiI6MTczMTg2NTU2NywicGF0aCI6Ii81Njk5MDUvMzM3OTMwODQxLTVlNzEzY2I5LTlkYjUtNDFkYy05NDdhLTY5MzdjM2JjMzc2ZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMTE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTExN1QxNzQ2MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yZTM1ZTMwMTk1YWE0OWMzMThlNDVhMjM5ZmFjMTQyNGE3ZjQ1MjQ4Njg4N2RjMzVmN2U2NDkyZmMwZmQzY2ZjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.dpueZckhY6b5JjlqM_7SxZx5K862cNQzNA2Ew-U8z4Q","https://private-user-images.githubusercontent.com/569905/337930862-6fed96e8-3b18-40e5-9ddc-31e6f3c9f2ff.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE4NjU4NjcsIm5iZiI6MTczMTg2NTU2NywicGF0aCI6Ii81Njk5MDUvMzM3OTMwODYyLTZmZWQ5NmU4LTNiMTgtNDBlNS05ZGRjLTMxZTZmM2M5ZjJmZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMTE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTExN1QxNzQ2MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01Nzk4Y2Q4NmJjNjU1ZmM4MjNjNjU0ZmIxODU4YzM4YjQzOGY1NDU5YjgzMjVmZTg2ZTBkOTZmZDFkNTkzYzNmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.CW2pITXkfTkNVJPyi5hZp5_EgtkHTlxRODT6ysAe7Wc","https://private-user-images.githubusercontent.com/569905/337930873-d6788a15-0eeb-4427-a8d4-80b93cae3d74.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE4NjU4NjcsIm5iZiI6MTczMTg2NTU2NywicGF0aCI6Ii81Njk5MDUvMzM3OTMwODczLWQ2Nzg4YTE1LTBlZWItNDQyNy1hOGQ0LTgwYjkzY2FlM2Q3NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMTE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTExN1QxNzQ2MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MTVhNWJmNmUxYWVkMWMzZmU5MzY3ODJmNDdhNGIyMzE1ZDFjNDkyMDhiNTUzMDkzOWQ3NDQ4ZDk1YmY0YWRiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.bIYOz7lSTBsti_qbhJqufHk6Tm4w6oylG0T0fCDhsac"],
+    "projectissues": "https://github.com/blakeblackshear/frigate/issues",
+    "projectrepoapi": "https://api.github.com/repositories/167694194",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "utilities-others"
+  },
+  {
+    "name": "YouTube Downloader",
+    "id": "youtube",
+    "description": "Download videos from YouTube",
+    "appcode": "https://github.com/syncloud/youtube",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/youtube/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/yt-dlp/yt-dlp",
+    "projectwebsite": "https://github.com/yt-dlp/yt-dlp",
+    "projectreadme": "https://github.com/yt-dlp/yt-dlp/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/yt-dlp/yt-dlp/master/README.md",
+    "projectlicense": "https://github.com/yt-dlp/yt-dlp/blob/master/LICENSE",
+    "projectimgs": [],
+    "projectissues": "https://github.com/yt-dlp/yt-dlp/issues",
+    "projectrepoapi": "https://api.github.com/repositories/307260205",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "media-entertainment"
+  },
+  {
+    "name": "PeerTube",
+    "id": "peertube",
+    "description": "Decentralized video platform",
+    "appcode": "https://github.com/syncloud/peertube",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/peertube/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/Chocobozzz/PeerTube",
+    "projectwebsite": "https://joinpeertube.org/",
+    "projectreadme": "https://github.com/Chocobozzz/PeerTube/blob/develop/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/Chocobozzz/PeerTube/develop/README.md",
+    "projectlicense": "https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE",
+    "projectimgs": ["https://camo.githubusercontent.com/af4fce67518f837f1e6e6362109af867d5ad8252b352ddda156404341a69633b/68747470733a2f2f6c7574696d2e6370792e72652f39434c58683059732e706e67"],
+    "projectissues": "https://github.com/Chocobozzz/PeerTube/issues",
+    "projectrepoapi": "https://api.github.com/repositories/45213667",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "media-entertainment"
+  },
+  {
+    "name": "Jitsi Meet",
+    "id": "jitsimeet",
+    "description": "Secure and high quality meetings",
+    "appcode": "https://github.com/syncloud/jitsimeet",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/jitsimeet/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/jitsi/jitsi-meet",
+    "projectwebsite": "https://jitsi.org/jitsi-meet/",
+    "projectreadme": "https://github.com/jitsi/jitsi-meet/blob/master/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/jitsi/jitsi-meet/refs/heads/master/README.md",
+    "projectlicense": "https://github.com/jitsi/jitsi-meet/blob/master/LICENSE",
+    "projectimgs": ["https://raw.githubusercontent.com/jitsi/jitsi-meet/master/readme-img1.png"],
+    "projectissues": "https://github.com/jitsi/jitsi-meet/issues",
+    "projectrepoapi": "https://api.github.com/repositories/15225670",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "social-networks"
+  },
+  {
+    "name": "Paperless-ngx",
+    "id": "paperless",
+    "description": "Scan, index and archive all your physical documents",
+    "appcode": "https://github.com/syncloud/paperless",
+    "appdocs": "https://github.com/syncloud/platform/wiki",
+    "appdronefile": "https://raw.githubusercontent.com/syncloud/paperless/refs/heads/master/.drone.jsonnet",
+    "projectcode": "https://github.com/paperless-ngx/paperless-ngx",
+    "projectwebsite": "https://paperless-ngx.readthedocs.io/",
+    "projectreadme": "https://github.com/paperless-ngx/paperless-ngx/blob/dev/README.md",
+    "projectreadmeraw": "https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/refs/heads/dev/README.md",
+    "projectlicense": "https://github.com/paperless-ngx/paperless-ngx/blob/main/LICENSE",
+    "projectimgs": ["https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/main/docs/assets/screenshots/documents-smallcards.png","https://docs.paperless-ngx.com/assets/screenshots/documents-table.png","https://docs.paperless-ngx.com/assets/screenshots/documents-smallcards-dark.png"],
+    "projectissues": "https://github.com/paperless-ngx/paperless-ngx/issues",
+    "projectrepoapi": "https://api.github.com/repositories/458648791",
+    "appissues": "https://github.com/syncloud/platform/issues",
+    "appcategory": "productivity-collaboration"
+  }
   ]
 }
+
diff --git a/css/apps.css b/css/apps.css
new file mode 100644
index 0000000..bda9f6d
--- /dev/null
+++ b/css/apps.css
@@ -0,0 +1,252 @@
+
+
+
+.buttonblock {
+    padding-bottom: 1%;
+}
+
+@media (min-width: 768px) {
+    .app-settings-row {
+        display: flex;
+    }
+    
+    
+    .col-vert {
+        display: flex;
+        align-items: center;
+        justify-content: center;  
+    }
+
+    .col-md-3.label,
+    .col-md-6.input {
+        display: block;
+        width: 100%;
+    }
+
+    .col-md-6.input {
+        margin-bottom: 0;
+    }
+
+    .col-md-3.text-right {
+        text-align: right;
+    }
+    #mdcontent2container { left: 17%; width: 66%; }
+}
+
+@media (max-width: 767.98px) {
+    .col-vert {
+        margin-bottom: 10px;
+        justify-content: center; 
+    }
+    
+    #apps-detail {
+margin: 0px 1% 0px 1%;
+display: flex; 
+flex-wrap: wrap;
+justify-content: center;
+}
+ #mdcontent2container { left: 2%; width: 96%; }
+}
+
+
+
+
+
+.rowthree-wrapper {
+padding: 20px 0 20px 0;
+}
+
+.list-view {
+margin-left: 30px;
+}
+
+@media (min-width: 767.98px) {
+.grid-view .threeblock {
+                display: inline-block;
+                width: 30%;
+                padding: 0px 0px 15px 0px;
+            }
+            .list-view .threeblock {
+                display: block;
+                width: 100%;
+                padding: 0px 0px 0px 0px;
+            }
+            .app-detail {
+                padding: 2%;
+             }
+}
+
+@media (max-width: 767.98px) {
+.grid-view .threeblock {
+                display: inline-block;
+                width: 80% !important;
+                padding: 0px 0px 15px 0px;
+            }
+            .list-view .threeblock {
+                display: block;
+                width: 100%;
+                padding: 0px 0px 0px 0px;
+                margin-bottom: 25px;
+            }
+            .app-detail {
+                padding: 4%;
+             }
+}
+
+.list-view {
+                text-align: left;
+            }
+            
+            .list-view .threeblock .app-image {
+                width: 7%;
+            }
+            .list-view .threeblock .appcategory {
+                display:inline-block;
+                vertical-align:top;
+                text-align:left
+            }
+            
+            .grid-view .threeblock .app-image {
+                width: 30%;
+            }
+            .grid-view .threeblock .appcategory {
+                display:none;
+            }
+            
+            .app-detail {
+                text-align: left;
+                background-color: #F8F8F8;
+                border-radius: 25px;
+             }
+             .app-detail-row {
+                padding: 2%;
+             }
+             .app-detail-title {
+                font-weight: bold;
+             }
+             .svg-icon {
+            width: 200px;
+            vertical-align: middle; /* Aligns the SVG with the text */
+        }
+        
+        .row.d-flex.align-items-stretch {
+  display: flex;
+  align-items: stretch;
+}
+
+.col-md-6 {
+  width: 48%;
+          margin: 1%;
+  }
+  .col-md-6-search {
+  width: 48%;
+  padding-left: 15px;
+  }
+  
+  .flex-container-search {
+  display: flex; 
+  align-items: center; 
+  gap: 30px;
+  }
+
+@media (max-width: 768px) {
+    .col-md-6 {
+        width: 96%;
+        margin: 1%;
+    }
+    .col-md-6-search {
+        width: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    .row.d-flex.align-items-stretch {
+  display: block;
+}
+.flex-container-search {
+  display: flex; 
+  align-items: center; 
+  gap: 10px;
+  }
+}
+ 
+       #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(248, 248, 248, 0.8); z-index: 1000; } 
+       #mdcontent2container { position: absolute; top: 0; background-color: white; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; overflow: auto; height: 100vh; } 
+       #mdcontent2 { width: 100%; max-width: 100%; position: relative; } 
+       #mdcontent2 img { max-width: 100%; } 
+       #mdcontent2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); } 
+       .button_border_small { 
+       padding: 1px 4px; 
+       width: auto; 
+       } 
+       .fadeout { height: 33vh; /* Show first 1/3 of the content */ overflow: hidden; position: relative; }
+        
+        #code-box {
+    border: 1px solid #ccc;
+    padding: 50px 10px 10px 10px; 
+    margin-top: 20px;
+    background-color: #f9f9f9;
+    position: relative;
+}
+
+#code-content {
+overflow: auto;
+}
+
+#copy-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    background-color: none;
+    color: #00aeef;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+#copy-button:hover {
+    background-color: #00aeef;
+    color: #000;
+}
+
+
+  .expanded {
+    
+    top: 0;
+    left: 10%;
+    width: 80%;
+    
+    
+  }
+  
+  .expanded2 {
+    
+    top: 0;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(248, 248, 248, 0.8);
+    z-index: 9999;
+  }
+
+  #carouselWrapper {
+    position: relative;
+  }
+
+  .zoom-in {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1;
+    font-size: 140%;
+  }
+  
+  .zoom-out {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10000;
+    font-size: 140%;
+  }
+  
+  
diff --git a/js/app-detail.js b/js/app-detail.js
new file mode 100644
index 0000000..3979b4c
--- /dev/null
+++ b/js/app-detail.js
@@ -0,0 +1,189 @@
+   
+    $(document).ready(function() {
+        function getQueryParam(param) {
+            const urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get(param);
+        }
+
+        const appName = getQueryParam('app');
+
+        $.getJSON("apps.json").done(function(data) {
+            const filteredApps = appName ? data.apps.filter(app => app.id === appName) : data.apps;
+            const appId = filteredApps.length > 0 ? filteredApps[0].id : null;
+            const appdronefileurl = filteredApps.length > 0 ? filteredApps[0].appdronefile : null;
+            const getprojectrepoapi = filteredApps.length > 0 ? filteredApps[0].projectrepoapi : null;
+            
+            $("#apps-detail").html(_.template($("#app-template-detail").html())({ apps: filteredApps }));
+
+            // Initialize the theme selection script after the content is loaded
+    
+    const themeIcon = document.getElementById('theme-icon');
+    const themeLink = document.getElementById('theme-link');
+    const codeContent = document.getElementById('code-content');
+    const currentURL = window.location.href;
+
+function updateCodeContent() {
+   
+        
+        let newSrc;
+
+        if (this.value === 'dark') {
+            newSrc = 'https://github.com/syncloud/syncloud.org/raw/master/images/badge_dark.svg';
+        } else {
+            newSrc = 'https://github.com/syncloud/syncloud.org/raw/master/images/badge_bright.svg';
+        }
+
+        themeIcon.src = newSrc;
+        themeLink.href = currentURL;
+        
+        codeContent.innerHTML = `&lt;a href=&quot;${currentURL}&quot; target=&quot;_blank&quot;&gt; &lt;img src=&quot;${newSrc}&quot; alt=&quot;Syncloud App&quot;&gt; &lt;/a&gt;`;
+
+        
+    }
+
+    
+    // Initial 
+        updateCodeContent();
+        
+        
+        // Change
+        $('#theme-select').change(updateCodeContent);
+    
+    // image slider
+    
+    const carousel = document.getElementById('myCarousel');
+    const carouselwrapper = document.getElementById('carouselWrapper');
+    
+    const zoomButton = document.getElementById('zoomButton');
+    let isExpanded = false;
+
+    zoomButton.addEventListener('click', function() {
+      if (!isExpanded) {
+        carousel.classList.add('expanded');
+        carouselwrapper.classList.add('expanded2');
+        carouselWrapper.style.position = 'fixed';
+        zoomButton.innerHTML = '<i class="fa-solid fa-magnifying-glass-minus"></i>';
+        zoomButton.classList.remove('zoom-in');
+        zoomButton.classList.add('zoom-out');
+        isExpanded = true;
+      } else {
+        carousel.classList.remove('expanded');
+        carouselwrapper.classList.remove('expanded2');
+        carouselWrapper.style.position = 'relative';
+        zoomButton.innerHTML = '<i class="fa-solid fa-magnifying-glass-plus"></i>';
+        zoomButton.classList.remove('zoom-out');
+        zoomButton.classList.add('zoom-in');
+        isExpanded = false;
+      }
+    });
+
+
+ 
+
+var contentDiv2 = document.getElementById('mdcontent2');
+                if (contentDiv2) {
+                    var url = contentDiv2.getAttribute('data-url');
+                    fetch(url)
+                        .then(response => response.text())
+                        .then(text => {
+                            var converter = new showdown.Converter();
+                            var html = converter.makeHtml(text);
+                            contentDiv2.innerHTML = html;
+                        });
+                } else {
+                    console.error('contentDiv2 is null');
+                }
+                
+                // Function to copy content 
+                function copyContent() { var originalContent = document.getElementById('mdcontent2').innerHTML; 
+                document.getElementById('mdcontent2-overlay').innerHTML = originalContent; } 
+                // Toggle visibility of the overlay div 
+                document.getElementById('toggleButton').addEventListener('click', function() { var overlay = document.getElementById('overlay'); 
+                var fadeoutContent = document.getElementById('mdcontent2'); 
+                copyContent(); 
+                // Copy content when the button is clicked 
+                if (overlay.style.display === 'none' || overlay.style.display === '') { overlay.style.display = 'block'; 
+                fadeoutContent.style.display = 'none'; 
+                // Hide the default shown content 
+                } else { overlay.style.display = 'none'; fadeoutContent.style.display = 'block'; 
+                // Show the default shown content 
+                } }); 
+                // Close button functionality 
+                document.getElementById('closebtn').addEventListener('click', function() { 
+                document.getElementById('overlay').style.display = 'none'; 
+                document.getElementById('mdcontent2').style.display = 'block'; 
+                // Show the default shown content 
+                });
+                
+            function replaceCategoryNames2(categories) {
+              var categoryText = $('#fixedCategory').text().trim();
+              if (categories[categoryText]) {
+                $('#fixedCategory').text(categories[categoryText]);
+              }
+            }
+
+
+            
+            // Call the function to replace category names
+              $.getJSON("app-categories.json").done(function (categories) {
+                replaceCategoryNames2(categories);
+              }); 
+              
+              //Get drone jsonnet data
+              function getAppVersion(url, appName) { 
+              $.get(url, function(data) { 
+              var regex = new RegExp('local ' + appName + ' = "(\\d+\\.\\d+\\.\\d+)"'); 
+              var match = data.match(regex); 
+              if (match) { $('#app_version').text(match[1]); } 
+              else { $('#app_version').text('Version not found'); } }); } 
+              getAppVersion(appdronefileurl, appId);
+              
+              //Get git data
+              $.get(getprojectrepoapi, function(data) { 
+              const stargazersCount = data.stargazers_count; 
+              $('#stargazers-count').text(stargazersCount); 
+              const license_name = data.license.name; 
+              $('#license-name').text(license_name);
+              }); 
+
+
+        });
+
+
+
+        init_page("app-detail");
+    });
+
+        function share(platform) {
+            const url = encodeURIComponent(window.location.href);
+            let shareUrl = '';
+
+            switch(platform) {
+                case 'mastodon':
+                    shareUrl = `https://mastodon.social/share?text=${url}`;
+                    break;
+                case 'signal':
+                    shareUrl = `https://signal.me/#p/${url}`;
+                    break;
+                case 'telegram':
+                    shareUrl = `https://t.me/share/url?url=${url}`;
+                    break;
+                case 'email':
+                    shareUrl = `mailto:?subject=Check this out&body=${url}`;
+                    break;
+            }
+
+            window.open(shareUrl, '_blank');
+        }
+        
+        function copyToClipboard() {
+    const codeBox = document.getElementById('code-content');
+    const range = document.createRange();
+    range.selectNode(codeBox);
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(range);
+    document.execCommand('copy');
+    window.getSelection().removeAllRanges();
+    alert('Code copied to clipboard!');
+}
+   
diff --git a/js/apps.js b/js/apps.js
new file mode 100644
index 0000000..1f575b4
--- /dev/null
+++ b/js/apps.js
@@ -0,0 +1,148 @@
+ $(document).ready(function() {
+                $.getJSON("apps.json").done(function (data) {
+                    $("#apps").html(_.template($("#app-template").html())(data));
+                    
+                    
+                    
+                     function replaceCategoryNames(categories) {
+                  // Create a mapping of values to their respective names
+                  const categoryMap = categories;
+
+                  // Get all divs with the class 'appcategory'
+                  const appCategoryDivs = document.querySelectorAll('div.appcategory');
+
+                  // Replace the content of each div with the corresponding category name
+                  appCategoryDivs.forEach(div => {
+                      const categoryValue = div.textContent.trim(); // Get the text content of the div
+                      if (categoryMap[categoryValue]) {
+                          div.textContent = categoryMap[categoryValue]; // Replace with the corresponding name
+                      }
+                  });
+                  
+                  // Get the select element
+                  const select = document.getElementById('categories');
+
+                  // Add options dynamically
+                  for (const value in categoryMap) {
+                      if (categoryMap.hasOwnProperty(value)) {
+                          const option = document.createElement('option');
+                          option.value = value;
+                          option.textContent = categoryMap[value];
+                          select.appendChild(option);
+                      }
+                  }
+              }
+
+              // Call the function to replace category names
+              $.getJSON("app-categories.json").done(function (categories) {
+                replaceCategoryNames(categories);
+              });   
+              
+    
+function updateView() {
+    const sortValue = $('#sort-apps').val();
+    const selectedCategory = $('#categories').val();
+    const searchValue = $('#search-bar').val().toLowerCase();
+    const $appBlocks = $('.threeblock');
+
+    const sortedBlocks = $appBlocks.sort((a, b) => {
+        const appNameA = $(a).find('.appnametext').text().toLowerCase();
+        const appNameB = $(b).find('.appnametext').text().toLowerCase();
+        const categoryA = $(a).find('.appcategory').text().toLowerCase();
+        const categoryB = $(b).find('.appcategory').text().toLowerCase();
+
+        if (sortValue === 'sort-a-z') {
+            return appNameA.localeCompare(appNameB);
+        } else if (sortValue === 'sort-z-a') {
+            return appNameB.localeCompare(appNameA);
+        } else if (sortValue === 'sort-categories') {
+            return categoryA.localeCompare(categoryB);
+        }
+    });
+
+    sortedBlocks.each(function() {
+        const appName = $(this).find('.appnametext').text().toLowerCase();
+        const appCategory = $(this).find('.appcategory').text().toLowerCase();
+
+        if ((selectedCategory === 'all' || $(this).hasClass(selectedCategory)) &&
+            (appName.includes(searchValue) || searchValue === '')) {
+            $(this).css('display', 'inline-block');
+        } else {
+            $(this).css('display', 'none');
+        }
+    });
+
+    $('#apps').empty().append(sortedBlocks);
+}
+
+function toggleSortCategoriesOption() {
+    const selectedCategory = $('#categories').val();
+    const $sortCategoriesOption = $('#sort-apps option[value="sort-categories"]');
+
+    if (selectedCategory === 'all') {
+        $sortCategoriesOption.show();
+    } else {
+        $sortCategoriesOption.hide();
+        // Reset sort option to the first option if "Categories" is hidden
+        if ($('#sort-apps').val() === 'sort-categories') {
+            $('#sort-apps').val($('#sort-apps option:first').val());
+        }
+    }
+}
+
+// Event listeners for updating the view and toggling the sort categories option
+document.getElementById('categories').addEventListener('change', () => {
+    toggleSortCategoriesOption();
+    updateView();
+});
+document.getElementById('sort-apps').addEventListener('change', updateView);
+document.getElementById('search-bar').addEventListener('input', updateView);
+
+// Initial check for toggling the sort categories option
+toggleSortCategoriesOption();
+    
+                    
+                });
+                init_page("apps");
+
+        
+
+    });
+    
+   
+    
+    
+     document.addEventListener('DOMContentLoaded', function() {
+                var isListView = false;
+    
+                function renderApps(apps) {
+                    var template = _.template(document.getElementById('app-template').innerHTML);
+                    document.getElementById('apps').innerHTML = template({ apps: apps });
+                }
+                
+               
+                
+                
+
+                
+
+        document.getElementById('toggle-view').addEventListener('click', function() {
+            isListView = !isListView;
+            document.getElementById('apps').className = isListView ? 'rowthree list-view' : 'rowthree grid-view';
+            
+            // Change the icon based on the view
+            this.innerHTML = isListView ? '<i class="fas fa-th"></i>' : '<i class="fas fa-list"></i>';
+        });
+                
+                 loadApps(renderApps);
+    
+     
+            });
+            
+            
+            
+          
+            
+            
+   
+
