diff --git a/src/components/isolate-area-1/Area.vue b/src/components/isolate-area-1/Area.vue
index 81238df..73ef634 100644
--- a/src/components/isolate-area-1/Area.vue
+++ b/src/components/isolate-area-1/Area.vue
@@ -1,17 +1,30 @@
 <template>
 	<DragabbleContainer class="isolate-area-1">
-    <SmallBox2></SmallBox2>
-  </DragabbleContainer>
+		<SmallBox2></SmallBox2>
+		<SmallBox2></SmallBox2>
+		<SmallBox2></SmallBox2>
+		<SmallBox2></SmallBox2>
+	</DragabbleContainer>
 </template>
 
 <script>
-import DragabbleContainer from '../layout/DragableContainer.vue'
-import SmallBox2 from '../common/SmallBox2.vue';
+import DragabbleContainer from "../layout/DragableContainer.vue";
+import SmallBox2 from "../common/SmallBox2.vue";
 
 export default {
 	name: "IsolateArea--1",
-  components: { DragabbleContainer, SmallBox2 }
+	components: { DragabbleContainer, SmallBox2 },
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.isolate-area-1 {
+  display: flex;
+
+  > .small-box-2:not(:last-child) {
+    margin: {
+      right: 8px;
+    }
+  }
+}
+</style>
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 607fd5b..a59d215 100644
--- a/src/components/layout/Main.vue
+++ b/src/components/layout/Main.vue
@@ -1,12 +1,15 @@
 <template>
 	<main>
     main content
+		<AreaOne />
   </main>
 </template>
 
 <script>
+import AreaOne from '../isolate-area-1/Area.vue'
 export default {
 	name: "Main",
+	components: { AreaOne },
 	props: {},
 	data() {
 		return {};