diff --git a/package.json b/package.json
index bc598e5..59d8cd6 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
   },
   "devDependencies": {
     "@quasar/app": "^2.1.6",
-    "@types/node": "^14.14.6"
+    "@types/node": "^14.14.6",
+    "vue-svg-loader": "^0.17.0-beta.2"
   },
   "engines": {
     "node": ">= 10.18.1",
diff --git a/quasar.conf.js b/quasar.conf.js
index df02ee3..65d89c1 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -83,6 +83,30 @@ module.exports = configure(function (/* ctx */) {
 
       // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
       extendWebpack (cfg) {
+        /*
+         * deletes 'svg' from old url-loader regex rule
+         * old: /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/
+         * new: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/
+         */
+        cfg.module.rules = cfg.module.rules.map(rule => {
+          const regstr = rule.test.toString()
+          if (regstr.includes('svg')) {
+            const newReg = new RegExp(regstr
+              .replace('svg', '') // delete all svg mentions
+              .replace('||', '|') // delete extra '|' operators
+              .replace('(|', '(')
+              .replace('|)', ')')
+              .slice(1, -1) // remove surrounding '/' signs
+            )
+            return { ...rule, test: newReg }
+          } else {
+            return rule
+          }
+        })
+        cfg.module.rules.push({
+          test: /\.svg$/,
+          use: ['vue-loader', 'vue-svg-loader']
+        })
       },
     },
 
diff --git a/src/assets/difficulty-icons/advanced.svg b/src/assets/difficulty-icons/advanced.svg
new file mode 100644
index 0000000..69d253d
--- /dev/null
+++ b/src/assets/difficulty-icons/advanced.svg
@@ -0,0 +1,13 @@
+<svg
+  class="icon"
+  viewBox="0 0 91 31"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect x="27.2646" y="10.5" width="35" height="10" />
+  <rect x="17.4448" y="0.5" width="7" height="30" />
+  <path d="M83.2646 10.5H90.2817V20.4526H83.2646V10.5Z" />
+  <rect x="0.264648" y="10.5" width="7" height="10" />
+  <rect x="9.26465" y="5.5" width="7" height="20" />
+  <rect x="65.2646" y="0.5" width="7" height="30" />
+  <rect x="74.2646" y="5.5" width="7" height="20" />
+</svg>
diff --git a/src/assets/difficulty-icons/basic.svg b/src/assets/difficulty-icons/basic.svg
new file mode 100644
index 0000000..23fd2d5
--- /dev/null
+++ b/src/assets/difficulty-icons/basic.svg
@@ -0,0 +1,10 @@
+<svg
+  viewBox="0 0 56 32"
+  class="icon"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect x="12" y="12" width="32" height="8" />
+  <rect x="12" y="12" width="32" height="8" />
+  <rect width="8" height="32" />
+  <rect x="48" width="8" height="32" />
+</svg>
diff --git a/src/assets/difficulty-icons/normal.svg b/src/assets/difficulty-icons/normal.svg
new file mode 100644
index 0000000..fe06d72
--- /dev/null
+++ b/src/assets/difficulty-icons/normal.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon"
+  viewBox="0 0 75 31"
+>
+  <rect x="19.9082" y="10.4523" width="35.0853" height="9.95261" />
+  <rect x="9.38232" y="0.5" width="7.01706" height="29.8578" />
+  <rect x="0.926758" y="5.47617" width="7.01706" height="19.9052" />
+  <rect x="58.502" y="0.5" width="7.01706" height="29.8578" />
+  <rect x="67.5884" y="5.47617" width="7.01706" height="19.9052" />
+</svg>
diff --git a/src/components/CustomizePracticeCard.vue b/src/components/CustomizePracticeCard.vue
index 47eab46..b379a99 100644
--- a/src/components/CustomizePracticeCard.vue
+++ b/src/components/CustomizePracticeCard.vue
@@ -1,99 +1,65 @@
 <template>
-  <div class="container">
-    <router-link id="customize-practice" to="/customize">
-      <q-btn
-        color="white"
-        id="btn-customize-practice"
-        size="20px"
-        round
-        text-color="white"
-        icon="settings"
-        >
-      <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" content-class="bg-primary" content-style="font-size: 16px">
-        Customize Session
-      </q-tooltip>
-      </q-btn>
-    </router-link>
-    <!-- Header -->
-    <div class="practice-customization-container column full-width">
-      <div class="customize-practice-label">Your Practice Session</div>
-      <!-- Centered Flex container for 3 columns -->
-      <div class="practice-customization-columns row justify-evenly">
-        <!-- Mode Descriptor -->
-        <div class="practice-customization column justify-center items-center">
-          <q-icon v-if="isTimed" size="72px" class="icon-display-color q-mb-sm" name="alarm" large />
-          <q-icon v-else size="72px" class="icon-display-color q-mb-sm" name="help_outline" large />
-          <div class="practice-customization-label" v-if="isTimed">Timed Practice</div>
-          <div class="practice-customization-label" v-else>Math Worksheet</div>
-        </div>
-        <!-- Value Descriptor -->
-        <div class="practice-customization column justify-center items-center">
-          <div
-            v-if="isTimed"
-            class="practice-customization-value icon-display-color q-mb-sm"
-          >{{timeInMins}}</div>
-          <div
-            v-else
-            class="practice-customization-value icon-display-color q-mb-sm"
-          >{{practiceQuestionCount}}</div>
-          <div v-if="isTimed" class="practice-customization-label">Minutes</div>
-          <div v-else class="practice-customization-label">Questions</div>
-        </div>
-        <div class="practice-customization column justify-center">
-          <div v-if="isBasic" class="flex column">
-            <svg
-              width="56"
-              height="77"
-              viewBox="0 0 56 32"
-              class="icon-display-fill-color"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="12" y="12" width="32" height="8" />
-              <rect x="12" y="12" width="32" height="8" />
-              <rect width="8" height="32" />
-              <rect x="48" width="8" height="32" />
-            </svg>
-
-            <div class="practice-customization-label">Basic</div>
-          </div>
-          <div v-if="isNormal" class="flex column">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="75"
-              height="77"
-              class="icon-display-fill-color"
-              viewBox="0 0 75 31"
-            >
-              <rect x="19.9082" y="10.4523" width="35.0853" height="9.95261" />
-              <rect x="9.38232" y="0.5" width="7.01706" height="29.8578" />
-              <rect x="0.926758" y="5.47617" width="7.01706" height="19.9052" />
-              <rect x="58.502" y="0.5" width="7.01706" height="29.8578" />
-              <rect x="67.5884" y="5.47617" width="7.01706" height="19.9052" />
-            </svg>
-            <div class="practice-customization-label">Normal</div>
-          </div>
-          <div v-if="isAdvanced" class="flex column">
-            <svg
-              width="91"
-              height="77"
-              class="icon-display-fill-color"
-              viewBox="0 0 91 31"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="27.2646" y="10.5" width="35" height="10" />
-              <rect x="17.4448" y="0.5" width="7" height="30" />
-              <path d="M83.2646 10.5H90.2817V20.4526H83.2646V10.5Z" />
-              <rect x="0.264648" y="10.5" width="7" height="10" />
-              <rect x="9.26465" y="5.5" width="7" height="20" />
-              <rect x="65.2646" y="0.5" width="7" height="30" />
-              <rect x="74.2646" y="5.5" width="7" height="20" />
-            </svg>
-            <div class="practice-customization-label">Advanced</div>
-          </div>
-        </div>
+<q-card id="this-card">
+  <q-btn
+    id="customize-btn"
+    color="white"
+    size="20px"
+    round
+    icon="settings"
+    to="/customize"
+  >
+    <q-tooltip
+      anchor="bottom middle"
+      self="top middle"
+      :offset="[10, 10]"
+      content-class="bg-primary"
+      content-style="font-size: 16px"
+    >
+      Customize Session
+    </q-tooltip>
+  </q-btn>
+  <q-card-section class="q-pb-none">
+    <div class="header">Your Practice Session</div>
+  </q-card-section>
+  <q-card-section>
+    <div class="row justify-around no-wrap" id="content">
+      <div class="col-auto">
+        <template v-if="isTimed">
+          <q-icon size="72px" class="icon" name="alarm" large />
+          <div class="label">Timed Practice</div>
+        </template>
+        <template v-else>
+          <q-icon size="72px" class="icon" name="help_outline" large/>
+          <div class="label">Math Worksheet</div>
+        </template>
+      </div>
+      <div class="col-auto">
+        <template v-if="isTimed">
+          <div class="icon">{{timeInMins}}</div>
+          <div class="label">Minutes</div>
+        </template>
+        <template v-else>
+          <div class="icon">{{practiceQuestionCount}}</div>
+          <div class="label">Questions</div>
+        </template>
+      </div>
+      <div class="col-auto">
+        <template v-if="isBasic">
+          <BasicIcon style="display:block"/>
+          <div class="label">Basic</div>
+        </template>
+        <template v-if="isNormal">
+          <NormalIcon style="display:block"/>
+          <div class="label">Normal</div>
+        </template>
+        <template v-if="isAdvanced">
+          <AdvancedIcon style="display:block"/>
+          <div class="label">Advanced</div>
+        </template>
       </div>
     </div>
-  </div>
+  </q-card-section>
+</q-card>
 </template>
 
 <script lang="ts">
@@ -101,18 +67,22 @@ import { PracticeGetters, PracticeActions } from "../store/practice/practice";
 import { mapGetters, mapActions } from "vuex";
 import { PracticeMode, Difficulty } from "../engine/models/math_question";
 
+import BasicIcon from "../assets/difficulty-icons/basic.svg"
+import NormalIcon from "../assets/difficulty-icons/normal.svg"
+import AdvancedIcon from "../assets/difficulty-icons/advanced.svg"
+
 export default {
-  props: {
-    icon: {
-      default: null
-    }
+  components: {
+    BasicIcon,
+    NormalIcon,
+    AdvancedIcon,
   },
   computed: {
     ...mapGetters({
       practiceMode: PracticeGetters.PRACTICE_MODE,
       practiceTime: PracticeGetters.PRACTICE_TIME,
       practiceQuestionCount: PracticeGetters.PRACTICE_QUESTION_COUNT,
-      difficulty: PracticeGetters.DIFFICULTY
+      difficulty: PracticeGetters.DIFFICULTY,
     }),
     isTimed() {
       const app: any = this;
@@ -139,61 +109,56 @@ export default {
 </script>
 
 <style scoped>
-.practice-customization-columns {
-  max-width: 343px;
+#this-card {
+  width: 85%;
+  max-width: 320px;
+  height: auto;
+  border-radius: 32px;
+  line-height: 1;
+  align-content: flex-start;
+  padding: 12px;
 }
-.practice-customization-container {
+
+#customize-btn {
   position: absolute;
+  left: 90%;
+  top: -20%;
+  z-index: 4;
+  color: #114489 !important;
 }
-.customize-practice-label {
+
+#content {
+  width: 100%;
+  text-align: center;
+}
+
+.header {
   color: #4f4f4f;
   font-size: 18px;
   font-family: "Montserrat", sans-serif;
-  margin: 12px 0 0 24px;
 }
 
-.practice-customization-value {
-  font-size: 72px;
-  line-height: 0.96;
-}
-
-.practice-customization-label {
-  font-size: 70px;
+.label {
   font-family: "Montserrat", sans-serif;
-  font-style: normal;
-  font-weight: 500;
   font-size: 12px;
-  line-height: 18px;
+  font-weight: 500;
   text-align: center;
+  vertical-align: top;
   color: #4f4f4f;
 }
-.container {
-  width: 84%;
-  height: 172px;
-  background: #ffffff;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 32px;
-  z-index: 2;
-}
-.icon-display-color {
+
+.icon {
+  width: 72px;
+  height: 72px;
+  font-size: 72px;
   color: #114489;
-}
-.icon-display-fill-color {
   fill: #114489;
 }
-#customize-practice {
-  position: relative;
-  z-index: 3;
-  float: right;
-  top: -20px;
-  left: 12px;
-}
-#btn-customize-practice {
-  z-index: 4;
-  color: #114489 !important;
-}
 
-.practice-customization {
-  height: 116px;
+.practice-customization-columns {
+  max-width: 343px;
+}
+.practice-customization-container {
+  position: absolute;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index e6df173..b5d4903 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -6,9 +6,7 @@
         <span class="config-header-label">Hello there!</span>
         <donation-dialog />
       </div>
-      <div class="config-customize-practice row justify-center">
-        <customize-practice-card />
-      </div>
+      <customize-practice-card class="self-center"/>
       <concept-picker />
       <q-space />
       <div class="row justify-center">
@@ -22,10 +20,10 @@
 
 <script lang="ts">
 import ConceptPicker from "../components/ConceptPicker.vue";
-import CustomizePracticeCard from "../components/CustomizePracticeCard.vue";
 import ActionButton from "../components/ActionButton.vue";
 import DonationDialog from "../components/DonationDialog.vue";
 import { Operator } from "../engine/math_questions/expression/models";
+import CustomizePracticeCard from "../components/CustomizePracticeCard.vue"
 
 export default {
   components: {
@@ -49,8 +47,9 @@ export default {
 }
 
 .home-header {
-  padding: 6% 8% 0 8%;
+  padding: 6% 10% 0 10%;
   color: white;
+  margin-bottom: 36px;
 }
 
 .config-header-label {
@@ -59,11 +58,6 @@ export default {
   z-index: 1;
 }
 
-.config-customize-practice {
-  margin-top: 32px;
-  z-index: 1;
-}
-
 .mobile-container {
   width: 420px;
   max-height: 85%;
diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts
new file mode 100644
index 0000000..4be6533
--- /dev/null
+++ b/src/types/svg.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import Vue, { VueConstructor } from 'vue';
+  const content: VueConstructor<Vue>;
+  export default content;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 98f94b4..cbcb858 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "@quasar/app/tsconfig-preset",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "typeRoots": ["node_modules", "src/types"],
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 2513c76..77b817d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8202,7 +8202,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svgo@^1.0.0:
+svgo@^1.0.0, svgo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
   integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
@@ -8816,6 +8816,15 @@ vue-style-loader@4.1.2, vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-loader@^0.17.0-beta.2:
+  version "0.17.0-beta.2"
+  resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.17.0-beta.2.tgz#954b2a08b5488998dd81ec371ab5fb5ea4182ef7"
+  integrity sha512-iMUGJTKEcuNAG8VXOchjA8443IqEmEi2Aw6EVIHWma2cC4TUQ7Oet5Yry9IFfqXQXXvyzXz5EyttVvfRGTNH4Q==
+  dependencies:
+    loader-utils "^2.0.0"
+    semver "^7.3.2"
+    svgo "^1.3.2"
+
 vue-template-compiler@2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"