diff --git a/globals/settings.js b/globals/settings.js
index 910cfc6d..9ccb81dd 100755
--- a/globals/settings.js
+++ b/globals/settings.js
@@ -44,6 +44,12 @@ export var AppSettings = [
         "description": "Force the app to automaticly search when a type input is detected... [Developer]",
         "value": fromStorage? ycore.StorageValued('default_showpostcreator') : false
       },
+      {
+        "SettingID": "force_show_postactions",
+        "title": "Not auto hide Posts Actions",
+        "description": "Force the app to dont hide the post actions (likes, comments ...etc) automaticly... [Developer]",
+        "value": fromStorage? ycore.StorageValued('force_show_postactions') : false
+      },
       {
         "SettingID": "use_dev_server",
         "title": "Use Comty™ Development Server",
diff --git a/package.json b/package.json
index 14606de4..7e15af1c 100755
--- a/package.json
+++ b/package.json
@@ -8,13 +8,14 @@
   "author": "RageStudio",
   "license": "ISC",
   "dependencies": {
-    "@ant-design/pro-layout": "^4.10.13",
+    "@ant-design/compatible": "^1.0.1",
+    "@ant-design/pro-layout": "^5.0.0",
     "@lingui/react": "^2.9.1",
     "@material-ui/core": "^4.9.3",
     "@material-ui/icons": "^4.9.1",
     "@steveeeie/react-page-transition": "^1.1.2",
     "ant-design-pro": "^2.3.2",
-    "antd": "^3.26.9",
+    "antd": "^4.0.0",
     "autoprefixer": "9.7.4",
     "axios": "^0.19.2",
     "babel-core": "7.0.0-bridge.0",
diff --git a/src/@ycore/libs/yulio_id/pre.js b/src/@ycore/libs/yulio_id/pre.js
index 26d89307..5751813e 100755
--- a/src/@ycore/libs/yulio_id/pre.js
+++ b/src/@ycore/libs/yulio_id/pre.js
@@ -2,6 +2,8 @@ import * as ycore from 'ycore'
 import * as antd from 'antd'
 import Cookies from "ts-cookies";
 import keys from '../../../../config/keys.js';
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
 
 var jquery = require("jquery");
 var jwt = require("jsonwebtoken")
@@ -101,7 +103,7 @@ export function LogoutCall(){
                 placement: 'topLeft',
                 message: 'Unexpectedly failed logout in YulioID™ ',
                 description: 'It seems that your token has been removed unexpectedly and could not log out from YulioID ',
-                icon: <antd.Icon type="warning" style={{ color: 'orange' }} />
+                icon: <Icons.WarningOutlined style={{ color: 'orange' }} />
             })
             console.log("Failed logout with YulioID™", response)
         }
diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js
index c10aff46..7240fd41 100755
--- a/src/@ycore/ycore_worker.js
+++ b/src/@ycore/ycore_worker.js
@@ -3,6 +3,9 @@ import {AppSettings} from  '../../globals/settings.js'
 import {Endpoints} from 'globals/endpoints.js'
 import umiRouter from 'umi/router';
 import * as antd from "antd"
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
+
 import config from 'config'
 import './libs.js'
 import * as sw from '../../service-worker.js'
