diff --git a/libaddrbook.py b/libaddrbook.py
index 6d4128a..3acc7ca 100644
--- a/libaddrbook.py
+++ b/libaddrbook.py
@@ -9,9 +9,44 @@ class LibAddrBook:
 	def get_everyone(self):
 		c = self.db.cursor()
 		c.execute("""SELECT * from people""")
+		ppl = []
 		nums = []
 		for row in c.fetchall():
 			print(row)
+			print(row[0])
 			nums.append(row[PHONE_NUM_COL])
+			ppl.append({'id': row[0], 'name': row[1]})
 
+		return ppl
+	def get_groups(self):
+		c = self.db.cursor()
+		c.execute("""SELECT * from groups""")
+		groups = []
+		for row in c.fetchall():
+			groups.append({'gid': row[0], 'name': row[1]})
+		return groups
+
+# todo: make sure ids is actually a list of numbers?
+	def get_nums_with_ids(self, ids):
+		c = self.db.cursor()
+		idlist = ', '.join('{}'.format(x) for x in ids)
+		print idlist
+		c.execute("""SELECT * from people WHERE id IN ({})""".format(idlist))
+		nums = []
+		for row in c.fetchall():
+			nums.append(row[PHONE_NUM_COL])
 		return nums
+
+	def get_people_in_groups(self, groups):
+		if(len(groups) == 0):
+			return []
+		# /!\ SPECIAL CASE ALERT: A group ID of -1 signifies that 'everyone' is selected, so use that function instead.
+		if(-1 in groups):
+			return [p['id'] for p in self.get_everyone()]
+
+		c = self.db.cursor()
+		grouplist = ', '.join('{}'.format(x) for x in groups)
+		print grouplist
+		c.execute("""SELECT people.id from people INNER JOIN memberships ON people.id = memberships.person_id WHERE memberships.group_id IN ({})""".format(grouplist))
+		ids = [r[0] for r in c.fetchall()]
+		return ids
diff --git a/mocksmscast.py b/mocksmscast.py
index 13b8a21..175e5a3 100644
--- a/mocksmscast.py
+++ b/mocksmscast.py
@@ -2,6 +2,9 @@ class LibSMSCast:
 	def __init__(self):
 		pass
 	def send(self, to, msg):
+		f = open('mocksms.log', 'a')
 		for recipient in to:
-			print("\"{}\" -> {}".format(msg, recipient))
+			f.write("\"{}\" -> {}\n".format(msg, recipient))
+		f.close()
+
 			
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..7d8af84
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,118 @@
+{% extends "layout.html" %}
+{% block body %}
+<script type="text/javascript">
+	$(function() {
+		$( document ).ready(function() {
+			// doc ready. load users
+			$.getJSON($SCRIPT_ROOT + '/_get_people', {}, function(data) {
+				var people = data.people;
+				for(var i=0; i<people.length; ++i){
+					var p = people[i];
+					$( "#people" ).append("<span class=\"person\" id=\"p_" + p.id + "\" person_id=\"" + p.id + "\">" + p.name + "</span>");
+					}
+					
+			});
+			// load groups
+			$.getJSON($SCRIPT_ROOT + '/_get_groups', {}, function(data) {
+				var groups = data.groups;
+				for(var i=0; i<groups.length; ++i){
+					var g = groups[i];
+					$( "#groups" ).append("<span class=\"group\" id=\"g_" + g.gid + "\" group_id=\"" + g.gid + "\">" + g.name + "</span>");
+					}
+					
+			});
+
+
+		});
+
+		var send = function() {
+			var list = getSelectedPeople();
+			$.getJSON($SCRIPT_ROOT + '/send', {
+				msg: $('input[name="msg"]').val(),
+				to: JSON.stringify(list)
+				}, function(data) {
+				$("#result").text(data.result);
+			});
+			return false;
+		}
+
+		$('a#send').bind('click', send);
+
+		$('#people').on('click', '.person', function(event) {
+				var target = $(this);
+				var id = target[0].attributes.person_id;
+				target.toggleClass('selected');
+				console.log(id.value);
+				});
+
+		$('#groups').on('click', '.group', function(event) {
+				var target = $(this);
+				var id = target[0].attributes.group_id;
+				target.toggleClass('selected');
+				console.log(id.value);
+				selectPeopleByGroups();
+				});
+		function selectPeopleByGroups(){
+			var list = getSelectedGroups();
+			$.getJSON($SCRIPT_ROOT + '/_get_people_in_groups', {
+				grouplist: JSON.stringify(list)
+				}, function(data) {
+				console.log(data.result);
+				var people = data.result;
+
+				// clear all currently selected people
+				$('#people > .selected').each(function(index) {
+					$(this).removeClass('selected');
+				});
+				
+				// select everyone the server told us to
+				for(var i=0; i<people.length; ++i){
+					var id = people[i];
+					$("#people > #p_" + id).addClass('selected');
+				}
+				$("#result").text(data.result);
+			});
+			return false;
+		}
+
+		function getSelectedGroups(){
+			var list = [];
+			$('#groups > .selected').each(function(index) {
+				var id = this.attributes.group_id.value;
+				list.push(id);
+			});
+			return(list);
+		}
+		function getSelectedPeople(){
+			var list = [];
+			$('#people > .selected').each(function(index) {
+				var id = this.attributes.person_id.value;
+				list.push(id);
+			});
+			return(list);
+		}
+
+	});
+</script>
+
+<style>
+	.person, .group{
+		border: 2px solid;
+		border-radius: 10px;
+		background-color: #bbb;
+		margin: 2px;
+		padding: 2px;
+	}
+	.selected{
+		background-color: #3c3;
+	}
+</style>
+
+<h1>uh hi</h1>
+<p><input type="text" name="msg"><a href="#" id="send">send</a></p>
+<p><span id="result">res</span></p>
+<h2>groups</h2>
+<p id="groups"></p>
+<h2>people</h2>
+<p id="people"></p>
+{% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
new file mode 100644
index 0000000..a2d1ab8
--- /dev/null
+++ b/templates/layout.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>smscast</title>
+<script type=text/javascript
+  src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+<script type=text/javascript>
+  var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
+</script>
+{% block body  %}{% endblock %}