diff --git a/src/components/BrowseQuizes.vue b/src/components/BrowseQuizes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d1ebb420ead2224ca785d48f89fd7750ed49347d
--- /dev/null
+++ b/src/components/BrowseQuizes.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+
+const Quizzes = [0,1,2,8,4,5,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
+
+</script>
+
+<template>
+  <div id = "QuizzesView">
+    <h1 id = "QuizzesTitle">Quizzes</h1>
+    <div id = "Tools">
+      <input id = "TagSearchBar" type = "text" placeholder="Tags:" />
+      <div id = "PageTool">
+        <button id = "LeftButton"></button>
+        <input id = "PageView"/>
+        <button id = "RightButton"></button>
+      </div>
+    </div>
+    <ul class = "item-list">
+      <li v-for="(Quiz, index) in Quizzes" :key="index">
+        <div id = "QuizInfo">
+          <button class="QuizButton">Thumbnail Placeholder</button>
+          <h1 id = "QuizTitle">Title</h1>
+          <h1 id = QuizDescription>Description</h1>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+
+#QuizzesView{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#Tools{
+  max-width: 100vw;
+  display: flex;
+  align-items: center;
+}
+
+#LeftButton, #RightButton{
+  height: 4vh;
+  width: 4vh;
+  vertical-align: middle;
+}
+
+#PageView{
+  height: 4vh;
+  width: 4vh;
+  max-width: 4vh;
+  text-align: center;
+}
+
+#PageTool{
+  margin: 2vh;
+}
+
+
+#QuizzesTitle{
+  text-decoration: underline;
+  margin: 2vh;
+}
+
+#TagSearchBar{
+  width: 60vw;
+  height: 5vh;
+}
+
+.item-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.item-list li {
+  flex-basis: 20%; /* 5 items per row */
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.QuizButton{
+  background-image: url("../assets/Brick.png");
+  height: 11vh;
+  color: var(--color-text-light);
+}
+
+
+#QuizTitle{
+  font-size: 2vh;
+  font-weight: 700;
+}
+
+#QuizDescription{
+  font-size: 2vh;
+}
+
+#QuizInfo{
+  margin: 2vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 9aef6c0acb427e7b0fef14ed0a0057daba1ccd59..5604bff9e12f10c7595615713108c1a8c35672a9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -26,7 +26,7 @@ const router = createRouter({
     },
     {
       path: '/BrowseMyQuizes',
-      name: "BrowseQuizes",
+      name: "BrowseMyQuizes",
       component: () => import('../views/BrowseMyQuizesView.vue')
     },
     {
diff --git a/src/views/BrowseMyQuizesView.vue b/src/views/BrowseMyQuizesView.vue
index 1a74912e879d0a4f1aa6acdfdaa591519d17d089..ac2d73174a87837f46e1c8f205edb0a52b6ca6d2 100644
--- a/src/views/BrowseMyQuizesView.vue
+++ b/src/views/BrowseMyQuizesView.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 
+import BrowseQuizes from '@/components/BrowseQuizes.vue'
+import PageFooter from '@/components/PageFooter.vue'
 </script>
 
 <template>
-  <main></main>
+  <main>
+    <BrowseQuizes></BrowseQuizes>
+    <PageFooter></PageFooter>
+  </main>
 </template>
 
 <style scoped>
diff --git a/src/views/BrowseQuizView.vue b/src/views/BrowseQuizView.vue
index 1a74912e879d0a4f1aa6acdfdaa591519d17d089..537e815db0c2ec1f86900bcaacb16ca64df88920 100644
--- a/src/views/BrowseQuizView.vue
+++ b/src/views/BrowseQuizView.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 
+import BrowseQuizes from '@/components/BrowseQuizes.vue'
+import PageFooter from '@/components/PageFooter.vue'
+
 </script>
 
 <template>
-  <main></main>
+  <main>
+    <BrowseQuizes/>
+    <PageFooter />
+  </main>
 </template>
 
 <style scoped>