diff --git a/index.html b/index.html
index a1de7704..9b059f59 100644
--- a/index.html
+++ b/index.html
@@ -263,23 +263,52 @@ <h2 class="title  is-spaced">Display</h2>
                         </div>
                     </b-tab-item>
 
+                    <b-tab-item label="Validator" icon="video" class="tabItemScrollable tab-item">
+                        <template #header>
+                            <div @click="collapseActiveTab($event, 2)"
+                            v-bind:style="[tabsHidden === false && activeTab === 2 ? {'height': '100%'} : {}]">
+                            <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
+                            <div style="max-width:fit-content; margin-left: auto; margin-right: auto;" v-html="getValidationCounter()"></div>
+                            <span
+                                v-bind:style="[tabsHidden === false && activeTab === 2 ? {'display': 'none'} : {}]">Validator</span>
+                        </div>
+                        </template>
+
+                        <div class="tabContent" style="display: flex; flex-direction: column; height: inherit;">
+                            <img src="assets/ui/Navigation_right_20px.svg" width="30px"
+                                @click="collapseActiveTab($event, 3)">
+                            <h2 class="title is-spaced" v-bind:data="validationReport">glTF Validator</h2>
+                                <div class="modelCredit">
+                                    <p>Number of errors: {{validationReport?.issues?.numErrors ?? 0}}</p>
+                                    <p>Number of warnings: {{validationReport?.issues?.numWarnings ?? 0}}</p>
+                                    <p>Number of infos: {{validationReport?.issues?.numInfos ?? 0}}</p>
+                                </div>
+                                <button class="button is-rounded" style="width: fit-content; flex-shrink: 0;" v-on:click="copyToClipboard(JSON.stringify(validationReport, undefined, 4))">Copy</button>
+                                <textarea cols="25" readonly style="min-height: 200px; max-width: max-content;resize: none; margin-top: 20px; flex-grow: 1;">
+                                    {{ validationReport }}
+                                </textarea>
+                                <span style="margin-top: 5px;">Powered by <a href="https://github.com/KhronosGroup/glTF-Validator" target="_blank" rel="noopener noreferrer">glTF-Validator</a></span>
+                            </b-field>
+                        </div>
+                    </b-tab-item>
+
 
                     <b-tab-item label="Animation" icon="video" class="tabItemScrollable tab-item">
                         <template #header>
-                            <div @click="collapseActiveTab($event, 2)"
-                                v-bind:style="[tabsHidden === false && activeTab === 2 ? {'height': '100%'} : {}]">
+                            <div @click="collapseActiveTab($event, 3)"
+                                v-bind:style="[tabsHidden === false && activeTab === 3 ? {'height': '100%'} : {}]">
                                 <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
-                                <img v-bind:src="[tabsHidden === false && activeTab === 2 ? 'assets/ui/Animation 50X50.svg' : 'assets/ui/Animation 30X30.svg']"
-                                    v-bind:width="[tabsHidden === false && activeTab === 2 ? '50px' : '30px']"
-                                    v-bind:style="[tabsHidden === false && activeTab === 2 ? {'height': '100%'} : {}]">
+                                <img v-bind:src="[tabsHidden === false && activeTab === 3 ? 'assets/ui/Animation 50X50.svg' : 'assets/ui/Animation 30X30.svg']"
+                                    v-bind:width="[tabsHidden === false && activeTab === 3 ? '50px' : '30px']"
+                                    v-bind:style="[tabsHidden === false && activeTab === 3 ? {'height': '100%'} : {}]">
                                 <span
-                                    v-bind:style="[tabsHidden === false && activeTab === 2 ? {'display': 'none'} : {}]">Animation</span>
+                                    v-bind:style="[tabsHidden === false && activeTab === 3 ? {'display': 'none'} : {}]">Animation</span>
                             </div>
                         </template>
 
                         <div class="tabContent">
                             <img src="assets/ui/Navigation_right_20px.svg" width="30px"
-                                @click="collapseActiveTab($event, 2)">
+                                @click="collapseActiveTab($event, 3)">
                             <h2 class="title is-spaced">Animation</h2>
                             <label class="subtitle" v-bind:style="[animations.length == 0 ? {'display': 'none'} : {}]">Animation Controls</label>
                             <toggle-button v-on:buttonclicked="animationPlayChanged.next($event)" ontext="Pause" offtext="Play"
