diff --git a/src/ErrorLogger/Error.js b/src/ErrorLogger/Error.js
index 64b8380b..d89d5d1d 100644
--- a/src/ErrorLogger/Error.js
+++ b/src/ErrorLogger/Error.js
@@ -30,23 +30,23 @@ const ErrorComponent = (props) => {
   };
 
   return (
-    <SC.ErrorComponent className='errorComponent'>
+    <SC.ErrorComponent className='errorLoggerError'>
 
-      <SC.ArrowDiv {...errorArrowProps} className={specErrorVisible?'errorArrowDivExpanded':'errorArrowDivCollapsed'}/>
-      <SC.ErrorFile onClick={() => errorNav(error)} className='errorFile'>
+      <SC.ArrowDiv {...errorArrowProps} className={specErrorVisible?'errorLoggerErrorArrowExpanded':'errorLoggerErrorArrowCollapsed'}/>
+      <SC.ErrorFile onClick={() => errorNav(error)} className='errorLoggerError'>
         {ACT.typeSwitchCase(error || {})}
       </SC.ErrorFile>
 
-      <SC.ErrorType {...typeProps} className='errorType'>
+      <SC.ErrorType {...typeProps} className='errorLoggerErrorType'>
         {ACT.overalltypeSwitchCase(error).name || 'Unknown Error'}:
       </SC.ErrorType>
 
-      <SC.ErrorShortMessage {...shortMessageProps} className='errorShortMessage'>
+      <SC.ErrorShortMessage {...shortMessageProps} className='errorLoggerErrorShortMessage'>
         {ACT.truncateMessage(ACT.overalltypeSwitchCase(error).shortMessage || 'Unknown Error')}
       </SC.ErrorShortMessage>
 
       {specErrorVisible
-        && <SC.ErrorFullMessage {...fullMessageProps} className='errorFullMessage'>
+        && <SC.ErrorFullMessage {...fullMessageProps} className='errorLoggerErrorFullMessage'>
             {ACT.overalltypeSwitchCase(error).message || 'Unknown Error'}
           </SC.ErrorFullMessage>}
     </SC.ErrorComponent>
diff --git a/src/ErrorLogger/index.js b/src/ErrorLogger/index.js
index a279883f..2b41d605 100644
--- a/src/ErrorLogger/index.js
+++ b/src/ErrorLogger/index.js
@@ -50,15 +50,15 @@ const ErrorLogger = (props) => {
   return (
     <div className='ciceroUI'>
       {errorsVisible
-        && <SC.ErrorDisplay {...displayProps} className='errorDisplay'>
+        && <SC.ErrorDisplay {...displayProps} className='errorLoggerDisplay'>
             {errorComponentGenerator(errors)}
         </SC.ErrorDisplay>
     }
-      <SC.ErrorsHeader {...headerProps} className='errorHeader'>
+      <SC.ErrorsHeader {...headerProps} className='errorLoggerHeader'>
         {ACT.gtZero(errorLength)
           && <SC.ErrorSymbol {...symbolProps} />}
         {ACT.errorArrayLength(errors)} {ACT.isMultipleErrors(errors)}
-        <SC.ErrorBarArrow {...barArrowProps} className='errorBarArrow'/>
+        <SC.ErrorBarArrow {...barArrowProps} className='errorLoggerBarArrow'/>
       </SC.ErrorsHeader>
     </div>
   );
diff --git a/src/ErrorLogger/styles.js b/src/ErrorLogger/styles.js
index eb9034b1..6b070924 100644
--- a/src/ErrorLogger/styles.js
+++ b/src/ErrorLogger/styles.js
@@ -13,7 +13,7 @@ export const ErrorDisplay = styled.div`
     box-shadow: 0 -2px 20px 0 rgba(20,31,60,0.65);
 `;
 
-ErrorDisplay.displayName = 'ErrorDisplay';
+ErrorDisplay.displayName = 'errorLoggerDisplay';
 
 export const ErrorsHeader = styled.div`
     width: 100%;
@@ -63,7 +63,7 @@ export const ErrorBarArrow = styled.div`
     ? '0' : (`7px solid #7B9AD1`))};
 `;
 
-ErrorBarArrow.displayName = 'ErrorBarArrow';
+ErrorBarArrow.displayName = 'errorLoggerBarArrow';
 
 export const ErrorComponent = styled.div`
     width: 100%;
@@ -79,7 +79,7 @@ export const ErrorComponent = styled.div`
     grid-template-rows: min-content auto;
 `;
 
-ErrorComponent.displayName = 'ErrorComponent';
+ErrorComponent.displayName = 'errorLoggerError';
 
 export const ErrorFile = styled.a`
     text-decoration: underline;
@@ -121,7 +121,7 @@ export const ErrorShortMessage = styled.div`
     padding: 5px;
 `;
 
-ErrorShortMessage.displayName = 'ErrorShortMessage';
+ErrorShortMessage.displayName = 'errorLoggerErrorShortMessage';
 
 export const ErrorFullMessage = styled.div`
     grid-area: errorFull;
