diff --git a/assets/main.css b/assets/main.css
index 515b4e9..9b128ec 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,3 +1,10 @@
 body {
     background-color: yellow;
+    margin: 0;
+    height: 100vh;
+}
+
+h1 {
+    margin: auto;
+    width: max-content;
 }
\ No newline at end of file
diff --git a/components/index/calendar/frame.vue b/components/index/calendar/frame.vue
deleted file mode 100644
index 16b5be7..0000000
--- a/components/index/calendar/frame.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<style scoped>
-
-.fullframe, .month, .header {
-    border: solid; border-width: 1px;
-}
-
-.fullframe {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    /* grid-auto-columns: 1fr; */
-    grid-template-rows: repeat(5, 1fr);
-    min-width: 1.2rem;
-    gap: .6rem;
-}
-
-.month {
-    height: fit-content;
-}
-
-.header {
-    grid-column: 1 / 7;
-    grid-row: 1 / 2;
-}
-
-.days {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-}
-
-.leapweek {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-}
-
-.m1 {
-
-}
-
-.h1{
-
-}
-
-.m2 {
-
-}
-
-.h2{
-
-}
-
-
-.m3 {
-
-}
-
-.h3{
-
-}
-
-.m4 {
-
-}
-
-.h4{
-
-}
-
-.m5 {
-
-}
-
-.h5{
-
-}
-
-.m6 {
-
-}
-
-.h6{
-
-}
-
-.m7 {
-
-}
-
-.h7{
-
-}
-
-.m8 {
-
-}
-
-.h8{
-
-}
-
-.m9 {
-
-}
-
-.h9{
-
-}
-
-.m10 {
-
-}
-
-.h10{
-
-}
-
-.m11 {
-
-}
-
-.h11{
-
-}
-
-.m12 {
-
-}
-
-.h12{
-
-}
-
-.m13 {
-    grid-column: 3;
-
-}
-
-.intercalaryheader {
-    grid-column: 2;
-
-
-}
-
-.intercalarytext {
-    margin-left: auto;
-    width: 0;
-    min-width: fit-content;
-}
-
-</style>
-
-<template>
-
-
-        <div class="fullframe">
-            <div class="month m1">
-                <div class="header h1">
-                    First
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m2">
-                <div class="header h2">
-                    Second
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m3"> 
-                <div class="header h3">
-                    Third
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m4">
-                <div class="header h4">
-                    Fourth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m5">
-                <div class="header h5">
-                    Fifth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m6">
-                <div class="header h6">
-                    Sixth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m7">
-                <div class="header h7">
-                    Seventh
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m8">
-                <div class="header h8">
-                    Eighth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m9">
-                <div class="header h9">
-                    Ninth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m10">
-                <div class="header h10">
-                    Tenth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m11">
-                <div class="header h11">
-                    Eleventh
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="month m12">
-                <div class="header h12">
-                    Twelfth
-                </div>
-                <div class="days">
-                    yah
-                </div>
-            </div>
-            <div class="intercalaryheader">
-                <div class="intercalarytext">Intercalary Week</div>
-            </div>
-            <div class="month m13">
-                <div class="leapweek">
-                    yuh
-                </div>
-            </div>
-        </div>
-
-</template>
\ No newline at end of file
diff --git a/components/index/calblock.vue b/components/main/calblock.vue
similarity index 68%
rename from components/index/calblock.vue
rename to components/main/calblock.vue
index 1a350aa..92275b4 100644
--- a/components/index/calblock.vue
+++ b/components/main/calblock.vue
@@ -2,10 +2,7 @@
 
     .indexcalendar {
         display: flex; justify-content: space-between;
-    }
-
-    .calendarpart {
-        flex-grow: 1;
+        
     }
 
     @media (max-width: 720px) {
@@ -13,9 +10,6 @@
             flex-direction: column;
         }
         
-        .calendarpart {
-            width: 100%;
-        }
     }
 
 </style>