@@ -303,20 +332,20 @@ <h2 class="title is-spaced">Animation</h2>
 
                     <b-tab-item label="Credits" icon="video" class="tabItemScrollable tab-item">
                         <template #header>
-                            <div @click="collapseActiveTab($event, 3)"
-                                v-bind:style="[tabsHidden === false && activeTab === 3 ? {'height': '100%'} : {}]">
+                            <div @click="collapseActiveTab($event, 4)"
+                                v-bind:style="[tabsHidden === false && activeTab === 4 ? {'height': '100%'} : {}]">
                                 <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
-                                <img v-bind:src="[tabsHidden === false && activeTab === 3 ? 'assets/ui/XMP 50X50.svg' : 'assets/ui/XMP 30X30.svg']"
-                                    v-bind:width="[tabsHidden === false && activeTab === 3 ? '50px' : '30px']"
-                                    v-bind:style="[tabsHidden === false && activeTab === 3 ? {'height': '100%'} : {}]">
+                                <img v-bind:src="[tabsHidden === false && activeTab === 4 ? 'assets/ui/XMP 50X50.svg' : 'assets/ui/XMP 30X30.svg']"
+                                    v-bind:width="[tabsHidden === false && activeTab === 4 ? '50px' : '30px']"
+                                    v-bind:style="[tabsHidden === false && activeTab === 4 ? {'height': '100%'} : {}]">
                                 <span
-                                    v-bind:style="[tabsHidden === false && activeTab === 3 ? {'display': 'none'} : {}]">Credits</span>
+                                    v-bind:style="[tabsHidden === false && activeTab === 4 ? {'display': 'none'} : {}]">Credits</span>
                             </div>
                         </template>
 
                         <div class="tabContent">
                             <img src="assets/ui/Navigation_right_20px.svg" width="30px"
-                                @click="collapseActiveTab($event, 3)">
+                                @click="collapseActiveTab($event, 4)">
                             <h2 class="title">Model Credits</h2>
                             <div class="modelCredit"><i>Copyright:</i><br/>{{ assetCopyright }}</div>
                             <div class="modelCredit"><i>Generated by:</i><br/>{{ assetGenerator }}</div>
@@ -335,21 +364,21 @@ <h3 class="title">{{ xmp ? "XMP" : "" }}</h3>
 
                     <b-tab-item label="Advanced Controls" icon="video" class="tabItemScrollable tab-item">
                         <template #header>
-                            <div @click="collapseActiveTab($event, 4)"
-                                v-bind:style="[tabsHidden === false && activeTab === 4 ? {'height': '100%'} : {}]">
+                            <div @click="collapseActiveTab($event, 5)"
+                                v-bind:style="[tabsHidden === false && activeTab === 5 ? {'height': '100%'} : {}]">
                                 <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
-                                <img v-bind:src="[tabsHidden === false && activeTab === 4 ? 'assets/ui/Developer 50X50.svg' : 'assets/ui/Developer 30X30.svg']"
-                                    v-bind:width="[tabsHidden === false && activeTab === 4 ? '50px' : '30px']"
-                                    v-bind:style="[tabsHidden === false && activeTab === 4 ? {'height': '100%'} : {}]">
+                                <img v-bind:src="[tabsHidden === false && activeTab === 5 ? 'assets/ui/Developer 50X50.svg' : 'assets/ui/Developer 30X30.svg']"
+                                    v-bind:width="[tabsHidden === false && activeTab === 5 ? '50px' : '30px']"
+                                    v-bind:style="[tabsHidden === false && activeTab === 5 ? {'height': '100%'} : {}]">
                                 <span
-                                    v-bind:style="[tabsHidden === false && activeTab === 4 ? {'display': 'none'} : {}]">Advanced
+                                    v-bind:style="[tabsHidden === false && activeTab === 5 ? {'display': 'none'} : {}]">Advanced
                                     Controls</span>
                             </div>
                         </template>
 
                         <div class="tabContent">
                             <img src="assets/ui/Navigation_right_20px.svg" width="30px"
-                                @click="collapseActiveTab($event, 4)">
+                                @click="collapseActiveTab($event, 5)">
                             <h2 class="title is-spaced">Advanced Controls</h2>
                             <b-field label="Capture Canvas" class="smallerLabel">
                                 <button v-on:click="captureCanvas.next($event.target.value)" type="button" class="button is-rounded"><i
