diff --git a/controllets/google-cards-controllet/google-card-controllet.html b/controllets/google-cards-controllet/google-card-controllet.html
new file mode 100644
index 0000000..e7ab3b5
--- /dev/null
+++ b/controllets/google-cards-controllet/google-card-controllet.html
@@ -0,0 +1,178 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
+
+<script src="../../locales/paper-card-ln.js"></script>
+
+<dom-module id="google-card-controllet">
+
+    <template>
+        <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+        <style>
+
+            #paper_card_container {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+                background-color: white;
+            }
+
+            #content {
+                padding: 4px 4px 0px 4px;
+                position:relative;
+                width: 100%;
+                height: 90%;
+            }
+
+            .footer {
+                height: 16px;
+            }
+
+            .comment {
+                position: relative;
+                top: -50px;
+                height: 50px;
+                background-color: white;
+                padding: 8px;
+                font-size: small;
+                color: #727272;
+                word-wrap: break-word;
+                overflow: hidden;
+            }
+
+            paper-fab#fullscreen-button {
+                position: absolute;
+                z-index: 100;
+                top: -20px;
+                right: 8px;
+                --paper-fab-background:#2196F3;
+            }
+
+            paper-dialog {
+                margin: 0px;
+                padding: 0px;
+                z-index: 1100;
+            }
+
+            #fullscreen_container {
+                display: inline;
+                position: fixed;
+                width: 90%;
+                height: 80vh;
+                right: 0;
+                left: 0;
+                top: 64px;
+                margin-right: auto;
+                margin-left: auto;
+                padding: 8px;
+                background-color: white;
+            }
+
+            #fullscreen_content {
+                margin: 0px;
+            }
+
+            #resource{
+                height: 100%;
+                width: 100%;
+            }
+
+        </style>
+
+
+        <paper-material id="paper_card_container" elevation="{{elevation}}">
+
+            <div id="content">
+                <iframe id="resource" src="{{resourceUrl}}?embedded=true"></iframe>
+            </div>
+
+            <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab>
+
+            <div class="footer">
+                <div class="comment">{{comment}}</div>
+            </div>
+
+            <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
+                <!--with-backdrop-->
+                <div id="fullscreen_content"></div>
+            </paper-dialog>
+
+        </paper-material>
+
+    </template>
+
+    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+
+    <script>
+        _this = null;
+
+        Polymer({
+            is: "google-card-controllet",
+            properties: {
+
+                width: {
+                    type: Number,
+                    observer: "_changeWidth"
+                },
+
+                height: {
+                    type: Number,
+                    observer: "_changeHeight"
+                },
+
+                elevation:{
+                    type: Number,
+                    value: 3
+                },
+
+                createNewType : {
+                    type : String,
+                    value : undefined
+                },
+
+                comment:{
+                    cardType: String,
+                    value: ""
+                },
+
+                resourceUrl : {
+                    type : String,
+                    value : undefined
+                }
+            },
+
+            ready : function(){
+            },
+
+            attached: function(){
+                $(this.$.fullscreen_container).perfectScrollbar();
+            },
+
+
+            _changeWidth: function(){
+                this.style.width = this.width + "px";
+                this.$.paper_card_container.style.width = this.width + "px";
+                this.$.content.style.width = this.width - 8 + "px";
+            },
+
+            _changeHeight: function(){
+                this.style.height = this.height + 64 + "px";
+                this.$.paper_card_container.style.height = this.height + "px";
+                this.$.content.style.height = this.height - 4 + "px";
+                $(this.$.content).perfectScrollbar();
+            },
+
+            _handleOpenClick: function(){
+                this.$.fullscreen_content.style.height = "80vh";
+                this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
+                this.$.fullscreen_container.style.display = "inline";//datalet res
+                this.$.fullscreen_container.open();
+            }
+
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/google-cards-controllet/google-card-creation-controllet.html b/controllets/google-cards-controllet/google-card-creation-controllet.html
new file mode 100644
index 0000000..a69b199
--- /dev/null
+++ b/controllets/google-cards-controllet/google-card-creation-controllet.html
@@ -0,0 +1,251 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/paper-input/paper-input.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
+
+<script src="../../locales/paper-card-ln.js"></script>
+
+<dom-module id="google-card-creation-controllet">
+
+    <template>
+        <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+        <style>
+
+            #title{
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 22px;
+                color: #2196F3;
+                width: 100%;
+                margin : 20px;
+            }
+
+            #message{
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+                color: #000000;
+                margin: 20px;
+            }
+
+            paper-fab#add-button {
+                position: absolute;
+                z-index: 100;
+                bottom: 200px;
+                right: 30px;
+                --paper-fab-background:#2196F3;
+            }
+
+            paper-dialog#fullscreen_container {
+                display: inline;
+                position: fixed;
+                width: 90%;
+                height: 80vh;
+                left: 5%;
+                top: 64px;
+                margin: 0px;
+                padding: 20px;
+                background-color: white;
+                z-index: 9999;
+            }
+
+            #fullscreen_content {
+                margin: 0px;
+                z-index:100;
+            }
+
+            #resource{
+                height: 100%;
+                width: 100%;
+            }
+
+        </style>
+
+        <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
+            <!--with-backdrop-->
+            <div id="fullscreen_content">
+                <paper-fab id="add-button" class="add" mini icon="add" on-click="_handleAddClick"></paper-fab>
+                <div id="title">{{resourceType}}</div>
+                <div id="message">
+                    Choose a name to create a new resource or copy and paste an existing resource url(after sharing it on google drive).
+                    If you use an existing resource a new one will not be create.
+                </div>
+                <paper-input id="name" label="New resource name"></paper-input>
+                <paper-input id="url" label="Existing resource Url"></paper-input>
+            </div>
+        </paper-dialog>
+
+    </template>
+
+    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+    <script src="https://apis.google.com/js/client.js"></script>
+
+    <script>
+        _this = null;
+
+        Polymer({
+            is: "google-card-creation-controllet",
+            properties: {
+
+                elevation:{
+                    type: Number,
+                    value: 3
+                },
+
+                resourceType : {
+                    type : String,
+                    value : undefined
+                },
+
+                comment:{
+                    cardType: String,
+                    value: ""
+                },
+
+                CLIENT_ID : {
+                    type : String,
+                    value : "1051697215951-q0gt5h8v4tgi0vdliogiqcsa2e7lvjqv.apps.googleusercontent.com"
+                },
+
+                SCOPES: {
+                    type : Array,
+                    value : ["https://www.googleapis.com/auth/drive.file"]
+                },
+
+                resourceId : {
+                    type : String,
+                    value : undefined
+                }
+            },
+
+            /* GOOGLE API FUNCTION*/
+            /**
+            * Check if current user has authorized this application.
+            */
+            checkAuth : function () {
+                gapi.auth.authorize(
+                    {
+                        'client_id': _this.CLIENT_ID,
+                        'scope'    : _this.SCOPES.join(' '),
+                        'immediate': true
+                    }, _this.handleAuthResult);
+            },
+            /**
+             * Handle response from authorization server.
+             *
+             * @param {Object} authResult Authorization result.
+             */
+            handleAuthResult : function(authResult) {
+                if (authResult && !authResult.error) {
+                    console.log("Authorized");
+                    _this.loadDriveApi();
+                } else {
+                    console.log("Authorization failed");
+                }
+            },
+
+            /**
+             * Initiate auth flow in response to user clicking authorize button.
+             *
+             * @param {Event} event Button click event.
+             */
+            handleAuthClick : function (event) {
+                gapi.auth.authorize(
+                        {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
+                        _this.handleAuthResult);
+                return false;
+            },
+            /**
+             * Load Drive API client library.
+             */
+            loadDriveApi : function() {
+                gapi.client.load('drive', 'v3', function() {
+                    console.log("DRIVER V3 API LOADED");
+                    _this.createNewDocument();
+                });
+            },
+            /**
+             * Create new doc
+             * */
+            createNewDocument : function(){
+                var request = gapi.client.request({
+                    'path': '/drive/v3/files',
+                    'method': 'POST',
+                    'body':{
+                        'name': _this.$.name.value,//'Shared document from api',
+                        'mimeType' : "application/vnd.google-apps." + _this.resourceType,
+                    }
+                });
+
+                request.execute(function(resp) {
+                    console.log("FILE CREATED  " + resp.id );
+                    console.log(resp);
+                    _this.resourceId = resp.id;
+                    _this.getPremissions();
+                    _this.insertPermission("spod.platform@gmail.com", "anyone", "writer");
+                });
+
+            },
+            /**
+             * Get permission for a file
+             * */
+            getPremissions : function(){
+
+                var request = gapi.client.request({
+                    'path': '/drive/v3/files/' + _this.resourceId + '/permissions',
+                    'method': 'GET',
+                    'body':{}
+                });
+
+                request.execute(function(resp) {
+                    console.log("FILE PERMISSION FOR " + _this.resourceId );
+                    console.log(resp);
+                });
+
+            },
+
+           insertPermission : function(value, type, role) {
+                var request = gapi.client.request({
+                    'path': '/drive/v3/files/' + _this.resourceId + '/permissions',
+                    'method': 'POST',
+                    'body':{
+                        'value': value,
+                        'type' : type,
+                        'role' : role
+                    }
+                });
+
+                request.execute(function(resp) {
+                    console.log("FILE PERMISSIONS SET FOR" + _this.resourceId);
+                    console.log(resp);
+                    //_this.$.content.innerHTML = '<iframe id="doc" src="https://docs.google.com/' + _this.resourceType + ((_this.resourceType != "document") ? "s" : "") + '/d/' + _this.resourceId +'/edit?usp=sharing&embedded=true"></iframe>';
+                    _this.fire('google-card-creation_new-card-created', {
+                                                                    type : this.resourceType,
+                                                                    url : 'https://docs.google.com/' + _this.resourceType + ((_this.resourceType != "document") ? "s" : "") + '/d/' + _this.resourceId +'/edit?usp=sharing&embedded=true'
+                                                                  }
+                    );
+
+                });
+            },
+            /*END GOOGLE API FUNCTION*/
+
+            ready : function(){
+                this.$.fullscreen_container.open();
+                this.$.fullscreen_container.style.zIndex = 100;
+            },
+
+            _handleAddClick : function(e){
+                if(this.$.url.value == ""){
+                    _this = this;
+                    this.checkAuth();
+                }else{
+                    this.fire('google-card-creation_new-card-created', { type : this.resourceType, url : this.$.url.value })
+                }
+                this.$.fullscreen_container.close();
+            }
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/google-cards-controllet/static/images/google-doc-icon.png b/controllets/google-cards-controllet/static/images/google-doc-icon.png
new file mode 100644
index 0000000..9cada25
--- /dev/null
+++ b/controllets/google-cards-controllet/static/images/google-doc-icon.png
diff --git a/controllets/google-cards-controllet/static/images/google-drawing-icon.png b/controllets/google-cards-controllet/static/images/google-drawing-icon.png
new file mode 100644
index 0000000..510a291
--- /dev/null
+++ b/controllets/google-cards-controllet/static/images/google-drawing-icon.png
diff --git a/controllets/google-cards-controllet/static/images/google-presentation-icon.png b/controllets/google-cards-controllet/static/images/google-presentation-icon.png
new file mode 100644
index 0000000..304f49c
--- /dev/null
+++ b/controllets/google-cards-controllet/static/images/google-presentation-icon.png
diff --git a/controllets/google-cards-controllet/static/images/google-sheet-icon.png b/controllets/google-cards-controllet/static/images/google-sheet-icon.png
new file mode 100644
index 0000000..6ea5ff3
--- /dev/null
+++ b/controllets/google-cards-controllet/static/images/google-sheet-icon.png