diff --git a/src/App.vue b/src/App.vue
index b748248..738910b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,33 @@
 <script setup>
 // import HelloWorld from './components/HelloWorld.vue'
 // import TheWelcome from './components/TheWelcome.vue'
+import Footer from './components/Footer.vue'
 </script>
 
 <template>
 <div id="contentPane">
   <div id="content"></div>
-  <div id="footer"></div>
+  <div id="footer">
+    <Footer></Footer>
+  </div>
 </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import "node_modules/bootstrap/scss/_functions.scss";
+@import "node_modules/bootstrap/scss/_variables.scss";
+@import "node_modules/bootstrap/scss/_mixins.scss";
 
+#contentPane{
+
+}
+#content{
+  position: relative;
+}
+
+@include media-breakpoint-between(xs, sm) {
+}
+
+@include media-breakpoint-between(md, xl) {
+}
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 536fb20..7374677 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -27,9 +27,12 @@ export default {
 
 }
 
-@include media-breakpoint-between(xs, sm) {
+@include media-breakpoint-between(xs, md) {
   #footerroot
   {
+    background-color: black;
+    width:100%;
+    justify-content: center;
     height:806px;
   }
   #footercontent
@@ -38,9 +41,12 @@ export default {
   }
 }
 
-@include media-breakpoint-between(md, xl) {
+@include media-breakpoint-up(md) {
   #footerroot
   {
+    background-color: black;
+    width:100%;
+    justify-content: center;
     height: 759px;
   }
   #footercontent
@@ -50,7 +56,4 @@ export default {
   }
 }
 
-@media screen {
-
-}
 </style>