diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 889a50d..edcd643 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -3,24 +3,21 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Http\Controllers\SiteController;
+
+class HomeController extends Controller {
+  private $objSite;
+  private $menu;
 
-class HomeController extends Controller
-{
-  /**
-   * Create a new controller instance.
-   *
-   * @return void
-   */
   public function __construct() {
-    $this->middleware('auth');
+    $this->objSite = new SiteController();
+    $this->menu = $this->objSite->getPagesInMenu();
+    //$this->middleware('auth');
   }
 
-  /**
-   * Show the application dashboard.
-   *
-   * @return \Illuminate\Http\Response
-   */
-  public function index() {
-    return view('home');
+  public function index () {
+    $menu = $this->menu;
+    $res = $this->objSite->getPosts2();
+    return view('pages.site.index', compact(['res', 'menu']));
   }
 }
diff --git a/app/Http/Controllers/SiteController.php b/app/Http/Controllers/SiteController.php
index 908f706..b752fb6 100644
--- a/app/Http/Controllers/SiteController.php
+++ b/app/Http/Controllers/SiteController.php
@@ -23,6 +23,122 @@ class SiteController extends Controller {
   }
 
   // Posts
+  public function getPosts2() { // /api/rpc/site/post/get/all
+    $kero_token = $_COOKIE['kero_token'];
+    $check = $this->objAuth->checkLegit($kero_token);
+
+    // Load group colours.
+    $ucol = $this->objUser->getGroupColours();
+    $valid = $this->objAuth->getPermissions($kero_token);
+
+    // Load content.
+    if ($valid['blg_editpost']) {
+      $get = DB::table('blg_content')
+        ->join('users', 'blg_content.user_id', '=', 'users.id')
+        ->join('usr_details', 'usr_details.user_id', '=', 'blg_content.user_id')
+        ->join('usr_profile', 'usr_profile.user_id', '=', 'blg_content.user_id')
+        ->join('usr_perm_id', 'usr_perm_id.user_id', '=', 'blg_content.user_id')
+        ->where('isPost', 1)
+        ->orderBy('publish_date', 'desc')
+        ->get(array(
+          'blg_content.id',
+          'blg_content.user_id',
+          'title',
+          'slug',
+          'post_date',
+          'publish_date',
+          'public_status',
+          'message',
+          'username',
+          'perm_id',
+          'gender',
+          'avatar',
+          'name_style',
+          'display_name'
+        ));
+    }
+    else {
+      $get = DB::table('blg_content')
+        ->join('users', 'blg_content.user_id', '=', 'users.id')
+        ->join('usr_details', 'usr_details.user_id', '=', 'blg_content.user_id')
+        ->join('usr_profile', 'usr_profile.user_id', '=', 'blg_content.user_id')
+        ->join('usr_perm_id', 'usr_perm_id.user_id', '=', 'blg_content.user_id')
+        ->where('public_status', 0)
+        ->where('isPost', 1)
+        ->orderBy('publish_date', 'desc')
+        ->get(array(
+          'blg_content.id',
+          'blg_content.user_id',
+          'title',
+          'slug',
+          'post_date',
+          'publish_date',
+          'public_status',
+          'message',
+          'username',
+          'perm_id',
+          'gender',
+          'avatar',
+          'name_style',
+          'display_name'
+        ));
+    }
+
+    $res = array();
+    $key = 0;
+    setlocale(LC_ALL, 'ja_JP.utf8');
+
+    foreach ($get as $i) {
+      $showName = '';
+      $showCol = '';
+      $showGroupName = '';
+
+      // Display name or username?
+      if (!empty($i->display_name)) {
+        $showName = $i->display_name;
+      }
+      else {
+        $showName = $i->username;
+      }
+
+      // Custom name styling or default?
+      if (!empty($i->name_style)) {
+        $showCol = $i->name_style;
+      }
+      else {
+        foreach ($ucol as $j) {
+          if ($j->id == $i->perm_id) {
+            if ($i->gender == 1) $showCol = $j->colour_m;
+            else if ($i->gender == 2) $showCol = $j->colour_f;
+            else $showCol = $j->colour_u;
+          }
+        }
+      }
+
+      // Group names.
+      $gname = $this->objUser->getGroupName($i->user_id);
+      $showGroupName = $gname[0]->name;
+
+      array_push($res, [
+        'key' => $key,
+        'id' => $i->id,
+        'user_id' => $i->user_id,
+        'title' => $i->title,
+        'slug' => $i->slug,
+        'post_date' => strftime('%Y/%m/%d(%a) %H:%M:%S %Z', $i->post_date),
+        'publish_date' => strftime('%Y/%m/%d(%a) %H:%M:%S %Z', $i->publish_date),
+        'public_status' => $i->public_status,
+        'message' => $i->message,
+        'avatar' => $i->avatar,
+        'showcol' => $showCol,
+        'showname' => $showName
+      ]);
+      $key++;
+    }
+
+    return $res;
+  }
+
   public function getPosts(Request $r) { // /api/rpc/site/post/get/all
     $check = $this->objAuth->checkLegit($r->kero_token);
 
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 83f1d10..449d4a9 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -7,6 +7,7 @@ use App\Models\ForUser;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Cache;
 use Illuminate\Http\Request;
 use Illuminate\Contracts\Routing\ResponseFactory;
 use Illuminate\Support\Facades\Log;
@@ -130,36 +131,45 @@ class UserController extends Controller {
   }
 
   public function getUsers(Request $r) { // /api/rpc/user/user/getusers
-    $getting = array(
-      'users.id',
-      'usr_perm_module.name as group_name',
-      'users.username',
-      'usr_perm_id.perm_id',
-      'usr_details.reg_date',
-      'usr_profile.gender',
-      'usr_profile.avatar',
-      'usr_profile.name_style',
-      'usr_profile.display_name',
-      'usr_profile.country'
-    );
+    $get = null;
 
-    $valid = $this->objAuth->getPermissions($r->kero_token);
+    if (Cache::has('getUsers')) $get = Cache::get('getUsers');
+    else {
+      $getting = array(
+        'users.id',
+        'usr_perm_module.name as group_name',
+        'users.username',
+        'usr_perm_id.perm_id',
+        'usr_details.reg_date',
+        'usr_profile.gender',
+        'usr_profile.avatar',
+        'usr_profile.name_style',
+        'usr_profile.display_name',
+        'usr_profile.country'
+      );
 
-    if ($valid['usr_emailshow'] == 1) {
-      array_push($getting, 'users.email');
+      $valid = $this->objAuth->getPermissions($r->kero_token);
+
+      if ($valid['usr_emailshow'] == 1) {
+        array_push($getting, 'users.email');
+      }
+
+      if ($valid['usr_ipshow'] == 1) {
+        array_push($getting, 'usr_profile.ip_address');
+      }
+
+      $get = DB::table('users')
+        ->join('usr_details', 'usr_details.user_id', '=', 'users.id')
+        ->join('usr_profile', 'usr_profile.user_id', '=', 'users.id')
+        ->join('usr_perm_id', 'usr_perm_id.user_id', '=', 'users.id')
+        ->join('usr_perm_module', 'usr_perm_module.id', 'usr_perm_id.perm_id')
+        ->orderBy('usr_details.reg_date', 'asc')
+        ->get($getting);
+
+      Cache::put('getUsers', $get);
     }
 
-    if ($valid['usr_ipshow'] == 1) {
-      array_push($getting, 'usr_profile.ip_address');
-    }
-
-    return DB::table('users')
-      ->join('usr_details', 'usr_details.user_id', '=', 'users.id')
-      ->join('usr_profile', 'usr_profile.user_id', '=', 'users.id')
-      ->join('usr_perm_id', 'usr_perm_id.user_id', '=', 'users.id')
-      ->join('usr_perm_module', 'usr_perm_module.id', 'usr_perm_id.perm_id')
-      ->orderBy('usr_details.reg_date', 'asc')
-      ->get($getting);
+    return $get;
   }
 
   public function getUser($id, Request $r) { // /api/rpc/user/user/getuser/id/uid
@@ -847,34 +857,37 @@ class UserController extends Controller {
     }
   }
 
-  public function getNotification(Request $r) { // /api/rpc/user/notification/get
+  public function getNotification (Request $r) { // /api/rpc/user/notification/get
     $check = $this->objAuth->checkLegit($r->kero_token);
+    $res = null;
 
     if ($check != 0) {
-      $get = DB::table('usr_notification')
-        ->select('id', 'app_id', 'text', 'section', 'goto')
-        ->where('user_id', $check)
-        ->get();
+      if (Cache::has('getNotification')) $get = Cache::get('getNotification');
+      else {
+        $get = DB::table('usr_notification')
+          ->select('id', 'app_id', 'text', 'section', 'goto')
+          ->where('user_id', $check)
+          ->get();
 
-      $res = array();
+        $res = array();
 
-      foreach ($get as $g) {
-        $prot = DB::table('sys_settings')->select('protocol')->first()->protocol;
-        $goto = DB::table('sys_apps')->select('url')->where('id', $g->app_id)->first()->url;
+        foreach ($get as $g) {
+          $prot = DB::table('sys_settings')->select('protocol')->first()->protocol;
+          $goto = DB::table('sys_apps')->select('url')->where('id', $g->app_id)->first()->url;
 
-        $res[] = array(
-          'id' => $g->id,
-          'text' => $g->text,
-          'url' => 'http'.($prot == 1 ? 's' : '').'://'.$goto.'/#/'.$g->section
-        );
+          $res[] = array(
+            'id' => $g->id,
+            'text' => $g->text,
+            'url' => 'http'.($prot == 1 ? 's' : '').'://'.$goto.'/#/'.$g->section
+          );
+
+          Cache::put('getNotification', $get);
+        }
       }
 
       return $res;
     }
-
-    else {
-      return array();
-    }
+    else return array();
   }
 
   public function addNotification(Request $r, $uid, $aid, $txt, $sec, $goto) { // /api/rpc/user/notification/add
@@ -890,6 +903,8 @@ class UserController extends Controller {
           'goto' => $goto
         ]);
 
+      if (Cache::has('getNotification')) Cache::forget('getNotification');
+
       return 1;
     }
   }
@@ -902,6 +917,8 @@ class UserController extends Controller {
         ->where('id', $r->id)
         ->where('user_id', $check)
         ->delete();
+
+      if (Cache::has('getNotification')) Cache::forget('getNotification');
     }
   }
 }
diff --git a/package.json b/package.json
index 6973df4..fc089a4 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,9 @@
         "vue-template-compiler": "^2.5.21"
     },
     "dependencies": {
-        "js-cookie": "^2.2.0"
+        "bootstrap-vue": "^2.0.4",
+        "browserslist": "^4.7.2",
+        "caniuse-lite": "^1.0.30001006",
+        "js-cookie": "^2.2.1"
     }
 }
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 8a7c3a4..0502d31 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -9,8 +9,12 @@ require('./bootstrap');
 
 window.Vue = require('vue');
 import bash from './components/bash/cli.vue';
