diff --git a/.gitignore b/.gitignore
index 88b7219..537d189 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,5 @@ coverage
 *.sln
 *.sw?
 .vercel
+
+.env
\ No newline at end of file
diff --git a/README.md b/README.md
index b1dee80..7fa80bd 100644
--- a/README.md
+++ b/README.md
@@ -27,3 +27,23 @@ In your terminal:
 ### Staging
 
 Merge into the `dev` branch, allow 5 minutes for the auto-deploy, and visit pdap.dev.
+
+### For local development: Add environment secrets
+
+Either add a `.env` file to your local root directory or manually export these secrets. Reach out to contact@pdap.io or make noise in Discord if you'd like access. 
+
+#### Sample `.env` file
+```
+# Local development
+#Airtable API key
+VITE_AIRTABLE_API_KEY=secret
+
+#PDAP data sources API key
+VITE_PDAP_API_KEY=secret
+```
+
+#### shell
+```
+export VITE_AIRTABLE_API_KEY=secret
+export VITE_PDAP_API_KEY=secret
+```
diff --git a/package-lock.json b/package-lock.json
index c13a823..74bcc73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
 				"@vitejs/plugin-vue-jsx": "^3.0.2",
 				"autoprefixer": "^10.4.16",
 				"npm-run-all2": "^6.0.6",
-				"pdap-design-system": "^2.1.8",
+				"pdap-design-system": "^2.7.0",
 				"postcss": "^8.4.32",
 				"tailwindcss": "^3.3.5",
 				"vite": "^4.4.9",
