diff --git a/src/js/app.js b/src/js/app.js
index f98c928..52800ae 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -4,10 +4,11 @@ import '../css/tripledot.css';
 
 import { MyIP } from './plugins/myip.js';
 import { Time } from './plugins/time.js';
-
+import { OpenCollective } from './plugins/opencollective.js';
 
 
 (function() {
 	var time = new Time();
 	var myip = new MyIP(); 
+	var opencollective = new OpenCollective("zutto");
 })();
diff --git a/src/js/components/shield.js b/src/js/components/shield.js
index 5f8634e..50695a8 100644
--- a/src/js/components/shield.js
+++ b/src/js/components/shield.js
@@ -1,4 +1,4 @@
-import { html } from '../html.js';
+import { vhtml } from './vhtml.js';
 export class shield extends vhtml {
 	constructor() {
 		super();
@@ -11,26 +11,11 @@ export class shield extends vhtml {
 
 		return this;
 	}
-	/*
-	async loadingStart(element){
-		if (this.loader !== undefined) this.loader.loadingEnd(element);
-		this.loader = new loader();
-		this.loader.loadingStart(element);
-		return super.loadingStart(element);
-	}
-
-
-	async loadingEnd(element){
-		if (this.loader !== undefined)
-			this.loader.loadingEnd(element);
-
-		return super.loadingEnd(element);
-	}
-*/
-	async render(element, content) {
+	async render(element, content, user) {
 		content = encodeURIComponent(content);
-		return super.render(element, `
-		<img alt="Static Badge of opencollective contributions" src="https://img.shields.io/badge/${content}-${this.colour}?style=${this.style}&logo=${this.logo}&logoColor=${this.logoColour}&label=${this.label}">
-		`);
+		if (user === undefined) {
+			user = ""
+		}
+		return super.render(element, `<a href="https://opencollective.com/${user}"><img alt="Static Badge of opencollective contributions" src="https://img.shields.io/badge/${content}-${this.colour}?style=${this.style}&logo=${this.logo}&logoColor=${this.logoColour}&label=${this.label}"></a>`);
 	}
 }
diff --git a/src/js/plugins/opencollective.js b/src/js/plugins/opencollective.js
index 31623a5..9e8155c 100644
--- a/src/js/plugins/opencollective.js
+++ b/src/js/plugins/opencollective.js
@@ -3,18 +3,30 @@ import { shield } from "../components/shield.js";
 import { fetcher } from "../fetch.js";
 
 export class OpenCollective extends shield {
-    constructor() {
+    constructor(user) {
 	super();
 
 	this._ip = "";
-	this._source = "https://ip.zutto.fi/"
+	this._source = `https://rest.opencollective.com/v2/${user}/transactions/debit/contribution.json`;
+	//this.total = {};
+	this.total = new Map();
+	this._user = user;
 
-	vj.watcher.watch('[content="myip"]', (element) => {
+	vj.watcher.watch('[content="opencollective"]', (element) => {
 		this.loadingStart(element);     
-		this.ip().then((data) => {
+		this.transactions().then((data) => {
 			try {
-				this._ip = data.trim();
-				vj.ps.publish("ip", {"ip": this._ip});
+				this.json = JSON.parse(data);
+				this.json.nodes.forEach((item) => {
+					if (item.kind === "CONTRIBUTION" && item.order.frequency === "MONTHLY") {
+						if (this.total[item.amount.currency] !== undefined) {
+							this.total[item.amount.currency] += (item.amount.value * -1);
+						} else {
+							this.total[item.amount.currency] = (item.amount.value * -1);
+						}
+					}
+				});
+
 				this.render(element);
 				this.loadingEnd(element);
 			} catch (e) {
@@ -25,31 +37,24 @@ export class OpenCollective extends shield {
 	})
     }
 
-    async ip() {
+    async transactions() {
 	try { 
 		const fetch = new fetcher();
-		console.log("ok");
-		return fetch.go({"url": `${this._source}/ip` });
+		return fetch.go({"url": `${this._source}` });
 	} catch (e) {
 		throw e;
 	}
     }
 
-    
-    async loadingStart(element) {
-	vj.ps.publish("ip.load.start", {"element": element});
-	return super.loadingStart(element);
-    }
-
-    async loadingEnd(element) {
-        vj.ps.publish("ip.load.end", {"element": element});
-	return super.loadingEnd(element);
-    }
-
     async render(element) {
         try {
-            const rendered = await super.render(element, "4.00 USD/Month");
-            vj.ps.publish("ip.rendered", { "element": element, "rendered": rendered });
+		var totalText = "";
+		if (Object.keys(this.total).length > 0) {
+			for (var currency in this.total) {
+				totalText += `${this.total[currency]} ${currency}/month`;
+			}
+		    const rendered = await super.render(element, `${totalText}`, this._user);
+		}
         } catch (e) {
             throw e;
         }