diff --git a/.gitignore b/.gitignore
index 08f11a0e..4d433501 100755
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,4 @@ package-lock.json
 src/locales/_build
 src/locales/**/*.js
 android/
-direct
\ No newline at end of file
+auxCord
\ No newline at end of file
diff --git a/config/keys.js b/config/keys.js
index 10542612..4bbc3635 100755
--- a/config/keys.js
+++ b/config/keys.js
@@ -1,4 +1,6 @@
 module.exports = {
+  spotify_client: '609f59064dfd470c8c2abffbd9044843',
+  spotify_secret: 'b7efd276bf2e41039dedb2a514f35951',
   unsplash_key: "slrHmuo9FEJajV4xvWl38TUhbib6BhhGI4VIZ1-cqnw",
   unsplash_secret: "dh3UlgLTdunO7a_l_iKjotXbz0xB7w5EuDIBU8Pa8pA",
   g_recaptcha_key: '6Lc55uUUAAAAAEIACMVf3BUzAJSNCmI3RrjEirZ6',
diff --git a/globals/badges_list.js b/globals/badges_list.js
index 5a429a45..ed97b603 100755
--- a/globals/badges_list.js
+++ b/globals/badges_list.js
@@ -1,4 +1,4 @@
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
 
 export var BadgesType = [
   {
@@ -30,7 +30,7 @@ export var BadgesType = [
     title: 'DEVELOPER',
     color: 'default',
     require: 'dev',
-    icon: (<Icons.RocketOutlined />),
+    icon: (<Icons.GitBranch style={{marginRight: 'unset', verticalAlign: "-0.125em"}} />), // 
     tip: 'DEVELOPER',
   },
   {
@@ -46,7 +46,15 @@ export var BadgesType = [
     title: 'Pro Chikito',
     color: '#a0d911',
     require: '',
-    icon: (<Icons.AndroidOutlined />),
+    icon: ("🐱‍🐉🧜‍♀️"),
     tip: 'Chikito',
+  },
+  {
+    id: 'patreon',
+    title: 'Patreon Member',
+    color: '',
+    require: '',
+    icon: (<Icons.Patreon />),
+    tip: 'Nigas',
   }
 ]
diff --git a/src/components/MediaPlayer/post_player.js b/src/components/MediaPlayer/post_player.js
new file mode 100644
index 00000000..0844fda5
--- /dev/null
+++ b/src/components/MediaPlayer/post_player.js
@@ -0,0 +1,62 @@
+export class PostPlayer extends React.PureComponent {
+    player() {
+      const { file } = this.props
+      let type
+  
+      const ImageExtensions = ['.png', '.jpg', '.jpeg', '.gif']
+      const VideoExtensions = ['.mp4', '.mov', '.avi']
+      const AudioExtensions = ['.mp3', '.ogg', '.wav']
+  
+      const FilesAllowed = ImageExtensions.concat(
+        VideoExtensions,
+        AudioExtensions
+      )
+  
+      for (const prop in FilesAllowed) {
+        if (file.includes(`${ImageExtensions[prop]}`)) {
+          type = 'image'
+        }
+        if (file.includes(`${VideoExtensions[prop]}`)) {
+          type = 'video'
+        }
+        if (file.includes(`${AudioExtensions[prop]}`)) {
+          type = 'audio'
+        }
+      }
+  
+      if (type == 'video') {
+        //  const payload = {type: 'video', sources: [{src: file,}]}
+        //  return (
+        //    <PlyrComponent styles={{ width: '100%' }} sources={payload} />
+        //  )
+        return (
+          <video id="player" playsInline controls>
+            <source src={file} />
+          </video>
+        )
+      }
+      if (type == 'audio') {
+        return (
+          <audio id="player" controls>
+            <source src={file} />
+          </audio>
+        )
+      }
+      if (type == 'image') {
+        return <img src={file} />
+      }
+    }
+    render() {
+      return (
+        <div
+          className={classnames(styles.PlayerContainer, {
+            [styles.mobile]: this.props.isMobile,
+            [styles.entire]: this.props.entire,
+          })}
+        >
+          {this.player()}
+        </div>
+      )
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/components/Players/index.js b/src/components/Players/index.js
new file mode 100644
index 00000000..b9b2d7ab
--- /dev/null
+++ b/src/components/Players/index.js
@@ -0,0 +1,3 @@
+import Spotify_player from './spotify_player.js'
+
+export default { Spotify_player }
\ No newline at end of file
diff --git a/src/components/Players/spotify_player.js b/src/components/Players/spotify_player.js
new file mode 100644
index 00000000..4eda6141
--- /dev/null
+++ b/src/components/Players/spotify_player.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import * as antd from 'antd'
+import * as Icons from 'components/Icons'
+import * as app from 'app'
+import styles from './spotify_player.less'
+
+export default class Spotify_player extends React.PureComponent{
+
+    state = {
+        room_id: null,
+        niga: false,
+        styleMariaguno: { color: "green" },
+        styleJoto: { color: "blue" }
+
+    }
+
+    componentDidMount(){
+        const { room_id } = this.props
+        if (room_id) { this.setState({ room_id: room_id })}
+        
+    }
+
+    render(){
+        const { niga, styleMariaguno, styleJoto } = this.state
+
+        const toogleMariaguana = () => {
+            this.setState({ niga: !niga })
+            
+        }
+
+        return( 
+        <div>
+            <h3 style={ niga? styleMariaguno : styleJoto } >Seccion id: {this.state.room_id}</h3>
+            <antd.Button onClick={() => toogleMariaguana()} > Mariguano MODO </antd.Button>
+        </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/Players/spotify_player.less b/src/components/Players/spotify_player.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js
index d21587bf..14f8bfd5 100755
--- a/src/components/PostCard/index.js
+++ b/src/components/PostCard/index.js
@@ -146,16 +146,10 @@ class PostCard extends React.PureComponent {
       },
     }
     const actions = [
-      <div>
-        <Like_button
-          count={post_likes}
-          id={id}
-          liked={app.booleanFix(is_liked) ? true : false}
-          key="like"
-        />
-      </div>,
+      <Like_button key="like" count={post_likes} id={id} liked={app.booleanFix(is_liked) ? true : false} />,
+      <Icons.Share2 />,
       <antd.Badge dot={post_comments > 0 ? true : false}>
-        <MICON.InsertComment key="comments" onClick={() => SwapThisPost()} />
+        <Icons.MessageSquare key="comments" onClick={() => SwapThisPost()} />
       </antd.Badge>,
     ]
 
diff --git a/src/components/PostCard/index.less b/src/components/PostCard/index.less
index 11ae7bb5..f43f40d9 100755
--- a/src/components/PostCard/index.less
+++ b/src/components/PostCard/index.less
@@ -48,7 +48,7 @@
       transition: opacity @__Global_Components_transitions_dur linear, position @__Global_Components_transitions_dur linear, transform @__Global_Components_transitions_dur linear;
       border-radius: 0 0 10px 10px;
       opacity: 0;
-
+     
       &.showMode {
         opacity: 1;
         transform: translate(0, 15px);
@@ -73,7 +73,7 @@
     .ant-card-actions>li {
       margin: -20px 0 0 0;
       border-right: 0;
-
+     
       .ant-badge-count {
         width: 20px;
         text-align: left;
@@ -107,6 +107,7 @@
         height: 100%;
         vertical-align: middle;
       }
+      #feather_icon{ margin-right: unset!important; }
     }
   }
 }
diff --git a/src/components/index.js b/src/components/index.js
index 6b56d36d..8d86e979 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,7 @@
 // @alias from 'components'
 
 // Helpers & Misc
+import Players from './Players'
 export * as Icons from './Icons'
 import Loader from './Loader/Loader.js'
 import App_about from './App_about'
@@ -25,6 +26,7 @@ import PostCreator from './PostCreator'
 // Mix & Export all
 export {
   Feather,
+  Players,
   App_about,
   MediaPlayer,
   UserBadges,
diff --git a/src/pages/debug/spotify.js b/src/pages/debug/spotify.js
new file mode 100644
index 00000000..d914cb1a
--- /dev/null
+++ b/src/pages/debug/spotify.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import * as antd from 'antd'
+import { Players } from 'components'
+import * as Icons from 'components/Icons'
+import * as app from 'app'
+
+export default class Spotify extends React.PureComponent{
+    constructor(props){
+        super(props)
+        this.state =  {
+            active: false,
+            tmp_id: null,
+            room_id: null
+        }
+    }
+
+    handleJoinRoom(id){
+        this.setState({ room_id: id, active: true })
+
+    }
+
+    handleCreateRoom(){
+
+    }
+    
+    render(){
+        const { active, room_id } = this.state
+        const handleSesID = (e) => { this.setState({ tmp_id: e.target.value }) }
+        const joinRoom = () => { 
+            this.handleJoinRoom(this.state.tmp_id)
+        }
+        const createRoom = e => { 
+
+        }
+
+        if (active && room_id) return <Players.Spotify_player room_id={ this.state.room_id }/> 
+        return(
+            <>
+            <h1>Spotifyfy Debug NIgaa 1200% 140p download PUNJABI 🐷🐷🐷🐷 halal verifedº</h1><hr/>
+            <div>
+                Join <antd.Input placeholder="Mete el codigo, maricon" onChange={handleSesID} />
+                <antd.Button type="primary" onClick={()=> joinRoom()} > Join </antd.Button>
+            </div>
+         </>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/pages/debug/youtube_sync.js b/src/pages/debug/youtube_sync.js
new file mode 100644
index 00000000..e69de29b