diff --git a/package-lock.json b/package-lock.json
index 737babc..f2e241d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9837,6 +9837,15 @@
         "minimatch": "3.0.4"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -11149,6 +11158,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 144c8f6..ab276f6 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-geolocated": "^2.5.1",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "redux": "^4.0.5"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/src/App.js b/src/App.js
index 18c8beb..0b2e511 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,10 @@ import React, { Component } from 'react';
 import LRTree from 'legislative-rtree';
 import {geolocated} from 'react-geolocated';
 
+import Location from './components/location-component/location.component'
+import Districts from './components/district/districts.component'
+import Profile from './components/profile/profile.component'
+
 function _browserLocation(props) {
   if (!props.isGeolocationAvailable || !props.isGeolocationEnabled)
     return {};
@@ -13,6 +17,8 @@ function _browserLocation(props) {
   return {};
 }
 
+
+
 class App extends Component {
 
   constructor(props) {
@@ -36,7 +42,7 @@ class App extends Component {
     if (!location.lng) {
       setTimeout(() => this._loadData(), 500);
       return;
-    }
+    } 
 
     let districts = await tree.getDistricts(location.lng, location.lat);
     let civ = await tree.mimicGoogleCivicsAPI(location.lng, location.lat);
@@ -46,31 +52,25 @@ class App extends Component {
 
   render() {
     const {civ, districts} = this.state;
-
+    let properties = ["name", "address", "line1", "line2", "line3", "zip", "phone", "phones", "photoUrl", "city", "party", "urls", "type", "id"]
     let location = _browserLocation(this.props);
     if (!location.lng || !location.lat) return (<div>Loading location from browser...</div>);
 
     return (
       <div>
-        Location from your browser: {JSON.stringify(location)}
+         <Location location={location}/>
         <br />
         <br />
-        Districts from your location: {districts.map((d, i) => (<District key={i} dist={d} />))}
+        <Districts dist={districts}/> 
         <br />
         <br />
-        mimiced google civics: <pre>{JSON.stringify(civ, null, 2)}</pre>
+        <Profile official={civ} propElem={properties} />
       </div>
     );
   }
 }
 
-const District = props => {
-  return (
-    <div>
-      You are located in {props.dist.state} {props.dist.type} {props.dist.name}
-    </div>
-  );
-}
+
 
 export default geolocated({
   positionOptions: {
diff --git a/src/components/district/district.component.jsx b/src/components/district/district.component.jsx
new file mode 100644
index 0000000..708af07
--- /dev/null
+++ b/src/components/district/district.component.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+
+const District = ( props ) => {
+    return (
+      <div className="districts">
+        You are located in {props.dist.state} {props.dist.type} {props.dist.name}
+      </div>
+    );
+  }
+
+
+
+  export default District;
\ No newline at end of file
diff --git a/src/components/district/districts.component.jsx b/src/components/district/districts.component.jsx
new file mode 100644
index 0000000..b53504b
--- /dev/null
+++ b/src/components/district/districts.component.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import District from './district.component'
+
+const Districts = (props) => {
+
+
+    return (
+        <div>
+        Districts from your location: {props.dist.map((d, i) => (<District key={i} dist={d} />))}
+        </div>
+    )
+}
+
+export default Districts;
\ No newline at end of file
diff --git a/src/components/location-component/location.component.jsx b/src/components/location-component/location.component.jsx
new file mode 100644
index 0000000..1168da3
--- /dev/null
+++ b/src/components/location-component/location.component.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Location = ( {...otherProps} ) => (
+    <div className="group">
+        Location from your browser: {
+             JSON.stringify(otherProps.location)
+      }
+    </div>
+  )
+
+export default Location
\ No newline at end of file
diff --git a/src/components/profile/profile.component.jsx b/src/components/profile/profile.component.jsx
new file mode 100644
index 0000000..f281127
--- /dev/null
+++ b/src/components/profile/profile.component.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+const Profile = ( {...otherProps} ) => (
+  <div className="group">
+    mimiced google civics: <pre>{JSON.stringify(otherProps.official.officials, otherProps.properties, 2)}</pre>
+  </div>
+)
+  export default Profile;
\ No newline at end of file