diff --git a/package-lock.json b/package-lock.json
index 42de0799..46e35164 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "bulma": "^0.9.4",
         "fast-png": "^6.2.0",
         "gl-matrix": "^3.2.1",
+        "gltf-validator": "^2.0.0-dev.3.9",
         "jpeg-js": "^0.4.3",
         "normalize-wheel": "^1.0.1",
         "path": "^0.12.7",
@@ -2937,6 +2938,11 @@
         "xtend": "~4.0.1"
       }
     },
+    "node_modules/gltf-validator": {
+      "version": "2.0.0-dev.3.9",
+      "resolved": "https://registry.npmjs.org/gltf-validator/-/gltf-validator-2.0.0-dev.3.9.tgz",
+      "integrity": "sha512-9nPcAgYJwT6sbml7S3/tC+N/BkqTUSL1u8GcmUQLuwToLR0ZH8CF3i/BhVqDwlg7OmKS2GGjjEcnU/oMMeIQUQ=="
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -8255,6 +8261,11 @@
         "resolve": "^1.0.0"
       }
     },
+    "gltf-validator": {
+      "version": "2.0.0-dev.3.9",
+      "resolved": "https://registry.npmjs.org/gltf-validator/-/gltf-validator-2.0.0-dev.3.9.tgz",
+      "integrity": "sha512-9nPcAgYJwT6sbml7S3/tC+N/BkqTUSL1u8GcmUQLuwToLR0ZH8CF3i/BhVqDwlg7OmKS2GGjjEcnU/oMMeIQUQ=="
+    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
diff --git a/package.json b/package.json
index 4e682378..b83f43b0 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "bulma": "^0.9.4",
     "fast-png": "^6.2.0",
     "gl-matrix": "^3.2.1",
+    "gltf-validator": "^2.0.0-dev.3.9",
     "jpeg-js": "^0.4.3",
     "normalize-wheel": "^1.0.1",
     "path": "^0.12.7",
diff --git a/src/logic/uimodel.js b/src/logic/uimodel.js
index 3dc98a1f..5fab7e26 100644
--- a/src/logic/uimodel.js
+++ b/src/logic/uimodel.js
@@ -198,6 +198,11 @@ class UIModel
         );
     }
 
