diff --git a/package-lock.json b/package-lock.json
index 02792e0..16b38f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "free-movies",
       "version": "0.0.0",
       "dependencies": {
+        "@mdi/font": "^7.2.96",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4",
         "vuetify": "^3.3.15"
@@ -385,6 +386,11 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@mdi/font": {
+      "version": "7.2.96",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz",
+      "integrity": "sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz",
diff --git a/package.json b/package.json
index 1230b11..6408ddf 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mdi/font": "^7.2.96",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vuetify": "^3.3.15"
diff --git a/src/App.vue b/src/App.vue
index ed1934c..6797acc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,18 @@
 <script setup>
-    import SearchBox from "@/components/SearchBox.vue";
+    import {VApp} from "vuetify/components";
+    import AppBar from "@/components/AppBar.vue";
+    import {VContainer} from "vuetify/components";
 </script>
 
 <template>
-    <section>
-        <h1>فری مووی</h1>
-        <h2>موتورجستجوی فیلم و سریال</h2>
-        <div class="spacer"></div>
-        <search-box text=""></search-box>
-    </section>
+    <v-app>
+        <app-bar></app-bar>
+        <v-container class="d-flex justify-center align-center h-screen flex-column">
+            <p>ویترین به زودی اضافه میشود ...</p>
+        </v-container>
+    </v-app>
 </template>
 
 <style scoped>
-    section {
-        height: 100vh;
-        width: 100vw;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    section h1 {
-        font-size: 3.2rem;
-    }
-    section h2 {
-        font-size: 1.5rem;
-    }
-    .spacer {
-        padding: 25px;
-    }
+
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
index bbeb21d..684e4fa 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -13,4 +13,12 @@ html, body {
     margin: 0;
     padding: 0;
     direction: rtl;
+}
+
+.text-h1, .text-h2 {
+    font-family: Vazir !important;
+}
+
+.v-list-item__prepend {
+    width: 32px;
 }
\ No newline at end of file
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
new file mode 100644
index 0000000..bbb6573
--- /dev/null
+++ b/src/components/AppBar.vue
@@ -0,0 +1,46 @@
+<script setup>
+    import {VAppBar, VAppBarTitle, VIcon, VNavigationDrawer, VList, VListItem, VDialog, VToolbar, VToolbarTitle, VBtn} from "vuetify/components";
+    import {ref} from "vue";
+
+    const drawer = ref(false)
+    const dialogDev = ref(false)
+</script>
+
+<template>
+    <v-dialog v-model="dialogDev" fullscreen :scrim="false" transition="dialog-bottom-transition">
+        <v-toolbar color="blue-darken-2">
+            <v-btn icon @click.stop="dialogDev = false"><v-icon>mdi-close</v-icon></v-btn>
+            <v-toolbar-title>توسعه دهنده</v-toolbar-title>
+        </v-toolbar>
+        <div class="h-100 bg-white pa-5">
+            <v-list>
+                <v-list-item prepend-icon="mdi-account">محمدعلی ارجمند</v-list-item>
+                <v-list-item prepend-icon="mdi-github"><a href="https://github.com/mohammadali-arjomand" target="_blank">گیت هاب</a></v-list-item>
+                <v-list-item prepend-icon="mdi-linkedin"><a href="https://www.linkedin.com/in/mohammad-ali-arjomand-b735b5279/" target="_blank">لینکدین</a></v-list-item>
+                <v-list-item prepend-icon="mdi-email-outline"><a href="mailto:arjomand.dev@gmail.com" target="_blank">ایمیل</a></v-list-item>
+            </v-list>
+        </div>
+    </v-dialog>
+    <v-navigation-drawer v-model="drawer" location="right">
+        <div class="bg-blue-darken-2 w-100 h-25 d-flex justify-end align-start pa-2 flex-column">
+            <p>فری مووی</p>
+            <small>موتورجستجوی فیلم و سریال</small>
+        </div>
+        <v-list>
+            <router-link to="/" style="color: #222; text-decoration: none"><v-list-item prepend-icon="mdi-home">صفحه اصلی</v-list-item></router-link>
+            <v-list-item prepend-icon="mdi-xml" @click.stop="dialogDev = true">توسعه دهنده</v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+    <v-app-bar :elevation="2" color="blue-darken-2">
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer" variant="text"><v-icon>mdi-menu</v-icon></v-app-bar-nav-icon>
+        <v-app-bar-title>فری مووی</v-app-bar-title>
+        <router-link to="/search" style="color: white"><v-app-bar-nav-icon><v-icon>mdi-magnify</v-icon></v-app-bar-nav-icon></router-link>
+    </v-app-bar>
+</template>
+
+<style scoped>
+a {
+    text-decoration: none;
+    color: black;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/LoadingCard.vue b/src/components/LoadingCard.vue
new file mode 100644
index 0000000..b7143ba
--- /dev/null
+++ b/src/components/LoadingCard.vue
@@ -0,0 +1,9 @@
+<script setup>
+    import {VSkeletonLoader} from "vuetify/labs/components";
+</script>
+
+<template>
+    <v-skeleton-loader class="mx-auto border mt-3" max-width="300" type="image, heading"></v-skeleton-loader>
+</template>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/LoadingList.vue b/src/components/LoadingList.vue
new file mode 100644
index 0000000..d1d2b53
--- /dev/null
+++ b/src/components/LoadingList.vue
@@ -0,0 +1,9 @@
+<script setup>
+import {VSkeletonLoader} from "vuetify/labs/components";
+</script>
+
+<template>
+    <v-skeleton-loader class="border mt-3 mx-5" type="heading"></v-skeleton-loader>
+</template>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/Movie.vue b/src/components/Movie.vue
new file mode 100644
index 0000000..b33108d
--- /dev/null
+++ b/src/components/Movie.vue
@@ -0,0 +1,139 @@
+<script setup>
+import {
+    VApp,
+    VContainer,
+    VToolbar,
+    VImg,
+    VRow,
+    VCol,
+    VBtn,
+    VCard,
+    VDialog,
+    VToolbarTitle,
+    VList,
+    VListItem,
+    VListSubheader,
+    VIcon
+} from "vuetify/components";
+    import AppBar from "@/components/AppBar.vue";
+import {ref} from "vue";
+import LoadingList from "@/components/LoadingList.vue";
+
+    const downloadDlg = ref(false)
+    const movie = localStorage.movie !== undefined ? JSON.parse(localStorage.movie) : null
+
+    const loaded = ref(true)
+    const seasons = ref([]);
+    if (movie.type === "movie") {
+        seasons.value = [
+            {
+                title: movie.title,
+                episodes: [
+                    {
+                        title: "دانلود",
+                        sources: movie.sources
+                    }
+                ]
+            }
+        ]
+    }
+    else {
+        loaded.value = false
+        fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(`http://winbedrives.com/api/season/by/serie/${movie.id}/4F5A9C3D9A86FA54EACEDDD63518`)}`)
+            .then(response => {
+                if (response.ok) return response.json()
+                throw new Error('Network response was not ok.')
+            })
+            .then(data => {
+                    seasons.value = JSON.parse(data.contents)
+                    loaded.value = true
+                }
+            );
+    }
+</script>
+
+<template>
+    <v-app>
+        <v-dialog v-model="downloadDlg" fullscreen :scrim="false" transition="dialog-bottom-transition">
+            <v-toolbar color="blue-darken-2">
+                <v-btn icon @click.stop="downloadDlg = false" variant="text"><v-icon>mdi-close</v-icon></v-btn>
+                <v-toolbar-title>دانلود</v-toolbar-title>
+            </v-toolbar>
+            <div v-if="loaded" class="download-box overflow-x-auto">
+                <v-list v-for="season of seasons">
+                        <h2 class="px-3">{{ season.title }}</h2>
+                        <div v-for="episode of season.episodes">
+                            <v-list-subheader>{{ episode.title }}</v-list-subheader>
+                            <a v-for="source of episode.sources" :href="source.url"><v-list-item>{{ source.quality === null || source.quality === "" ? "دانلود" : source.quality }}</v-list-item></a>
+                        </div>
+                </v-list>
+            </div>
+            <div v-else class="download-box overflow-x-auto">
+                <loading-list v-for="n in 10"></loading-list>
+            </div>
+        </v-dialog>
+        <app-bar></app-bar>
+        <br><br>
+        <v-container>
+            <p v-if="movie === null" class="msg">
+                ویدیوی موردنظر شما پیدا نشد
+            </p>
+            <div v-else class="mt-3">
+                <v-row>
+                    <v-col cols="5" md="3" lg="2">
+                        <v-img :src="movie.image" class="rounded"></v-img>
+                    </v-col>
+                    <v-col cols="7" md="9" lg="10">
+                        <h1>{{ movie.title }}</h1>
+                        <table>
+                            <tr>
+                                <td>سال ساخت:</td>
+                                <td>{{ movie.year }}</td>
+                            </tr>
+                            <tr>
+                                <td>کشور سازنده:</td>
+                                <td>{{ movie.country[0].title }}</td>
+                            </tr>
+                            <tr>
+                                <td>امتیاز IMDb:</td>
+                                <td>{{ movie.imdb }}</td>
+                            </tr>
+                        </table>
+                        <v-btn color="blue-darken-2" @click="downloadDlg = true">
+                            <v-icon>mdi-download</v-icon>
+                            <span>دانلود</span>
+                        </v-btn>
+                    </v-col>
+                </v-row>
+                <v-card class="mt-3 pa-3"><pre>{{ movie.description }}</pre></v-card>
+            </div>
+        </v-container>
+    </v-app>
+</template>
+
+<style scoped>
+    .msg {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    pre {
+        font-family: Vazir;
+        text-align: justify;
+        overflow-x: auto;
+        white-space: pre-wrap;
+        white-space: -moz-pre-wrap;
+        white-space: -pre-wrap;
+        white-space: -o-pre-wrap;
+        word-wrap: break-word;
+    }
+    a {
+        color: #222222;
+        text-decoration: none;
+    }
+    .download-box {
+        height: 100%;
+        background-color: white;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/MovieCard.vue b/src/components/MovieCard.vue
index 4dc75b5..b3b49f4 100644
--- a/src/components/MovieCard.vue
+++ b/src/components/MovieCard.vue
@@ -1,64 +1,22 @@
 <script setup>
-    import TheButton from "@/components/TheButton.vue";
+import {VCard, VImg, VCardItem, VCardTitle} from "vuetify/components";
+import router from "@/router";
 
-    const props = defineProps(["title", "image", "imdb", "year", "countries", "sources", "type"])
+const props = defineProps(["movie"])
+
+function openMovie(movie) {
+    localStorage.movie = JSON.stringify(movie);
+    router.push("/movie");
+}
 </script>
 
 <template>
-    <section>
-        <img :src="image" :alt="title">
-        <div>
-            <h2>{{ title }}</h2>
-            <p>امتیاز: {{ imdb }}</p>
-            <p>سال ساخت: {{ year }}</p>
-            <p>
-                کشور سازنده:
-                <span v-for="country in countries">{{ country.title }}</span>
-            </p>
-            <p>{{ type === "movie" ? "فیلم" : "سریال" }}</p>
-            <div v-if="sources.length > 0" class="buttons">
-                <the-button v-for="source of sources"
-                            :url="source.url"
-                >{{ source.quality === '' ? "دانلود" : source.quality }}</the-button>
-            </div>
-            <p v-else class="blue">به زودی ...</p>
-        </div>
-    </section>
+    <v-card class="mt-3 h-100" @click="openMovie(movie)" dir="ltr">
+        <v-img :src="movie.image" class="d-block"></v-img>
+        <v-card-item>
+            <v-card-title width="50">{{ movie.title }}</v-card-title>
+        </v-card-item>
+    </v-card>
 </template>
 
-<style scoped>
-    section {
-        box-shadow: #ddd 0 0 4px 1px;
-        margin-top: 20px;
-        width: 80vw;
-        padding: 12px;
-        display: flex;
-        border-radius: 10px;
-        overflow: hidden;
-    }
-
-    section img {
-        height: 30vh;
-        border-radius: 10px;
-    }
-
-    section div {
-        display: flex;
-        flex-direction: column;
-        margin: 20px 10px;
-    }
-
-    section div h2 {
-        margin-bottom: 20px;
-    }
-
-    .buttons {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    .blue {
-        color: royalblue;
-    }
-</style>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/Result.vue b/src/components/Result.vue
index 457078e..2992566 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -1,12 +1,12 @@
 <script setup>
 import {reactive, ref} from "vue";
 import {useRoute} from "vue-router";
-import SearchBox from "@/components/SearchBox.vue";
+import {VApp, VContainer, VRow, VCol} from "vuetify/components";
+import SearchBar from "@/components/SearchBar.vue";
 import MovieCard from "@/components/MovieCard.vue";
+import LoadingCard from "@/components/LoadingCard.vue";
 
 const query = useRoute().params.query;
-document.title = `${query} - فری مووی`
-
 
 let found = ref(false);
 let movies = reactive([]);
@@ -26,29 +26,34 @@ fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(`https://winbedri
 
 <template>
 
-    <div v-if="found">
-        <p v-if="movies.length === 0" class="msg">
-            همچین عنوانی پیدا نشد!
-            <br>
-            <router-link to="/">جستجو مجدد</router-link>
-        </p>
-        <div v-else class="container">
-            <h1>فری مووی</h1>
-
-            <search-box :text="query" :refresh="true"></search-box>
-            <movie-card v-for="movie of movies"
-                        :title="movie.title"
-                        :image="movie.image"
-                        :imdb="movie.imdb"
-                        :year="movie.year"
-                        :countries="movie.country"
-                        :sources="movie.sources"
-                        :type="movie.type"
-            ></movie-card>
-            <br>
+    <v-app>
+        <search-bar :value="query" :refresh="true"></search-bar>
+        <br><br>
+        <div v-if="found">
+            <p v-if="movies.length === 0" class="msg">
+                همچین عنوانی پیدا نشد!
+                <br>
+                <router-link to="/">جستجو مجدد</router-link>
+            </p>
+            <v-container v-else>
+                <v-row>
+                    <v-col cols="6" sm="4" md="3" lg="2" v-for="movie of movies">
+                        <movie-card :movie="movie"></movie-card>
+                    </v-col>
+                </v-row>
+                <br>
+            </v-container>
+        </div>
+        <div v-else>
+            <v-container>
+                <v-row>
+                    <v-col cols="6" sm="4" md="3" lg="2" v-for="n in 24">
+                        <loading-card></loading-card>
+                    </v-col>
+                </v-row>
+            </v-container>
         </div>
-    </div>
-    <p v-else class="msg">در حال جستجو ...</p>
+    </v-app>
 
 </template>
 
diff --git a/src/components/Search.vue b/src/components/Search.vue
new file mode 100644
index 0000000..1d2d0df
--- /dev/null
+++ b/src/components/Search.vue
@@ -0,0 +1,12 @@
+<script setup>
+    import {VApp} from "vuetify/components";
+    import SearchBar from "@/components/SearchBar.vue";
+</script>
+
+<template>
+    <v-app>
+        <search-bar :focus="true"></search-bar>
+    </v-app>
+</template>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
new file mode 100644
index 0000000..551dfb0
--- /dev/null
+++ b/src/components/SearchBar.vue
@@ -0,0 +1,49 @@
+<script setup>
+    import {VAppBar, VAppBarTitle, VAppBarNavIcon, VIcon} from "vuetify/components";
+    import router from "@/router";
+    const props = defineProps(["value", "focus", "refresh"])
+
+    function search() {
+        router.push(`/search/${document.getElementById("searchText").value}`)
+            .then(() => {
+                props.refresh === true ? location.reload() : null
+            })
+    }
+
+    function close() {
+        let searchField = document.getElementById("searchText")
+        if (searchField.value.length < 1) {
+            router.push("/")
+        }
+        else {
+            searchField.value = ""
+            searchField.focus()
+        }
+    }
+</script>
+
+<template>
+    <v-app-bar :elevation="2" color="blue-darken-2">
+        <v-app-bar-title>
+            <form @submit.prevent="search">
+                <input id="searchText" :value="value" placeholder="جستجو میان هزاران فیلم و سریال" :autofocus="focus" autocomplete="off">
+            </form>
+        </v-app-bar-title>
+        <v-app-bar-nav-icon @click="close"><v-icon>mdi-close</v-icon></v-app-bar-nav-icon>
+    </v-app-bar>
+</template>
+
+<style scoped>
+input {
+    font-size: 16px;
+    width: 100vw;
+    outline: none;
+    padding: 15px;
+    color: white;
+    background-color: transparent !important;
+}
+::placeholder {
+    color: white;
+    opacity: 80%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
deleted file mode 100644
index aa7bf11..0000000
--- a/src/components/SearchBox.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup>
-import router from "@/router";
-
-const props = defineProps(["text", "refresh"])
-
-function search() {
-    router.push(`/search/${document.getElementById("searchText").value}`)
-        .then(() => {
-            if (props.refresh) location.reload()
-        })
-}
-</script>
-
-<template>
-    <form @submit.prevent="search">
-        <div>
-            <input type="text" id="searchText" placeholder="چی میخوای ببینی؟" :value="props.text">
-        </div>
-    </form>
-</template>
-
-<style scoped>
-div {
-    width: 80vw;
-    background: white;
-    box-shadow: #ddd 0 0 4px 1px;
-    border-radius: 10px;
-    padding: 12px;
-}
-
-input {
-    width: 100%;
-    background: transparent;
-    border: none;
-    outline: none;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/TheButton.vue b/src/components/TheButton.vue
deleted file mode 100644
index 17eb3a9..0000000
--- a/src/components/TheButton.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup>
-    import {defineSlots} from "vue";
-    const slots = defineSlots();
-    const props = defineProps(["url"])
-    const slot = slots.default()[0].children
-</script>
-
-<template>
-    <a :href="url">
-        <button>{{ slot }}</button>
-    </a>
-</template>
-
-<style scoped>
-    button {
-        margin: 2px;
-        background: royalblue;
-        border: none;
-        border-radius: 5px;
-        padding: 10px;
-        color: white;
-        cursor: pointer;
-        width: auto;
-    }
-</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 737427e..f349411 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,3 @@
-import './assets/main.css'
-
 import { createApp } from 'vue/dist/vue.esm-bundler.js'
 import router from "@/router";
 
@@ -9,6 +7,9 @@ import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
+import '@mdi/font/css/materialdesignicons.css'
+import './assets/main.css'
+
 const vuetify = createVuetify({
     components,
     directives,
diff --git a/src/router.js b/src/router.js
index 83e0fb7..cce423c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,10 +4,14 @@ import {createRouter, createWebHistory} from "vue-router";
 // components
 import App from "@/App.vue";
 import Result from "@/components/Result.vue";
+import Search from "@/components/Search.vue";
 import NotFound from "@/components/NotFound.vue";
+import Movie from "@/components/Movie.vue";
 
 const routes = [
     { path: "/", component: App },
+    { path: "/movie", component: Movie },
+    { path: "/search", component: Search },
     { path: "/search/:query", component: Result },
     { path: '/:pathMatch(.*)*', component: NotFound },
 ]
diff --git a/vite.config.js b/vite.config.js
index 5c45e1d..63358b6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,5 +12,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  }
+  },
+    optimizeDeps: {
+        exclude: ['js-big-decimal']
+    }
 })