diff --git a/client/package.json b/client/package.json
index 4f9b854..6d35f26 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
+    "axios": "^1.7.3",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 934564f..0b072a9 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@mdi/font':
         specifier: 7.4.47
         version: 7.4.47
+      axios:
+        specifier: ^1.7.3
+        version: 1.7.3
       core-js:
         specifier: ^3.37.1
         version: 3.37.1
@@ -666,10 +669,16 @@ packages:
     resolution: {integrity: sha512-0ZdQEsSfH3mX4BFbRCc3xOBjx5bDbm73+aAdQOHerPQNf8K0XFMAv79ucd2BpnSc4UMyvBDixiroT8yjm2Y6bw==}
     engines: {node: '>=16.14.0'}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
+  axios@1.7.3:
+    resolution: {integrity: sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==}
+
   babel-eslint@10.1.0:
     resolution: {integrity: sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==}
     engines: {node: '>=6'}
@@ -737,6 +746,10 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   computeds@0.0.1:
     resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
 
@@ -804,6 +817,10 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1048,9 +1065,22 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
+  form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1331,6 +1361,14 @@ packages:
     resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1474,6 +1512,9 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2443,10 +2484,20 @@ snapshots:
       '@babel/parser': 7.24.8
       ast-kit: 0.12.2
 
+  asynckit@0.4.0: {}
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.0.0
 
+  axios@1.7.3:
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   babel-eslint@10.1.0(eslint@8.57.0):
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -2529,6 +2580,10 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   computeds@0.0.1: {}
 
   concat-map@0.0.1: {}
@@ -2589,6 +2644,8 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  delayed-stream@1.0.0: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -2979,10 +3036,18 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  follow-redirects@1.15.6: {}
+
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
 
+  form-data@4.0.0:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -3248,6 +3313,12 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -3383,6 +3454,8 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
index dea7a34..d0ad7ea 100644
--- a/client/src/api/axios.ts
+++ b/client/src/api/axios.ts
@@ -1,17 +1,52 @@
-import axios, { AxiosInstance } from 'axios';
+import axios, { AxiosInstance } from 'axios'
 
 const AuthClient: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_APP_ENDPOINT, 
+  baseURL: import.meta.env.VITE_APP_ENDPOINT,
   timeout: 1000,
   headers: {
     'Content-Type': 'application/json',
-    'Authorization': 'Bearer ' + localStorage.getItem("token"),
+    Authorization: 'Bearer ' + localStorage.getItem('token'),
   },
-});
+})
 
 const BaseClient: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_APP_ENDPOINT,
   timeout: 1000,