+    updateValidationReport(validationReportObservable)
+    {
+        validationReportObservable.subscribe(data => this.app.validationReport = data);
+    }
+
     disabledAnimations(disabledAnimationsObservable)
     {
         disabledAnimationsObservable.subscribe(data => this.app.disabledAnimations = data);
diff --git a/src/main.js b/src/main.js
index 2a8ac70c..4e13d9bb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,8 @@ import {
   fillEnvironmentWithPaths,
 } from "./model_path_provider.js";
 
+import {validateBytes} from "gltf-validator";
+
 export default async () => {
   const canvas = document.getElementById("canvas");
   const context = canvas.getContext("webgl2", {
@@ -38,11 +40,71 @@ export default async () => {
       Colorful_Studio: "Colorful Studio",
       Wide_Street: "Wide Street",
     },
-    "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Environments/low_resolution_hdrs/",
+    "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Environments/low_resolution_hdrs/"
   );
 
   const uiModel = new UIModel(app, pathProvider, environmentPaths);
 
+
+  const validation = uiModel.model.pipe(
+    mergeMap((model) => {
+      const func = async(model) => {
+        try {
+          const fileType = typeof model.mainFile;
+          if (fileType == "string"){
+            const externalRefFunction = (uri) => {
+              const parent = model.mainFile.substring(0, model.mainFile.lastIndexOf("/") + 1);
+              return new Promise((resolve, reject) => {
+                fetch(parent + uri).then(response => {
+                  response.bytes().then(buffer => {
+                    resolve(buffer);
+                  }).catch(error => {
+                    reject(error);
+                  });
+                }).catch(error => {
+                  reject(error);
+                });
+              });
+            };
+            const response = await fetch(model.mainFile);
+            const buffer = await response.bytes();
+            const result = await validateBytes(buffer, {externalResourceFunction: externalRefFunction, uri: model.mainFile});
+            return result;
+          } else if (Array.isArray(model.mainFile)) {
+            const externalRefFunction = (uri) => {
+              uri = "/" + uri;
+              return new Promise((resolve, reject) => {
+                let foundFile = undefined;
+                for (let i = 0; i < model.additionalFiles.length; i++) {
+                  const file = model.additionalFiles[i];
+                  if (file[0] == uri) {
+                    foundFile = file[1];
+                    break;
+                  }
+                }
+                if (foundFile) {
+                  foundFile.bytes().then((buffer) => {
+                    resolve(buffer);
+                  }).catch((error) => {
+                    reject(error);
+                  });
+                } else {
+                  reject("File not found");
+                }
+              });
+            };
+
+            const buffer = await model.mainFile[1].bytes();
+            return await validateBytes(buffer, {externalResourceFunction: externalRefFunction, uri: model.mainFile[0]});
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      };
+      return from(func(model));
+    })
+  );
+
   // whenever a new model is selected, load it and when complete pass the loaded gltf
   // into a stream back into the UI
   const gltfLoaded = uiModel.model.pipe(
@@ -351,6 +413,7 @@ export default async () => {
   });
 
   uiModel.attachGltfLoaded(gltfLoaded);
+  uiModel.updateValidationReport(validation);
   uiModel.updateStatistics(statisticsUpdateObservable);
   const sceneChangedStateObservable = uiModel.scene.pipe(map(() => state));
   uiModel.attachCameraChangeObservable(sceneChangedStateObservable);
diff --git a/src/ui/sass.scss b/src/ui/sass.scss
index 9d2c2c95..152575a3 100644
--- a/src/ui/sass.scss
+++ b/src/ui/sass.scss
@@ -69,6 +69,11 @@ html
     height: 100%;
 }
 
+a:hover
+{
+    color: $primary-light;
+}
+
 body
 {
     margin: 0;
@@ -130,7 +135,7 @@ nav.tabs
 {
     margin-top: calc(100vh * 0.11);
 }
-.tabs li:nth-child(5)
+.tabs li:nth-child(6)
 {
     margin-top: auto;
     margin-bottom: calc(100vh * 0.02);
@@ -169,6 +174,12 @@ nav.tabs
     padding: 1em;
 }
 
+textarea
+{
+    background-color: #1b1b1b;
+    color: $text
+}
+
 .tab-item h2
 {
     margin-bottom: 70px;
diff --git a/src/ui/ui.js b/src/ui/ui.js
index 1423f775..924d2447 100644
--- a/src/ui/ui.js
+++ b/src/ui/ui.js
@@ -47,6 +47,8 @@ const appCreated = createApp({
             selectedAnimationsChanged: new Subject(),
             selectedEnvironmentChanged: new Subject(),
 
+            validatorChanged: new Subject(),
+
             fullheight: true,
             right: true,
             models: ["DamagedHelmet"],
@@ -71,6 +73,8 @@ const appCreated = createApp({
             selectedAnimations: [],
             disabledAnimations: [],
 
+            validationReport: {},
+
             ibl: true,
             iblIntensity: 0.0,
             punctualLights: true,
@@ -157,6 +161,37 @@ const appCreated = createApp({
     },
     methods:
     {
+        async copyToClipboard(text) {
+            try {
+                await navigator.clipboard.writeText(text);
+                this.$buefy.toast.open({
+                    message: "Copied to clipboard",
+                    type: 'is-success'
+                });
+            } catch (err) {
+                this.error("Error copying to clipboard.");
+            }
+        },
+        getValidationCounter: function(){
+            let number = 0;
+            let color = "white";
+            if (this.validationReport?.issues?.numErrors > 0) {
+                number = this.validationReport?.issues?.numErrors;
+                color = "red";
+            } else if (this.validationReport?.issues?.numWarnings > 0) {
+                number = this.validationReport?.issues?.numWarnings;
+                color = "yellow";
+            } else if (this.validationReport?.issues?.numInfos > 0) {
+                number = this.validationReport?.issues?.numInfos;
+            }
+            if (number !== 0) {
+                return `<div style="display:flex;color:black; font-weight:bold; background-color:${color}; border-radius:50%; width:fit-content; min-width:2rem; align-items:center;aspect-ratio:1/1;justify-content:center;">${number}</div>`;
+            }
+            if (this.tabsHidden === false && this.activeTab === 2) {
+                return `<img src="assets/ui/Capture 50X50.svg" width="50px" height="100%">`;
+            }
+            return '<img src="assets/ui/Capture 30X30.svg" width="30px">';
+        },
         setAnimationState: function(value)
         {
             this.$refs.animationState.setState(value);