diff --git a/src/diary/entries/201130 b/src/diary/entries/201130
index 3b527a6..e116ac9 100644
--- a/src/diary/entries/201130
+++ b/src/diary/entries/201130
@@ -1,4 +1,4 @@
-<!--200831,200931-->
+<!--2001031,201231-->
 <h1>november 2020: dear diary </h1>
 november 30, 2020<br>
 #blogging #bottle #skills #webdev<br>
diff --git a/src/static/css/box.css b/src/static/css/box.css
index ccdd3eb..d8acb61 100755
--- a/src/static/css/box.css
+++ b/src/static/css/box.css
@@ -24,7 +24,105 @@ mark {
 }
 ul { list-style-position: inside; }
 
+.grid {
+    display: grid;
+    grid-template-columns: auto 800px auto;
+    grid-template-rows: 25px 90px auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+} 
+
 body {
     background-color: #e5c5d1;
     color: #900C3F;
 }
+
+.whitespace { grid-area: 1 / 1 / 2 / 4; }
+.blessfrey-logo { grid-area: 1 / 2 / 2 / 3; }
+.body-row { grid-area: 3 / 1 / 4 / 4; }
+.content { grid-area: 3 / 2 / 4 / 3; } 
+
+.nav-row { grid-area: 2 / 1 / 3 / 4; }
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 3;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 17px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-link {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%)
+}
+.nav-link a {
+    font-size: 18px;
+}
+
+.nav-link a:link {
+    color: #66C7F4;
+}
+.nav-link a:visited {
+    color: #CB9CF2;
+}
+.nav-link a:hover {
+    color: #F9B3D7;
+}
+.nav-link a:active {
+    color: #f463ad;
+}
+
+.footer-content {
+    padding-top: 5px;
+    text-align: right;
+    overflow: hidden; 
+}
diff --git a/src/views/box.tpl b/src/views/box.tpl
index 9a95d50..f2c8aff 100644
--- a/src/views/box.tpl
+++ b/src/views/box.tpl
@@ -1,5 +1,6 @@
 % rebase('frame.tpl')
 <!--Content-->
+<div class="content">
 <br><br>
     How did you find this page?<br>
     It's my secret page.<br>
@@ -150,4 +151,5 @@
         </tr>
     </table>
 <br>
+</div>
     <div class="footer-row"> </div>