diff --git a/app/Http/Controllers/admin/AdminController.php b/app/Http/Controllers/admin/AdminController.php
index 2d85b21..a2b99af 100644
--- a/app/Http/Controllers/admin/AdminController.php
+++ b/app/Http/Controllers/admin/AdminController.php
@@ -13,6 +13,7 @@ use App\User;
 
 
 class AdminController extends Controller
+
 {
     public function dashboard(){
 
@@ -30,13 +31,16 @@ class AdminController extends Controller
 
     public function viewOrders($ck){
         $AdminModel 	    = new AdminModel;
-        // $array_shipping_add = null;
         $order_item_array 	= $AdminModel->selectOrderItem('CartKey', $ck);
 		$item_goup_array 	= $AdminModel->itemGroup($ck);
 		$item_thumbs 		= $AdminModel->selectDisplayItemThumb();
         $array_payment_details 	= 	$AdminModel->selectPaymentDetails('CartKey', $ck);
         $array_shipping_add  = $AdminModel->selectShippingAddress('PaymentDetail_Id', $array_payment_details[0]->Id);
+    
 
+        if(empty($array_shipping_add)){
+            $array_payment_details = array();
+        }
         
         return view('admin_pages.order_details')
                             ->with('array_payment_details', $array_payment_details)
@@ -419,12 +423,12 @@ class AdminController extends Controller
     }
 
     public function saveClipartCategory(Request $request){
-        $post 	=	$request->all();
-        $AdminModel 	    = new AdminModel;
+        $post 	        =	$request->all();
+        $AdminModel 	=   new AdminModel;
 
         $data =  array(
-            'CategoryName' => $post['category'],
-            'IsActive' => $post['is_active']
+            'CategoryName'  => $post['category'],
+            'IsActive'      => $post['is_active']
         );
 
         $res 	= $AdminModel->insertClipartCategory($data);
@@ -446,62 +450,36 @@ class AdminController extends Controller
     }
 
     public function saveSVGClipart(Request $request){
-        $post 	=	$request->all();
-        $AdminModel 	    = new AdminModel;
-        
-        
-
-        $getSVGData     = $post['svg_data'];
+        $post 	        =	$request->all();
+        $AdminModel 	= new AdminModel;
+    
         $category       = $post['category'];
-        $tags           = $post['tags'];
-        $orig_filename  = $post['filename'];
+        $tags           = $post['clipart_tags'];
+        $orig_filename  = $request->file('upload_clipart')->getClientOriginalName();
+        
+        $lower_filename = str_replace(' ','-',strtolower($orig_filename));
+        $getExt 	    = substr($lower_filename, strrpos($lower_filename, '.'));;
+        $clean_filename = preg_replace("/\.[^.\s]{3,4}$/", "", $lower_filename);
+        $final_filename = $clean_filename . "-".uniqid().$getExt;
 
-        var_dump($request->file('svg_data'));
+        $data = array(
+            'CategoryId' =>    $category,
+            'OriginalSVGFilename' => $orig_filename,
+            'SVGFilename' => $final_filename,
+            'Tags' =>       $tags,
+            'IsActive' => 1,
+        );
 
-        // $lower_filename = str_replace(' ','-',strtolower($orig_filename));
-        // $getExt 	    = substr($request->file('svg_data')->getClientOriginalExtension());
-        // $clean_filename = preg_replace("/\.[^.\s]{3,4}$/", "", $lower_filename);
-        // $final_filename = $clean_filename . "-".uniqid().$getExt;
+       
+        $res = $AdminModel->insertClipart($data);
+        Storage::disk('uploads')->put('/cliparts/' . $final_filename, fopen($request->file('upload_clipart'), 'r+'));
         
-        // $q1 = $conn->prepare("INSERT INTO cliparts (CategoryId, OriginalSVGFilename, SVGFilename, Tags, IsActive) VALUES (:cat_id, :orig_name, :svg_name, :tags, :is_act)");
-        // $q1->execute(array(':cat_id'=>$category, ':orig_name'=>$orig_filename, ':svg_name'=>$final_filename, 'tags'=>$tags, ':is_act'=>0));
-        
-        // $svg = new DOMDocument('1.0', 'UTF-8');
-        // $svg->xmlStandalone = false;
-        // $svg->loadXML($getSVGData);
-        
-        // $file =  $clipartFolder . $final_filename;
-        
-        // file_put_contents($file, $svg->saveXML());
-        
-        // echo '
-        //     <script>
-        //         alert("File is successfully uploaded");
-        //         window.location = "./";
-        //     </script>
-        //     ';
-        
-        // $data =  array(
-        //     'CategoryName' => $post['category'],
-        //     'IsActive' => $post['is_active']
-        // );
-
-        // $res 	= $AdminModel->insertClipartCategory($data);
-
-        // if($res){
-        //     return response()->json(array(
-        //         'success' => true,
-        //         'addClass'=> 'modal-close-reload',
-        //         'message' => 'Clipart Category is successfully added.'
-        //     ));
-
-        // }else{
-        //     return response()->json(array(
-        //         'success' => false,
-        //         'addClass'=> '',
-        //         'message' => 'Something went wrong. Please refresh the page and try again.'
-        //     ));
-        // }
+        if($res){
+            return response()->json(array(
+                'success' => true,
+                'message' => 'Clipart is successfully added.'
+            ));
+        }
     }
 
     function userList(){
@@ -509,7 +487,6 @@ class AdminController extends Controller
         $AdminModel 	    = new AdminModel;
         $result = $AdminModel->userList();
 
-        // var_dump( $result);
         return response()->json([
             "count" => count($result),
             "results" => $result
diff --git a/app/Models/admin/AdminModel.php b/app/Models/admin/AdminModel.php
index 2c320df..93edb3e 100644
--- a/app/Models/admin/AdminModel.php
+++ b/app/Models/admin/AdminModel.php
@@ -160,6 +160,12 @@ class AdminModel extends Model
 		return $i;
 	}
 
+	function insertClipart($data){
+
+		$i = DB::table('cliparts')->insert($data);
+		return $i;
+	}
+
 
 	function userList(){
 		$i = DB::table('user_logins')
diff --git a/resources/views/admin/main.blade.php b/resources/views/admin/main.blade.php
index 17b780d..f25486a 100644
--- a/resources/views/admin/main.blade.php
+++ b/resources/views/admin/main.blade.php
@@ -185,8 +185,8 @@ desired effect
     <!-- select2 -->
     <script src="{{ asset('/bower_components/select2/dist/js/select2.min.js') }}"></script>
 
-     <script>
-        $(function () {
+    <script>
+        $(document).ready(function() {
 
             // var hash = window.location.hash;
             // hash && $('ul.nav a[href="' + hash + '"]').tab('show');
@@ -227,7 +227,8 @@ desired effect
                     var obj = canvas.getActiveObject();
 
                     $('.available-colors').html('');
-                    $('.available-colors').append('<h4> Colors: </h4>');
+                    $('.available-colors').append('Colors:<div class="row"><div class="col-md-12">')
+                    
                     for (var j in obj.paths) {
 
                         var i = j;
@@ -240,7 +241,8 @@ desired effect
                         $('.available-colors').append('<button type="button" data-id="' + id + '" data-orig-color="'+fill+'" id="btn_' + id + '" data-toggle="popover" title="HEX Color" data-content="' + fill + '" class="btn btn-default change_color" style="background-color:' + fill + '"></button>');
 
                     }
-                    
+                    $('.available-colors').append('</div></div>');
+
                     $('.additional-info').css("display", "block");
 
                     $('[data-toggle="popover"]').popover({
@@ -464,8 +466,6 @@ desired effect
                 submitHandler: submitForm_frm_create_user_as_store_owner
             });
             
-            
-
             $('#with_password_opt').change(function() {
                 if($(this).prop('checked')){
                     $('.store-password-field').css({
@@ -484,26 +484,17 @@ desired effect
             });
 
             function changeColor(pathid, hexc) {
-                //hexcolor();
                 var obj = canvas.getActiveObject();
                 for (var j in obj.paths) {
 
                     var id = obj.paths[j].get('id');
 
                     if (id == pathid) {
-                        //console.log(objects[j].toObject(['idNumber']));
-                        //console.log(objects[j].getText());
                         obj.paths[j].setFill(hexc);
-                        /* objects[j].setText(p_name.toString());
-                        objects[j].centerH();
-                        objects[j].setCoords(); */
-
                         canvas.renderAll();
                         break;
-
                     }
                 }
-                //:red;
                 $('#btn_' + pathid).css({
                     'background-color': hexc
                 })
@@ -611,6 +602,9 @@ desired effect
                 $('#user_id').val(e.params.data.id);
             });
 
+            
+            $("#sel_clipart_category").select2();
+
             $(".select2-select-user").select2({
                 placeholder: "Select a state",
                 allowClear: true,
@@ -654,67 +648,64 @@ desired effect
                 templateResult: formatUserList,
                 templateSelection: formatUserListSelection,
                 
-            })
-            
+            });
+
+            function submitClipartForm(){
+                var obj = canvas.getActiveObject(canvas.setActiveObject(canvas.item(0)));
+                obj.set({
+                    left: 0,
+                    top: 0
+                }).scale(1);
+                
+                $('.change_color').each(function(i, elem) {
+        
+                    var def_color = $(elem).data('orig-color');
+                    var def_id    = $(elem).data('id');
+                    var id = obj.paths[i].get('id');
+                    
+                    if (id == def_id) {
+                        obj.paths[i].setFill(def_color);
+                    }
+                });
+                
+
+                var normal_obj = canvas.getActiveObject(obj);
+                var svg = canvas.toSVG({
+                    width:  normal_obj.getWidth(),
+                    height: normal_obj.getHeight(),
+                    viewBox: {
+                        x: '0',
+                        y: '0',
+                        width: normal_obj.getWidth(),
+                        height: normal_obj.getHeight()
+                    }
+                });
+                
+                $.ajax({
+                    type: "POST",
+                    url  : "{{ url('admin/clipart/save-svg-clipart') }}",
+                    data: new FormData($('#frm_clipart')[0]),
+                    processData: false,
+                    contentType: false,
+                    beforeSend: function(xhr){
+                        var token = $('meta[name="csrf_token"]').attr('content');
+                        if (token) {
+                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
+                        }
+                    },
+                    success: function(response){
+                        if(response.success){
+                            alert(response.message);
+                            location.reload();
+                        }
+                    }
+                    
+                });
+            }
         }); // end document ready
 
-        function submitClipartForm(){
-            var obj = canvas.getActiveObject(canvas.setActiveObject(canvas.item(0)));
-            obj.set({
-                left: 0,
-                top: 0
-            }).scale(1);
-            
-            $('.change_color').each(function(i, elem) {
-    
-                var def_color = $(elem).data('orig-color');
-                var def_id    = $(elem).data('id');
-                var id = obj.paths[i].get('id');
-                
-                if (id == def_id) {
-                    obj.paths[i].setFill(def_color);
-                }
-            });
-            
+        
 
-            var normal_obj = canvas.getActiveObject(obj);
-            var svg = canvas.toSVG({
-                width:  normal_obj.getWidth(),
-                height: normal_obj.getHeight(),
-                viewBox: {
-                    x: '0',
-                    y: '0',
-                    width: normal_obj.getWidth(),
-                    height: normal_obj.getHeight()
-                }
-            });
-
-            
-            var files = $("#svg_clipart")[0].files[0];
-            var getCategory = $('#category').val();
-            var getTags = $('#tags').val();
-            
-            $.ajax({
-                type: "POST",
-                url  : "{{ url('admin/clipart/save-svg-clipart') }}",
-                data: {
-                    svg_data : svg,
-                    category : getCategory,
-                    tags     : getTags,
-                    filename : files.name
-                },
-                beforeSend: function(xhr){
-                    var token = $('meta[name="csrf_token"]').attr('content');
-                    if (token) {
-                        return xhr.setRequestHeader('X-CSRF-TOKEN', token);
-                    }
-                },
-                success: function(response){
-                    // $('#c).html(response)
-                }
-                
-            });
-        }
         function submitAddCategoryForm(){
 
             var data = $("#frm_add_category").serialize();
@@ -882,7 +873,6 @@ desired effect
 
                 reader.onload = function(e) {
                     $('#'+id).attr('src', e.target.result);
-                    // for lightbox 
                     $('.'+id+'_href').attr('href', e.target.result);
                     $('.'+id+'_img').attr('src', e.target.result);
                 }
diff --git a/resources/views/admin_pages/clipart.blade.php b/resources/views/admin_pages/clipart.blade.php
index 76be4f3..b705bb5 100644
--- a/resources/views/admin_pages/clipart.blade.php
+++ b/resources/views/admin_pages/clipart.blade.php
@@ -1,5 +1,10 @@
 @extends('admin.main')
 @section('content')
+<style>
+    .additional-info{
+        display:none;
+    }
+</style>
 <div class="content-wrapper">
     <!-- Content Header (Page header) -->
     <section class="content-header">
@@ -16,7 +21,7 @@
     <!-- Main content -->
     <section class="content container-fluid">
         <div class="row">
-            <div class="col-md-3">
+            <!-- <div class="col-md-3">
                 <button class="btn btn-primary btn-block margin-bottom" data-toggle="modal" data-target="#modal_add_category"><i class="fa fa-plus"></i> Add Categories</button>
                 <div class="box box-solid">
                     <div class="box-header with-border">
@@ -48,39 +53,33 @@
                                     </a>
                                 </li>
                             @endforeach
-                            <!-- <li class="treeview">
-                                <a href="#"><i class="fa fa-link"></i> <span>Store Management</span>
-                                    <span class="pull-right-container">
-                                        <i class="fa fa-angle-left pull-right"></i>
-                                    </span>
-                                </a>
-                                <ul class="treeview-menu">
-                                    <li><a href="{{ url('admin/create-store') }}"><i class="fa fa-plus"></i> Create New Store</a></li>
-                                    <li><a href="{{ url('admin/stores-list') }}"><i class="fa fa-list"></i> List of Stores</a></li>
-                                </ul>
-                            </li> -->
                         </ul>
                     </div>
-                    <!-- /.box-body -->
                 </div>
-                <!-- /.box -->
-            </div>
-            <div class="col-md-9">
+            </div> -->
+            <div class="col-md-12">
                 <div class="box">
                     <div class="box-header with-border">
                        <h4 class="box-title">Clipart</h4>
                     </div>
                     <div class="box-body">
                         <div class="row">
-                            <div class="col-md-6">
-                                <div class="canvas-container" style="width:100%">
-                                    <canvas id="canvas" height="434px" style="border: 1px solid #ecf0f5;"></canvas>
+                            <div class="col-md-7">
+                                <div class="panel panel-default">
+                                    <div class="panel-heading">
+                                        Preview
+                                    </div>
+                                    <div class="panel-body">
+                                        <div class="canvas-container" style="width:100%">
+                                            <canvas id="canvas" height="434px" style="border: 1px solid #ecf0f5;"></canvas>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             <!-- <div class="col-md-12">
                                 <button type="button" id="btnClear" class="btn btn-default btn-clear" style="margin-top: 10px;">Clear Canvas</button>
                             </div> -->
-                            <div class="col-md-6">
+                            <div class="col-md-5">
                                 <form id="frm_clipart">
                                     <div class="form-group">
                                         Select clipart: (SVG Format only)
@@ -91,23 +90,22 @@
                                         </div>
                                     </div>
                                     <div class="form-group">
-                                        <div class="row">
-                                            <div class="col-md-12">
-                                                <div class="available-colors"></div>
-                                            </div>
-                                        </div>
+                                        <div class="available-colors"></div>
                                     </div>
                                     <div class="additional-info">
                                         <div class="form-group">
                                             Select Category *
                                             <div class="row">
-                                                <div class="col-sm-12">
-                                                    <select class="form-control" name="category"  id="category">
+                                                <div class="col-sm-8">
+                                                    <select class="form-control" name="category"  id="sel_clipart_category" style="width:100%">
                                                         @foreach($clipart_categories_array as $clipart_category)
                                                             <option value="{{  $clipart_category->Id }}">{{ $clipart_category->CategoryName }}</option>
                                                         @endforeach
                                                     </select>
                                                 </div>
+                                                <div class="col-sm-4">
+                                                    <button type="button" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Add Category</button>
+                                                </div>
                                             </div>
                                         </div>
                                         <div class="form-group">