diff --git a/api/controllers/app.js b/api/controllers/app.js
index f839678a..f5fa226a 100644
--- a/api/controllers/app.js
+++ b/api/controllers/app.js
@@ -11,6 +11,7 @@ const config = require('../config');
 const db = require('../models');
 const common = require('../common');
 const provenance = require('../lib/provenance');
+const e = require('express');
 
 function canedit(user, rec) {
     if(user) {
@@ -37,9 +38,9 @@ function canedit(user, rec) {
  * @apiSuccess {Object}         List of apps (maybe limited / skipped) and total count
  */
 router.get('/', common.jwt({credentialsRequired: false}), (req, res, next)=>{
-    var skip = req.query.skip||0;
-    let limit = req.query.limit||100;
-    var ands = [];
+    const skip = req.query.skip||0;
+    const limit = req.query.limit||100;
+    const ands = [];
     if(req.query.find) ands.push(JSON.parse(req.query.find));
 
     common.getprojects(req.user, (err, project_ids)=>{
@@ -93,7 +94,7 @@ router.get('/query', common.jwt({credentialsRequired: false}), (req, res, next)=
     //and get *all* apps (minus some heavy/unnecessary stuff)
     common.getprojects(req.user, async (err, project_ids)=>{
         if(err) return next(err);
-        const apps = await db.Apps.find({
+        let findQuery = {
             removed: false,
             $or: [
                 //if projects is set, user need to have access to it
@@ -105,54 +106,115 @@ router.get('/query', common.jwt({credentialsRequired: false}), (req, res, next)=
                 {projects: null}, //if projects is set to null, it's available to everyoone
                 {projects: {$exists: false}}, //if projects not set, it's availableo to everyone
             ]
-        })
+        };
+        if(req.query.find) findQuery = {$and: [findQuery, JSON.parse(req.query.find)]};
+        
+        let datatype_ids = [];
+
+        if(req.query.includeIncompatible === 'true') {
+            // When incompatible flag is true, remove the datatype filter
+            if(findQuery.$and) {
+                findQuery.$and = findQuery.$and.filter(query => !query["inputs.datatype"]);
+            }
+            datatype_ids = JSON.parse(req.query.find)?.['inputs.datatype']?.['$in'];
+        }
+        
+        let apps = await db.Apps.find(findQuery)
         .select('-config -stats.gitinfo -contributors') //cut things we don't need
         //we want to search into datatype name/desc (desc might be too much?)
         .populate('inputs.datatype', 'name desc') 
         .populate('outputs.datatype', 'name desc')
         .lean();
 
-        if(!req.query.q) return res.json(apps); //if not query is set, return everything
-        const queryTokens = req.query.q.toLowerCase().split(" ");
-
-        //then construct list of tokens for each app to search by
-        apps.forEach(app=>{
-            let tokens = [
-                app.name, 
-                app.github_branch, 
-                app.github, 
-                app.desc, 
-                app.desc_override, 
-                app.doi, 
-                ...app.tags
-            ];
-            app.inputs.forEach(input=>{
-                tokens = [...tokens, ...input.datatype_tags, input.datatype.name, input.datatype.desc];
-            });
-            app.outputs.forEach(output=>{
-                tokens = [...tokens, ...output.datatype_tags, output.datatype.name, output.datatype.desc];
-            });
-            tokens = tokens.filter(token=>!!token).map(token=>token.toLowerCase());
+        console.log("found apps", apps.length, "query", findQuery);
+
+        if(!req.query.q && !req.query.includeIncompatible) {
+            return res.json(apps);
+        } //if not query is set, return everything
+
+
+        if(req.query.q && !req.query.includeIncompatible) {
+            const queryTokens = req.query.q.toLowerCase().split(" ");
+            //then construct list of tokens for each app to search by
+            apps.forEach(app=>{
+                let tokens = [
+                    app.name, 
+                    app.github_branch, 
+                    app.github, 
+                    app.desc, 
+                    app.desc_override, 
+                    app.doi, 
+                    ...app.tags
+                ];
+                app.inputs.forEach(input=>{
+                    tokens = [...tokens, ...input.datatype_tags, input.datatype.name, input.datatype.desc];
+                });
+                app.outputs.forEach(output=>{
+                    tokens = [...tokens, ...output.datatype_tags, output.datatype.name, output.datatype.desc];
+                });
+                tokens = tokens.filter(token=>!!token).map(token=>token.toLowerCase());
 
-            //let's just store it as part of the app
-            app._tokens = tokens.join(" ");
-        });
+                //let's just store it as part of the app
+                app._tokens = tokens.join(" ");
+            });
 
-        //then filter apps using _tokens
-        const filtered = apps.filter(app=>{
-            //for each query token, make sure all token matches somewhere in _tokens
-            let match = true;
-            queryTokens.forEach(token=>{
-                if(!match) return; //we already know it won't match
-                if(!app._tokens.includes(token)) match = false;
+            //then filter apps using _tokens
+            const filtered = apps.filter(app=>{
+                //for each query token, make sure all token matches somewhere in _tokens
+                let match = true;
+                queryTokens.forEach(token=>{
+                    if(!match) return; //we already know it won't match
+                    if(!app._tokens.includes(token)) match = false;
+                });
+                return match;
             });
-            return match;
-        });
 
-        //remove _tokens from the apps to reduce returning weight a bit
-        filtered.forEach(app=>{ delete app._tokens; });
+            //remove _tokens from the apps to reduce returning weight a bit
+            apps = filtered.forEach(app=>{ delete app._tokens; });
+        }
+        
+        // if includeIncompatible then include with app.compatible = false / true based on datatype_ids
+        if(req.query.includeIncompatible === 'true' && !req.query.q) {
+
+            const datasetIds = req.query.datasetIds ? JSON.parse(req.query.datasetIds) : [];
+            const datasets = await db.Datasets.find({$or: [{datatype: {$in: datatype_ids}}, {_id: {$in: datasetIds}}]}).lean();
+
+            
+            apps.forEach(app => {
+                let missingInputIDs = [];
+                let match = true;
+            
+                app.inputs.forEach(input => {
+                    if(input.optional) return; 
+            
+                    let matching_dataset = datasets.find(dataset => {
+                        if(!input.datatype) return false; 
+                        if(dataset.datatype.toString() !== input.datatype._id.toString()) return false;
+            
+                        let match_tag = true;
+                        if(dataset.datatype_tags && input.datatype_tags) {
+                            input.datatype_tags.forEach(tag => {
+                                if(tag[0] === "!" && dataset.datatype_tags.includes(tag.substring(1))) match_tag = false;
+                                if(tag[0] !== "!" && !dataset.datatype_tags.includes(tag)) match_tag = false;
+                            });
+                        }
+                        return match_tag;
+                    });
+            
+                    if(!matching_dataset) {
+                        missingInputIDs.push(input._id);
+                        match = false;
+                    }
+                });
+            
+                app.compatible = match;
+                if(!match) {
+                    app.missingInputIDs = missingInputIDs;
+                }
+            });
+        }
 
-        res.json(filtered);
+        res.json(apps);
     });
 });
 
diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 33d1ae71..777d6d98 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -1,5 +1,10 @@
 <template>
-<div v-if="app_" class="appcard" :class="{'compact': compact, 'clickable': clickable, 'deprecated': app_.deprecated_by}" @click="click">
+<div v-if="app_" class="appcard" :class="cardClasses"  @click="handleClick">
+    <div v-if="app_.compatible === false">
+        <div class="incompatible-label">Incompatible</div>
+    </div>
+    <div v-if="app_.deprecated_by" class="deprecated-label">Deprecated</div>
+
     <div v-if="compact">
         <appavatar :app="app_" style="position: absolute; right: 0;" :width="80" :height="80"/>
         <span v-if="app_.deprecated_by" class="deprecated-label" style="top: inherit; bottom: 0;">Deprecated</span>
@@ -26,9 +31,14 @@
             </h4>
             <h5 class="github">{{app_.github}} <b-badge>{{branch||app_.github_branch}}</b-badge></h5>
             <div class="datatypes">
+
+                <b-badge v-if="app_.missingInputIDs && app_.missingInputIDs.length > 0" pill variant="danger">Missing inputs <br/></b-badge> <br/>
+                
                 In
                 <div class="datatype" v-for="input in app_.inputs" :key="'input.'+input.id" :class="[input.optional?'input-optional':'']">
-                    <datatypetag :datatype="input.datatype" :tags="input.datatype_tags" :clickable="false"/>
+
+                    <datatypetag :datatype="input.datatype" :tags="input.datatype_tags" :clickable="false" :missing="app_.missingInputIDs && app_.missingInputIDs.includes(input._id)"/>
+
                     <b v-if="input.multi">multi</b>
                     <b v-if="input.optional">opt</b>
                 </div>
@@ -83,7 +93,10 @@
             </span>
             <span v-if="showDoi && app_.doi">{{app_.doi}}</span>
         </div>
+
+        
     </div>
+    
 </div>
 </template>
 
@@ -133,6 +146,20 @@ export default {
         if(this.app) this.app_ = this.app;
     },
 
+    computed: {
+
+        cardClasses() {
+            return {
+                'clickable': this.clickable && this.isCompatible ,
+                'incompatible': this.isCompatible,
+                'deprecated': this.app_.deprecated_by,
+                'compact': this.compact,
+            }
+            // :class="{'compact': compact, 'clickable': clickable, 'deprecated': app_.deprecated_by}"
+        }
+
+    },
+
     methods: {
         load_app() {
             this.appcache(this.appid, (err, app)=>{
@@ -147,6 +174,12 @@ export default {
             }
         },
 
+        handleClick() {
+            if(this.isCompatible && this.clickable) {
+                this.click();
+            }
+        }
+
     },
 }
 </script>
@@ -256,16 +289,50 @@ line-height: 100%;
 .deprecated h4 {
 opacity: 0.7;
 }
+
+.incompatible-label,
 .deprecated-label {
-position: absolute; 
-right: 0; 
-top: 0;
-background-color: #666;
-color: white; 
-padding: 2px 4px;
-opacity: 0.9;
-text-transform: uppercase;
-font-size: 80%;
-font-weight: bold;
+    position: absolute; 
+    right: 0;
+    background-color: #666;
+    color: white; 
+    padding: 2px 4px;
+    opacity: 0.9;
+    text-transform: uppercase;
+    font-size: 80%;
+    font-weight: bold;
+    z-index: 1;
+}
+
+.incompatible-error {
+    margin-left: 10px;
+    color: #d9534f;
+}
+
+.deprecated-label {
+    top: 0;
+}
+
+.incompatible-label {
+    top: 0px;
 }
-</style>
+
+.appcard.incompatible,
+.appcard.deprecated {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.appcard.incompatible.name,
+.appcard.deprecated.name,
+.appcard.incompatible.github,
+.appcard.deprecated.github {
+    color: #838383;
+}
+
+.incompatible-label {
+    font-size: 70%; 
+    /* //smaller to fit with icon of app */
+}
+
+</style>
\ No newline at end of file
diff --git a/ui/src/components/datatypetag.vue b/ui/src/components/datatypetag.vue
index 60942b86..49fb0927 100644
--- a/ui/src/components/datatypetag.vue
+++ b/ui/src/components/datatypetag.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-if="ready" class="dt" :class="{'dt-clickable': clickable}" @click="click">
+<div v-if="ready" class="dt" :class="{'dt-clickable': clickable, 'dt-missing': missing}" @click="click">
     <icon v-if="_datatype && _datatype.groupAnalysis" name="dot-circle" :style="{color}" scale="1" class="dot"/>
     <icon v-else name="circle" :style="{color}" scale="1" class="dot"/>
     {{name}}
@@ -22,6 +22,7 @@ export default {
         tags: { type: Array, }, 
         trimname: { type: Boolean, default: true, },
         clickable: { type: Boolean, default: true, },
+        missing: { type: Boolean, default: false },
     },
     
     data() {
@@ -122,4 +123,7 @@ export default {
 .tags:not(:last-child) {
     border-right: 1px solid #0001;
 }
+.dt-missing {
+    color: red;
+}
 </style>
diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index f9ccca29..b68ba5ba 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -249,7 +249,7 @@ export default {
             this.loading = true;
 
             //create list of all datatypes that user has staged / generated
-            var datatype_ids = [];
+            const datatype_ids = [];
             this.datasets.forEach(dataset=>{
                 if(!~datatype_ids.indexOf(dataset.datatype)) datatype_ids.push(dataset.datatype);
             });
@@ -264,36 +264,18 @@ export default {
             });
 
             //now find apps that user can submit
-            this.$http.get('app', {params: {
+            this.$http.get('/app/query', {params: {
                 find: JSON.stringify({
                     "inputs.datatype": {$in: datatype_ids},
-                    removed: false,
                 }),
                 sort: 'name', 
                 populate: 'inputs.datatype outputs.datatype',
                 limit: 500, //TODO - this is not sustailable
+                includeIncompatible: true,
+                dataset_ids: this.datasets.map(d=>d._id),
             }})
             .then(res=>{
-                //now, pick apps that we have *all* input datasets that matches the input datatype/tags
-                res.data.apps.forEach(app=>{
-                    var match = true;
-                    app.inputs.forEach(input=>{
-                        if(input.optional) return; //optional 
-                        var matching_dataset = this.datasets.find(dataset=>{
-                            if(!input.datatype) return false; //only happens on dev?
-                            if(dataset.datatype != input.datatype._id) return false;
-                            var match_tag = true;
-                            if(dataset.datatype_tags) input.datatype_tags.forEach(tag=>{
-                                //make sure tag matches
-                                if(tag[0] == "!" && ~dataset.datatype_tags.indexOf(tag.substring(1))) match_tag = false;
-                                if(tag[0] != "!" && !~dataset.datatype_tags.indexOf(tag)) match_tag = false;
-                            });
-                            return match_tag;
-                        }); 
-                        if(!matching_dataset) match = false;
-                    });
-                    if(match) this.apps.all.push(app);
-                });
+                this.apps.all = res.data;
                 this.update_lists();
                 this.loading = false;
             }).catch(console.error);
@@ -331,6 +313,7 @@ export default {
             //apply filter
             if(!this.filter) this.apps.filtered = this.apps.all.sort((a,b)=>a.name - b.name);
             let l_filter = this.filter.toLowerCase();
+
             this.apps.filtered = this.apps.all.filter(app=>{
                 let match = false;
                 if(app.name && app.name.toLowerCase().includes(l_filter)) match = true;
@@ -358,10 +341,15 @@ export default {
                 return match;
             });
 
-            let popular_ordered = this.apps.filtered.map(a=>{
-                if(!a.stats) a.stats = {users: 0};
+            this.apps.filtered = this.sortByMissingDatatypes(this.apps.filtered);
+
+            let popular_ordered = this.apps.filtered
+            .filter(a => a.compatible) // Only include compatible apps
+            .map(a => {
+                if (!a.stats) a.stats = { users: 0 };
                 return a;
-            }).sort((a,b)=>b.stats.users-a.stats.users)
+            })
+            .sort((a, b) => b.stats.users - a.stats.users);
 
             this.apps.popular = popular_ordered.slice(0, 9);
             this.apps.not_popular = popular_ordered.slice(9);
@@ -631,7 +619,25 @@ export default {
             let inputs = this.wrap_with_label(this.filter_datasets(input));
             input.selected.push(...inputs);
             this.validate();
-        }
+        },
+        sortByMissingDatatypes(apps) {
+            // For each app, calculate the number of missing datatypes
+            apps.forEach(app => {
+                let missingDatatypesCount = 0;
+                app.inputs.forEach(input => {
+                    if (!input.optional) {
+                        const isDatatypePresent = this.datasets.some(dataset => dataset.datatype === input.datatype._id);
+                        if (!isDatatypePresent) {
+                            missingDatatypesCount++;
+                        }
+                    }
+                });
+                app.missingDatatypesCount = missingDatatypesCount;
+            });
+
+            // Sort apps by the number of missing datatypes in ascending order
+            return apps.sort((a, b) => a.missingDatatypesCount - b.missingDatatypesCount);
+        },
     },
 } 
 </script>