diff --git a/botanjs/src/Astro/Penguin/Element/Footer.css b/botanjs/src/Astro/Penguin/Element/Footer.css
new file mode 100644
index 0000000..5405ed1
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Footer.css
@@ -0,0 +1,12 @@
+footer {
+    background-color: #001;
+    background-image: url(/assets/layout-images/lines.png);
+    background-repeat: no-repeat;
+    background-position: right bottom;
+}
+
+#fhorizon {
+	position: absolute;
+	top: -7px;
+}
+
diff --git a/botanjs/src/Astro/Penguin/Element/Footer.js b/botanjs/src/Astro/Penguin/Element/Footer.js
new file mode 100644
index 0000000..089470d
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Footer.js
@@ -0,0 +1,2 @@
+// __namespace( "Astro.Penguin.Element.Footer" );
+// __import( "Astro.Common.Element.Footer" );
diff --git a/botanjs/src/Astro/Penguin/Element/Header.css b/botanjs/src/Astro/Penguin/Element/Header.css
new file mode 100644
index 0000000..b606dd7
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Header.css
@@ -0,0 +1,60 @@
+.home {
+    position: relative;
+	width: 100%;
+	overflow: hidden;
+}
+
+header {
+	position: relative;
+}
+
+#menu {
+	font-size: 1.75em;
+	text-align: right;
+}
+
+#menu > * {
+	font-family: custom-sans;
+	cursor: pointer;
+	line-height: 1em !important;
+
+	position: relative;
+
+	color: rgba( 0, 0, 0, 0.5 );
+	-webkit-filter: blur( 2px );
+	filter: blur( 2px );
+}
+
+#menu > *[data-active] {
+	-webkit-filter: blur( 0px );
+	filter: blur( 0px );
+	color: navy;
+}
+
+#menu > *:hover {
+    color: rgba( 0, 0, 0, 0.75 );
+	-webkit-filter: blur( 0px );
+	filter: blur( 0px );
+    text-decoration: none;
+}
+
+.horizon {
+	position: relative;
+	width: 100%;
+	height: 7px;
+	background: #76400C;
+	z-index: 4;
+}
+
+.c-sep {
+    display: inline-block;
+    width: 1px;
+    margin: 0 2em;
+}
+.c-sep:after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    border-left: 1px solid black;
+    top: 0;
+}
diff --git a/botanjs/src/Astro/Penguin/Element/Header.js b/botanjs/src/Astro/Penguin/Element/Header.js
new file mode 100644
index 0000000..75baf5c
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Header.js
@@ -0,0 +1 @@
+// __namespace( "Astro.Penguin.Element.Header" );
diff --git a/botanjs/src/Astro/Penguin/Element/Layer.css b/botanjs/src/Astro/Penguin/Element/Layer.css
new file mode 100644
index 0000000..65669fa
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Layer.css
@@ -0,0 +1,2 @@
+.mbody { z-index: 1; }
+header, footer { z-index: 2; }
diff --git a/botanjs/src/Astro/Penguin/Element/Layer.js b/botanjs/src/Astro/Penguin/Element/Layer.js
new file mode 100644
index 0000000..47522ec
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Element/Layer.js
@@ -0,0 +1 @@
+// __namespace( "Astro.Penguin.Element.Layer" );
diff --git a/botanjs/src/Astro/Penguin/Layout/MainFrame.css b/botanjs/src/Astro/Penguin/Layout/MainFrame.css
new file mode 100644
index 0000000..76be4c0
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Layout/MainFrame.css
@@ -0,0 +1,105 @@
+html, body { height: 100%; }
+
+html { background-color: #222; }
+
+body {
+	background-color: #F0F0F0;
+    font-family: custom-sans,Helvetica,Arial,STHeiti,"Microsoft JhengHei","微軟正黑體";
+}
+
+pre { font-family: monospace; }
+
+::selection {
+	color: white;
+	background: navy;
+}
+::-moz-selection {
+	color: white;
+	background: navy;
+}
+
+p { padding: 0.25em 0.5em; }
+
+a {
+    color: #333;
+	text-decoration: none;
+}
+
+textarea {
+	font-family: monospace;
+}
+
+sup { vertical-align: super; }
+
+a:hover { text-decoration: underline; }
+
+.clearfix {
+    clear: both;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.begin-wrapper {
+    position: relative;
+
+    min-height: 100%;
+    background-color: #EBEAEF;
+
+	overflow: hidden;
+}
+
+.mbody {
+	position: relative;
+	width: 100%;
+}
+
+.main-column {
+	width: 85%;
+	margin: 0 auto;
+}
+
+.right { text-align: right; }
+.panel { padding: 0.5em 1.2em 1.2em 1.2em; }
+
+/* transition properties */
+div#header, div#mbody, div#contact, div#horizon {
+	
+	-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	-ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
+
+	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
+	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
+}
+
+@keyframes spin {
+    0% { transform: rotate( 0deg ); }
+    25% { transform: rotate( 90deg ); }
+    50% { transform: rotate( 180deg ); }
+    75% { transform: rotate( 270deg ); }
+    100% { transform: rotate( 360deg ); }
+}
+
+@keyframes aspin {
+    0% { transform: rotate( 0deg ); }
+    25% { transform: rotate( -90deg ); }
+    50% { transform: rotate( -180deg ); }
+    75% { transform: rotate( -270deg ); }
+    100% { transform: rotate( -360deg ); }
+}
+
+.spin {
+    animation-duration: 60s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-name: aspin;
+}
+
+.cw { animation-name: spin; }
+
+/* end transition properties */
diff --git a/botanjs/src/Astro/Penguin/Layout/MainFrame.js b/botanjs/src/Astro/Penguin/Layout/MainFrame.js
new file mode 100644
index 0000000..df35207
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Layout/MainFrame.js
@@ -0,0 +1,140 @@
+(function(){
+	var ns = __namespace( "Astro.Penguin.Layout.MainFrame" );
+
+	/** @type {System.Cycle} */
+	var Cycle                                         = __import( "System.Cycle" );
+	/** @type {System.Cycle.Trigger} */
+	var Trigger                                       = __import( "System.Cycle.Trigger" );
+	/** @type {System.utils.IKey} */
+	var IKey                                          = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                                       = __import( "System.utils.DataKey" );
+	/** @type {Dandelion} */
+	var Dand                                          = __import( "Dandelion" );
+	/** @type {Dandelion.IDOMObject} */
+	var IDOMObject                                    = __import( "Dandelion.IDOMObject" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                                   = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion.Window} */
+	var wsupp                                         = __import( "Dandelion.Window" );
+	/** @type {System.Debug} */
+	var debug                                         = __import( "System.Debug" );
+	/** @type {Astro.Bootstrap} */
+	var Bootstrap                                     = __import( "Astro.Bootstrap" );
+
+	// __import( "Dandelion.CSSReset" ); CSS_RESERVATION
+	// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
+	// __import( "Astro.Blog.SharedStyle" ); CSS_RESERVATION
+	// __import( "Astro.Blog.Element.Layer" ); CSS_RESERVATION
+
+	var main;
+	var header;
+	var main_h;
+
+	// menu and horizon
+	var horizon;
+	var	contaht_page;
+	var collapse_panel;
+	var c_expand = false;
+	var savedPath;
+
+	var init = function ()
+	{
+		// Footer at bottom
+		var padder = Dand.wrap();
+		var begin_wrapper = Dand.id( "begin-wrapper" );
+		var content_wrapper = Dand.id( "mbody" );
+		var footer = Dand.tag( "footer" );
+		var fhorizon = Dand.id( "fhorizon" );
+
+		if( footer.length )
+		{
+			footer = footer[0];
+			var fheight = footer.scrollHeight || footer.offsetHeight;
+			var hheight = fhorizon.scrollHeight || fhorizon.offsetHeight;
+
+			padder.style.height = ( fheight + hheight ) + "px";
+			begin_wrapper.style.marginBottom = "-" + fheight + "px";
+		}
+
+		content_wrapper.appendChild( padder );
+
+		IDOMObject( window ).addEventListener( "Resize", responsify );
+
+		initTopButton();
+		navControl();
+		responsify( null, true );
+	};
+
+	var topButtons = [];
+	var initTopButton = function()
+	{
+		// init params
+		header = Dand.id( "header" );
+		horizon = Dand.id( "horizon" );
+		main = Dand.id( "mbody" );
+
+		collapse_panel = Dand.id( "collapse_panel" );
+
+		horizon.style.backgroundColor
+			= fhorizon.style.backgroundColor
+			= "navy";
+
+		Dand.id( "menu", true ).foreach(
+			1, function( e )
+			{
+				e = IDOMElement( e );
+				topButtons.push( e );
+				if( e.getDAttribute( "active" ) !== null )
+				{
+					e.setAttribute( new DataKey( "master", true ) );
+				}
+			}
+		);
+	};
+
+	var navControl = function ()
+	{
+		// Page control
+		/** @type {Dandelion.IDOMElement} */
+		var page_control = Dand.id( "top_control", true );
+		var bottom_control = Dand.id( "bottom_control" );
+
+		if ( page_control && bottom_control )
+		{
+			var appendp = function( elem, self )
+			{
+				var clone = elem.cloneNode( true );
+				if( clone.className == "p_navigation" )
+				{
+					IDOMElement( clone ).reverseChild();
+				}
+				bottom_control.appendChild( clone );
+				return true;
+			};
+
+			page_control.last( document.ELEMENT_NODE, appendp );
+			page_control.first( document.ELEMENT_NODE, appendp );
+		}
+	};
+
+	/** @type {Dandelion.IDOMElement} */
+	var rspd_ratio = 0;
+	var responsify = function( e, override )
+	{
+		// Ratio changes would trigger content
+		var ratio = wsupp.clientWidth / wsupp.clientHeight;
+
+		// Swap only on ration changes from 1 < x OR x < 1
+		if( ( ratio < 1.2 && 1.2 < rspd_ratio ) || ( 1.2 < ratio && rspd_ratio < 1.2 ) || override )
+		{
+			rspd_ratio = ratio;
+			debug.Info( "Responsive Event: R = " + ratio );
+
+			BotanJS.dispatchEvent( new BotanEvent( "Responsive", { "ratio": ratio } ) );
+		}
+	};
+
+
+	Bootstrap.regInit( init );
+})();
diff --git a/botanjs/src/Astro/Penguin/Page/_this.css b/botanjs/src/Astro/Penguin/Page/_this.css
new file mode 100644
index 0000000..911669c
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Page/_this.css
@@ -0,0 +1,8 @@
+.panel {
+    padding: 0.5em 2em;
+    display: block;
+}
+
+ol {
+	padding: 0 2em;
+}
diff --git a/botanjs/src/Astro/Penguin/Page/_this.js b/botanjs/src/Astro/Penguin/Page/_this.js
new file mode 100644
index 0000000..af37177
--- /dev/null
+++ b/botanjs/src/Astro/Penguin/Page/_this.js
@@ -0,0 +1,2 @@
+// __namespace( "Astro.Penguin.Page" );
+// __import( "Astro.Penguin.Layout.MainFrame" );