@@ -24,10 +18,10 @@
 <template>
     <div class="indexcalendar">
         <div class="calendarpart">
-            <IndexCalendarToday />
+            <MainCalendarToday />
         </div>
         <div class="calendarpart">
-            <IndexCalendarFrame />
+            <MainCalendarFrame />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/main/calendar/days.vue b/components/main/calendar/days.vue
new file mode 100644
index 0000000..e471775
--- /dev/null
+++ b/components/main/calendar/days.vue
@@ -0,0 +1,34 @@
+<script setup>
+
+    const props = defineProps(['daycount'])
+
+    const weekcount = props.daycount / 6
+
+    const defaultdays = ref(Array.from(Array(props.daycount).keys()))
+
+</script>
+
+
+<style scoped>
+
+    .days {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-template-rows: repeat(v-bind('weekcount'), 1fr);
+        grid-gap: 1px;
+        background-color: black;
+        border: 1px solid black;
+    }
+
+</style>
+
+
+<template>
+
+    <div class="days">
+        <MainCalendarSingleday
+            v-for="day in defaultdays"
+        />
+    </div>
+
+</template>
\ No newline at end of file
diff --git a/components/main/calendar/frame.vue b/components/main/calendar/frame.vue
new file mode 100644
index 0000000..ded28c9
--- /dev/null
+++ b/components/main/calendar/frame.vue
@@ -0,0 +1,81 @@
+<script setup>
+
+    const defaultmonths = ref([
+        {id: 1, name: 'First'},
+        {id: 2, name: 'Second'},
+        {id: 3, name: 'Third'},
+        {id: 4, name: 'Fourth'},
+        {id: 5, name: 'Fifth'},
+        {id: 6, name: 'Sixth'},
+        {id: 7, name: 'Seventh'},
+        {id: 8, name: 'Eighth'},
+        {id: 9, name: 'Ninth'},
+        {id: 10, name: 'Tenth'},
+        {id: 11, name: 'Eleventh'},
+        {id: 12, name: 'Twelfth'}
+    ])
+
+</script>
+
+<style scoped>
+
+.fullframe, .header {
+    border: solid; border-width: 1px;
+}
+
+.fullframe {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    /* grid-auto-columns: 1fr; */
+    /* grid-template-rows: repeat(5, 1fr) 1.2rem; */
+    min-width: 1.2rem;
+    gap: .6rem;
+}
+
+.month {
+    height: fit-content;
+}
+
+.header {
+    grid-column: 1 / 7;
+    grid-row: 1 / 2;
+}
+
+.leapweek {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+}
+
+.m13 {
+    grid-column: 3;
+}
+
+.intercalaryheader {
+    grid-column: 2;
+}
+
+.intercalarytext {
+    margin-left: auto;
+    width: 0;
+    min-width: fit-content;
+}
+
+</style>
+
+<template>
+
+
+        <div class="fullframe">
+            <MainCalendarMonth
+                v-for="month in defaultmonths"
+                :monthname="month.name"
+                :daycount="30"
+                />
+            <div class="intercalaryheader">
+                <div class="intercalarytext">Intercalary Week</div>
+            </div>
+            <MainCalendarMonth 
+                :daycount="6" />
+        </div>
+
+</template>
\ No newline at end of file
diff --git a/components/main/calendar/month.vue b/components/main/calendar/month.vue
new file mode 100644
index 0000000..870cd10
--- /dev/null
+++ b/components/main/calendar/month.vue
@@ -0,0 +1,28 @@
+<script setup>
+
+    const props = defineProps(['monthname', 'daycount'])
+
+</script>
+
+<style scoped>
+
+.headertext {
+    width: fit-content;
+    margin: auto;
+}
+
+</style>
+
+<template>
+
+    <div class="month">
+        <div class="header">
+            <div class="headertext">
+                {{monthname}}
+            </div>
+        </div>
+        <MainCalendarDays
+            :daycount=daycount />
+    </div>
+
+</template>
\ No newline at end of file
diff --git a/components/main/calendar/singleday.vue b/components/main/calendar/singleday.vue
new file mode 100644
index 0000000..901b8cd
--- /dev/null
+++ b/components/main/calendar/singleday.vue
@@ -0,0 +1,14 @@
+<style>
+
+    .singleday {
+        background-color: white;
+        min-width: 1.2rem;
+    }
+
+</style>
+
+<template>
+
+    <div class="singleday">-</div>
+
+</template>
\ No newline at end of file
diff --git a/components/index/calendar/today.vue b/components/main/calendar/today.vue
similarity index 100%
rename from components/index/calendar/today.vue
rename to components/main/calendar/today.vue
diff --git a/components/index/cycleblock.vue b/components/main/cycleblock.vue
similarity index 100%
rename from components/index/cycleblock.vue
rename to components/main/cycleblock.vue
diff --git a/components/index/questionblock.vue b/components/main/questionblock.vue
similarity index 100%
rename from components/index/questionblock.vue
rename to components/main/questionblock.vue
diff --git a/components/index/titleblock.vue b/components/main/titleblock.vue
similarity index 100%
rename from components/index/titleblock.vue
rename to components/main/titleblock.vue
diff --git a/components/navfoot.vue b/components/navfoot.vue
index b428281..47455f4 100644
--- a/components/navfoot.vue
+++ b/components/navfoot.vue
@@ -1,6 +1,14 @@
 <style scoped>
 
