diff --git a/src/components/AddProgram/Main.vue b/src/components/AddProgram/Main.vue
new file mode 100644
index 0000000..469a1dc
--- /dev/null
+++ b/src/components/AddProgram/Main.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="h-100">
+    <main-back height="100%">
+      <div class="py-12 px-10">
+        <div>
+          <SectionTitle
+            backText="my programs"
+            link="programs"
+            icon="WMi-left-open"
+            title="add new program"
+            subTitle="what we perpared for people"
+          />
+        </div>
+        <v-row class="mt-4">
+          <v-col cols="3">
+            <div class="h-100">
+              <div class="add__workout dark w-100 h-100">
+                <div class="add__workout__picture d-flex align-center">
+                  <i class="WMi-picture add__workout__picture--icon"></i>
+                  <div class="add__workout__picture--text">
+                    select a cover image
+                  </div>
+                </div>
+              </div>
+            </div>
+          </v-col>
+          <v-col cols="9">
+            <v-row>
+              <v-col cols="4"
+                ><v-text-field
+                  placeholder="product name"
+                  label="product name"
+                  class="no-error-msg pt-0 mt-0"
+                  dark
+                ></v-text-field>
+              </v-col>
+              <v-col cols="8"
+                ><v-text-field
+                  placeholder="a short quote"
+                  label="a short quote"
+                  class="no-error-msg pt-0 mt-0"
+                  dark
+                ></v-text-field
+              ></v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-textarea
+                  rows="5"
+                  label="description"
+                  placeholder="description"
+                  dark
+                ></v-textarea>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+        <v-divider dark></v-divider>
+        <v-row>
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="12">
+                <v-autocomplete
+                  class="pt-0 multiple"
+                  :items="items"
+                  item-value="id"
+                  item-text="name"
+                  attach
+                  :append-icon="null"
+                  chips
+                  label="product tags - useful for better search"
+                  placeholder="product tags - useful for better search"
+                  multiple
+                  dark
+                >
+                  <template #selection="{ item }">
+                    <v-chip label small color="white" text-color="black">{{
+                      item.name
+                    }}</v-chip>
+                  </template>
+                </v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+        <div class="mt-2">
+          <v-divider dark class="mb-2"></v-divider>
+          <div class="d-flex justify-space-between">
+            <RectangleButton
+              text="I’VE CHANGED MY MIND"
+              icon="WMi-cancel"
+              class="px-0"
+              height="19"
+            />
+            <RectangleButton
+              text="add the product"
+              class="custom-btn add-btn"
+              height="25"
+            />
+          </div>
+        </div>
+      </div>
+    </main-back>
+  </div>
+</template>
+<script>
+import SectionTitle from "../Global/Section/SectionTitle.vue";
+export default {
+  components: {
+    SectionTitle,
+  },
+  data: () => ({
+    items: [
+      {
+        id: 1,
+        name: "fkskad",
+      },
+      {
+        id: 2,
+        name: "dasf",
+      },
+    ],
+  }),
+};
+</script>
+<style  scoped>
+.add__workout,
+.upload {
+  border: 1px dotted var(--color-gray) !important;
+  position: relative;
+}
+.add-btn {
+  padding-right: 100px !important;
+  padding-left: 100px !important;
+}
+.add__workout__picture {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.add__workout__picture--text {
+  width: max-content;
+  line-height: 18px;
+  text-transform: uppercase;
+}
+.add__workout__picture--icon {
+  font-size: 40px;
+  margin-right: 20px;
+}
+.upload {
+  height: 148px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/AddProgram/Sections.vue b/src/components/AddProgram/Sections.vue
new file mode 100644
index 0000000..0807536
--- /dev/null
+++ b/src/components/AddProgram/Sections.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="h-100">
+    <main-back height="100%">
+      <div class="mt-16">
+        <ul class="pl-0 ml-0">
+          <MenuItem text="Home" />
+          <MenuItem text="my profile" />
+          <MenuItem :active="true" text="my programs" />
+          <MenuItem text="my trainee" />
+          <MenuItem text="my bookmarks" />
+          <MenuItem text="products" />
+          <MenuItem text="admins" />
+          <MenuItem text="traniners" />
+          <MenuItem text="workouts" />
+        </ul>
+      </div>
+    </main-back>
+  </div>
+</template>
+<script>
+import MenuItem from "../Global/Section/MenuItem.vue";
+export default {
+  components: {
+    MenuItem,
+  },
+};
+</script>
diff --git a/src/components/Bookmarks/Main.vue b/src/components/Bookmarks/Main.vue
index 24bd874..725676e 100644
--- a/src/components/Bookmarks/Main.vue
+++ b/src/components/Bookmarks/Main.vue
@@ -16,9 +16,8 @@
         <v-row class="mt-4">
           <v-col cols="12">
             <v-tabs color="white" v-model="tab" centered slider-color="white">
-              <v-tab class="bookmarks__tab" v-for="i in 2" :key="i">
-                Item {{ i }}
-              </v-tab>
+              <v-tab class="bookmarks__tab">programs</v-tab>
+              <v-tab class="bookmarks__tab">workouts</v-tab>
             </v-tabs>
             <v-tabs-items v-model="tab">
               <v-tab-item>
diff --git a/src/components/Products/Main.vue b/src/components/Products/Main.vue
index 772858e..0f99092 100644
--- a/src/components/Products/Main.vue
+++ b/src/components/Products/Main.vue
@@ -13,7 +13,10 @@
             />
           </div>
           <div>
-            <router-link :to="{ name: 'addProduct' }">
+            <router-link
+              :to="{ name: 'addProduct' }"
+              class="text-decoration-none"
+            >
               <RectangleButton
                 icon="WMi-plus"
                 class="custom-btn"
@@ -24,7 +27,12 @@
           </div>
         </div>
         <v-row class="mt-4">
-          <v-col cols="12" sm="4" v-for="(product, i) in products" :key="i" class="mb-3"
+          <v-col
+            cols="12"
+            sm="4"
+            v-for="(product, i) in products"
+            :key="i"
+            class="mb-3"
             ><ProductItem :product="product"
           /></v-col>
         </v-row>
diff --git a/src/components/Programs/Main.vue b/src/components/Programs/Main.vue
index dacfbd2..08a1f06 100644
--- a/src/components/Programs/Main.vue
+++ b/src/components/Programs/Main.vue
@@ -20,14 +20,20 @@
               size="x-large"
               :text-mode="true"
               text="2"
+              @click.native="$_openModal('filters')"
             />
-            <RectangleButton
-              icon="WMi-plus"
-              size="xx-large"
-              class="custom-btn custom-icon"
-              height="54"
-              :text-mode="true"
-            />
+            <router-link
+              :to="{ name: 'addProgram' }"
+              class="text-decoration-none"
+            >
+              <RectangleButton
+                icon="WMi-plus"
+                size="xx-large"
+                class="custom-btn custom-icon"
+                height="54"
+                :text-mode="true"
+              />
+            </router-link>
           </div>
         </div>
         <v-row class="mt-4">
@@ -42,6 +48,9 @@
         </v-row>
       </div>
     </main-back>
+    <div class="text-center">
+      <FiltersModal />
+    </div>
   </div>
 </template>
 <script>
@@ -49,6 +58,7 @@ import FirstImage from "../../assets/4070873.jpg";
 import SecondImage from "../../assets/a-bodybuilder-exhibits-his-muscular-physique-1024-768-0.jpg";
 import ThirdImage from "../../assets/5595849.jpg";
 import FourthImage from "../../assets/28-284379_photo-wallpaper-man-workout-gym-working-gym-workout.jpg";
+import FiltersModal from "./Modals/FiltersModal.vue";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ProgramItem from "./Item.vue";
 import { mapGetters, mapActions } from "vuex";
@@ -56,6 +66,7 @@ export default {
   components: {
     SectionTitle,
     ProgramItem,
+    FiltersModal,
   },
   computed: {
     ...mapGetters("programs", ["getPrograms"]),
diff --git a/src/components/Programs/Modals/FiltersModal.vue b/src/components/Programs/Modals/FiltersModal.vue
new file mode 100644
index 0000000..9bbeea2
--- /dev/null
+++ b/src/components/Programs/Modals/FiltersModal.vue
@@ -0,0 +1,93 @@
+<template>
+  <basic-modal width="458" transition="slide-x-transition">
+    <template #header>
+      <div class="close__modal">
+        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+      </div>
+    </template>
+    <template #default>
+      <div>
+        <SectionTitle
+          title="filters"
+          subTitle="let us help in your search"
+          :is-modal="true"
+        />
+      </div>
+      <div class="mt-4 mb-10">
+        <div class="my-6">
+          <div>
+            <v-text-field
+              class="no-error-msg"
+              placeholder="course name"
+              label="course name"
+            ></v-text-field>
+          </div>
+        </div>
+        <div class="my-6">
+          <div>
+            <v-text-field
+              class="no-error-msg pt-0"
+              placeholder="mentor name"
+              label="mentor name"
+            ></v-text-field>
+          </div>
+        </div>
+        <div class="my-6">
+          <div>
+            <v-autocomplete
+              class="no-error-msg pt-0"
+              placeholder="status"
+              label="status"
+            ></v-autocomplete>
+          </div>
+        </div>
+        <div class="my-6">
+          <div>
+            <DateInput class="no-error-msg" label="date, after" />
+          </div>
+        </div>
+        <div class="my-6">
+          <div>
+            <DateInput class="no-error-msg" label="date, before" />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <v-spacer></v-spacer>
+      <div class="d-flex justify-space-between align-items-center w-100">
+        <RectangleButton
+          class="btn__modal--cancel pl-0"
+          text="cancel"
+          icon="WMi-cancel-1"
+          text-mode="text"
+          size="large"
+          :is-modal="true"
+          height="29"
+          @click.native="$_closeModal()"
+        />
+        <RectangleButton
+          height="29"
+          class="btn__modal--execute custom-btn wa__f__m__eb"
+          text="execute"
+          icon="WMi-filter"
+        />
+      </div>
+    </template>
+  </basic-modal>
+</template>
+<script>
+import SectionTitle from "../../Global/Section/SectionTitle.vue";
+export default {
+  name: "modal_filters",
+  components: { SectionTitle },
+};
+</script>
+<style scoped>
+.close__modal {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/path.js b/src/router/path.js
index 5bf8e7e..3611e95 100644
--- a/src/router/path.js
+++ b/src/router/path.js
@@ -44,6 +44,11 @@ export default [
         view: 'Workouts',
         name: 'workouts'
     },
+    {
+        path: '/add-program',
+        view: 'AddProgram',
+        name: 'addProgram'
+    },
     {
         path: '/add-workout',
         view: 'AddWorkout',
diff --git a/src/views/AddProgram.vue b/src/views/AddProgram.vue
new file mode 100644
index 0000000..5af07d1
--- /dev/null
+++ b/src/views/AddProgram.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-container fluid>
+    <header class="pt-3">
+      <v-row>
+        <v-col cols="12">
+          <site-header></site-header>
+        </v-col>
+      </v-row>
+    </header>
+    <main class="pb-10 mt-5">
+      <div>
+        <v-row>
+          <v-col cols="2">
+            <AddProgramSections />
+          </v-col>
+          <v-col cols="10">
+            <AddProgram />
+          </v-col>
+        </v-row>
+      </div>
+    </main>
+  </v-container>
+</template>
+<script>
+import AddProgram from "../components/AddProgram/Main";
+import AddProgramSections from "../components/AddProgram/Sections";
+export default {
+  components: {
+    AddProgram,
+    AddProgramSections,
+  },
+};
+</script>
\ No newline at end of file