diff --git a/src/app/pages/dashboard/feed/feed.component.ts b/src/app/pages/dashboard/feed/feed.component.ts
index d92fc15d..54367977 100644
--- a/src/app/pages/dashboard/feed/feed.component.ts
+++ b/src/app/pages/dashboard/feed/feed.component.ts
@@ -1,13 +1,13 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {ProfilePicturePipe, AppPicturePipe} from '../../../theme/pipes';
+import {ProfilePicturePipe, BaAppPicturePipe} from '../../../theme/pipes';
 import {FeedService} from './feed.service';
 
 @Component({
   selector: 'feed',
   encapsulation: ViewEncapsulation.None,
   providers: [FeedService],
-  pipes: [ProfilePicturePipe, AppPicturePipe],
+  pipes: [ProfilePicturePipe, BaAppPicturePipe],
   styles: [require('./feed.scss')],
   template: require('./feed.html')
 })
diff --git a/src/app/pages/dashboard/feed/feed.html b/src/app/pages/dashboard/feed/feed.html
index eb050c22..576332c5 100644
--- a/src/app/pages/dashboard/feed/feed.html
+++ b/src/app/pages/dashboard/feed/feed.html
@@ -16,7 +16,7 @@
       </div>
       <div class="preview" [ngClass]="{'hidden': !message.expanded}" *ngIf="message.preview">
         <a href="{{ message.link }}" target="_blank">
-          <img src="{{ ( message.preview | appPicture )}}">
+          <img src="{{ ( message.preview | baAppPicture )}}">
         </a>
       </div>
       <div [ngClass]="{'hidden': !message.expanded}" class="message-time">
diff --git a/src/app/pages/dashboard/popularApp/popularApp.component.ts b/src/app/pages/dashboard/popularApp/popularApp.component.ts
index a6899048..9e0b38e3 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.component.ts
+++ b/src/app/pages/dashboard/popularApp/popularApp.component.ts
@@ -1,11 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {AppPicturePipe} from '../../../theme/pipes';
+import {BaAppPicturePipe} from '../../../theme/pipes';
 
 @Component({
   selector: 'popular-app',
   encapsulation: ViewEncapsulation.None,
-  pipes: [AppPicturePipe],
+  pipes: [BaAppPicturePipe],
   styles: [require('./popularApp.scss')],
   template: require('./popularApp.html')
 })
diff --git a/src/app/pages/dashboard/popularApp/popularApp.html b/src/app/pages/dashboard/popularApp/popularApp.html
index d0957863..bb5d365a 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.html
+++ b/src/app/pages/dashboard/popularApp/popularApp.html
@@ -1,6 +1,6 @@
 <div class="popular-app-img-container">
   <div class="popular-app-img">
-    <img src="{{ ( 'app/my-app-logo.png' | appPicture ) }}"/>
+    <img src="{{ ( 'app/my-app-logo.png' | baAppPicture ) }}"/>
     <span class="logo-text">Super&nbsp;App</span>
   </div>
 </div>
diff --git a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts
index 10606257..7310912d 100644
--- a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts
+++ b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 
-import {AppPicturePipe} from '../../../../../../theme/pipes';
+import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'bordered-table',
   template: require('./borderedTable.html'),
-  pipes: [AppPicturePipe]
+  pipes: [BaAppPicturePipe]
 })
 export class BorderedTable {
 
diff --git a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.html b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.html
index 681e2c94..f155c1f9 100644
--- a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.html
+++ b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.html
@@ -11,7 +11,7 @@
     </thead>
     <tbody>
     <tr *ngFor="let item of metricsTableData">
-      <td><img src="{{ ( item.image | appPicture )}}" width="20" height="20"></td>
+      <td><img src="{{ ( item.image | baAppPicture )}}" width="20" height="20"></td>
       <td ngClass="nowrap">{{ item.browser }}</td>
       <td class="align-right">{{ item.visits }}</td>
       <td class="align-right">{{ item.purchases }}</td>
diff --git a/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts b/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts
index 0c159f18..b5f1e7f9 100644
--- a/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts
+++ b/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 
-import {AppPicturePipe} from '../../../../../../theme/pipes';
+import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'condensed-table',
   template: require('./condensedTable.html'),
-  pipes: [AppPicturePipe]
+  pipes: [BaAppPicturePipe]
 })
 export class CondensedTable {
 
diff --git a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts
index 869a9dd9..4ba47c48 100644
--- a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts
+++ b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 
-import {AppPicturePipe} from '../../../../../../theme/pipes';
+import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'hover-table',
   template: require('./hoverTable.html'),
-  pipes: [AppPicturePipe]
+  pipes: [BaAppPicturePipe]
 })
 export class HoverTable {
 
diff --git a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.html b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.html
index 27b6df5a..a61785c0 100644
--- a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.html
+++ b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.html
@@ -14,7 +14,7 @@
     </thead>
     <tbody>
     <tr *ngFor="let item of metricsTableData" class="no-top-border">
-      <td><img src="{{ ( item.image | appPicture ) }}" width="20" height="20"></td>
+      <td><img src="{{ ( item.image | baAppPicture ) }}" width="20" height="20"></td>
       <td ngClass="nowrap">{{item.browser}}</td>
       <td class="align-right">{{item.visits}}</td>
       <td class="table-arr"><i [ngClass]="{'icon-up': item.isVisitsUp, 'icon-down': !item.isVisitsUp }"></i></td>
diff --git a/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts b/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts
index 9d5ebb41..f7c39c70 100644
--- a/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts
+++ b/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 
-import {AppPicturePipe} from '../../../../../../theme/pipes';
+import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'striped-table',
   template: require('./stripedTable.html'),
-  pipes: [AppPicturePipe]
+  pipes: [BaAppPicturePipe]
 })
 export class StripedTable {
 
diff --git a/src/app/pages/ui/components/typography/typography.component.ts b/src/app/pages/ui/components/typography/typography.component.ts
index 513b6c25..6b264fb3 100644
--- a/src/app/pages/ui/components/typography/typography.component.ts
+++ b/src/app/pages/ui/components/typography/typography.component.ts
@@ -1,12 +1,12 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 
-import {AppPicturePipe} from '../../../../theme/pipes';
+import {BaAppPicturePipe} from '../../../../theme/pipes';
 import {BaCard} from '../../../../theme/components';
 
 @Component({
   selector: 'typography',
-  pipes: [AppPicturePipe],
+  pipes: [BaAppPicturePipe],
   directives: [BaCard],
   providers: [],
   styles: [],
diff --git a/src/app/pages/ui/components/typography/typography.html b/src/app/pages/ui/components/typography/typography.html
index 06618bf9..5f523d33 100644
--- a/src/app/pages/ui/components/typography/typography.html
+++ b/src/app/pages/ui/components/typography/typography.html
@@ -170,7 +170,7 @@
       <ba-card baCardClass="banner-column-panel">
         <div class="banner">
           <div class="large-banner-wrapper">
-            <img src="{{ ( 'app/typography/banner.png' | appPicture ) }}" alt=""/>
+            <img src="{{ ( 'app/typography/banner.png' | baAppPicture ) }}" alt=""/>
           </div>
           <div class="banner-text-wrapper">
             <div class="banner-text">
@@ -187,7 +187,7 @@
 
           <div class="row">
             <div class="col-sm-6">
-              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | appPicture ) }}" alt="" title=""/>
+              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | baAppPicture ) }}" alt="" title=""/>
               </div>
               <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
                 href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