-});
+})
+
+async function GetPlans (projectId:any) {
+  try {
+    await AuthClient.get(`/test_plan/${projectId}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function CreateNewTestSuite (testSuiteDetails: any, projectId:any) {
+  try {
+    await AuthClient.post(`/test_suites/${projectId}/`, testSuiteDetails)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+async function GetTestSuites (projectId:any) {
+  try {
+    return await AuthClient.get(`/test_suites/${projectId}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function SearchSuite (projectId:any, keyWord:any) {
+  try {
+    await AuthClient.get(`/test_suites/${projectId}/search/${keyWord}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
 
-export { AuthClient, BaseClient };
+export default { AuthClient, BaseClient, GetPlans, CreateNewTestSuite, GetTestSuites, SearchSuite }
diff --git a/client/src/components.d.ts b/client/src/components.d.ts
index 1898766..38f6260 100644
--- a/client/src/components.d.ts
+++ b/client/src/components.d.ts
@@ -7,8 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    NewTestSuite: typeof import('./components/NewTestSuite.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Test: typeof import('./components/test.vue')['default']
diff --git a/client/src/components/NewTestSuite.vue b/client/src/components/NewTestSuite.vue
new file mode 100644
index 0000000..0c65f72
--- /dev/null
+++ b/client/src/components/NewTestSuite.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="text-center pa-4">
+    <!-- this is just to be replaced later on with the + button on click , it opens the dialog.. -->
+    <v-btn @click="dialog = true">
+      Open Dialog
+    </v-btn>
+
+    <v-dialog v-model="dialog" max-width="600px">
+      <v-card>
+        <v-card-title>New Test Suite</v-card-title>
+        <v-divider />
+        <br>
+        <v-card-subtitle>
+          <div>
+            <strong>Title</strong>
+            <v-text-field v-model="details.title" placeholder="Enter title " />
+          </div>
+          <div>
+            <strong>Test Plan</strong>
+            <v-select v-model="details.test_plan" :items="plans" label="Select Plan" />
+          </div>
+        </v-card-subtitle>
+        <v-divider />
+        <v-card-actions>
+          <v-btn color="info" @click="dialog = false">Close</v-btn>
+          <v-btn color="success" @click="createTestSuite">Create</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+  import axios from '@/api/axios'
+  import { onMounted } from 'vue'
+
+  export default {
+    setup () {
+      const dialog = ref(false)
+      const details = ref({
+        title: '',
+        test_plan: null,
+      })
+
+      const plans = ref([])
+
+      // from where to get the project id???
+      const fetchPlans = async () => {
+        try {
+          plans.value = await axios.GetPlans(projectId)
+        } catch (error) {
+          console.error(error)
+        }
+      }
+
+      const createTestSuite = async () => {
+        try {
+          await axios.CreateNewTestSuite(details, projectId)
+          notifier.notify({
+            title: 'success',
+            description: 'test suite created successfully',
+            showProgressBar: true,
+            timeout: 7_000,
+            type: 'success',
+          })
+        } catch (error) {
+          console.error(error)
+          notifier.notify({
+            title: 'Fail',
+            description: 'Failed to create test suite',
+            showProgressBar: true,
+            timeout: 7_000,
+            type: 'error',
+          })
+        }
+      }
+
+      onMounted(() => {
+        fetchPlans()
+      })
+
+      return {
+        dialog,
+        details,
+        plans,
+        createTestSuite,
+        fetchPlans,
+      }
+    },
+  }
+</script>
diff --git a/client/src/pages/AddTestSuite.vue b/client/src/pages/AddTestSuite.vue
new file mode 100644
index 0000000..3318a8c
--- /dev/null
+++ b/client/src/pages/AddTestSuite.vue
@@ -0,0 +1,82 @@
+<template>
+    <div style="margin-left: 7cm; margin-right: 7cm;">
+        <v-container>
+            <v-row >
+                <p class="mt-2 text-h4 text-blue-darken-4" variant="h5">Test Suites</p>
+                <v-spacer></v-spacer>
+            </v-row>
+
+            <v-row>
+                <p class="mt-2 text-h6 text-grey-darken-2 mb-8" variant="h6">There are {{ count }} Test Suite</p>
+            </v-row>
+            <br>
+
+            <v-row>
+                <h4  class="mb-2">Search Suites</h4>
+            </v-row>
+
+            <v-row>
+                <v-text-field v-model="searchText" label="Search" variant="outlined"></v-text-field>
+                <v-btn color="primary" variant="outlined" @click="SearchSuite"  style="height: 56px; width:80px; padding: 0; margin: 0;">Search</v-btn>
+            </v-row>
+
+            <v-row>
+                <v-col v-for="suite in testSuites" :key="suite.id" cols="12" sm="6" md="4">
+                    <v-card class="ma-2" outlined>
+                        <v-card-title @click="viewSuite(suite.id)">{{ suite.title }}</v-card-title>
+                        <v-card-subtitle>
+                            Created: {{ suite.created }}
+                            Updated: {{ suite.modified }}
+                            Number of Test Cases: {{ suite.number_of_test_cases }}
+                        </v-card-subtitle>
+                        <v-card-actions>
+                        </v-card-actions>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script>
+import axios from '@/api/axios';
+import { onMounted } from 'vue';
+
+export default{
+    setup(){
+        //projectid testsuite .count
+        const count = ref(0);
+        const searchText = ref('');
+        const testSuites = ref([]);
+
+        const SearchSuite = async () => {
+            try {
+                testSuites.value=await axios.SearchSuite(projectId,searchText)
+            } catch (error) {
+                console.error(error);
+            }
+        };
+
+        //from where to get the project id?
+        const getSuites = async () => {
+            try {
+                testSuites.value=await axios.GetTestSuites(projectId)
+            } catch (error) {
+                console.error(error);
+            }
+        };
+
+        onMounted(() => {
+        getSuites();
+        });
+
+        return{
+            count,
+            searchText,
+            testSuites,
+            getSuites,
+            SearchSuite
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/client/src/plugins/vuetify.ts b/client/src/plugins/vuetify.ts
index 7652788..46ece96 100644
--- a/client/src/plugins/vuetify.ts
+++ b/client/src/plugins/vuetify.ts
@@ -14,6 +14,6 @@ import { createVuetify } from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    defaultTheme: 'light',
   },
 })
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 2f9d03c..93a8ac0 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -10,7 +10,7 @@ import { createRouter, createWebHistory } from 'vue-router/auto'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: '/', component: () => import('@/pages/DashboardView.vue') }
+    { path: '/', component: () => import('@/pages/AddTestSuite.vue') }
   ],
 })
 
diff --git a/client/src/typed-router.d.ts b/client/src/typed-router.d.ts
index 3b75a53..a85d431 100644
--- a/client/src/typed-router.d.ts
+++ b/client/src/typed-router.d.ts
@@ -18,6 +18,7 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
+    '/AddTestSuite': RouteRecordInfo<'/AddTestSuite', '/AddTestSuite', Record<never, never>, Record<never, never>>,
     '/DashboardView': RouteRecordInfo<'/DashboardView', '/DashboardView', Record<never, never>, Record<never, never>>,
   }
 }