diff --git a/Database/Migrations/2021_02_19_151111_vh_cms_blocks_table.php b/Database/Migrations/2021_02_19_151111_vh_cms_blocks_table.php
new file mode 100644
index 0000000..b20ebf6
--- /dev/null
+++ b/Database/Migrations/2021_02_19_151111_vh_cms_blocks_table.php
@@ -0,0 +1,50 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class VhCmsBlocksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+
+        Schema::create('vh_cms_blocks', function (Blueprint $table) {
+            $table->increments('id');
+            $table->uuid('uuid')->nullable()->index();
+
+            $table->integer('vh_theme_id')->nullable()->index();
+            $table->integer('vh_theme_location_id')->nullable()->index();
+            $table->string('name')->nullable()->index();
+            $table->string('slug')->nullable()->index();
+            $table->text('content')->nullable();
+            $table->integer('sort')->nullable()->index();
+            $table->boolean('is_published')->nullable()->index();
+
+            $table->text('meta')->nullable();
+
+            $table->integer('created_by')->nullable()->index();
+            $table->integer('updated_by')->nullable()->index();
+            $table->integer('deleted_by')->nullable()->index();
+            $table->timestamps();
+            $table->softDeletes();
+            $table->index(['created_at', 'updated_at', 'deleted_at']);
+
+        });
+    }
+
+    /**
+    * Reverse the migrations.
+    *
+    * @return void
+    */
+    public function down()
+    {
+        Schema::dropIfExists('vh_cms_blocks');
+    }
+}
diff --git a/Entities/Block.php b/Entities/Block.php
new file mode 100644
index 0000000..9a53110
--- /dev/null
+++ b/Entities/Block.php
@@ -0,0 +1,578 @@
+<?php namespace VaahCms\Modules\Cms\Entities;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use WebReinvent\VaahCms\Entities\Theme;
+use WebReinvent\VaahCms\Entities\ThemeLocation;
+use WebReinvent\VaahCms\Entities\User;
+use WebReinvent\VaahCms\Traits\CrudWithUuidObservantTrait;
+
+class Block extends Model {
+
+    use SoftDeletes;
+    use CrudWithUuidObservantTrait;
+
+    //-------------------------------------------------
+    protected $table = 'vh_cms_blocks';
+    //-------------------------------------------------
+    protected $dates = [
+        'created_at',
+        'updated_at',
+        'deleted_at'
+    ];
+    //-------------------------------------------------
+    protected $dateFormat = 'Y-m-d H:i:s';
+    //-------------------------------------------------
+    protected $fillable = [
+        'uuid',
+        'vh_theme_id',
+        'vh_theme_location_id',
+        'name',
+        'slug',
+        'excerpt',
+        'content',
+        'sort',
+        'is_published',
+        'meta',
+        'created_by',
+        'updated_by',
+        'deleted_by'
+    ];
+
+    //-------------------------------------------------
+    protected $appends  = [
+    ];
+    //-------------------------------------------------
+    public function setNameAttribute($value)
+    {
+        if($value)
+        {
+            $this->attributes['name'] = ucwords($value);
+        } else{
+            $this->attributes['name'] = null;
+        }
+
+    }
+    //-------------------------------------------------
+    public function getNameAttribute($value)
+    {
+        if($value)
+        {
+            return ucwords($value);
+        }
+        return null;
+    }
+    //-------------------------------------------------
+    public function setMetaAttribute($value)
+    {
+        if($value)
+        {
+            $this->attributes['meta'] = json_encode($value);
+        } else{
+            $this->attributes['meta'] = null;
+        }
+    }
+    //-------------------------------------------------
+    public function getMetaAttribute($value)
+    {
+        if($value)
+        {
+            return json_decode($value);
+        }
+        return null;
+    }
+    //-------------------------------------------------
+    public function getTableColumns() {
+        return $this->getConnection()->getSchemaBuilder()
+            ->getColumnListing($this->getTable());
+    }
+    //-------------------------------------------------
+    public function scopeExclude($query, $columns)
+    {
+        return $query->select( array_diff( $this->getTableColumns(),$columns) );
+    }
+    //-------------------------------------------------
+    public function scopeIsPublished($query)
+    {
+        return $query->where( 'is_published', 1 );
+    }
+    //-------------------------------------------------
+    public function createdByUser()
+    {
+        return $this->belongsTo(User::class,
+            'created_by', 'id'
+        )->select('id', 'uuid', 'first_name', 'last_name', 'email');
+    }
+
+    //-------------------------------------------------
+    public function updatedByUser()
+    {
+        return $this->belongsTo(User::class,
+            'updated_by', 'id'
+        )->select('id', 'uuid', 'first_name', 'last_name', 'email');
+    }
+    //-------------------------------------------------
+    public function deletedByUser()
+    {
+        return $this->belongsTo(User::class,
+            'deleted_by', 'id'
+        )->select('id', 'uuid', 'first_name', 'last_name', 'email');
+    }
+    //-------------------------------------------------
+    public function theme()
+    {
+        return $this->belongsTo(Theme::class,
+            'vh_theme_id', 'id'
+        );
+    }
+    //-------------------------------------------------
+    public function themeLocation()
+    {
+        return $this->belongsTo(ThemeLocation::class,
+            'vh_theme_location_id', 'id'
+        );
+    }
+    //-------------------------------------------------
+    public static function postCreate($request)
+    {
+
+        $validation = static::validation($request);
+        if(isset($validation['status']) && $validation['status'] == 'failed')
+        {
+            return $validation;
+        }
+
+        // check if sort number exist
+        $sort_number_exist = static::where('vh_theme_id',$request['vh_theme_id'])
+            ->where('vh_theme_location_id',$request['vh_theme_location_id'])
+            ->where('sort',$request['sort'])
+            ->first();
+
+        if($sort_number_exist)
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = "Select different sort number.";
+            return $response;
+        }
+
+        $item = new static();
+        $item->fill($request->all());
+        $item->save();
+
+        $response['status'] = 'success';
+        $response['data']['item'] =$item;
+        $response['messages'][] = 'Saved';
+
+        return $response;
+
+    }
+    //-------------------------------------------------
+    public static function getList($request)
+    {
+        if($request->has('sort_by') && $request['sort_by'])
+        {
+            $list = static::orderBy($request['sort_by'], $request['sort_order']);
+        }else{
+            $list = static::orderBy('id', $request['sort_order']);
+        }
+
+        $list->with([ 'themeLocation','theme']);
+
+        if($request->has('trashed') && $request['trashed'] == 'true')
+        {
+
+            $list->withTrashed();
+        }
+
+        if($request->has('from') && $request->from
+            && $request->has('to') && $request->to)
+        {
+            $list->whereBetween('updated_at',[$request->from." 00:00:00",$request->to." 23:59:59"]);
+        }
+
+        if($request->has('filter') &&  $request['filter'])
+        {
+            if($request['filter'] == '1')
+            {
+                $list->where('is_published',$request['filter']);
+            }elseif($request['filter'] == '10'){
+                $list->whereNull('is_published')->orWhere('is_published',0);
+            }else{
+                $list->with(['themeLocation'])
+                    ->whereHas('themeLocation', function ($q) use ($request){
+                        $q->where('slug', $request['filter']);
+                    });
+
+            }
+        }
+
+        if($request->has('q') && $request->q)
+        {
+            $search_array = explode(" ",$request->q);
+
+            foreach ($search_array as $item){
+                $list->where(function ($q) use ($item){
+                    $q->where('name', 'LIKE', '%'.$item.'%')
+                        ->orWhere('id', 'LIKE', $item.'%')
+                        ->orWhere('slug', 'LIKE', '%'.$item.'%');
+                });
+            }
+        }
+
+
+        $data['list'] = $list->paginate(config('vaahcms.per_page'));
+
+
+
+        $response['status'] = 'success';
+        $response['data'] = $data;
+
+        return $response;
+
+
+    }
+    //-------------------------------------------------
+    public static function validation($request)
+    {
+        $rules = array(
+            'name' => 'required|unique:vh_cms_blocks|max:60',
+            'slug' => 'required|unique:vh_cms_blocks|max:60',
+            'content' => 'required',
+            'vh_theme_id' => 'required',
+            'vh_theme_location_id' => 'required',
+            'sort' => 'required|numeric|min:0|regex:/^\d{1,13}?$/',
+        );
+        $messages = array(
+            'vh_theme_id.required' => 'Select a theme.',
+            'vh_theme_location_id.required' => 'Select a theme location.',
+        );
+
+        $validator = \Validator::make( $request->all(), $rules, $messages);
+        if ( $validator->fails() ) {
+
+            $errors             = errorsToArray($validator->errors());
+            $response['status'] = 'failed';
+            $response['errors'] = $errors;
+            return $response;
+        }
+
+        $response['status'] = 'success';
+
+        return $response;
+
+    }
+    //-------------------------------------------------
+    public static function storeValidation($request)
+    {
+        $rules = array(
+            'name' => 'required|max:60',
+            'slug' => 'required|max:60',
+            'content' => 'required',
+            'vh_theme_id' => 'required',
+            'vh_theme_location_id' => 'required',
+            'sort' => 'required|numeric|min:0|regex:/^\d{1,13}?$/',
+        );
+        $messages = array(
+            'vh_theme_id.required' => 'Select a theme.',
+            'vh_theme_location_id.required' => 'Select a theme location.',
+        );
+
+        $validator = \Validator::make( $request->all(), $rules, $messages);
+        if ( $validator->fails() ) {
+
+            $errors             = errorsToArray($validator->errors());
+            $response['status'] = 'failed';
+            $response['errors'] = $errors;
+            return $response;
+        }
+
+        $response['status'] = 'success';
+
+        return $response;
+
+    }
+    //-------------------------------------------------
+
+    //-------------------------------------------------
+    public static function getItem($id)
+    {
+
+        $item = static::where('id', $id)
+            ->with([
+                'theme', 'themeLocation',
+                'createdByUser', 'updatedByUser',
+                'deletedByUser',
+            ])
+            ->withTrashed()
+            ->first();
+
+        $response['status'] = 'success';
+        $response['data'] = $item;
+
+        return $response;
+
+    }
+    //-------------------------------------------------
+    public static function postStore($request,$id)
+    {
+
+        $validation = static::storeValidation($request);
+        if(isset($validation['status']) && $validation['status'] == 'failed')
+        {
+            return $validation;
+        }
+
+        // check if name exist
+        $name_exist = static::where('id','!=',$request['id'])
+            ->where('name',$request['name'])
+            ->first();
+
+        if($name_exist)
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = "This name is already exist.";
+            return $response;
+        }
+
+
+        // check if slug exist
+        $slug_exist = static::where('id','!=',$request['id'])
+            ->where('slug',$request['slug'])
+            ->first();
+
+        if($slug_exist)
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = "This slug is already exist.";
+            return $response;
+        }
+
+
+        // check if sort number exist
+        $sort_number_exist = static::where('id','!=',$request['id'])
+            ->where('vh_theme_id',$request['vh_theme_id'])
+            ->where('vh_theme_location_id',$request['vh_theme_location_id'])
+            ->where('sort',$request['sort'])
+            ->first();
+
+        if($sort_number_exist)
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = "Select different sort number.";
+            return $response;
+        }
+
+        $update = static::where('id',$id)->withTrashed()->first();
+
+        $update->fill($request->all());
+        $update->save();
+
+
+        $response['status'] = 'success';
+        $response['data'] = [];
+        $response['messages'][] = 'Data updated.';
+
+        return $response;
+
+    }
+    //-------------------------------------------------
+    public static function bulkStatusChange($request)
+    {
+        if(!$request->has('inputs'))
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = 'Select IDs';
+            return $response;
+        }
+
+        if(!$request->has('data'))
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = 'Select Status';
+            return $response;
+        }
+
+        foreach($request->inputs as $id)
+        {
+            $role = static::where('id',$id)->withTrashed()->first();
+
+            if($role->deleted_at){
+                continue ;
+            }
+
+            if($request['data']){
+                $role->is_published = $request['data']['status'];
+            }else{
+                if($role->is_published == 1){
+                    $role->is_published = 0;
+                }else{
+                    $role->is_published = 1;
+                }
+            }
+            $role->save();
+        }
+
+        $response['status'] = 'success';
+        $response['data'] = [];
+        $response['messages'][] = 'Action was successful';
+
+        return $response;
+
+
+    }
+    //-------------------------------------------------
+    public static function bulkTrash($request)
+    {
+
+        if(!$request->has('inputs'))
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = 'Select IDs';
+            return $response;
+        }
+
+
+        foreach($request->inputs as $id)
+        {
+            $item = static::withTrashed()->where('id', $id)->first();
+            if($item)
+            {
+                $item->is_published = 0;
+                $item->save();
+                $item->delete();
+            }
+        }
+
+        $response['status'] = 'success';
+        $response['data'] = [];
+        $response['messages'][] = 'Action was successful';
+
+        return $response;
+
+
+    }
+    //-------------------------------------------------
+    public static function bulkRestore($request)
+    {
+
+
+        if(!$request->has('inputs'))
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = 'Select IDs';
+            return $response;
+        }
+
+        if(!$request->has('data'))
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = 'Select Status';
+            return $response;
+        }
+
+        foreach($request->inputs as $id)
+        {
+            $item = static::withTrashed()->where('id', $id)->first();
+            if(isset($item) && isset($item->deleted_at))
+            {
+                $item->restore();
+            }
+        }
+
+        $response['status'] = 'success';
+        $response['data'] = [];
+        $response['messages'][] = 'Action was successful';
+
+        return $response;
+
+    }
+    //-------------------------------------------------
+    public static function bulkDelete($request)
+    {
+
+        if(!$request->has('inputs'))
+        {
+            $response['status'] = 'failed';
+            $response['errors'][] = 'Select IDs';
+            return $response;
+        }
+
+
+        foreach($request->inputs as $id)
+        {
+            $item = static::where('id', $id)->withTrashed()->first();
+            if($item)
+            {
+                $item->forceDelete();
+            }
+        }
+
+        $response['status'] = 'success';
+        $response['data'] = [];
+        $response['messages'][] = 'Action was successful';
+
+        return $response;
+    }
+
+    //---------------------------------------------------------------------------
+    public static function getBlock($block_slug)
+    {
+
+        if(!$block_slug){
+            return false;
+        }
+
+
+        $block = self::where('is_published',1)
+            ->where('slug',$block_slug)
+            ->where('vh_theme_id',vh_get_theme_id())
+            ->first();
+
+        if(!$block)
+        {
+            return false;
+        }
+
+        return $block->content;
+    }
+
+    //---------------------------------------------------------------------------
+    public static function getBlocksByLocation($location)
+    {
+
+
+        if(!$location)
+        {
+            return false;
+        }
+
+        $blocks = self::where('vh_theme_location_id', $location->id)
+            ->where('is_published',1)
+            ->orderBy('sort','asc')
+            ->get();
+
+        if(count($blocks) < 1)
+        {
+            return false;
+        }
+
+        $data = "";
+
+        foreach ($blocks as $block){
+            $data .= $block->content;
+        }
+
+
+        return $data;
+    }
+    //-------------------------------------------------
+    //-------------------------------------------------
+    //-------------------------------------------------
+    //-------------------------------------------------
+    //-------------------------------------------------
+    //-------------------------------------------------
+    //-------------------------------------------------
+    //-------------------------------------------------
+
+}
diff --git a/Entities/FormGroup.php b/Entities/FormGroup.php
index 64cbc53..d48eb32 100644
--- a/Entities/FormGroup.php
+++ b/Entities/FormGroup.php
@@ -173,6 +173,11 @@ public static function syncWithFormFields(FormGroup $group, $fields_array)
             foreach ($fields_array as $f_index => $field)
             {
 
+                if(!isset($field['slug']) || !$field['slug']){
+                    $field['slug'] = Str::slug($field['name']);
+                }
+
+
                 $stored_field = FormField::where('vh_cms_form_group_id', $group->id)
                     ->where('slug', $field['slug'])
                     ->first();
diff --git a/Http/Controllers/Backend/BlocksController.php b/Http/Controllers/Backend/BlocksController.php
new file mode 100644
index 0000000..111e8ce
--- /dev/null
+++ b/Http/Controllers/Backend/BlocksController.php
@@ -0,0 +1,127 @@
+<?php namespace VaahCms\Modules\Cms\Http\Controllers\Backend;
+
+use Carbon\Carbon;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Routing\Controller;
+use VaahCms\Modules\Cms\Entities\Block;
+use VaahCms\Modules\Cms\Entities\ContentType;
+use VaahCms\Modules\Cms\Entities\FieldType;
+use WebReinvent\VaahCms\Entities\Theme;
+
+class BlocksController extends Controller
+{
+
+    public $theme;
+
+    //----------------------------------------------------------
+    public function __construct()
+    {
+        $this->theme = vh_get_backend_theme();
+    }
+
+    public function getAssets(Request $request)
+    {
+
+        $data['field_types'] = FieldType::select('id', 'name', 'slug', 'meta')
+            ->get();
+
+        $data['bulk_actions'] = vh_general_bulk_actions();
+        $data['themes'] = Theme::getActiveThemesWithBlockLocations();
+
+
+        $response['status'] = 'success';
+        $response['data'] = $data;
+
+        return response()->json($response);
+    }
+    //----------------------------------------------------------
+    public function postCreate(Request $request)
+    {
+        $response = Block::postCreate($request);
+        return response()->json($response);
+    }
+    //----------------------------------------------------------
+    public function getList(Request $request)
+    {
+        $response = Block::getList($request);
+        return response()->json($response);
+    }
+    //----------------------------------------------------------
+    public function getItem(Request $request, $id)
+    {
+
+        $response = Block::getItem($id);
+        return response()->json($response);
+
+    }
+    //----------------------------------------------------------
+    public function postStore(Request $request,$id)
+    {
+        $response = Block::postStore($request,$id);
+        return response()->json($response);
+    }
+
+    //----------------------------------------------------------
+    //----------------------------------------------------------
+    public function postActions(Request $request, $action)
+    {
+        $rules = array(
+            'inputs' => 'required',
+        );
+
+        $validator = \Validator::make( $request->all(), $rules);
+        if ( $validator->fails() ) {
+
+            $errors             = errorsToArray($validator->errors());
+            $response['status'] = 'failed';
+            $response['errors'] = $errors;
+            return response()->json($response);
+        }
+
+        $response = [];
+
+        $response['status'] = 'success';
+
+        $inputs = $request->all();
+
+        switch ($action)
+        {
+
+            //------------------------------------
+            case 'bulk-change-status':
+                $response = Block::bulkStatusChange($request);
+                break;
+            //------------------------------------
+            case 'bulk-trash':
+
+                $response = Block::bulkTrash($request);
+
+                break;
+            //------------------------------------
+            case 'bulk-restore':
+
+                $response = Block::bulkRestore($request);
+
+                break;
+
+            //------------------------------------
+            case 'bulk-delete':
+
+                $response = Block::bulkDelete($request);
+
+                break;
+
+            //------------------------------------
+        }
+
+        return response()->json($response);
+
+    }
+
+    //----------------------------------------------------------
+    //----------------------------------------------------------
+    //----------------------------------------------------------
+
+
+}
diff --git a/Http/Controllers/Backend/JsonController.php b/Http/Controllers/Backend/JsonController.php
index c16838a..dd33945 100644
--- a/Http/Controllers/Backend/JsonController.php
+++ b/Http/Controllers/Backend/JsonController.php
@@ -52,6 +52,13 @@ public function getAssets(Request $request)
                     'path' => "/menus",
                 ],
 
