diff --git a/templates/article/index.html b/templates/article/index.html
index 3d66c0a2..56469b41 100644
--- a/templates/article/index.html
+++ b/templates/article/index.html
@@ -41,7 +41,7 @@
     }
     </style>
   </head>
-  <body>
+  <body style="mdl-color--grey-100">
     <div class="mdl-layout mdl-js-layout">
       <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
         <span class="mdl-layout-title">Material Design Lite</span>
@@ -58,12 +58,9 @@
       </header>
       <div class="ribbon mdl-color--primary"></div>
       <main class="mdl-layout__content">
-        <header>
-          <h1>Simple Layout</h1>
-          <h2>for simple content</h2>
-        </header>
-        <div class="container">
-          <div class="mdl-color--white mdl-shadow--z1 content mdl-color-text--grey-800">
+        <div class="container mdl-grid">
+          <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
+          <div class="content mdl-color--white mdl-shadow--2dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
             <h3>How to install MDL</h3>
               <p>
                 Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
@@ -82,20 +79,6 @@
                 Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.
               </p>
           </div>
-          <ul class="sidenav">
-            <li class="active">
-              How to install MDL
-            </li>
-            <li>
-              Basic MDL usage
-            </li>
-            <li>
-              Advanced MDL usage
-            </li>
-            <li>
-              Contributing
-            </li>
-          </ul>
         </div>
         <footer class="mdl-mini-footer">
           <div class="mdl-mini-footer--left-section">
diff --git a/templates/article/styles.css b/templates/article/styles.css
index 09e19e32..c5cfbc16 100644
--- a/templates/article/styles.css
+++ b/templates/article/styles.css
@@ -16,59 +16,11 @@ body {
   position: static;
 }
 
-main {
-  margin-top: -40vh;
-}
-main > header {
-  padding: 48px;
-}
-main > header > h2 {
-  font-weight: 300;
-}
-
-.container {
-  display: flex;
-  flex-direction: row;
-  max-width: 1280px;
-  margin: 0 auto;
-  margin-bottom: 48px;
+main.mdl-layout__content.mdl-layout__content {
+  margin-top: -35vh;
 }
 
 .content {
-  padding: 48px;
-  width: 768px;
-  margin-right: 48px
-}
-.content > h3 {
-  margin-bottom: 24px;
-}
-
-.sidenav {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-}
-.sidenav li {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  list-style-type: none;
-  font-size: 1em;
-  border-left: 2px solid transparent;
-  padding: 8px;
-  color: rgba(255, 255, 255, 0.7);
-  transition: border-left 0.4s ease-in-out;
-}
-.sidenav li:hover {
-  border-left-color: rgba(255, 255, 255, 0.7);
-}
-
-.sidenav li.active {
-  border-left: 3px solid white;
-  color: rgba(255, 255, 255, 1);
-}
+  border-radius: 2px;
+  padding: 24px;
+}
\ No newline at end of file
