diff --git a/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html b/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
new file mode 100644
index 0000000..0ef99ce
--- /dev/null
+++ b/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
@@ -0,0 +1,142 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-card/paper-card.html"/>
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/>
+<link rel="import" href="../../bower_components/paper-button/paper-button.html"/>
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"/>
+<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"/>
+
+
+<dom-module id="cocreation-paper-card-controllet">
+
+    <template>
+        <style>
+
+            iron-icon{
+                padding-left: 5px;
+                padding-right: 5px;
+                --iron-icon-height: 16px;
+                --iron-icon-width: 16px;
+            }
+
+            iron-icon.icon-from{
+                --iron-icon-fill-color : #000000;
+            }
+
+            iron-icon.icon-to{
+                --iron-icon-fill-color : #ff0000;
+            }
+
+            paper-card.cocreation {
+                width: 310px;
+            }
+
+            .from, .to {
+                font-size: 13px;
+                color: #CCCCCC;
+            }
+
+            .rate-content {
+                @apply(--layout-flex);
+                float: left;
+                width: 100%;
+            }
+
+            .rate-header { @apply(--paper-font-headline); }
+            .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
+
+            paper-icon-button.rate-icon {
+                --iron-icon-fill-color: white;
+                --iron-icon-stroke-color: var(--paper-grey-600);
+            }
+
+            .collapse-content {
+                width: 200px;
+                padding: 15px;
+            }
+
+            iron-collapse.iron-collapse-over
+            {
+                position: absolute;
+                left: -1px;
+                margin:0;
+                padding:0;
+                z-index:10;
+                background-color: #FFFFFF;
+                border: solid 1px #E6E6E6;
+                border-top: none !important;
+                min-width: 310px;
+                min-height: 188px;
+            }
+        </style>
+
+
+        <paper-card class="cocreation">
+            <div class="rate-content">
+                <div class="card-content">
+                    <div class="rate-header">{{name}}</div>
+                    <div class="rate-name">{{owner}}</div>
+                    <div>
+                        <iron-icon class="icon-from" icon="alarm"></iron-icon>
+                        <span class="from">{{from}}</span>
+                        <iron-icon class="icon-to" icon="alarm-off"></iron-icon>
+                        <span class="to">{{to}}</span>
+                    </div>
+                </div>
+                <div class="card-actions">
+                    <paper-button>Explore</paper-button>
+                    <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;">
+                    </paper-icon-button>
+                    <iron-collapse class="iron-collapse-over" id="more_info" no-animation>
+                        <div class="collapse-content">
+                            {{goal}}
+                        </div>
+                    </iron-collapse>
+                </div>
+            </div>
+        </paper-card>
+
+    </template>
+
+    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+
+    <script>
+        Polymer({
+            is: "cocreation-paper-card-controllet",
+
+            properties: {
+                name:{
+                    type: String,
+                    value: "text"
+                },
+                owner:{
+                    type: String,
+                    value: "text"
+                },
+                from:{
+                    type: String,
+                    value: "text"
+                },
+                to:{
+                    type: String,
+                    value: "text"
+                },
+                goal:{
+                    type: String,
+                    value: "text"
+                },
+            },
+
+            attached: function(){
+            },
+
+            _toggle: function(){
+                var moreInfo = this.$.more_info;
+                var iconButton = Polymer.dom(event).localTarget;
+                iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more';
+                moreInfo.toggle();
+            }
+
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file