@@ -2837,9 +2837,9 @@
 			"dev": true
 		},
 		"node_modules/pdap-design-system": {
-			"version": "2.1.8",
-			"resolved": "https://registry.npmjs.org/pdap-design-system/-/pdap-design-system-2.1.8.tgz",
-			"integrity": "sha512-K3JGG95PR7Xc2LB3fdynUCuKS2UHqkHWGLi7qVaSqr8cECB29239WnIELJB8NzmtvZwMwaPBW9GhqsG0559cCw==",
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/pdap-design-system/-/pdap-design-system-2.7.0.tgz",
+			"integrity": "sha512-Yq5oICH95Wtn1qgVRwNG/ifPamG4q6ILuTJDjA3UbqH+dKHyBOQMO37C7QXGSpUrAUxp/Th3yTLTXobPszLEsw==",
 			"dev": true,
 			"dependencies": {
 				"@vuelidate/core": "^2.0.3",
@@ -2850,9 +2850,6 @@
 				"vue": "^3.3.7",
 				"vue-router": "^4.2.5"
 			},
-			"bin": {
-				"pdap-design-system": "bin/pdap-design-system-cli.js"
-			},
 			"engines": {
 				"node": ">=18.13.0",
 				"npm": ">=8.19.3"
diff --git a/package.json b/package.json
index 5b6cc54..14d3b19 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,10 @@
 		"@vitejs/plugin-vue-jsx": "^3.0.2",
 		"autoprefixer": "^10.4.16",
 		"npm-run-all2": "^6.0.6",
-		"pdap-design-system": "^2.1.8",
+		"pdap-design-system": "^2.7.0",
 		"postcss": "^8.4.32",
 		"tailwindcss": "^3.3.5",
 		"vite": "^4.4.9",
 		"vite-svg-loader": "^4.0.0"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 3689bc1..94419c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -78,4 +78,20 @@ provide('footerLinks', [
 body {
 	overflow: auto;
 }
+
+.pdap-grid-container{
+	padding: 32px;
+}
+
+.pdap-grid-container-columns-2{
+	grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
+}
+.loading-shimmer{
+	animation-duration: 800ms;
+}
+
+h3{
+	margin-top: 0px;
+}
+
 </style>
diff --git a/src/main.js b/src/main.js
index 1880446..fa09bbb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import './main.css';
-import { FlexContainer, GridContainer, GridItem } from 'pdap-design-system';
+// import { FlexContainer, GridContainer, GridItem } from 'pdap-design-system';
 import 'pdap-design-system/styles';
 
 import { createApp } from 'vue';
@@ -15,8 +15,8 @@ app.use(router);
   components does not properly register them 
   for passing to the <component :is="..."> prop. 
   So we register globally for now 🤷🏻‍♂️. */
-app.component('FlexContainer', FlexContainer);
-app.component('GridContainer', GridContainer);
-app.component('GridItem', GridItem);
+// app.component('FlexContainer', FlexContainer);
+// app.component('GridContainer', GridContainer);
+// app.component('GridItem', GridItem);
 
 app.mount('#app');
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 67b1154..125f768 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,12 +1,14 @@
 <template>
-	<GridContainer class="px-4 md:px-8" component="section" :columns="1">
-		<GridItem component="h1">About</GridItem>
-		<GridItem component="h2">Contact</GridItem>
-		<GridItem component="p">
+	<section class="pdap-grid-container px-4 md:px-8" >
+		<h1 class="col-span-full">About</h1>
+		<div class="col-span-full">
+		<h2>Contact</h2>
+		<p>
 			Email us at <a href="mailto:contact@pdap.io">contact@pdap.io</a> or
 			<a href="https://discord.gg/wMqex8nKZJ">join the Discord</a> to get in touch.
-		</GridItem>
-		<GridItem component="FlexContainer">
+		</p>
+		</div>
+		<div class="pdap-flex-container col-span-full">
 			<h2>People</h2>
 			<p>
 				Every local police system has people studying it&mdash;that's how most of us found this project. 
@@ -27,8 +29,8 @@
 				Our Executive Director is
 				<a href="https://www.linkedin.com/in/josh-chamberlain/">Josh Chamberlain</a>.
 			</p>
-		</GridItem>
-		<GridItem component="FlexContainer" :span-column="1">
+		</div>
+		<div class="pdap-flex-container col-span-full" >
 			<h2>Funding</h2>
 			<p>
 				We are proud to receive generous support from
@@ -39,16 +41,16 @@
 				We are also grateful for the financial and advisory support of
 				<a href="https://ye.gg/">Gabriel Weinberg</a>.
 			</p>
-		</GridItem>
-	</GridContainer>
-	<GridContainer component="section" class="mb-12" :columns="2">
-		<GridItem component="h2" :span-column="2">Frequently Asked Questions</GridItem>
-		<GridItem component="h3">What makes you experts?</GridItem>
-		<GridItem component="p">We have done thousands of hours of user research with people
+		</div>
+	</section>
+	<section class="pdap-grid-container pdap-grid-container-columns-2 mb-12 px-4 md:px-8">
+		<h2 class="col-span-full">Frequently Asked Questions</h2>
+		<h3>What makes you experts?</h3>
+		<p>We have done thousands of hours of user research with people
 			who use police data. If you have feedback to share, email 
-			<a href="mailto:contact@pdap.io">contact@pdap.io</a>.</GridItem>
-		<GridItem component="h3">What kind of data do you collect?<br /></GridItem>
-		<GridItem component="div">
+			<a href="mailto:contact@pdap.io">contact@pdap.io</a>.</p>
+		<h3>What kind of data do you collect?<br /></h3>
+		<div>
 			<p>
 			Anything published by or about a criminal legal system agency: courts, jails, and law
 			enforcement (police). You can read more about
@@ -60,37 +62,31 @@
 				We are not creating a massive, interoperable database. 
 				This is a defense mechanism against aggregating data about criminalized people.
 			</p>
-		</GridItem>
-		<GridItem component="h3">Who is this data for?<br /></GridItem>
-		<GridItem component="p">Everybody! Public records are for all of us. We are only interested in solutions which could survive the collapse of our organization. Our
-			work is open-source, and our planning is transparent.</GridItem>
-		<GridItem component="h3">Why are you different from police watchdog groups?<br /></GridItem>
-		<GridItem component="p">
+		</div>
+		<h3>Who is this data for?<br /></h3>
+		<p>Everybody! Public records are for all of us. We are only interested in solutions which could survive the collapse of our organization. Our
+			work is open-source, and our planning is transparent.</p>
+		<h3>Why are you different from police watchdog groups?<br /></h3>
+		<p>
 			Our activism is data collection and accessibility. We document systems, not "bad apples." 
-		</GridItem>
-		<GridItem component="h3">Is this legal?</GridItem>
-		<GridItem component="p">
+		</p>
+		<h3>Is this legal?</h3>
+		<p>
 			Yes. We're consolidating public information, in accordance with
 			<a href="https://docs.pdap.io/meta/operations/legal">established legal precedents</a>.<br />
-		</GridItem>
-		<GridItem component="h3">Are you affiliated with a political party?<br /></GridItem>
-		<GridItem component="p">
+		</p>
+		<h3>Are you affiliated with a political party?<br /></h3>
+		<p>
 			No. Our only motivation is to provide better access to public records in an age of
 			disinformation. Our members have diverse perspectives and goals for police institutions, but
 			we are united by the common goal of transparency.<br />
-		</GridItem>
-	</GridContainer>
+		</p> 
+	</section>
 </template>
 
 <script>
-import { FlexContainer, GridContainer, GridItem } from 'pdap-design-system';
 
 export default {
 	name: 'AboutView',
-	components: {
-		FlexContainer,
-		GridContainer,
-		GridItem,
-	},
 };
 </script>
\ No newline at end of file
diff --git a/src/views/CommunityView.vue b/src/views/CommunityView.vue
index 684ec9b..6e0cb9d 100644
--- a/src/views/CommunityView.vue
+++ b/src/views/CommunityView.vue
@@ -1,7 +1,7 @@
 <template>
-	<GridContainer class="px-4 md:px-8" component="section" :columns="3">
-		<GridItem component="h1" :span-column="3">Join our community</GridItem>
-		<GridItem :span-column="3">
+	<section class="pdap-grid-container px-4 md:px-8">
+		<h1 class="col-span-full">Join our community</h1>
+			<div class="col-span-full">
 			<p>
 				To find collaborators or ask questions, join us in
 				<a href="https://discord.gg/wMqex8nKZJ">Discord</a> 
@@ -42,19 +42,21 @@
 						type="submit" 
 						class="pdap-button-primary h-[max-content]" 
 						value="Sign up" 
+						style="margin:0px 4px 0px 4px;"
 					/>
 					<button
 						class="pdap-button-secondary h-[max-content]"
 						value="Archives"
 						onclick="window.open('https://newsletter.pdap.io/archive', '_blank')"
+						style="margin:0px 4px 0px 4px;"
 					>
 						View archives
 					</button>
 				</div>
 			</form>
-		</GridItem>
-		<GridItem component="h1" :span-column="3">Volunteer for data requests</GridItem>
-		<GridItem component="div" :span-column="3">
+		</div>
+		<h1 class="col-span-full mt-0">Volunteer for data requests</h1>
+		<div class="col-span-full">
 			<p>
 				Most data requests are for help <strong>answering questions about local police systems.</strong> 
 				They usually come to us 
@@ -67,22 +69,29 @@
 				<a href="mailto:operations@pdap.io">
 						operations@pdap.io</a>.
 			</p>
-		</GridItem>
-		<GridItem class="text-xl hyphens-auto" lang="en">
+		</div>
+		<div class="col-span-full">
+			<h2><i class="fa fa-code-fork"></i> Merged Pull Requests</h2>
+				<p>We have merged <strong>{{ mergeCount }} pull requests</strong> across <strong>{{ repoCount }} repositories</strong>.</p>
+				<a href="https://github.com/orgs/Police-Data-Accessibility-Project/projects/25/views/1">
+					<i class="fa fa-external-link"></i> Good first issues
+				</a>
+			</div>
+		<div class="text-xl hyphens-auto" lang="en">
 			<h3><i class="fa fa-map-o" aria-hidden="true"></i> Locate sources</h3>
 			<p>
 				Some public records are already online, waiting to be classified and used to answer questions.
 				You could find data sources to track, making it more accessible to everyone.
 			</p>
-		</GridItem>
-		<GridItem class="text-xl hyphens-auto" lang="en">
+		</div>
+		<div class="text-xl hyphens-auto" lang="en">
 			<h3><i class="fa fa-eye-slash"></i> Research</h3>
 			<p>
 				Many useful public records can't be easily found online. We work with local experts and request records from
 				relevant agencies, making it easier to answer important questions.
 			</p>
-		</GridItem>
-		<GridItem class="text-xl hyphens-auto" lang="en">
+		</div>
+		<div class="text-xl hyphens-auto" lang="en">
 			<h3><i class="fa fa-file-code-o"></i> Code</h3>
 			<p>
 				Everything you see is open source, built by a small team of volunteers and staff. 
@@ -91,27 +100,31 @@
 					Good First Issues
 				</a> in GitHub.
 			</p>
-		</GridItem>
-	</GridContainer>
-	<FlexContainer component="section" class="mb-12">
+		</div>
+	</section>
+	<section class="pdap-grid-container mb-12">
 		<p>
 			This work is multidisciplinary, and beginner-friendly.
 			No matter what your level of experience, you can be a valuable contributor! 
 			The two most important skills are <strong>collaboration</strong> and <strong>persistence</strong>.
 		</p>
-	</FlexContainer>
+	</section>
 </template>
 
 <script>
-import { FlexContainer, GridContainer, GridItem } from 'pdap-design-system';
 import HelpTextIcon from '@/components/HelpTextIcon.vue';
 
 export default {
 	name: 'CommunityView',
-	components: {
-		FlexContainer,
-		GridContainer,
-		GridItem,
-	},
-};
+	data: () => ({
+		repoCount: 0,
+		mergeCount: 0,
+	}),
+	mounted: async function (){
+			const repos = await (await fetch(`https://api.github.com/orgs/Police-Data-Accessibility-Project/repos`)).json()
+			this.repoCount = repos.length;
+			const merges = await (await fetch(`https://api.github.com/search/issues?q=org:Police-Data-Accessibility-Project+is:pr+is:merged`)).json()
+			this.mergeCount = merges.total_count
+		},
+	};
 </script>
diff --git a/src/views/DataView.vue b/src/views/DataView.vue
index 3cd6d7b..f3a44fd 100644
--- a/src/views/DataView.vue
+++ b/src/views/DataView.vue
@@ -1,6 +1,6 @@
 <template>
-	<GridContainer class="px-4 md:px-8" component="section" columns="3">
-		<GridItem component="h1" :span-column="3"> Data Sources </GridItem>
+	<section class="pdap-grid-container px-4 md:px-8">
+		<h1 class="col-span-full"> Data Sources </h1>
 		<img
 			src="/images/searching.svg"
 			class="w-11/12 place-self-center hidden lg:block"
@@ -16,7 +16,7 @@
 			class="w-9/12 place-self-start hidden md:block"
 			alt="A piece of police data being distributed to several people."
 		/>
-		<GridItem component="div" :span-column="3">
+		<div class="col-span-full">
 			<p>
 				We <strong>locate, describe, and share</strong> sources of data about police agencies across
 				the United States, which are
@@ -32,8 +32,8 @@
 				response, we facilitate local research and organizing to keep the data in context. The goal
 				is a <strong>relevant</strong> database, and <strong>impactful</strong> open-source tools.
 			</p>
-		</GridItem>
-		<GridItem component="div" :span-column="3">
+		</div>
+		<div class="col-span-full">
 			<p>
 				<a href="https://data-sources.pdap.io">
 					<i class="fa fa-external-link"></i> Search our database
@@ -52,34 +52,115 @@
 				</a>
 				if you have something to share.
 			</p>
-		</GridItem>
-	</GridContainer>
-	<GridContainer class="px-4 md:px-8 mb-12" component="section" :columns="2">
-		<GridItem component="h2" :span-column="2">
+		</div>
+		<!-- <Suspense> -->
+			<template v-if="dataLoaded">
+				<div class="col-span-full">
+					<h2><i class="fa fa-globe"></i> Geographic Coverage</h2>
+					<p>
+						Our database currently documents data sources from <br>
+					    <strong>{{ agenciesCount }} agencies</strong> in <strong>{{ countiesCount }} counties</strong> across all <strong>{{ statesCount }} states </strong> and the District of Columbia.
+					</p>
+					<a href="https://data-sources.pdap.io"><i class="fa fa-external-link"></i> Explore the data</a>
+				</div>
+			</template>
+			<template v-if="!dataLoaded">
+				<div class="col-span-full loading-shimmer">
+					<h2><i class="fa fa-globe"></i> Geographic Coverage</h2>
+					<p>
+						Our database currently documents data sources from <br>
+						<strong>{{ agenciesCount }} agencies</strong> in <strong>{{ countiesCount }} counties</strong> across all <strong>{{ statesCount }} states</strong>.
+					</p>
+					<a href="https://data-sources.pdap.io"><i class="fa fa-external-link"></i> Explore the data</a>
+				</div>
+			</template>
+	<!-- </Suspense> -->
+	</section>
+	<section class="pdap-grid-container pdap-grid-container-columns-2 px-4 md:px-8 mb-12">
+		<h2 class="col-span-full">
 			Other things we're building with data
-		</GridItem>
-		<GridItem component="div">
+		</h2>
+		<div>
 			We create <a href="https://github.com/Police-Data-Accessibility-Project/automatic-archives">automatic archives</a> of 
 			data sources, so they are not lost to time and poor data retention policies. Fragile URLs are turned into lasting resources for future use. 
-		</GridItem>
-		<GridItem component="div">
+		</div>
+		<div>
 			We're <a href="https://github.com/Police-Data-Accessibility-Project/data-source-map">mapping what is available</a> in each jurisdiction, and advocating for transparency.
 			What kinds of research are possible? What does model transparency look like?
-		</GridItem>
-	</GridContainer>
+		</div>
+	</section>
 </template>
 
 <script>
-import { FlexContainer, GridContainer, GridItem } from 'pdap-design-system';
-import HelpTextIcon from '../components/HelpTextIcon.vue';
+import { ref } from 'vue'
+
+const baseUrl = "https://data-sources.pdap.io/api/";
+const api_key = import.meta.env.VITE_PDAP_API_KEY;
+
+const headers = {
+  'Authorization': `Bearer ${api_key}`,
+  'Content-Type': 'application/json'
+};
+
+const loadData = async () => {
+    return new Promise(async (resolve) => {
+		let tempAgencyCount = 1;
+		let page = 1;
+		let states = [];
+		let counties = [];
+		let agencies =[];
+
+		while (tempAgencyCount !== 0) {
+			const tempAgencies = await (await fetch(`${baseUrl}agencies/${page}`, {
+				method: 'GET',
+				headers: headers,
+			})).json();
+			
+			for (const entry of tempAgencies.data){
+				if (entry.count_data_sources > 0){
+					const tempAgency = entry.name;
+					if (!agencies.includes(tempAgency)) {
+						agencies.push(tempAgency);
+					}
+					const tempState = entry.state_iso;
+					if (!states.includes(tempState)) {
+						states.push(tempState);
+					}
+					const tempCounty = entry.county_fips;
+					if (!counties.includes(tempCounty)) {
+						counties.push(tempCounty);
+					}
+				}
+			}
+		page += 1; 
+		tempAgencyCount = tempAgencies.count;
+		}
+		// this.statesCount = states.length-2;
+		// this.countiesCount = counties.length;
+		// this.agenciesCount = agencies.length;
+		resolve({
+			statesCount: states.length-2,
+			countiesCount: counties.length,
+			agenciesCount: agencies.length,
+		})
+    })
+}
 
 export default {
 	name: 'DataView',
-	components: {
-		FlexContainer,
-		GridContainer,
-		GridItem,
-		HelpTextIcon,
+	data: () => ({
+		agenciesCount: undefined,
+		countiesCount: undefined,
+		statesCount: undefined,
+		dataLoaded: false,
+	}),
+	mounted: 
+	async function(){
+		const userData = ref(await loadData())
+		this.agenciesCount = userData.value.agenciesCount;
+		this.countiesCount = userData.value.countiesCount;
+		this.statesCount= userData.value.statesCount;
+		this.dataLoaded = true;
 	},
-};
+	};
 </script>
diff --git a/src/views/DonateView.vue b/src/views/DonateView.vue
index e8415e9..1f92c22 100644
--- a/src/views/DonateView.vue
+++ b/src/views/DonateView.vue
@@ -1,10 +1,10 @@
 <template>
-	<GridContainer class="px-4 md:px-8 mb-12" component="section" :columns="2">
-		<GridItem component="h1" :span-column="2">Donate to PDAP</GridItem>
-		<GridItem component="p" :span-column="2"
-			>Thank you for your interest in helping our mission!</GridItem
+	<section class="pdap-grid-container pdap-grid-container-columns-2 px-4 md:px-8 mb-12">
+		<h1 class="col-span-full">Donate to PDAP</h1>
+		<p class="col-span-full"
+			>Thank you for your interest in helping our mission!</p
 		>
-		<GridItem component="div" class="text-lg">
+		<div class="text-lg">
 				<iframe
 					src="https://donorbox.org/embed/pdap"
 					name="donorbox"
@@ -17,19 +17,21 @@
 					width="100%"
 				></iframe>
 				<p>PDAP is a non-profit, so your donations may be tax deductible.</p>
+				<br>
 				<h3>Send a check</h3>
 			<p>
 				Police Data Accessibility Project Inc. <br />239 Fourth Avenue, Suite 1401 #3180
 				<br />Pittsburgh, PA 15222
 			</p>
+			<br>
 			<h3>Donation match</h3>
 			<p>
 				If your employer offers a donation match, submit your receipt to your employer and have
 				them reach out to <a href="mailto:operations@pdap.io">operations@pdap.io</a>.
 			</p>
-		</GridItem>
-		<GridItem component="FlexContainer" class="text-lg">
-			<h3 class="mt-0">We can't fix what we can't measure.</h3>
+		</div>
+		<div class="pdap-flex-container text-lg" style="padding:0 32 32 32">
+			<h3>We can't fix what we can't measure.</h3>
 			<p>
 				The ability of the criminal legal system to impact people's lives demands a higher 
 				degree of scrutiny regarding its fairness. 
@@ -40,6 +42,12 @@
 				This is the foundation of any research, advocacy, journalism, accountability, 
 				or reform.
 			</p>
+			<br>
+			<h3>Our Donors</h3>
+			<p>
+				Received <strong>${{ amount }}</strong> from <strong>${{ donorCount }}</strong> donors since January 9, 2023.
+			</p>
+			<br>
 			<h3>Testimonials</h3>
 			<div class="p-4 my-2 mx-0 border-2 border-solid border-brand-wine border-opacity-20">
 				<p>
@@ -70,9 +78,11 @@
 					&mdash;<a href="https://www.kylabourne.net/">Dr. Kyla Bourne</a>, UC Berkeley
 				</p>
 			</div>
+			<br>
 			<h3>How we spend money</h3>
 			<p>85% goes toward our program.</p>
 			<p>15% goes toward operations.</p>
+			<br>
 			<h3>How we spend our time</h3>
 			<ul class="list-disc list-inside">
 				<li>Helping people find data and answer questions about local criminal legal systems.</li>
@@ -81,20 +91,31 @@
 					Sharing best practices for publishing data with people who work in local government.
 				</li>
 			</ul>
-		</GridItem>
-	</GridContainer>
+		</div>
+	</section>
 </template>
 
 <script>
-import { FlexContainer, GridContainer, GridItem } from 'pdap-design-system';
+
+const donorbox_api_key = import.meta.env.VITE_DONORBOX_API_KEY;
+
 
 export default {
 	name: 'DonateView',
-	components: {
-		FlexContainer,
-		GridContainer,
-		GridItem,
-	},
+	// TODO: finish donorbox API connection
+	// data: () => ({
+	// 	amount: 0,
+	// 	donorCount: 0,
+	// }),
+	// mounted: async function(){
+	// 		const dataRequests = await (await fetch(`https://donorbox.org/pdap/`, { 
+	// 			method: 'GET',
+	// 			headers: headers
+	// 		})
+	// 		).json();
+	// 		console.log(dataRequests)
+	// 		this.requests = dataRequests.records.length;
+	// 	},
 };
 </script>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4af2df2..e2682e0 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,6 +1,6 @@
 <template>
-	<GridContainer class="px-4 md:px-8" component="section" :columns="2">
-		<GridItem :span-column="2">
+	<section class="pdap-grid-container px-4 md:px-8">
+		<div class="col-span-full"> 
 			<h1 class="font-medium mt-0 text-4xl md:text-5xl md:leading-tight">
 				We help people use public data for police oversight.
 			</h1>
@@ -15,31 +15,42 @@
 					Make a request <i class="fa fa-external-link"></i>
 				</a>
 			</p>
-		</GridItem>
-		<GridItem class="border-2 border-brand-gold p-4 md:p-6" :span-column="2">
+		</div>
+		<div class="col-span-full border-2 border-brand-gold p-4 md:p-6">
 			<QuickSearchForm :baseUrlForRedirect="baseUrlForRedirect" />
-		</GridItem>
-	</GridContainer>
-	<FlexContainer component="section">
+		</div>
+	</section>
+	<section class="pdap-grid-container">
+		<div class="col-span-full">
+		<h2><i class="fa fa-check-square-o"></i> Completed Data Requests</h2>
+		<p>Completed <strong> {{ requests }} data requests</strong> since January 9, 2023.</p>
+		<a href="https://airtable.com/shrbFfWk6fjzGnNsk">
+			<i class="fa fa-external-link"></i> Make a request
+		</a>
+	</div>
+	</section>
+	<section class="pdap-grid-container">
+		<div class="col-span-full">
 		<h1>Case studies</h1>
 		<p>
 			We find data and share resources to help each other <strong>answer questions
 			and strengthen our database</strong> over time.
 		</p>
-	</FlexContainer>
+	</div>
+	</section>
 	<section>
-		<GridContainer class="pt-0 text-xl" :columns="2">
-			<GridItem component="h2" :span-column="2">
+		<div class="pdap-grid-container pdap-grid-container-columns-2 pt-0 text-xl mt-0">
+			<h2 class="col-span-full">
 				<i class="fa fa-book"></i> Sharing access to Traffic Stop data
-			</GridItem>
-			<GridItem component="div">
+			</h2>
+			<div>
 				<p>Several researchers in Pittsburgh were asking:</p>
 				<p class="border-l-2 border-brand-wine/20 pl-4 my-5 italic">
 					What is the reality of traffic enforcement in Pittsburgh, given changed policies about
 					enforcing minor traffic violations?
 				</p>
-			</GridItem>
-			<GridItem component="div">
+			</div>
+			<div>
 				<p>
 					We requested data from the City of Pittsburgh and
 					<a href="https://data-sources.pdap.io/search/traffic%20stops/pittsburgh">
@@ -54,20 +65,20 @@
 						this article in Public Source</a
 					>, among other research.
 				</p>
-			</GridItem>
-		</GridContainer>
+			</div>
+		</div>
 	</section>
-	<GridContainer class="pt-0 text-xl" :columns="2">
-		<GridItem component="h2" :span-column="2">
+	<div class="pdap-grid-container pdap-grid-container-columns-2 pt-0 text-xl mt-0" >
+		<h2 class="col-span-full">
 			<i class="fa fa-phone"></i> Preserving Calls for Service data in Oakland CA
-		</GridItem>
-		<GridItem component="div">
+		</h2>
+		<div>
 			<p class="mb-4">A journalist in Oakland, CA asked:</p>
 			<p class="border-l-2 border-brand-wine/20 pl-4 italic">
 				How does Oakland dispatch its police force to address community needs?
 			</p>
-		</GridItem>
-		<GridItem component="div">
+		</div>
+		<div>
 			<p>
 				Calls for police service were published by the city, but only stayed online for 1&ndash;2
 				days.
@@ -84,72 +95,83 @@
 					We made it open-source</a
 				>, so it can be reused by anyone for future zero-budget research projects.
 			</p>
-		</GridItem>
-	</GridContainer>
-	<GridContainer class="pt-0 text-xl mb-12" :columns="2">
-		<GridItem component="h2" :span-column="2">
+		</div>
+	</div>
+	<div class="pdap-grid-container pdap-grid-container-columns-2 pt-0 text-xl mb-12 mt-0">
+		<h2 class="col-span-full">
 			<i class="fa fa-sitemap"></i> Consolidating records about the Allegheny County Jail
-		</GridItem>
-		<GridItem component="p">
+		</h2>
+		<p>
 			This facility has faced mounting scrutiny, and we have helped answer several questions:
-		</GridItem>
+		</p>
 		<GridItem component="div"></GridItem>
-		<GridItem component="p" class="border-l-2 border-brand-wine/20 pl-4 italic">
+		<p class="border-l-2 border-brand-wine/20 pl-4 italic">
 			How many people are in jail because they cannot afford bail?
-		</GridItem>
-		<GridItem component="p">
+		</p>
+		<p>
 			<a href="https://data-sources.pdap.io/search/interactive%20population/allegheny%20county%20jail"
 				>County jail holding status dashboard</a
 			>
-		</GridItem>
-		<GridItem component="p" class="border-l-2 border-brand-wine/20 pl-4 italic">
+		</p>
+		<p class="border-l-2 border-brand-wine/20 pl-4 italic">
 			How often are people placed in solitary confinement after it was banned in 2022?
-		</GridItem>
-		<GridItem component="p">
+		</p>
+		<p>
 			<a href="https://data-sources.pdap.io/search/segregated%20housing/allegheny%20county%20jail">
 				Segregated Housing reports
 			</a>
-		</GridItem>
-		<GridItem component="p" class="border-l-2 border-brand-wine/20 pl-4 italic">
+		</p>
+		<p class="border-l-2 border-brand-wine/20 pl-4 italic">
 			Do people in the jail receive medical attention when they request it?
-		</GridItem>
+		</p>
 		<p>
 			<a href="https://data-sources.pdap.io/search/survey/allegheny%20county%20jail">
 				2021 & 2022 surveys
 			</a> of the incarcerated population
 		</p>
-		<GridItem component="p" class="border-l-2 border-brand-wine/20 pl-4 italic">
+		<p class="border-l-2 border-brand-wine/20 pl-4 italic">
 			Has the city documented any health code violations at the Allegheny County Jail?
-		</GridItem>
-		<GridItem component="p">
+		</p>
+		<p>
 			<a href="https://data-sources.pdap.io/search/health%20/allegheny%20county%jail">
 				Inspection records from the Health Department
 			</a>
-		</GridItem>
-	</GridContainer>
+		</p>
+	</div>
 </template>
 
 <script>
-import { Button, Form, FlexContainer, GridContainer, GridItem, QuickSearchForm } from 'pdap-design-system';
+import { Button, Form, QuickSearchForm } from 'pdap-design-system';
 import { RouterLink } from 'vue-router';
 
+const airtable_api_key = import.meta.env.VITE_AIRTABLE_API_KEY;
+
+const headers = {
+  'Authorization': `Bearer ${airtable_api_key}`,
+  'Content-Type': 'application/json'
+};
+
 export default {
 	name: 'HomeView',
 	components: {
     Button,
     Form,
-    FlexContainer,
-    GridContainer,
-    GridItem,
     QuickSearchForm,
     RouterLink
 	},
-	data() {
-		return {
-			baseUrlForRedirect: import.meta.env.MODE === 'production' 
-			? 'https://data-sources.pdap.io' 
-			: 'https://data-sources.pdap.dev'
-		};
-	}
-};
+	data: () => ({
+		requests: 0,
+		baseUrlForRedirect: import.meta.env.MODE === 'production' 
+		? 'https://data-sources.pdap.io' 
+		: 'https://data-sources.pdap.dev'
+	}),
+	mounted: async function(){
+			const dataRequests = await (await fetch(`https://api.airtable.com/v0/app473MWXVJVaD7Es/Data%20Requests?filterByFormula=%28%7Bstatus (deprecated)%7D%3D%27Complete%27%29`, { 
+				method: 'GET',
+				headers: headers
+			})
+			).json();
+			this.requests = dataRequests.records.length;
+		},
+	};
 </script>
\ No newline at end of file
diff --git a/src/views/JobsView.vue b/src/views/JobsView.vue
index bee38da..7143150 100644
--- a/src/views/JobsView.vue
+++ b/src/views/JobsView.vue
@@ -1,10 +1,12 @@
 <template>
-	<FlexContainer class="px-4 md:px-8 mb-12" component="section">
+	<section class="pdap-grid-container px-4 md:px-8 mb-12">
 		<div class="container">
 			<div>
 				<h1>Jobs at PDAP</h1>
+				<br>
 				<h3>Open positions</h3>
 				<a href="#software-development-opportunities">Software development opportunities</a><br />
+				<br>
 				<h3>How to apply</h3>
 				<p>
 					Send an email to <a href="mailto:operations@pdap.io">operations@pdap.io</a>. Please
@@ -12,6 +14,7 @@
 					these.
 				</p>
 				<div class="text-lg">
+					<br>
 					<h3>Context</h3>
 					<p>
 						Our mission is to help people locate, understand, and share public records about every
@@ -22,6 +25,7 @@
 						years. We put down roots in Pittsburgh as a non-profit and received grant funding in
 						July of 2022. Our second funded year begins in July 2023.
 					</p>
+					<br>
 					<h3>Equal Opportunity Employment</h3>
 					<p>
 						We are an equal opportunity employer, and make hiring decisions based on merit. Valuing
@@ -51,21 +55,25 @@
 						seem like a good fit for your skills.
 					</p>
 					<p>When you apply, please let us know if you're interested in a particular project.</p>
+					<br>
 					<h3>Responsibilities</h3>
 					<div class="text-lg">
 						<ul class="list-disc list-inside">
 							<li>Submit code toward one or more of the issues on the roadmap.</li>
 							<li>Write tests for new code, and help with documentation.</li>
 						</ul>
+						<br>
 						<h3>Time commitment</h3>
 						<p>
 							We will agree on a schedule of work and check-ins which fits your availability for the
 							duration of each project.
 						</p>
+						<br>
 						<h3>Compensation</h3>
 						<p>
 							$25 per hour minimum, scaled based on experience and time commitment. Our annual budget for this work is $150,000&ndash;200,000.
 						</p>
+						<br>
 						<h3>Characteristics of strong applicants</h3>
 						<ul class="list-disc list-inside">
 							<li>Can exhibit basic knowledge of Python.</li>
@@ -77,16 +85,12 @@
 				</div>
 			</div>
 		</div>
-	</FlexContainer>
+	</section>
 </template>
 
 <script>
-import { FlexContainer } from 'pdap-design-system';
 
 export default {
 	name: 'JobsView',
-	components: {
-		FlexContainer,
-	},
 };
 </script>