diff --git a/README.md b/README.md
index d7f8566a2..3b2800f16 100755
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@ It packs in lots of demanding features that allows your business to scale in no
 * Customer Cart, Wishlist, Product Reviews.
 * Simple and Configurable Products.
 * Price rules (Discount) inbuilt.
+* CMS Pages.
 * Check out [click here](https://bagisto.com/features/).
 
 **For Developers**:
diff --git a/packages/Webkul/Admin/src/Resources/lang/en/app.php b/packages/Webkul/Admin/src/Resources/lang/en/app.php
index f37cd3a71..3cb6f01b3 100755
--- a/packages/Webkul/Admin/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Admin/src/Resources/lang/en/app.php
@@ -991,6 +991,8 @@ return [
 
     'cms' => [
         'pages' => [
+            'general' => 'General',
+            'seo' => 'SEO',
             'pages' => 'Page',
             'title' => 'pages',
             'add-title' => 'Add Page',
diff --git a/packages/Webkul/Admin/src/Resources/views/cms/create.blade.php b/packages/Webkul/Admin/src/Resources/views/cms/create.blade.php
index 255a73326..078c1edd1 100644
--- a/packages/Webkul/Admin/src/Resources/views/cms/create.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/cms/create.blade.php
@@ -28,91 +28,98 @@
 
                 <div class="form-container">
                     @csrf()
+                    <accordian :title="'{{ __('admin::app.cms.pages.general') }}'" :active="true">
+                        <div slot="body">
+                            <div class="control-group" :class="[errors.has('page_title') ? 'has-error' : '']">
+                                <label for="page_title" class="required">{{ __('admin::app.cms.pages.page-title') }}</label>
 
-                    <div class="control-group" :class="[errors.has('page_title') ? 'has-error' : '']">
-                        <label for="page_title" class="required">{{ __('admin::app.cms.pages.page-title') }}</label>
+                                <input type="text" class="control" name="page_title" v-validate="'required'" value="{{ old('page_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.page-title') }}&quot;">
 
-                        <input type="text" class="control" name="page_title" v-validate="'required'" value="{{ old('page_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.page-title') }}&quot;">
+                                <span class="control-error" v-if="errors.has('page_title')">@{{ errors.first('page_title') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('page_title')">@{{ errors.first('page_title') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('url_key') ? 'has-error' : '']">
+                                <label for="url-key" class="required">{{ __('admin::app.cms.pages.url-key') }}</label>
 
-                    <div class="control-group" :class="[errors.has('url_key') ? 'has-error' : '']">
-                        <label for="url-key" class="required">{{ __('admin::app.cms.pages.url-key') }}</label>
+                                <input type="text" class="control" name="url_key" v-validate="'required'" value="{{ old('url-key') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.url-key') }}&quot;" v-slugify>
 
-                        <input type="text" class="control" name="url_key" v-validate="'required'" value="{{ old('url-key') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.url-key') }}&quot;" v-slugify>
+                                <span class="control-error" v-if="errors.has('url_key')">@{{ errors.first('url_key') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('url_key')">@{{ errors.first('url_key') }}</span>
-                    </div>
+                            @inject('channels', 'Webkul\Core\Repositories\ChannelRepository')
+                            @inject('locales', 'Webkul\Core\Repositories\LocaleRepository')
 
-                    @inject('channels', 'Webkul\Core\Repositories\ChannelRepository')
-                    @inject('locales', 'Webkul\Core\Repositories\LocaleRepository')
+                            <div class="control-group" :class="[errors.has('channels[]') ? 'has-error' : '']">
+                                <label for="url-key" class="required">{{ __('admin::app.cms.pages.channel') }}</label>
 
-                    <div class="control-group" :class="[errors.has('channels[]') ? 'has-error' : '']">
-                        <label for="url-key" class="required">{{ __('admin::app.cms.pages.channel') }}</label>
+                                <select type="text" class="control" name="channels[]" v-validate="'required'" value="{{ old('channel[]') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.channel') }}&quot;" multiple="multiple">
+                                    @foreach($channels->all() as $channel)
+                                        <option value="{{ $channel->id }}">{{ $channel->name }}</option>
+                                    @endforeach
+                                </select>
 
-                        <select type="text" class="control" name="channels[]" v-validate="'required'" value="{{ old('channel[]') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.channel') }}&quot;" multiple="multiple">
-                            @foreach($channels->all() as $channel)
-                                <option value="{{ $channel->id }}">{{ $channel->name }}</option>
-                            @endforeach
-                        </select>
+                                <span class="control-error" v-if="errors.has('channels[]')">@{{ errors.first('channels[]') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('channels[]')">@{{ errors.first('channels[]') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('locales[]') ? 'has-error' : '']">
+                                <label for="url-key" class="required">{{ __('admin::app.cms.pages.locale') }}</label>
 
-                    <div class="control-group" :class="[errors.has('locales[]') ? 'has-error' : '']">
-                        <label for="url-key" class="required">{{ __('admin::app.cms.pages.locale') }}</label>
+                                <select type="text" class="control" name="locales[]" v-validate="'required'" value="{{ old('locale[]') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.locale') }}&quot;" multiple="multiple">
+                                    @foreach($locales->all() as $locale)
+                                        <option value="{{ $locale->id }}">{{ $locale->name }}</option>
+                                    @endforeach
+                                </select>
 
-                        <select type="text" class="control" name="locales[]" v-validate="'required'" value="{{ old('locale[]') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.locale') }}&quot;" multiple="multiple">
-                            @foreach($locales->all() as $locale)
-                                <option value="{{ $locale->id }}">{{ $locale->name }}</option>
-                            @endforeach
-                        </select>
+                                <span class="control-error" v-if="errors.has('locales[]')">@{{ errors.first('locales[]') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('locales[]')">@{{ errors.first('locales[]') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('html_content') ? 'has-error' : '']">
+                                <label for="html_content" class="required">{{ __('admin::app.cms.pages.content') }}</label>
 
-                    <div class="control-group" :class="[errors.has('html_content') ? 'has-error' : '']">
-                        <label for="html_content" class="required">{{ __('admin::app.cms.pages.content') }}</label>
+                                <textarea type="text" class="control" id="content" name="html_content" v-validate="'required'" value="{{ old('html_content') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.content') }}&quot;"></textarea>
 
-                        <textarea type="text" class="control" id="content" name="html_content" v-validate="'required'" value="{{ old('html_content') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.content') }}&quot;"></textarea>
+                                {!! __('admin::app.cms.pages.one-col') !!}
+                                {!! __('admin::app.cms.pages.two-col') !!}
+                                {!! __('admin::app.cms.pages.three-col') !!}
 
-                        {!! __('admin::app.cms.pages.one-col') !!}
-                        {!! __('admin::app.cms.pages.two-col') !!}
-                        {!! __('admin::app.cms.pages.three-col') !!}
+                                <div class="mt-10 mb-10">
+                                    <a target="_blank" href="{{ route('ui.helper.classes') }}" class="btn btn-sm btn-primary">
+                                        {{ __('admin::app.cms.pages.helper-classes') }}
+                                    </a>
+                                </div>
 
-                        <div class="mt-10 mb-10">
-                            <a target="_blank" href="{{ route('ui.helper.classes') }}" class="btn btn-sm btn-primary">
-                                {{ __('admin::app.cms.pages.helper-classes') }}
-                            </a>
+                                <span class="control-error" v-if="errors.has('html_content')">@{{ errors.first('html_content') }}</span>
+                            </div>
                         </div>
+                    </accordian>
 
-                        <span class="control-error" v-if="errors.has('html_content')">@{{ errors.first('html_content') }}</span>
-                    </div>
+                    <accordian :title="'{{ __('admin::app.cms.pages.seo') }}'" :active="true">
+                        <div slot="body">
+                            <div class="control-group" :class="[errors.has('meta_title') ? 'has-error' : '']">
+                                <label for="meta_title" class="required">{{ __('admin::app.cms.pages.meta_title') }}</label>
 
-                    <div class="control-group" :class="[errors.has('meta_title') ? 'has-error' : '']">
-                        <label for="meta_title" class="required">{{ __('admin::app.cms.pages.meta_title') }}</label>
+                                <input type="text" class="control" name="meta_title" v-validate="'required'" value="{{ old('meta_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_title') }}&quot;">
 
-                        <input type="text" class="control" name="meta_title" v-validate="'required'" value="{{ old('meta_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_title') }}&quot;">
+                                <span class="control-error" v-if="errors.has('meta_title')">@{{ errors.first('meta_title') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('meta_title')">@{{ errors.first('meta_title') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('meta_keywords') ? 'has-error' : '']">
+                                <label for="meta_keywords" class="required">{{ __('admin::app.cms.pages.meta_keywords') }}</label>
 
-                    <div class="control-group" :class="[errors.has('meta_keywords') ? 'has-error' : '']">
-                        <label for="meta_keywords" class="required">{{ __('admin::app.cms.pages.meta_keywords') }}</label>
+                                <textarea type="text" class="control" name="meta_keywords" v-validate="'required'" value="{{ old('meta_keywords') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_keywords') }}&quot;"></textarea>
 
-                        <textarea type="text" class="control" name="meta_keywords" v-validate="'required'" value="{{ old('meta_keywords') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_keywords') }}&quot;"></textarea>
+                                <span class="control-error" v-if="errors.has('meta_keywords')">@{{ errors.first('meta_keywords') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('meta_keywords')">@{{ errors.first('meta_keywords') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('meta_description') ? 'has-error' : '']">
+                                <label for="meta_description">{{ __('admin::app.cms.pages.meta_description') }}</label>
 
-                    <div class="control-group" :class="[errors.has('meta_description') ? 'has-error' : '']">
-                        <label for="meta_description">{{ __('admin::app.cms.pages.meta_description') }}</label>
+                                <textarea type="text" class="control" name="meta_description" value="{{ old('meta_description') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_description') }}&quot;"></textarea>
 
-                        <textarea type="text" class="control" name="meta_description" value="{{ old('meta_description') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_description') }}&quot;"></textarea>
-
-                        <span class="control-error" v-if="errors.has('meta_description')">@{{ errors.first('meta_description') }}</span>
-                    </div>
+                                <span class="control-error" v-if="errors.has('meta_description')">@{{ errors.first('meta_description') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
                 </div>
             </div>
         </form>
diff --git a/packages/Webkul/Admin/src/Resources/views/cms/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/cms/edit.blade.php
index e18ff2440..7a071f571 100644
--- a/packages/Webkul/Admin/src/Resources/views/cms/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/cms/edit.blade.php
@@ -32,64 +32,71 @@
 
                 <div class="form-container">
                     @csrf()
+                    <accordian :title="'{{ __('admin::app.cms.pages.general') }}'" :active="true">
+                        <div slot="body">
+                            <div class="control-group" :class="[errors.has('page_title') ? 'has-error' : '']">
+                                <label for="page_title" class="required">{{ __('admin::app.cms.pages.page-title') }}</label>
 
-                    <div class="control-group" :class="[errors.has('page_title') ? 'has-error' : '']">
-                        <label for="page_title" class="required">{{ __('admin::app.cms.pages.page-title') }}</label>
+                                <input type="text" class="control" name="page_title" v-validate="'required'" value="{{ $page->page_title ?? old('page_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.page-title') }}&quot;">
 
-                        <input type="text" class="control" name="page_title" v-validate="'required'" value="{{ $page->page_title ?? old('page_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.page-title') }}&quot;">
+                                <span class="control-error" v-if="errors.has('page_title')">@{{ errors.first('page_title') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('page_title')">@{{ errors.first('page_title') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('url_key') ? 'has-error' : '']">
+                                <label for="url-key" class="required">{{ __('admin::app.cms.pages.url-key') }}</label>
 
-                    <div class="control-group" :class="[errors.has('url_key') ? 'has-error' : '']">
-                        <label for="url-key" class="required">{{ __('admin::app.cms.pages.url-key') }}</label>
+                                <input type="text" class="control" name="url_key" v-validate="'required'" value="{{ $page->url_key ?? old('url_key') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.url-key') }}&quot;" disabled>
 
-                        <input type="text" class="control" name="url_key" v-validate="'required'" value="{{ $page->url_key ?? old('url_key') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.url-key') }}&quot;" disabled>
+                                <span class="control-error" v-if="errors.has('url_key')">@{{ errors.first('url_key') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('url_key')">@{{ errors.first('url_key') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('html_content') ? 'has-error' : '']">
+                                <label for="html_content" class="required">{{ __('admin::app.cms.pages.content') }}</label>
 
-                    <div class="control-group" :class="[errors.has('html_content') ? 'has-error' : '']">
-                        <label for="html_content" class="required">{{ __('admin::app.cms.pages.content') }}</label>
+                                <textarea type="text" class="control" id="content" name="html_content" v-validate="'required'" data-vv-as="&quot;{{ __('admin::app.cms.pages.content') }}&quot;">{{ $page->html_content ?? old('html_content') }}</textarea>
 
-                        <textarea type="text" class="control" id="content" name="html_content" v-validate="'required'" data-vv-as="&quot;{{ __('admin::app.cms.pages.content') }}&quot;">{{ $page->html_content ?? old('html_content') }}</textarea>
+                                {!! __('admin::app.cms.pages.one-col') !!}
+                                {!! __('admin::app.cms.pages.two-col') !!}
+                                {!! __('admin::app.cms.pages.three-col') !!}
 
-                        {!! __('admin::app.cms.pages.one-col') !!}
-                        {!! __('admin::app.cms.pages.two-col') !!}
-                        {!! __('admin::app.cms.pages.three-col') !!}
+                                <div class="mt-10 mb-10">
+                                    <a target="_blank" href="{{ route('ui.helper.classes') }}" class="btn btn-sm btn-primary">
+                                        {{ __('admin::app.cms.pages.helper-classes') }}
+                                    </a>
+                                </div>
 
-                        <div class="mt-10 mb-10">
-                            <a target="_blank" href="{{ route('ui.helper.classes') }}" class="btn btn-sm btn-primary">
-                                {{ __('admin::app.cms.pages.helper-classes') }}
-                            </a>
+                                <span class="control-error" v-if="errors.has('html_content')">@{{ errors.first('html_content') }}</span>
+                            </div>
                         </div>
+                    </accordian>
 
-                        <span class="control-error" v-if="errors.has('html_content')">@{{ errors.first('html_content') }}</span>
-                    </div>
+                    <accordian :title="'{{ __('admin::app.cms.pages.seo') }}'" :active="true">
+                        <div slot="body">
+                            <div class="control-group" :class="[errors.has('meta_title') ? 'has-error' : '']">
+                                <label for="meta_title" class="required">{{ __('admin::app.cms.pages.meta_title') }}</label>
 
-                    <div class="control-group" :class="[errors.has('meta_title') ? 'has-error' : '']">
-                        <label for="meta_title" class="required">{{ __('admin::app.cms.pages.meta_title') }}</label>
+                                <input type="text" class="control" name="meta_title" v-validate="'required'" value="{{ $page->meta_title ?? old('meta_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_title') }}&quot;">
 
-                        <input type="text" class="control" name="meta_title" v-validate="'required'" value="{{ $page->meta_title ?? old('meta_title') }}" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_title') }}&quot;">
+                                <span class="control-error" v-if="errors.has('meta_title')">@{{ errors.first('meta_title') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('meta_title')">@{{ errors.first('meta_title') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('meta_keywords') ? 'has-error' : '']">
+                                <label for="meta_keywords" class="required">{{ __('admin::app.cms.pages.meta_keywords') }}</label>
 
-                    <div class="control-group" :class="[errors.has('meta_keywords') ? 'has-error' : '']">
-                        <label for="meta_keywords" class="required">{{ __('admin::app.cms.pages.meta_keywords') }}</label>
+                                <textarea type="text" class="control" name="meta_keywords" v-validate="'required'" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_keywords') }}&quot;">{{ $page->meta_keywords ?? old('meta_keywords') }}</textarea>
 
-                        <textarea type="text" class="control" name="meta_keywords" v-validate="'required'" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_keywords') }}&quot;">{{ $page->meta_keywords ?? old('meta_keywords') }}</textarea>
+                                <span class="control-error" v-if="errors.has('meta_keywords')">@{{ errors.first('meta_keywords') }}</span>
+                            </div>
 
-                        <span class="control-error" v-if="errors.has('meta_keywords')">@{{ errors.first('meta_keywords') }}</span>
-                    </div>
+                            <div class="control-group" :class="[errors.has('meta_description') ? 'has-error' : '']">
+                                <label for="meta_description">{{ __('admin::app.cms.pages.meta_description') }}</label>
 
-                    <div class="control-group" :class="[errors.has('meta_description') ? 'has-error' : '']">
-                        <label for="meta_description">{{ __('admin::app.cms.pages.meta_description') }}</label>
+                                <textarea type="text" class="control" name="meta_description" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_description') }}&quot;">{{ $page->meta_description ?? old('meta_description') }}</textarea>
 
-                        <textarea type="text" class="control" name="meta_description" data-vv-as="&quot;{{ __('admin::app.cms.pages.meta_description') }}&quot;">{{ $page->meta_description ?? old('meta_description') }}</textarea>
-
-                        <span class="control-error" v-if="errors.has('meta_description')">@{{ errors.first('meta_description') }}</span>
-                    </div>
+                                <span class="control-error" v-if="errors.has('meta_description')">@{{ errors.first('meta_description') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
                 </div>
             </div>
         </form>