diff --git a/client/src/assets/maintainence.png b/client/src/assets/maintainence.png
new file mode 100644
index 00000000..4ca39654
Binary files /dev/null and b/client/src/assets/maintainence.png differ
diff --git a/client/src/views/Maintenance.vue b/client/src/views/Maintenance.vue
index 837e92b9..007b7e62 100644
--- a/client/src/views/Maintenance.vue
+++ b/client/src/views/Maintenance.vue
@@ -1,34 +1,19 @@
 <template>
   <v-container>
-    <h5 class="text-h5 text-md-h4 font-weight-bold text-center my-10 secondary">
+    <v-img :src="maintenanceImg" width="50%" class="mx-auto my-12" />
+    <h5 class="text-h5 text-md-h4 font-weight-bold text-center my-5">
       Sorry, we are under maintenance now!
     </h5>
-    <v-row justify="center">
-      <v-col cols="12" sm="6">
-        <v-hover v-slot="{ isHovering, props }" open-delay="200">
-          <v-img :style="
-            isHovering
-              ? 'transform:scale(1.1);transition: transform .5s;'
-              : 'transition: transform .5s;'
-          " transition="transform .2s" src="@/assets/about_us.png" :class="{ 'on-hover': isHovering }" v-bind="props" />
-        </v-hover>
-      </v-col>
-    </v-row>
   </v-container>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-
-export default {
-  setup() {
-    const router = useRouter();
-    const maintenance = ref(localStorage.getItem("maintenance") == "true");
-    if (!maintenance.value) {
-      router.push({ name: "Home" })
-    }
-    return { maintenance };
-  },
-};
+import maintenanceImg from "@/assets/maintainence.png";
+const router = useRouter();
+const maintenance = ref(localStorage.getItem("maintenance") == "true");
+if (!maintenance.value) {
+  router.push({ name: "Home" });
+}
 </script>