@@ -74,7 +77,7 @@ export function notifyError(err){
 }
 export function notifyProccess(cust){
     antd.notification.open({
-        icon: <antd.Icon type="loading" style={{ color: '#108ee9' }} />,
+        icon: <Icons.LoadingOutlined style={{ color: '#108ee9' }} />,
         message: 'Please wait',
         placement: 'bottomLeft'
     })
diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js
index 1659ee8f..1371632e 100755
--- a/src/components/HeaderSearch/index.js
+++ b/src/components/HeaderSearch/index.js
@@ -3,7 +3,8 @@ import * as antd from 'antd'
 import * as ycore from 'ycore'
 import styles from './index.less'
 import classnames from 'classnames'
-
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
 
 export const SetHeaderSearchType = {
   disable: () => {
@@ -62,7 +63,7 @@ export default class HeaderSearch extends Component {
       <span className={styles.headerSearch}>
           <antd.Input
             id='search_input'
-            prefix={<antd.Icon type="search" key="Icon" />}
+            prefix={<Icons.SearchOutlined />}
             placeholder=' Search on Comty...'
             onChange={ this.onChange }
             onPressEnter={this.sendToSearch}
diff --git a/src/components/HeaderSearch/index.less b/src/components/HeaderSearch/index.less
index 13175fa1..491179ef 100755
--- a/src/components/HeaderSearch/index.less
+++ b/src/components/HeaderSearch/index.less
@@ -14,9 +14,53 @@
 .headerSearch {
   margin: auto;
   :global{
-    .ant-input-prefix{
-      color: #9D9DA7;
+    .ant-input-affix-wrapper {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: rgba(0,0,0,.65);
+      font-size: 14px;
+      font-variant: tabular-nums;
+      line-height: 1.5;
+      list-style: none;
+      font-feature-settings: 'tnum';
+      position: relative;
+      display: inline-block;
+      width: 100%;
+      text-align: start;
     }
+
+    .ant-input-affix-wrapper .ant-input-prefix {
+        left: 12px;
+    }
+    .ant-input-affix-wrapper{
+      background-color: transparent !important;
+      border-color: transparent;
+      border-radius: 12px;
+    }
+    .ant-input-affix-wrapper > input.ant-input {
+      padding: 0 0 0 30px;
+      border: inherit; 
+      outline: inherit; 
+  }
+    .ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
+      background-color: transparent !important;
+      border-color: transparent;
+      border-radius: 12px;
+      position: absolute;
+      top: 50%;
+      z-index: 2;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+      align-items: center;
+      color: rgba(0,0,0,.65);
+      line-height: 0;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      color: #9d9da7 !important;
+    }
+ 
     .ant-input{
       border-radius: 12px;
       color: #9D9DA7;
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index bdb7b219..c782a5ed 100755
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -1,5 +1,17 @@
 import React, { PureComponent, Fragment } from 'react'
-import { Menu, Icon, Layout, Avatar, Popover, Badge, List, Switch, Tooltip, Dropdown, Button } from 'antd'
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import {
+  Menu,
+  Layout,
+  Avatar,
+  Popover,
+  Badge,
+  List,
+  Switch,
+  Tooltip,
+  Dropdown,
+  Button,
+} from 'antd';
 import { Trans, withI18n } from '@lingui/react'
 import { Ellipsis } from 'ant-design-pro'
 import classnames from 'classnames'
@@ -31,7 +43,7 @@ class Header extends PureComponent {
   handleOpenMenu() {
     let ListControls = [
       (<div>
-          <Button type="dashed" icon="close" shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
+          <Button type="dashed" icon={<LegacyIcon type="close" />} shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
       </div>
      )
     ]
@@ -77,7 +89,7 @@ class Header extends PureComponent {
                     }
                     description={moment(item.date).fromNow()}
                   />
-                  <Icon
+                  <LegacyIcon
                     style={{ fontSize: '15px', color: '#ccc' }}
                     type="right"
                   />
@@ -101,7 +113,7 @@ class Header extends PureComponent {
           offset={[-10, 10]}
           className={styles.iconButton}
         >
-          <Icon className={styles.iconFont} type="bell" />
+          <LegacyIcon className={styles.iconFont} type="bell" />
         </Badge>
       </Popover>
     )
@@ -110,16 +122,16 @@ class Header extends PureComponent {
       <Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed}, {[styles.collapsed]: !collapsed} )} > 
             <div className={classnames(styles.containersWrappers, {[styles.collapsed]: !collapsed})} >
               <div className={styles.leftContainer}>
-                <Tooltip title={'Main'}><Icon type="home" className={styles.iconButton} onClick={() => ycore.crouter.native('main')} style={{ fontSize: '15px' }} /></Tooltip>
-                <Tooltip title={'Search'}><Icon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
+                <Tooltip title={'Main'}><LegacyIcon type="home" className={styles.iconButton} onClick={() => ycore.crouter.native('main')} style={{ fontSize: '15px' }} /></Tooltip>
+                <Tooltip title={'Search'}><LegacyIcon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
               </div>
               <div className={styles.rightContainer}>
-                <Tooltip title={'Create'}><Icon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
+                <Tooltip title={'Create'}><LegacyIcon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
                 {notificationIcon}
               </div>
             </div>
       </Layout.Header>
-    )
+    );
   }
 }
 
diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js
index 975217da..729b8006 100755
--- a/src/components/Layout/Menu.js
+++ b/src/components/Layout/Menu.js
@@ -1,6 +1,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon } from 'antd'
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Menu } from 'antd';
 import Navlink from 'umi/navlink'
 import withRouter from 'umi/withRouter'
 import {SDCP} from 'ycore'
@@ -51,24 +52,24 @@ class SiderMenu extends PureComponent {
             className={styles.SubMenuItems}
             title={
               <Fragment>
-                {item.icon && <Icon type={item.icon} />}
+                {item.icon && <LegacyIcon type={item.icon} />}
                 <span className={styles.SubItemTitle}>{item.name}</span>
               </Fragment>
             }
           >
             {this.generateMenus(item.children)}
           </SubMenu>
-        )
+        );
       }
       return (
         <Menu.Item key={item.id} >
           <Navlink to={addLangPrefix(item.route) || '#'}>
-            {item.icon && <Icon type={item.icon} />}
+            {item.icon && <LegacyIcon type={item.icon} />}
             <span>{item.name}</span>
           </Navlink>
         </Menu.Item>
-      )
-    })
+      );
+    });
   }
 
   render() {
diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
index e321b099..1166ce67 100755
--- a/src/components/Layout/Sider.js
+++ b/src/components/Layout/Sider.js
@@ -2,6 +2,9 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import * as antd from 'antd'
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
+
 import { withI18n, Trans } from '@lingui/react'
 import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
@@ -93,31 +96,31 @@ class Sider extends PureComponent {
         onMouseLeave={this.hover}
       >
         <div className={styles.brand}><img onClick={() => ycore.crouter.native('main')} src={collapsed? config.LogoPath  : config.FullLogoPath } /></div>
-        <div className={this.StrictMode()? styles.CollapserWrapperLight : styles.CollapserWrapperDark} ><antd.Button width={'20px'} onClick={() => onCollapseChange(!collapsed)} icon={collapsed? (this.Balancer()? "right" : "double-right") : (this.Balancer()? "left" : "double-left") } /></div> 
+        <div className={this.StrictMode()? styles.CollapserWrapperLight : styles.CollapserWrapperDark} ><antd.Button width={'20px'} onClick={() => onCollapseChange(!collapsed)} icon={collapsed? (this.Balancer()? <Icons.RightOutlined/>: <Icons.DoubleLeftOutlined/>) : (this.Balancer()? <Icons.LeftOutlined /> : <Icons.DoubleLeftOutlined/>) } /></div> 
         <div className={styles.menuContainer}>
           <ScrollBar options={{  suppressScrollX: true,  }} >
                 <antd.Menu className={collapsed? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
-                     <antd.Menu.Item icon="compass" key="explore">
-                        <antd.Icon type="compass" />
-                         <Trans><span>Explore</span></Trans> 
+                     <antd.Menu.Item key="explore">
+                          <Icons.CompassOutlined />
+                          <Trans><span>Explore</span></Trans> 
                       </antd.Menu.Item> 
                       {ycore.booleanFix(userData.is_pro)? 
                       <antd.Menu.Item key="boosted_pages">
-                        <antd.Icon type="thunderbolt" />
-                       <Trans><span>Boost</span></Trans> 
+                          <Icons.ThunderboltOutlined />
+                          <Trans><span>Boost</span></Trans> 
                       </antd.Menu.Item> 
                       : 
                     <antd.Menu.Item key="upgrade_pro">
-                      <antd.Icon type="star" />
+                      <Icons.StarOutlined/>
                       <Trans><span>PRO</span></Trans>
                     </antd.Menu.Item>}
                       <antd.Menu.Item key="general_settings">
-                        <antd.Icon type="setting" />
+                        <Icons.SettingOutlined/>
                         <Trans><span>Settings</span></Trans>
                       </antd.Menu.Item>
                       {ycore.booleanFix(userData.admin)? 
                         <antd.Menu.Item key="admin_area">
-                          <antd.Icon type="tool" />
+                          <Icons.ToolOutlined />
                           <Trans><span>Admin Area</span></Trans>
                         </antd.Menu.Item> 
                             : 
@@ -128,7 +131,7 @@ class Sider extends PureComponent {
                     <div className={styles.something_thats_pulling_me_down}>
                     <antd.Menu selectable={false} className={collapsed ?  styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
                         <antd.Menu.Item style={{ fontSize: '15px' }} key="LightMode" disabled={false} >
-                        {collapsed? <antd.Icon type="bulb" /> :
+                        {collapsed? <Icons.BulbOutlined /> :
                             <div className={styles.themeSwitcher}>
                               <antd.Switch
                                 onChange={onThemeChange.bind(
@@ -142,7 +145,7 @@ class Sider extends PureComponent {
                             </div>}
                         </antd.Menu.Item>
                         <antd.Menu.Item key="SignOut">
-                          <antd.Icon type="logout" style={{ color: 'red' }} />
+                          <Icons.LogoutOutlined style={{ color: 'red' }} />
                          {collapsed ?  null : <Trans>Logout</Trans>}
                         </antd.Menu.Item>
                     </antd.Menu>
diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js
index c60a2100..03aa4cee 100755
--- a/src/components/PostCard/index.js
+++ b/src/components/PostCard/index.js
@@ -3,6 +3,8 @@ import * as antd from 'antd'
 import styles from './index.less'
 import {CustomIcons, LikeBTN} from 'components'
 import * as ycore from 'ycore'
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
 
 const { Meta } = antd.Card;
 
@@ -57,20 +59,20 @@ class PostCard extends React.PureComponent{
     render(){
         const { payload, customActions,  } = this.props
         const { id, user, ago, avatar, content, file, postFileName, publisher, post_likes, is_post_pinned, is_liked } = payload || emptyPayload;
-        const defaultActions = [<div><LikeBTN count={post_likes} id={id} liked={ycore.booleanFix(is_liked)? true : false} key="like" /></div>,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />]
+        const defaultActions = [<div><LikeBTN count={post_likes} id={id} liked={ycore.booleanFix(is_liked)? true : false} key="like" /></div>,<Icons.ShareAltOutlined key="share" />,<Icons.MoreOutlined key="actionMenu" />]
         const actions = customActions || defaultActions;
         return(
           <div className={styles.cardWrapper}>
              <antd.Card actions={actions} >
                 <Meta
                     avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>}
-                    title={<div className={styles.titleWrapper} ><h4 onClick={() => ycore.crouter.native(`@${user}`)} className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <antd.Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4> <div className={styles.PostTags}>{ycore.booleanFix(is_post_pinned)? <antd.Icon type="pushpin" /> : null }</div> </div>}
+                    title={<div className={styles.titleWrapper} ><h4 onClick={() => ycore.crouter.native(`@${user}`)} className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4> <div className={styles.PostTags}>{ycore.booleanFix(is_post_pinned)? (<Icons.PushpinFilled /> ): null }</div> </div>}
                     description={<span className={styles.textAgo}>{ago}</span>}
                     bordered="false"
                 />
                 {content? <div className={styles.postContent}> <h3 dangerouslySetInnerHTML={{__html:  content }}  /> </div> : null}
                 {file? <div className={styles.postContentFILE}>{this.renderPostPlayer(file)}</div> : null }
-                <div className={styles.ellipsisIcon}><antd.Icon type="ellipsis" /></div>
+                <div className={styles.ellipsisIcon}><Icons.EllipsisOutlined /></div>
                
                 
             </antd.Card>
diff --git a/src/components/PostCreator/index.js b/src/components/PostCreator/index.js
index 522bd099..0b92fb1b 100755
--- a/src/components/PostCreator/index.js
+++ b/src/components/PostCreator/index.js
@@ -2,8 +2,10 @@ import React from 'react'
 import * as antd from 'antd'
 import * as ycore from 'ycore'
 import styles from './index.less'
-import {CustomIcons} from 'components'
+import {CustomIconss} from 'components'
 import { RefreshFeed } from 'components/MainFeed'
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
 
 const { Meta } = antd.Card;
 const userData = ycore.SDCP();
@@ -30,13 +32,13 @@ class PostCreator extends React.PureComponent{
     ShareWithValue(e){
         switch (e) {
             case 'any':
-                return  <span><antd.Icon type="global" /> Share with everyone</span>
+                return  <span><Icons.GlobalOutlined /> Share with everyone</span>
             case 'only_follow':
-                return <span><antd.Icon type="team" /> Share with people I follow</span>
+                return <span><Icons.TeamOutlined /> Share with people I follow</span>
             case 'only_followers':
-                return <span><antd.Icon type="usergroup-add" /> Share with people follow me</span> 
+                return <span><Icons.UsergroupAddOutlined /> Share with people follow me</span> 
             case 'private':
-                return <span><antd.Icon type="eye-invisible" /> Dont share, only me</span>
+                return <span><Icons.EyeInvisibleOutlined /> Dont share, only me</span>
             default:
                 return <span>Unknown</span>
         }
@@ -144,14 +146,14 @@ class PostCreator extends React.PureComponent{
                 <div className={styles.inputWrapper}>
                     <div className={styles.titleAvatar}><img src={userData.avatar} /></div>
                     <antd.Input.TextArea disabled={this.state.posting? true : false} onPressEnter={this.PublishPost} value={this.state.rawtext} autoSize={{ minRows: 3, maxRows: 5 }} dragable="false" placeholder="What are you thinking?" onChange={this.handleChanges} allowClear maxLength={ycore.DevOptions.MaxLengthPosts} rows={4} />
-                    <div><antd.Button disabled={this.state.posting? true : (keys_remaining < 512? false : true)} onClick={this.PublishPost} type="primary" icon={this.state.posting_ok? "check-circle" : (this.state.posting? "loading" : "export")} /></div>
+                    <div><antd.Button disabled={this.state.posting? true : (keys_remaining < 512? false : true)} onClick={this.PublishPost} type="primary" icon={this.state.posting_ok? <Icons.CheckCircleOutlined/> : (this.state.posting? <Icons.LoadingOutlined /> : <Icons.ExportOutlined /> )} /></div>
                 </div>
                 <div className={styles.progressHandler}><antd.Progress strokeWidth="4px" className={this.state.posting? styles.proccessUnset : (keys_remaining < 512? styles.proccessSet : styles.proccessUnset)} status={this.handleKeysProgressBar()}  showInfo={false} percent={percent} /></div>
                 
                 <div className={styles.postExtra} > 
-                    <antd.Button type="ghost"> <antd.Icon type="camera" theme="filled" /></antd.Button>
-                    <antd.Button type="ghost"> <antd.Icon type="video-camera" theme="filled" /></antd.Button>
-                    <antd.Button onClick={this.handleToggleToolbox} type="ghost"><antd.Icon type="plus" /></antd.Button>
+                    <antd.Button type="ghost"> <Icons.CameraFilled /></antd.Button>
+                    <antd.Button type="ghost"> <Icons.VideoCameraFilled /></antd.Button>
+                    <antd.Button onClick={this.handleToggleToolbox} type="ghost"><Icons.PlusCircleOutlined /></antd.Button>
                     <antd.Dropdown overlay={shareOptionsMenu}>
                         <a className={styles.shareWith} onClick={e => e.preventDefault()}>
                         {this.ShareWithValue(this.state.shareWith)}
diff --git a/src/components/UserCard/index.js b/src/components/UserCard/index.js
index 9c0b4382..1a92bb0e 100755
--- a/src/components/UserCard/index.js
+++ b/src/components/UserCard/index.js
@@ -2,7 +2,10 @@ import React from 'react'
 import * as antd from 'antd'
 import * as ycore from 'ycore'
 import styles from './index.less'
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
 
+const userData = ycore.SDCP()
 const { Meta } = antd.Card;
 // Set default by configuration
 const emptyPayload = {user: 'User Unknown', ago: 'This User is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' }
@@ -16,11 +19,11 @@ class UserCard extends React.PureComponent{
         }
     }
 
-    
     render(){
         const { source, } = this.props
-        const { username, avatar, about  } = source || emptyPayload;
-        
+        const { username, avatar, about, id  } = source || emptyPayload;
+        const DevInfo = `ID #${id} | Developer ${ycore.booleanFix(source.dev)? 'yes' : 'no'} |`
+        const AdminInfo = `Email ${source.email} | `
         return(
           <div className={styles.cardWrapper}>
              <antd.Card >
@@ -30,7 +33,7 @@ class UserCard extends React.PureComponent{
                         <div className={styles.titleWrapper} >
                             <h4 onClick={() => ycore.crouter.native(`@${username}`)} className={styles.titleUser}>@{username} </h4> 
                         </div>}
-                    description={<span className={styles.textAgo}>test</span>}
+                    description={ycore.booleanFix(userData.dev)? <span className={styles.textAgo}>{DevInfo} {AdminInfo}</span> : null}
                     bordered="false"
                 />
                  <div className={styles.postContent}> <h3>{about}</h3></div> 
diff --git a/src/components/UserCard/index.less b/src/components/UserCard/index.less
index 2f43fe84..d47faec0 100755
--- a/src/components/UserCard/index.less
+++ b/src/components/UserCard/index.less
@@ -5,6 +5,7 @@
     border-radius: 7px;
     max-width: 510px;
     min-width: 265px;
+    margin: auto;
     width: auto;
     margin: 23px  50px ;
     :global{
diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js
index febbddaa..f854814a 100755
--- a/src/components/UserProfile/index.js
+++ b/src/components/UserProfile/index.js
@@ -5,8 +5,10 @@ import * as antd from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import {CustomIcons, MainFeed} from 'components'
 import { SetHeaderSearchType } from 'components/HeaderSearch'
-const userData = ycore.SDCP();
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
 
+const userData = ycore.SDCP();
 function isOwnProfile(id){
   if(id == userData.username){
     ycore.DevOptions.ShowFunctionsLogs ? console.log('Is your own profile !!'): null
@@ -33,7 +35,7 @@ const UserHeader = ({ values }) => {
                   
               </div>
               <div className={styles.contentTitle}>
-                 <h1 style={{ marginBottom: '0px' }} >{values.username}<antd.Tooltip title="User Verified">{ycore.booleanFix(values.verified)? <antd.Icon style={{ color: 'blue', verticalAlign:'top' }} component={CustomIcons.VerifiedBadge} /> : null}</antd.Tooltip></h1> 
+                 <h1 style={{ marginBottom: '0px' }} >{values.username}<antd.Tooltip title="User Verified">{ycore.booleanFix(values.verified)? <Icon style={{ color: 'blue', verticalAlign:'top' }} component={CustomIcons.VerifiedBadge} /> : null}</antd.Tooltip></h1> 
                  <span style={{ fontSize: '14px', fontWeight: '100', lineHeight: '0', marginBottom: '5px' }} dangerouslySetInnerHTML={{__html:  values.about }}  />
               </div>
              
diff --git a/src/components/YulioID/index.js b/src/components/YulioID/index.js
index 9c0fce20..f6f4cf52 100755
--- a/src/components/YulioID/index.js
+++ b/src/components/YulioID/index.js
@@ -2,7 +2,9 @@ import React, { Component } from 'react'
 import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore';
 import PropTypes from 'prop-types';
 import { connect } from 'dva';
-import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd'
+import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button, Input, Drawer, Collapse } from 'antd';
 import styles from './index.less';
 import formstyle from './formstyle.less'
 
@@ -104,7 +106,7 @@ class YulioID extends Component {
                 {ShowLoading ? (
                   <div style={{ height: '329px' }}>
                     <div className={styles.spinner__wrapper} id="loadingspn">
-                      {StateIcon ? (<Icon type={StateIcon} className={StateException? styles.StateIcon_exception : styles.StateIcon} /> ) : (<Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin />)}
+                      {StateIcon ? (<LegacyIcon type={StateIcon} className={StateException? styles.StateIcon_exception : styles.StateIcon} /> ) : (<LegacyIcon type="loading" style={{ fontSize: 24, margin: '13px' }} spin />)}
                       <div><br/><br/><br/>
                         <div className={styles.resultbox}>
                           <h6 > {StateMessage} </h6>
@@ -117,7 +119,7 @@ class YulioID extends Component {
                   <div>
                     <div className={styles.input__wrapper}>
                       <label className={styles.labelform}>
-                        <Icon type="user" style={{ fontSize: '15px' }} />{' '}
+                        <LegacyIcon type="user" style={{ fontSize: '15px' }} />{' '}
                         Username
                       </label>
                       <FormItem>
@@ -138,7 +140,7 @@ class YulioID extends Component {
                     </div>
                     <div className={styles.input__wrapper}>
                       <label className={styles.labelform}>
-                        <Icon type="unlock" style={{ fontSize: '15px' }} />{' '}
+                        <LegacyIcon type="unlock" style={{ fontSize: '15px' }} />{' '}
                         Password
                       </label>
                       <FormItem>
@@ -147,7 +149,7 @@ class YulioID extends Component {
                         })(
                           <Input.Password
                             onPressEnter={this.handleEnter}
-                            className={formstyle.inputform}
+                            className={styles.inputform}
                             placeholder="Password"
                             onChange={text => {
                               this.handlePassword(text)
@@ -171,8 +173,8 @@ class YulioID extends Component {
                       Or
                     </h2>
                     <div className={styles.moreActions}>
-                      <Button type="dashed"><Icon type="question-circle" /> Forgotten password </Button>
-                      <Button type="dashed" ><Icon type="user-add" /> Create an account </Button>
+                      <Button type="dashed"><LegacyIcon type="question-circle" /> Forgotten password </Button>
+                      <Button type="dashed" ><LegacyIcon type="user-add" /> Create an account </Button>
                     </div>
                   
                   </div>
@@ -182,7 +184,7 @@ class YulioID extends Component {
           </main>
         </Drawer>
       </div>
-    )
+    );
   }
 }
 
diff --git a/src/components/YulioID/index.less b/src/components/YulioID/index.less
index 4f6a3591..794f8553 100755
--- a/src/components/YulioID/index.less
+++ b/src/components/YulioID/index.less
@@ -220,6 +220,11 @@
   /*inputs*/
   .input__wrapper {
 	margin-bottom: 10px;
+	:global{
+		.ant-col {
+			width: 100%;
+		}
+	}
   }
   .inputRG__wrapper {
 	margin-bottom: 0px;
diff --git a/src/pages/404.js b/src/pages/404.js
index 9a576e6d..22a495ad 100755
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Icon } from 'antd'
+import { Icon as LegacyIcon } from '@ant-design/compatible';
 import { Page } from 'components'
 import styles from './404.less'
 
 const Error404 = () => (
   <Page inner>
     <div className={styles.error}>
-    <Icon type="api" />
+    <LegacyIcon type="api" />
       <h1>OBA BLYAT</h1>
       <p><strong>ERROR 404</strong></p>
     </div>
diff --git a/src/pages/login/index.less b/src/pages/login/index.less
index 14f5659f..6931eb15 100755
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@@ -51,6 +51,11 @@
 		margin: 0 14px 0 0;
 		color:  #F9F9F9;
 	}
+	:global{
+		.ant-tag {
+			border-radius: 4px;
+		}
+	}
 }
 .loginLandingWrapper{
 	background-color: #F9F9F9;
diff --git a/src/pages/s/$search/index.js b/src/pages/s/$search/index.js
index 4c09debe..16e8d529 100755
--- a/src/pages/s/$search/index.js
+++ b/src/pages/s/$search/index.js
@@ -4,6 +4,8 @@ import { UserCard } from 'components'
 import styles from './styles.less'
 import * as ycore from 'ycore'
 import * as antd from 'antd'
+import * as Icons from '@ant-design/icons';
+import Icon from '@ant-design/icons'
 
 const userData = ycore.SDCP()
 
@@ -49,22 +51,24 @@ class SearchPageIndexer extends PureComponent {
           console.log('Users => ', usersParsed)
           return(
             <div>
-              <span>Users => </span>
-              <antd.List
-               grid={{
-                gutter: 16,
-                xs: 1,
-                sm: 2,
-                md: 4,
-                lg: 4,
-                xl: 6,
-                xxl: 3,
-              }}
-              dataSource={usersParsed}
-              renderItem={item => (
-                <UserCard source={item} />
-              )}
-               />
+              <antd.Typography.Title level={2} ><Icons.TeamOutlined /> Users </antd.Typography.Title>
+              <div className={styles.searchEntry}>
+                  <antd.List
+                    grid={{
+                      gutter: 16,
+                      xs: 1,
+                      sm: 2,
+                      md: 4,
+                      lg: 4,
+                      xl: 6,
+                      xxl: 3,
+                    }}
+                    dataSource={usersParsed}
+                    renderItem={item => (
+                      <UserCard source={item} />
+                    )}
+                  />
+               </div>
             </div>
           )
         }
@@ -78,7 +82,7 @@ class SearchPageIndexer extends PureComponent {
         return null
       } catch (error) {
         console.log(error)
-        return <h2>Wooups</h2>
+        return <center><h2>Render Error</h2></center>
       }
      
       
@@ -98,15 +102,17 @@ class SearchPageIndexer extends PureComponent {
         console.log(`Search matched!  ${location.pathname}`)
         return(
             <div>
-              <h1 className={styles.searchHeader}><antd.Icon type="search" /> Results of {string} </h1>
-              <antd.Card> 
-              {this.state.loading? null : this.renderResult(this.state.SearchResult)}
-              </antd.Card>
+              <h1 className={styles.searchHeader}><Icons.SearchOutlined /> Results of {string} </h1>
+                <antd.Card> 
+                  <div className={styles.results}>
+                     {this.state.loading? null : this.renderResult(this.state.SearchResult)}
+                  </div>
+                </antd.Card>
             </div>
         )
       }
       
-      return(<div><center> Input Error </center></div>)
+      return(<div><center> Render Error </center></div>)
     }
 }
 
diff --git a/src/pages/s/$search/styles.less b/src/pages/s/$search/styles.less
index 4888e9c6..d76a307a 100755
--- a/src/pages/s/$search/styles.less
+++ b/src/pages/s/$search/styles.less
@@ -3,5 +3,16 @@
 .searchHeader {
     font-family: "Nunito", sans-serif;
     font-size: 40px;
-   
+    text-align: center;
+    margin-top: 7px;
+}
+.results {
+    padding: 10px;
+}
+.searchEntry {
+    :global{
+        .antd-card{
+            margin: auto;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/pages/settings/components/base.js b/src/pages/settings/components/base.js
index 6d23fbae..4dfdc8f6 100755
--- a/src/pages/settings/components/base.js
+++ b/src/pages/settings/components/base.js
@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
-import { List, Icon, Switch, Button, notification } from 'antd';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { List, Switch, Button, notification } from 'antd';
 import { AppSettings } from '../../../../globals/settings.js'
 import { DevOptions, ControlBar } from 'ycore'
 import * as ycore from "ycore"
@@ -44,7 +45,7 @@ class Base extends Component {
   handleControlBar(){
     const ListControls = [
       (<div>
-          <Button type="done" icon='save' onClick={() => this.saveChanges()} >Save</Button>
+          <Button type="done" icon={<LegacyIcon type='save' />} onClick={() => this.saveChanges()} >Save</Button>
       </div>
      )
     ]
diff --git a/src/pages/settings/index.js b/src/pages/settings/index.js
index 0e860e7d..9763e94f 100755
--- a/src/pages/settings/index.js
+++ b/src/pages/settings/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { GridContent } from '@ant-design/pro-layout';
-import { Menu, Typography, Icon } from 'antd';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Menu, Typography } from 'antd';
 import styles from './style.less';
 
 import NotificationView from './components/notification.js';
@@ -53,7 +54,7 @@ class GeneralSettings extends React.Component {
     const { mode, selectKey } = this.state;
     return (
       <div>
-        <Title className={styles.titleHead}><Icon type="setting" /> Settings</Title>
+        <Title className={styles.titleHead}><LegacyIcon type="setting" /> Settings</Title>
         <GridContent>
           <div
             className={styles.main}