+import navbar from './components/site/components/navbar.vue';
+import index from './components/site/views/index.vue';
 
 Vue.component('bash', bash);
+Vue.component('navbar', navbar);
+Vue.component('index', index);
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to
diff --git a/resources/assets/js/auth.js b/resources/assets/js/auth.js
new file mode 100644
index 0000000..3166d98
--- /dev/null
+++ b/resources/assets/js/auth.js
@@ -0,0 +1,39 @@
+import Cookie from 'js-cookie'
+
+const LOGIN_URL = '/api/auth/login'
+const SIGNUP_URL = '/api/auth/register'
+
+export default {
+  domain: '076.ne.jp',
+  user: { id: 0, authenticated: false },
+  login (creds) {
+    axios.post(LOGIN_URL, creds).then(res => {
+      if (creds.username === res.data.username && creds.password === res.data.rawPassword) {
+        Cookie.set('kero_token', res.data.kero_token, { expires: 365, domain: this.domain, path: '/' });
+
+        this.user.authenticated = true;
+        window.location.reload();
+      }
+    });
+  },
+  signup (creds) { axios.post(SIGNUP_URL, creds).then(res => { if (res.data[0] === '1') this.login(creds); }); },
+  logout () {
+    Cookie.remove('kero_token', { domain: this.domain, path: '/' });
+    this.user.authenticated = false;
+    window.location.reload();
+  },
+  checkAuth () {
+    const tok = Cookie.get('kero_token');
+
+    axios.post('/api/auth/checkauth', { kero_token: tok }).then(res => {
+      if (tok === res.data.kero_token) {
+        this.user.id = res.data.id;
+        this.user.authenticated = true;
+      }
+      else {
+        this.user.id = 0;
+        this.user.authenticated = false;
+      }
+    })
+  }
+}
diff --git a/resources/assets/js/components/site/components/index.vue b/resources/assets/js/components/site/components/index.vue
new file mode 100644
index 0000000..d6213e2
--- /dev/null
+++ b/resources/assets/js/components/site/components/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="'within' + (public_status !== 0 ? ' wny' : '')">
+    <div :class="'bar' + (public_status !== 0 ? ' bny' : '')" @click="goto('/blog/' + post)">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import Cookie from 'js-cookie';
+  // import NewPost from './newpost';
+  import auth from '../../../auth';
+
+  export default {
+    //components: { NewPost },
+    props: { post: '', index: 0 },
+    data: function () {
+      return {
+        slug: this.post,
+        title: '',
+        public_status: 0,
+        priv: []
+      }
+    },
+    created: function () {
+      axios.post('/api/auth/getpermissions', { kero_token: Cookie.get('kero_token') }).then(res => {
+        res.data.forEach(cb => {
+          this.priv['ap'] = cb.blg_addpost;
+        });
+      }).then(() => { this.getPost(); });
+    },
+    methods: {
+      goto: function (page) {
+        this.$router.push(page);
+        this.$emit('refresh-page', true);
+      },
+      getPost: function () {
+        axios.get('/api/rpc/site/post/get/slug/' + this.post, { params: { kero_token: Cookie.get('kero_token') } }).then(res => {
+          res.data.forEach(cb => {
+            this.title = cb.title;
+            this.public_status = cb.public_status;
+          });
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .within { margin: 0 auto; }
+  .wny { border: solid 2px #ed1515; box-shadow: 0px 0px 20px 10px rgba(237,21,21,1); }
+  .bny, .cny { background-color: #da4453; border-bottom: solid 2px #ed1515; }
+  .mny { background-color: #c0392b; border-bottom: solid 2px #ed1515; }
+  .new { background-color: #2c3e50; margin: 10px auto; padding: 0; }
+  .head > div { margin: 5px 0; }
+  .new-head, .new-body { padding: 10px; }
+  .new-head { border: 2px solid #3daee9; background-color: #34495e; }
+  .new-body { border-bottom: 2px solid #3daee9; border-left: 2px solid #3daee9; border-right: 2px solid #3daee9; }
+</style>
+
diff --git a/resources/assets/js/components/site/components/navbar.vue b/resources/assets/js/components/site/components/navbar.vue
new file mode 100644
index 0000000..5a2b75b
--- /dev/null
+++ b/resources/assets/js/components/site/components/navbar.vue
@@ -0,0 +1,159 @@
+<template>
+  <nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-md">
+    <button type="button" aria-label="Toggle navigation" aria-controls="nav_collapse" aria-expanded="false" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
+    <div class="navbar-brand" @click="$router.replace('/home')">０７６</div>
+    <div id="nav_collapse" class="navbar-collapse collapse" style="display: none;" v-for="(m, i) in menuItem" :key="`menu-${i}`">
+      <ul class="navbar-nav"><li class="nav-item"><a target="_self" :href="`/$(m.slug)`" class="nav-link">{{ m.title }}</a></li></ul>
+    </div>
+    <ul class="navbar-nav ml-auto" v-if="whoami === 0">
+      <li class="nav-item"><a target="_self" href="https://user.076.ne.jp/#/login" class="nav-link">サインイン</a></li>
+      <li class="nav-item"><a target="_self" href="https://user.076.ne.jp/#/register" class="nav-link">新規登録</a></li>
+    </ul>
+    <ul class="navbar-nav ml-auto" v-else>
+      <!-- new-page v-if="canAddPage === 1" -->
+      <li class="nav-item b-nav-dropdown dropdown" id="__BVID__9">
+        <a href="#" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" id="__BVID__9__BV_button_">
+          <span v-if="notification.length === 0">通知</span>
+          <span v-else>通知 {{ notification.length }}</span>
+        </a>
+        <ul v-if="notification.length > 0" tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__9__BV_button_">
+          <span>
+            <li v-for="(n, j) in notification" :key="`tsuchi-${j}`" :href="n.url" @click="delNotify(n.id)"><a role="menuitem" target="_self" href="#" class="dropdown-item">{{ n.text }}</a></li>
+          </span>
+        </ul>
+        <ul v-else tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__9__BV_button_">
+          <span>
+            <li><a role="menuitem" target="_self" href="#" class="dropdown-item">通知がありません</a></li>
+          </span>
+        </ul>
+      </li>
+      <li class="nav-item b-nav-dropdown dropdown" id="__BVID__11">
+        <a href="#" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" id="__BVID__11__BV_button_">
+          <img :src="`https://srv.076.ne.jp/${userAvatar}`" height="25px">
+          <span :style="userColour">{{ userName }}</span>
+        </a>
+        <ul tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__11__BV_button_">
+          <li><a role="menuitem" target="_self" href="https://user.076.ne.jp/#/member" class="dropdown-item">ユーザーリスト</a></li>
+          <li><a role="menuitem" target="_self" :href="`https://user.076.ne.jp/#/profile/${whoami}`" class="dropdown-item">プロファイル</a></li>
+          <li><a role="menuitem" target="_self" href="#" @click="logout" class="dropdown-item">サインアウト</a></li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import Cookie from 'js-cookie';
+  import auth from '../../../auth';
+  // import NewPage from './newpage';
+
+  export default {
+    // components: { NewPage },
+    data: function () {
+      return {
+        whoami: 0,
+        groupCol: [],
+        showName: '',
+        showCol: '',
+        userName: '',
+        userColour: '',
+        userAvatar: '',
+        menuItem: [],
+        notification: [],
+        canAddPage: 0
+      }
+    },
+    created: function () {
+      const tok = Cookie.get('kero_token');
+
+      if (tok) {
+        axios.post('/api/auth/getpermissions', {
+          kero_token: tok
+        }).then(res => {
+          res.data.forEach(cb => {
+            this.canAddPage = cb.blg_addpage;
+          });
+        });
+
+        axios.post('/api/auth/checkauth', {
+          kero_token: tok
+        }).then(res => {
+          this.whoami = res.data.id;
+          axios.get('/api/rpc/user/user/getgroupcolours').then(res => {
+            res.data.forEach(cb => {
+              this.groupCol.push({
+                'id': cb.id,
+                'name': cb.name,
+                'male': cb.colour_m,
+                'female': cb.colour_f,
+                'unknown': cb.colour_u
+              });
+            });
+          }).then(() => {
+            axios.get('/api/rpc/user/user/getuser/' + res.data.id, { params: { kero_token: tok } }).then(des => {
+              des.data.forEach(cb => {
+                if (cb.display_name !== '') this.showName = cb.display_name;
+                else this.showName = cb.username;
+
+                if (cb.name_style !== '') this.showCol = cb.name_style;
+                else {
+                  this.groupCol.forEach(re => {
+                    if (re.id === cb.perm_id) {
+                      if (cb.gender === 1) this.showCol = re.male;
+                      else if (cb.gender === 2) this.showCol = re.female;
+                      else this.showCol = re.unknown;
+                    }
+                  });
+                }
+                this.userName = this.showName;
+                this.userAvatar = (cb.avatar !== '' ? cb.avatar : 'assets/avatars/haznoavaz.png');
+                this.userColour = this.showCol;
+              });
+            });
+          });
+        });
+      }
+      axios.get('/api/rpc/site/page/get/menu', {
+        params: {
+          kero_token: Cookie.get('kero_token')
+        }
+      }).then(des => {
+        des.data.forEach(cb => {
+          this.menuItem.push({
+            title: cb.title,
+            slug: cb.slug,
+            int: true
+          });
+        });
+      }).then(() => {
+        this.menuItem.push({
+          title: 'サポート掲示板',
+          slug: 'https://board.076.ne.jp',
+          int: false
+        });
+      });
+      axios.get('/api/rpc/user/notification/get', {
+        params: {
+          kero_token: Cookie.get('kero_token')
+        }
+      }).then(nes => {
+        nes.data.forEach(cb => {
+          this.notification.push(cb);
+        });
+      });
+    },
+    methods: {
+      delNotify: function (id) {
+        axios.post('/api/rpc/user/notification/del', {
+          kero_token: Cookie.get('kero_token'),
+          id: id
+        });
+      },
+      logout: function () {
+        auth.logout();
+      }
+    }
+  }
+</script>
+
diff --git a/resources/assets/js/components/site/components/post.vue b/resources/assets/js/components/site/components/post.vue
new file mode 100644
index 0000000..780d522
--- /dev/null
+++ b/resources/assets/js/components/site/components/post.vue
@@ -0,0 +1,208 @@
+<template>
+  <b-container fluid>
+    <b-row>
+      <b-col sm="12">
+        <b-row style="margin: 20px;">
+          <b-col :sm="(priv.ap === 1 ? '3' : '12')">
+            <b-btn variant="primary" @click="goto('/blog')" block>ホームへ</b-btn>
+          </b-col>
+          <b-col sm="3">
+            <new-post v-if="priv.ap === 1" :index="index" @new-post="x => { $emit('refresh-blog', true); }" />
+          </b-col>
+          <b-col sm="3">
+            <edit-post
+              v-if="priv.ep === 1"
+              :id="id"
+              :title="title"
+              :slug="slug"
+              :publish_date="publish_date"
+              :public_status="public_status"
+              :message="message"
+              @edit-post="x => { $emit('refresh-blog', true); }"
+            />
+          </b-col>
+          <b-col sm="3">
+            <del-post v-if="priv.dp === 1" :id="id" @del-post="x => { $emit('refresh-blog', true); }" />
+          </b-col>
+        </b-row>
+        <div :class="'within' + (public_status !== 0 ? ' wny' : '')">
+          <div :class="'bar' + (public_status !== 0 ? ' bny' : '')" @click="goto('/blog/' + post)">
+            {{ title }}
+          </div>
+          <div :class="'meta' + (public_status !== 0 ? ' mny' : '')">
+            <a :href="'https://user.076.ne.jp/#/profile/' + user_id">
+              <img :src="'https://srv.076.ne.jp/' + avatar" width="20" />
+              <span :style="showcol">{{ showname }}</span>
+            </a>、
+            <span v-if="public_status === 0">{{ publish_date }}で公開</span>
+            <span v-else>
+              <span v-if="public_status === 1">公開予定：{{ publish_date }} |</span>
+              <span v-if="public_status === 2">限定公開 |</span>
+              <span v-if="public_status === 3">非公開 |</span>
+              <span v-if="public_status === 4">編集中 |</span>
+              {{ post_date }}で投稿
+            </span>
+          </div>
+          <div class="back" style="white-space: pre-wrap;" v-html="message"></div>
+          <div class="comment">
+            <comment :id="id" :refresh="refreshComment" />
+            <div class="new" v-if="priv.ac">
+              <div class="new-head">
+                名前：
+                <a :href="'https://user.076.ne.jp/#/profile/' + user.uid">
+                  <img :src="'https://srv.076.ne.jp/' + user.userAvatar" height="15" />
+                  <span :style="user.showCol">{{ user.showName }}</span>
+                </a>
+              </div>
+              <div class="new-body">
+                <b-form-textarea id="newComment" v-model="newComment" placeholder="コメントを入力してください" :rows="3" :max-rows="6" />
+                <hr />
+                <b-btn v-if="newComment !== ''" variant="primary" @click="newComment = ''">キャンセル</b-btn>
+                <b-btn :disabled="newComment === ''" variant="primary" @click="makeComment">コメント</b-btn>
+              </div>
+            </div>
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import Cookie from 'js-cookie';
+  import { Layout } from 'bootstrap-vue/es/components';
+  import Comment from './comment';
+  import NewPost from './newpost';
+  import EditPost from './editpost';
+  import DelPost from './delpost';
+  import auth from '../auth';
+
+  Vue.use(Layout);
+
+  export default {
+    components: { NewPost, EditPost, DelPost, Comment },
+    props: { post: '', index: 0 },
+    data: function () {
+      return {
+        id: 0,
+        slug: this.post,
+        user_id: 0,
+        title: '',
+        public_status: 0,
+        post_date: '',
+        publish_date: '',
+        message: '',
+        avatar: '',
+        showcol: '',
+        showname: '',
+        newComment: '',
+        refreshComment: false,
+        priv: [],
+        user: {
+          uid: auth.user.id,
+          groupCol: [],
+          showCol: '',
+          showName: '',
+          userName: '',
+          userColour: '',
+          userAvatar: ''
+        }
+      }
+    },
+    created: function () {
+      const tok = Cookie.get('kero_token');
+
+      if (tok) {
+        axios.post('/api/auth/checkauth', { kero_token: tok }).then(res => {
+          this.whoami = res.data.id;
+          axios.get('/api/rpc/user/user/getgroupcolours').then(res => {
+            res.data.forEach(cb => {
+              this.user.groupCol.push({
+                'id': cb.id,
+                'name': cb.name,
+                'male': cb.colour_m,
+                'female': cb.colour_f,
+                'unknown': cb.colour_u
+              });
+            });
+          }).then(() => {
+            axios.get('/api/rpc/user/user/getuser/' + res.data.id, { params: { kero_token: tok } }).then(des => {
+              des.data.forEach(cb => {
+                if (cb.display_name !== '') this.user.showName = cb.display_name;
+                else this.user.showName = cb.username;
+
+                if (cb.name_style !== '') this.user.showCol = cb.name_style;
+                else {
+                  this.user.groupCol.forEach(re => {
+                    if (re.id === cb.perm_id) {
+                      if (cb.gender === 1) this.user.showCol = re.male;
+                      else if (cb.gender === 2) this.user.showCol = re.female;
+                      else this.user.showCol = re.unknown;
+                    }
+                  });
+                }
+                this.user.userName = this.user.showName;
+                this.user.userAvatar = (cb.avatar !== '' ? cb.avatar : 'assets/avatars/haznoavaz.png');
+                this.user.userColour = this.user.showCol;
+              });
+            });
+          });
+        });
+      }
+      axios.post('/api/auth/getpermissions', { kero_token: Cookie.get('kero_token') }).then(res => {
+        res.data.forEach(cb => {
+          this.priv['ac'] = cb.blg_addcomment;
+          this.priv['ap'] = cb.blg_addpost;
+          this.priv['ep'] = cb.blg_editpost;
+          this.priv['dp'] = cb.blg_delpost;
+        });
+      }).then(() => { this.getPost(); });
+    },
+    methods: {
+      goto: function (page) {
+        this.$router.push(page);
+        this.$emit('refresh-page', true);
+      },
+      makeComment: function () {
+        axios.post('/api/rpc/site/comment/new', {
+          kero_token: Cookie.get('kero_token'),
+          content_id: this.id,
+          message: this.newComment,
+          ip_address: '0.0.0.0'
+        }).then(() => {
+          this.newComment = '';
+          this.refreshComment = true;
+        });
+      },
+      getPost: function () {
+        axios.get('/api/rpc/site/post/get/slug/' + this.post, { params: { kero_token: Cookie.get('kero_token') } }).then(res => {
+          res.data.forEach(cb => {
+            this.id = cb.id
+            this.user_id = cb.user_id
+            this.title = cb.title
+            this.public_status = cb.public_status
+            this.post_date = cb.post_date
+            this.publish_date = cb.publish_date
+            this.message = cb.message
+            this.avatar = cb.avatar
+            this.showcol = cb.showcol
+            this.showname = cb.showname
+          });
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .wny { border: solid 2px #ed1515; box-shadow: 0px 0px 20px 10px rgba(237,21,21,1); }
+  .bny, .cny { background-color: #da4453; border-bottom: solid 2px #ed1515; }
+  .mny { background-color: #c0392b; border-bottom: solid 2px #ed1515; }
+  .new { background-color: #2c3e50; margin: 10px auto; padding: 0; }
+  .head > div { margin: 5px 0; }
+  .new-head, .new-body { padding: 10px; }
+  .new-head { border: 2px solid #3daee9; background-color: #34495e; }
+  .new-body { border-bottom: 2px solid #3daee9; border-left: 2px solid #3daee9; border-right: 2px solid #3daee9; }
+</style>
+
diff --git a/resources/assets/js/components/site/views/index.vue b/resources/assets/js/components/site/views/index.vue
new file mode 100644
index 0000000..318755b
--- /dev/null
+++ b/resources/assets/js/components/site/views/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <span v-for="(g, i) in gotten" :key="`post-${i}`">
+      <index :post="g.slug" :index="i" @refresh-blog="get" />
+    </span>
+  </div>
+</template>
+
+<script>
+  import index from '../components/index';
+  import Cookie from 'js-cookie';
+
+  export default {
+    name: 'blog',
+    components: { index },
+    data () { return { gotten: [] } },
+    created: function () { this.get(); },
+    // watch: { '$route.params.slug': function (i) { this.get(); } },
+    methods: {
+      get: function () {
+        this.gotten = [];
+
+        axios.get('/api/rpc/site/post/get/all', { params: { kero_token: Cookie.get('kero_token') } }).then(res => {
+          res.data.forEach(cb => {
+            this.gotten.push({ slug: cb.slug });
+          });
+        });
+      }
+    }
+  }
+</script>
+
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 695a9f8..e0eb3ab 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -9,5 +9,242 @@
 @import '~bootstrap/scss/bootstrap';
 
 html {
-  cursor: text;
+  // cursor: text;
 }
+
+body {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #fcfcfc;
+    background-color: #232629;
+  }
+  a {
+    color: #1d99f3;
+  }
+  .bg-dark {
+    background: radial-gradient(farthest-corner at 50% 85%,
+      #3498db 0%, #232629 100%);
+    border-bottom: 2px solid #3daee9;
+    box-shadow: 0 0 7px 3px #1d99f3;
+  }
+  .navbar-nav .dropdown-menu {
+    background-color: #31363b;
+    color: #fcfcfc;
+    border: 2px solid #3daee9;
+    box-shadow: 0 0 7px 3px #1d99f3;
+  }
+  .dropdown-item {
+    color: #fcfcfc;
+  }
+  .dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
+    color: #fcfcfc;
+    background-color: #3daee9;
+  }
+  .navbar-brand {
+    padding: 5px;
+  }
+  .navbar-brand, .nav-item {
+    transition: background 0.3s, color 0.3s;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .navbar-brand:hover, .nav-item:hover {
+    background-color: #2980b9;
+  }
+  .badge-light {
+    color: #232629;
+    background-color: #eff0f1;
+  }
+  .badge {
+    font-size: 100%;
+  }
+  .within {
+    margin: 30px auto;
+    border: 2px solid #3daee9;
+    box-shadow: 0px 0px 7px 3px #1d99f3;
+  }
+  .bar {
+    background: linear-gradient(
+      to bottom,
+      #22699c 0%,
+      #436a86 34%,
+      #1a3746 100%
+    );
+    padding: 5px;
+    font-size: 200%;
+    border-bottom: solid 2px #3daee9;
+    cursor: pointer;
+    transition: background 0.3s, color 0.3s;
+  }
+  .bar > a {
+    color: #fcfcfc;
+  }
+  .bar > a:hover {
+    text-decoration: none;
+  }
+  .bar:hover {
+    background: linear-gradient(
+      to bottom,
+      #2980b9 0%,
+      #6e93ad 34%,
+      #2b6b8b 100%
+    );
+    // background-color: #2980b9;
+  }
+  .meta {
+    padding: 5px;
+    text-align: left;
+    background-color: #2c3e50;
+    border-bottom: solid 2px #3daee9;
+  }
+  .comment {
+    border-top: solid 2px #3daee9;
+  }
+  .back, .comment {
+    padding: 10px;
+    background-color: #31363b;
+    text-align: left;
+  }
+  .modal-header, .modal-body, .modal-footer {
+    color: #fcfcfc;
+  }
+  .modal-header {
+    background: linear-gradient(
+      to bottom,
+      #1d99f3 0%,
+      #6ec0fb 34%,
+      #3daee9 100%
+    );
+  }
+  .modal-body {
+    background-color: #4d4d4d;
+  }
+  .modal-footer {
+    background-color: #31363b;
+  }
+  .form-control, .form-control:focus {
+    background-color: #31363b;
+    color: #fcfcfc;
+  }
+  .form-control {
+    border: 1px solid #34495e;
+  }
+  .form-control:focus {
+    border: 1px solid #3daee9;
+  }
+  .form-control:disabled, .form-control[readonly] {
+    background-color: #232629;
+  }
+  .custom-control-input:checked ~ .custom-control-label::before,
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
+  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before
+  {
+    color: #fcfcfc;
+    background-color: #3daee9;
+    border-color: #1d99f3;
+  }
+  .btn, btn:hover {
+    margin: 0 2px;
+    border: 2px solid;
+  }
+  .btn {
+    border-left-color: #fcfcfc;
+    border-top-color: #fcfcfc;
+  }
+  .btn:hover {
+    border-left-color: #7f8c8d;
+    border-top-color: #7f8c8d;
+  }
+  .btn-forum, .btn-forum.disabled, .btn-forum:disabled {
+    color: #fcfcfc;
+    background-color: #9b59b6;
+    border-color: transparent;
+    border-bottom-color: #cb81ea;
+    border-right-color: #cb81ea;
+  }
+  .btn-forum:hover {
+    color: #fcfcfc;
+    background-color: #61237c;
+    border-bottom-color: #9b59b6;
+    border-right-color: #9b59b6;
+  }
+  .btn-cwgames, .btn-cwgames.disabled, .btn-cwgames:disabled {
+    background: radial-gradient(ellipse at top, #4d4d4d, transparent),
+    radial-gradient(ellipse at bottom, #232629, transparent);
+    color: #fcfcfc;
+    border-bottom-color: #bdc3c7;
+    border-right-color: #bdc3c7;
+  }
+  .btn-cwgames:hover {
+    color: #fcfcfc;
+    background-color: #727272;
+    border-color: transparent;
+    border-bottom-color: #31363b;
+    border-right-color: #31363b;
+  }
+  .btn-primary, .btn-primary.disabled, .btn-primary:disabled {
+    background: radial-gradient(ellipse at top, #3daee9, transparent),
+    radial-gradient(ellipse at bottom, #232629, transparent);
+    color: #fcfcfc;
+    border-bottom-color: #9ed6ff;
+    border-right-color: #9ed6ff;
+  }
+  .btn-primary:hover {
+    color: #fcfcfc;
+    background-color: #205e7d;
+    border-color: transparent;
+    border-bottom-color: #1d99f3;
+    border-right-color: #1d99f3;
+  }
+  .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
+    color: #fcfcfc;
+    background-color: #7f8c8d;
+    border-color: transparent;
+    border-bottom-color: #d6dfe4;
+    border-right-color: #d6dfe4;
+  }
+  .btn-secondary:hover {
+    color: #fcfcfc;
+    background-color: #495051;
+    border-color: transparent;
+    border-bottom-color: #bdc3c7;
+    border-right-color: #bdc3c7;
+  }
+  .btn-success, .btn-success.disabled, .btn-success:disabled {
+    color: #fcfcfc;
+    background-color: #2ecc71;
+    border-color: transparent;
+    border-bottom-color: #20ec77;
+    border-right-color: #20ec77;
+  }
+  .btn-success:hover {
+    color: #fcfcfc;
+    background-color: #145d33;
+    border-bottom-color: #27ae60;
+    border-right-color: #27ae60;
+  }
+  .btn-danger, .btn-danger.disabled, .btn-danger:disabled {
+    color: #fcfcfc;
+    background-color: #da4453;
+    border-color: transparent;
+    border-bottom-color: #f58276;
+    border-right-color: #f58276;
+  }
+  .btn-danger:hover {
+    color: #fcfcfc;
+    background-color: #611e24;
+    border-bottom-color: #e74c3c;
+    border-right-color: #e74c3c;
+  }
+
+  .within { margin: 0 auto; }
+  .wny { border: solid 2px #ed1515; box-shadow: 0px 0px 20px 10px rgba(237,21,21,1); }
+  .bny, .cny { background-color: #da4453; border-bottom: solid 2px #ed1515; }
+  .mny { background-color: #c0392b; border-bottom: solid 2px #ed1515; }
+  .new { background-color: #2c3e50; margin: 10px auto; padding: 0; }
+  .head > div { margin: 5px 0; }
+  .new-head, .new-body { padding: 10px; }
+  .new-head { border: 2px solid #3daee9; background-color: #34495e; }
+  .new-body { border-bottom: 2px solid #3daee9; border-left: 2px solid #3daee9; border-right: 2px solid #3daee9; }
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/bash.blade.php
similarity index 98%
rename from resources/views/layouts/app.blade.php
rename to resources/views/layouts/bash.blade.php
index ff63e6d..12187bb 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/bash.blade.php
@@ -27,6 +27,7 @@
 </head>
 <body>
   <div id="app">
+    <navbar />
     @yield('content')
   </div>
 
diff --git a/resources/views/layouts/site.blade.php b/resources/views/layouts/site.blade.php
new file mode 100644
index 0000000..9b82939
--- /dev/null
+++ b/resources/views/layouts/site.blade.php
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="{{ 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">
+
+  <!-- CSRF Token -->
+  <meta name="csrf-token" content="{{ csrf_token() }}">
+
+  <title>{{ config('app.name', 'Laravel') }}</title>
+
+  <style>
+    #app {
+      font-family: monospace;
+      font-size: large;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-align: left;
+      margin-top: 20px;
+      margin-left: 20px;
+    }
+  </style>
+
+  <!-- Styles -->
+  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+</head>
+<body>
+  <div id="app">
+    <div class="container">
+      <div class="row">
+        <div class="col">画像</div>
+      </div>
+      <div class="row" style="padding: 16px 0;">
+        <div class="col">
+          <nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-md">
+            <div class="navbar-brand">０７６</div>
+            <div id="nav_collapse" class="navbar-collapse collapse" style="display: none;">
+              <ul class="navbar-nav"><li class="nav-item"><a target="_self" href="/slug" class="nav-link">title</a></li></ul>
+            </div>
+            <ul class="navbar-nav ml-auto">
+              <li class="nav-item b-nav-dropdown dropdown" id="__BVID__9">
+                <a href="#" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" id="__BVID__9__BV_button_">
+                  <span>通知</span>
+                </a>
+                <ul tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__9__BV_button_">
+                  <span>
+                    <li><a role="menuitem" target="_self" href="#" class="dropdown-item">通知がありません</a></li>
+                  </span>
+                </ul>
+              </li>
+              <li class="nav-item b-nav-dropdown dropdown" id="__BVID__11">
+                <a href="#" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" id="__BVID__11__BV_button_">
+                  <img src="https://srv.076.ne.jp/sa.png" height="25px">
+                  <span style="color: pink">sa</span>
+                </a>
+                <ul tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__11__BV_button_">
+                  <li><a role="menuitem" target="_self" href="/member" class="dropdown-item">ユーザーリスト</a></li>
+                  <li><a role="menuitem" target="_self" href="/profile/1" class="dropdown-item">プロファイル</a></li>
+                  <li><a role="menuitem" target="_self" href="/logout" class="dropdown-item">サインアウト</a></li>
+                </ul>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-3">
+          <div style="background-color: blue;">
+            @foreach ($menu as $m)
+              {{ $m['title'] }}
+            @endforeach
+          </div>
+        </div>
+        <div class="col-sm">
+          @yield('content')
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Scripts -->
+  <script src="{{ asset('js/app.js') }}"></script>
+</body>
+</html>
diff --git a/resources/views/pages/bash/cli.blade.php b/resources/views/pages/bash/cli.blade.php
index 78a3259..2c1e1ae 100644
--- a/resources/views/pages/bash/cli.blade.php
+++ b/resources/views/pages/bash/cli.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.app')
+@extends('layouts.bash')
 
 @section('content')
 <bash />
diff --git a/resources/views/pages/site/index.blade.php b/resources/views/pages/site/index.blade.php
new file mode 100644
index 0000000..c7b88c9
--- /dev/null
+++ b/resources/views/pages/site/index.blade.php
@@ -0,0 +1,13 @@
+@extends('layouts.site')
+
+@section('content')
+
+@foreach ($res as $r)
+<div class="within {{ ($r['public_status'] !== 0 ? ' wny' : '') }}">
+  <div class="bar {{ ($r['public_status'] !== 0 ? ' bny' : '') }}">
+    <a href="/blog/{{ $r['slug'] }}">{{ $r['title'] }}</a>
+  </div>
+</div>
+@endforeach
+
+@endsection
diff --git a/resources/views/pages/site/post.blade.php b/resources/views/pages/site/post.blade.php
index e69de29..45be6fd 100644
--- a/resources/views/pages/site/post.blade.php
+++ b/resources/views/pages/site/post.blade.php
@@ -0,0 +1,158 @@
+<template>
+  <b-navbar toggleable="md" sticky type="dark" variant="dark">
+    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
+    <b-navbar-brand @click="$router.replace('/home')">０７６</b-navbar-brand>
+    <b-collapse is-nav id="nav_collapse">
+      <b-navbar-nav v-for="(m, i) in menuItem" :key="`menu-${i}`">
+        <b-nav-item v-if="m.int" @click="$router.replace('/' + m.slug)">{{ m.title }}</b-nav-item>
+        <b-nav-item v-else :href="m.slug">{{ m.title }}</b-nav-item>
+      </b-navbar-nav>
+    </b-collapse>
+    <b-navbar-nav class="ml-auto" v-if="whoami === 0">
+      <b-nav-item href="https://user.076.ne.jp/#/login">サインイン</b-nav-item>
+      <b-nav-item href="https://user.076.ne.jp/#/register">新規登録</b-nav-item>
+    </b-navbar-nav>
+    <b-navbar-nav class="ml-auto" v-else>
+      <new-page v-if="canAddPage === 1" />
+      <b-nav-item-dropdown right>
+        <template slot="button-content">
+          <span v-if="notification.length === 0">通知</span>
+          <span v-else><b-badge variant="light">通知 {{ notification.length }}</b-badge></span>
+        </template>
+        <span v-if="notification.length !== 0">
+          <b-dropdown-item v-for="(n, j) in notification" :key="`tsuchi-${j}`" :href="n.url" @click="delNotify(n.id)">{{ n.text }}</b-dropdown-item>
+        </span>
+        <span v-else>
+          <b-dropdown-item>通知がありません</b-dropdown-item>
+        </span>
+      </b-nav-item-dropdown>
+      <b-nav-item-dropdown right>
+        <template slot="button-content">
+          <img :src="'https://srv.076.ne.jp/' + userAvatar" height="25px" /> <span :style="userColour">{{ userName }}</span>
+        </template>
+        <b-dropdown-item :href="'https://user.076.ne.jp/#/member'">ユーザーリスト</b-dropdown-item>
+        <b-dropdown-item :href="'https://user.076.ne.jp/#/profile/' + whoami">プロファイル</b-dropdown-item>
+        <b-dropdown-item @click="logout">サインアウト</b-dropdown-item>
+      </b-nav-item-dropdown>
+    </b-navbar-nav>
+  </b-navbar>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import Cookie from 'js-cookie';
+  import { Navbar } from 'bootstrap-vue/es/components';
+  import auth from '../auth';
+  import NewPage from './newpage';
+
+  Vue.use(Navbar);
+
+  export default {
+    components: { NewPage },
+    data: function () {
+      return {
+        whoami: 0,
+        groupCol: [],
+        showName: '',
+        showCol: '',
+        userName: '',
+        userColour: '',
+        userAvatar: '',
+        menuItem: [],
+        notification: [],
+        canAddPage: 0
+      }
+    },
+    created: function () {
+      const tok = Cookie.get('kero_token');
+
+      if (tok) {
+        axios.post('/api/auth/getpermissions', {
+          kero_token: tok
+        }).then(res => {
+          res.data.forEach(cb => {
+            this.canAddPage = cb.blg_addpage;
+          });
+        });
+
+        axios.post('/api/auth/checkauth', {
+          kero_token: tok
+        }).then(res => {
+          this.whoami = res.data.id;
+          axios.get('/api/rpc/user/user/getgroupcolours').then(res => {
+            res.data.forEach(cb => {
+              this.groupCol.push({
+                'id': cb.id,
+                'name': cb.name,
+                'male': cb.colour_m,
+                'female': cb.colour_f,
+                'unknown': cb.colour_u
+              });
+            });
+          }).then(() => {
+            axios.get('/api/rpc/user/user/getuser/' + res.data.id, { params: { kero_token: tok } }).then(des => {
+              des.data.forEach(cb => {
+                if (cb.display_name !== '') this.showName = cb.display_name;
+                else this.showName = cb.username;
+
+                if (cb.name_style !== '') this.showCol = cb.name_style;
+                else {
+                  this.groupCol.forEach(re => {
+                    if (re.id === cb.perm_id) {
+                      if (cb.gender === 1) this.showCol = re.male;
+                      else if (cb.gender === 2) this.showCol = re.female;
+                      else this.showCol = re.unknown;
+                    }
+                  });
+                }
+                this.userName = this.showName;
+                this.userAvatar = (cb.avatar !== '' ? cb.avatar : 'assets/avatars/haznoavaz.png');
+                this.userColour = this.showCol;
+              });
+            });
+          });
+        });
+      }
+      axios.get('/api/rpc/site/page/get/menu', {
+        params: {
+          kero_token: Cookie.get('kero_token')
+        }
+      }).then(des => {
+        des.data.forEach(cb => {
+          this.menuItem.push({
+            title: cb.title,
+            slug: cb.slug,
+            int: true
+          });
+        });
+      }).then(() => {
+        this.menuItem.push({
+          title: 'サポート掲示板',
+          slug: 'https://board.076.ne.jp',
+          int: false
+        });
+      });
+      axios.get('/api/rpc/user/notification/get', {
+        params: {
+          kero_token: Cookie.get('kero_token')
+        }
+      }).then(nes => {
+        nes.data.forEach(cb => {
+          this.notification.push(cb);
+        });
+      });
+    },
+    methods: {
+      delNotify: function (id) {
+        axios.post('/api/rpc/user/notification/del', {
+          kero_token: Cookie.get('kero_token'),
+          id: id
+        });
+      },
+      logout: function () {
+        auth.logout();
+      }
+    }
+  }
+</script>
+
diff --git a/routes/view/site.php b/routes/view/site.php
new file mode 100644
index 0000000..5d81985
--- /dev/null
+++ b/routes/view/site.php
@@ -0,0 +1,5 @@
+<?php
+
+//Route::get('/sa', function () { return view('pages/site/index'); });
+// Route::get('/sa', 'HomeController@getMenu');
+Route::get('/sa', 'HomeController@index');
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 0c9b520..095565e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -22,6 +22,7 @@ require(__DIR__.'/api/store.php');
 require(__DIR__.'/api/user.php');
 
 require(__DIR__.'/view/bash.php');
+require(__DIR__.'/view/site.php');
 
 // Auth
 Route::post('/api/auth/checkself', 'AuthController@checkSelf');
@@ -39,4 +40,4 @@ Route::get('/api/rpc/permission/getpermissionsfrommodule', 'PermissionController
 Route::get('/api/rpc/permission/getpermissionfrommodule/{id}', 'PermissionController@getPermissionFromModule');
 Route::get('/api/rpc/permission/getpermissions/{mdl}', 'PermissionController@getPermissions');
 Route::get('/api/rpc/permission/getpermissiongroup/{mdl}/{id}', 'PermissionController@getPermissionGroup');
-Route::get('/api/rpc/permission/getpermissionuser/{mdl}/{id}', 'PermissionController@getPermissionUser');
\ No newline at end of file
+Route::get('/api/rpc/permission/getpermissionuser/{mdl}/{id}', 'PermissionController@getPermissionUser');