@@ -198,7 +198,7 @@
                 arcu nulla.</p>
             </div>
             <div class="col-sm-6">
-              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo01.png' | appPicture ) }}" alt="" title=""/>
+              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo01.png' | baAppPicture ) }}" alt="" title=""/>
               </div>
               <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
                 fermentum
@@ -213,14 +213,14 @@
           <div class="row">
             <div class="col-sm-4">
               <h4>Column heading example</h4>
-              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo04.png' | appPicture ) }}" alt=""/></div>
+              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo04.png' | baAppPicture ) }}" alt=""/></div>
               <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
                 maecenas</p>
               <a href class="learn-more">Lean more</a>
             </div>
             <div class="col-sm-4">
               <h4>Yet another column heading example</h4>
-              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo05.png' | appPicture ) }}" alt=""/></div>
+              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo05.png' | baAppPicture ) }}" alt=""/></div>
               <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
                 in
                 velit</p>
@@ -228,7 +228,7 @@
             </div>
             <div class="col-sm-4">
               <h4>Third column heading example</h4>
-              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | appPicture ) }}" alt=""/></div>
+              <div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | baAppPicture ) }}" alt=""/></div>
               <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
               <a href class="learn-more">Lean more</a>
             </div>
diff --git a/src/app/theme/pipes/appPicture/index.ts b/src/app/theme/pipes/appPicture/index.ts
deleted file mode 100644
index 1b8cc7ba..00000000
--- a/src/app/theme/pipes/appPicture/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './appPicture.pipe.ts';
diff --git a/src/app/theme/pipes/appPicture/appPicture.pipe.ts b/src/app/theme/pipes/baAppPicture/baAppPicture.pipe.ts
similarity index 67%
rename from src/app/theme/pipes/appPicture/appPicture.pipe.ts
rename to src/app/theme/pipes/baAppPicture/baAppPicture.pipe.ts
index 1b4f2a15..3944e25e 100644
--- a/src/app/theme/pipes/appPicture/appPicture.pipe.ts
+++ b/src/app/theme/pipes/baAppPicture/baAppPicture.pipe.ts
@@ -1,8 +1,8 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import {layoutPaths} from '../../../theme';
 
-@Pipe({name: 'appPicture'})
-export class AppPicturePipe implements PipeTransform {
+@Pipe({name: 'baAppPicture'})
+export class BaAppPicturePipe implements PipeTransform {
 
   transform(input:string):string {
     return layoutPaths.images.root + input;
diff --git a/src/app/theme/pipes/baAppPicture/index.ts b/src/app/theme/pipes/baAppPicture/index.ts
new file mode 100644
index 00000000..66e34831
--- /dev/null
+++ b/src/app/theme/pipes/baAppPicture/index.ts
@@ -0,0 +1 @@
+export * from './baAppPicture.pipe.ts';
diff --git a/src/app/theme/pipes/index.ts b/src/app/theme/pipes/index.ts
index bb403535..70126d50 100644
--- a/src/app/theme/pipes/index.ts
+++ b/src/app/theme/pipes/index.ts
@@ -1,3 +1,3 @@
 export * from './profilePicture';
-export * from './appPicture';
+export * from './baAppPicture';
 export * from './kameleonPicture';