diff --git a/src/components/Article.js b/src/components/Article.js
index 34b67bc..82bbb56 100644
--- a/src/components/Article.js
+++ b/src/components/Article.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Theater from './subcomponents/Theater';
 import './css/Articles.css';
 
 const Article = ({article}) => {
@@ -54,8 +55,11 @@ const Article = ({article}) => {
 
     return (
         <div className="article">
-            <div className="title">{article.title}</div>
-            <div className="description">{article.desc}</div>
+            <Theater
+            title={article.title}
+            description={article.desc}
+            extraClasses="h-50v"
+            />
             <div className="content">{articleFormatter(article.contents)}</div>
         </div>
         );
diff --git a/src/components/Articles.js b/src/components/Articles.js
index 6182924..290c41d 100644
--- a/src/components/Articles.js
+++ b/src/components/Articles.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import './css/Articles.css';
-import Theater from './subcomponents/Theater';
 import Article from './Article';
 import Listing from './subcomponents/Listing';
 import { getArticles } from '../actions';
@@ -52,11 +51,6 @@ class Articles extends React.Component {
 
     return (
       <div className="Articles">
-          <Theater
-            title="Articles"
-            description="Self written articles to help share information I've learned in the past."
-            extraClasses="h-50v"
-          />
           <Route path="/articles/:id" render={({match})=>{return this.article(match)}} />
           {this.renderArticles()}
       </div>
diff --git a/src/components/css/Articles.css b/src/components/css/Articles.css
index 47a921d..4308e86 100644
--- a/src/components/css/Articles.css
+++ b/src/components/css/Articles.css
@@ -17,6 +17,7 @@
 
 .article .content {
     width: 80vw;
+    text-align:left;
 }
 
 .article .code {