-    ul {
+    .footer {
+        position: sticky; 
+        bottom: 0;
+        max-width: 72rem;
+        width: 100%;
+        background-color: red;
+    }
+
+    .navlist {
 
         display: flex; gap: 6rem; justify-content: center;
 
@@ -9,10 +17,12 @@
 </style>
 
 <template>
-    <ul>
-        <li><NuxtLink to="/">home</NuxtLink></li>
-        <li><NuxtLink to="/info">info</NuxtLink></li>
-        <li><NuxtLink to="/maker">maker</NuxtLink></li>
-        <li><NuxtLink to="/credits">credits</NuxtLink></li>
-    </ul>
+    <nav class="footer">
+        <ul class="navlist">
+            <li><NuxtLink to="/">home</NuxtLink></li>
+            <li><NuxtLink to="/info">info</NuxtLink></li>
+            <li><NuxtLink to="/maker">maker</NuxtLink></li>
+            <li><NuxtLink to="/credits">credits</NuxtLink></li>
+        </ul>
+    </nav>
 </template>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index cc6183c..0152049 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,27 +1,17 @@
 <style>
-    main {
-        max-width: 60rem;
-        margin: auto;
+
+    .pagewrap {
+        height: 100vh;
+        display: flex; flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
     }
 
-    h1 {
-        margin: auto;
-        width: max-content;
-    }
-
-    nav {
-        position: absolute; 
-        bottom: 0;
-        width: 60rem;
-        margin: auto;
-    }
 </style>
 
 <template>
-    <main>
+    <div class="pagewrap">
         <slot />
-    </main>    
-    <nav>
         <navfoot />
-    </nav>
+    </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index d80ace2..8e332ea 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,18 +1,19 @@
 <style scoped>
 
-    .indexblock {
-
-        display: flex; flex-direction: column; gap: 1.2rem;
-
-    }
+.mainblock {
+    max-width: 72rem;
+    width: 100%;
+    display: flex; flex-direction: column; gap: 7.2rem;
+}
 
 </style>
 
+
 <template>
-    <div class="indexblock">
-        <IndexTitleblock />
-        <IndexCalblock />
-        <IndexCycleblock />
-        <IndexQuestionblock />
-    </div>
+    <main class="mainblock">
+        <MainTitleblock />
+        <MainCalblock />
+        <MainCycleblock />
+        <MainQuestionblock />
+    </main>
 </template>
\ No newline at end of file