diff --git a/src/components/LargeCard/LargeCard.jsx b/src/components/LargeCard/LargeCard.jsx
new file mode 100644
index 0000000..6184e2a
--- /dev/null
+++ b/src/components/LargeCard/LargeCard.jsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+import ReactDOM from 'react-dom'
+import Flexbox from 'flexbox-react'
+import { Icon } from 'semantic-ui-react'
+import LargeCardAction from './LargeCardAction'
+import LargeCardClose from './LargeCardClose'
+import LargeCardGutter from './LargeCardGutter'
+import '../../styles/components/large-card.css'
+
+
+class LargeCard extends React.Component {
+  constructor (props) {
+    super(props)
+    
+  }
+  static Action = LargeCardAction;
+  static Close = LargeCardClose;
+  static Gutter = LargeCardGutter;
+
+  render () {
+    return (
+      <div className={`console__box__fullview  is-fullview-open-${this.props.showCard}`}>
+        <Flexbox flexDirection='row' className='console__box__fullview__container' height='275px'>
+
+        
+        {this.props.children}
+        </Flexbox>
+      </div>
+    )
+  }
+}
+LargeCard.propTypes = {
+    cardContent: React.PropTypes.object,
+}
+export default LargeCard
diff --git a/src/components/LargeCard/LargeCardAction.jsx b/src/components/LargeCard/LargeCardAction.jsx
new file mode 100644
index 0000000..70588b3
--- /dev/null
+++ b/src/components/LargeCard/LargeCardAction.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const LargeCardAction = (props) => {
+  return (
+    <a className={'fullview__goto__button button buttton-rect'} onClick={props.onClick}>
+        {props.label}
+        {props.children}
+    </a>
+  )
+}
+
+LargeCardAction.defaultProps = {
+
+}
+
+LargeCardAction.propTypes = {
+
+}
+
+export default LargeCardAction
diff --git a/src/components/LargeCard/LargeCardClose.jsx b/src/components/LargeCard/LargeCardClose.jsx
new file mode 100644
index 0000000..687ba4e
--- /dev/null
+++ b/src/components/LargeCard/LargeCardClose.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const LargeCardClose = (props) => {
+  return (
+    <span className='close__fullview' onClick={props.onClick}>
+        <Icon className='ei icon_close' aria-hidden='true' />
+    </span>
+  )
+}
+
+LargeCardClose.defaultProps = {
+
+}
+
+LargeCardClose.propTypes = {
+
+}
+
+export default LargeCardClose
diff --git a/src/components/LargeCard/LargeCardGutter.jsx b/src/components/LargeCard/LargeCardGutter.jsx
new file mode 100644
index 0000000..a5ce92a
--- /dev/null
+++ b/src/components/LargeCard/LargeCardGutter.jsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import colorPallete from '../colorPallete'
+import Flexbox from 'flexbox-react'
+
+const LargeCardGutter = (props) => {
+  let color = ''
+  switch(props.color) {
+    case 'critical':
+      color = colorPallete.red
+      break;
+    case 'warning':
+      color = colorPallete.yellow
+      break;
+    case 'normal':
+      color = colorPallete.blue
+      break;
+    case 'blue':
+      color = colorPallete.blue
+      break;
+    default:
+      color = props.color;
+  }
+  return (
+    <Flexbox className='fullview__left_border' width='9px' style={{backgroundColor: color}} />
+  )
+}
+
+LargeCardGutter.defaultProps = {
+
+}
+
+LargeCardGutter.propTypes = {
+
+}
+
+export default LargeCardGutter
diff --git a/src/components/MicroCard.jsx b/src/components/MicroCard.jsx
deleted file mode 100644
index 5d68ec4..0000000
--- a/src/components/MicroCard.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-import Flexbox from 'flexbox-react'
-import FavoriteButton from './FavoriteButton'
-import { Icon } from 'semantic-ui-react'
-import '../styles/components/micro-card.css'
-
-const MicroCard = (props) => {
-  console.log(props)
-  return (
-    <Flexbox
-      flexDirection='row'
-      key={props.cardContent.id}
-      className={`microcard bordered`}
-      style={props.style}
-    >
-      {
-            (props.cardContent.gutter)
-            ? (
-              <Flexbox className='state__indicator' style={{backgroundColor: props.cardContent.gutter}} width='8px' />
-            )
-            : ''
-        }
-      <Flexbox flexDirection='column' paddingBottom='10px' paddingLeft='10px' paddingTop='5px'>
-        <Flexbox className='box__header'>{props.cardContent.title}</Flexbox>
-        <Flexbox flexGrow={2}>
-          {props.children}
-        </Flexbox>
-      </Flexbox>
-      <Flexbox flexGrow={2} justifyContent='flex-end'>
-        {props.cardContent.count
-        ? <Flexbox alignItems='flex-end' className='microcard__count'>{props.cardContent.count}</Flexbox>
-              : ''
-            }
-      </Flexbox>
-      <Flexbox>
-        <Flexbox className='microcard_favorite'>
-          <FavoriteButton isFavorited={props.cardContent.isFavorited} />
-        </Flexbox>
-        {
-            (props.cardContent.showArrow)
-            ? (
-              <Flexbox>
-                <Icon className='ei microcard__arrow-right arrow_carrot-right' />
-              </Flexbox>
-            ) : ''
-        }
-      </Flexbox>
-    </Flexbox>
-  )
-}
-
-MicroCard.defaultProps = {
-
-}
-
-MicroCard.propTypes = {
-  cardContent: React.PropTypes.object
-
-}
-
-export default MicroCard
diff --git a/src/components/MicroCard/MicroCard.jsx b/src/components/MicroCard/MicroCard.jsx
new file mode 100644
index 0000000..9d8328c
--- /dev/null
+++ b/src/components/MicroCard/MicroCard.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import MicroCardGutter from './MicroCardGutter'
+import MicroCardAction from './MicroCardAction'
+import MicroCardFavorite from './MicroCardFavorite'
+import MicroCardContent from './MicroCardContent'
+import MicroCardCount from './MicroCardCount'
+import { Icon } from 'semantic-ui-react'
+import '../../styles/components/micro-card.css'
+
+class MicroCard extends React.Component {
+  static Gutter = MicroCardGutter;
+  static Action = MicroCardAction;
+  static Favorite = MicroCardFavorite;
+  static Content = MicroCardContent;
+  static Count = MicroCardCount;
+  render () {
+    return (
+      <Flexbox
+        flexDirection='row'
+        key={this.props.cardContent.id}
+        className={`microcard bordered ${this.props.className}`}
+        style={this.props.style}
+        onClick={this.props.onClick}
+    >
+        {this.props.children}
+
+      </Flexbox>
+    )
+  }
+}
+
+MicroCard.propTypes = {
+  cardContent: React.PropTypes.object
+}
+
+export default MicroCard
diff --git a/src/components/MicroCard/MicroCardAction.jsx b/src/components/MicroCard/MicroCardAction.jsx
new file mode 100644
index 0000000..bff3a5b
--- /dev/null
+++ b/src/components/MicroCard/MicroCardAction.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const MicroCardAction = (props) => {
+  return (
+    <Icon onClick={props.onClick} className='ei microcard__arrow-right arrow_carrot-right' />
+  )
+}
+
+MicroCardAction.defaultProps = {
+
+}
+
+MicroCardAction.propTypes = {
+
+}
+
+export default MicroCardAction
diff --git a/src/components/MicroCard/MicroCardContent.jsx b/src/components/MicroCard/MicroCardContent.jsx
new file mode 100644
index 0000000..021f471
--- /dev/null
+++ b/src/components/MicroCard/MicroCardContent.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const MicroCardContent = (props) => {
+  return (
+    <Flexbox flexDirection='column' paddingBottom='10px' paddingLeft='10px' paddingTop='5px'>
+      {(props.cardContent.title) ? <Flexbox className='box__header'>{props.cardContent.title}</Flexbox> : '' }
+      <Flexbox flexGrow={2}>
+        {props.children}
+      </Flexbox>
+    </Flexbox>
+  )
+}
+
+MicroCardContent.defaultProps = {
+
+}
+
+MicroCardContent.propTypes = {
+  isFavorited: React.PropTypes.bool
+}
+
+export default MicroCardContent
diff --git a/src/components/MicroCard/MicroCardCount.jsx b/src/components/MicroCard/MicroCardCount.jsx
new file mode 100644
index 0000000..c6366a5
--- /dev/null
+++ b/src/components/MicroCard/MicroCardCount.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const MicroCardCount = (props) => {
+  return (
+    <Flexbox className='microcard__count'>{props.value}</Flexbox>
+  )
+}
+
+MicroCardCount.defaultProps = {
+  color: '#FFFFFF'
+}
+
+MicroCardCount.propTypes = {
+  color: React.PropTypes.string
+
+}
+
+export default MicroCardCount
diff --git a/src/components/MicroCard/MicroCardFavorite.jsx b/src/components/MicroCard/MicroCardFavorite.jsx
new file mode 100644
index 0000000..ff958ca
--- /dev/null
+++ b/src/components/MicroCard/MicroCardFavorite.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import FavoriteButton from '../FavoriteButton'
+
+const MicroCardFavorite = (props) => {
+  return (
+    <div className='microcard_favorite'>
+      <FavoriteButton isFavorited={props.isFavorited} />
+    </div>
+  )
+}
+
+MicroCardFavorite.defaultProps = {
+
+}
+
+MicroCardFavorite.propTypes = {
+  isFavorited: React.PropTypes.bool
+}
+
+export default MicroCardFavorite
diff --git a/src/components/MicroCard/MicroCardGutter.jsx b/src/components/MicroCard/MicroCardGutter.jsx
new file mode 100644
index 0000000..ab64d0b
--- /dev/null
+++ b/src/components/MicroCard/MicroCardGutter.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import colorPallete from '../colorPallete'
+
+const MicroCardGutter = (props) => {
+  let color = ''
+  switch(props.color) {
+    case 'critical':
+      color = colorPallete.red
+      break;
+    case 'warning':
+      color = colorPallete.yellow
+      break;
+    case 'normal':
+      color = colorPallete.blue
+      break;
+    case 'blue':
+      color = colorPallete.blue
+      break;
+    default:
+      color = props.color;
+  }
+
+  return (
+    <Flexbox className='microcard state__indicator' style={{backgroundColor: color}} width='8px' />
+  )
+}
+
+MicroCardGutter.defaultProps = {
+  color: '#FFFFFF'
+}
+
+MicroCardGutter.propTypes = {
+  color: React.PropTypes.string
+
+}
+
+export default MicroCardGutter
diff --git a/src/styles/components/large-card.css b/src/styles/components/large-card.css
new file mode 100644
index 0000000..0e5f93d
--- /dev/null
+++ b/src/styles/components/large-card.css
@@ -0,0 +1,289 @@
+@import '../variables.css';
+
+.text-large{
+  font-size: 20px !important;
+}
+.console__box__fullview {
+  background: #F0F0F1;
+  left: 0;
+  min-height: 100%;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  transition: opacity 0.4s;
+  visibility: hidden;
+  width: 100%;
+  z-index: 20;
+  left: -10000px;
+  -webkit-box-shadow: inset -3px 0px 9px -4px rgba(0,0,0,0.31);
+  -moz-box-shadow: inset -3px 0px 9px -4px rgba(0,0,0,0.31);
+  box-shadow: inset -3px 0px 9px -4px rgba(0,0,0,0.31);
+  &.is-fullview-open-true {
+    opacity: 1;
+    visibility: visible;
+    left: 0;
+  }
+}
+
+.textGray{
+  color: var(--textGray);
+}
+.textBlue{
+  color: var(--blue);
+}
+.text-small{
+  font-size: var(--small);
+}
+.star_gray{
+  color: var(--buttonBorder) !important;
+}
+.console__box__fullview__container {
+  background: white;
+  clear: fix;
+  margin: 10px 20px 10px 20px;
+  min-height: 94%;
+  position: relative;
+
+  & .close__fullview {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+
+    font-size: 50px;
+    color: #58687B;
+  }
+  & .close__fullview:hover {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    font-size: 50px;
+    color: var(--blue);
+  }
+
+  & .fullview__quickinfo {
+    @neat-span-columns 4;
+    border-right: 1px solid #dedede;
+    
+  }
+  & .fullview__history__summary {
+    @neat-span-columns 8;
+    padding: 10px 0px;
+  }
+  & .console__box__name{
+    font-size: 1.25em;
+  }
+  & .fullview__quickinfo__heading {
+    padding: 0 15px;
+  }
+  & .fullview__quickinfo__critical{
+    color: var(--warningred);
+    font-size: 30px;
+    margin-right: 1em;
+  }
+  & .fullview__quickinfo__critical_title{
+    color: var(--warningred);
+    font-size: 12px;
+    font-weight: bold;
+    
+  }
+  & .fullview__quickinfo__critical_detail{
+    color: var(--warningred);
+    font-size: 20px;
+    font-weight: bold;
+    
+  }
+  & .fullview__quickinfo__description {
+    padding: 10px 15px;
+  }
+
+  & .description__body {
+    min-height: 65px;
+    & h3, & h4 {
+      margin: 0;
+    } 
+  }
+
+  & .fullview__assets__summary {
+    padding: 0px 15px;
+  }
+
+  & .state__heading-normal {
+    background: color(var(--gray));
+    color: white;
+  }
+
+  & .state__heading-critical {
+    background: color(var(--red));
+    color: white;
+  }
+
+  & .state__heading-warning {
+    background: color(var(--yellow));
+    color: white;
+  }
+
+  & .state__body-critical {
+    color: color(var(--warningred));
+  }
+
+  & .state__body-warning {
+    color: color(var(--warningyellow));
+  }
+
+  & .state__body-normal {
+    color: color(var(--twgray));
+  }
+
+  & .history__summary__counts {
+    clear: fix;
+    margin-bottom: 15px;
+  }
+
+  & .fullview__assets__count {
+    color: color(var(--gray));
+    display: inline-block;
+    margin-right: 20px;
+    & .count__label {
+      display: block;
+      font-size: var(--xsmall);
+      
+    }
+    & .count__total {
+      color: var(--textPurple);
+      font-size: 1.8em;
+    }
+  }
+
+  & .history__operations__chart {
+    clear: fix;
+  }
+
+  & .history__summary__detail {
+    @neat-span-columns 4 8;
+    border-right: 1px solid var(--gray);
+    position: relative;
+    z-index: 10;
+        display: block;
+    font-size: 11.2px;
+    font-size: 0.7rem;
+    color: rgb(166, 168, 171);
+    text-transform: uppercase;
+    text-align: left;
+    
+  } 
+  & .header{
+    margin-bottom: 20px !important;
+  }
+  & .history__recent__activities {
+    @neat-span-columns 4 8;
+    & .recent__activity__heading {
+          display: block;
+    font-size: 11.2px;
+    font-size: 0.7rem;
+    color: rgb(166, 168, 171);
+    text-transform: uppercase;
+    text-align: left;
+    margin-bottom: 10px;
+      
+    }
+    & .recent__activity__row {
+      margin-bottom: 10px;
+      & .activity__date {
+        margin-left: 20px;
+      }
+    }
+  }
+
+
+  & .summary__count {
+    color: color(var(--gray));
+    text-align: left;
+    padding: 0 5px;
+    @neat-span-columns 2 8;
+    & .label {
+        display: block;
+        font-size: 11.2px;
+        font-size: 0.7rem;
+        color: rgb(166, 168, 171);
+        text-transform: uppercase;
+        text-align: left;
+        margin-bottom: 10px;
+    }
+    & .count {
+      text-align: left;
+      padding: 25px 0 15px 0;
+      color: var(--twgray);
+      font-size: 2.75rem;
+      font-weight: 300;
+    }
+  }
+
+  & .summary__update {
+    color: color(var(--gray));
+    text-align: left;
+    padding: 0 15px;
+    display: inline-block;
+    & .label {
+      display: block;
+      font-size: var(--xsmall);
+      margin-bottom: 5px;
+    }
+    & .count__total {
+      text-align: left;
+      padding: 15px 0;
+      color: #57B79D;
+    }
+  }
+  & .assets__count_chart_title{
+    color: var(--textPurple);
+    font-size: 11px;
+  }
+  & .assets__count_chart_right{
+    border-bottom: 1px dashed var(--textPurple);
+  }
+  & .assets__count {
+    display: inline-block;
+    color: var(--textPurple);
+    margin-right: 15px;
+    position: relative;
+    top: -5px;
+    & span {
+      margin-left: 5px;
+      display: inline-block;
+    }
+  }
+
+  & .fullview__goto__button {
+    border: 2px solid rgb(187, 189, 191);
+    bottom: 20px;
+    color: #586A7B;
+    cursor: pointer;
+    min-width: 80px;
+    padding: 10px 20px;
+    position: absolute;
+    right: 20px;
+    text-align: center;
+    &.button-warning {
+      border: 2px solid var(--yellow);
+      color: var(--yellow);
+    }
+    &.button-normal {
+      border: 2px solid var(--gray);
+      color: var(--darkgray);
+    }
+  }
+  & .fullview__goto__button:hover{
+    border: 2px solid var(--blue);
+  }
+  & .fullview__goto__button:active{
+    border: 2px solid var(--blue);
+    background-color: var(--blue);
+    color: white;
+  }
+  & .console__box__favorite {
+    cursor: pointer;
+
+    color: var(--yellow);
+    font-size: 1.3rem;
+  }
+}
diff --git a/src/styles/components/micro-card.css b/src/styles/components/micro-card.css
index 119545f..dc190ae 100644
--- a/src/styles/components/micro-card.css
+++ b/src/styles/components/micro-card.css
@@ -10,7 +10,7 @@
   color: var(--darkgray);
   width: 300px;
   font-size: var(--small);
