diff --git a/assets/sass/edje/_functional-vars.scss b/assets/sass/edje/_functional-vars.scss
new file mode 100644
index 0000000..40e2543
--- /dev/null
+++ b/assets/sass/edje/_functional-vars.scss
@@ -0,0 +1,552 @@
+$_h-all: (); // store all the Functional variables
+
+
+// Z-Index
+$h-z-index: (
+  names: ( z: z-index ),
+  values: (
+    '-1': -1,
+    0: 0,
+    1: 1,
+    2: 2,
+    5: 5,
+    10: 10,
+    50: 50,
+    100: 100,
+  )
+);
+
+
+// Border width
+$h-border: (
+  names: (
+    b: border,
+    bt: border-top,
+    bl: border-left,
+    br: border-right,
+    bb: border-bottom,
+  ),
+  values: (
+    '-none': none, // deprecated
+    '0': 0,
+    '1-solid': 1px solid,
+    '1-dashed': 1px dashed,
+    '2-solid': 2px solid,
+    '2-dashed': 2px dashed,
+  )
+);
+
+
+// Border Radius
+$h-border-radius: (
+  br: ( border-radius: $g-radius ), // deprecated
+  br-circle: ( border-radius: 50% ), // deprecated
+  br-pill: ( border-radius: 999px ), // deprecated
+  
+  brad0: ( border-radius: 0 ),
+  brad: ( border-radius: $g-radius ),
+  brad-circle: ( border-radius: 50% ),
+  brad-pill: ( border-radius: 999px ),
+);
+
+
+
+// Background Image - name can't be duplicate with BG Color
+$h-background-image: (
+  names: ( bg-: background-image ),
+  values: ()
+);
+
+
+// Opacity
+$h-opacity: (
+  names: ( o: opacity ),
+  values: (
+    100: 1,
+    90: .9,
+    80: .8,
+    70: .7,
+    60: .6,
+    50: .5,
+    40: .4,
+    30: .3,
+    20: .2,
+    10: .1,
+    0: 0,
+  )
+);
+
+
+// Box Shadow
+$h-shadow: (
+  names: ( shadow: box-shadow ),
+  values: (
+    0: $shadow-z0,
+    1: $shadow-z1,
+    2: $shadow-z2,
+    3: $shadow-z3,
+    '-none': none,
+  )
+);
+
+
+// Hover Effect
+$h-hover: (
+  hover-dim: (
+    ':hover': ( opacity: .6 ),
+    ':active': ( opacity: .8 ),
+  ),
+  hover-grow: (
+    ':hover': ( '-webkit-transform': scale(1.05), transform: scale(1.05) ),
+    ':active': ( '-webkit-transform': scale(1), transform: scale(1) ),
+  ),
+  hover-u: ( ':hover': ( text-decoration: underline ) ),
+);
+
+
+// Transition
+$h-transition: (
+  transition: ( transition: $g-transition ),
+  transition-none: ( transition: none ),
+);
+
+
+// Font Size
+$h-font-size: (
+  names: ( fs-: font-size ),
+  values: (
+    h1: '%h1',
+    h2: '%h2',
+    h3: '%h3',
+    h4: '%h4',
+    h5: '%h5',
+    h6: '%h6',
+    body: 1rem,
+    s: 0.875em,
+    m: 1.125em,
+  ),
+);
+
+
+// Letter Spacing
+$h-letter-spacing: (
+  names: ( ls: letter-spacing ),
+  values: (
+    '-100': -0.1em,
+    '-50': -0.05em,
+    '-25': -0.025em,
+    0: 0,
+    25: 0.025em,
+    50: 0.05em,
+    75: 0.075em,
+    100: 0.1em,
+    150: 0.15em
+  )
+);
+
+
+// Font Family
+$h-font-family: (
+  names: ( ff-: font-family ),
+  values: (
+    body: $font-family,
+    header: $font-family-header,
+    monospace: $font-family-monospace,
+  )
+);
+
+
+// Line Height
+$h-line-height: (
+  names: ( lh: line-height ),
+  values: (
+    0: 0,
+    1: 1,
+    '-normal': normal,
+    '-body': $font-line,
+    '-header': $header-line,
+  )
+);
+
+
+
+///// PRIVATE VARS //////
+// Don't change anything below here
+
+
+// --------
+// DISPLAY
+// --------
+
+$_h-display: (
+  d-inline-block: ( display: inline-block ),
+  d-iblock: ( display: inline-block ),
+  d-block: ( display: block ),
+  d-none: ( display: none ),
+  d-flex: ( '_display': '-webkit-flex', display: flex ),
+  d-grid: ( '_display': '-ms-grid', display: grid ),
+);
+
+// Flexbox
+$_h-flex: (
+  fd-row: ( flex-direction: row ),
+  fd-column: ( flex-direction: column ),
+  fd-column-reverse: ( flex-direction: column-reverse ),
+  fd-row-reverse: ( flex-direction: row-reverse ),
+  fw-wrap: ( flex-wrap: wrap ),
+);
+
+
+// Flex Wrapper - Align Items
+$_h-align-items: (
+  names: (
+    ai-: align-items,
+  ),
+  values: (
+    start: flex-start,
+    end: flex-end,
+    center: center,
+    baseline: baseline,
+    stretch: stretch,
+  )
+);
+
+
+// Flex wrapper - Justify content
+$_h-justify-content: (
+  names: (
+    jc-: justify-content,
+  ),
+  values: (
+    start: flex-start,
+    end: flex-end,
+    center: center,
+    around: space-around,
+    between: space-between
+  )  
+);
+
+
+// Flex portion
+$_h-flex-portion: (
+  names: (
+    flex: flex,
+  ),
+  values: (
+    0: 0,
+    1: 1,
+    2: 2,
+    3: 3,
+    4: 4,
+    5: 5
+  )
+);
+
+
+// Flex order
+$_h-flex-order: (
+  names: (
+    order: order,
+  ),
+  values: (
+    1: 1,
+    2: 2,
+    3: 3,
+    4: 4,
+    5: 5,
+    '-last': 999
+  ),
+);
+
+
+// Flex Align Self
+$_h-align-self: (
+  names: (
+    as-: align-self,
+  ),
+  values: (
+    start: flex-start,
+    end: flex-end,
+    center: center,
+    baseline: baseline,
+    stretch: stretch,
+  )
+);
+
+
+// Overflow
+$_h-overflow: (
+  names: (
+    ov-: overflow,
+    ovx-: overflow-x,
+    ovy-: overflow-y,
+  ),
+  values: (
+    auto: auto,
+    hidden: hidden,
+    scroll: scroll,
+    visible: visible,
+  )
+);
+
+
+// Cursor
+$_h-cursor: (
+  names: (
+    cursor-: cursor,
+  ),
+  values: (
+    default: default,
+    pointer: pointer,
+    text: text,
+    move: move,
+    grab: grab,
+    progress: progress,
+    not-allowed: not-allowed,
+    zoom-in: zoom-in,
+    zoom-out: zoom-out,
+  )
+);
+
+// Other Display
+$_h-display-misc: (
+  v-visible: ( visibility: visible ),
+  v-hidden: ( visibility: hidden ),
+
+  select-none: (
+    '-webkit-touch-callout': none,
+    '-webkit-user-select': none,
+    '-moz-user-select': none,
+    'user-select': none
+  ),
+  
+  events-none: (
+    pointer-events: none,
+  ),
+  events-all: (
+    pointer-events: all,
+  ),
+
+  appearance-none: (
+    '-moz-appearance': none,
+    '-webkit-appearance': none,
+    'appearance': none
+  ),
+  backface-hidden: (
+    '-webkit-backface-visibility': hidden,
+    'backface-visibility': hidden
+  ),
+
+  no-select: ( // deprecated
+    '-webkit-touch-callout': none,
+    '-webkit-user-select': none,
+    '-moz-user-select': none,
+    'user-select': none
+  ),
+  no-appearance: ( // deprecated
+    '-moz-appearance': none,
+    '-webkit-appearance': none,
+    'appearance': none
+  ),
+  no-events: ( // deprecated
+    pointer-events: none,
+  ),
+);
+
+
+// -------
+// LAYOUT
+// -------
+
+
+// Position
+$_h-position: (
+  static: ( position: static ),
+  relative: ( position: relative ),
+  absolute: ( position: absolute ),
+  fixed: ( position: fixed ),
+  sticky: ( '_position': '-webkit-sticky', position: sticky ),
+
+  absolute-fill: ( position: absolute, top: 0, right: 0, left: 0, bottom: 0 ),
+);
+
+
+// Float
+$_h-float: (
+  float-left: ( float: left ),
+  float-right: ( float: right ),
+  float-none: ( float: none ),
+  clear-both: ( clear: both ),
+  clear-none: ( clear: none ),
+  // clearfix: (
+  //   '::before': ( content: " ", display: table ),
+  //   '::after': ( content: " ", display: table, clear: both )
+  // )
+);
+
+
+// ------
+// THEME
+// ------
+
+$_h-background-position: (
+  names: ( bgp-: background-position ),
+  values: (
+    cc: center center,
+    cr: center right,
+    cl: center left,
+    tc: top center,
+    tr: top right,
+    tl: top left,
+    bc: bottom center,
+    br: bottom right,
+    bl: bottom left,
+  )
+);
+
+
+// Background Misc
+$_h-background-misc: (
+  bgs-cover: ( background-size: cover ),
+  bgs-contain: ( background-size: contain ),
+  
+  bgr: ( background-repeat: repeat ),
+  bgr-no: ( background-repeat: no-repeat ),
+  bgr-x: ( background-repeat: repeat-x ),
+  bgr-y: ( background-repeat: repeat-y ),
+
+  // alias
+  bgr-repeat: ( background-repeat: repeat ),
+  bgr-no-repeat: ( background-repeat: no-repeat ),
+  bgr-repeat-x: ( background-repeat: repeat-x ),
+  bgr-repeat-y: ( background-repeat: repeat-y ),
+);
+
+
+// Theme Misc
+$_h-theme-misc: (
+);
+
+
+// -----------
+// TYPOGRAPHY
+// -----------
+
+// List style
+$_h-list-style: (
+  names: ( list-: list-style-type ),
+  values: (
+    none: none,
+    disc: disc,
+    circle: circle,
+    square: square,
+  
+    decimal: decimal,
+    decimal0: decimal-leading-zero,
+    alpha: lower-alpha,
+    roman: lower-roman,
+    upper-alpha: upper-alpha,
+    upper-roman: upper-roman,
+  )
+);
+
+
+// Font Misc
+$_h-font-misc: (
+  nowrap: ( white-space: nowrap ),
+  
+  tt-uppercase: ( text-transform: uppercase ),
+  tt-lowercase: ( text-transform: lowercase ),
+  tt-capitalize: ( text-transform: capitalize ),
+  tt-none: ( text-transform: none ),
+
+  ta-center: ( text-align: center ),
+  ta-right: ( text-align: right ),
+  ta-left: ( text-align: left ),
+  ta-justify: ( text-align: justify ),
+);
+
+
+// Font Weight
+$_h-font-weight: (
+  names: ( fw: font-weight ),
+  values: (
+    300: 300,
+    400: 400,
+    600: 600,
+    700: 700,
+    900: 900,
+    '-body': $font-weight,
+    '-header': $header-weight,
+  )
+);
+
+
+// Font Styles
+$_h-font-style: (
+  b: ( font-weight: 700 ),
+  i: ( font-style: italic ),
+  u: ( text-decoration: underline ),
+  td-u: ( text-decoration: underline ),
+  strike: ( text-decoration: line-through ),
+  td-strike: ( text-decoration: line-through ),
+  td-none: ( text-decoration: none ),
+);
+
+
+// Vertical Align
+$_h-vertical-align: (
+  names: ( va-: vertical-align ),
+  values: (    
+    baseline: baseline,
+    top: top,
+    middle: middle,
+    bottom: bottom,
+    sub: sub,
+    super: super,
+    text-top: text-top
+  )
+);
+
+
+/////
+
+$_h-all: map-merge( $_h-all, _merge(
+  $_h-display,
+  $_h-flex,
+  $_h-align-items,
+  $_h-justify-content,
+  $_h-flex-order,
+  $_h-flex-portion,
+  $_h-align-self,
+  $_h-overflow,
+  $_h-cursor,
+  $_h-display-misc,
+
+  $_h-position,
+  $h-z-index,
+  $_h-float,
+
+  $h-border,
+  $h-border-radius,
+
+  $h-background-image,
+  $_h-background-position,
+  $_h-background-misc,
+  $h-shadow,
+  $h-opacity,
+  $_h-theme-misc,
+  $h-transition,
+
+  $h-font-size,
+  $h-letter-spacing,
+  $h-font-family,
+  $h-line-height,
+  $_h-list-style,
+  $_h-font-misc,
+  $_h-font-weight,
+  $_h-font-style,
+  $_h-vertical-align,
+
+  $h-custom,
+) );
\ No newline at end of file
diff --git a/assets/sass/edje/_output.scss b/assets/sass/edje/_output.scss
new file mode 100644
index 0000000..49f6c78
--- /dev/null
+++ b/assets/sass/edje/_output.scss
@@ -0,0 +1,574 @@
+@if $output-framework {
+  /* EDJE Framework 3.0 - hrsetyono.github.io/edje */
+}
+
+// ------------
+// NORMALIZER
+// ------------
+// Based on git.io/normalize v3.0.3
+
+@if $output-framework and $include-normalize {
+  *,
+  *:before,
+  *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  
+  html {
+    font-family: sans-serif;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+  }
+  
+  // Basic reset margin and padding
+  *, body {
+    margin: 0;
+    padding: 0;
+  }
+  
+  // Correct `block` display
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  main,
+  nav,
+  section,
+  picture,
+  summary {
+    display: block;
+  }
+  
+  
+  // Correct `inline-block` display
+  audio,
+  canvas,
+  progress,
+  video {
+    display: inline-block;
+  }
+  audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+  
+  // Webkit sibling selector fix
+  body { -webkit-animation: bugfix infinite 1s; }
+  @-webkit-keyframes bugfix {
+    from { padding: 0; }
+    to { padding: 0; }
+  }
+  
+  // Reset anchor styling
+  a {
+    cursor: pointer;
+    text-decoration: none;
+    background-color: transparent;
+  
+    // &:focus { outline: none; }
+    &:active, &:hover { outline: 0; }
+  }
+  
+  // Basic typography
+  b, strong { font-weight: bold; }
+  em { font-style: italic; }
+  h1, h2, h3, h4, h5, h6 { margin: 0; }
+  
+  // Media
+  img {
+    border: 0;
+    display: inline-block;
+    vertical-align: middle;
+    -ms-interpolation-mode: bicubic;
+  }
+  svg:not(:root) { overflow: hidden; }
+  figure { margin: 0; }
+  
+  // A better looking default horizontal rule
+  hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    display: block;
+    height: 1px;
+    margin: 1em 0;
+    padding: 0;
+    border: 0;
+    border-top: 1px solid #ccc;
+  }
+  
+  blockquote cite {
+    display: block;
+    font-style: italic;
+  }
+  
+  // Code block
+  pre { overflow: auto; }
+  code, kbd, pre, samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+  
+  // Embedded content
+  img,
+  object,
+  embed {
+    max-width: 100%;
+    height: auto;
+  
+    #map_canvas &,
+    .map_canvas & {
+      max-width: none !important;
+    }
+  }
+  object, embed { height: 100%; }
+  
+  // Address styling
+  [hidden], template { display: none; }
+  address, cite { font-style: normal; }
+  abbr[title] { border-bottom: 1px dotted; }
+  dfn { font-style: italic; }
+  mark { background: #ff0; color: #000; }
+  
+  // Misc inline elements
+  q { quotes: "\201C" "\201D" "\2018" "\2019"; }
+  small { font-size: 80%; }
+  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+  sup { top: -0.5em; }
+  sub { bottom: -0.25em; }
+  
+  // Form styling -----------
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    outline: none;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+  }
+  
+  button, input[type="submit"] {
+    overflow: visible;
+    cursor: pointer;
+    outline: none;
+    -webkit-backface-visibility: hidden;
+  
+    &:focus { outline: none; }
+  }
+  
+  button, select { text-transform: none; }
+  optgroup { font-weight: bold; }
+  button, input, label { line-height: normal; }
+  label { display: block; }
+  button, input, select, textarea {
+    font-family: inherit;
+    font-size: 100%;
+    margin: 0;
+  }
+  
+  button,
+  html input[type="button"],
+  input[type="reset"],
+  input[type="submit"] {
+    -webkit-appearance: button;
+    cursor: pointer;
+  }
+  
+  button[disabled],
+  html input[disabled] { cursor: default; }
+  
+  button::-moz-focus-inner,
+  input::-moz-focus-inner { border: 0; padding: 0; }
+  
+  input { line-height: normal; }
+  
+  input[type="checkbox"],
+  input[type="radio"] { box-sizing: border-box; padding: 0; }
+  
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  input[type="search"] {
+    -webkit-appearance: textfield;
+  
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+  }
+  
+  // Disable Chrome's datepicker
+  input::-webkit-calendar-picker-indicator{ display: none; }
+  input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; }
+  
+  textarea {
+    overflow: auto;
+    vertical-align: top;
+    resize: vertical; // only vertical resizing
+    height: auto;
+    min-height: 50px;
+  }
+  
+  legend { border: 0; padding: 0; }
+  fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+  
+  // Table
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  td, th { padding: 0; }
+  
+  .hide { display: none !important; visibility: hidden !important; }
+  
+  .flex-iframe {
+    overflow: hidden; position: relative;
+    height: 0; padding-bottom: 67.5%; padding-top: 1.38889rem;
+  
+    iframe,
+    object,
+    embed,
+    video {
+      position: absolute; top: 0; left: 0;
+      height: 100%; width: 100%; }
+  }
+  
+} // include-normalize
+
+
+// ------------
+// GRID SYSTEM
+// ------------
+
+@mixin grid(
+  $columns: false,
+  $gap: false,
+  $rim: false,
+  $width: false,
+  $collapse: false ) {
+
+  @if $columns {
+    grid-template-columns: repeat( $columns, 1fr );
+  }
+
+  @if $gap {
+    grid-column-gap: $gap;
+  }
+
+  @if $width and $rim {
+    max-width: $width + ($rim * 2);
+    padding: 0 $rim;
+  }
+  @else if $width {
+    max-width: $width + ($grid-rim * 2);
+  }
+  @else if $rim {
+    padding-right: $rim;
+    padding-left: $rim;
+  }
+
+  @if $collapse {
+    grid-column-gap: 0;
+  }
+}
+
+@mixin column(
+  $span: false,
+  $span-s: false,
+  $span-xs: false,
+) {
+  @if $span {
+    grid-column: span #{ $span }; 
+  }
+
+  @if $span-s {
+    @media ($below-s) {
+      grid-column: span #{ $span_s };
+    }
+  }
+
+  @if $span-xs {
+    @media ($below-xs) {
+      grid-column: span #{ $span_xs };
+    }
+  }
+}
+
+
+/////
+
+@if $output-framework and $include-grid {
+
+// Grid wrapper
+h-grid {
+  @include h( d-grid );
+  @include grid( $grid-columns );
+  @include grid( $gap: $grid-gap );
+  @include grid( $width: $grid-max-width );
+  @include grid( $rim: $grid-rim );
+  margin: 0 auto;
+  width: 100%;
+
+  &.collapse {
+    @include grid( $collapse: true );
+  }
+
+  h-grid {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// Column
+@for $i from 1 through $grid-columns {
+  .large-#{$i} {
+    @include column( $i );
+  }
+}
+
+// Small column
+@media ($below-s) {
+  // reset
+  [class*="large-"] {
+    @include column( $grid-columns );
+  }
+
+  @for $i from 1 through $grid-columns {
+    .small-#{$i} {
+      @include column( $i );
+    }
+  }
+}
+
+
+} // include-grid
+
+
+
+// -------------
+// TILE SYSTEM
+// -------------
+
+@mixin tile(
+  $per_row: false,
+  $per_row_s: false,
+  $per_row_xs: false,
+  $gap: false,
+  $collapse: false ) {
+
+  @if $per_row {
+    grid-template-columns: repeat( $per_row, 1fr );
+
+    @if $per_row_s {
+      @media ($below-s) {
+        grid-template-columns: repeat( $per_row_s, 1fr );
+      }
+    }
+
+    @if $per_row_xs {
+      @media ($below-xs) {
+        grid-template-columns: repeat( $per_row_xs, 1fr );
+      }
+    }
+  }
+
+  @if $gap {
+    grid-column-gap: $gap;
+    grid-row-gap: $gap;
+  }
+
+  @if $collapse {
+    grid-column-gap: 0;
+  }
+
+}
+
+
+@if $output-framework and $include-tile {
+
+h-tile {
+  @include h( d-grid );
+  @include tile( $gap: $tile-gap );
+
+  &.collapse {
+    @include tile( $collapse: true );
+  }
+
+  > * {
+    grid-column: span 1;
+  }
+}
+
+@for $i from 1 through $tile-max {
+  .tile-#{$i} {
+    @include tile( $i );
+  }
+}
+
+@media ($below-s) {
+  // reset
+  [class*="tile-"] { @include tile(1); }
+
+  @for $i from 1 through $tile-max {
+    .small-tile-#{$i} {
+      @include tile( $i );
+    }
+  }
+}
+
+} // include-tile
+
+
+// ------------
+// TYPOGRAPHY
+// ------------
+
+%h1 { @include font-sizes( $h1 ); }
+%h2 { @include font-sizes( $h2 ); }
+%h3 { @include font-sizes( $h3 ); }
+%h4 { @include font-sizes( $h4 ); }
+%h5 { @include font-sizes( $h5 ); }
+%h6 { @include font-sizes( $h6 ); }
+
+
+@if $output-framework and $include-typography {
+
+body {
+  position: relative;
+  background: $body-background;
+
+  font-size: $font-size;
+  font-family: $font-family;
+  font-weight: $font-weight;
+  line-height: $font-line;
+  color: $font-color;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+a {
+  color: $color-link;
+  transition: $g-transition;
+
+  &:hover { color: $color-link-hover; }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-header;
+  font-weight: $header-weight;
+  line-height: $header-line;
+  color: $header-color;
+
+  letter-spacing: $header-spacing;
+  text-transform: $header-transform;
+}
+
+
+h1 { @extend %h1; }
+h2 { @extend %h2; }
+h3 { @extend %h3; }
+h4 { @extend %h4; }
+h5 { @extend %h5; }
+h6 { @extend %h6; }
+
+// ----- LIST -----
+
+ul {
+  list-style-type: $ul-parent;
+
+  ul { list-style-type: $ul-child; }
+}
+
+ol {
+  list-style-type: $ol-parent;
+
+  ol { list-style-type: $ol-child; }
+}
+
+
+// Create font-face declaration
+@each $name, $files in $font-faces {
+  @each $file, $weight, $style in $files {
+    @font-face {
+      src: font-url($file);
+      font-family: $name;
+      font-weight: $weight;
+      font-style: $style;
+    }
+  }
+}
+
+
+} // include-typography
+
+
+
+// -----------
+// VISIBILITY
+// -----------
+
+@if $output-framework and $include-visibility {
+
+  @media ($above-s) {
+    .hide-for-l,
+    .show-for-s {
+      display: none !important;
+    }
+  }
+  
+  @media ($below-s) {
+    .hide-for-s,
+    .show-for-l {
+      display: none !important;
+    }
+  }
+  
+  @media ($above-xs) {
+    .show-for-xs {
+      display: none !important;
+    }
+  }
+  
+  @media ($below-xs) {
+    .hide-for-xs {
+      display: none !important;
+    }
+  }
+  
+  } // include-visibility
+
+
+// ------------
+// ROOT COLORS
+// ------------
+
+@if $output-framework and $include-colors {
+  :root {
+    @each $name, $value in $h-palette {
+      --#{ $name }: #{ $value };
+      --#{ $name }RGB: #{ round(red($value)) }, #{ round(green($value)) }, #{ round(blue($value)) }; 
+    }
+  }
+}
+
+// Separator
+
+@if $output-framework {
+  /* ----- */
+}
\ No newline at end of file
diff --git a/assets/sass/edje/_utility-h.scss b/assets/sass/edje/_utility-h.scss
new file mode 100644
index 0000000..0b57b20
--- /dev/null
+++ b/assets/sass/edje/_utility-h.scss
@@ -0,0 +1,275 @@
+@mixin h( $bits ) {
+  @each $b in $bits {
+    $prop-key: getPropKey( $b );
+    $value-raw: str-slice( $b, str-length( $prop-key ) + 1 );
+
+    $prop: false;
+    $value: false;
+
+    // If color
+    @if map-has-key( $h-props-color, $prop-key ) {
+      $prop: map-get( $h-props-color, $prop-key );
+      $value: getColorValue( $value-raw );
+    }
+    // If measurement
+    @else if map-has-key( $h-props-measurement, $prop-key ) {
+      $prop: map-get( $h-props-measurement, $prop-key );
+      $value: getMeasurementValue( $value-raw );
+    }
+    // Else, it's static prop
+    @else {
+      $prop: map-get( $_h-all, $b );
+
+      @if $prop == null {
+        @warn "The bit '#{ $b }' doesn't exist";
+      }
+    }
+
+    // If static prop
+    @if type-of( $prop ) == map {
+      @each $p, $v in $prop {
+        // if first char is %, extend it
+        @if type-of( $v ) == string and str-index( $v, '%') == 1 {
+          @extend #{ $v };
+        }
+        @else {
+          #{ $p } : $v;
+        }
+      }
+    }
+    // if dynamic multiple prop
+    @else if type-of( $prop ) == list {
+      @each $p in $prop {
+        #{ $p } : $value;
+      }
+    }
+    // if dynamic single prop
+    @else {
+      #{ $prop } : $value;
+    }
+  }
+}
+
+
+
+// ---------------
+// DYNAMIC STYLE
+// ---------------
+
+// Property that can use color from $h-palette and allow opacity prefix
+// Example: c-red >>> color: $red
+//          bg-main_10 >>> background-color: rgba($main, .10)
+$h-props-color: (
+  bg: background-color,
+  bc: border-color,
+  c: color
+);
+
+// Property that can accept any number and allow unit prefix
+// Example: p1_5 >>> padding: 1.5rem
+//          h50p >>> height: 50%
+//          top70px >>> top: 70px
+$h-props-measurement: (
+  top: top,
+  right: right,
+  bottom: bottom,
+  left: left,
+
+  p: padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+  pv: ( padding-top, padding-bottom ),
+  ph: ( padding-right, padding-left ),
+
+  m: margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  mv: ( margin-top, margin-bottom ),
+  mh: ( margin-right, margin-left ),
+
+  h: height,
+  minh: min-height,
+  maxh: max-height,
+  w: width,
+  minw: min-width,
+  maxw: max-width,
+
+  bw: border-width,
+  btw: border-top-width,
+  brw: border-right-width,
+  bbw: border-bottom-width,
+  blw: border-left-width,
+);
+
+
+// Get property name, indicated by the letters before number or dash
+//
+@function getPropKey( $bit ) {
+  $separator: ( '-': '-', '0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
+  $prop-key: '';
+
+  @for $i from 1 through str-length( $bit ) {
+    $char: str-slice( $bit, $i, $i );
+
+    @if map-has-key( $separator, $char ) {
+      @return $prop-key;
+    } @else {
+      $prop-key: $prop-key + $char;
+    }
+  }
+
+  @return $prop-key;
+}
+
+
+// Get color value and its transparency (if any)
+//
+@function getColorValue( $raw ) {
+  $raw: str-slice( $raw, 2 ); // remove the initial dash
+
+  $alpha-index: str-index( $raw, '_' );
+
+  // if has transparency
+  @if $alpha-index {
+    $alpha: '0.' + str-slice( $raw, $alpha-index + 1 );
+    $color-key: str-slice( $raw, 1, $alpha-index - 1 );
+    @return rgba( var(--#{ $color-key }RGB), unquote($alpha) );
+  }
+
+  // if not in map, return as is
+  @if not map-has-key( $h-palette, $raw ) {
+    @return $raw;
+  }
+
+  // default
+  @return var(--#{ $raw });
+}
+
+
+
+// Get measurement value with its unit (use 'rem' by default)
+//
+@function getMeasurementValue( $raw ) {
+  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9 );
+
+  // if already number
+  @if type-of( $raw ) == 'number' { @return $raw; }
+
+  $len: str-length( $raw );
+  $first-char: str-slice( $raw, 1, 1 );
+  $second-char: str-slice( $raw, 2, 2 );
+  $last-char: str-slice( $raw, $len, $len );
+
+  // If found underscore, replace it with dot.
+  $number: str-replace( $raw, '_' , '.' );
+
+  // If last char is "p", change to %
+  @if $last-char == 'p' {
+    @return str-replace( $number, 'p', '%');
+  }
+  // If first char is '-' but second is not number, it's a string value
+  @else if $first-char == '-' AND not map-has-key( $numbers, $second-char) {
+    @return str-slice( $raw, 2 );
+  }
+  // If last char is not number, return as is
+  @else if not map-has-key( $numbers, $last-char ) {
+    @return $number;
+  }
+
+  // if zero or $add-rem is false, no need to add unit
+  @if ($len == 1 AND $first-char == '0') {
+    @return $number;
+  }
+
+  @return $number + rem;
+}
+
+
+// --------------
+// STATIC STYLE 
+//---------------
+
+// Merge multiple Functional maps into one
+@function _merge( $maps... ) {
+  $collection: ();
+
+  @each $map in $maps {
+    @if map-get( $map, names ) {
+      $collection: map-merge( $collection, _format-classes( $map ) );
+    } @else {
+      $collection: map-merge( $collection, $map );
+    }
+  }
+
+  @return $collection;
+}
+
+
+// Format classes mapping by pairing each name to the values
+//
+// @param $raw (map) - Containing two items: names and values. Each will be paired against each other to create classes
+@function _format-classes( $raw ) {
+  $classes: ();
+
+  // loop the name
+  @each $name, $props in map-get( $raw, 'names' ) {
+    @each $postfix, $value in map-get( $raw, 'values' ) {
+
+      $_name: #{ $name }#{ $postfix }; // format the name like "pt05"
+      $new-item: ( $_name: _format-values( $props, $value ) );
+
+      // add the new item
+      $classes: map-merge( $classes, $new-item );
+    }
+  }
+
+  @return $classes;
+}
+
+
+// Format the values of an Item
+//   Expected format: ( padding-top: 0.5em )
+// 
+// If $styles is a list, pair each with the value
+//   Example: ( padding-top: 0.5em, padding-bottom: 0.5em )
+@function _format-values( $props, $value ) {
+  $values: ();
+
+  // If has multiple styles, combine them
+  @if type-of( $props ) == 'list' {
+
+    // combine the multiple styles
+    @each $p in $props {
+      $values: map-merge( $values, ( #{ $p }: #{ $value } ) );
+    }
+  }
+  // If single style, just format it normally
+  @else {
+    $values: ( #{ $props }: #{ $value } );
+  }
+
+  @return $values;
+}
+
+
+
+
+// --------
+// SASS HELPER
+// --------
+
+// Replace part of string
+//
+@function str-replace( $string, $search, $replace: '' ) {
+  $index: str-index( $string, $search );
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}
\ No newline at end of file
diff --git a/assets/sass/edje/_utility.scss b/assets/sass/edje/_utility.scss
new file mode 100644
index 0000000..8fc9418
--- /dev/null
+++ b/assets/sass/edje/_utility.scss
@@ -0,0 +1,250 @@
+// -------------
+// Media Query
+// -------------
+
+$_media-sizes: (
+  xs: $size-xs,
+  s: $size-s,
+  m: $size-m,
+  l: $size-l,
+);
+
+// Map a keyword to the pixel size
+// @return the pixel size
+@function _getSize( $name ) {
+  $_size: 0;
+
+  // if number, return it as it is
+  @if type-of($name) == number {
+    $_size: $name;
+  }
+  // if keyword, get from the map
+  @else {
+    $_size: map-get($_media-sizes, $name);
+  }
+
+  @return $_size;
+}
+
+// Media query for below or equal the size
+@function below( $size ) {
+  $_size: _getSize($size);
+  @return "max-width: #{$_size}";
+}
+
+// Media query for above the size
+@function above( $size ) {
+  $size: _getSize($size) + 1px;
+  @return "min-width: #{$size}";
+}
+
+
+// -------------
+// EM CONVERTER
+// -------------
+
+// Convert PX value to EM
+//
+// Usage:
+//   font-size: em( 20px );
+//   padding: em( 8px 16px 12px );
+// Result:
+//   font-size: 1.25em;
+//   padding: em( 0.5em 1em 0.75em );
+
+@function em($values, $base: $font-size) {
+  // if only contain single number, convert it directly
+  @if type-of($values) == number {
+    @return _convertToEm($values, $base);
+  }
+
+  // if contains multiple values, loop through it
+  $emValues   : ();
+  @each $val in $values {
+    $emValues: append($emValues, _convertToEm($val, $base) );
+  }
+  @return join((), $emValues, space );
+}
+
+// Strips unit and return plain number
+@function _stripUnit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+// Convert the number to EM
+@function _convertToEm($value, $base: $font-size) {
+  // if not number, return it as is
+  @if type-of($value) != number { @return $value; }
+
+  $value: _stripUnit($value) / _stripUnit($base) * 1em;
+  // turn 0em into 0
+  @if ($value == 0em) {
+    $value: 0;
+  }
+  @return $value;
+}
+
+
+
+// Create font sizes in various media query
+//
+// Usage:
+//   @include font-sizes( ( base:20px, s: 18px ) );
+// Result:
+//   font-size: 20px;
+//   @media (max-width:767px) { font-size: 18px; }
+
+@mixin font-sizes( $sizes, $context: $font-size ) {
+  @each $media, $s in $sizes {
+    $size: em( $s, $context );
+
+    @if $media == base {
+      font-size: $size;
+    }
+    @else {
+      @media ( below($media) ) { font-size: $size; }
+    }
+  }
+}
+
+
+// -----------
+// SVG ENCODE
+// -----------
+
+// Encode SVG data to the format that's compatible with CSS
+//
+// Usage:
+//   background-image: svg-encode('<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>');
+// Result:
+//   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E% ... %3C/svg%3E");
+
+@function svg-encode( $svg ) {
+  $encoded: '';
+  $slice: 2000;
+  $index: 0;
+  $loops: ceil(str-length($svg) / $slice);
+
+  @for $i from 1 through $loops {
+    $chunk: str-slice($svg, $index, $index + $slice - 1);
+    $chunk: _str-replace($chunk, '"', "'");
+    $chunk: _str-replace($chunk, '<', '%3C');
+    $chunk: _str-replace($chunk, '>', '%3E');
+    $chunk: _str-replace($chunk, '&', '%26');
+    $chunk: _str-replace($chunk, '#', '%23');
+    $encoded: #{$encoded}#{$chunk};
+    $index: $index + $slice;
+  }
+
+  @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
+}
+
+/// Replace `$search` with `$replace` in `$string`
+@function _str-replace( $string, $search, $replace: '' ) {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + _str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+
+// -------------
+// TRIANGLE
+// -------------
+
+// Create triangle shape using border. Mostly applied in ::before / ::after pseudoselecter.
+//
+// Usage:
+//   @include triangle( n, #333, 20px, 12px );
+@mixin triangle(
+  $direction,
+  $color,
+  $width,
+  $height: false) {
+
+  // If height is not specified, make the triangle equalateral
+  @if not $height {
+    @if $direction in (n, e, s, w) {
+      $height : ($width / 2) * 1.732;
+    }
+    @else if $direction in (ne, se, sw, nw) {
+      $height : $width;
+    }
+  }
+
+  width: 0;
+  height: 0;
+  font-size: 0;
+  line-height: 0%;
+  border-style: solid;
+  border-color: transparent;
+
+
+  @if $direction == n {
+    border-width: 0 $width/2 $height $width/2;
+    border-bottom-color: $color;
+  }
+  @else if $direction == e {
+    border-width: $width/2 0 $width/2 $height;
+    border-left-color : $color;
+  }
+  @else if $direction == s {
+    border-width: $height $width/2 0 $width/2;
+    border-top-color: $color;
+  }
+  @else if $direction == w {
+    border-width: $width/2 $height $width/2 0;
+    border-right-color: $color;
+  }
+
+  @else if $direction == ne {
+    border-width: 0 $width $height 0;
+    border-right-color: $color;
+  }
+  @else if $direction == se {
+    border-width: 0 0 $height $width;
+    border-bottom-color: $color;
+  }
+  @else if $direction == sw {
+    border-width: $height 0 0 $width;
+    border-left-color: $color;
+  }
+  @else if $direction == nw {
+    border-width: $height $width 0 0;
+    border-top-color: $color;
+  }
+}
+
+// ------------
+// PLACEHOLDER
+// ------------
+
+@mixin placeholder($base: false) {
+  @if $base {
+    ::-webkit-input-placeholder { @content; }
+    ::-moz-placeholder { @content; }
+    :-ms-input-placeholder { @content; }
+    :-moz-placeholder { @content; }
+  } @else {
+    &::-webkit-input-placeholder { @content; }
+    &::-moz-placeholder { @content; }
+    &:-ms-input-placeholder { @content; }
+    &:-moz-placeholder { @content; }
+  }
+}
+
+// -----------
+// ASSET URL
+// -----------
+
+@function font-url( $file ) {
+  @return url( $image_url + $file);
+}
+
+@function image-url( $file ) {
+  @return url( $font_url + $file);
+}
+
diff --git a/style.css b/style.css
index 6d84366..e4ae78c 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,7 @@ Theme Name: Edje Basic Theme
 Author: Pixel Studio
 Author URI: https://pixelstudio.id
 Description: Base theme for EDJE framework - Built using Timber and ACF
-Version: 5.0.0
+Version: 5.0.1
 Tags: private theme, timber, edje, acf, woocomemrce, custom-menu, editor-style
 */