diff --git a/src/components/DownloadListButton.vue b/src/components/DownloadListButton.vue
new file mode 100644
index 0000000..8b3870d
--- /dev/null
+++ b/src/components/DownloadListButton.vue
@@ -0,0 +1,132 @@
+<template>
+    <SplitButton label="Download" @click="downloadAsJson" :model="items" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { type Technique, type ExportedTechnique } from "@/data/DataTypes";
+import SplitButton from "primevue/splitbutton";
+import downloadjs from "downloadjs";
+import { useCalculatorStore, type CalculatorStore } from "@/stores/calculator.store";
+
+export default defineComponent({
+    components: {
+        SplitButton
+    },
+    props: {
+        rankedList: {
+            type: Array<Technique>,
+            required: true
+        },
+    },
+    data() {
+        return {
+            calculatorStore: useCalculatorStore(),
+            items: [
+                {
+                    label: 'Download as JSON',
+                    command: () => {
+                        this.downloadAsJson()
+                    }
+                },
+                {
+                    label: 'Download as Navigator Layer',
+                    command: () => {
+                        this.downloadAsNavigatorLayer()
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        downloadAsJson() {
+            const parsedList = [] as Array<ExportedTechnique>;
+
+            this.rankedList.slice(0, 10).forEach((technique, i) => {
+                const t = {
+                    rank: i + 1,
+                    tid: technique.tid,
+                    name: technique.name,
+                    description: technique.description,
+                    url: technique.url,
+                    detection: technique.detection,
+                    score: technique.adjusted_score,
+                    network_score: technique.network_score,
+                    process_score: technique.process_score,
+                    file_score: technique.file_score,
+                    cloud_score: technique.cloud_score,
+                    hardware_score: technique.hardware_score,
+                    mitigations: technique.mitigations,
+                    subtechniques: technique.subtechniques,
+                    actionability_score: technique.actionability_score,
+                    choke_point_score: technique.choke_point_score,
+                    prevalence_score: technique.prevalence_score,
+                }
+                parsedList.push(t);
+            })
+            downloadjs(JSON.stringify(parsedList, null, 4), "TopTenTechniques.json", JSON)
+        },
+        downloadAsNavigatorLayer() {
+            const gradient = ["#FFDDBD", "#ffaf66"]
+            const layer = {
+                "name": "Top 10 ATT&CK Techniques",
+                "versions": {
+                    "navigator": "4.8.0",
+                    "layer": "4.5",
+                    "attack": 10.1,
+                },
+                "sorting": 3,
+                "description": "Top ATT&CK Techniques heatmap overview of ATT&CK",
+                "domain": "enterprise-attack",
+                "techniques": [] as Array<{
+                    techniqueID: string;
+                    score: number;
+                    comment: string;
+                    metadata: never[];
+                    color: string;
+                }>,
+                "gradient": {
+                    "colors": gradient,
+                    "minValue": 0,
+                    "maxValue": 3
+                },
+            }
+            type SystemScoreKeys = (keyof CalculatorStore["systemScoreObj"])[];
+            this.rankedList.forEach((technique, i) => {
+                let description = ` Rank: ${i + 1}`;
+                for (const monitoringType of Object.keys(this.calculatorStore.systemScore) as SystemScoreKeys) {
+                    // add each score value to navigator comments:
+                    if (technique[`${monitoringType}_score`]) {
+                        const monitorType = monitoringType.charAt(0).toUpperCase() + monitoringType.slice(1);
+                        const monitorTypeScore = technique[`${monitoringType}_score`].toFixed(2);
+                        description += `\n${monitorType} Score: ${monitorTypeScore}`;
+                    }
+                }
+                const actionability = `Actionability Score: ${technique.actionability_score?.combined_score?.toFixed(2)}`
+                const chokePoint = `Choke Point Score: ${technique.choke_point_score?.toFixed(2)}`
+                const prevalence = `Prevalence Score: ${technique.prevalence_score?.toFixed(2)}`
+
+                description += `\n ${actionability}\n ${chokePoint}\n ${prevalence}`
+
+                const t = {
+                    "techniqueID": technique.tid,
+                    "score": technique.adjusted_score,
+                    "comment": description,
+                    "metadata": [],
+                    "color": ""
+                }
+                if (i > 9) {
+                    t.color = "#FFFFFF"
+                }
+                layer.techniques.push(t)
+            })
+
+            layer.gradient.minValue = layer.techniques[9].score
+            layer.gradient.maxValue = layer.techniques[0].score
+            downloadjs(JSON.stringify(layer, null, 4), "TopTechniquesNavigatorLayer.json", JSON)
+        }
+    },
+});
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/SystemScoreSection.vue b/src/components/SystemScoreSection.vue
index 3aff80d..38df428 100644
--- a/src/components/SystemScoreSection.vue
+++ b/src/components/SystemScoreSection.vue
@@ -7,12 +7,12 @@
         </button>
     </div>
     <div class="system-score-row">
-        <div v-for="monitoringType of Object.keys(this.calculatorStore.systemScore)" :key="monitoringType"
+        <div v-for="monitoringType of Object.keys(calculatorStore.systemScore)" :key="monitoringType"
             class="w-max inline-block mr-4">
             <span class="highlight">{{ getScoreText(monitoringType) }}</span>
             {{ monitoringType }} Monitoring
         </div>
-        <div v-for="filter of Object.keys(this.calculatorStore.activeFilters)" :key="filter" class="inline-block">
+        <div v-for="filter of Object.keys(calculatorStore.activeFilters)" :key="filter" class="inline-block">
             <span class="mr-4 w-max inline-block">
                 {{ filter }}:
                 <span class="highlight">{{ getFilterText(filter) }}</span>
@@ -40,11 +40,11 @@ export default defineComponent({
         };
     },
     methods: {
-        getScoreText(key) {
+        getScoreText(key: string) {
             if (this.calculatorStore.systemScore[key].label === "None") { return "No" }
             return this.calculatorStore.systemScore[key].label
         },
-        getFilterText(key) {
+        getFilterText(key: string) {
             if (this.calculatorStore.activeFiltersObj[key].size < 1) {
                 return `All ${key} Controls`
             }
diff --git a/src/components/TopTenSidebar.vue b/src/components/TopTenSidebar.vue
index fbd2d48..a39c57d 100644
--- a/src/components/TopTenSidebar.vue
+++ b/src/components/TopTenSidebar.vue
@@ -19,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useCalculatorStore } from "../stores/calculator.store";
 import { type Technique } from "@/data/DataTypes";
 export default defineComponent({
     props: {
@@ -32,13 +31,6 @@ export default defineComponent({
             default: 0,
         }
     },
-    data() {
-        return {
-            calculatorStore: useCalculatorStore(),
-        };
-    },
-    methods: {
-    }
 });
 </script>
 
diff --git a/src/index.css b/src/index.css
index 2737132..1c05292 100644
--- a/src/index.css
+++ b/src/index.css
@@ -148,3 +148,13 @@ h1, h2, h3, h4, h5, h6 {
 .p-menubar-root-list {
     @apply w-60 -ml-40
 }
+.p-splitbutton.p-component {
+    @apply w-full bg-ctid-navy text-white rounded-none my-4 ;
+}
+.p-splitbutton .p-splitbutton-defaultbutton {
+    @apply uppercase font-bold text-lg hover:text-ctid-light-purple hover:bg-ctid-dark-navy p-4;
+    font-family: "Fira Sans Extra Condensed", sans-serif;
+}
+.p-splitbutton .p-button-icon-only.p-splitbutton-menubutton {
+    @apply hover:text-ctid-light-purple hover:bg-ctid-dark-navy px-2
+}
\ No newline at end of file
diff --git a/src/stores/calculator.store.ts b/src/stores/calculator.store.ts
index 1387688..6d224d6 100644
--- a/src/stores/calculator.store.ts
+++ b/src/stores/calculator.store.ts
@@ -61,10 +61,10 @@ export const useCalculatorStore = defineStore("calculator", {
   },
   actions: {
     updateActiveFilters(filterValues: {
-      nist: [];
-      cis: [];
-      detection: [];
-      os: [];
+      nist: Set<string>;
+      cis: Set<string>;
+      detection: Set<string>;
+      os: Set<string>;
     }) {
       this.activeFiltersObj = filterValues;
     },
@@ -145,3 +145,5 @@ export const useCalculatorStore = defineStore("calculator", {
     },
   },
 });
+// Define Calculator Store Type
+export type CalculatorStore = ReturnType<typeof useCalculatorStore>;
diff --git a/src/views/TopTenResults.vue b/src/views/TopTenResults.vue
index c83bd22..58bfcd7 100644
--- a/src/views/TopTenResults.vue
+++ b/src/views/TopTenResults.vue
@@ -10,7 +10,7 @@
             <div class="col-span-1 calculator-list">
                 <TopTenSidebar :ranked-list="rankedList" :activeItemId="activeItemId"
                     @set-active-index="(i) => activeItemId = i" @delete-technique="(i) => deleteTechnique(i)" />
-                <button class="btn-primary mt-4" @click="download()">Download List</button>
+                <DownloadListButton :ranked-list="rankedList" />
             </div>
             <div class="col-span-2 h-full">
                 <div class="calculator-details">
@@ -31,23 +31,23 @@
         </div>
         <div class="w-5/6 mx-auto lg:hidden block">
             <TopTenAccordion :ranked-list="rankedList" :activeItemId="activeItemId" />
-            <button class="btn-primary mt-10" @click="download()">Download List</button>
+            <DownloadListButton :ranked-list="rankedList" />
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, toRaw } from "vue";
-import { useCalculatorStore } from "../stores/calculator.store";
+import { useCalculatorStore, type CalculatorStore } from "../stores/calculator.store";
 import TopTenSidebar from "../components/TopTenSidebar.vue"
 import TopTenDetails from "../components/TopTenDetails.vue"
 import TopTenAccordion from "../components/TopTenAccordion.vue"
 import SystemScoreSection from "../components/SystemScoreSection.vue"
-import downloadjs from "downloadjs";
-import type { ExportedTechnique, Technique } from "@/data/DataTypes";
+import type { Technique } from "@/data/DataTypes";
+import DownloadListButton from "../components/DownloadListButton.vue";
 
 export default defineComponent({
-    components: { TopTenSidebar, TopTenDetails, TopTenAccordion, SystemScoreSection },
+    components: { TopTenSidebar, TopTenDetails, TopTenAccordion, SystemScoreSection, DownloadListButton },
     data() {
         return {
             calculatorStore: useCalculatorStore(),
@@ -70,34 +70,6 @@ export default defineComponent({
                 this.activeItemId = this.activeItemId - 1
             }
         },
-        download() {
-            const parsedList = [] as Array<ExportedTechnique>;
-
-            this.rankedList.slice(0, 10).forEach((technique: Technique, i: number) => {
-                const t = {
-                    rank: i + 1,
-                    tid: technique.tid,
-                    name: technique.name,
-                    description: technique.description,
-                    url: technique.url,
-                    detection: technique.detection,
-                    score: technique.adjusted_score,
-                    network_score: technique.network_score,
-                    process_score: technique.process_score,
-                    file_score: technique.file_score,
-                    cloud_score: technique.cloud_score,
-                    hardware_score: technique.hardware_score,
-                    mitigations: technique.mitigations,
-                    subtechniques: technique.subtechniques,
-                    actionability_score: technique.actionability_score,
-                    choke_point_score: technique.choke_point_score,
-                    prevalence_score: technique.prevalence_score,
-                }
-                parsedList.push(t);
-            })
-
-            downloadjs(JSON.stringify(parsedList, null, 4), "TopTenTechniques.json", JSON)
-        },
         setRankedList() {
             let filteredList = structuredClone(toRaw(this.calculatorStore.techniques));
             filteredList = this.applyScores(filteredList)
@@ -146,7 +118,8 @@ export default defineComponent({
             return false;
         },
         applyScores(filteredList: Array<Technique>) {
-            for (const monitoringType of Object.keys(this.scores)) {
+            type SystemScoreKeys = (keyof CalculatorStore["systemScoreObj"])[];
+            for (const monitoringType of Object.keys(this.scores) as SystemScoreKeys) {
                 const adjustment = this.scores[monitoringType].value;
                 filteredList = filteredList.map((technique) => {
                     if (technique[`${monitoringType}_coverage`]) {