-  margin-bottom: 10px;
+
   min-height: 86px;
   position: relative;
   & .text-uppercase {
diff --git a/stories/card.stories.js b/stories/card.stories.js
new file mode 100644
index 0000000..b1dd76f
--- /dev/null
+++ b/stories/card.stories.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import { storiesOf } from '@kadira/storybook'
+import MicroCard from '../src/components/MicroCard/MicroCard'
+import LargeCard from '../src/components/LargeCard/LargeCard'
+import colorPalette from '../src/components/colorPallete'
+
+const card = {
+  id: 0,
+  isFavorited: true,
+  title: 'test',
+}
+
+const largeCardContent = {
+  id: 1,
+}
+
+const alertIconUri = require('../src/assets/alert-icon.svg')
+
+function handleMe () {
+  console.log('Handle the click action')
+}
+
+storiesOf('Cards', module)
+  .add('Micro Card', () => (
+    <div>
+      <MicroCard cardContent={card} style={{marginRight: '10px'}} onClick={handleMe} >
+        <MicroCard.Gutter color='critical' />
+        <MicroCard.Content cardContent={card} />
+        <MicroCard.Favorite isFavorited={card.isFavorited} />
+        <MicroCard.Count value={27} />
+        <MicroCard.Action onClick={handleMe} />
+      </MicroCard>
+
+      <MicroCard cardContent={card} style={{marginRight: '10px'}} onClick={handleMe} >
+        <MicroCard.Gutter color='blue' />
+        <MicroCard.Content cardContent={card}>
+          <Flexbox marginRight='5px'>
+            <img className='microcard__stateIcon' src={alertIconUri} alt='icon' />
+          </Flexbox>
+          <Flexbox flexDirection='column' justifyContent='center' className='microcard__message'>
+            <h4>connection error</h4>
+            <h3>DATABASE</h3>
+          </Flexbox>
+        </MicroCard.Content>
+        <MicroCard.Favorite isFavorited={card.isFavorited} />
+        <MicroCard.Count value={27} />
+        <MicroCard.Action onClick={handleMe} />
+      </MicroCard>
+
+    </div>
+  ))
+  .add('Large Card', () => (
+    <div>
+      <LargeCard cardContent={largeCardContent} showCard>
+        <LargeCard.Gutter color="critical" />
+        <LargeCard.Close onClick={handleMe} />
+        <LargeCard.Action label="test" onClick={handleMe} />
+      </LargeCard>
+
+    </div>
+  ))
diff --git a/stories/microcard.stories.js b/stories/microcard.stories.js
deleted file mode 100644
index 9a18fc7..0000000
--- a/stories/microcard.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import Flexbox from 'flexbox-react'
-import { storiesOf } from '@kadira/storybook'
-import MicroCard from '../src/components/MicroCard'
-import colorPalette from '../src/components/colorPallete'
-
-const card = {
-  id: 0,
-  gutter: colorPalette.red,
-  isFavorited: true,
-  title: 'test',
-  showArrow: true
-}
-
-const cardSecond = {
-  id: 1,
-  isFavorited: false,
-  title: 'second test',
-  showArrow: true,
-  count: 28
-}
-
-const alertIconUri = require('../src/assets/alert-icon.svg')
-
-storiesOf('Micro Card', module)
-  .add('Micro Card', () => (
-    <div>
-      <MicroCard cardContent={card} style={{marginRight: '10px'}}>
-        <Flexbox flexDirection='row'>
-          <Flexbox marginRight='5px'>
-            <img className='microcard__stateIcon' src={alertIconUri} alt='icon' />
-          </Flexbox>
-          <Flexbox flexDirection='column' justifyContent='center' className='microcard__message'>
-            <h4>connection error</h4>
-            <h3>DATABASE</h3>
-          </Flexbox>
-        </Flexbox>
-      </MicroCard>
-
-      <MicroCard cardContent={cardSecond} >
-        <Flexbox flexDirection='row'>
-          <Flexbox marginRight='5px'>
-            <img className='microcard__stateIcon' src={alertIconUri} alt='icon' />
-          </Flexbox>
-          <Flexbox flexDirection='column' justifyContent='center' className='microcard__message'>
-            <h4>connection error</h4>
-            <h3>DATABASE</h3>
-          </Flexbox>
-        </Flexbox>
-      </MicroCard>
-
-    </div>
-  ))