diff --git a/app/Http/Controllers/Auth/ConfirmPasswordController.php b/app/Http/Controllers/Auth/ConfirmPasswordController.php
new file mode 100644
index 00000000..138c1f08
--- /dev/null
+++ b/app/Http/Controllers/Auth/ConfirmPasswordController.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
+use Illuminate\Foundation\Auth\ConfirmsPasswords;
+
+class ConfirmPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Confirm Password Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling password confirmations and
+    | uses a simple trait to include the behavior. You're free to explore
+    | this trait and override any functions that require customization.
+    |
+    */
+
+    use ConfirmsPasswords;
+
+    /**
+     * Where to redirect users when the intended url fails.
+     *
+     * @var string
+     */
+    protected $redirectTo = RouteServiceProvider::HOME;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+}
diff --git a/app/Http/Controllers/Auth/ForgotPasswordController.php b/app/Http/Controllers/Auth/ForgotPasswordController.php
index 6a247fef..465c39cc 100644
--- a/app/Http/Controllers/Auth/ForgotPasswordController.php
+++ b/app/Http/Controllers/Auth/ForgotPasswordController.php
@@ -19,14 +19,4 @@ class ForgotPasswordController extends Controller
     */
 
     use SendsPasswordResetEmails;
-
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('guest');
-    }
 }
diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index 75949531..18a0d088 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
 use Illuminate\Foundation\Auth\AuthenticatesUsers;
 
 class LoginController extends Controller
@@ -25,7 +26,7 @@ class LoginController extends Controller
      *
      * @var string
      */
-    protected $redirectTo = '/home';
+    protected $redirectTo = RouteServiceProvider::HOME;
 
     /**
      * Create a new controller instance.
@@ -34,6 +35,6 @@ class LoginController extends Controller
      */
     public function __construct()
     {
-        $this->middleware('guest', ['except' => 'logout']);
+        $this->middleware('guest')->except('logout');
     }
 }
diff --git a/app/Http/Controllers/Auth/RegisterController.php b/app/Http/Controllers/Auth/RegisterController.php
index 6b1b95b5..ed1a5e07 100644
--- a/app/Http/Controllers/Auth/RegisterController.php
+++ b/app/Http/Controllers/Auth/RegisterController.php
@@ -2,12 +2,12 @@
 
 namespace App\Http\Controllers\Auth;
 
-use App\Models\User;
 use App\Http\Controllers\Controller;
-use Illuminate\Auth\Events\Registered;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Validator;
+use App\Providers\RouteServiceProvider;
+use App\Models\User;
 use Illuminate\Foundation\Auth\RegistersUsers;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Validator;
 
 class RegisterController extends Controller
 {
@@ -29,7 +29,7 @@ class RegisterController extends Controller
      *
      * @var string
      */
-    protected $redirectTo = '/home';
+    protected $redirectTo = RouteServiceProvider::HOME;
 
     /**
      * Create a new controller instance.
@@ -50,9 +50,9 @@ public function __construct()
     protected function validator(array $data)
     {
         return Validator::make($data, [
-            'name' => 'required|max:255',
-            'email' => 'required|email|max:255|unique:users',
-            'password' => 'required|min:6|confirmed',
+            'name' => ['required', 'string', 'max:255'],
+            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
+            'password' => ['required', 'string', 'min:8', 'confirmed'],
         ]);
     }
 
@@ -60,36 +60,14 @@ protected function validator(array $data)
      * Create a new user instance after a valid registration.
      *
      * @param  array  $data
-     * @return User
+     * @return \App\Models\User
      */
     protected function create(array $data)
     {
         return User::create([
             'name' => $data['name'],
             'email' => $data['email'],
-            'password' => bcrypt($data['password']),
+            'password' => Hash::make($data['password']),
         ]);
     }
-
-    /**
-     * Handle a registration request for the application.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
-    public function register(Request $request)
-    {
-        $this->validator($request->all())->validate();
-
-        event(new Registered($user = $this->create($request->all())));
-
-        if ($request->expectsJson()) {
-            return response()->json(['Created'], 201);
-        }
-
-        $this->guard()->login($user);
-
-        return $this->registered($request, $user)
-            ?: redirect($this->redirectPath());
-    }
 }
diff --git a/app/Http/Controllers/Auth/ResetPasswordController.php b/app/Http/Controllers/Auth/ResetPasswordController.php
index cf726eec..b1726a36 100644
--- a/app/Http/Controllers/Auth/ResetPasswordController.php
+++ b/app/Http/Controllers/Auth/ResetPasswordController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
 use Illuminate\Foundation\Auth\ResetsPasswords;
 
 class ResetPasswordController extends Controller
@@ -25,15 +26,5 @@ class ResetPasswordController extends Controller
      *
      * @var string
      */
-    protected $redirectTo = '/home';
-
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware('guest');
-    }
+    protected $redirectTo = RouteServiceProvider::HOME;
 }
