diff --git a/client/src/components/NewUserWelcome/NewUserWelcome.vue b/client/src/components/NewUserWelcome/NewUserWelcome.vue
index f912f156550..4ab3df3e7cd 100644
--- a/client/src/components/NewUserWelcome/NewUserWelcome.vue
+++ b/client/src/components/NewUserWelcome/NewUserWelcome.vue
@@ -87,18 +87,6 @@ export default {
 
 <style scoped type="scss">
 .new-user-welcome::v-deep {
-    .card {
-        border: 0px;
-    }
-    .card-img {
-        height: 12rem;
-    }
-    .card-header,
-    .card-footer {
-        border-bottom: 0px;
-        border-top: 0px;
-        background-color: #ffffff;
-    }
     .carousel-fig {
         padding-bottom: 10;
     }
diff --git a/client/src/components/NewUserWelcome/components/Subtopics.vue b/client/src/components/NewUserWelcome/components/Subtopics.vue
index d5a0e5e1e48..b546fc6212e 100644
--- a/client/src/components/NewUserWelcome/components/Subtopics.vue
+++ b/client/src/components/NewUserWelcome/components/Subtopics.vue
@@ -1,35 +1,29 @@
 <template>
     <div>
-        <b-card class="text-center">
-            <b-card-header>
-                <h1>{{ title | localize }}</h1>
-                <h4>
-                    {{ intro | localize }}
-                </h4>
-            </b-card-header>
-            <b-row class="justify-content-md-center">
-                <b-card-group style="d-flex flex-column" v-for="(subject, idx) in topics" :key="idx">
-                    <b-card class="text-center" body-class="d-flex flex-column" style="width: 15rem">
-                        <b-card-header style="height: 6rem; text-align: center; align-v: bottom">
-                            <h4>
-                                {{ subject.title | localize }}
-                            </h4>
-                        </b-card-header>
-                        <b-card-img
-                            class="section-header"
-                            height="200vh"
-                            :src="imgUrl(subject.image)"
-                            :alt="subject.alt"
-                        ></b-card-img>
-                        <b-card-text>{{ subject.intro | localize }}</b-card-text>
-                        <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">Learn more</b-button>
-                    </b-card>
-                </b-card-group>
-            </b-row>
-            <b-card-footer>
-                <b-button class="mt-auto" variant="primary" @click="$emit('back')">Return</b-button>
-            </b-card-footer>
-        </b-card>
+        <header class="main-header">
+            <h1 class="text-center my-3">{{ title | localize }}</h1>
+            <h4 class="text-center my-3">{{ intro | localize }}</h4>
+        </header>
+        <b-row class="justify-content-md-center mb-3">
+            <b-card-group v-for="(subject, idx) in topics" :key="idx">
+                <b-card class="text-center m-2 border-0" body-class="d-flex flex-column">
+                    <b-card-img
+                        class="section-header mb-3"
+                        height="50h"
+                        :src="imgUrl(subject.image)"
+                        :alt="subject.alt"
+                    ></b-card-img>
+                    <b-card-text class="font-weight-light">{{ subject.intro | localize }}</b-card-text>
+                    <b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
+                        subject.title | localize
+                    }}</b-button>
+                </b-card>
+            </b-card-group>
+        </b-row>
+        <b-button class="mt-auto" variant="primary" role="link" @click="$emit('back')">
+            <span class="fa fa-caret-left mr-1" />
+            <span>Return</span>
+        </b-button>
     </div>
 </template>
 <script>
@@ -52,3 +46,8 @@ export default {
     },
 };
 </script>
+<style scoped>
+.card {
+    width: 15rem;
+}
+</style>
diff --git a/client/src/components/NewUserWelcome/components/Topics.vue b/client/src/components/NewUserWelcome/components/Topics.vue
index d5e93a21194..21e69aa8029 100644
--- a/client/src/components/NewUserWelcome/components/Topics.vue
+++ b/client/src/components/NewUserWelcome/components/Topics.vue
@@ -1,48 +1,51 @@
 <template>
     <div>
-        <header class="main-header text-center">
-            <h1>{{ "Welcome to Galaxy" | localize }}</h1>
-            <span>
-                {{
-                    "Galaxy is web-based platform for reproducible computational analysis. Research in Galaxy \
-                is supported by 3 pillars: data, tools, and workflows. For an introduction to each, visit the \
-                below pages, or begin your analysis by selting a tool from the toolbar to the left."
-                        | localize
-                }}
-            </span>
+        <header class="main-header">
+            <h1 class="text-center my-3">{{ title | localize }}</h1>
+            <h4 class="text-center my-3">{{ intro | localize }}</h4>
         </header>
-        <b-card class="text-center">
-            <b-card-header>
-                <h1>{{ "Get to Know Galaxy" | localize }}</h1>
-            </b-card-header>
-            <b-row class="justify-content-md-center">
-                <b-card-group v-for="(subject, idx) in topics" :key="idx">
-                    <b-card class="text-center" body-class="d-flex flex-column" style="width: 18rem">
-                        <b-card-header class="text-center">
-                            <h3>
-                                {{ subject.title | localize }}
-                            </h3>
-                        </b-card-header>
-                        <b-card-img
-                            class="section-header"
-                            height="200vh"
-                            :src="imgUrl(subject.image)"
-                            :alt="subject.alt"
-                        ></b-card-img>
-                        <b-card-text>{{ subject.blurb | localize }}</b-card-text>
-                        <b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">Learn more</b-button>
-                    </b-card>
-                </b-card-group>
-            </b-row>
-        </b-card>
+        <b-row class="justify-content-md-center mb-3">
+            <b-card-group v-for="(subject, idx) in topics" :key="idx">
+                <b-card class="text-center m-2 border-0" body-class="d-flex flex-column">
+                    <b-card-img
+                        class="section-header mb-3"
+                        height="50h"
+                        :src="imgUrl(subject.image)"
+                        :alt="subject.alt"
+                    ></b-card-img>
+                    <b-card-text class="font-weight-light">{{ subject.blurb | localize }}</b-card-text>
+                    <b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
+                        subject.title | localize
+                    }}</b-button>
+                </b-card>
+            </b-card-group>
+        </b-row>
     </div>
 </template>
 <script>
 import { getAppRoot } from "onload/loadConfig";
 export default {
     props: {
-        topics: { type: Array, required: true },
-        imageLoc: { type: String, required: false, default: "plugins/welcome_page/new_user/dist/static/topics/" },
+        topics: {
+            type: Array,
+            required: true,
+        },
+        imageLoc: {
+            type: String,
+            required: false,
+            default: "plugins/welcome_page/new_user/dist/static/topics/",
+        },
+        title: {
+            type: String,
+            default: "Welcome to Galaxy",
+        },
+        intro: {
+            type: String,
+            default:
+                "Galaxy is web-based platform for reproducible computational analysis. Research in Galaxy \
+                is supported by 3 pillars: data, tools, and workflows. For an introduction to each, visit the \
+                below pages, or begin your analysis by selting a tool from the toolbar to the left.",
+        },
     },
     methods: {
         imgUrl(src) {
@@ -53,3 +56,8 @@ export default {
     },
 };
 </script>
+<style scoped>
+.card {
+    width: 15rem;
+}
+</style>