diff --git a/src/features/welcome/background/index.ts b/src/features/welcome/background/index.ts
deleted file mode 100644
index 02640a61e..000000000
--- a/src/features/welcome/background/index.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License. v. 2.0. If a copy of the MPL was not distributed with this file.
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import styled, { keyframes } from 'styled-components'
-
-interface BackgroundProps {
-  background: {
-    image: string
-    position: string
-  }
-}
-
-export const topToBottom = keyframes`
-  from {
-    transform: translateY(-100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`
-
-export const BackgroundContainer = styled<{}, 'div'>('div')`
-  box-sizing: border-box;
-  width: inherit;
-  height: inherit;
-  position: absolute;
-  animation-delay: 0s;
-  animation-name: ${topToBottom};
-  animation-duration: 3s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  overflow: hidden;
-`
-
-export const Background = styled<BackgroundProps, 'div'>('div')`
-  box-sizing: border-box;
-  background: url('${p => p.background.image}') repeat-x;
-  width: 500%;
-  height: inherit;
-  will-change: transform;
-  transform: translateX(${p => p.background.position});
-  transition: transform ease-out 3s;
-`
diff --git a/src/features/welcome/image/index.ts b/src/features/welcome/image/index.ts
deleted file mode 100644
index 179560f77..000000000
--- a/src/features/welcome/image/index.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License. v. 2.0. If a copy of the MPL was not distributed with this file.
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import styled from 'styled-components'
-
-const BaseImage = styled<{}, 'img'>('img')`
-  box-sizing: border-box;
-  display: block;
-  max-width: 100%;
-`
-
-export const BraveImage = styled(BaseImage)`
-  height: 140px;
-`
-
-export const ImportImage = styled(BaseImage)`
-  height: 190px;
-`
-
-export const SearchImage = styled(BaseImage)`
-  height: 190px;
-`
-
-export const ThemeImage = styled(BaseImage)`
-  height: 190px;
-`
-
-export const PaymentsImage = styled(BaseImage)`
-  height: 190px;
-`
-
-export const ShieldsImage = styled(BaseImage)`
-  height: 190px;
-`
diff --git a/src/features/welcome/images/index.ts b/src/features/welcome/images/index.ts
new file mode 100644
index 000000000..90388bd7a
--- /dev/null
+++ b/src/features/welcome/images/index.ts
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License. v. 2.0. If a copy of the MPL was not distributed with this file.
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled, { keyframes } from 'styled-components'
+
+import LionImage from './lion_logo.svg'
+import ImportImage from './welcome_import.svg'
+import RewardsImage from './welcome_rewards.svg'
+import SearchImage from './welcome_search.svg'
+import ShieldsImage from './welcome_shields.svg'
+import ThemeImage from './welcome_theme.svg'
+import WelcomeImage from './welcome_bg.svg'
+
+const BaseImage = styled<{}, 'img'>('img')`
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+`
+
+export const WelcomeLionImage = styled(BaseImage).attrs({ src: LionImage })`
+  height: 140px;
+`
+
+export const WelcomeImportImage = styled(BaseImage).attrs({ src: ImportImage })`
+  height: 190px;
+`
+
+export const WelcomeRewardsImage = styled(BaseImage).attrs({ src: RewardsImage })`
+  height: 190px;
+`
+
+export const WelcomeSearchImage = styled(BaseImage).attrs({ src: SearchImage })`
+  height: 190px;
+`
+
+export const WelcomeShieldsImage = styled(BaseImage).attrs({ src: ShieldsImage })`
+  height: 190px;
+`
+
+export const WelcomeThemeImage = styled(BaseImage).attrs({ src: ThemeImage })`
+  height: 190px;
+`
+
+interface BackgroundProps {
+  position: string
+}
+
+export const topToBottom = keyframes`
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`
+
+export const BackgroundContainer = styled<{}, 'div'>('div')`
+  box-sizing: border-box;
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  animation-delay: 0s;
+  animation-name: ${topToBottom};
+  animation-duration: 2000ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  overflow: hidden;
+`
+
+export const Background = styled<BackgroundProps, 'div'>('div')`
+  box-sizing: border-box;
+  background: url('${WelcomeImage}') repeat-x;
+  width: 500%;
+  height: inherit;
+  will-change: transform;
+  transform: translateX(${p => p.position});
+  transition: transform ease-in-out 1200ms;
+`
diff --git a/stories/assets/img/lion_logo.svg b/src/features/welcome/images/lion_logo.svg
similarity index 100%
rename from stories/assets/img/lion_logo.svg
rename to src/features/welcome/images/lion_logo.svg
diff --git a/stories/assets/img/welcome_bg.svg b/src/features/welcome/images/welcome_bg.svg
similarity index 100%
rename from stories/assets/img/welcome_bg.svg
rename to src/features/welcome/images/welcome_bg.svg
diff --git a/stories/assets/img/welcome_import.svg b/src/features/welcome/images/welcome_import.svg
similarity index 100%
rename from stories/assets/img/welcome_import.svg
rename to src/features/welcome/images/welcome_import.svg
diff --git a/stories/assets/img/welcome_rewards.svg b/src/features/welcome/images/welcome_rewards.svg
similarity index 100%
rename from stories/assets/img/welcome_rewards.svg
rename to src/features/welcome/images/welcome_rewards.svg
diff --git a/stories/assets/img/welcome_search.svg b/src/features/welcome/images/welcome_search.svg
similarity index 100%
rename from stories/assets/img/welcome_search.svg
rename to src/features/welcome/images/welcome_search.svg
diff --git a/stories/assets/img/welcome_shields.svg b/src/features/welcome/images/welcome_shields.svg
similarity index 100%
rename from stories/assets/img/welcome_shields.svg
rename to src/features/welcome/images/welcome_shields.svg
diff --git a/stories/assets/img/welcome_theme.svg b/src/features/welcome/images/welcome_theme.svg
similarity index 100%
rename from stories/assets/img/welcome_theme.svg
rename to src/features/welcome/images/welcome_theme.svg
diff --git a/src/features/welcome/index.ts b/src/features/welcome/index.ts
index 71334aeca..423adb9f3 100644
--- a/src/features/welcome/index.ts
+++ b/src/features/welcome/index.ts
@@ -2,16 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Background, BackgroundContainer } from './background'
 import { SkipButton, Bullet } from './button'