+                [
+                    "label"=>'Blocks',
+                    "icon"=>'cubes',
+                    "link"=> self::$link."blocks",
+                    'path' => "/blocks",
+                ],
+
             ],
 
         ];
diff --git a/Http/Controllers/Backend/MenusController.php b/Http/Controllers/Backend/MenusController.php
index 13da087..5e4c4de 100644
--- a/Http/Controllers/Backend/MenusController.php
+++ b/Http/Controllers/Backend/MenusController.php
@@ -26,7 +26,7 @@ public function __construct()
     public function getAssets(Request $request)
     {
 
-        $data['themes'] = Theme::getActiveThemesWithLocations();
+        $data['themes'] = Theme::getActiveThemesWithMenuLocations();
 
         $response['status'] = 'success';
         $response['data'] = $data;
diff --git a/Libraries/CmsSeeder.php b/Libraries/CmsSeeder.php
index 611c14c..5f22b97 100644
--- a/Libraries/CmsSeeder.php
+++ b/Libraries/CmsSeeder.php
@@ -163,6 +163,8 @@ public static function templates($theme_slug, $file_path)
                 ->where('slug', $template['template']['slug'])
                 ->first();
 
+            $stored_template = ThemeTemplate::find($stored_template->id);
+
 
             //template groups
             ThemeTemplate::syncWithFormGroups($stored_template, $template['groups']);
@@ -187,9 +189,9 @@ public static function contentTypes($file_path)
 
             if(!$exist)
             {
-                $stored = DB::table('vh_cms_content_types')->insert($content_type['content']);
+                DB::table('vh_cms_content_types')->insert($content_type['content']);
             } else{
-                $stored = DB::table('vh_cms_content_types')
+                DB::table('vh_cms_content_types')
                     ->where('slug', $content_type['content']['slug'])
                     ->update($content_type['content']);
             }
diff --git a/Routes/backend.php b/Routes/backend.php
index ae06032..b192dea 100644
--- a/Routes/backend.php
+++ b/Routes/backend.php
@@ -43,5 +43,6 @@ function () {
     ->name( 'vh.backend.cms.getUserById' );
 
 include('backend/content-types.php');
+include('backend/blocks.php');
 include('backend/contents.php');
 include('backend/menus.php');
diff --git a/Routes/backend/blocks.php b/Routes/backend/blocks.php
new file mode 100644
index 0000000..445dd48
--- /dev/null
+++ b/Routes/backend/blocks.php
@@ -0,0 +1,40 @@
+<?php
+
+
+
+Route::group(
+    [
+        'prefix' => 'backend/cms/blocks',
+        'namespace'  => 'Backend',
+        'middleware' => ['web', 'has.backend.access'],
+    ],
+    function () {
+        //---------------------------------------------------------
+        Route::get('/assets', 'BlocksController@getAssets')
+            ->name('backend.cms.blocks.assets');
+        //---------------------------------------------------------
+        Route::post('/create', 'BlocksController@postCreate')
+            ->name('backend.cms.blocks.create');
+        //---------------------------------------------------------
+        Route::get('/list', 'BlocksController@getList')
+            ->name('backend.cms.blocks.list');
+        //---------------------------------------------------------
+        Route::get('/item/{id}', 'BlocksController@getItem')
+            ->name('backend.cms.blocks.item');
+        //---------------------------------------------------------
+        Route::post('/item/{id}/relations', 'BlocksController@getItemRelations')
+            ->name('backend.cms.blocks.item.relations');
+        //---------------------------------------------------------
+        Route::post('/store/{id}', 'BlocksController@postStore')
+            ->name('backend.cms.blocks.store');
+        //---------------------------------------------------------
+        Route::post('/store/{id}/groups', 'BlocksController@postStoreGroups')
+            ->name('backend.cms.blocks.store.groups');
+        //---------------------------------------------------------
+        Route::post('/actions/{action_name}', 'BlocksController@postActions')
+            ->name('backend.cms.blocks.actions');
+        //---------------------------------------------------------
+        Route::get('/getModuleSections', 'BlocksController@getModuleSections')
+            ->name('backend.cms.blocks.module-section');
+        //---------------------------------------------------------
+    });
diff --git a/Vue/pages/blocks/Create.vue b/Vue/pages/blocks/Create.vue
new file mode 100644
index 0000000..fccfcfc
--- /dev/null
+++ b/Vue/pages/blocks/Create.vue
@@ -0,0 +1,178 @@
+<script src="./CreateJs.js"></script>
+<template>
+
+    <div class="column" v-if="page.assets">
+
+        <div class="columns">
+
+            <div class="column">
+
+                <div class="card has-margin-bottom-15">
+                    <div class="card-header">
+
+                        <div class="card-header-title">
+                            <span>Content</span>
+                        </div>
+
+                        <div class="card-header-buttons">
+                            <div class="field has-addons is-pulled-right">
+                                <p  class="control">
+                                    <b-button type="is-light"
+                                              @click="is_textarea_disable = false"
+                                              :disabled="!is_textarea_disable">
+                                        Editor
+                                    </b-button>
+                                </p>
+                                <p  class="control">
+                                    <b-button type="is-light"
+                                              @click="is_textarea_disable = true"
+                                              :disabled="is_textarea_disable">
+                                        Code Editor
+                                    </b-button>
+                                </p>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="card-content">
+
+                        <codemirror v-if="is_textarea_disable"
+                                    ref="cmEditor" v-model="new_item.content"
+                                    :options="cm_options"
+                        />
+
+                        <ContentFieldAll v-else
+                                         field_slug="editor"
+                                         :labelPosition="labelPosition"
+                                         v-model="new_item.content"
+                                         @onInput=""
+                                         @onChange=""
+                                         @onBlur=""
+                                         @onFocus="">
+                        </ContentFieldAll>
+
+                    </div>
+
+
+                </div>
+
+
+            </div>
+
+
+
+            <div class="column is-4">
+
+                <div class="card">
+
+                    <!--header-->
+                    <header class="card-header">
+
+                        <div class="card-header-title">
+                            <span>Create New Block</span>
+                        </div>
+
+
+                        <div class="card-header-buttons">
+
+                            <div class="field has-addons is-pulled-right">
+
+                                <p class="control">
+                                    <b-button icon-left="save"
+                                              type="is-light"
+                                              :loading="is_btn_loading"
+                                              @click="create()">
+                                        Save
+                                    </b-button>
+                                </p>
+
+
+
+                                <p class="control">
+                                    <b-button tag="router-link"
+                                              type="is-light"
+                                              :to="{name: 'blocks.list'}"
+                                              icon-left="times">
+                                    </b-button>
+                                </p>
+
+
+
+                            </div>
+
+
+                        </div>
+
+                    </header>
+                    <!--/header-->
+
+                    <!--content-->
+                    <div class="card-content">
+                        <div class="block">
+
+                            <b-field label="Name" :label-position="labelPosition">
+                                <b-input v-model="new_item.name"></b-input>
+                            </b-field>
+
+                            <b-field label="Slug" :label-position="labelPosition">
+                                <b-input v-model="new_item.slug"></b-input>
+                            </b-field>
+
+                            <b-field label="Themes"
+                                     :label-position="labelPosition">
+                                <b-select v-model="new_item.vh_theme_id" @input="setActiveTheme">
+                                    <option value="">Select a Theme</option>
+                                    <option v-for="(theme, index) in assets.themes"
+                                            :value="theme.id"
+                                    >{{theme.name}}</option>
+                                </b-select>
+                            </b-field>
+
+                            <b-field label="Locations"
+                                     v-if="page.active_theme"
+                                     :label-position="labelPosition">
+                                <b-select v-model="new_item.vh_theme_location_id"
+                                          expanded>
+                                    <option value="">Select a Location</option>
+                                    <option v-for="(location, index) in page.active_theme.locations"
+                                            :value="location.id"
+                                    >{{location.name}}</option>
+                                </b-select>
+                            </b-field>
+
+                            <b-field label="Sort" :label-position="labelPosition">
+                                <b-input type="number" v-model="new_item.sort" ></b-input>
+                            </b-field>
+
+                            <b-field label="Is Published" :label-position="labelPosition">
+                                <b-radio-button v-model="new_item.is_published"
+                                                :native-value=1>
+                                    <span>Yes</span>
+                                </b-radio-button>
+
+                                <b-radio-button type="is-danger"
+                                                v-model="new_item.is_published"
+                                                :native-value=0>
+                                    <span>No</span>
+                                </b-radio-button>
+                            </b-field>
+
+                        </div>
+                    </div>
+                    <!--/content-->
+
+
+
+
+
+                </div>
+
+
+
+
+            </div>
+        </div>
+    </div>
+
+</template>
diff --git a/Vue/pages/blocks/CreateJs.js b/Vue/pages/blocks/CreateJs.js
new file mode 100644
index 0000000..85f22ff
--- /dev/null
+++ b/Vue/pages/blocks/CreateJs.js
@@ -0,0 +1,266 @@
+import GlobalComponents from '../../vaahvue/helpers/GlobalComponents'
+import ContentFieldAll from '../../vaahvue/reusable/content-fields/All'
+import draggable from 'vuedraggable';
+import { codemirror } from 'vue-codemirror'
+
+// language
+import 'codemirror/mode/xml/xml.js'
+// theme css
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/monokai.css'
+// require active-line.js
+import'codemirror/addon/selection/active-line.js'
+// autoCloseTags
+import'codemirror/addon/edit/closetag.js'
+
+let namespace = 'blocks';
+
+export default {
+    computed:{
+        root() {return this.$store.getters['root/state']},
+        page() {return this.$store.getters[namespace+'/state']},
+        assets() {return this.$store.getters[namespace+'/state'].assets},
+        ajax_url() {return this.$store.getters[namespace+'/state'].ajax_url},
+        new_item() {return this.$store.getters[namespace+'/state'].new_item},
+    },
+    components:{
+        ...GlobalComponents,
+        ContentFieldAll,
+        draggable,
+        codemirror
+    },
+    data()
+    {
+        return {
+            namespace: namespace,
+            is_content_loading: false,
+            is_textarea_disable: false,
+            is_btn_loading: null,
+            labelPosition: 'on-border',
+            params: {},
+            local_action: null,
+            title: null,
+            new_status: null,
+            disable_status_editing: true,
+            edit_status_index: null,
+            cm_options: {
+                tabSize: 4,
+                styleActiveLine: true,
+                lineNumbers: true,
+                lineWrapping: true,
+                autoCloseTags: true,
+                line: true,
+                mode: 'text/html',
+                theme: 'monokai'
+                // more CodeMirror options...
+            }
+        }
+    },
+    watch: {
+        $route(to, from) {
+            this.updateView()
+        },
+
+        'new_item.name': {
+            deep: true,
+            handler(new_val, old_val) {
+
+                if(new_val)
+                {
+                    this.new_item.slug = this.$vaah.strToSlug(new_val);
+                    this.updateNewItem();
+                }
+
+            }
+        },
+
+        'new_item.plural': {
+            deep: true,
+            handler(new_val, old_val) {
+
+                if(new_val)
+                {
+                    this.new_item.plural_slug = this.$vaah.strToSlug(new_val);
+                    this.updateNewItem();
+                }
+
+            }
+        },
+
+        'new_item.singular': {
+            deep: true,
+            handler(new_val, old_val) {
+
+                if(new_val)
+                {
+                    this.new_item.singular_slug = this.$vaah.strToSlug(new_val);
+                    this.updateNewItem();
+                }
+
+            }
+        },
+
+    },
+    mounted() {
+        //----------------------------------------------------
+
+        //----------------------------------------------------
+        this.onLoad();
+        //----------------------------------------------------
+
+        //----------------------------------------------------
+    },
+    methods: {
+        //---------------------------------------------------------------------
+        //---------------------------------------------------------------------
+        update: function(name, value)
+        {
+            let update = {
+                state_name: name,
+                state_value: value,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+        updateNewItem: function()
+        {
+            let update = {
+                state_name: 'new_item',
+                state_value: this.new_item,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+        updateView: function()
+        {
+            this.$store.dispatch(this.namespace+'/updateView', this.$route);
+        },
+        //---------------------------------------------------------------------
+        onLoad: function()
+        {
+            this.is_content_loading = true;
+            this.updateView();
+            this.getAssets();
+        },
+        //---------------------------------------------------------------------
+        async reloadRootAssets() {
+            await this.$store.dispatch('root/reloadAssets');
+        },
+        //---------------------------------------------------------------------
+        async getAssets() {
+            await this.$store.dispatch(namespace+'/getAssets');
+        },
+
+        //---------------------------------------------------------------------
+        addStatus: function()
+        {
+            this.new_item.content_statuses.push(this.new_status);
+            this.new_status = null;
+            this.update('new_item', this.new_item);
+        },
+        //---------------------------------------------------------------------
+        toggleEditStatus: function(status_index)
+        {
+            this.edit_status_index = status_index;
+            if(this.disable_status_editing)
+            {
+                this.disable_status_editing = false;
+            } else
+            {
+                this.disable_status_editing = true;
+            }
+        },
+        //---------------------------------------------------------------------
+        create: function () {
+            this.$Progress.start();
+            let params = this.new_item;
+
+            console.log('--->', params);
+
+            let url = this.ajax_url+'/create';
+            this.$vaah.ajax(url, params, this.createAfter);
+        },
+        //---------------------------------------------------------------------
+        createAfter: function (data, res) {
+
+            this.$Progress.finish();
+
+            if(data)
+            {
+                this.$emit('eReloadList');
+
+                if(this.local_action === 'save-and-close')
+                {
+                    this.saveAndClose();
+                }else{
+                    //this.$router.push({name: 'blocks.list'});
+                    this.saveAndNew();
+
+                    // this.$root.$emit('eReloadItem');
+                }
+
+                this.reloadRootAssets();
+
+            }
+
+        },
+        //---------------------------------------------------------------------
+        setLocalAction: function (action) {
+            this.local_action = action;
+            this.store();
+        },
+        //---------------------------------------------------------------------
+        saveAndClose: function () {
+            this.update('active_item', null);
+            this.$router.push({name:'blocks.list'});
+        },
+        //---------------------------------------------------------------------
+        saveAndNew: function () {
+            this.update('active_item', null);
+            this.resetNewItem();
+        },
+        //---------------------------------------------------------------------
+        resetNewItem: function()
+        {
+            let new_item = this.getNewItem();
+            this.update('new_item', new_item);
+        },
+        //---------------------------------------------------------------------
+        getNewItem: function()
+        {
+            let new_item = {
+                name: null,
+                slug: null,
+                vh_theme_id: "",
+                vh_theme_location_id: "",
+                content: "",
+                is_published: null,
+            };
+            return new_item;
+        },
+    //---------------------------------------------------------------------
+        setActiveTheme: function () {
+
+            this.new_item.vh_theme_location_id = '';
+            this.update('new_item', this.new_item);
+
+            this.page.active_theme = {
+                'locations':[]
+            };
+
+            this.update('active_theme', this.page.active_theme);
+
+            if(this.new_item.vh_theme_id){
+                let theme = this.$vaah.findInArrayByKey(this.assets.themes,
+                    'id', this.new_item.vh_theme_id);
+
+                this.update('active_theme', theme);
+            }
+
+
+        },
+        //---------------------------------------------------------------------
+    }
+}
diff --git a/Vue/pages/blocks/Edit.vue b/Vue/pages/blocks/Edit.vue
new file mode 100644
index 0000000..696deea
--- /dev/null
+++ b/Vue/pages/blocks/Edit.vue
@@ -0,0 +1,206 @@
+<script src="./EditJs.js"></script>
+<template>
+
+    <div class="column" v-if="page.assets">
+
+        <div class="card" v-if="is_content_loading">
+            <Loader/>
+        </div>
+
+        <div class="columns" v-else-if="item">
+            <div class="column">
+
+                <div class="card has-margin-bottom-15">
+                    <div class="card-header">
+
+                        <div class="card-header-title">
+                            <span>Content</span>
+                        </div>
+
+                        <div class="card-header-buttons">
+                            <div class="field has-addons is-pulled-right">
+
+                                <p  class="control">
+                                    <b-button type="is-light"
+                                              @click="is_textarea_disable = false"
+                                              :disabled="!is_textarea_disable">
+                                        Editor
+                                    </b-button>
+                                </p>
+                                <p  class="control">
+                                    <b-button type="is-light"
+                                              @click="is_textarea_disable = true"
+                                              :disabled="is_textarea_disable">
+                                        Code Editor
+                                    </b-button>
+                                </p>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="card-content">
+
+                        <codemirror v-if="is_textarea_disable"
+                                ref="cmEditor" v-model="item.content"
+                                :options="cm_options"
+                        />
+
+                        <ContentFieldAll v-else
+                                        field_slug="editor"
+                                         :labelPosition="labelPosition"
+                                         v-model="item.content"
+                                         @onInput=""
+                                         @onChange=""
+                                         @onBlur=""
+                                         @onFocus="">
+                        </ContentFieldAll>
+
+
+                    </div>
+
+                </div>
+
+
+            </div>
+
+
+            <div class="column is-4">
+
+                <div class="card">
+
+                    <!--header-->
+                    <header class="card-header">
+
+                        <div class="card-header-title">
+                            <span>{{$vaah.limitString(title, 15)}}</span>
+                        </div>
+
+
+                        <div class="card-header-buttons">
+
+                            <div class="field has-addons is-pulled-right">
+                                <p class="control">
+                                    <b-button @click="$vaah.copy(item.id)"  type="is-light">
+                                        <small><b>#{{item.id}}</b></small>
+                                    </b-button>
+                                </p>
+
+                                <p class="control">
+                                    <b-button icon-left="save"
+                                              type="is-light"
+                                              :loading="is_btn_loading"
+                                              @click="store()">
+                                        Save
+                                    </b-button>
+                                </p>
+
+                                <p class="control">
+
+
+                                    <b-dropdown aria-role="list" position="is-bottom-left">
+                                        <button class="button is-light"
+                                                slot="trigger">
+                                            <b-icon icon="caret-down"></b-icon>
+                                        </button>
+
+                                        <b-dropdown-item aria-role="listitem"
+                                                         @click="setLocalAction('save-and-close')">
+                                            <b-icon icon="check"></b-icon>
+                                            Save & Close
+                                        </b-dropdown-item>
+
+                                    </b-dropdown>
+
+
+                                </p>
+
+                                <p class="control">
+                                    <b-button type="is-light"
+                                              @click="resetActiveItem()"
+                                              icon-left="times">
+                                    </b-button>
+                                </p>
+
+
+
+                            </div>
+
+
+                        </div>
+
+                    </header>
+                    <!--/header-->
+
+                    <!--content-->
+                    <div class="card-content">
+                        <div class="block">
+
+                            <b-field label="Name" :label-position="labelPosition">
+                                <b-input v-model="item.name"></b-input>
+                            </b-field>
+
+                            <b-field label="Slug" :label-position="labelPosition">
+                                <b-input v-model="item.slug"></b-input>
+                            </b-field>
+
+                            <b-field label="Themes"
+                                     :label-position="labelPosition">
+
+                                <b-select v-model="item.vh_theme_id" @input="setActiveTheme">
+                                    <option value="">Select a Theme</option>
+                                    <option v-for="(theme, index) in assets.themes"
+                                            :value="theme.id"
+                                    >{{theme.name}}</option>
+                                </b-select>
+
+
+                            </b-field>
+
+                            <b-field label="Locations"
+                                     v-if="page.active_theme"
+                                     :label-position="labelPosition">
+                                <b-select v-model="item.vh_theme_location_id"
+                                          expanded>
+                                    <option value="">Select a Location</option>
+                                    <option v-for="(location, index) in page.active_theme.locations"
+                                            :value="location.id"
+                                            v-if="location.type === 'block'"
+                                    >{{location.name}}</option>
+                                </b-select>
+                            </b-field>
+
+                            <b-field label="Sort" :label-position="labelPosition">
+                                <b-input type="number" v-model="item.sort" ></b-input>
+                            </b-field>
+
+                            <b-field label="Is Published" :label-position="labelPosition">
+                                <b-radio-button v-model="item.is_published"
+                                                :native-value=1>
+                                    <span>Yes</span>
+                                </b-radio-button>
+
+                                <b-radio-button type="is-danger"
+                                                v-model="item.is_published"
+                                                :native-value=0>
+                                    <span>No</span>
+                                </b-radio-button>
+                            </b-field>
+
+
+                        </div>
+                    </div>
+                    <!--/content-->
+
+
+
+
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+
diff --git a/Vue/pages/blocks/EditJs.js b/Vue/pages/blocks/EditJs.js
new file mode 100644
index 0000000..c51cbad
--- /dev/null
+++ b/Vue/pages/blocks/EditJs.js
@@ -0,0 +1,275 @@
+import  GlobalComponents from '../../vaahvue/helpers/GlobalComponents'
+import ContentFieldAll from '../../vaahvue/reusable/content-fields/All'
+import draggable from 'vuedraggable';
+import { codemirror } from 'vue-codemirror'
+
+// language
+import 'codemirror/mode/xml/xml.js'
+// theme css
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/monokai.css'
+// require active-line.js
+import'codemirror/addon/selection/active-line.js'
+// autoCloseTags
+import'codemirror/addon/edit/closetag.js'
+
+let namespace = 'blocks';
+
+export default {
+    props: ['id'],
+    computed:{
+        root() {return this.$store.getters['root/state']},
+        page() {return this.$store.getters[namespace+'/state']},
+        assets() {return this.$store.getters[namespace+'/state'].assets},
+        ajax_url() {return this.$store.getters[namespace+'/state'].ajax_url},
+        item() {return this.$store.getters[namespace+'/state'].active_item},
+    },
+    components:{
+        ...GlobalComponents,
+        ContentFieldAll,
+        draggable,
+        codemirror
+
+    },
+    data()
+    {
+        return {
+            namespace: namespace,
+            is_content_loading: false,
+            is_textarea_disable: false,
+            is_btn_loading: null,
+            labelPosition: 'on-border',
+            params: {},
+            local_action: null,
+            title: null,
+            edit_status_index: null,
+            status: null,
+            disable_status_editing: true,
+            cm_options: {
+                tabSize: 4,
+                styleActiveLine: true,
+                lineNumbers: true,
+                lineWrapping: true,
+                autoCloseTags: true,
+                line: true,
+                mode: 'text/html',
+                theme: 'monokai'
+                // more CodeMirror options...
+            }
+        }
+    },
+    watch: {
+        $route(to, from) {
+            this.updateView()
+        },
+
+        'item.name': {
+            deep: true,
+            handler(new_val, old_val) {
+
+                if(new_val)
+                {
+                    this.item.slug = this.$vaah.strToSlug(new_val);
+                    this.updateNewItem();
+                }
+
+            }
+        },
+
+        'item.plural': {
+            deep: true,
+            handler(new_val, old_val) {
+
+                if(new_val)
+                {
+                    this.item.plural_slug = this.$vaah.strToSlug(new_val);
+                    this.updateNewItem();
+                }
+
+            }
+        },
+
+        'item.singular': {
+            deep: true,
+            handler(new_val, old_val) {
+
+                if(new_val)
+                {
+                    this.item.singular_slug = this.$vaah.strToSlug(new_val);
+                    this.updateNewItem();
+                }
+
+            }
+        },
+
+    },
+    mounted() {
+        //----------------------------------------------------
+        this.onLoad();
+        //----------------------------------------------------
+
+        //----------------------------------------------------
+    },
+    methods: {
+        //---------------------------------------------------------------------
+        //---------------------------------------------------------------------
+        update: function(name, value)
+        {
+            let update = {
+                state_name: name,
+                state_value: value,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+        updateView: function()
+        {
+            this.$store.dispatch(this.namespace+'/updateView', this.$route);
+        },
+        //---------------------------------------------------------------------
+        updateNewItem: function()
+        {
+            let update = {
+                state_name: 'item',
+                state_value: this.item,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+        onLoad: function()
+        {
+            this.is_content_loading = true;
+
+            this.updateView();
+            this.getAssets();
+            this.getItem();
+        },
+        //---------------------------------------------------------------------
+        async getAssets() {
+            await this.$store.dispatch(namespace+'/getAssets');
+        },
+        //---------------------------------------------------------------------
+        getItem: function () {
+            this.$Progress.start();
+            this.params = {};
+            let url = this.ajax_url+'/item/'+this.$route.params.id;
+            this.$vaah.ajaxGet(url, this.params, this.getItemAfter);
+        },
+        //---------------------------------------------------------------------
+        getItemAfter: function (data, res) {
+            this.$Progress.finish();
+            this.is_content_loading = false;
+
+            if(data)
+            {
+                this.title = data.name;
+                this.update('active_item', data);
+                this.setActiveTheme(false);
+
+            } else
+            {
+                //if item does not exist or delete then redirect to list
+                this.update('active_item', null);
+                this.$router.push({name: 'blocks.list'});
+            }
+        },
+        //---------------------------------------------------------------------
+        store: function () {
+            this.$Progress.start();
+
+            let params =  this.item;
+
+            let url = this.ajax_url+'/store/'+this.item.id;
+            this.$vaah.ajax(url, params, this.storeAfter);
+        },
+        //---------------------------------------------------------------------
+        storeAfter: function (data, res) {
+
+            this.$Progress.finish();
+
+            if(data)
+            {
+                this.$emit('eReloadList');
+
+                if(this.local_action === 'save-and-close')
+                {
+                    this.saveAndClose()
+                }else{
+                    this.$router.push({name: 'blocks.view', params:{id:this.id}});
+                    this.$root.$emit('eReloadItem');
+                }
+
+                this.reloadRootAssets();
+
+            }
+
+        },
+        //---------------------------------------------------------------------
+        async reloadRootAssets() {
+            await this.$store.dispatch('root/reloadAssets');
+        },
+        //---------------------------------------------------------------------
+        setLocalAction: function (action) {
+            this.local_action = action;
+            this.store();
+        },
+        //---------------------------------------------------------------------
+        saveAndClose: function () {
+            this.update('active_item', null);
+            this.$router.push({name:'blocks.list'});
+        },
+        //---------------------------------------------------------------------
+
+        //---------------------------------------------------------------------
+        toggleEditStatus: function(status_index)
+        {
+            this.edit_status_index = status_index;
+            if(this.disable_status_editing)
+            {
+                this.disable_status_editing = false;
+            } else
+            {
+                this.disable_status_editing = true;
+            }
+        },
+        //---------------------------------------------------------------------
+
+        addStatus: function()
+        {
+            this.item.content_statuses.push(this.status);
+            this.status = null;
+            this.update('item', this.item);
+        },
+        //---------------------------------------------------------------------
+        setActiveTheme: function (set_null = true) {
+
+            if(set_null){
+                this.item.vh_theme_location_id = '';
+            }
+
+            this.update('item', this.item);
+
+            this.page.active_theme = {
+                'locations':[]
+            };
+
+            this.update('active_theme', this.page.active_theme);
+
+            if(this.item.vh_theme_id && this.assets && this.assets.themes){
+                let theme = this.$vaah.findInArrayByKey(this.assets.themes,
+                    'id', this.item.vh_theme_id);
+
+                this.update('active_theme', theme);
+            }
+
+
+        },
+        //---------------------------------------------------------------------
+        resetActiveItem: function () {
+            this.update('active_item', null);
+            this.$router.push({name:'blocks.list'});
+        },
+    }
+}
diff --git a/Vue/pages/blocks/List.vue b/Vue/pages/blocks/List.vue
new file mode 100644
index 0000000..58247b6
--- /dev/null
+++ b/Vue/pages/blocks/List.vue
@@ -0,0 +1,334 @@
+<script src="./ListJs.js"></script>
+<template>
+    <div class="form-page-v1-layout">
+
+        <div class="container" >
+
+            <div class="columns">
+
+                <!--left-->
+                <div class="column"
+                     :class="{'is-12': page.list_view == 'large',
+                     'is-3': page.list_view == 'small',
+                     }">
+
+                    <!--card-->
+                    <div class="card" v-if="page.assets && page.list">
+
+                        <!--header-->
+                        <div class="card-header">
+
+                            <div class="card-header-title">
+                                Blocks
+                            </div>
+
+                            <div class="card-header-buttons">
+                                <div class="field has-addons is-pulled-right">
+
+                                    <p class="control">
+                                        <b-button type="is-light"
+                                                  @click="toCreate()"
+                                                  icon-left="plus">
+                                            Create
+                                        </b-button>
+                                    </p>
+                                    <div class="control">
+                                        <b-button type="is-light"
+                                                  @click="sync()"
+                                                  :loading="is_btn_loading"
+                                                  icon-left="redo-alt">
+                                        </b-button>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                        <!--/header-->
+
+                        <!--content-->
+                        <div class="card-content">
+
+
+                            <div class="block" >
+
+
+
+                                <!--actions-->
+                                <div class="level" v-if="page.list_view !='small'">
+
+                                    <!--left-->
+                                    <div class="level-left" >
+                                        <div  class="level-item" >
+                                            <b-field >
+
+                                                <b-select placeholder="- Bulk Actions -"
+                                                          v-model="page.bulk_action.action">
+                                                    <option value="">
+                                                        - Bulk Actions -
+                                                    </option>
+                                                    <option
+                                                            v-for="option in page.assets.bulk_actions"
+                                                            :value="option.slug"
+                                                            :key="option.slug">
+                                                        {{ option.name }}
+                                                    </option>
+                                                </b-select>
+
+                                                <b-select placeholder="- Select Status -"
+                                                          v-if="page.bulk_action.action == 'bulk-change-status'"
+                                                          v-model="page.bulk_action.data.status">
+                                                    <option value="">
+                                                        - Select Status -
+                                                    </option>
+                                                    <option value=1>
+                                                        Published
+                                                    </option>
+                                                    <option value=0>
+                                                        Unpublished
+                                                    </option>
+                                                </b-select>
+
+                                                <p class="control">
+                                                    <button class="button is-primary"
+                                                            @click="actions">
+                                                        Apply
+                                                    </button>
+                                                </p>
+
+                                            </b-field>
+                                        </div>
+                                    </div>
+                                    <!--/left-->
+
+
+                                    <!--right-->
+                                    <div class="level-right" >
+
+                                        <div class="level-item">
+
+                                            <b-field>
+
+                                                <b-input placeholder="Search"
+                                                         type="text"
+                                                         icon="search"
+                                                         @input="delayedSearch"
+                                                         @keyup.enter.prevent="delayedSearch"
+                                                         v-model="query_string.q">
+                                                </b-input>
+
+                                                <p class="control">
+                                                    <button class="button is-primary"
+                                                            @click="getList">
+                                                        Filter
+                                                    </button>
+                                                </p>
+                                                <p class="control">
+                                                    <button class="button is-primary"
+                                                            @click="resetPage">
+                                                        Reset
+                                                    </button>
+                                                </p>
+                                                <p class="control">
+                                                    <button class="button is-primary"
+                                                            @click="toggleFilters()"
+                                                            slot="trigger">
+                                                        <b-icon icon="ellipsis-v"></b-icon>
+                                                    </button>
+                                                </p>
+                                            </b-field>
+
+                                        </div>
+
+                                    </div>
+                                    <!--/right-->
+
+                                </div >
+                                <!--/actions-->
+
+                                <b-field v-else>
+                                    <b-input placeholder="Search"
+                                             expanded
+                                             type="text"
+                                             icon="search"
+                                             @input="delayedSearch"
+                                             @keyup.enter.prevent="delayedSearch"
+                                             v-model="query_string.q">
+                                    </b-input>
+                                </b-field>
+
+
+                                <!--filters-->
+                                <div class="level" v-if="page.show_filters && page.list_view !='small'">
+
+                                    <div class="level-left">
+
+                                        <div class="level-item">
+
+                                            <b-field label="">
+                                                <b-select placeholder="- Select a filter -"
+                                                          v-model="query_string.filter"
+                                                          @input="setFilter()">
+
+                                                    <option value="">Select a filter</option>
+
+                                                    <optgroup label="Status">
+                                                        <option value=01>
+                                                            Published
+                                                        </option>
+                                                        <option value=10>
+                                                            Unpublished
+                                                        </option>
+                                                    </optgroup>
+
+                                                    <optgroup v-for="(theme, index) in page.assets.themes" :label="theme.name">
+                                                        <option v-for="(location, index) in theme.locations"
+                                                                :value="location.slug"
+                                                        >{{location.name}}
+                                                        </option>
+                                                    </optgroup>
+
+                                                </b-select>
+                                            </b-field>
+
+
+                                        </div>
+
+                                        <div class="level-item">
+
+                                            <b-field label="">
+                                                <b-select placeholder="- Sort by -"
+                                                          v-model="query_string.sort_by"
+                                                          @input="setFilter()">
+                                                    <option value="">
+                                                        -  Sort by -
+                                                    </option>
+                                                    <option value=id>
+                                                        Id
+                                                    </option>
+                                                    <option value=name>
+                                                        Name
+                                                    </option>
+                                                    <option value=is_published>
+                                                        Is Published
+                                                    </option>
+                                                    <option value=updated_at>
+                                                       Updated At
+                                                    </option>
+
+                                                </b-select>
+                                            </b-field>
+
+
+                                        </div>
+                                        <div class="level-item">
+
+                                            <b-field label="">
+                                                <b-dropdown aria-role="list" @input="setFilter()" v-model="query_string.sort_order">
+                                                    <button class="button is-primary" type="button" slot="trigger">
+                                                        <span v-if="query_string.sort_order === 'desc'">Descending</span>
+                                                        <span v-else>Ascending</span>
+                                                    </button>
+
+                                                    <b-dropdown-item  value="desc">
+                                                        <span>Descending</span>
+                                                    </b-dropdown-item>
+                                                    <b-dropdown-item  value="asc">
+                                                        <span>Ascending</span>
+                                                    </b-dropdown-item>
+                                                </b-dropdown>
+                                            </b-field>
+
+
+                                        </div>
+
+                                        <div class="level-item">
+                                            <div class="field">
+                                                <b-checkbox v-model="query_string.trashed"
+                                                            @input="getList"
+                                                >
+                                                    Include Trashed
+                                                </b-checkbox>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                    <div class="level-right">
+
+                                        <div class="level-item">
+
+                                            <b-field>
+                                                <b-datepicker
+                                                        position="is-bottom-left"
+                                                        placeholder="- Select a dates -"
+                                                        v-model="selected_date"
+                                                        @input="setDateRange"
+                                                        range>
+                                                </b-datepicker>
+                                            </b-field>
+
+
+                                        </div>
+
+                                    </div>
+
+
+                                </div>
+                                <!--/filters-->
+
+
+                                <!--list-->
+                                <div class="block ">
+
+                                    <div class="block" style="margin-bottom: 0px;" >
+
+                                        <div v-if="page.list_view == 'small'">
+                                            <ListSmallView @eReloadList="getList"/>
+                                        </div>
+
+                                        <div v-else>
+                                            <ListLargeView @eReloadList="getList"/>
+                                        </div>
+
+                                    </div>
+
+                                    <hr style="margin-top: 0;"/>
+
+                                    <div class="block" v-if="page.list">
+                                        <b-pagination  :total="page.list.total"
+                                               :current.sync="page.list.current_page"
+                                               :per-page="page.list.per_page"
+                                               range-before=3
+                                               range-after=3
+                                               @change="paginate">
+                                        </b-pagination>
+                                    </div>
+
+                                </div>
+                                <!--/list-->
+
+
+
+                            </div>
+
+
+                        </div>
+                        <!--/content-->
+
+                    </div>
+                    <!--/card-->
+
+
+                </div>
+                <!--/left-->
+
+                <router-view @eReloadList="getList"></router-view>
+
+            </div>
+
+
+        </div>
+
+    </div>
+</template>
+
+
diff --git a/Vue/pages/blocks/ListJs.js b/Vue/pages/blocks/ListJs.js
new file mode 100644
index 0000000..45d1f28
--- /dev/null
+++ b/Vue/pages/blocks/ListJs.js
@@ -0,0 +1,337 @@
+import GlobalComponents from '../../vaahvue/helpers/GlobalComponents';
+import ListLargeView from './partials/ListLargeView';
+import ListSmallView from './partials/ListSmallView';
+
+let namespace = 'blocks';
+
+export default {
+    computed:{
+        root() {return this.$store.getters['root/state']},
+        page() {return this.$store.getters[namespace+'/state']},
+        ajax_url() {return this.$store.getters[namespace+'/state'].ajax_url},
+        query_string() {return this.$store.getters[namespace+'/state'].query_string},
+    },
+    components:{
+        ...GlobalComponents,
+        ListLargeView,
+        ListSmallView,
+
+    },
+    data()
+    {
+        return {
+            namespace: namespace,
+            is_content_loading: false,
+            is_btn_loading: false,
+            assets: null,
+            selected_date: null,
+            search_delay: null,
+            search_delay_time: 800,
+            ids: [],
+            moduleSection: null,
+        }
+    },
+    watch: {
+        $route(to, from) {
+            this.updateView();
+            this.updateQueryString();
+        }
+    },
+    mounted() {
+        //----------------------------------------------------
+        this.onLoad();
+        //----------------------------------------------------
+        //----------------------------------------------------
+    },
+    methods: {
+        //---------------------------------------------------------------------
+        update: function(name, value)
+        {
+            let update = {
+                state_name: name,
+                state_value: value,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+        updateView: function()
+        {
+            this.$store.dispatch(this.namespace+'/updateView', this.$route);
+        },
+        //---------------------------------------------------------------------
+        onLoad: function()
+        {
+            this.updateView();
+            this.updateQueryString();
+            this.getAssets();
+            this.setDateFilter();
+        },
+        //---------------------------------------------------------------------
+        toCreate: function()
+        {
+            this.update('active_item', null);
+            this.$router.push({name:'blocks.create'});
+        },
+        //---------------------------------------------------------------------
+        updateQueryString: function()
+        {
+            let query = this.$vaah.removeEmpty(this.$route.query);
+            if(Object.keys(query).length)
+            {
+                for(let key in query)
+                {
+                    this.query_string[key] = query[key];
+                }
+            }
+            this.update('query_string', this.query_string);
+            this.$vaah.updateCurrentURL(this.query_string, this.$router);
+        },
+        //---------------------------------------------------------------------
+        async getAssets() {
+            await this.$store.dispatch(this.namespace+'/getAssets');
+            this.getList();
+        },
+        //---------------------------------------------------------------------
+        toggleFilters: function()
+        {
+            if(this.page.show_filters == false)
+            {
+                this.page.show_filters = true;
+            } else
+            {
+                this.page.show_filters = false;
+            }
+
+            this.update('show_filters', this.page.show_filters);
+
+        },
+        //---------------------------------------------------------------------
+        clearSearch: function () {
+            this.query_string.q = null;
+            this.update('query_string', this.query_string);
+            this.getList();
+        },
+        //---------------------------------------------------------------------
+        setDateFilter: function()
+        {
+            if(this.query_string.from){
+                let from = new Date(this.query_string.from);
+
+                this.selected_date=[
+                    from
+                ];
+            }
+
+            if(this.query_string.to){
+                let to = new Date(this.query_string.to);
+
+                this.selected_date[1] = to;
+            }
+        },
+        //---------------------------------------------------------------------
+        resetPage: function()
+        {
+
+            //reset query strings
+            this.resetQueryString();
+
+            //reset bulk actions
+            this.resetBulkAction();
+
+            this.resetSelectedDate();
+
+            //reload page list
+            this.getList();
+
+        },
+        //---------------------------------------------------------------------
+        resetSelectedDate: function()
+        {
+            this.selected_date = null;
+        },
+        //---------------------------------------------------------------------
+        resetQueryString: function()
+        {
+            for(let key in this.query_string)
+            {
+                if(key == 'page')
+                {
+                    this.query_string[key] = 1;
+                } else if(key == 'sort_order')
+                {
+                    this.query_string[key] = 'desc';
+                } else
+                {
+                    this.query_string[key] = null;
+                }
+            }
+
+            this.update('query_string', this.query_string);
+        },
+        //---------------------------------------------------------------------
+        resetBulkAction: function()
+        {
+            this.page.bulk_action = {
+                selected_items: [],
+                data: {},
+                action: null,
+            };
+            this.update('bulk_action', this.page.bulk_action);
+        },
+        //---------------------------------------------------------------------
+        paginate: function(page=1)
+        {
+            this.query_string.page = page;
+            this.update('query_string', this.query_string);
+            this.getList();
+        },
+        //---------------------------------------------------------------------
+        delayedSearch: function()
+        {
+            let self = this;
+            clearTimeout(this.search_delay);
+            this.search_delay = setTimeout(function() {
+                self.getList();
+            }, this.search_delay_time);
+
+            this.query_string.page = 1;
+            this.update('query_string', this.query_string);
+
+        },
+        //---------------------------------------------------------------------
+        getList: function () {
+            this.$Progress.start();
+            this.$vaah.updateCurrentURL(this.query_string, this.$router);
+            let url = this.ajax_url+'/list';
+            this.$vaah.ajaxGet(url, this.query_string, this.getListAfter);
+        },
+        //---------------------------------------------------------------------
+        getListAfter: function (data, res) {
+
+            this.update('is_list_loading', false);
+
+            if(data){
+
+                console.log('--->data.list', data.list);
+
+                this.update('list', data.list);
+
+
+                this.update('total_roles', data.totalRole);
+                this.update('total_users', data.totalUser);
+
+                if(data.list.total === 0)
+                {
+                    this.update('list_is_empty', true);
+                }else{
+                    this.update('list_is_empty', false);
+                }
+
+                this.page.query_string.recount = null;
+
+                this.update('query_string', this.page.query_string);
+                this.$vaah.updateCurrentURL(this.page.query_string, this.$router);
+
+                this.is_btn_loading = false;
+
+            }
+
+            this.$Progress.finish();
+
+        },
+        //---------------------------------------------------------------------
+        actions: function () {
+
+            if(!this.page.bulk_action.action)
+            {
+                this.$vaah.toastErrors(['Select an action']);
+                return false;
+            }
+
+            if(this.page.bulk_action.action == 'bulk-change-status'){
+                if(!this.page.bulk_action.data.status){
+                    this.$vaah.toastErrors(['Select a status']);
+                    return false;
+                }
+            }
+
+            if(this.page.bulk_action.selected_items.length < 1)
+            {
+                this.$vaah.toastErrors(['Select a record']);
+                return false;
+            }
+
+            this.$Progress.start();
+            this.update('bulk_action', this.page.bulk_action);
+            let ids = this.$vaah.pluckFromObject(this.page.bulk_action.selected_items, 'id');
+
+            let params = {
+                inputs: ids,
+                data: this.page.bulk_action.data
+            };
+
+            let url = this.ajax_url+'/actions/'+this.page.bulk_action.action;
+            this.$vaah.ajax(url, params, this.actionsAfter);
+        },
+        //---------------------------------------------------------------------
+        actionsAfter: function (data, res) {
+            if(data)
+            {
+                this.$root.$emit('eReloadItem');
+                this.resetBulkAction();
+                this.getList();
+            } else
+            {
+                this.$Progress.finish();
+            }
+            this.reloadRootAssets();
+        },
+        //---------------------------------------------------------------------
+        async reloadRootAssets() {
+            await this.$store.dispatch('root/reloadAssets');
+        },
+        //---------------------------------------------------------------------
+        sync: function () {
+
+            this.page.query_string.recount = true;
+
+            this.is_btn_loading = true;
+
+            this.update('query_string', this.page.query_string);
+            this.getList();
+        },
+        //---------------------------------------------------------------------
+
+        //---------------------------------------------------------------------
+        setFilter: function (data) {
+
+            if(!isNaN(this.query_string.filter)){
+                this.query_string.location = null;
+            }
+
+            this.query_string.page = 1;
+            this.update('query_string', this.query_string);
+
+            this.getList();
+
+        },
+        //---------------------------------------------------------------------
+        setDateRange: function()
+        {
+
+            if(this.selected_date.length > 0){
+                let current_datetime = new Date(this.selected_date[0]);
+                this.query_string.from = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate();
+
+                current_datetime = new Date(this.selected_date[1]);
+                this.query_string.to = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate();
+
+                this.getList();
+            }
+
+        },
+        //---------------------------------------------------------------------
+        //---------------------------------------------------------------------
+    }
+}
diff --git a/Vue/pages/blocks/View.vue b/Vue/pages/blocks/View.vue
new file mode 100644
index 0000000..1f2ec37
--- /dev/null
+++ b/Vue/pages/blocks/View.vue
@@ -0,0 +1,210 @@
+<script src="./ViewJs.js"></script>
+<template>
+
+    <div class="column" v-if="page.assets">
+
+        <div class="card" v-if="is_content_loading">
+            <Loader/>
+        </div>
+
+        <div class="columns" v-else-if="item">
+
+            <div class="column">
+
+                <div class="card has-margin-bottom-15">
+                    <div class="card-header">
+
+                        <div class="card-header-title">
+                            <span>Content</span>
+                        </div>
+
+                    </div>
+
+                    <div class="card-content">
+
+                        <div class="content" v-html="item.content"></div>
+
+
+                    </div>
+
+                </div>
+
+
+            </div>
+
+
+
+            <div class="column is-5">
+
+                <div class="card">
+
+                    <!--header-->
+                    <header class="card-header">
+
+                        <div class="card-header-title">
+                            <span>{{$vaah.limitString(item.name, 15)}}</span>
+                        </div>
+
+                        <div class="card-header-buttons">
+
+                            <div class="field has-addons is-pulled-right">
+                                <p class="control">
+                                    <b-button @click="$vaah.copy(item.id)"  type="is-light">
+                                        <small><b>#{{item.id}}</b></small>
+                                    </b-button>
+                                </p>
+                                <p class="control">
+                                    <b-button icon-left="edit"
+                                              type="is-light"
+                                              tag="router-link"
+                                              :to="{name:'blocks.edit', params:{id: item.id}}">
+                                        Edit
+                                    </b-button>
+                                </p>
+                                <p class="control">
+
+
+                                    <b-dropdown aria-role="list" position="is-bottom-left">
+                                        <button class="button is-light" slot="trigger">
+                                            <b-icon icon="caret-down"></b-icon>
+                                        </button>
+
+                                        <b-dropdown-item aria-role="listitem"
+                                                         v-if="!item.deleted_at"
+                                                         @click="actions('bulk-trash')"
+                                        >
+                                            <b-icon icon="trash"></b-icon>
+                                            Trash
+                                        </b-dropdown-item>
+
+                                        <b-dropdown-item aria-role="listitem"
+                                                         v-if="item.deleted_at"
+                                                         @click="actions('bulk-restore')"
+                                        >
+                                            <b-icon icon="trash-restore"></b-icon>
+                                            Restore
+                                        </b-dropdown-item>
+                                        <b-dropdown-item aria-role="listitem"
+                                                         @click="confirmDelete()"
+                                        >
+                                            <b-icon icon="eraser"></b-icon>
+                                            Delete
+                                        </b-dropdown-item>
+
+                                    </b-dropdown>
+
+
+                                </p>
+                                <p class="control">
+                                    <b-button type="is-light"
+                                              @click="resetActiveItem()"
+                                              icon-left="times">
+                                    </b-button>
+                                </p>
+
+
+                            </div>
+
+
+                        </div>
+
+                    </header>
+                    <!--/header-->
+
+                    <b-notification type="is-danger"
+                                    :closable="false"
+                                    class="is-light is-small"
+                                    v-if="item.deleted_at"
+                    >
+                        Deleted {{$vaah.fromNow(item.deleted_at)}}
+                    </b-notification>
+
+                    <!--content-->
+                    <div class="card-content is-paddingless ">
+
+
+
+                        <div class="block" >
+
+
+                            <div class="b-table">
+
+                                <div class="table-wrapper">
+                                    <table class="table is-hoverable">
+
+                                        <tbody>
+
+                                        <template v-for="(value, label) in item">
+
+
+
+                                            <template v-if="label == 'is_published' || label == 'is_commentable'">
+                                                <TableTrStatus :value="value"
+                                                               :label="label">
+                                                </TableTrStatus>
+                                            </template>
+
+                                            <template v-else-if="label == 'created_by'">
+                                                <TableTrActedBy :value="item['created_by_user']"
+                                                               :label="label">
+                                                </TableTrActedBy>
+                                            </template>
+
+                                            <template v-else-if="label == 'updated_by'">
+                                                <TableTrActedBy :value="item['updated_by_user']"
+                                                                :label="label">
+
+                                                </TableTrActedBy>
+                                            </template>
+
+                                            <template v-else-if="label == 'deleted_by'">
+                                                <TableTrActedBy :value="item['deleted_by_user']"
+                                                                :label="label">
+
+                                                </TableTrActedBy>
+                                            </template>
+
+                                            <template v-else-if="label == 'created_by_user'
+                                              || label == 'updated_by_user'
+                                              || label == 'content'
+                                              || label == 'deleted_by_user'">
+
+                                            </template>
+
+                                            <template v-else>
+                                                <TableTrView :value="value"
+                                                             :label="label"
+                                                             :is_copiable="isCopiable(label)"
+                                                             :is_upper_case="isUpperCase(label)">
+
+                                                </TableTrView>
+                                            </template>
+
+                                        </template>
+
+                                        </tbody>
+
+
+
+                                    </table>
+                                </div>
+
+                            </div>
+
+
+                        </div>
+                    </div>
+                    <!--/content-->
+
+
+                </div>
+
+
+
+
+    </div>
+        </div>
+    </div>
+</template>
+
+
diff --git a/Vue/pages/blocks/ViewJs.js b/Vue/pages/blocks/ViewJs.js
new file mode 100644
index 0000000..7bdf25f
--- /dev/null
+++ b/Vue/pages/blocks/ViewJs.js
@@ -0,0 +1,204 @@
+import GlobalComponents from '../../vaahvue/helpers/GlobalComponents'
+import TableTrView from '../../vaahvue/reusable/TableTrView'
+import TableTrActedBy from '../../vaahvue/reusable/TableTrActedBy'
+import TableTrStatus from '../../vaahvue/reusable/TableTrStatus'
+
+let namespace = 'blocks';
+
+export default {
+    computed:{
+        root() {return this.$store.getters['root/state']},
+        page() {return this.$store.getters[namespace+'/state']},
+        ajax_url() {return this.$store.getters[namespace+'/state'].ajax_url},
+        item() {return this.$store.getters[namespace+'/state'].active_item},
+    },
+    components:{
+        ...GlobalComponents,
+        TableTrView,
+        TableTrStatus,
+        TableTrActedBy,
+    },
+    data()
+    {
+        return {
+            namespace: namespace,
+            is_btn_loading: false,
+            is_content_loading: false,
+        }
+    },
+    watch: {
+        $route(to, from) {
+            this.updateView();
+            this.getItem();
+        }
+    },
+    mounted() {
+        //----------------------------------------------------
+        this.onLoad();
+        //----------------------------------------------------
+        this.$root.$on('eReloadItem', this.getItem);
+        //----------------------------------------------------
+        this.$root.$on('eResetBulkActions', this.resetBulkAction);
+        //----------------------------------------------------
+        //----------------------------------------------------
+    },
+    methods: {
+        //---------------------------------------------------------------------
+        update: function(name, value)
+        {
+            let update = {
+                state_name: name,
+                state_value: value,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+        updateView: function()
+        {
+            this.$store.dispatch(this.namespace+'/updateView', this.$route);
+        },
+        //---------------------------------------------------------------------
+        onLoad: function()
+        {
+            this.is_content_loading = true;
+
+            this.updateView();
+            this.getAssets();
+            this.getItem();
+        },
+        //---------------------------------------------------------------------
+        async getAssets() {
+            await this.$store.dispatch(namespace+'/getAssets');
+        },
+        //---------------------------------------------------------------------
+        getItem: function () {
+            this.$Progress.start();
+            this.params = {};
+            let url = this.ajax_url+'/item/'+this.$route.params.id;
+            this.$vaah.ajaxGet(url, this.params, this.getItemAfter);
+        },
+        //---------------------------------------------------------------------
+        getItemAfter: function (data, res) {
+            this.$Progress.finish();
+            this.is_content_loading = false;
+
+            if(data && data)
+            {
+                if(data.is_active == 1){
+                    data.is_active = 'Yes';
+                }else{
+                    data.is_active = 'No';
+                }
+                this.update('active_item', data);
+            } else
+            {
+                //if item does not exist or delete then redirect to list
+                this.update('active_item', null);
+                this.$router.push({name: 'perm.list'});
+            }
+        },
+        //---------------------------------------------------------------------
+        actions: function (action) {
+
+            this.$Progress.start();
+            this.page.bulk_action.action = action;
+            this.update('bulk_action', this.page.bulk_action);
+            let params = {
+                inputs: [this.item.id],
+                data: null
+            };
+
+            let url = this.ajax_url+'/actions/'+this.page.bulk_action.action;
+            this.$vaah.ajax(url, params, this.actionsAfter);
+
+        },
+        //---------------------------------------------------------------------
+        actionsAfter: function (data, res) {
+            let action = this.page.bulk_action.action;
+            if(data)
+            {
+                this.resetBulkAction();
+                this.$emit('eReloadList');
+
+                if(action == 'bulk-delete')
+                {
+                    this.$router.push({name: 'blocks.list'});
+                } else
+                {
+                    this.getItem();
+                }
+
+            } else
+            {
+                this.$Progress.finish();
+            }
+
+            this.reloadRootAssets();
+        },
+        //---------------------------------------------------------------------
+        //---------------------------------------------------------------------
+        resetBulkAction: function()
+        {
+            this.page.bulk_action = {
+                selected_items: [],
+                data: {},
+                action: "",
+            };
+            this.update('bulk_action', this.page.bulk_action);
+        },
+        //---------------------------------------------------------------------
+        confirmDelete: function()
+        {
+            let self = this;
+            this.$buefy.dialog.confirm({
+                title: 'Deleting record',
+                message: 'Are you sure you want to <b>delete</b> the record? This action cannot be undone.',
+                confirmText: 'Delete',
+                type: 'is-danger',
+                hasIcon: true,
+                onConfirm: function () {
+                    self.actions('bulk-delete');
+                }
+            })
+        },
+        //---------------------------------------------------------------------
+        isCopiable: function (label) {
+
+            if(
+                label == 'id' || label == 'uuid' || label == 'slug' || label == 'plural_slug' || label == 'singular_slug'
+            )
+            {
+                return true;
+            }
+
+            return false;
+
+        },
+        //---------------------------------------------------------------------
+        isUpperCase: function (label) {
+
+            if(
+                label == 'id' || label == 'uuid'
+            )
+            {
+                return true;
+            }
+
+            return false;
+
+        },
+        //---------------------------------------------------------------------
+        resetActiveItem: function () {
+            this.update('active_item', null);
+            this.$router.push({name:'blocks.list'});
+        },
+        //---------------------------------------------------------------------
+        async reloadRootAssets() {
+            await this.$store.dispatch('root/reloadAssets');
+        },
+        //---------------------------------------------------------------------
+
+        //---------------------------------------------------------------------
+    }
+}
diff --git a/Vue/pages/blocks/partials/ListLargeView.vue b/Vue/pages/blocks/partials/ListLargeView.vue
new file mode 100644
index 0000000..833c562
--- /dev/null
+++ b/Vue/pages/blocks/partials/ListLargeView.vue
@@ -0,0 +1,127 @@
+<script src="./ListLargeViewJs.js"></script>
+<template>
+    <div>
+        <b-table :data="page.list_is_empty ? [] : page.list.data"
+                 :checkable="true"
+                 :checked-rows.sync="page.bulk_action.selected_items"
+                 checkbox-position="left"
+                 :hoverable="true"
+                 :row-class="setRowClass">
+
+            <template  >
+                <b-table-column v-slot="props" field="id" label="ID" width="85" >
+                    {{ props.row.id }}
+                </b-table-column>
+
+                <b-table-column v-slot="props" field="name" label="Name">
+
+                    <b-tooltip label="Copy Block" type="is-dark">
+                        <vh-copy class="text-copyable"
+                                 :label="props.row.name"
+                                 @copied="copyCode(props.row)"
+                        >
+                            <b-icon icon="copy"></b-icon>
+                        </vh-copy>
+
+                    </b-tooltip>
+                </b-table-column>
+
+
+
+                <b-table-column v-slot="props" width="250"
+                                field="theme" label="Theme / Location">
+
+                    <b-taglist attached>
+                        <b-tag v-if="props.row.theme" type="is-dark">
+                            {{props.row.theme.name}}
+                        </b-tag>
+                        <b-tag v-if="props.row.theme_location" type="is-info">
+                            {{props.row.theme_location.name}}
+                        </b-tag>
+                        <b-tag v-if="props.row.theme_location||props.row.theme" type="is-default">
+                            <b-tooltip label="Copy Location Blocks" type="is-dark">
+                                <vh-copy class="text-copyable"
+                                         @copied="copyCode(props.row,true)"
+                                >
+                                    <b-icon icon="copy"></b-icon>
+                                </vh-copy>
+                            </b-tooltip>
+                        </b-tag>
+                    </b-taglist>
+
+
+                </b-table-column>
+
+                <b-table-column v-slot="props" width="100"
+                                field="is_published" label="Is Published">
+
+                    <div v-if="props.row.deleted_at">
+
+                        <b-button v-if="props.row.is_published === 1"
+                                  disabled rounded size="is-small"
+                                  type="is-success">
+                            Yes
+                        </b-button>
+                        <b-button v-else rounded size="is-small" disabled type="is-danger">
+                            No
+                        </b-button>
+
+                    </div>
+
+                    <div v-else>
+                        <b-tooltip label="Change Status" type="is-dark">
+                        <b-button v-if="props.row.is_published === 1" rounded size="is-small"
+                                  type="is-success" @click="changeStatus(props.row.id)">
+                            Yes
+                        </b-button>
+                        <b-button v-else rounded size="is-small" type="is-danger"
+                                  @click="changeStatus(props.row.id)">
+                            No
+                        </b-button>
+                    </b-tooltip>
+                    </div>
+
+
+                </b-table-column>
+
+
+                <b-table-column v-slot="props" width="150px" field="updated_at" label="Updated At">
+                    <span>
+                        {{$vaah.fromNow(props.row.updated_at)}}
+                    </span>
+                </b-table-column>
+
+
+                <b-table-column v-slot="props" field="actions" label=""
+                                width="80">
+
+                    <b-tooltip label="Edit" type="is-dark">
+                        <b-button size="is-small"
+                                  @click="toEdit(props.row)"
+                                  icon-left="pencil-alt">
+                        </b-button>
+                    </b-tooltip>
+
+                    <b-tooltip label="View" type="is-dark">
+                        <b-button size="is-small"
+                                  @click="setActiveItem(props.row)"
+                                  icon-left="chevron-right">
+                        </b-button>
+                    </b-tooltip>
+
+
+                </b-table-column>
+            </template>
+
+            <template slot="empty">
+                <section class="section">
+                    <div class="content has-text-grey has-text-centered">
+                        <p>Nothing here.</p>
+                    </div>
+                </section>
+            </template>
+
+        </b-table>
+    </div>
+</template>
+
diff --git a/Vue/pages/blocks/partials/ListLargeViewJs.js b/Vue/pages/blocks/partials/ListLargeViewJs.js
new file mode 100644
index 0000000..646c0f6
--- /dev/null
+++ b/Vue/pages/blocks/partials/ListLargeViewJs.js
@@ -0,0 +1,134 @@
+import copy from "copy-to-clipboard";
+
+let namespace = 'blocks';
+export default {
+    computed: {
+        root() {return this.$store.getters['root/state']},
+        page() {return this.$store.getters[namespace+'/state']},
+        ajax_url() {return this.$store.getters[namespace+'/state'].ajax_url},
+        query_string() {return this.$store.getters[namespace+'/state'].query_string},
+    },
+    components:{
+
+    },
+
+    data()
+    {
+        let obj = {
+            namespace: namespace,
+            icon_copy: "<b-icon icon='envelope' size='is-small'></b-icon>"
+        };
+
+        return obj;
+    },
+    created() {
+    },
+    mounted(){
+
+    },
+
+    watch: {
+
+    },
+    methods: {
+        //---------------------------------------------------------------------
+        update: function(name, value)
+        {
+            let update = {
+                state_name: name,
+                state_value: value,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+
+        //---------------------------------------------------------------------
+        setRowClass: function(row, index)
+        {
+
+            if(this.page.active_item && row.id == this.page.active_item.id)
+            {
+                return 'is-selected';
+            }
+
+            if(row.deleted_at != null)
+            {
+                return 'is-danger';
+            }
+
+        },
+        //---------------------------------------------------------------------
+        setActiveItem: function (item) {
+            this.update('active_item', item);
+            this.$router.push({name: 'blocks.view', params:{id:item.id}})
+        },
+        //---------------------------------------------------------------------
+        changeStatus: function (id) {
+            this.$Progress.start();
+            let url = this.ajax_url+'/actions/bulk-change-status';
+            let params = {
+                inputs: [id],
+                data: null
+            };
+            this.$vaah.ajax(url, params, this.changeStatusAfter);
+        },
+        //---------------------------------------------------------------------
+        changeStatusAfter: function (data,res) {
+            this.$emit('eReloadList');
+            this.reloadRootAssets();
+            this.update('is_list_loading', false);
+
+        },
+        //---------------------------------------------------------------------
+        async reloadRootAssets() {
+            await this.$store.dispatch('root/reloadAssets');
+        },
+        //---------------------------------------------------------------------
+
+        //---------------------------------------------------------------------
+        copiedData: function (data) {
+
+            this.$vaah.toastSuccess(['copied']);
+
+            // alertify.success('copied');
+
+            this.$vaah.console(data, 'copied data');
+
+        },
+        //---------------------------------------------------------------------
+        copyCode: function (item,has_location = false)
+        {
+            let code = "";
+
+
+
+            if(has_location){
+                if(item && item.theme_location && item.theme_location.slug){
+                    code = "{!! vh_location_blocks('"+item.theme_location.slug+"') !!}";
+                }
+            }else{
+                if(item && item.slug){
+                    code = "{!! vh_block('"+item.slug+"') !!}";
+                }
+            }
+
+
+
+            copy(code);
+
+            this.$buefy.toast.open({
+                message: 'Copied!',
+                type: 'is-success'
+            });
+        },
+        //---------------------------------------------------------------------
+        toEdit: function (item) {
+            this.update('active_item', item);
+            this.$router.push({name:'blocks.edit', params:{id:item.id}});
+
+        }
+        //---------------------------------------------------------------------
+        //---------------------------------------------------------------------
+    }
+}
diff --git a/Vue/pages/blocks/partials/ListSmallView.vue b/Vue/pages/blocks/partials/ListSmallView.vue
new file mode 100644
index 0000000..ed9088e
--- /dev/null
+++ b/Vue/pages/blocks/partials/ListSmallView.vue
@@ -0,0 +1,56 @@
+<script src="./ListSmallViewJs.js"></script>
+<template>
+    <div>
+
+        <b-table :data="page.list_is_empty ? [] : page.list.data"
+                 :hoverable="true"
+                 :row-class="setRowClass">
+
+            <template  >
+
+                <b-table-column v-slot="props" field="name" label="Name">
+                    <b-tooltip label="Copy Block" type="is-dark">
+                        <vh-copy class="text-copyable"
+                                 :label="props.row.name"
+                                 @copied="copyCode(props.row)"
+                        >
+                            <b-icon icon="copy"></b-icon>
+                        </vh-copy>
+
+                    </b-tooltip>
+                </b-table-column>
+
+                <b-table-column v-slot="props" field="actions" label=""
+                                width="80">
+
+                    <b-tooltip label="Edit" type="is-dark">
+                        <b-button size="is-small"
+                                  @click="toEdit(props.row)"
+                                  icon-left="pencil-alt">
+                        </b-button>
+                    </b-tooltip>
+
+                    <b-tooltip label="View" type="is-dark">
+                        <b-button size="is-small"
+                                  @click="setActiveItem(props.row)"
+                                  icon-left="chevron-right">
+                        </b-button>
+                    </b-tooltip>
+
+
+                </b-table-column>
+
+            </template>
+
+            <template slot="empty">
+                <section class="section">
+                    <div class="content has-text-grey has-text-centered">
+                        <p>Nothing here.</p>
+                    </div>
+                </section>
+            </template>
+
+        </b-table>
+    </div>
+</template>
+
diff --git a/Vue/pages/blocks/partials/ListSmallViewJs.js b/Vue/pages/blocks/partials/ListSmallViewJs.js
new file mode 100644
index 0000000..b129f04
--- /dev/null
+++ b/Vue/pages/blocks/partials/ListSmallViewJs.js
@@ -0,0 +1,126 @@
+import copy from "copy-to-clipboard";
+
+let namespace = 'blocks';
+export default {
+    computed: {
+        root() {return this.$store.getters['root/state']},
+        page() {return this.$store.getters[namespace+'/state']},
+        ajax_url() {return this.$store.getters[namespace+'/state'].ajax_url},
+        query_string() {return this.$store.getters[namespace+'/state'].query_string},
+    },
+    components:{
+
+    },
+
+    data()
+    {
+        let obj = {
+            namespace: namespace,
+            icon_copy: "<b-icon icon='envelope' size='is-small'></b-icon>"
+        };
+
+        return obj;
+    },
+    created() {
+    },
+    mounted(){
+
+    },
+
+    watch: {
+
+    },
+    methods: {
+        //---------------------------------------------------------------------
+        update: function(name, value)
+        {
+            let update = {
+                state_name: name,
+                state_value: value,
+                namespace: this.namespace,
+            };
+            this.$vaah.updateState(update);
+        },
+        //---------------------------------------------------------------------
+
+        //---------------------------------------------------------------------
+        setRowClass: function(row, index)
+        {
+
+            if(this.page.active_item && row.id == this.page.active_item.id)
+            {
+                return 'is-selected';
+            }
+
+            if(row.deleted_at != null)
+            {
+                return 'is-danger';
+            }
+
+        },
+        //---------------------------------------------------------------------
+        setActiveItem: function (item) {
+            this.update('active_item', item);
+            this.$router.push({name: 'blocks.view', params:{id:item.id}})
+        },
+        //---------------------------------------------------------------------
+        changeStatus: function (id) {
+            this.$Progress.start();
+            let url = this.ajax_url+'/actions/bulk-change-status';
+            let params = {
+                inputs: [id],
+                data: null
+            };
+            this.$vaah.ajax(url, params, this.changeStatusAfter);
+        },
+        //---------------------------------------------------------------------
+        changeStatusAfter: function (data,res) {
+            this.$emit('eReloadList');
+            this.reloadRootAssets();
+            this.update('is_list_loading', false);
+
+        },
+        //---------------------------------------------------------------------
+        async reloadRootAssets() {
+            await this.$store.dispatch('root/reloadAssets');
+        },
+        //---------------------------------------------------------------------
+
+        //---------------------------------------------------------------------
+        copiedData: function (data) {
+
+            this.$vaah.toastSuccess(['copied']);
+
+            // alertify.success('copied');
+
+            this.$vaah.console(data, 'copied data');
+
+        },
+        //---------------------------------------------------------------------
+        copyCode: function (item)
+        {
+            let code = "";
+
+            if(item && item.slug && item.theme_location && item.theme_location.slug){
+                code = "{!! vh_block('"+item.slug+"') !!}";
+            }
+
+            copy(code);
+
+            this.$buefy.toast.open({
+                message: 'Copied!',
+                type: 'is-success'
+            });
+        },
+
+        //---------------------------------------------------------------------
+        toEdit: function (item) {
+            this.update('active_item', item);
+            this.$router.push({name:'blocks.edit', params:{id:item.id}});
+
+        }
+        //---------------------------------------------------------------------
+        //---------------------------------------------------------------------
+        //---------------------------------------------------------------------
+    }
+}
diff --git a/Vue/pages/contents/Edit.vue b/Vue/pages/contents/Edit.vue
index f54c42f..dffca1e 100644
--- a/Vue/pages/contents/Edit.vue
+++ b/Vue/pages/contents/Edit.vue
@@ -1,8 +1,12 @@
 <script src="./EditJs.js"></script>
 <template>
-    <div class="column" v-if="assets && item && page">
+    <div class="column" v-if="assets">
 
-        <div class="columns">
+        <div class="card" v-if="is_content_loading">
+            <Loader/>
+        </div>
+
+        <div class="columns" v-else-if="item">
 
             <div class="column">
 
@@ -203,7 +207,7 @@
                                  :label-position="labelPosition">
 
 
-                            <b-select v-model="item.vh_theme_template_id" @input="setActiveTemplate">
+                            <b-select v-if="page" v-model="item.vh_theme_template_id" @input="setActiveTemplate">
                                 <option value="">Select a Template</option>
                                 <option v-if="page.active_theme.templates"
                                         v-for="(template, index) in page.active_theme.templates"
diff --git a/Vue/routes/routes.js b/Vue/routes/routes.js
index 82a5379..c843eb6 100644
--- a/Vue/routes/routes.js
+++ b/Vue/routes/routes.js
@@ -132,6 +132,75 @@ routes_list =     {
 
 routes.push(routes_list);
 
+
+import BlockList from "./../pages/blocks/List";
+import BlockCreate from "./../pages/blocks/Create";
+import BlockView from "./../pages/blocks/View";
+import BlockEdit from "./../pages/blocks/Edit";
+
+routes_list =     {
+    path: '/blocks',
+    component: Backend,
+    props: true,
+    meta: {
+        middleware: [
+            GetBackendAssets
+        ]
+    },
+    children: [
+        {
+            path: '/',
+            name: 'blocks.list',
+            component: BlockList,
+            props: true,
+            meta: {
+                middleware: [
+                    GetBackendAssets
+                ]
+            },
+            children: [
+                {
+                    path: 'create',
+                    name: 'blocks.create',
+                    component: BlockCreate,
+                    props: true,
+                    meta: {
+                        middleware: [
+                            GetBackendAssets
+                        ]
+                    },
+                },
+                {
+                    path: 'view/:id',
+                    name: 'blocks.view',
+                    component: BlockView,
+                    props: true,
+                    meta: {
+                        middleware: [
+                            GetBackendAssets
+                        ]
+                    },
+                },
+                {
+                    path: 'edit/:id',
+                    name: 'blocks.edit',
+                    component: BlockEdit,
+                    props: true,
+                    meta: {
+                        middleware: [
+                            GetBackendAssets
+                        ]
+                    },
+                }
+
+            ]
+        }
+
+    ]
+};
+
+routes.push(routes_list);
+
 /*
 |--------------------------------------------------------------------------
 | Contents Routes
diff --git a/Vue/store/modules/blocks.js b/Vue/store/modules/blocks.js
new file mode 100644
index 0000000..28f6ec4
--- /dev/null
+++ b/Vue/store/modules/blocks.js
@@ -0,0 +1,130 @@
+import {VaahHelper as Vaah} from "../../vaahvue/helpers/VaahHelper";
+
+//---------Variables
+let base_url = document.getElementsByTagName('base')[0].getAttribute("href");
+let debug = document.getElementById('debug').getAttribute('content');
+//---------/Variables
+
+let json_url = base_url+"/backend/cms/json";
+let ajax_url = base_url+"/backend/cms/blocks";
+
+export default {
+    namespaced: true,
+    state: {
+        debug: debug,
+        base_url: base_url,
+        ajax_url: ajax_url,
+        json_url: json_url,
+        assets: null,
+        active_theme: {
+            'locations': []
+        },
+        assets_is_fetching: null,
+        assets_reload: false,
+        list: null,
+        list_is_empty: false,
+        is_list_loading: false,
+        list_view: true,
+        active_item: null,
+        is_item_loading: false,
+        show_filters: false,
+        query_string: {
+            page: 1,
+            q: null,
+            trashed: null,
+            filter: null,
+            location: null,
+            sort_by: null,
+            sort_order: 'desc',
+        },
+        bulk_action:{
+            selected_items: [],
+            data: {},
+            action: null,
+        },
+        new_item:{
+            name: null,
+            slug: null,
+            vh_theme_id: "",
+            vh_theme_location_id: "",
+            content: "",
+            is_published: null,
+        },
+
+    },
+    //=========================================================================
+    mutations:{
+        updateState: function (state, payload) {
+            state[payload.key] = payload.value;
+        },
+        //-----------------------------------------------------------------
+    },
+    //=========================================================================
+    actions:{
+        //-----------------------------------------------------------------
+        async getAssets({ state, commit, dispatch, getters }) {
+
+            if(!state.assets_is_fetching || !state.assets)
+            {
+                let payload = {
+                    key: 'assets_is_fetching',
+                    value: true
+                };
+                commit('updateState', payload);
+
+                let url = state.ajax_url+'/assets';
+
+                console.log('--->assets url', url);
+
+                let params = {};
+                let data = await Vaah.ajaxGet(url, params);
+                payload = {
+                    key: 'assets',
+                    value: data.data.data
+                };
+
+                commit('updateState', payload);
+            }
+
+        },
+        //-----------------------------------------------------------------
+        updateView({ state, commit, dispatch, getters }, payload) {
+            let list_view;
+            let update;
+
+            if(payload && payload.name && payload.name == 'blocks.list')
+            {
+                list_view = 'large';
+
+                update = {
+                    key: 'active_item',
+                    value: null
+                };
+
+                commit('updateState', update);
+
+            }
+
+            if(payload.name == 'blocks.create' || payload.name == 'blocks.view' || payload.name == 'blocks.edit')
+            {
+                list_view = 'small';
+            };
+
+            let view = {
+                key: 'list_view',
+                value: list_view
+            };
+
+            commit('updateState', view);
+
+        },
+        //-----------------------------------------------------------------
+    },
+    //=========================================================================
+    getters:{
+        state(state) {return state;},
+        assets(state) {return state.assets;},
+        is_logged_in(state) {return state.is_logged_in;},
+    }
+
+}
diff --git a/Vue/store/store.js b/Vue/store/store.js
index 49c446c..1c90c24 100644
--- a/Vue/store/store.js
+++ b/Vue/store/store.js
@@ -5,6 +5,7 @@ Vue.use(Vuex);
 
 import root from './modules/root';
 import content_types from './modules/content_types';
+import blocks from './modules/blocks';
 import contents from './modules/contents';
 import menus from './modules/menus';
 
@@ -12,6 +13,7 @@ export const store = new Vuex.Store({
     modules: {
         root: root,
         content_types: content_types,
+        blocks: blocks,
         contents: contents,
         menus: menus,
     }
diff --git a/Vue/vaahvue b/Vue/vaahvue
index 5d77880..70a2068 160000
--- a/Vue/vaahvue
+++ b/Vue/vaahvue
@@ -1 +1 @@
-Subproject commit 5d77880a904e694a6c272eb234fdcd6f01c50c7c
+Subproject commit 70a206801477d723a17b1f77eeac81f567244918