diff --git a/app/Http/Controllers/Auth/VerificationController.php b/app/Http/Controllers/Auth/VerificationController.php
new file mode 100644
index 00000000..5e749af8
--- /dev/null
+++ b/app/Http/Controllers/Auth/VerificationController.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
+use Illuminate\Foundation\Auth\VerifiesEmails;
+
+class VerificationController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Email Verification Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling email verification for any
+    | user that recently registered with the application. Emails may also
+    | be re-sent if the user didn't receive the original email message.
+    |
+    */
+
+    use VerifiesEmails;
+
+    /**
+     * Where to redirect users after verification.
+     *
+     * @var string
+     */
+    protected $redirectTo = RouteServiceProvider::HOME;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+        $this->middleware('signed')->only('verify');
+        $this->middleware('throttle:6,1')->only('verify', 'resend');
+    }
+}
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index 718956aa..5e53a321 100644
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -10,6 +10,8 @@
 
 class RouteServiceProvider extends ServiceProvider
 {
+    const HOME = '/';
+
     /**
      * This namespace is applied to your controller routes.
      *
diff --git a/composer.json b/composer.json
index d0a56e92..576d2da6 100644
--- a/composer.json
+++ b/composer.json
@@ -23,7 +23,8 @@
     "guzzlehttp/guzzle": "^7.0.1",
     "laravel/framework": "^8.12",
     "laravel/sanctum": "^2.8",
-    "laravel/tinker": "^2.5"
+    "laravel/tinker": "^2.5",
+    "laravel/ui": "^3.1"
   },
   "require-dev": {
     "facade/ignition": "^2.5",
diff --git a/composer.lock b/composer.lock
index 5d857c82..df1bf458 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "0b65e1f2438fc4b62dc22e80a6da1265",
+    "content-hash": "921df622357932e7e2aa761032770523",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -1191,6 +1191,64 @@
             },
             "time": "2020-10-29T13:07:12+00:00"
         },
+        {
+            "name": "laravel/ui",
+            "version": "v3.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/ui.git",
+                "reference": "444072cb2f8baaa15172c5cde2bd30d188c3b7e7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/ui/zipball/444072cb2f8baaa15172c5cde2bd30d188c3b7e7",
+                "reference": "444072cb2f8baaa15172c5cde2bd30d188c3b7e7",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/console": "^8.0",
+                "illuminate/filesystem": "^8.0",
+                "illuminate/support": "^8.0",
+                "php": "^7.3|^8.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.x-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Ui\\UiServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Ui\\": "src/",
+                    "Illuminate\\Foundation\\Auth\\": "auth-backend/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Laravel UI utilities and presets.",
+            "keywords": [
+                "laravel",
+                "ui"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/ui/issues",
+                "source": "https://github.com/laravel/ui/tree/v3.1.0"
+            },
+            "time": "2020-11-03T19:51:21+00:00"
+        },
         {
             "name": "league/commonmark",
             "version": "1.5.7",
diff --git a/database/migrations/2014_10_12_100000_create_password_resets_table.php b/database/migrations/2014_10_12_100000_create_password_resets_table.php
index 0d5cb845..0ee0a36a 100644
--- a/database/migrations/2014_10_12_100000_create_password_resets_table.php
+++ b/database/migrations/2014_10_12_100000_create_password_resets_table.php
@@ -1,8 +1,8 @@
 <?php
 
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
 
 class CreatePasswordResetsTable extends Migration
 {
diff --git a/resources/js/app.js b/resources/js/app.js
index fd157c5a..1ac0818e 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,13 +1,13 @@
 /**
  * First we will load all of this project's JavaScript dependencies which
- * includes React and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
+ * includes React and other helpers. It's a great starting point while
+ * building robust, powerful web applications using React + Laravel.
  */
 
-require('./bootstrap')
+require('./bootstrap');
 
 /**
- * Next, we will create a fresh React application instance and attach it to
+ * Next, we will create a fresh React component instance and attach it to
  * the page. Then, you may begin adding components to this application
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index abc9de3a..16b1e317 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -9,4 +9,5 @@ window._ = require('lodash');
 window.axios = require('axios');
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.withCredentials = true;
 
diff --git a/resources/js/modules/article/pages/add/components/Form.js b/resources/js/modules/article/pages/add/components/Form.js
index e4cf3de3..3b625b57 100644
--- a/resources/js/modules/article/pages/add/components/Form.js
+++ b/resources/js/modules/article/pages/add/components/Form.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import PropTypes from 'prop-types'
 
 const displayName = 'ArticleFrom'
@@ -46,7 +47,13 @@ const Form = ({ article, errors, onChange, onSubmit }) => {
     <div className="form-group row">
       <label htmlFor="content" className="col-sm-2 col-form-label">Content</label>
       <div className="col-sm-10">
-        <textarea id="content" value={article.content} onChange={e => handleChange('content', e)} />
+        <textarea id="content"
+                  name="content"
+                  className={`form-control ${errors.has('content') && 'is-invalid'}`}
+                  rows="3"
+                  placeholder="Content"
+                  value={article.content}
+                  onChange={e => handleChange(e.target.name, e.target.value)} />
         {errors.has('content') && <div className="invalid-feedback">{errors.first('content')}</div>}
       </div>
     </div>
diff --git a/resources/js/modules/article/pages/edit/components/Form.js b/resources/js/modules/article/pages/edit/components/Form.js
index e4cf3de3..3b625b57 100644
--- a/resources/js/modules/article/pages/edit/components/Form.js
+++ b/resources/js/modules/article/pages/edit/components/Form.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import PropTypes from 'prop-types'
 
 const displayName = 'ArticleFrom'
@@ -46,7 +47,13 @@ const Form = ({ article, errors, onChange, onSubmit }) => {
     <div className="form-group row">
       <label htmlFor="content" className="col-sm-2 col-form-label">Content</label>
       <div className="col-sm-10">
-        <textarea id="content" value={article.content} onChange={e => handleChange('content', e)} />
+        <textarea id="content"
+                  name="content"
+                  className={`form-control ${errors.has('content') && 'is-invalid'}`}
+                  rows="3"
+                  placeholder="Content"
+                  value={article.content}
+                  onChange={e => handleChange(e.target.name, e.target.value)} />
         {errors.has('content') && <div className="invalid-feedback">{errors.first('content')}</div>}
       </div>
     </div>
diff --git a/resources/js/modules/article/pages/list/Page.js b/resources/js/modules/article/pages/list/Page.js
index 5b849901..0bc4fc0a 100644
--- a/resources/js/modules/article/pages/list/Page.js
+++ b/resources/js/modules/article/pages/list/Page.js
@@ -22,7 +22,6 @@ class Page extends Component {
   }
 
   componentDidMount() {
-    console.log('moeen')
     const { dispatch } = this.props
 
     dispatch(articleListRequest({}))
diff --git a/resources/js/modules/article/service.js b/resources/js/modules/article/service.js
index e859bb8c..f70ad094 100644
--- a/resources/js/modules/article/service.js
+++ b/resources/js/modules/article/service.js
@@ -13,7 +13,7 @@ function transformResponse(params) {
 export function articleAddRequest(params) {
   return dispatch => (
     new Promise((resolve, reject) => {
-      Http.post('/articles', transformRequest(params))
+      Http.post('api/v1/articles', transformRequest(params))
         .then(res => {
           dispatch(articleActions.add(transformResponse(res.data)))
           return resolve()
@@ -45,7 +45,7 @@ export function articleAddRequest(params) {
 export function articleUpdateRequest(params) {
   return dispatch => (
     new Promise((resolve, reject) => {
-      Http.patch(`articles/${params.id}`, transformRequest(params))
+      Http.patch(`api/v1/articles/${params.id}`, transformRequest(params))
         .then(res => {
           dispatch(articleActions.add(transformResponse(res.data)))
           return resolve()
@@ -76,7 +76,7 @@ export function articleUpdateRequest(params) {
 
 export function articleRemoveRequest(id) {
   return dispatch => {
-    Http.delete(`articles/${id}`)
+    Http.delete(`api/v1/articles/${id}`)
       .then(() => {
         dispatch(articleActions.remove(id))
       })
@@ -89,7 +89,7 @@ export function articleRemoveRequest(id) {
 
 export function articleListRequest(params) {
 
-  let { pageNumber = 1, url = '/articles' } = params
+  let { pageNumber = 1, url = 'api/v1/articles' } = params
 
   return dispatch => {
     if (pageNumber > 1) {
@@ -109,7 +109,7 @@ export function articleListRequest(params) {
 
 export function articleEditRequest(id) {
   return dispatch => {
-    Http.get(`articles/${id}`)
+    Http.get(`api/v1/articles/${id}`)
       .then((res) => {
         dispatch(articleActions.add(transformResponse(res.data)))
       })
@@ -122,7 +122,7 @@ export function articleEditRequest(id) {
 
 export function articleFetchRequest(slug) {
   return dispatch => {
-    Http.get(`articles/published/${slug}`)
+    Http.get(`api/v1/articles/published/${slug}`)
       .then((res) => {
         dispatch(articleActions.add(transformResponse(res.data)))
       })
diff --git a/resources/js/modules/auth/service.js b/resources/js/modules/auth/service.js
index 95544f67..7be23bce 100644
--- a/resources/js/modules/auth/service.js
+++ b/resources/js/modules/auth/service.js
@@ -9,7 +9,7 @@ import Transformer from '../../utils/Transformer'
  */
 export function fetchUser() {
   return dispatch => {
-    return Http.get('auth/me')
+    return Http.get('api/v1/auth/me')
       .then(res => {
         const data = Transformer.fetch(res.data)
         dispatch(authActions.authUser(data))
@@ -29,31 +29,34 @@ export function fetchUser() {
 export function login(credentials) {
   return dispatch => (
     new Promise((resolve, reject) => {
-      Http.post('auth/login', credentials)
-        .then(res => {
-          const data = Transformer.fetch(res.data)
-          dispatch(authActions.authLogin(data.accessToken))
-          return resolve()
-        })
-        .catch((err) => {
-          const statusCode = err.response.status;
-          const data = {
-            error: null,
-            statusCode,
-          };
+      Http.get('sanctum/csrf-cookie')
+        .then(() => {
+          Http.post('login', credentials)
+            .then(res => {
+              const data = Transformer.fetch(res.data)
+              dispatch(authActions.authLogin(data.accessToken))
+              return resolve()
+            })
+            .catch((err) => {
+              const statusCode = err.response.status;
+              const data = {
+                error: null,
+                statusCode,
+              };
 
-          if (statusCode === 422) {
-            const resetErrors = {
-              errors: err.response.data.errors,
-              replace: false,
-              searchStr: '',
-              replaceStr: '',
-            };
-            data.error = Transformer.resetValidationFields(resetErrors);
-          } else if (statusCode === 401) {
-            data.error = err.response.data.message;
-          }
-          return reject(data);
+              if (statusCode === 422) {
+                const resetErrors = {
+                  errors: err.response.data.errors,
+                  replace: false,
+                  searchStr: '',
+                  replaceStr: '',
+                };
+                data.error = Transformer.resetValidationFields(resetErrors);
+              } else if (statusCode === 401) {
+                data.error = err.response.data.message;
+              }
+              return reject(data);
+            })
         })
     })
   )
@@ -62,7 +65,7 @@ export function login(credentials) {
 export function register(credentials) {
   return dispatch => (
     new Promise((resolve, reject) => {
-      Http.post('auth/register', Transformer.send(credentials))
+      Http.post('register', Transformer.send(credentials))
         .then(res => {
           const data = Transformer.fetch(res.data)
           dispatch(authActions.authLogin(data.accessToken))
diff --git a/resources/js/modules/web/pages/blog/details/Page.js b/resources/js/modules/web/pages/blog/details/Page.js
index 9c702e68..c6560345 100644
--- a/resources/js/modules/web/pages/blog/details/Page.js
+++ b/resources/js/modules/web/pages/blog/details/Page.js
@@ -1,82 +1,64 @@
 // import libs
-import React, {Component} from 'react'
+import React, {useEffect} from 'react'
 import PropTypes from 'prop-types'
 import DocumentTitle from 'react-document-title';
 import {articleFetchRequest} from '../../../../article/service'
 import {APP_TITLE} from '../../../../../values'
 
-class Page extends Component {
-  static displayName = 'ArticleShowPage'
-  static propTypes = {
-    match: PropTypes.object.isRequired,
-    article: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired
-  }
-
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      //
-    }
-  }
-
-  UNSAFE_componentWillMount() {
-    this.loadArticle()
-  }
-
-  loadArticle() {
-    const {match, article, dispatch} = this.props
+export default function Page({match, article, dispatch}) {
 
+  const loadArticle = () => {
     if (!article.slug) {
       dispatch(articleFetchRequest(match.params.slug))
     }
   }
 
-  renderPublishedDate() {
-    const {publishedAt} = this.props.article
+  useEffect(() => {
+    loadArticle()
+  })
+
+  const renderPublishedDate = () => {
+    const {publishedAt} = article
 
     if (publishedAt) {
       return `at ${publishedAt.format('MMMM d, YYYY')}`
     }
   }
 
-  renderAuthor() {
-    const {user} = this.props.article
+  const renderAuthor = () => {
+    const {user} = article
 
     if (user) {
       return `by ${user.name}`
     }
-
-  }
-
-  createMarkup() {
-    return {__html: this.props.article.content};
   }
 
-  renderArticle() {
-    const {article} = this.props
+  const renderArticle = () => {
     return (<div className="col-12 col-sm-9 mb-5 mx-auto">
       <h2>{article.title}</h2>
-      <small className="text-muted mb-5">{this.renderPublishedDate()} {this.renderAuthor()}</small>
+      <small className="text-muted mb-5">{renderPublishedDate()} {renderAuthor()}</small>
       <p className="text-muted mb-5">{article.description}</p>
-      <div dangerouslySetInnerHTML={this.createMarkup()}/>
+      <p>{article.content}</p>
     </div>)
   }
 
-  render() {
-    return (
-      <DocumentTitle title={`${this.props.article.title} - ${APP_TITLE}`}>
-        <section id="components-articles">
-          <div className="container">
-            <div className="row">
-              {this.renderArticle()}
-            </div>
+  return (
+    <DocumentTitle title={`${article.title} - ${APP_TITLE}`}>
+      <section id="components-articles">
+        <div className="container">
+          <div className="row">
+            {renderArticle()}
           </div>
-        </section>
-      </DocumentTitle>
-    )
-  }
+        </div>
+      </section>
+    </DocumentTitle>
+  )
+
 }
 
-export default Page
+Page.displayName = 'ArticleShowPage'
+Page.propTypes = {
+  match: PropTypes.object.isRequired,
+  article: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired
+}
diff --git a/resources/js/modules/web/pages/blog/list/Page.js b/resources/js/modules/web/pages/blog/list/Page.js
index 6ce67c3f..9c15bb63 100644
--- a/resources/js/modules/web/pages/blog/list/Page.js
+++ b/resources/js/modules/web/pages/blog/list/Page.js
@@ -14,7 +14,7 @@ class Page extends Component {
   }
 
   componentDidMount() {
-    this.props.dispatch(articleListRequest({ url: '/articles/published' }))
+    this.props.dispatch(articleListRequest({ url: 'api/v1//articles/published' }))
   }
 
   render() {
diff --git a/resources/js/modules/web/pages/home/Page.js b/resources/js/modules/web/pages/home/Page.js
index 57e4ca6e..89902e80 100644
--- a/resources/js/modules/web/pages/home/Page.js
+++ b/resources/js/modules/web/pages/home/Page.js
@@ -10,7 +10,7 @@ import { articleListRequest } from '../../../article/service'
 
 export default function Page({ dispatch }) {
   useLayoutEffect(() => {
-    dispatch(articleListRequest({ url: '/articles/published' }))
+    dispatch(articleListRequest({ url: 'api/v1//articles/published' }))
   }, [])
 
   return <div>
diff --git a/resources/js/utils/Http.js b/resources/js/utils/Http.js
index 2026bd88..3bcc6481 100644
--- a/resources/js/utils/Http.js
+++ b/resources/js/utils/Http.js
@@ -3,12 +3,10 @@ import axios from 'axios'
 import store from '../store/index'
 import { authLogout } from '../modules/auth/store/actions'
 
-const version = 'v1'
-const API_URL = (process.env.NODE_ENV === 'test') ? process.env.BASE_URL || (`http://localhost:${process.env.PORT}/api/${version}/`) : `/api/${version}`;
+const API_URL = (process.env.NODE_ENV === 'test') ? process.env.BASE_URL || (`http://localhost:${process.env.PORT}/`) : `/`;
 
 axios.defaults.baseURL = API_URL;
 axios.defaults.headers.common.Accept = 'application/json';
-axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 axios.interceptors.response.use(
diff --git a/resources/js/values/index.js b/resources/js/values/index.js
index e5f0f04b..5fc5ccf0 100644
--- a/resources/js/values/index.js
+++ b/resources/js/values/index.js
@@ -1,5 +1,5 @@
-const APP_TITLE = 'Your Blog Name'
+const APP_TITLE = 'Laravel React Boiler Plate'
 
 export {
     APP_TITLE,
-}
\ No newline at end of file
+}
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
new file mode 100644
index 00000000..0407ab57
--- /dev/null
+++ b/resources/sass/_variables.scss
@@ -0,0 +1,19 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+// Colors
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66d9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index ae23f680..db7a3f79 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,23 +1,9 @@
-// Bootstrap
-@import "../../node_modules/bootstrap/scss/bootstrap";
-@import "../../node_modules/font-awesome/scss/font-awesome";
-
-/*
- * Dashboard
- */
-
-header {
-  padding: 30px 0;
-}
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
 
-section {
-  padding: 30px 0;
-}
+// Variables
+@import 'variables';
 
-.has-shadow {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-}
-
-.show > .dropdown-menu {
-  display: block;
-}
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+@import "~font-awesome/scss/font-awesome";
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 5380b05d..2906f94e 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -2,29 +2,19 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <base href="/" />
-    <!-- CSRF Token -->
-    <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel 5.8 with React 16 Boilerplate') }}</title>
+    <title>{{'Laravel 8 with React 17 Boilerplate'}}</title>
 
     <!-- Styles -->
     <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
-    <!-- Scripts -->
-    <script>
-        window.Laravel = {!! json_encode([
-            'csrfToken' => csrf_token(),
-        ]) !!};
-    </script>
 </head>
 <body>
 <div id="app">
     @yield('content')
 </div>
-
 <!-- Scripts -->
 <script src="{{ mix('/js/app.js') }}"></script>
 </body>
 </html>
+
diff --git a/routes/api/articles.php b/routes/api/articles.php
index 62214853..1bb9d1aa 100644
--- a/routes/api/articles.php
+++ b/routes/api/articles.php
@@ -5,10 +5,10 @@
 Route::get('published', 'ArticleController@publishedArticles')->name('articles.published.index');
 Route::get('published/{id}', 'ArticleController@publishedArticle')->name('articles.published.show');
 
-Route::group(['middleware' => 'auth:api'], function() {
+Route::group(['middleware' => 'auth:sanctum'], function() {
     Route::post('/', 'ArticleController@store')->name('articles.store');
     Route::get('/', 'ArticleController@index')->name('articles.index');
     Route::get('/{id}', 'ArticleController@show')->name('articles.show');
     Route::match(['put', 'patch'], '/{id}', 'ArticleController@update')->name('articles.update');
     Route::delete('/{id}', 'ArticleController@delete')->name('articles.delete');
-});
\ No newline at end of file
+});
diff --git a/routes/api/auth.php b/routes/api/auth.php
index c60d9e92..57d92a0a 100644
--- a/routes/api/auth.php
+++ b/routes/api/auth.php
@@ -3,12 +3,8 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
-Route::post('register', 'Auth\RegisterController@register')->name('auth.register');
-Route::post('login', 'Auth\LoginController@login')->name('auth.login');
-
-Route::group(['middleware' => 'auth:api'], function() {
-    Route::delete('/logout', 'Auth\LoginController@logout')->name('auth.logout');;
 
+Route::group(['middleware' => 'auth:sanctum'], function() {
     Route::get('/me', function (Request $request) {
         return $request->user();
     });
diff --git a/routes/web.php b/routes/web.php
index 56f30cbd..714e6c14 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,6 +11,12 @@
 |
 */
 
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+
+Auth::routes();
+
 Route::get( '/{any}', function () {
     return view('index');
 })->where('any', '.*');
+
diff --git a/webpack.mix.js b/webpack.mix.js
index b3f66f34..f1d6125a 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,4 +1,5 @@
-const mix = require('laravel-mix')
+const mix = require('laravel-mix');
+
 /*
  |--------------------------------------------------------------------------
  | Mix Asset Management
@@ -53,4 +54,5 @@ mix.webpackConfig({
   mix.react('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css')
     .sourceMaps(false, 'source-map')
-    .version();
+    .version()
+    .browserSync('http://localhost:8100')