diff --git a/ts/components/ReviewSiteColumnAction.vue b/ts/components/ReviewSiteColumnAction.vue
new file mode 100644
index 00000000..3c0673de
--- /dev/null
+++ b/ts/components/ReviewSiteColumnAction.vue
@@ -0,0 +1,11 @@
+<template>
+	<p>loading</p>
+</template>
+<script setup lang="ts">
+interface Emits {
+	(e: "doSelectTask", id: number): void;
+}
+interface Props {}
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {});
+</script>
diff --git a/ts/components/ReviewSiteColumnDetail.vue b/ts/components/ReviewSiteColumnDetail.vue
new file mode 100644
index 00000000..1cbc033d
--- /dev/null
+++ b/ts/components/ReviewSiteColumnDetail.vue
@@ -0,0 +1,8 @@
+<style scoped></style>
+<template></template>
+<script setup lang="ts">
+interface Emits {
+	(e: "update:modelValue", value: any): void;
+}
+interface Props {}
+</script>
diff --git a/ts/components/ReviewSiteColumnList.vue b/ts/components/ReviewSiteColumnList.vue
new file mode 100644
index 00000000..db3a3878
--- /dev/null
+++ b/ts/components/ReviewSiteColumnList.vue
@@ -0,0 +1,12 @@
+<style scoped lang="scss"></style>
+<template>
+	<p>list</p>
+</template>
+<script setup lang="ts">
+interface Emits {
+	(e: "doSelectTask", id: number): void;
+}
+interface Props {}
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {});
+</script>
diff --git a/ts/view/review/Site.vue b/ts/view/review/Site.vue
new file mode 100644
index 00000000..a325d989
--- /dev/null
+++ b/ts/view/review/Site.vue
@@ -0,0 +1,97 @@
+<style scoped>
+body {
+	background-color: #f5f5f5;
+}
+
+.left-panel {
+	background-color: white;
+	height: 100vh;
+	overflow-y: auto;
+	border-right: 1px solid #dee2e6;
+}
+
+.middle-panel {
+	background-color: white;
+	height: 100vh;
+	overflow-y: auto;
+	padding: 20px;
+}
+
+.right-panel {
+	background-color: white;
+	height: 100vh;
+	overflow-y: auto;
+	border-left: 1px solid #dee2e6;
+	padding: 20px;
+}
+.placeholder-box {
+	background-color: #e9ecef;
+	border: 2px dashed #adb5bd;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #6c757d;
+	font-size: 18px;
+	margin-bottom: 20px;
+}
+
+.map-placeholder {
+	height: 300px;
+}
+
+.image-placeholder {
+	height: 400px;
+}
+
+.action-btn {
+	width: 100%;
+	margin-bottom: 10px;
+	padding: 12px;
+	font-size: 16px;
+}
+
+.status-badge {
+	font-size: 11px;
+}
+
+.map-container {
+	margin-bottom: 20px;
+}
+</style>
+<template>
+	<ThreeColumn>
+		<template #left>
+			<ReviewSiteColumnList />
+		</template>
+		<template #center>
+			<ReviewSiteColumnDetail />
+		</template>
+		<template #right>
+			<ReviewSiteColumnAction />
+		</template>
+	</ThreeColumn>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useStoreReviewTask } from "@/store/review-task";
+import { useSessionStore } from "@/store/session";
+import maplibregl from "maplibre-gl";
+import ThreeColumn from "@/components/layout/ThreeColumn.vue";
+import ReviewSiteColumnAction from "@/components/ReviewSiteColumnAction.vue";
+import ReviewSiteColumnDetail from "@/components/ReviewSiteColumnDetail.vue";
+import ReviewSiteColumnList from "@/components/ReviewSiteColumnList.vue";
+import { formatAddress } from "@/format";
+import type { Changes } from "@/types";
+import { Bounds, Contact, Location, ReviewTask } from "@/type/api";
+import { Camera } from "@/type/map";
+import { MapClickEvent, Marker } from "@/types";
+
+// Props (you can pass these from parent component or environment)
+interface Props {}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+// Lifecycle
+onMounted(async () => {});
+</script>