diff --git a/src/api/endpoints/othello/sessions/create.ts b/src/api/endpoints/othello/sessions/create.ts
new file mode 100644
index 0000000000..09c3cff62b
--- /dev/null
+++ b/src/api/endpoints/othello/sessions/create.ts
@@ -0,0 +1,18 @@
+import rndstr from 'rndstr';
+import Session, { pack } from '../../../models/othello-session';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// 以前のセッションはすべて削除しておく
+	await Session.remove({
+		user_id: user._id
+	});
+
+	// セッションを作成
+	const session = await Session.insert({
+		user_id: user._id,
+		code: rndstr('a-z0-9', 3)
+	});
+
+	// Reponse
+	res(await pack(session));
+});
diff --git a/src/api/endpoints/othello/sessions/in.ts b/src/api/endpoints/othello/sessions/in.ts
new file mode 100644
index 0000000000..d4b95bc4f9
--- /dev/null
+++ b/src/api/endpoints/othello/sessions/in.ts
@@ -0,0 +1,34 @@
+import $ from 'cafy';
+import Session from '../../../models/othello-session';
+import Game, { pack } from '../../../models/othello-game';
+
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'code' parameter
+	const [code, codeErr] = $(params.code).string().$;
+	if (codeErr) return rej('invalid code param');
+
+	// Fetch session
+	const session = await Session.findOne({ code });
+
+	if (session == null) {
+		return rej('session not found');
+	}
+
+	// Destroy session
+	Session.remove({
+		_id: session._id
+	});
+
+	const parentIsBlack = Math.random() > 0.5;
+
+	// Start game
+	const game = await Game.insert({
+		created_at: new Date(),
+		black_user_id: parentIsBlack ? session.user_id : user._id,
+		white_user_id: parentIsBlack ? user._id : session.user_id,
+		logs: []
+	});
+
+	// Reponse
+	res(await pack(game));
+});
diff --git a/src/api/models/othello-game.ts b/src/api/models/othello-game.ts
new file mode 100644
index 0000000000..a6beaaf9c7
--- /dev/null
+++ b/src/api/models/othello-game.ts
@@ -0,0 +1,33 @@
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import db from '../../db/mongodb';
+
+const Game = db.get<IGame>('othello_games');
+export default Game;
+
+export interface IGame {
+	_id: mongo.ObjectID;
+	created_at: Date;
+	black_user_id: mongo.ObjectID;
+	white_user_id: mongo.ObjectID;
+	logs: any[];
+}
+
+/**
+ * Pack an othello game for API response
+ *
+ * @param {any} game
+ * @return {Promise<any>}
+ */
+export const pack = (
+	game: any
+) => new Promise<any>(async (resolve, reject) => {
+
+	const _game = deepcopy(game);
+
+	// Rename _id to id
+	_game.id = _game._id;
+	delete _game._id;
+
+	resolve(_game);
+});
diff --git a/src/api/models/othello-session.ts b/src/api/models/othello-session.ts
new file mode 100644
index 0000000000..0aa1d01e54
--- /dev/null
+++ b/src/api/models/othello-session.ts
@@ -0,0 +1,29 @@
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import db from '../../db/mongodb';
+
+const Session = db.get<ISession>('othello_sessions');
+export default Session;
+
+export interface ISession {
+	_id: mongo.ObjectID;
+	code: string;
+	user_id: mongo.ObjectID;
+}
+
+/**
+ * Pack an othello session for API response
+ *
+ * @param {any} session
+ * @return {Promise<any>}
+ */
+export const pack = (
+	session: any
+) => new Promise<any>(async (resolve, reject) => {
+
+	const _session = deepcopy(session);
+
+	delete _session._id;
+
+	resolve(_session);
+});
diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index 5274920228..98fc2352f2 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -21,6 +21,7 @@ import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import Switch from './switch.vue';
+import Othello from './othello.vue';
 
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
@@ -43,3 +44,4 @@ Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-switch', Switch);
+Vue.component('mk-othello', Othello);
diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue
new file mode 100644
index 0000000000..136046db24
--- /dev/null
+++ b/src/web/app/common/views/components/othello.vue
@@ -0,0 +1,32 @@
+<template>
+<div>
+	<div v-if="session">
+		<h1>相手を待っています<mk-ellipsis/></h1>
+		<p>セッションID:<code>{{ session.code }}</code></p>
+		<p>対戦したい相手に上記のセッションIDを伝えてください。相手が「セッションイン」でセッションIDを入力すると、対局が開始されます。</p>
+	</div>
+	<div v-else>
+		<h1>Misskey Othello</h1>
+		<p>他のMisskeyユーザーとオセロで対戦しよう。</p>
+		<button>フリーマッチ(準備中)</button>
+		<button @click="inSession">セッションイン</button>
+		<button @click="createSession">セッションを作成する</button>
+		<section>
+			<h2>過去の対局</h2>
+		</section>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	methods: {
+		createSession() {
+			(this as any).api('othello/sessions/create');
+
+		}
+	}
+});
+</script>
+