diff --git a/composer.json b/composer.json
index 8f6ab6c..da11e4f 100644
--- a/composer.json
+++ b/composer.json
@@ -8,7 +8,9 @@
     "wpackagist-plugin/contact-form-7": "~5.0.3",
     "wpackagist-plugin/flamingo": "~1.9",
     "wpackagist-plugin/really-simple-captcha": "~2.0.1",
-    "wpackagist-plugin/enhanced-media-library": "~2.6.4"
+    "wpackagist-plugin/enhanced-media-library": "~2.6.4",
+    "wpackagist-plugin/menu-item-custom-fields": "~1.0.0",
+    "wpackagist-plugin/wp-rest-api-v2-menus": "~0.3.1"
   },
   "repositories": [
     {
diff --git a/composer.lock b/composer.lock
index 187f4e0..3cbe581 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "8f1b0c2c233bc65a8beacc1f7117be9d",
+    "content-hash": "1fc59596dfbe4e5a31e63ea12335e532",
     "packages": [
         {
             "name": "composer/installers",
@@ -186,6 +186,26 @@
             "type": "wordpress-plugin",
             "homepage": "https://wordpress.org/plugins/flamingo/"
         },
+        {
+            "name": "wpackagist-plugin/menu-item-custom-fields",
+            "version": "1.0.0",
+            "source": {
+                "type": "svn",
+                "url": "https://plugins.svn.wordpress.org/menu-item-custom-fields/",
+                "reference": "tags/1.0.0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://downloads.wordpress.org/plugin/menu-item-custom-fields.1.0.0.zip",
+                "reference": null,
+                "shasum": null
+            },
+            "require": {
+                "composer/installers": "~1.0"
+            },
+            "type": "wordpress-plugin",
+            "homepage": "https://wordpress.org/plugins/menu-item-custom-fields/"
+        },
         {
             "name": "wpackagist-plugin/really-simple-captcha",
             "version": "2.0.1",
@@ -265,6 +285,26 @@
             },
             "type": "wordpress-plugin",
             "homepage": "https://wordpress.org/plugins/toggle-wpautop/"
+        },
+        {
+            "name": "wpackagist-plugin/wp-rest-api-v2-menus",
+            "version": "0.3.1",
+            "source": {
+                "type": "svn",
+                "url": "https://plugins.svn.wordpress.org/wp-rest-api-v2-menus/",
+                "reference": "tags/0.3.1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://downloads.wordpress.org/plugin/wp-rest-api-v2-menus.0.3.1.zip",
+                "reference": null,
+                "shasum": null
+            },
+            "require": {
+                "composer/installers": "~1.0"
+            },
+            "type": "wordpress-plugin",
+            "homepage": "https://wordpress.org/plugins/wp-rest-api-v2-menus/"
         }
     ],
     "packages-dev": [],
diff --git a/htdocs/wp-content/themes/lawcarta/footer.php b/htdocs/wp-content/themes/lawcarta/footer.php
index 37d497d..071eca7 100644
--- a/htdocs/wp-content/themes/lawcarta/footer.php
+++ b/htdocs/wp-content/themes/lawcarta/footer.php
@@ -1,3 +1,8 @@
+<?php
+
+require_once 'inc/walker-nav-menu.php';
+
+?>
     </div><!-- .content -->
 
     <footer>
@@ -10,18 +15,25 @@
                             'container' => 'div',
                             'container_class' => 'footer-menu',
                             'depth' => 1,
+                            'walker' => new LawCarta_Walker_Nav_Menu(),
                             'theme_location' => 'bottom',
                         ]);
                     }
-                    if (has_nav_menu('social')):
+                    if (has_nav_menu('social')) {
+                        wp_nav_menu([
+                            'menu' => 'social',
+                            'menu_class' => 'nav',
+                            'container' => 'div',
+                            'container_class' => 'footer-social',
+                            'depth' => 1,
+                            'walker' => new LawCarta_Walker_Nav_Menu(),
+                            'hide_title' => true,
+                            'item_wrap' => '',
+                            'items_wrap' => '%3$s',
+                            'theme_location' => 'social',
+                        ]);
+                    }
                 ?>
