diff --git a/packages/xod-client/src/core/styles/components/Pin.scss b/packages/xod-client/src/core/styles/components/Pin.scss
index e2b7fa85..024232fb 100644
--- a/packages/xod-client/src/core/styles/components/Pin.scss
+++ b/packages/xod-client/src/core/styles/components/Pin.scss
@@ -67,6 +67,10 @@
       fill: $color-canvas-selected;
     }
   }
+
+  &.is-connected.is-input .linkingHighlight {
+    fill-opacity: 0.3;
+  }
 }
 
 .PinOverlay {
diff --git a/packages/xod-client/src/project/components/Pin.jsx b/packages/xod-client/src/project/components/Pin.jsx
index 0c090ca1..89b598b2 100644
--- a/packages/xod-client/src/project/components/Pin.jsx
+++ b/packages/xod-client/src/project/components/Pin.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { PIN_DIRECTION } from 'xod-project';
+
 import {
   PIN_RADIUS,
   PIN_RADIUS_WITH_OUTER_STROKE,
@@ -11,6 +13,9 @@ const Pin = props => {
   const cls = classNames('Pin', {
     'is-selected': props.isSelected,
     'is-accepting-links': props.isAcceptingLinks,
+    'is-connected': props.isConnected,
+    'is-input': props.direction === PIN_DIRECTION.INPUT,
+    'is-output': props.direction === PIN_DIRECTION.OUTPUT,
   });
 
   const symbolClassNames = classNames('symbol', props.type, {
@@ -60,6 +65,7 @@ Pin.propTypes = {
   keyName: PropTypes.string.isRequired,
   label: PropTypes.string,
   type: PropTypes.string,
+  direction: PropTypes.string,
   position: PropTypes.object.isRequired,
   isSelected: PropTypes.bool,
   isConnected: PropTypes.bool,