-import {
-  BraveImage,
-  PaymentsImage,
-  ImportImage,
-  ShieldsImage,
-  SearchImage,
-  ThemeImage
-} from './image'
 import { Title, Paragraph } from './text'
 import {
   Footer,
@@ -26,16 +17,8 @@ import {
 } from './wrapper'
 
 export {
-  Background,
-  BackgroundContainer,
   SkipButton,
   Bullet,
-  BraveImage,
-  PaymentsImage,
-  ImportImage,
-  ShieldsImage,
-  SearchImage,
-  ThemeImage,
   Title,
   Paragraph,
   Footer,
diff --git a/src/features/welcome/wrapper/index.ts b/src/features/welcome/wrapper/index.ts
index 0f8ac3abe..5ecf41ad8 100644
--- a/src/features/welcome/wrapper/index.ts
+++ b/src/features/welcome/wrapper/index.ts
@@ -68,7 +68,7 @@ export const Content = styled<ContentProps, 'section'>('section')`
   opacity: 0;
   will-change: transform;
   transform: translateX(${p => p.isPrevious ? '-' + p.screenPosition : p.screenPosition}) scale(0.8);
-  transition: opacity 1.5s, transform 1.5s ease-out;
+  transition: opacity 700ms, transform 700ms ease-in-out;
   position: absolute;
   z-index: ${p => p.zIndex};
   display: flex;
@@ -99,7 +99,7 @@ export const Panel = styled(Card)`
   /* animation stuff courtesy of ross */
   animation-delay: 1s;
   animation-name: ${fadeIn};
-  animation-duration: 2.5s;
+  animation-duration: 1200ms;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   /* end of animation stuff */
diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx
index 53d53f43c..0200e5f62 100644
--- a/stories/features/welcome/page/index.tsx
+++ b/stories/features/welcome/page/index.tsx
@@ -6,10 +6,8 @@ import * as React from 'react'
 
 // Feature-specific components
 import {
-  Background,
   Page,
   Panel,
-  BackgroundContainer,
   SlideContent
 } from '../../../../src/features/welcome/'
 
@@ -23,7 +21,7 @@ import ThemeBox from './screens/themeBox'
 import FooterBox from './screens/footerBox'
 
 // Images
-const background = require('../../../assets/img/welcome_bg.svg')
+import { Background, BackgroundContainer } from '../../../../src/features/welcome/images'
 
 // Fonts
 import '../../../assets/fonts/muli.css'
@@ -121,7 +119,7 @@ export default class WelcomePage extends React.PureComponent<{}, State> {
     return (
       <>
         <BackgroundContainer>
-          <Background background={{ image: background, position: `-${currentScreen}0%` }} />
+          <Background position={`-${currentScreen}0%`} />
         </BackgroundContainer>
         <Page>
           <Panel>
diff --git a/stories/features/welcome/page/screens/importBox.tsx b/stories/features/welcome/page/screens/importBox.tsx
index 8dd30a724..a8b48f5ad 100644
--- a/stories/features/welcome/page/screens/importBox.tsx
+++ b/stories/features/welcome/page/screens/importBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, ImportImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -14,7 +14,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const importImage = require('../../../../assets/img/welcome_import.svg')
+import { WelcomeImportImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -46,7 +46,7 @@ export default class ImportBox extends React.PureComponent<Props, State> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <ImportImage src={importImage} />
+        <WelcomeImportImage />
         <Title>{locale.importFromAnotherBrowser}</Title>
         <Paragraph>{locale.setupImport}</Paragraph>
           <Button
diff --git a/stories/features/welcome/page/screens/rewardsBox.tsx b/stories/features/welcome/page/screens/rewardsBox.tsx
index 9699bce3f..4d38b8be4 100644
--- a/stories/features/welcome/page/screens/rewardsBox.tsx
+++ b/stories/features/welcome/page/screens/rewardsBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, PaymentsImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -14,7 +14,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const paymentsImage = require('../../../../assets/img/welcome_rewards.svg')
+import { WelcomeRewardsImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -32,7 +32,7 @@ export default class PaymentsBox extends React.PureComponent<Props, {}> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <PaymentsImage src={paymentsImage} />
+        <WelcomeRewardsImage />
         <Title>{locale.enableBraveRewards}</Title>
         <Paragraph>{locale.setupBraveRewards}</Paragraph>
         <Button
diff --git a/stories/features/welcome/page/screens/searchBox.tsx b/stories/features/welcome/page/screens/searchBox.tsx
index 2f6f631b8..632b335e2 100644
--- a/stories/features/welcome/page/screens/searchBox.tsx
+++ b/stories/features/welcome/page/screens/searchBox.tsx
@@ -6,7 +6,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, SearchImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -15,7 +15,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const searchImage = require('../../../../assets/img/welcome_search.svg')
+import { WelcomeSearchImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -33,7 +33,7 @@ export default class SearchEngineBox extends React.PureComponent<Props, {}> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <SearchImage src={searchImage} />
+        <WelcomeSearchImage />
         <Title>{locale.setDefaultSearchEngine}</Title>
         <Paragraph>{locale.chooseSearchEngine}</Paragraph>
           <Button
diff --git a/stories/features/welcome/page/screens/shieldsBox.tsx b/stories/features/welcome/page/screens/shieldsBox.tsx
index 0eaeba3a2..26741f9b3 100644
--- a/stories/features/welcome/page/screens/shieldsBox.tsx
+++ b/stories/features/welcome/page/screens/shieldsBox.tsx
@@ -5,13 +5,13 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, ShieldsImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Utils
 import locale from '../fakeLocale'
 
 // Images
-const shieldsImage = require('../../../../assets/img/welcome_shields.svg')
+import { WelcomeShieldsImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -28,7 +28,7 @@ export default class ShieldsBox extends React.PureComponent<Props> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <ShieldsImage src={shieldsImage} />
+        <WelcomeShieldsImage />
         <Title>{locale.protectYourPrivacy}</Title>
         <Paragraph>{locale.adjustProtectionLevel}</Paragraph>
       </Content>
diff --git a/stories/features/welcome/page/screens/themeBox.tsx b/stories/features/welcome/page/screens/themeBox.tsx
index c079c338a..e1843cd21 100644
--- a/stories/features/welcome/page/screens/themeBox.tsx
+++ b/stories/features/welcome/page/screens/themeBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, ThemeImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -14,7 +14,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const themeImage = require('../../../../assets/img/welcome_theme.svg')
+import { WelcomeThemeImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -32,7 +32,7 @@ export default class ThemingBox extends React.PureComponent<Props, {}> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <ThemeImage src={themeImage} />
+        <WelcomeThemeImage />
         <Title>{locale.chooseYourTheme}</Title>
         <Paragraph>{locale.findToolbarTheme}</Paragraph>
           <Button
diff --git a/stories/features/welcome/page/screens/welcomeBox.tsx b/stories/features/welcome/page/screens/welcomeBox.tsx
index 89fef2d2f..562a5527e 100644
--- a/stories/features/welcome/page/screens/welcomeBox.tsx
+++ b/stories/features/welcome/page/screens/welcomeBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, BraveImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -15,7 +15,7 @@ import { ArrowRightIcon } from '../../../../../src/components/icons'
 import locale from '../fakeLocale'
 
 // Images
-const braveLogo = require('../../../../assets/img/lion_logo.svg')
+import { WelcomeLionImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -33,7 +33,7 @@ export default class ThemingBox extends React.PureComponent<Props, {}> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <BraveImage src={braveLogo} />
+        <WelcomeLionImage />
         <Title>{locale.welcome}</Title>
         <Paragraph>{locale.whatIsBrave}</Paragraph>
         <Button