diff --git a/src/Navigation/ComponentSwitch.js b/src/Navigation/ComponentSwitch.js
index 31fc3cc2..e27360b0 100644
--- a/src/Navigation/ComponentSwitch.js
+++ b/src/Navigation/ComponentSwitch.js
@@ -33,10 +33,10 @@ const NavigationComponent = (props) => {
 
   return (
     <React.Fragment>
-        <SC.Navigation {...navigationProps} className={props.navState === 'NAVIGATION'?'navTitleActive':'navTitleInactive'}>
+        <SC.Navigation {...navigationProps} className={props.navState === 'NAVIGATION'?'navigationTitleActive':'navigationTitleInactive'}>
             NAVIGATION
         </SC.Navigation>
-        <SC.Files {...fileProps} className={props.navState === 'FILES'?'navTitleActive':'navTitleInactive'}>
+        <SC.Files {...fileProps} className={props.navState === 'FILES'?'navigationTitleActive':'navigationTitleInactive'}>
             FILES
         </SC.Files>
     </React.Fragment>
diff --git a/src/Navigation/generators.js b/src/Navigation/generators.js
index 121fab9e..05acf533 100644
--- a/src/Navigation/generators.js
+++ b/src/Navigation/generators.js
@@ -23,7 +23,7 @@ export const headerGenerator = (props) => {
           <SC.HeaderClause
               key={key}
               onClick={() => navigateHeader(key, type)}
-              className='navHeaderClause'
+              className='navigationHeaderClause'
           >
               {text}
           </ SC.HeaderClause>
@@ -33,7 +33,7 @@ export const headerGenerator = (props) => {
           <SC.HeaderOne
               key={key}
               onClick={() => navigateHeader(key, type)}
-              className='navHeaderH1'
+              className='navigationHeaderH1'
           >
               {text}
           </ SC.HeaderOne>
@@ -43,7 +43,7 @@ export const headerGenerator = (props) => {
           <SC.HeaderTwo
               key={key}
               onClick={() => navigateHeader(key, type)}
-              className='navHeaderH2'
+              className='navigationHeaderH2'
           >
               {text}
           </ SC.HeaderTwo>
@@ -53,7 +53,7 @@ export const headerGenerator = (props) => {
           <SC.HeaderThree
               key={key}
               onClick={() => navigateHeader(key, type)}
-              className='navHeaderH3'
+              className='navigationHeaderH3'
           >
               {text}
           </ SC.HeaderThree>
diff --git a/src/TemplateLibrary/Components/TemplateCard.js b/src/TemplateLibrary/Components/TemplateCard.js
index 52e9af36..c750b82d 100644
--- a/src/TemplateLibrary/Components/TemplateCard.js
+++ b/src/TemplateLibrary/Components/TemplateCard.js
@@ -47,11 +47,11 @@ const DescriptionContainer = styled(Card.Description)`
 const TemplateCard = props => (
     <CardContainer fluid
       key={props.template.uri}
-      className='templateCard'
+      className='templateLibraryCard'
     >
         <Card.Content>
           <TemplateLogo src={props.template.icon} />
-          <Title className='templateCardTitle'>
+          <Title className='templateLibraryCardTitle'>
             {
               props.template.displayName
                 ? props.template.displayName
@@ -59,7 +59,7 @@ const TemplateCard = props => (
             }
             <Version>v {props.template.version}</Version>
           </Title>
-          <DescriptionContainer className='templateCardDesc'>
+          <DescriptionContainer className='templateLibraryCardDescription'>
             {props.template.description}
           </DescriptionContainer>
         </Card.Content>
diff --git a/src/TemplateLibrary/index.js b/src/TemplateLibrary/index.js
index f662d947..be50bcd9 100644
--- a/src/TemplateLibrary/index.js
+++ b/src/TemplateLibrary/index.js
@@ -132,11 +132,11 @@ const TemplateLibraryComponent = (props) => {
           </HeaderImports>
         </Header>
         <Functionality>
-          <SearchInput className="icon" fluid icon="search" placeholder="Search..." onChange={onQueryChange} className='templateSearchInput' />
+          <SearchInput className="icon" fluid icon="search" placeholder="Search..." onChange={onQueryChange} className='templateLibrarySearchInput' />
           {props.addTemp
           && <NewClauseComponent addTempInput={props.addTemp} />}
         </Functionality>
-        {filtered && filtered.length ? <TemplateCards tempsHeight={libraryProps.TEMPLATES_HEIGHT} >
+        {filtered && filtered.length ? <TemplateCards className={'templateCardsDiv'} >
           {_.sortBy(filtered, ['name']).map(t => (
             <TemplateCard
               key={t.uri}