diff --git a/frontend/package.json b/frontend/package.json
index 2180f8a..b0c5ad9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,14 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.2.0",
-    "@materializecss/materialize": "^1.1.0",
+    "@mdi/font": "^7.4.47",
     "axios": "^1.6.0",
     "github-markdown-css": "^5.5.0",
-    "material-design-icons-iconfont": "^6.7.0",
     "timeago.js": "^4.0.2",
     "vue": "^3.4.0",
-    "vue-router": "^4.2.0"
+    "vue-router": "^4.2.0",
+    "vuetify": "^4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 48e92ad..3d9ff3e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,9 +1,11 @@
 <template>
-  <router-view></router-view>
+  <v-app>
+    <router-view />
+  </v-app>
 </template>
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App",
+};
 </script>
diff --git a/frontend/src/components/Preloader.vue b/frontend/src/components/Preloader.vue
index 467a139..09f6783 100644
--- a/frontend/src/components/Preloader.vue
+++ b/frontend/src/components/Preloader.vue
@@ -1,32 +1,20 @@
 <template>
-    <div class="preloader-background">
-        <div class="preloader-wrapper big active">
-            <div class="spinner-layer spinner-blue-only">
-                <div class="circle-clipper left">
-                    <div class="circle"></div>
-                </div>
-                <div class="gap-patch">
-                    <div class="circle"></div>
-                </div>
-                <div class="circle-clipper right">
-                    <div class="circle"></div>
-                </div>
-            </div>
-        </div>
-    </div>
+  <div class="preloader-background">
+    <v-progress-circular indeterminate color="primary" size="64" width="6" />
+  </div>
 </template>
 
 <style>
 .preloader-background {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    position: fixed;
-    z-index: 100;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 607b0d9..84f321b 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -1,55 +1,88 @@
 <template>
-  <div id="app">
-    <div>
-      <nav :class="[primaryColor, 'nav-extended']">
-        <div class="nav-wrapper container">
-          <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
-          <span style="font-weight: 300; font-size: 1.2rem">{{ $route.name }}</span>
-          <ul id="nav-mobile" class="right hide-on-med-and-down">
-            <li :class="{ 'active': $route.path == '/' || $route.path.startsWith('/topic/') }">
-              <router-link to="/">Explore</router-link>
-            </li>
-            <li :class="{ 'active': $route.path == '/favorites' }">
-              <router-link to="/favorites">Favorites</router-link>
-            </li>
-            <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Extensions<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a href="/logout">Logout</a></li>
-          </ul>
-        </div>
-        <div v-if="$route.path == '/' || $route.path.startsWith('/topic/')" class="nav-content container">
-          <ul class="tabs tabs-transparent hide-scrollbar">
-            <li v-for="topic in topics" v-bind:key="topic" class="tab">
-              <router-link :to="topic == 'all' ? '/' : '/topic/' + topic">{{ topic.replace('-', ' ') }}</router-link>
-            </li>
-          </ul>
+  <div>
+    <v-navigation-drawer v-model="drawer" temporary>
+      <v-list nav density="comfortable">
+        <v-list-item title="Explore" :active="isExploreRoute" @click="goTo('/')" />
+        <v-list-item title="Favorites" :active="$route.path === '/favorites'" @click="goTo('/favorites')" />
+        <v-list-item title="Logout" href="/logout" />
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar color="primary" flat :extended="isExploreRoute">
+      <template #prepend>
+        <v-app-bar-nav-icon class="d-md-none" @click="drawer = !drawer" />
+      </template>
+
+      <v-container class="d-flex align-center">
+        <span class="route-title">{{ $route.name }}</span>
+        <v-spacer />
+        <div class="d-none d-md-flex align-center ga-1">
+          <v-btn variant="text" :to="'/'" :active="isExploreRoute" color="white">Explore</v-btn>
+          <v-btn variant="text" :to="'/favorites'" :active="$route.path === '/favorites'" color="white">Favorites</v-btn>
+
+          <v-menu location="bottom end">
+            <template #activator="{ props }">
+              <v-btn v-bind="props" variant="text" color="white" append-icon="mdi-menu-down">
+                Extensions
+              </v-btn>
+            </template>
+            <v-list density="compact">
+              <v-list-item
+                title="Chrome Extension"
+                href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl"
+                target="_blank"
+              />
+              <v-list-item
+                title="Edge Add-on"
+                href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa"
+                target="_blank"
+              />
+              <v-list-item
+                title="Firefox Add-on"
+                href="https://addons.mozilla.org/addon/gitrec/"
+                target="_blank"
+              />
+            </v-list>
+          </v-menu>
+
+          <v-btn variant="text" href="/logout" color="white">Logout</v-btn>
         </div>
-      </nav>
-    </div>
-    <ul class="sidenav" id="mobile-demo">
-      <li :class="{ 'active': $route.path == '/' || $route.path.startsWith('/topic/') }">
-        <router-link to="/">Explore</router-link>
-      </li>
-      <li :class="{ 'active': $route.path == '/favorites' }">
-        <router-link to="/favorites">Favorites</router-link>
-      </li>
-      <li><a href="/logout">Logout</a></li>
-    </ul>
-    <ul id="dropdown1" class="dropdown-content">
-      <li><a href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl" target="_blank">Chrome Extension</a></li>
-      <li><a href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa" target="_blank">Edge Add-on</a></li>
-      <li><a href="https://addons.mozilla.org/addon/gitrec/" target="_blank">Firefox Add-on</a></li>
-    </ul>
-    <router-view></router-view>
+      </v-container>
+
+      <template v-if="isExploreRoute" #extension>
+        <v-container>
+          <v-tabs
+            :model-value="activeTopic"
+            bg-color="primary"
+            color="white"
+            slider-color="white"
+            show-arrows
+            class="topic-tabs"
+          >
+            <v-tab
+              v-for="topic in topics"
+              :key="topic"
+              :value="topic"
+              :to="topicToPath(topic)"
+            >
+              {{ topicLabel(topic) }}
+            </v-tab>
+          </v-tabs>
+        </v-container>
+      </template>
+    </v-app-bar>
+
+    <v-main>
+      <router-view />
+    </v-main>
   </div>
 </template>
 
 <script>
-import M from "@materializecss/materialize";
 export default {
   data() {
     return {
-      primaryColor: "blue darken-1",
-      textColor: "white-text text-lighten-3",
+      drawer: false,
       topics: [
         "all",
         "python",
@@ -60,31 +93,42 @@ export default {
         "typescript",
         "c",
         "rust",
-      ]
+      ],
     };
   },
-  mounted() {
-    document.addEventListener("DOMContentLoaded", function () {
-      var sidenavElements = document.querySelectorAll(".sidenav");
-      M.Sidenav.init(sidenavElements);
-      var tabsElements = document.querySelectorAll(".tabs");
-      M.Tabs.init(tabsElements, {});
-      var dropdownElements = document.querySelectorAll('.dropdown-trigger');
-      M.Dropdown.init(dropdownElements, { constrainWidth: false });
-    });
-  }
+  computed: {
+    isExploreRoute() {
+      return this.$route.path === "/" || this.$route.path.startsWith("/topic/");
+    },
+    activeTopic() {
+      return this.$route.params.topic || "all";
+    },
+  },
+  methods: {
+    goTo(path) {
+      this.drawer = false;
+      if (this.$route.path !== path) {
+        this.$router.push(path);
+      }
+    },
+    topicToPath(topic) {
+      return topic === "all" ? "/" : `/topic/${topic}`;
+    },
+    topicLabel(topic) {
+      return topic.replace("-", " ").toUpperCase();
+    },
+  },
 };
 </script>
 
 <style>
-.hide-scrollbar::-webkit-scrollbar {
-  background: transparent;
-  width: 0px;
-  height: 0px;
+.route-title {
+  font-weight: 300;
+  font-size: 1.2rem;
+  color: #f5f5f5;
 }
 
-.hide-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.topic-tabs {
+  min-height: 42px;
 }
 </style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0676a56..9d35314 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,10 +1,8 @@
 import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 
-import "@materializecss/materialize/dist/css/materialize.min.css";
-import "github-markdown-css/github-markdown.css";
-import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import "@fortawesome/fontawesome-free/css/all.css";
+import "github-markdown-css/github-markdown-light.css";
+import vuetify from "./plugins/vuetify";
 
 import App from "./App.vue";
 import MainLayout from "./layouts/MainLayout.vue";
@@ -31,4 +29,5 @@ const router = createRouter({
 
 const app = createApp(App);
 app.use(router);
+app.use(vuetify);
 app.mount("#app");
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
new file mode 100644
index 0000000..000fa5c
--- /dev/null
+++ b/frontend/src/plugins/vuetify.js
@@ -0,0 +1,36 @@
+import "vuetify/styles";
+import "@mdi/font/css/materialdesignicons.css";
+
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import { aliases, mdi } from "vuetify/iconsets/mdi";
+
+export default createVuetify({
+  components,
+  directives,
+  icons: {
+    defaultSet: "mdi",
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+  theme: {
+    defaultTheme: "gitrec",
+    themes: {
+      gitrec: {
+        dark: false,
+        colors: {
+          primary: "#1e88e5",
+          secondary: "#26a69a",
+          accent: "#26a69a",
+          background: "#ffffff",
+          surface: "#ffffff",
+          "on-primary": "#f5f5f5",
+          "on-surface": "#1f2937",
+        },
+      },
+    },
+  },
+});
\ No newline at end of file
diff --git a/frontend/src/views/Favorites.vue b/frontend/src/views/Favorites.vue
index e0abf3a..9839bb1 100644
--- a/frontend/src/views/Favorites.vue
+++ b/frontend/src/views/Favorites.vue
@@ -1,30 +1,33 @@
 <template>
-  <div class="container">
+  <v-container>
     <Preloader v-if="feedbacks == null" />
     <div v-else>
-      <div class="collection">
-        <a v-for="feedback in pageFeedbacks" :key="feedback.FeedbackType + feedback.ItemId"
-          :href="'https://github.com/' + feedback.ItemId" target="__blank" class="collection-item">
-          <i v-if="feedback.FeedbackType == 'star'" class="material-icons feedback-icon">star</i>
-          <i v-if="feedback.FeedbackType == 'like'" class="material-icons feedback-icon">favorite</i>
-          {{ feedback.ItemId }}
-          <div class="secondary-content">
-            {{ formatTime(feedback.Timestamp) }}
-          </div>
-        </a>
+      <v-list class="feedback-list" lines="one">
+        <v-list-item
+          v-for="feedback in pageFeedbacks"
+          :key="feedback.FeedbackType + feedback.ItemId"
+          :href="'https://github.com/' + feedback.ItemId"
+          target="_blank"
+          rounded="lg"
+          class="feedback-item"
+        >
+          <template #prepend>
+            <v-icon size="18" class="feedback-icon">{{ feedbackIcon(feedback.FeedbackType) }}</v-icon>
+          </template>
+
+          <v-list-item-title>{{ feedback.ItemId }}</v-list-item-title>
+
+          <template #append>
+            <span class="feedback-time">{{ formatTime(feedback.Timestamp) }}</span>
+          </template>
+        </v-list-item>
+      </v-list>
+
+      <div v-if="numPage > 1" class="d-flex justify-center my-4">
+        <v-pagination v-model="currentPage" :length="numPage" :total-visible="7" color="primary" />
       </div>
-      <ul class="pagination">
-        <li :class="{'disabled': currentPage === 1, 'waves-effect': currentPage > 1}"><a @click="currentPage--"><i
-              class="material-icons">chevron_left</i></a></li>
-        <li v-for="index in numPage" :key="index"
-          :class="index === currentPage ? ['active','blue','darken-1'] : ['waves-effect']"><a
-            @click="currentPage = index">{{ index }}</a></li>
-        <li :class="{'disabled': currentPage === numPage, 'waves-effect': currentPage < numPage}"><a
-            @click="currentPage++"><i class="material-icons">chevron_right</i></a>
-        </li>
-      </ul>
     </div>
-  </div>
+  </v-container>
 </template>
 
 <script>
@@ -53,6 +56,9 @@ export default {
     formatTime(timestamp) {
       return timeago.format(timestamp);
     },
+    feedbackIcon(feedbackType) {
+      return feedbackType === "star" ? "mdi-star" : "mdi-heart";
+    },
   },
   computed: {
     numPage: function () {
@@ -76,4 +82,14 @@ export default {
   font-size: 16px;
   vertical-align: middle;
 }
+
+.feedback-item {
+  margin-bottom: 4px;
+  border: 1px solid #e5e7eb;
+}
+
+.feedback-time {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
 </style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 30fc876..05f3b8c 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,39 +1,53 @@
 <template>
   <div>
-    <div class="container">
-      <div v-if="full_name" class="header">
-        <a :href="html_url" target="__blank"><i class="material-icons feedback-icon">link</i>&nbsp;{{ full_name }}</a>
-        <div class="secondary-content">
-          <a v-if="language"><i class="material-icons feedback-icon">code</i>&nbsp;{{ language }}&nbsp;</a>
-          <a :href="html_url + '/stargazers'" target="__blank"><i class="material-icons feedback-icon">star</i>&nbsp;{{
-              stargazers_count
-          }}</a>&nbsp;
-          <a :href="html_url + '/network/members'" target="__blank"><i
-              class="material-icons feedback-icon">fork_right</i>&nbsp;{{ forks_count }}</a>&nbsp;
-          <a :href="html_url + '/watchers'" target="__blank"><i
-              class="material-icons feedback-icon">remove_red_eye</i>&nbsp;{{ subscribers_count }}</a>
+    <v-container>
+      <div v-if="full_name" class="repo-header">
+        <a :href="html_url" target="_blank" class="repo-link">
+          <v-icon size="18">mdi-link-variant</v-icon>
+          {{ full_name }}
+        </a>
+        <div class="repo-meta">
+          <span v-if="language" class="repo-meta-link">
+            <v-icon size="16">mdi-code-tags</v-icon>
+            {{ language }}
+          </span>
+          <a :href="html_url + '/stargazers'" target="_blank" class="repo-meta-link">
+            <v-icon size="16">mdi-star</v-icon>
+            {{ stargazers_count }}
+          </a>
+          <a :href="html_url + '/network/members'" target="_blank" class="repo-meta-link">
+            <v-icon size="16">mdi-source-fork</v-icon>
+            {{ forks_count }}
+          </a>
+          <a :href="html_url + '/watchers'" target="_blank" class="repo-meta-link">
+            <v-icon size="16">mdi-eye</v-icon>
+            {{ subscribers_count }}
+          </a>
         </div>
       </div>
       <Preloader v-if="readme == null" />
       <article v-else class="markdown-body" v-html="readme"></article>
-    </div>
-    <div class="fixed-action-btn" style="bottom: 86px;">
-      <a class="btn-floating" :class="{ 'red': like_pressed }">
-        <i class="material-icons" @click="like">favorite</i>
-      </a>
-    </div>
-    <div class="fixed-action-btn">
-      <a class="btn-floating">
-        <i class="material-icons" @click="next">play_arrow</i>
-      </a>
-    </div>
+    </v-container>
+
+    <v-btn
+      icon
+      size="large"
+      :color="like_pressed ? 'red' : 'primary'"
+      class="fab-btn fab-like"
+      @click="like"
+    >
+      <v-icon>{{ like_pressed ? "mdi-heart" : "mdi-heart-outline" }}</v-icon>
+    </v-btn>
+
+    <v-btn icon size="large" color="primary" class="fab-btn fab-next" @click="next">
+      <v-icon>mdi-play</v-icon>
+    </v-btn>
   </div>
 </template>
 
 
 <script>
 import Preloader from "../components/Preloader.vue";
-import M from "@materializecss/materialize";
 import axios from "axios";
 
 export default {
@@ -78,7 +92,6 @@ export default {
     this.clearRepository();
   },
   mounted() {
-    M.AutoInit();
     this.recommend();
   },
   methods: {
@@ -157,21 +170,58 @@ export default {
   }
 }
 
-.header {
+.repo-header {
   padding-top: 10px;
   padding-left: 45px;
   padding-right: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 @media (max-width: 767px) {
-  .header {
+  .repo-header {
     padding-top: 10px;
     padding-left: 15px;
     padding-right: 15px;
   }
 }
 
-.header a {
+.repo-link,
+.repo-meta-link {
   color: #26a69a;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.repo-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.fab-btn {
+  position: fixed !important;
+  right: 24px;
+  z-index: 30;
+}
+
+.fab-like {
+  bottom: 92px;
+}
+
+.fab-next {
+  bottom: 24px;
+}
+
+@media (max-width: 767px) {
+  .fab-btn {
+    right: 16px;
+  }
 }
 </style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 440b0c5..6d3c94c 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -1,94 +1,93 @@
 <template>
-  <div id="app">
-    <div>
-      <nav :class="[primaryColor]">
-        <div class="nav-wrapper container">
-          <span style="font-weight: 300; font-size: 1.5rem">GitRec</span>
-        </div>
-      </nav>
-    </div>
-    <div class="container sign-in-body">
-      <p class="center-align">
+  <div>
+    <v-app-bar color="primary" flat>
+      <v-container>
+        <span class="page-title">GitRec</span>
+      </v-container>
+    </v-app-bar>
+
+    <v-main>
+      <v-container class="sign-in-body">
+        <p class="text-center">
         <img src="/logo.png" width="256px" />
-      </p>
-      <h5 class="center-align">
-        Explore <a href="https://github.com" target="_blank">GitHub</a> with
-        <a href="https://gorse.io" target="_blank">Gorse</a> recommender system
-      </h5>
-      <p class="center-align">
-        <a :class="[primaryColor]" class="waves-effect waves-light btn" href="/login/github">
-          <i class="fab fa-github material-icons left"></i>Sign in with GitHub
-        </a>
-      </p>
-      <h5 class="center-align">
-        Browser Extensions
-      </h5>
-      <br>
-      <div class="row center-align">
-        <div class="col m2 s4 offset-m3">
-          <a href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl" target="_blank">
-            <img src="https://i.loli.net/2021/04/23/IqpU7COKQvzrcyG.png" />
-          </a>
-        </div>
-        <div class="col m2 s4">
-          <a href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa" target="_blank">
-            <img src="https://i.loli.net/2021/04/23/EnS3eDi4I86Yv2N.png" />
-          </a>
-        </div>
-        <div class="col m2 s4">
-          <a href="https://addons.mozilla.org/addon/gitrec/" target="_blank">
-            <img src="/firefox.png" />
-          </a>
-        </div>
-      </div>
-    </div>
-    <footer :class="[primaryColor]" class="page-footer">
-      <div class="container">
-        <div class="row">
-          <div class="col l6 s12">
+        </p>
+        <h5 class="text-center">
+          Explore <a href="https://github.com" target="_blank">GitHub</a> with
+          <a href="https://gorse.io" target="_blank">Gorse</a> recommender system
+        </h5>
+        <p class="text-center">
+          <v-btn color="primary" size="large" href="/login/github" prepend-icon="mdi-github" class="text-none">
+            Sign in with GitHub
+          </v-btn>
+        </p>
+        <h5 class="text-center">Browser Extensions</h5>
+        <br>
+
+        <v-row class="text-center" justify="center">
+          <v-col cols="4" sm="3" md="2">
+            <a href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl" target="_blank">
+              <img src="https://i.loli.net/2021/04/23/IqpU7COKQvzrcyG.png" class="extension-icon" />
+            </a>
+          </v-col>
+          <v-col cols="4" sm="3" md="2">
+            <a href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa" target="_blank">
+              <img src="https://i.loli.net/2021/04/23/EnS3eDi4I86Yv2N.png" class="extension-icon" />
+            </a>
+          </v-col>
+          <v-col cols="4" sm="3" md="2">
+            <a href="https://addons.mozilla.org/addon/gitrec/" target="_blank">
+              <img src="/firefox.png" class="extension-icon" />
+            </a>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+
+    <v-footer color="primary" class="page-footer">
+      <v-container>
+        <v-row>
+          <v-col cols="12" md="7">
             <h5>About</h5>
-            <p :class="[textColor]">
+            <p class="text-on-primary">
               GitRec is the missing recommender system for GitHub built to test the
               usability of the Gorse open recommender system engine.
             </p>
-          </div>
-          <div class="col l4 offset-l2 s12">
-            <h5 :class="[textColor]">Links</h5>
-            <ul>
+          </v-col>
+          <v-col cols="12" md="5">
+            <h5 class="text-on-primary">Links</h5>
+            <ul class="footer-links">
               <li>
-                <router-link :class="[textColor]" to="/privacy">Privacy Policy</router-link>
+                <router-link class="text-on-primary" to="/privacy">Privacy Policy</router-link>
               </li>
               <li>
-                <a :class="[textColor]" href="https://github.com/gorse-io/gitrec" target="_blank">Source @ GitHub</a>
+                <a class="text-on-primary" href="https://github.com/gorse-io/gitrec" target="_blank">Source @ GitHub</a>
               </li>
             </ul>
-          </div>
-        </div>
-      </div>
-      <div class="footer-copyright">
-        <div class="container">© {{ new Date().getFullYear() }} zhenghaoz</div>
-      </div>
-    </footer>
+          </v-col>
+        </v-row>
+        <div class="copyright">© {{ currentYear }} zhenghaoz</div>
+      </v-container>
+    </v-footer>
   </div>
 </template>
 
 <script>
-import M from "@materializecss/materialize";
-
 export default {
-  data() {
-    return {
-      primaryColor: "blue darken-1",
-      textColor: "white-text text-lighten-3",
-    };
-  },
-  mounted() {
-    M.AutoInit();
+  computed: {
+    currentYear() {
+      return new Date().getFullYear();
+    },
   },
 };
 </script>
 
 <style>
+.page-title {
+  font-weight: 300;
+  font-size: 1.5rem;
+  color: #f5f5f5;
+}
+
 .sign-in-body {
   box-sizing: border-box;
   min-width: 200px;
@@ -96,4 +95,30 @@ export default {
   margin: 0 auto;
   padding: 45px;
 }
+
+.extension-icon {
+  max-width: 100%;
+}
+
+.page-footer {
+  margin-top: 24px;
+}
+
+.text-on-primary {
+  color: #f5f5f5;
+}
+
+.footer-links {
+  list-style: none;
+  padding-left: 0;
+}
+
+.footer-links li {
+  margin-bottom: 6px;
+}
+
+.copyright {
+  padding-top: 8px;
+  color: #f5f5f5;
+}
 </style>
diff --git a/frontend/src/views/Privacy.vue b/frontend/src/views/Privacy.vue
index 7646dd4..990a174 100644
--- a/frontend/src/views/Privacy.vue
+++ b/frontend/src/views/Privacy.vue
@@ -1,13 +1,13 @@
 <template>
-  <div id="app">
-    <div>
-      <nav :class="[primaryColor]">
-        <div class="nav-wrapper container">
-          <span style="font-weight: 300; font-size: 1.5rem">Privacy Policy</span>
-        </div>
-      </nav>
-    </div>
-    <div class="container sign-in-body">
+  <div>
+    <v-app-bar color="primary" flat>
+      <v-container>
+        <span class="page-title">Privacy Policy</span>
+      </v-container>
+    </v-app-bar>
+
+    <v-main>
+      <v-container class="sign-in-body">
       <p>This Privacy Policy describes how GitRec (&quot;we,&quot; &quot;us,&quot; or &quot;our&quot;) collects, uses,
         and discloses information from users of our GitRec Chrome extension (&quot;Extension&quot;). By installing and
         using the Extension, you agree to the terms of this Privacy Policy.</p>
@@ -56,27 +56,18 @@
       <ul>
         <li><strong>Email</strong>: <strong>zhangzhenghao@hotmail.com</strong></li>
       </ul>
-    </div>
+      </v-container>
+    </v-main>
   </div>
 </template>
 
-<script>
-import M from "@materializecss/materialize";
-
-export default {
-  data() {
-    return {
-      primaryColor: "blue darken-1",
-      textColor: "white-text text-lighten-3",
-    };
-  },
-  mounted() {
-    M.AutoInit();
-  },
-};
-</script>
-
 <style>
+.page-title {
+  font-weight: 300;
+  font-size: 1.5rem;
+  color: #f5f5f5;
+}
+
 .sign-in-body {
   box-sizing: border-box;
   min-width: 200px;