-                    <div class="footer-social">
-                        <!--
-                        <a href="#" class="twitter"><span class="icon-twitter"></span></a>
-                        <a href="#" class="facebook"><span class="icon-facebook"></span></a>
-                        -->
-                    </div>
-                <?php endif; ?>
             </div>
             <div class="footer-copyright">&copy; <?= get_option('lawcarta_company'); ?>. All rights reserved.</div>
         </div>
diff --git a/htdocs/wp-content/themes/lawcarta/functions.php b/htdocs/wp-content/themes/lawcarta/functions.php
index ee70bba..bd7baa6 100644
--- a/htdocs/wp-content/themes/lawcarta/functions.php
+++ b/htdocs/wp-content/themes/lawcarta/functions.php
@@ -1,4 +1,6 @@
 <?php
+require 'inc/menu-item-custom-fields.php';
+
 /**
  * Setup WordPress
  */
@@ -73,24 +75,20 @@ add_action('wp_enqueue_scripts', function () {
 /**
  * Filter Menu Item Class
  */
-add_filter('nav_menu_item_args', function ($args, $item) {
-    $classes = get_post_meta($item->ID, '_menu_item_classes', true);
-    if (is_array($classes)) {
-        $classes = array_filter($classes);
-        if (count($classes) > 0) {
-            $args->link_before = '<i class="' . implode(' ', $classes) . '"></i> ';
-        }
-    }
-    return $args;
-}, 10, 2);
+add_filter('wp_setup_nav_menu_item', function ($menu_item)
+{
+    $meta = LawCarta_Menu_Item_Custom_Fields::getMeta($menu_item);
+    $menu_item->meta = $meta;
 
-add_filter('nav_menu_css_class', function ($classes, $item, $args) {
-    $classes = [];
-    if ($args->theme_location === 'bottom' && in_array('current-menu-item', $classes)) {
-        $classes[] = 'active';
+    $menu_item->meta['type'] = $menu_item->object;
+    if ($menu_item->object == 'page') {
+        $menu_item->meta['slug'] = get_post_field( 'post_name', $menu_item->object_id );
+    } else if ($menu_item->object == 'media_category') {
+        $menu_item->meta['slug'] = get_term_field( 'slug', $menu_item->object_id );
     }
-    return $classes;
-}, 10, 3);
+
+    return $menu_item;
+});
 
 /**
  * Setup Admin Portal
diff --git a/htdocs/wp-content/themes/lawcarta/header.php b/htdocs/wp-content/themes/lawcarta/header.php
index f19bba8..ed32c02 100644
--- a/htdocs/wp-content/themes/lawcarta/header.php
+++ b/htdocs/wp-content/themes/lawcarta/header.php
@@ -1,3 +1,8 @@
+<?php
+
+require_once 'inc/walker-nav-menu.php';
+
+?>
 <!DOCTYPE html>
 <html <?php language_attributes(); ?>>
 <head>
@@ -31,6 +36,8 @@
                         'container' => 'div',
                         'container_class' => 'header-menu',
                         'depth' => 1,
+                        'walker' => new LawCarta_Walker_Nav_Menu(),
+                        'icon_wrap' => 'i',
                         'theme_location' => 'top',
                     ]);
                 }
diff --git a/htdocs/wp-content/themes/lawcarta/inc/menu-item-custom-fields.php b/htdocs/wp-content/themes/lawcarta/inc/menu-item-custom-fields.php
new file mode 100644
index 0000000..47f2e2b
--- /dev/null
+++ b/htdocs/wp-content/themes/lawcarta/inc/menu-item-custom-fields.php
@@ -0,0 +1,159 @@
+<?php
+/**
+ * Menu item custom fields example
+ *
+ * Copy this file into your wp-content/mu-plugins directory.
+ *
+ * @package Menu_Item_Custom_Fields_Example
+ * @version 0.2.0
+ * @author Dzikri Aziz <kvcrvt@gmail.com>
+ *
+ *
+ * Plugin name: Menu Item Custom Fields Example
+ * Plugin URI: https://github.com/kucrut/wp-menu-item-custom-fields
+ * Description: Example usage of Menu Item Custom Fields in plugins/themes
+ * Version: 0.2.0
+ * Author: Dzikri Aziz
+ * Author URI: http://kucrut.org/
+ * License: GPL v2
+ * Text Domain: menu-item-custom-fields-example
+ */
+
+
+/**
+ * Sample menu item metadata
+ *
+ * This class demonstrate the usage of Menu Item Custom Fields in plugins/themes.
+ *
+ * @since 0.1.0
+ */
+class LawCarta_Menu_Item_Custom_Fields {
+
+	/**
+	 * Holds our custom fields
+	 *
+	 * @var    array
+	 * @access protected
+	 * @since  Menu_Item_Custom_Fields_Example 0.2.0
+	 */
+	protected static $fields = array();
+
+    protected static $templates = [
+        'text' => '<label for="%1$s">%2$s<br /><input type="text" id="%1$s" class="widefat %1$s" name="%3$s" value="%4$s" /></label>',
+    ];
+
+	/**
+	 * Initialize plugin
+	 */
+	public static function init() {
+		add_action( 'wp_nav_menu_item_custom_fields', array( __CLASS__, '_fields' ), 10, 4 );
+		add_action( 'wp_update_nav_menu_item', array( __CLASS__, '_save' ), 10, 3 );
+
+        self::$fields = array(
+            'a-classes' => [
+                'label' => __('Anchor Classes', 'lawcarta'),
+                'type' => 'text'
+            ],
+            'icon-classes' => [
+                'label' => __('Icon Classes', 'lawcarta'),
+                'type' => 'text'
+            ],
+        );
+	}
+
+
+	/**
+	 * Save custom field value
+	 *
+	 * @wp_hook action wp_update_nav_menu_item
+	 *
+	 * @param int   $menu_id         Nav menu ID
+	 * @param int   $menu_item_db_id Menu item ID
+	 * @param array $menu_item_args  Menu item data
+	 */
+	public static function _save( $menu_id, $menu_item_db_id, $menu_item_args ) {
+		if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
+			return;
+		}
+
+		check_admin_referer( 'update-nav_menu', 'update-nav-menu-nonce' );
+
+		foreach ( self::$fields as $field => $config ) {
+			$key = sprintf( 'menu-item-%s', $field );
+
+			// Sanitize
+			if ( ! empty( $_POST[ $key ][ $menu_item_db_id ] ) ) {
+				$value = $_POST[ $key ][ $menu_item_db_id ];
+                if ($config['type'] === 'checkbox') {
+                    $value = (bool) $value;
+                }
+			} else {
+				$value = null;
+			}
+
+			// Update
+			if ( ! is_null( $value ) ) {
+				update_post_meta( $menu_item_db_id, $key, $value );
+			} else {
+				delete_post_meta( $menu_item_db_id, $key );
+			}
+		}
+	}
+
+
+	/**
+	 * Print field
+	 *
+	 * @param object $item  Menu item data object.
+	 * @param int    $depth  Depth of menu item. Used for padding.
+	 * @param array  $args  Menu item args.
+	 * @param int    $id    Nav menu ID.
+	 *
+	 * @return string Form fields
+	 */
+	public static function _fields( $id, $item, $depth, $args ) {
+		foreach ( self::$fields as $field => $config ) :
+			$key   = sprintf( 'menu-item-%s', $field );
+			$id    = sprintf( 'edit-%s-%s', $key, $item->ID );
+			$name  = sprintf( '%s[%s]', $key, $item->ID );
+			$value = get_post_meta( $item->ID, $key, true );
+			$class = sprintf( 'field-%s', $field );
+            $extra = '';
+            if ($config['type'] === 'checkbox') {
+                if ($value) {
+                    $extra = 'checked="checked"';
+                }
+                $value = 1;
+            }
+			?>
+				<p class="description description-wide <?php echo esc_attr( $class ) ?>">
+					<?php printf(
+                        self::$templates[$config['type']],
+						esc_attr( $id ),
+						esc_html( $config['label'] ),
+						esc_attr( $name ),
+						esc_attr( $value ),
+                        $extra
+					) ?>
+				</p>
+			<?php
+		endforeach;
+	}
+
+    public static function getMeta($item)
+    {
+        $meta = [];
+        foreach ( self::$fields as $field => $config ) {
+            $key   = sprintf( 'menu-item-%s', $field );
+            $value = get_post_meta( $item->ID, $key, true );
+            if (!empty($value)) {
+                if ($config['type'] === 'checkbox') {
+                    $value = (bool) $value;
+                }
+                $meta[$field] = $value;
+            }
+        }
+        return $meta;
+    }
+}
+LawCarta_Menu_Item_Custom_Fields::init();
diff --git a/htdocs/wp-content/themes/lawcarta/inc/walker-nav-menu.php b/htdocs/wp-content/themes/lawcarta/inc/walker-nav-menu.php
new file mode 100644
index 0000000..64e2f25
--- /dev/null
+++ b/htdocs/wp-content/themes/lawcarta/inc/walker-nav-menu.php
@@ -0,0 +1,195 @@
+<?php
+
+class LawCarta_Walker_Nav_Menu extends Walker_Nav_Menu
+{
+    /**
+     * Starts the element output.
+     *
+     * @since 3.0.0
+     * @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
+     *
+     * @see Walker::start_el()
+     *
+     * @param string   $output Used to append additional content (passed by reference).
+     * @param WP_Post  $item   Menu item data object.
+     * @param int      $depth  Depth of menu item. Used for padding.
+     * @param stdClass $args   An object of wp_nav_menu() arguments.
+     * @param int      $id     Current item ID.
+     */
+    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
+        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
+            $t = '';
+            $n = '';
+        } else {
+            $t = "\t";
+            $n = "\n";
+        }
+        $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';
+//var_dump($item);
+
+        $classes = get_post_meta($item->ID, '_menu_item_classes', true);
+        if (is_array($classes)) {
+            $classes = array_filter($classes);
+        } else {
+            $classes = [];
+        }
+
+        /**
+         * Filters the arguments for a single nav menu item.
+         *
+         * @since 4.4.0
+         *
+         * @param stdClass $args  An object of wp_nav_menu() arguments.
+         * @param WP_Post  $item  Menu item data object.
+         * @param int      $depth Depth of menu item. Used for padding.
+         */
+        $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
+
+        /**
+         * Filters the CSS class(es) applied to a menu item's list item element.
+         *
+         * @since 3.0.0
+         * @since 4.1.0 The `$depth` parameter was added.
+         *
+         * @param array    $classes The CSS classes that are applied to the menu item's `<li>` element.
+         * @param WP_Post  $item    The current menu item.
+         * @param stdClass $args    An object of wp_nav_menu() arguments.
+         * @param int      $depth   Depth of menu item. Used for padding.
+         */
+        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
+        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
+
+        /**
+         * Filters the ID applied to a menu item's list item element.
+         *
+         * @since 3.0.1
+         * @since 4.1.0 The `$depth` parameter was added.
+         *
+         * @param string   $menu_id The ID that is applied to the menu item's `<li>` element.
+         * @param WP_Post  $item    The current menu item.
+         * @param stdClass $args    An object of wp_nav_menu() arguments.
+         * @param int      $depth   Depth of menu item. Used for padding.
+         */
+        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
+        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
+
+        $itemWrap = isset($args->item_wrap) ? $args->item_wrap : 'li';
+        if (!empty($itemWrap)) {
+            $output .= $indent . '<' . $itemWrap . $id . $class_names .'>';
+        } else {
+            $output .= $indent;
+        }
+
+        $atts = array();
+        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
+        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
+        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
+        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
+        $atts['class'] = !empty($item->meta['a-classes']) ? $item->meta['a-classes'] : '';
+
+        /**
+         * Filters the HTML attributes applied to a menu item's anchor element.
+         *
+         * @since 3.6.0
+         * @since 4.1.0 The `$depth` parameter was added.
+         *
+         * @param array $atts {
+         *     The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
+         *
+         *     @type string $title  Title attribute.
+         *     @type string $target Target attribute.
+         *     @type string $rel    The rel attribute.
+         *     @type string $href   The href attribute.
+         * }
+         * @param WP_Post  $item  The current menu item.
+         * @param stdClass $args  An object of wp_nav_menu() arguments.
+         * @param int      $depth Depth of menu item. Used for padding.
+         */
+        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
+
+        $attributes = '';
+        foreach ( $atts as $attr => $value ) {
+            if ( ! empty( $value ) ) {
+                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
+                $attributes .= ' ' . $attr . '="' . $value . '"';
+            }
+        }
+
+        /** This filter is documented in wp-includes/post-template.php */
+        $title = apply_filters( 'the_title', $item->title, $item->ID );
+
+        /**
+         * Filters a menu item's title.
+         *
+         * @since 4.4.0
+         *
+         * @param string   $title The menu item's title.
+         * @param WP_Post  $item  The current menu item.
+         * @param stdClass $args  An object of wp_nav_menu() arguments.
+         * @param int      $depth Depth of menu item. Used for padding.
+         */
+        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
+
+        $icon = '';
+        $iconClasses = !empty($item->meta['icon-classes']) ? $item->meta['icon-classes'] : '';
+        if (!empty($iconClasses)) {
+            $iconEl = !empty($args->icon_wrap) ? $args->icon_wrap : 'span';
+            $icon = '<' . $iconEl . ' class="' . $iconClasses . '"></' . $iconEl . '>';
+        }
+
+        if (isset($args->hide_title) && $args->hide_title === true) {
+            $title = '';
+        }
+
+        $item_output = $args->before;
+        $item_output .= '<a'. $attributes .'>';
+        $item_output .= $args->link_before . $icon . $title . $args->link_after;
+        $item_output .= '</a>';
+        $item_output .= $args->after;
+
+        /**
+         * Filters a menu item's starting output.
+         *
+         * The menu item's starting output only includes `$args->before`, the opening `<a>`,
+         * the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
+         * no filter for modifying the opening and closing `<li>` for a menu item.
+         *
+         * @since 3.0.0
+         *
+         * @param string   $item_output The menu item's starting HTML output.
+         * @param WP_Post  $item        Menu item data object.
+         * @param int      $depth       Depth of menu item. Used for padding.
+         * @param stdClass $args        An object of wp_nav_menu() arguments.
+         */
+        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
+    }
+
+    /**
+     * Ends the element output, if needed.
+     *
+     * @since 3.0.0
+     *
+     * @see Walker::end_el()
+     *
+     * @param string   $output Used to append additional content (passed by reference).
+     * @param WP_Post  $item   Page data object. Not used.
+     * @param int      $depth  Depth of page. Not Used.
+     * @param stdClass $args   An object of wp_nav_menu() arguments.
+     */
+    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
+        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
+            $t = '';
+            $n = '';
+        } else {
+            $t = "\t";
+            $n = "\n";
+        }
+
+        $itemWrap = isset($args->item_wrap) ? $args->item_wrap : 'li';
+        if (!empty($itemWrap)) {
+            $output .= "</$itemWrap>{$n}";
+        } else {
+            $output .= "{$n}";
+        }
+    }
+}
\ No newline at end of file