diff --git a/src/common/othello/maps.ts b/src/common/othello/maps.ts
index e6f3f409ef..e34e15bb54 100644
--- a/src/common/othello/maps.ts
+++ b/src/common/othello/maps.ts
@@ -10,12 +10,14 @@
 
 export type Map = {
 	name?: string;
+	category?: string;
 	size: number;
 	data: string;
 };
 
 export const fourfour: Map = {
 	name: '4x4',
+	category: '4x4',
 	size: 4,
 	data:
 		'----' +
@@ -26,6 +28,7 @@ export const fourfour: Map = {
 
 export const sixsix: Map = {
 	name: '6x6',
+	category: '6x6',
 	size: 6,
 	data:
 		'------' +
@@ -36,8 +39,35 @@ export const sixsix: Map = {
 		'------'
 };
 
+export const roundedSixsix: Map = {
+	name: '6x6 rounded',
+	category: '6x6',
+	size: 6,
+	data:
+		' ---- ' +
+		'------' +
+		'--wb--' +
+		'--bw--' +
+		'------' +
+		' ---- '
+};
+
+export const roundedSixsix2: Map = {
+	name: '6x6 rounded 2',
+	category: '6x6',
+	size: 6,
+	data:
+		'  --  ' +
+		' ---- ' +
+		'--wb--' +
+		'--bw--' +
+		' -----' +
+		'  --  '
+};
+
 export const eighteight: Map = {
 	name: '8x8',
+	category: '8x8',
 	size: 8,
 	data:
 		'--------' +
@@ -52,6 +82,7 @@ export const eighteight: Map = {
 
 export const roundedEighteight: Map = {
 	name: '8x8 rounded',
+	category: '8x8',
 	size: 8,
 	data:
 		' ------ ' +
@@ -66,6 +97,7 @@ export const roundedEighteight: Map = {
 
 export const roundedEighteight2: Map = {
 	name: '8x8 rounded 2',
+	category: '8x8',
 	size: 8,
 	data:
 		'  ----  ' +
@@ -78,8 +110,24 @@ export const roundedEighteight2: Map = {
 		'  ----  '
 };
 
+export const roundedEighteight3: Map = {
+	name: '8x8 rounded 3',
+	category: '8x8',
+	size: 8,
+	data:
+		'   --   ' +
+		'  ----  ' +
+		' ------ ' +
+		'---wb---' +
+		'---bw---' +
+		' ------ ' +
+		'  ----  ' +
+		'   --   '
+};
+
 export const eighteightWithNotch: Map = {
 	name: '8x8 with notch',
+	category: '8x8',
 	size: 8,
 	data:
 		'---  ---' +
@@ -94,6 +142,7 @@ export const eighteightWithNotch: Map = {
 
 export const eighteightWithSomeHoles: Map = {
 	name: '8x8 with some holes',
+	category: '8x8',
 	size: 8,
 	data:
 		'--- ----' +
@@ -106,22 +155,69 @@ export const eighteightWithSomeHoles: Map = {
 		'--------'
 };
 
-export const sixeight: Map = {
-	name: '6x8',
+export const circle: Map = {
+	name: 'Circle',
+	category: '8x8',
+	size: 8,
+	data:
+		'   --   ' +
+		' ------ ' +
+		' ------ ' +
+		'---wb---' +
+		'---bw---' +
+		' ------ ' +
+		' ------ ' +
+		'   --   '
+};
+
+export const dice: Map = {
+	name: 'Dice',
+	category: '8x8',
+	size: 8,
+	data:
+		'--------' +
+		'-  --  -' +
+		'-  --  -' +
+		'---wb---' +
+		'---bw---' +
+		'-  --  -' +
+		'-  --  -' +
+		'--------'
+};
+
+export const face: Map = {
+	name: 'Face',
+	category: '8x8',
 	size: 8,
 	data:
 		' ------ ' +
-		' ------ ' +
-		' ------ ' +
-		' --wb-- ' +
-		' --bw-- ' +
-		' ------ ' +
-		' ------ ' +
+		'--------' +
+		'-- -- --' +
+		'---wb---' +
+		'-- bw --' +
+		'---  ---' +
+		'--------' +
 		' ------ '
 };
 
+export const window: Map = {
+	name: 'Window',
+	category: '8x8',
+	size: 8,
+	data:
+		'--------' +
+		'-  --  -' +
+		'-  --  -' +
+		'---wb---' +
+		'---bw---' +
+		'-  --  -' +
+		'-  --  -' +
+		'--------'
+};
+
 export const tenthtenth: Map = {
 	name: '10x10',
+	category: '10x10',
 	size: 10,
 	data:
 		'----------' +
@@ -137,7 +233,8 @@ export const tenthtenth: Map = {
 };
 
 export const hole: Map = {
-	name: 'hole',
+	name: 'The Hole',
+	category: '10x10',
 	size: 10,
 	data:
 		'----------' +
@@ -152,8 +249,41 @@ export const hole: Map = {
 		'----------'
 };
 
+export const grid: Map = {
+	name: 'Grid',
+	category: '10x10',
+	size: 10,
+	data:
+		'----------' +
+		'- - -- - -' +
+		'----------' +
+		'- - -- - -' +
+		'----wb----' +
+		'----bw----' +
+		'- - -- - -' +
+		'----------' +
+		'- - -- - -' +
+		'----------'
+};
+
+export const sixeight: Map = {
+	name: '6x8',
+	category: 'special',
+	size: 8,
+	data:
+		' ------ ' +
+		' ------ ' +
+		' ------ ' +
+		' --wb-- ' +
+		' --bw-- ' +
+		' ------ ' +
+		' ------ ' +
+		' ------ '
+};
+
 export const spark: Map = {
-	name: 'spark',
+	name: 'Spark',
+	category: 'special',
 	size: 10,
 	data:
 		' -      - ' +
@@ -169,7 +299,8 @@ export const spark: Map = {
 };
 
 export const islands: Map = {
-	name: 'islands',
+	name: 'Islands',
+	category: 'special',
 	size: 10,
 	data:
 		'--------  ' +
@@ -184,34 +315,21 @@ export const islands: Map = {
 		'  --------'
 };
 
-export const grid: Map = {
-	name: 'grid',
-	size: 10,
-	data:
-		'----------' +
-		'- - -- - -' +
-		'----------' +
-		'- - -- - -' +
-		'----wb----' +
-		'----bw----' +
-		'- - -- - -' +
-		'----------' +
-		'- - -- - -' +
-		'----------'
-};
-
 export const iphonex: Map = {
 	name: 'iPhone X',
-	size: 10,
+	category: 'special',
+	size: 12,
 	data:
-		'  --  --  ' +
-		' -------- ' +
-		' -------- ' +
-		' -------- ' +
-		' ---wb--- ' +
-		' ---bw--- ' +
-		' -------- ' +
-		' -------- ' +
-		' -------- ' +
-		'  ------  '
+		'   --  --   ' +
+		'  --------  ' +
+		'  --------  ' +
+		'  --------  ' +
+		'  --------  ' +
+		'  ---wb---  ' +
+		'  ---bw---  ' +
+		'  --------  ' +
+		'  --------  ' +
+		'  --------  ' +
+		'  --------  ' +
+		'   ------   '
 };
diff --git a/src/web/app/common/views/components/othello.game.vue b/src/web/app/common/views/components/othello.game.vue
index f0254a0b71..b50d709d4a 100644
--- a/src/web/app/common/views/components/othello.game.vue
+++ b/src/web/app/common/views/components/othello.game.vue
@@ -12,7 +12,7 @@
 
 	<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 1fr)` }">
 		<div v-for="(stone, i) in o.board"
-			:class="{ empty: stone == null, none: o.map.data[i] == ' ', myTurn: !game.is_ended && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id ? 'black' : 'white', i) : null, prev: o.prevPos == i }"
+			:class="{ empty: stone == null, none: o.map.data[i] == ' ', isEnded: game.is_ended, myTurn: !game.is_ended && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id ? 'black' : 'white', i) : null, prev: o.prevPos == i }"
 			@click="set(i)"
 		>
 			<img v-if="stone == 'black'" :src="`${blackUser.avatar_url}?thumbnail&size=128`" alt="">
@@ -200,13 +200,13 @@ export default Vue.extend({
 				user-select none
 
 			&.empty
-				border solid 2px #f5f5f5
+				border solid 2px #eee
 
 			&.empty.can
-				background #f5f5f5
+				background #eee
 
 			&.empty.myTurn
-				border-color #eee
+				border-color #ddd
 
 				&.can
 					background #eee
@@ -222,6 +222,9 @@ export default Vue.extend({
 			&.prev
 				box-shadow 0 0 0 4px rgba($theme-color, 0.7)
 
+			&.isEnded
+				border-color #ddd
+
 			&.none
 				border-color transparent !important
 
diff --git a/src/web/app/common/views/components/othello.room.vue b/src/web/app/common/views/components/othello.room.vue
index 445a0b45d6..bcae37b227 100644
--- a/src/web/app/common/views/components/othello.room.vue
+++ b/src/web/app/common/views/components/othello.room.vue
@@ -5,7 +5,9 @@
 	<p>ゲームの設定</p>
 
 	<el-select v-model="mapName" placeholder="マップを選択" @change="onMapChange">
-		<el-option v-for="m in maps" :key="m.name" :label="m.name" :value="m.name"/>
+		<el-option-group v-for="c in mapCategories" :key="c" :label="c">
+			<el-option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name"/>
+		</el-option-group>
 	</el-select>
 
 	<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 1fr)` }">
@@ -21,18 +23,20 @@
 		<mk-switch v-model="game.settings.is_llotheo" @change="onIsLlotheoChange" text="石の少ない方が勝ち(ロセオ)"/>
 	</div>
 
-	<p class="status">
-		<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
-		<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
-		<template v-if="!isAccepted && isOpAccepted">あなたの準備が完了するのを待っています</template>
-		<template v-if="!isAccepted && !isOpAccepted">準備中<mk-ellipsis/></template>
-	</p>
+	<footer>
+		<p class="status">
+			<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
+			<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
+			<template v-if="!isAccepted && isOpAccepted">あなたの準備が完了するのを待っています</template>
+			<template v-if="!isAccepted && !isOpAccepted">準備中<mk-ellipsis/></template>
+		</p>
 
-	<div class="actions">
-		<el-button @click="exit">キャンセル</el-button>
-		<el-button type="primary" @click="accept" v-if="!isAccepted">準備完了</el-button>
-		<el-button type="primary" @click="cancel" v-if="isAccepted">準備続行</el-button>
-	</div>
+		<div class="actions">
+			<el-button @click="exit">キャンセル</el-button>
+			<el-button type="primary" @click="accept" v-if="!isAccepted">準備完了</el-button>
+			<el-button type="primary" @click="cancel" v-if="isAccepted">準備続行</el-button>
+		</div>
+	</footer>
 </div>
 </template>
 
@@ -53,6 +57,10 @@ export default Vue.extend({
 	},
 
 	computed: {
+		mapCategories(): string[] {
+			const categories = Object.entries(maps).map(x => x[1].category);
+			return categories.filter((item, pos) => categories.indexOf(item) == pos);
+		},
 		isAccepted(): boolean {
 			if (this.game.user1_id == (this as any).os.i.id && this.game.user1_accepted) return true;
 			if (this.game.user2_id == (this as any).os.i.id && this.game.user2_accepted) return true;
@@ -142,7 +150,7 @@ export default Vue.extend({
 
 		> div
 			background transparent
-			border solid 2px #eee
+			border solid 2px #ddd
 			border-radius 6px
 			overflow hidden
 
@@ -157,8 +165,15 @@ export default Vue.extend({
 
 	> .rules
 		max-width 300px
-		margin 0 auto
+		margin 0 auto 32px auto
 
-	> .actions
-		margin-bottom 16px
+	> footer
+		position sticky
+		bottom 0
+		padding 16px
+		background rgba(255, 255, 255, 0.9)
+		border-top solid 1px #c4cdd4
+
+		> .status
+			margin 0 0 16px 0
 </style>