diff --git a/resources/image/ui/white_rect.png b/resources/image/ui/white_rect.png
new file mode 100644
index 0000000..1449afb
Binary files /dev/null and b/resources/image/ui/white_rect.png differ
diff --git a/src/game/ranking/ranking.js b/src/game/ranking/ranking.js
index 2b8536e..ab79b3c 100644
--- a/src/game/ranking/ranking.js
+++ b/src/game/ranking/ranking.js
@@ -2,6 +2,7 @@ var Ranking = {
 
 	preload: function() {
 		game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
+		game.load.image('bg_white', '../../../resources/image/ui/white_rect.png');
 	},
 
 	create: function() {
@@ -21,11 +22,19 @@ var Ranking = {
 
 		// bg
 		this.game.stage.backgroundColor = '#4d4d4d';
+		// this.bgWhite = game.add.sprite(0, 0, "bg_white");
+		// this.bgWhite.width = GAME_SCREEN_SIZE.x;
+		// this.bgWhite.height = GAME_SCREEN_SIZE.y;
+		// this.setBgColor();
 
 		var posY = 100;
-		var bg = game.add.graphics();
-		bg.beginFill(0x545454, 1);
-		bg.drawRect(0, 60, GAME_SCREEN_SIZE.x, 80);
+		// var bg = game.add.graphics();
+		// bg.beginFill(0x545454, 0.8);
+		// bg.drawRect(0, 60, GAME_SCREEN_SIZE.x, 80);
+		this.bgWhite = game.add.sprite(0, 60, "bg_white");
+		this.bgWhite.width = GAME_SCREEN_SIZE.x;
+		this.bgWhite.height = 80;
+		this.setBgColor();
 
 
 		// keyboard shortcut
@@ -283,20 +292,29 @@ var Ranking = {
 		this.textTitle.text = sessionStorageManager.getPlayingAppKoreanName() + " - 수업시간 순위";
 		this.textTitle.addColor("#ff6666", 0);
 		this.getRecordToRankingServer();
+
+		this.setFirstPageIndex();
+		this.setBgColor();
 	},
 
 	showRankingDay: function() {
 		this.timeType = Ranking.MODE_DAY;
 		this.textTitle.text = sessionStorageManager.getPlayingAppKoreanName() + " - 오늘의 순위";
 		this.textTitle.addColor("#9999ff", 0);
+
 		this.getRecordToRankingServer();
+		this.setFirstPageIndex();
+		this.setBgColor();
 	},
 
 	showRankingMonth: function() {
 		this.timeType = Ranking.MODE_MONTH;
 		this.textTitle.text = sessionStorageManager.getPlayingAppKoreanName() + " - 이달의 순위";
 		this.textTitle.addColor("#99ff99", 0);
+
 		this.getRecordToRankingServer();
+		this.setFirstPageIndex();
+		this.setBgColor();
 	},
 
 	showRanking: function(rankingRecordManager) {
@@ -344,7 +362,7 @@ var Ranking = {
 
 		// timezone changed (ex: 2pm -> 3pm)
 		if(this.showingPageIndex * 20 > this.recordArray.length)
-			this.showingPageIndex = 0;
+			this.setFirstPageIndex();
 
 		// prepare ranking list - top10 / top20
 		for(var i = 0; i < 10; i++) {
@@ -501,6 +519,26 @@ var Ranking = {
 			this.showingPageIndex++;
 		this.printRanking();
 	},
+
+	setFirstPageIndex: function() {
+		this.showingPageIndex = 0;
+	},
+
+	setBgColor: function() {
+		switch(this.timeType) {
+			case Ranking.MODE_HOUR:
+			this.bgWhite.tint = 0x5f4d4d;
+			break;
+
+			case Ranking.MODE_DAY:
+			this.bgWhite.tint = 0x4d4d5f;
+			break;
+
+			case Ranking.MODE_MONTH:
+			this.bgWhite.tint = 0x4d5f4d;
+			break;
+		}
+	},
 }
 
 Ranking.MODE_HOUR	= "mode_hour";