diff --git a/src/components/About.js b/src/components/About.js
index 7fa5cbe..e7ad483 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import './css/About.css';
-import Theater from './Theater';
-import Card from './Card';
+import Theater from './subcomponents/Theater';
+import Card from './subcomponents/Card';
 
 
 class About extends React.Component {
diff --git a/src/components/App.js b/src/components/App.js
index d30ba16..0cf7257 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,6 +4,7 @@ import Navigation from './Navigation';
 import Home from './Home';
 import Github from './Github';
 import About from './About';
+import Social from './Social';
 
 const App = (props) => {
   return (
@@ -14,6 +15,7 @@ const App = (props) => {
           <Route path="/" exact component={Home} />
           <Route path="/github" component={Github} />
           <Route path="/about" component={About} />
+          <Route path="/social" component={Social} />
         </Switch>
       </div>
     </BrowserRouter>
diff --git a/src/components/Github.js b/src/components/Github.js
index da56dce..4ee66f6 100644
--- a/src/components/Github.js
+++ b/src/components/Github.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import './css/Github.css';
 import {getRepos, getRepoLanguages} from '../actions';
-import Theater from './Theater';
+import Theater from './subcomponents/Theater';
 import _ from 'lodash';
 class Github extends React.Component {
 
diff --git a/src/components/Home.js b/src/components/Home.js
index a418290..f35d515 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Theater from './Theater';
+import Theater from './subcomponents/Theater';
 import './css/Home.css';
 
 const Home = (props) => {
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 87ffea1..671ee72 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import {toggleContactModal} from '../actions'
 import './css/Navigation.css';
 import { HouseDoor, FileEarmarkPerson, Github, Envelope, Share } from 'react-bootstrap-icons';
-import ContactModal from './ContactModal';
+import ContactModal from './subcomponents/ContactModal';
 
 const Navigation = (props) => {
 
diff --git a/src/components/Card.js b/src/components/subcomponents/Card.js
similarity index 90%
rename from src/components/Card.js
rename to src/components/subcomponents/Card.js
index 29ccb96..7fbfff1 100644
--- a/src/components/Card.js
+++ b/src/components/subcomponents/Card.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import './css/Card.css';
+import '../css/Card.css';
 
 const Card = (props) => {
     return (
diff --git a/src/components/ContactModal.js b/src/components/subcomponents/ContactModal.js
similarity index 90%
rename from src/components/ContactModal.js
rename to src/components/subcomponents/ContactModal.js
index 8e2fa95..77fccbc 100644
--- a/src/components/ContactModal.js
+++ b/src/components/subcomponents/ContactModal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Modal from './Modal';
-import {toggleContactModal, updateEmailBody} from '../actions'
+import {toggleContactModal, updateEmailBody} from '../../actions'
 
 const ContactModal = props => {
     const onSubmit = (e) => {
diff --git a/src/components/Modal.js b/src/components/subcomponents/Modal.js
similarity index 95%
rename from src/components/Modal.js
rename to src/components/subcomponents/Modal.js
index 82e14db..cd731b0 100644
--- a/src/components/Modal.js
+++ b/src/components/subcomponents/Modal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './css/Modal.css';
+import '../css/Modal.css';
 
 const Modal = props => {
   return ReactDOM.createPortal(
diff --git a/src/components/Theater.js b/src/components/subcomponents/Theater.js
similarity index 90%
rename from src/components/Theater.js
rename to src/components/subcomponents/Theater.js
index a4e16fe..c8a1008 100644
--- a/src/components/Theater.js
+++ b/src/components/subcomponents/Theater.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import './css/Theater.css';
+import '../css/Theater.css';
 
 const Theater = (props) => {