diff --git a/backend/spielberg/entrypoint/api/routes.py b/backend/spielberg/entrypoint/api/routes.py
index d5cca87..a9f4552 100644
--- a/backend/spielberg/entrypoint/api/routes.py
+++ b/backend/spielberg/entrypoint/api/routes.py
@@ -12,7 +12,7 @@
 config_bp = Blueprint("config", __name__, url_prefix="/config")
 
 
-@agent_bp.route("", methods=["GET"])
+@agent_bp.route("/", methods=["GET"])
 def agent():
     """
     Handle the agent request
@@ -23,7 +23,7 @@ def agent():
     return chat_handler.agents_list()
 
 
-@session_bp.route("", methods=["GET"])
+@session_bp.route("/", methods=["GET"])
 def get_sessions():
     """
     Get all the sessions
diff --git a/frontend/index.html b/frontend/index.html
index 6f99f7b..f6d850b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.png" />
-    <title>Chat With Video</title>
+    <title>Spielberg</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png
index 8871efc..d97dcf2 100644
Binary files a/frontend/public/favicon.png and b/frontend/public/favicon.png differ
diff --git a/frontend/public/icons/ai_sparkle.png b/frontend/public/icons/ai_sparkle.png
deleted file mode 100644
index 5bc2f0b..0000000
Binary files a/frontend/public/icons/ai_sparkle.png and /dev/null differ
diff --git a/frontend/src/components/atoms/Avatar.vue b/frontend/src/components/atoms/Avatar.vue
deleted file mode 100644
index 71e8fbe..0000000
--- a/frontend/src/components/atoms/Avatar.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div
-    :class="`${className}`"
-    :style="{
-      width: `${size}px`,
-      height: `${size}px`,
-      minWidth: `${size}px`,
-    }"
-  >
-    <img
-      v-if="src && src !== ''"
-      :src="src"
-      :class="`h-full w-full min-w-full rounded-${rounded}`"
-    />
-    <div
-      v-else
-      class="flex items-center justify-center text-white"
-      :style="{ background: stringToHslColor(name) }"
-      :class="`h-full w-full min-w-full rounded-${rounded}`"
-    >
-      {{ name.charAt(0) }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Avatar',
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    className: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: '60',
-    },
-    rounded: {
-      type: String,
-      default: 'full',
-    },
-  },
-  computed: {
-    backgroundImage() {
-      return `url("${this.src}")`
-    },
-  },
-  methods: {
-    stringToHslColor(str, s = 80, l = 35) {
-      let hash = 0
-      for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash)
-      }
-
-      hash = hash % 360
-      return 'hsl(' + hash + ', ' + s + '%, ' + l + '%)'
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/atoms/Button.vue b/frontend/src/components/atoms/Button.vue
deleted file mode 100644
index 6a61e3b..0000000
--- a/frontend/src/components/atoms/Button.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <button
-    :type="type"
-    :class="computedClass"
-    :disabled="variant === 'disabled'"
-    @click="emitClick()"
-  >
-    <slot />
-  </button>
-</template>
-
-<script>
-import { buttonTheme as theme } from "./theme";
-
-export default {
-  props: {
-    type: {
-      type: String,
-      default: "button",
-    },
-    onClick: {
-      type: Function,
-      default: () => null,
-    },
-    size: {
-      type: String,
-      default: "normal",
-    },
-    variant: {
-      type: String,
-      default: "primary",
-    },
-    classname: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    computedClass() {
-      return [
-        "base",
-        theme.base,
-        theme.sizes[this.size],
-        theme.variants[this.variant],
-        this.classname,
-      ];
-    },
-  },
-  methods: {
-    emitClick() {
-      this.onClick();
-      this.$emit("click");
-    },
-  },
-};
-</script>
-
-<style scoped lang="css">
-.base {
-  letter-spacing: 0.04em;
-}
-</style>
diff --git a/frontend/src/components/atoms/IconButton.vue b/frontend/src/components/atoms/IconButton.vue
deleted file mode 100644
index 8c5aab3..0000000
--- a/frontend/src/components/atoms/IconButton.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <button
-    :type="type"
-    :class="computedClass"
-    :disabled="variant === 'disabled'"
-    @click="emitClick()"
-  >
-    <slot />
-  </button>
-</template>
-
-<script>
-import { iconbuttonTheme as theme } from './theme'
-
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'button',
-    },
-    onClick: {
-      type: Function,
-      default: () => null,
-    },
-    size: {
-      type: String,
-      default: 'normal',
-    },
-    variant: {
-      type: String,
-      default: 'normal',
-    },
-    classname: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    computedClass() {
-      return [
-        theme.base,
-        theme.sizes[this.size],
-        theme.variants[this.variant],
-        'iconbutton',
-        this.classname,
-      ]
-    },
-  },
-  methods: {
-    emitClick() {
-      this.onClick()
-      this.$emit('click')
-    },
-  },
-}
-</script>
-
-<style>
-</style>
diff --git a/frontend/src/components/atoms/theme.js b/frontend/src/components/atoms/theme.js
deleted file mode 100644
index c9aab51..0000000
--- a/frontend/src/components/atoms/theme.js
+++ /dev/null
@@ -1,32 +0,0 @@
-export const iconbuttonTheme = {
-    base: `inline-flex items-center justify-center focus:outline-none`,
-    sizes: {
-      small: `p-1 rounded-2 text-xl leading-5`,
-      normal: `p-1 rounded-8 text-xl leading-5`,
-      large: `p-2 rounded-xl text-2xl leading-5`,
-    },
-    variants: {
-      normal: `border border-transparent hover:border-kilvish-200 hover:bg-kilvish-200 active:border-kilvish-200 active:bg-kilvish-200 text-kilvish`,
-      bordered: `border border-kilvish-300 hover:bg-kilvish-200 active:border-kilvish-200 active:bg-kilvish-200 text-kilvish`,
-      disabled: `border hover:border-kilvish-200 text-kilvish-400 cursor-default`,
-      active: `border border-kilvish bg-kilvish text-white shadow-key`,
-    },
-  }
-  
-  export const buttonTheme = {
-    base: `inline-flex items-center focus:outline-none font-medium uppercase`,
-    sizes: {
-      small: `px-10 py-6 rounded-6 text-captionsm`,
-      normal: `px-12 py-8 rounded-8 text-xs`,
-      large: `px-14 py-12 rounded-xl text-base`,
-    },
-    variants: {
-      primary: `border border-kilvish text-white bg-kilvish hover:border-kilvish-900 hover:bg-kilvish-900 focus:border-kilvish-800 focus:bg-kilvish-800`,
-      secondary: `text-kilvish border border-kilvish-300 hover:border-kilvish-200 hover:bg-kilvish-200 active:border-kilvish-300 active:bg-kilvish-300`,
-      success: `border border-green text-white bg-green hover:border-green-600 hover:bg-green-600 focus:border-green-700 focus:bg-green-700`,
-      disabled: `border border-kilvish-200 text-kilvish-500 bg-kilvish-200 cursor-default`,
-    },
-  }
-  
-  export default {}
-  
\ No newline at end of file
diff --git a/frontend/src/components/collection/AllVideos.vue b/frontend/src/components/collection/AllVideos.vue
deleted file mode 100644
index b7c6df0..0000000
--- a/frontend/src/components/collection/AllVideos.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="grid grid-cols-12 gap-24 sm:gap-32 mb-24 sm:mb-32">
-    <router-link
-      v-for="(item, index) in videoResults"
-      :key="`post-${item.id}`"
-      :to="`/${item.collection_id}/video/${item.id}`"
-      class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3"
-    >
-      <video-card
-        :item="item"
-        :border-b="true"
-        :index="index"
-        border-class="sm:hidden"
-      />
-    </router-link>
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from "vue";
-import VideoCard from "../video/VideoCard.vue";
-
-const props = defineProps({
-  videoResults: {
-    type: Array,
-    default: () => [],
-  },
-  chatToken: {
-    type: String,
-    default: "",
-  },
-});
-
-onMounted(() => {
-  console.log("VideoResults", props.videoResults);
-});
-</script>
\ No newline at end of file
diff --git a/frontend/src/components/collection/AllVideosLoader.vue b/frontend/src/components/collection/AllVideosLoader.vue
deleted file mode 100644
index fbe0c24..0000000
--- a/frontend/src/components/collection/AllVideosLoader.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="grid grid-cols-12 gap-24 sm:gap-32">
-    <div
-      v-for="(item, index) in [1, 2, 3, 4]"
-      :key="`post-loading-${index}`"
-      class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3"
-    >
-      <video-card-loader :index="index" />
-    </div>
-  </div>
-</template>
-
-<script>
-
-import VideoCardLoader from '../video/VideoCardLoader.vue'
-export default {
-  name: 'AllVideoLoader',
-  components:{
-    VideoCardLoader,
-  }
-}
-</script>
diff --git a/frontend/src/components/collection/CollectionProfile.vue b/frontend/src/components/collection/CollectionProfile.vue
deleted file mode 100644
index 54b08e8..0000000
--- a/frontend/src/components/collection/CollectionProfile.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div
-    class="flex flex-row"
-    :class="{
-      'gap-12 sm:gap-42 items-start': variant === 'large',
-      'gap-16 sm:gap-25 items-center': variant === 'small',
-    }"
-  >
-    <avatar
-      class-name="text-title"
-      :name="collectionName"
-      :src="collectionImage"
-      :size="variant === 'small' ? '60' : '136'"
-      rounded="12"
-      class="hidden sm:block"
-    />
-
-    <avatar
-      class-name="text-title"
-      :name="collectionName"
-      :src="collectionImage"
-      :size="variant === 'small' ? '60' : '100'"
-      rounded="12"
-      class="block sm:hidden"
-    />
-
-    <div
-      class="flex items-start justify-start"
-      :class="{
-        'flex-row gap-10': variant === 'small',
-        'flex-col gap-4 sm:gap-10': variant === 'large',
-      }"
-    >
-      <a
-        :href="collectionShareUrl"
-        class="text-textdark font-bold leading-[1.375rem]"
-        :class="{
-          'text-subheader2 sm:text-heading2': variant === 'small',
-          'text-subheader2 sm:text-display4 mt-8': variant === 'large',
-        }"
-      >
-        {{ collectionName }}
-      </a>
-
-      <div
-        v-if="variant === 'large'"
-        class="relative flex flex-col gap-16 sm:gap-10"
-      >
-        <p
-          class="font-medium text-caption1 sm:text-body text-kilvish-200 sm:text-textmedium desc-markdown"
-          :class="{
-            'text-elip text-nowrap': !isSummaryExpanded,
-          }"
-          v-html="getMarkdownText(collectionDescription) || ''"
-        />
-      </div>
-
-      <div
-        v-else
-        class="flex flex-row text-center font-semibold sm:font-normal text-subheader2 sm:text-heading2 text-kilvish-300 sm:text-textdark gap-3 sm:gap-6"
-      >
-        <p>/</p>
-        <p
-          class="text-subheader2 sm:text-heading2 text-kilvish-300 sm:text-textdark sm:opacity-50"
-        >
-          Search
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { marked } from "marked";
-import Avatar from "../atoms/Avatar.vue";
-
-export default {
-  name: "CollectionProfile",
-  components: {
-    Avatar,
-  },
-  props: {
-    collectionName: {
-      type: String,
-      required: true,
-    },
-    collectionImage: {
-      type: String,
-      required: true,
-    },
-    collectionDescription: {
-      type: String,
-      required: true,
-    },
-    collectionShareUrl: {
-      type: String,
-      required: true,
-    },
-    variant: {
-      type: String,
-      default: 'large',
-      validator: (value) => ['small', 'large'].includes(value)
-    },
-  },
-  data() {
-    return {
-      isSummaryExpanded: true,
-    };
-  },
-  methods: {
-    getMarkdownText(markdown) {
-      const mdown =
-        markdown.length > 180 ? markdown.substring(0, 180) + "..." : markdown;
-      return marked.parse(mdown);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.text-elip {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-@media (max-width: 640px) {
-  .text-elip {
-    -webkit-line-clamp: 3;
-  }
-}
-
-.desc-markdown li {
-  display: list-item;
-  list-style: disc;
-}
-
-.desc-markdown ul {
-  list-style-type: disc !important;
-}
-</style>
diff --git a/frontend/src/components/collection/CollectionProfileLoading.vue b/frontend/src/components/collection/CollectionProfileLoading.vue
deleted file mode 100644
index bd5dbf6..0000000
--- a/frontend/src/components/collection/CollectionProfileLoading.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div
-    class="flex flex-row items-center"
-    :class="{
-      'gap-42': props.variant !== 'small',
-      'gap-25': props.variant === 'small',
-    }"
-  >
-    <div
-      class="text-title rounded-12 animate-pulse bg-gray-300"
-      :class="{
-        'h-100 w-100 sm:h-182 sm:w-182': props.variant !== 'small',
-        'h-42 w-42': props.variant === 'small',
-      }"
-    />
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'large',
-    validator: (value) => ['small', 'large'].includes(value)
-  }
-});
-</script>
diff --git a/frontend/src/components/collection/SearchField.vue b/frontend/src/components/collection/SearchField.vue
deleted file mode 100644
index 9660c1a..0000000
--- a/frontend/src/components/collection/SearchField.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div class="w-full relative searchTopContainer" tabindex="1">
-    <form
-      autocomplete="off"
-      class="flex w-full max:w-512 relative items-center justify-between bg-kilvish-200 rounded-full pl-18 sm:pl-32 sm:pr-8 pr-4 border border-kilvish-200 transition-all"
-      :class="{
-        'border border-kilvish-300 shadow-searchbox': isInputFocused,
-      }"
-      @focus="onSearchFocus"
-      @blur="onSearchBlur"
-      @submit.prevent="onSearchSubmit"
-    >
-      <div class="flex flex-row items-center gap-18 sm:gap-28 w-full">
-        <search class="block w-30 h-30 transition-all text-black" />
-        <input
-          ref="searchBox"
-          :value="searchTerm"
-          class="appearance-none focus:outline-none text-textdark transition bg-gray-200 h-48 sm:h-56 focus:placeholder-kilvish-400 placeholder-kilvish-600 w-full"
-          name="searchvalue"
-          placeholder="Search or ask a question"
-          @input="onSearchChange"
-        />
-      </div>
-      <button
-        type="submit"
-        class="transition w-112 h-40 bg-primary hover:bg-primary-800 text-white rounded-full font-medium font-sans"
-      >
-        <span class="inline">Search</span>
-      </button>
-    </form>
-    <div
-      v-show="showSuggestions"
-      class="search-suggestion hidden transition-all"
-    >
-      <SearchSuggestions
-        :suggestions="suggestions"
-        @forceFocus="forceFocus"
-        @handleSearchChange="(e) => onSearchChange(e, true)"
-        @onSearch="onSearchSubmit"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, nextTick } from "vue";
-import Search from "../icons/Search.vue";
-import SearchSuggestions from './SearchSuggestions.vue'
-
-const props = defineProps({
-  searchTerm: {
-    type: String,
-    default: "",
-  },
-  suggestions: {
-    type: Object,
-    default: () => ({}),
-  }
-});
-
-const emit = defineEmits([
-  "setSearchField",
-  "onSearchSubmit",
-  "onSearchChange",
-]);
-
-const isInputFocused = ref(false);
-const searchBox = ref(null);
-
-const showSuggestions = computed(() => props.searchTerm === "");
-
-const forceFocus = () => {
-  searchBox.value.focus();
-  isInputFocused.value = true;
-};
-
-const onSearchFocus = () => {
-  nextTick(() => {
-    isInputFocused.value = true;
-  });
-};
-
-const onSearchBlur = () => {
-  nextTick(() => {
-    isInputFocused.value = false;
-  });
-};
-
-const clearInput = () => {
-  emit("setSearchField", "");
-  searchBox.value.focus();
-};
-
-const onSearchSubmit = () => {
-  emit("onSearchSubmit", props.searchTerm);
-};
-
-const onSearchChange = (event) => {
-  emit("onSearchChange", event.target.value);
-};
-</script>
-
-<style scoped>
-.searchTopContainer:focus-within .search-suggestion {
-  display: block;
-}
-</style>
diff --git a/frontend/src/components/collection/SearchSuggestions.vue b/frontend/src/components/collection/SearchSuggestions.vue
deleted file mode 100644
index 186bbe4..0000000
--- a/frontend/src/components/collection/SearchSuggestions.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div
-    class="absolute flex flex-col w-full rounded-16 bg-gray-200 mt-4 p-18 border border-kilvish-300 shadow-spextlg z-30"
-  >
-    <div
-      ref="suggestionBox"
-      class="px-10 max-h-200 sm:max-h-372 overflow-y-auto"
-    >
-      <div>
-        <div class="text-gray-450 text-caption18 uppercase">
-          Popular Searches in this collection
-        </div>
-        <div
-          v-for="(suggestion, index) in suggestions"
-          :key="`suggestion-pop-${index}`"
-          class="flex flex-row items-center gap-14 cursor-pointer hover:text-red text-caption1 py-8 border-b-2 border-kilvish-300 border-opacity-50"
-          @click="handleSuggestionClick(suggestion.text)"
-        >
-          <search class="hidden md:block h-16 w-16" />
-          {{ suggestion.text }}
-        </div>
-      </div>
-    </div>
-    <!-- <div class="absolute bottom-0 pb-30 py-4 w-full bg-gray-200"> -->
-    <!--   <div -->
-    <!--     class="absolute right-0 uppercase text-caption1 text-textdark font-semibold cursor-pointer pr-56 flex flex-row gap-12" -->
-    <!--   > -->
-    <!--     <div>See more</div> -->
-    <!--     <img src="/icons/anchor-down.svg" /> -->
-    <!--   </div> -->
-    <!-- </div> -->
-  </div>
-</template>
-
-<script>
-import Search from '../icons/Search.vue'
-export default {
-  name: 'SearchSuggestions',
-  components: {
-    Search,
-  },
-  props: {
-    suggestions: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  methods: {
-    handleSuggestionClick(text) {
-      this.$emit('handleSearchChange', {
-        target: { value: text },
-      })
-      this.$emit('onSearch')
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/icons/CommentLine.vue b/frontend/src/components/icons/CommentLine.vue
deleted file mode 100644
index eb01fd8..0000000
--- a/frontend/src/components/icons/CommentLine.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <svg
-    :class="className"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8.63099 2.5H11.6963C12.4477 2.49999 13.0539 2.49999 13.5472 2.53365C14.0545 2.56826 14.5031 2.64123 14.9278 2.81717C15.9488 3.24006 16.7599 4.0512 17.1828 5.07215C17.3588 5.4969 17.4317 5.94547 17.4663 6.45276C17.5 6.94609 17.5 7.55227 17.5 8.30373V8.36294C17.5 9.1144 17.5 9.72057 17.4663 10.2139C17.4317 10.7212 17.3588 11.1698 17.1828 11.5945C16.7599 12.6155 15.9488 13.4266 14.9278 13.8495C14.5031 14.0254 14.0545 14.0984 13.5472 14.133C13.0539 14.1667 12.4477 14.1667 11.6963 14.1667H9.52381C9.14082 14.1667 9.06446 14.1705 9.00217 14.1831C8.85702 14.2123 8.72229 14.2797 8.61182 14.3782C8.56441 14.4205 8.51551 14.4793 8.28571 14.7857L8.26776 14.8097C7.76299 15.4827 7.36075 16.019 7.0316 16.4068C6.7222 16.7713 6.37247 17.1378 5.95507 17.3104C4.80656 17.7852 3.48366 17.3442 2.84972 16.2753C2.61933 15.8868 2.55949 15.3837 2.53066 14.9065C2.49999 14.3988 2.5 13.7284 2.5 12.8871V8.63099C2.49999 7.72784 2.49999 6.99938 2.54818 6.40948C2.59781 5.80211 2.70265 5.26862 2.95414 4.77504C3.35361 3.99103 3.99103 3.35361 4.77504 2.95414C5.26862 2.70265 5.80211 2.59781 6.40948 2.54818C6.99938 2.49999 7.72784 2.49999 8.63099 2.5ZM6.5452 4.20931C6.04089 4.25052 5.75115 4.32733 5.53169 4.43915C5.06129 4.67883 4.67883 5.06129 4.43915 5.53169C4.32733 5.75115 4.25052 6.04089 4.20931 6.5452C4.16732 7.05924 4.16667 7.7195 4.16667 8.66667V12.8571C4.16667 13.7351 4.16704 14.3548 4.19429 14.806C4.20778 15.0292 4.22663 15.1861 4.24878 15.2967C4.26756 15.3904 4.28393 15.4255 4.28484 15.4278C4.49624 15.7812 4.93427 15.9272 5.31547 15.7713C5.31754 15.7701 5.3517 15.7518 5.42297 15.6881C5.50703 15.6129 5.61626 15.4987 5.76098 15.3282C6.05352 14.9836 6.42561 14.4881 6.95238 13.7857C6.96446 13.7696 6.97642 13.7536 6.98829 13.7378C7.1619 13.5059 7.31445 13.3022 7.50212 13.1347C7.83352 12.839 8.23773 12.6369 8.67316 12.5492C8.91976 12.4995 9.17428 12.4997 9.46394 12.5C9.48373 12.5 9.50368 12.5 9.52381 12.5H11.6667C12.4546 12.5 13.0039 12.4995 13.4338 12.4702C13.8562 12.4414 14.1022 12.3875 14.29 12.3097C14.9026 12.056 15.3893 11.5693 15.643 10.9567C15.7208 10.7689 15.7747 10.5229 15.8035 10.1005C15.8329 9.67055 15.8333 9.1213 15.8333 8.33333C15.8333 7.54536 15.8329 6.99612 15.8035 6.56621C15.7747 6.14378 15.7208 5.89778 15.643 5.70996C15.3893 5.09739 14.9026 4.6107 14.29 4.35697C14.1022 4.27917 13.8562 4.22527 13.4338 4.19645C13.0039 4.16712 12.4546 4.16667 11.6667 4.16667H8.66667C7.7195 4.16667 7.05924 4.16732 6.5452 4.20931Z"
-      fill="white"
-    />
-    <path
-      d="M6.66634 5.83334C6.2061 5.83334 5.83301 6.20643 5.83301 6.66667C5.83301 7.12691 6.2061 7.5 6.66634 7.5H13.333C13.7932 7.5 14.1663 7.12691 14.1663 6.66667C14.1663 6.20643 13.7932 5.83334 13.333 5.83334H6.66634Z"
-      fill="white"
-    />
-    <path
-      d="M6.66634 9.16667C6.2061 9.16667 5.83301 9.53977 5.83301 10C5.83301 10.4602 6.2061 10.8333 6.66634 10.8333H9.16634C9.62658 10.8333 9.99967 10.4602 9.99967 10C9.99967 9.53977 9.62658 9.16667 9.16634 9.16667H6.66634Z"
-      fill="white"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'CommentLine',
-  props: {
-    className: {
-      type: String,
-      default: '',
-    },
-  },
-}
-</script>
-
-<style scoped>
-svg path {
-  fill: currentColor;
-}
-</style>
diff --git a/frontend/src/components/icons/LinkIcon.vue b/frontend/src/components/icons/LinkIcon.vue
deleted file mode 100644
index 19c7e27..0000000
--- a/frontend/src/components/icons/LinkIcon.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8.15301 3.82524L10.3169 1.66136C12.532 -0.553786 16.1235 -0.553788 18.3386 1.66136C20.5538 3.87651 20.5538 7.46798 18.3386 9.68312L16.1748 11.847L14.6447 10.3169L16.8085 8.15302C18.1786 6.78293 18.1786 4.56156 16.8085 3.19146C15.4384 1.82136 13.2171 1.82136 11.847 3.19146L9.68311 5.35534L8.15301 3.82524Z"
-      fill="#F9FAFB"
-    />
-    <path
-      d="M11.847 16.1748L9.68312 18.3386C7.46797 20.5538 3.87651 20.5538 1.66136 18.3386C-0.553787 16.1235 -0.553786 12.532 1.66136 10.3169L3.82524 8.153L5.35533 9.6831L3.19146 11.847C1.82136 13.2171 1.82136 15.4384 3.19146 16.8085C4.56155 18.1786 6.78292 18.1786 8.15302 16.8085L10.3169 14.6447L11.847 16.1748Z"
-      fill="#F9FAFB"
-    />
-    <path
-      d="M7.51922 14.0109L14.0109 7.51922L12.4808 5.98912L5.98913 12.4808L7.51922 14.0109Z"
-      fill="#F9FAFB"
-    />
-  </svg>
-</template>
-
-<script setup>
-defineProps({
-  classname: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<style scoped>
-svg path {
-  fill: currentcolor;
-}
-</style>
diff --git a/frontend/src/components/icons/Search.vue b/frontend/src/components/icons/Search.vue
deleted file mode 100644
index 2e9e39d..0000000
--- a/frontend/src/components/icons/Search.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <svg
-    :class="className"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M13.7929 13.7929C14.1834 13.4024 14.8166 13.4024 15.2071 13.7929L20.7071 19.2929C21.0976 19.6834 21.0976 20.3166 20.7071 20.7071C20.3166 21.0976 19.6834 21.0976 19.2929 20.7071L13.7929 15.2071C13.4024 14.8166 13.4024 14.1834 13.7929 13.7929Z"
-      fill="white"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
-      fill="white"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'Search',
-  props: {
-    className: {
-      type: String,
-      default: '',
-    },
-  },
-}
-</script>
-
-<style scoped>
-svg path {
-  fill: currentColor;
-}
-</style>
diff --git a/frontend/src/components/icons/pause.vue b/frontend/src/components/icons/pause.vue
deleted file mode 100644
index 3c11486..0000000
--- a/frontend/src/components/icons/pause.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <svg
-    :className="className"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3.21799 4.09202C3 4.51984 3 5.0799 3 6.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.0799 21 6.2 21H6.8C7.9201 21 8.48016 21 8.90798 20.782C9.28431 20.5903 9.59027 20.2843 9.78201 19.908C10 19.4802 10 18.9201 10 17.8V6.2C10 5.0799 10 4.51984 9.78201 4.09202C9.59027 3.71569 9.28431 3.40973 8.90798 3.21799C8.48016 3 7.9201 3 6.8 3H6.2C5.0799 3 4.51984 3 4.09202 3.21799C3.71569 3.40973 3.40973 3.71569 3.21799 4.09202Z"
-      fill="white"
-    />
-    <path
-      d="M14.218 4.09202C14 4.51984 14 5.0799 14 6.2V17.8C14 18.9201 14 19.4802 14.218 19.908C14.4097 20.2843 14.7157 20.5903 15.092 20.782C15.5198 21 16.0799 21 17.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.71569 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3H17.2C16.0799 3 15.5198 3 15.092 3.21799C14.7157 3.40973 14.4097 3.71569 14.218 4.09202Z"
-      fill="white"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "Pause",
-  props: {
-    className: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-
-<style scoped>
-svg path {
-  fill: currentColor;
-}
-</style>
diff --git a/frontend/src/components/icons/play.vue b/frontend/src/components/icons/play.vue
deleted file mode 100644
index edcf030..0000000
--- a/frontend/src/components/icons/play.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <svg
-    :class="className"
-    width="28"
-    height="28"
-    viewBox="0 0 28 28"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.1751 2.97135C7.85552 1.34603 4.66663 3.00538 4.66663 5.83772V22.1626C4.66663 24.995 7.85555 26.6543 10.1751 25.029L21.8513 16.8473C23.8267 15.4631 23.8267 12.537 21.8513 11.1528L10.1751 2.97135Z"
-      fill="white"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "Play",
-  props: {
-    className: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-
-<style scoped>
-svg path {
-  fill: currentColor;
-}
-</style>
diff --git a/frontend/src/components/icons/time.vue b/frontend/src/components/icons/time.vue
deleted file mode 100644
index 1f2f943..0000000
--- a/frontend/src/components/icons/time.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    :class="className"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8 12.6667C10.5773 12.6667 12.6667 10.5773 12.6667 8C12.6667 5.42267 10.5773 3.33333 8 3.33333C5.42267 3.33333 3.33333 5.42267 3.33333 8C3.33333 10.5773 5.42267 12.6667 8 12.6667ZM8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 5.16667C8.36819 5.16667 8.66667 5.46514 8.66667 5.83333V7.85288L10.1427 9.0144C10.4321 9.24209 10.4821 9.66123 10.2544 9.95058C10.0267 10.2399 9.60756 10.2899 9.31821 10.0622L7.6417 8.74298C7.61299 8.72039 7.58665 8.69592 7.56269 8.66988C7.42217 8.54765 7.33333 8.36753 7.33333 8.16667V5.83333C7.33333 5.46514 7.63181 5.16667 8 5.16667Z"
-      fill="#8C93A3"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "Time",
-  props: {
-    className: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-
-<style scoped>
-svg path {
-  fill: currentColor;
-}
-</style>
diff --git a/frontend/src/components/video/AiDropdown.vue b/frontend/src/components/video/AiDropdown.vue
deleted file mode 100644
index fd494e2..0000000
--- a/frontend/src/components/video/AiDropdown.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div>
-    <div @click="toggleDropdown">
-      <icon-button
-        classname="dropdown-toggle rounded-full m-auto"
-        size="normal"
-      >
-        <img src="/icons/ai_sparkle.png" alt="More options" />
-      </icon-button>
-    </div>
-    <div
-      v-if="show"
-      class="bg-white border border-outline-xlight rounded-12 p-16 shadow-4 z-40 bottom-72 right-30 absolute w-256 text-black"
-    >
-      <h3 class="text-kilvish text-sm mb-20 font-semibold">
-        Suggested Follow-up Actions
-      </h3>
-      <button
-        v-for="(opt, i) in filteredOptions"
-        :key="i"
-        class="w-full p-2 flex items-center max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap"
-        :class="{
-          'mb-20': i !== filteredOptions.length - 1,
-        }"
-        @click="$emit('openChat', opt)"
-      >
-        <img :src="opt.icon" class="w-20 h-auto mr-12" />
-        {{ opt.title }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import IconButton from "../atoms/IconButton.vue";
-
-export default {
-  components: {
-    IconButton,
-  },
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      show: false,
-    };
-  },
-  computed: {
-    filteredOptions() {
-      return this.options.slice(2);
-    },
-  },
-  methods: {
-    toggleDropdown(event) {
-      console.log("toggleDropdown");
-      this.show = !this.show;
-      if (this.show) {
-        // Add event listener when dropdown is opened
-        document.addEventListener("click", this.handleOutsideClick);
-      } else {
-        // Remove event listener when dropdown is closed
-        document.removeEventListener("click", this.handleOutsideClick);
-      }
-    },
-    closeDropdown() {
-      this.show = false;
-      document.removeEventListener("click", this.handleOutsideClick);
-    },
-    handleOutsideClick(event) {
-      // Check if the click is outside the dropdown
-      if (!this.$el.contains(event.target)) {
-        this.closeDropdown();
-      }
-    },
-  },
-  beforeDestroy() {
-    // Clean up the event listener when component is destroyed
-    document.removeEventListener("click", this.handleOutsideClick);
-  },
-};
-</script>
diff --git a/frontend/src/components/video/MenuButton.vue b/frontend/src/components/video/MenuButton.vue
deleted file mode 100644
index 871ffbc..0000000
--- a/frontend/src/components/video/MenuButton.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <popper
-    hover
-    arrow
-    placement="left"
-    :modifiers="{ offset: { offset: '0,10px' } }"
-    boundaries-selector=".video-player"
-    boundaries="30px"
-    class="flex items-center justify-center chatMenuButton"
-  >
-    <template
-      #content
-      class="popper z-30 vdb-p-hidden sm:vdb-p-block"
-      :class="!isPopperActive ? 'vdb-p-invisible' : ''"
-    >
-      {{ title }}
-    </template>
-    <div slot="reference">
-      <button
-        class="w-40 h-40 flex items-center justify-center rounded-full bg-black hover:bg-others-summaryHover"
-        :class="buttonClass"
-        @click="$emit('click')"
-      >
-        <img class="w-20 h-auto" :src="icon" :alt="title" />
-      </button>
-    </div>
-  </popper>
-</template>
-
-<script setup>
-import Popper from 'vue3-popper'
-
-defineProps({
-  icon: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    default: 'Open chat',
-  },
-  buttonClass: {
-    type: String,
-    default: '',
-  },
-  isPopperActive: {
-    type: Boolean,
-    default: true,
-  },
-})
-</script>
-
-<style>
-.chatMenuButton .popper {
-  border-radius: 40px;
-  white-space: nowrap;
-  border: none;
-  padding: 4px 8px;
-  box-shadow: none;
-  background-color: #272727;
-  color: white;
-  border: 1px solid #232323;
-}
-
-.chatMenuButton .popper .popper__arrow {
-  border-left-color: #272727;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/video/VideoCard.vue b/frontend/src/components/video/VideoCard.vue
deleted file mode 100644
index 17f0f64..0000000
--- a/frontend/src/components/video/VideoCard.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div class="flex flex-col h-full video-card px-30 sm:p-0">
-    <div
-      class="flex flex-col sm:flex-row sm:block mb-24"
-      :class="{ 'flex-grow': borderB }"
-    >
-      <div
-        class="w-auto min-w-96 sm:w-full sm:min-w-auto sm:mr-24 sm:min-w-0 sm:mb-16"
-      >
-        <div class="relative rounded-12 bg-white overflow-hidden vid-pb">
-          <div
-            class="thumbnail rounded-12 absolute top-0 left-0 right-0 bottom-0 bg-cover bg-no-repeat bg-center shadow-1 h-106"
-            :style="{
-              backgroundImage: item.thumbnail_url ? `url('${item.thumbnail_url}')` : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-            }"
-          >
-            <div v-if="!item.thumbnail_url" class="absolute inset-0 flex items-center justify-center text-white text-xl font-bold">
-              {{ item.name ? item.name.split(' ').slice(0, 3).join(' ') + '...' : 'Video...' }}
-            </div>
-          </div>
-          <div
-            class="flex absolute top-1/2 left-1/2 h-48 w-48 lg:h-56 lg:w-56 rounded-full items-center justify-center transform -translate-x-1/2 -translate-y-1/2 center-button transparent-button"
-          >
-            <PlayIcon class="h-20 w-20" />
-          </div>
-        </div>
-      </div>
-      <div class="text-black flex flex-col justify-center fade-on-hover">
-        <p class="text-subheader font-medium mb-8 text-elip whitespace-normal">
-          {{ item.name}}
-        </p>
-        <div class="flex items-center">
-          <div class="flex items-center mr-16">
-            <TimeIcon class="w-16 mr-2" />
-            <p class="text-caption1 font-medium text-textlight">
-              {{ secondsToHHMMSS(item.length || 0) }}
-            </p>
-          </div>
-          <div class="flex items-center text-textlight">
-            <comment-line class-name="w-16 mr-2" />
-            <p class="text-caption1 font-medium text-textlight">
-              {{ item.comments ? Object.keys(item.comments).length : 0 }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="borderB"
-      class="border-b border-outline-xlight lg:mb-16"
-      :class="`${index % 2 === 0 ? 'sm:-mr-32' : 'sm:mr-0'} ${
-        index % 3 !== 2 ? 'md:-mr-32' : 'md:mr-0'
-      } ${index % 4 !== 3 ? 'lg:-mr-32' : 'lg:mr-0'} ${borderClass}`"
-    />
-  </div>
-</template>
-
-<script>
-import CommentLine from '../icons/CommentLine.vue'
-import PlayIcon from '../icons/play.vue'
-import TimeIcon from '../icons/time.vue'
-
-export default {
-  name: 'VideoCard',
-  components: {
-    CommentLine,
-    PlayIcon,
-    TimeIcon,
-  },
-  props: {
-    item: {
-      type: Object,
-      default: () => {},
-    },
-    index: {
-      type: Number,
-      default: 0,
-    },
-    borderB: {
-      type: Boolean,
-      default: false,
-    },
-    borderClass: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    secondsToHHMMSS(val) {
-      if (!val) return '00:00:00'
-      let time = ''
-      time = new Date(val * 1000).toISOString().substring(11, 19)
-      if (time.substring(0, 2) === '00') {
-        return time.substring(3, time.length)
-      }
-      return time
-    },
-  },
-}
-</script>
-
-<style scoped>
-.transparent-button {
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.16);
-  border: 1px solid rgba(255, 255, 255, 0.24);
-  backdrop-filter: blur(16px);
-  color: #fff;
-  opacity: 0;
-}
-
-.vid-pb {
-  padding-bottom: 75%;
-}
-
-.text-elip {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.center-button,
-.fade-on-hover {
-  transition: all 0.3s ease-in-out;
-}
-.thumbnail {
-  transition: transform 0.5s linear;
-  transform-origin: center;
-  transform: scale(1.001);
-}
-@media (max-width: 640px) {
-  .thumbnail {
-    height: 106px;
-  }
-  .vid-pb {
-    padding-bottom: 40%;
-  }
-}
-
-@media (any-hover: hover) {
-  .video-card:hover .center-button {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1.05);
-    background: rgba(0, 0, 0, 0.32);
-    transform-origin: center;
-  }
-  .video-card:hover .fade-on-hover {
-    opacity: 0.6;
-  }
-  .video-card:hover .thumbnail {
-    transform: scale(1.05);
-  }
-}
-</style>
diff --git a/frontend/src/components/video/VideoCardLoader.vue b/frontend/src/components/video/VideoCardLoader.vue
deleted file mode 100644
index 2b0ed27..0000000
--- a/frontend/src/components/video/VideoCardLoader.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="flex flex-col h-full">
-    <div class="flex sm:block mb-30" :class="{ 'flex-grow': borderB }">
-      <div
-        class="w-96 min-w-96 sm:w-full sm:min-w-auto mr-24 sm:min-w-0 sm:mb-16"
-      >
-        <div
-          class="relative rounded-12 bg-gray-400 animate-pulse custom-duration"
-          style="padding-bottom: 75%"
-        />
-      </div>
-      <div class="flex flex-col justify-center">
-        <div class="animate-pulse custom-duration h-20 bg-gray-400 mb-8 rounded-full" />
-        <div class="flex items-center">
-          <div class="animate-pulse custom-duration w-48 h-20 bg-gray-400 rounded-full mr-12" />
-          <div class="animate-pulse custom-duration w-48 h-20 bg-gray-400 rounded-full" />
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="borderB"
-      class="border-b border-outline-xlight lg:mb-16"
-      :class="`${index % 2 === 0 ? 'sm:-mr-32' : 'sm:mr-0'} ${
-        index % 3 !== 2 ? 'md:-mr-32' : 'md:mr-0'
-      } ${index % 4 !== 3 ? 'lg:-mr-32' : 'lg:mr-0'}`"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'VideoCardLoading',
-  props: {
-    index: {
-      type: Number,
-      default: 0,
-    },
-    borderB: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/video/VideoDetails.vue b/frontend/src/components/video/VideoDetails.vue
deleted file mode 100644
index a88dce9..0000000
--- a/frontend/src/components/video/VideoDetails.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import dayjs from "dayjs";
-import Avatar from "../atoms/Avatar.vue";
-import LinkIcon from "../icons/LinkIcon.vue";
-
-const props = defineProps({
-  videoTitle: String,
-  collectionShareUrl: String,
-  videoShareUrl: String,
-  collectionName: String,
-  collectionImage: String,
-  collectionPublishDate: String,
-  isLoading: Boolean,
-});
-
-const isLinkCopied = ref(false);
-
-const copyLink = () => {
-  isLinkCopied.value = true;
-  console.log("copying link", props.videoShareUrl);
-  navigator.clipboard.writeText(props.videoShareUrl ?? "");
-  console.log("navigator.clipboard.writeText", navigator.clipboard.writeText);
-  setTimeout(() => {
-    isLinkCopied.value = false;
-  }, 5000);
-};
-</script>
-
-<template>
-  <div class="xl:px-200 lg:px-142 sm:px-56 md:px-88 px-12 mt-32">
-    <div v-if="!isLoading">
-      <div class="flex flex-row items-start">
-        <p
-          class="max-w-full mb-8 font-semibold font-sans text-textdark text-heading2 sm:text-heading1 two-line-ellipses"
-        >
-          {{ videoTitle }}
-        </p>
-      </div>
-      <div class="flex flex-row justify-between items-start">
-        <a
-          :href="collectionShareUrl ?? ''"
-          class="flex items-center"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <avatar
-            class-name="mr-16"
-            :name="collectionName"
-            :src="collectionImage"
-          />
-          <div>
-            <p class="font-medium text-sm text-black">
-              {{ collectionName }}
-            </p>
-            <p class="font-medium text-[#8C93A3] text-xs">
-              {{ dayjs(collectionPublishDate).format("MMM D, YYYY") }}
-            </p>
-          </div>
-        </a>
-        <div class="relative flex flex-row sm:flex-row">
-          <div
-            class="absolute w-106 h-40 text-white flex flex-row items-center justify-center px-12 py-8 rounded-8 linkCopiedButton"
-            :class="isLinkCopied ? 'linkCopiedButtonClicked' : ''"
-          >
-            Link Copied!
-          </div>
-          <button
-            class="flex items-center px-12 py-8 font-medium text-white transition rounded-6 text-body text-dark mb-32 ml-4 sm:ml-8 sm:mb-20"
-            :style="{
-              zIndex: 1,
-            }"
-            :class="{
-              'bg-green': isLinkCopied,
-              'bg-primary-700 hover:bg-others-redfaded': !isLinkCopied,
-            }"
-            @click="copyLink()"
-          >
-            <LinkIcon />
-            <div v-if="!isLinkCopied" class="ml-8 hidden sm:flex">
-              Copy Link
-            </div>
-            <div v-if="isLinkCopied" class="ml-8 hidden sm:flex">Copied!</div>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div v-else class="px-88 mt-32">
-      <div class="flex flex-col sm:flex-col">
-        <div
-          class="flex-grow w-full h-32 mb-8 bg-gray-300 rounded-full animate-pulse"
-        />
-        <div class="flex flex-row justify-between items-start">
-          <div class="flex items-center mb-56">
-            <div class="w-40 h-40 mr-16 bg-gray-300 rounded-8 animate-pulse" />
-            <div>
-              <div
-                class="h-16 mb-4 bg-gray-300 rounded-full animate-pulse w-88"
-              />
-              <div class="w-32 h-16 bg-gray-300 rounded-full animate-pulse" />
-            </div>
-          </div>
-          <div
-            class="h-40 mb-32 bg-gray-300 rounded-8 min-w-96 animate-pulse sm:mb-20 sm:ml-40"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/components/video/VideoMenu.vue b/frontend/src/components/video/VideoMenu.vue
deleted file mode 100644
index 339ea46..0000000
--- a/frontend/src/components/video/VideoMenu.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <div>
-    <div class="hidden md:block">
-      <div
-        class="flex-col justify-center bg-others-black181818 br-60 p-8"
-        :class="{
-          card: showGradient,
-          'border border-kilvish-700 w-60': !showGradient,
-        }"
-      >
-        <menu-button
-          v-for="(elm, i) in options"
-          :key="i"
-          :icon="elm.icon"
-          :title="elm.title"
-          :button-class="i === options.length - 1 ? '' : 'mb-10'"
-          @click="$emit('openChat', elm)"
-        />
-      </div>
-    </div>
-    <div
-      class="flex items-center w-full md:hidden bg-white border-b border-kilvish-400 justify-between p-12"
-    >
-      <Button
-        variant="secondary"
-        classname="rounded-24 bg-kilvish-200 text-sm tt-override max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap tracking-normal"
-        @click="$emit('openChat', options[1])"
-      >
-        <img :src="options[1].icon" class="w-16 h-auto mr-8 " />
-        {{ options[1].title }}
-      </Button>
-      <Button
-        variant="primary"
-        classname="rounded-24 text-sm tt-override max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap tracking-normal"
-        @click="$emit('openChat', options[0])"
-      >
-        <img :src="options[0].icon" class="w-16 h-auto mr-8" />
-        {{ options[0].title }}
-      </Button>
-      <ai-dropdown
-        :options="options"
-        @openChat="(opt) => $emit('openChat', opt)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import MenuButton from "./MenuButton.vue";
-import Button from "../atoms/Button.vue";
-import AiDropdown from "./AiDropdown.vue";
-
-export default {
-  components: { MenuButton, Button, AiDropdown },
-  props: {
-    showGradient: {
-      type: Boolean,
-      default: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.br-60 {
-  border-radius: 60px;
-}
-
-.tt-override {
-  text-transform: none !important;
-}
-
-@property --rotate {
-  syntax: "<angle>";
-  initial-value: 132deg;
-  inherits: false;
-}
-
-:root {
-  --card-height: 258px;
-  --card-width: 60px;
-}
-
-.card {
-  width: var(--card-width);
-  height: var(--card-height);
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  display: flex;
-  color: rgb(88 199 250 / 0%);
-  cursor: pointer;
-}
-
-.card:hover {
-  color: rgb(88 199 250 / 100%);
-  transition: color 1s;
-}
-.card:hover:before,
-.card:hover:after {
-  animation: none;
-  opacity: 0;
-}
-
-.card::before {
-  content: "";
-  width: 104%;
-  height: 102%;
-  border-radius: 60px;
-  background-image: linear-gradient(
-    var(--rotate),
-    #e2462ccc,
-    #ff7635cc,
-    #fcbc2ccc
-  );
-  position: absolute;
-  z-index: -1;
-  top: -1%;
-  left: -2%;
-  animation: spin 3s linear infinite;
-  animation-delay: 0s;
-}
-
-.card::after {
-  position: absolute;
-  content: "";
-  top: -20%;
-  left: 0;
-  right: 0;
-  z-index: -1;
-  height: 140%;
-  width: 100%;
-  margin: 0 auto;
-  transform: scale(0.7);
-  filter: blur(calc(258px / 6));
-  background-image: linear-gradient(
-    var(--rotate),
-    #e2462ccc,
-    #ff7635cc,
-    #fcbc2ccc
-  );
-  opacity: 1;
-  transition: opacity 0.5s;
-  animation: spin 3s ease infinite;
-  animation-delay: 0s;
-}
-
-@keyframes spin {
-  0% {
-    --rotate: 0deg;
-  }
-  100% {
-    --rotate: 360deg;
-  }
-}
-</style>
diff --git a/frontend/src/data/collection/searchSuggestions.json b/frontend/src/data/collection/searchSuggestions.json
deleted file mode 100644
index d7ff3a5..0000000
--- a/frontend/src/data/collection/searchSuggestions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
-    {
-        "text": "upload this video: https://www.youtube.com/watch?v=tInObFeXRMU"
-    },
-    {
-        "text": "generate thumbnail at 5s for recently uploaded video"
-    }
-]
\ No newline at end of file
diff --git a/frontend/src/data/video/chatSuggestions.json b/frontend/src/data/video/chatSuggestions.json
deleted file mode 100644
index d63d4af..0000000
--- a/frontend/src/data/video/chatSuggestions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
-    {
-        "text": "Generate thumbnail at 15s"
-    },
-    {
-        "text": "Generate thumbnail at 30s"
-    }
-]
\ No newline at end of file
diff --git a/frontend/src/data/video/searchResults.json b/frontend/src/data/video/searchResults.json
deleted file mode 100644
index 119bc80..0000000
--- a/frontend/src/data/video/searchResults.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-    "hits": [
-        {
-            "id": "1",
-            "start": 100,
-            "end": 200,
-            "text": "This is the summary of Chapter 1",
-            "type": "relevant"
-        },
-        {
-            "id": "2",
-            "start": 120,
-            "end": 200,
-            "text": "This is the summary of Chapter 2",
-            "type": "exact"
-        },
-        {
-            "id": "3",
-            "start": 210,
-            "end": 255,
-            "text": "This is the summary of Chapter 3",
-            "type": "relevant"
-        },
-        {
-            "id": "4",
-            "start": 300,
-            "end": 302,
-            "text": "This is the summary of Chapter 4",
-            "type": "relevant"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/frontend/src/data/video/searchSuggestions.json b/frontend/src/data/video/searchSuggestions.json
deleted file mode 100644
index d63d4af..0000000
--- a/frontend/src/data/video/searchSuggestions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
-    {
-        "text": "Generate thumbnail at 15s"
-    },
-    {
-        "text": "Generate thumbnail at 30s"
-    }
-]
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index a1c7762..78bac06 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,27 +1,11 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import Collection from '../views/Collection.vue';
-import Video from '../views/Video.vue';
+import { createRouter, createWebHistory } from "vue-router";
+import DefaultView from "../views/DefaultView.vue";
 
 const routes = [
   {
-    path: '/:collectionId',
-    name: 'Collection',
-    component: Collection,
-  },
-  {
-    path: '/:collectionId/video/:videoId',
-    name: 'Video',
-    component: Video,
-  },
-  {
-    path: '/default',
-    name: 'Default',
-    component: Collection,
-  },
-  {
-    path: '/',
-    name: 'Default-2',
-    component: Collection,
+    path: "/",
+    name: "Default",
+    component: DefaultView,
   },
 ];
 
diff --git a/frontend/src/views/Collection.vue b/frontend/src/views/Collection.vue
deleted file mode 100644
index 3118793..0000000
--- a/frontend/src/views/Collection.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script setup>
-import { computed, ref, onMounted, nextTick } from "vue";
-import { useRoute } from "vue-router";
-
-import axios from "axios";
-import { v4 as uuidv4 } from "uuid";
-
-import { ChatInterface } from "@videodb/chat-vue";
-import "@videodb/chat-vue/dist/style.css";
-
-import AllVideosLoader from "../components/collection/AllVideosLoader.vue";
-import AllVideos from "../components/collection/AllVideos.vue";
-import CollectionProfile from "../components/collection/CollectionProfile.vue";
-import CollectionProfileLoading from "../components/collection/CollectionProfileLoading.vue";
-import SearchField from "../components/collection/SearchField.vue";
-
-import searchSuggestionsData from "../data/collection/searchSuggestions.json";
-
-const BACKEND_URL = import.meta.env.VITE_APP_BACKEND_URL;
-
-const route = useRoute();
-const collectionId = route.params.collectionId || "default";
-
-const appRootUrl = ref("");
-const chatInterfaceRef = ref(null);
-
-const collectionData = ref(null);
-const collectionVideos = ref(null);
-const videos = computed(() => {
-  if (collectionVideos.value === null) {
-    return [];
-  }
-  return collectionVideos.value;
-});
-const currentSessionId = ref(null);
-
-onMounted(() => {
-  // fetchData();
-});
-onMounted(() => {
-  appRootUrl.value = window.location.origin;
-});
-
-// const fetchData = () => {
-//   try {
-//     axios
-//       .get(`${BACKEND_URL}/videodb/collection/${collectionId}`)
-//       .then((collectionResponse) => {
-//         console.log("this is collection response", collectionResponse);
-//         collectionData.value = collectionResponse.data;
-//       });
-
-//     axios
-//       .get(`${BACKEND_URL}/videodb/collection/${collectionId}/video`)
-//       .then((collectionVideosResponse) => {
-//         console.log(
-//           "this is collection videos response",
-//           collectionVideosResponse
-//         );
-//         collectionVideos.value = collectionVideosResponse.data;
-//       });
-//   } catch (error) {
-//     console.error("Error fetching collection data:", error);
-//   }
-// };
-
-const searchContent = ref("");
-const searchSuggestions = ref(searchSuggestionsData);
-
-const handleSearch = (query) => {
-  openChat();
-};
-
-const openChat = () => {
-  const uid = uuidv4();
-  currentSessionId.value = uid;
-
-  nextTick(() => {
-    if (chatInterfaceRef.value) {
-      chatInterfaceRef.value.addMessage([
-        {
-          type: "text",
-          text: searchContent.value,
-        },
-      ]);
-    }
-  });
-};
-
-const handleBackButton = () => {
-  searchContent.value = "";
-  currentSessionId.value = null;
-};
-</script>
-
-<template>
-  <main>
-    <chat-interface
-      ref="chatInterfaceRef"
-      assistant-image="https://avatars.githubusercontent.com/u/153916971"
-      :search-suggestions="searchSuggestions"
-      :share-url="`${appRootUrl}/chat/${currentSessionId}`"
-      :chat-hook-config="{
-        socketUrl: `${BACKEND_URL}/chat`,
-        httpUrl: `${BACKEND_URL}`,
-        debug: true,
-      }"
-      collection-id="default"
-      :video-id="null"
-      @backBtnClick="handleBackButton"
-    />
-  </main>
-</template>
-
-<style>
-:root {
-  --popper-theme-background-color: #333333;
-  --popper-theme-background-color-hover: #333333;
-  --popper-theme-text-color: #ffffff;
-  --popper-theme-border-width: 0px;
-  --popper-theme-border-style: solid;
-  --popper-theme-border-radius: 8px;
-  --popper-theme-padding: 4px 8px;
-  --popper-theme-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.08);
-}
-
-.template {
-  height: 100vh;
-  width: 100vw;
-}
-
-main {
-  overflow: scroll;
-  height: 100%;
-}
-html {
-  overflow: hidden;
-}
-</style>
diff --git a/frontend/src/views/DefaultView.vue b/frontend/src/views/DefaultView.vue
new file mode 100644
index 0000000..5a38803
--- /dev/null
+++ b/frontend/src/views/DefaultView.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { ChatInterface } from "@videodb/chat-vue";
+import "@videodb/chat-vue/dist/style.css";
+
+const BACKEND_URL = import.meta.env.VITE_APP_BACKEND_URL;
+</script>
+
+<template>
+  <main>
+    <chat-interface
+      :chat-hook-config="{
+        socketUrl: `${BACKEND_URL}/chat`,
+        httpUrl: `${BACKEND_URL}`,
+        debug: true,
+      }"
+    />
+  </main>
+</template>
+
+<style>
+:root {
+  --popper-theme-background-color: #333333;
+  --popper-theme-background-color-hover: #333333;
+  --popper-theme-text-color: #ffffff;
+  --popper-theme-border-width: 0px;
+  --popper-theme-border-style: solid;
+  --popper-theme-border-radius: 8px;
+  --popper-theme-padding: 4px 8px;
+  --popper-theme-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.08);
+}
+
+.template {
+  height: 100vh;
+  width: 100vw;
+}
+
+main {
+  overflow: scroll;
+  height: 100%;
+}
+html {
+  overflow: hidden;
+}
+
+/* For WebKit-based browsers (Chrome, Safari) */
+::-webkit-scrollbar {
+  width: 12px; /* Width of the scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; /* Background of the scrollbar track */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888; /* Scrollbar thumb color */
+  border-radius: 6px; /* Rounded corners */
+  border: 3px solid #f1f1f1; /* Space around the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* Thumb color on hover */
+}
+
+/* For Mozilla Firefox */
+* {
+  scrollbar-width: thin; /* Makes the scrollbar narrower */
+  scrollbar-color: #888 #f1f1f1; /* Thumb and track colors */
+}
+</style>
diff --git a/frontend/src/views/Video.vue b/frontend/src/views/Video.vue
deleted file mode 100644
index 16e4e4c..0000000
--- a/frontend/src/views/Video.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<script setup>
-import { useRoute } from "vue-router";
-import { ref, onMounted, reactive, watch } from "vue";
-
-import { v4 as uuidv4 } from "uuid";
-import axios from "axios";
-import debounce from "lodash.debounce";
-
-import {
-  VideoDBPlayer,
-  BigCenterButton,
-  SearchInsideMedia,
-} from "@videodb/player-vue";
-import "@videodb/player-vue/dist/style.css";
-
-import { ChatInterface } from "@videodb/chat-vue";
-import "@videodb/chat-vue/dist/style.css";
-
-import VideoMenu from "../components/video/VideoMenu.vue";
-import VideoDetails from "../components/video/VideoDetails.vue";
-
-import searchResultsData from "../data/video/searchResults.json";
-import searchSuggestionsData from "../data/video/searchSuggestions.json";
-
-import chatSuggestionData from "../data/video/chatSuggestions.json";
-
-const BACKEND_URL = import.meta.env.VITE_APP_BACKEND_URL;
-
-const route = useRoute();
-
-// Extract the video ID from the route parameters
-const collectionId = route.params.collectionId;
-const videoId = route.params.videoId;
-
-const appRootUrl = ref("");
-const videoData = ref(null);
-const collectionData = ref(null);
-
-// New refs for video menu and gradient
-const showVideoMenu = ref(false);
-const showGradient = ref(false);
-
-// Fetch video and collection data
-const fetchData = () => {
-  try {
-    axios
-      .get(`${BACKEND_URL}/videodb/collection/${collectionId}/video/${videoId}`)
-      .then((videoResponse) => {
-        console.log("videoResponse", videoResponse.data);
-        videoData.value = videoResponse.data;
-      });
-
-    axios
-      .get(`${BACKEND_URL}/videodb/collection/${collectionId}`)
-      .then((collectionResponse) => {
-        console.log("collectionResponse", collectionResponse.data);
-        collectionData.value = collectionResponse.data;
-      });
-  } catch (error) {
-    console.error("Error fetching data:", error);
-  }
-};
-
-onMounted(fetchData);
-onMounted(() => {
-  appRootUrl.value = window.location.origin;
-});
-
-// Watch for changes in videoData and collectionData
-watch([videoData, collectionData], ([newVideoData, newCollectionData]) => {
-  if (newVideoData && newCollectionData) {
-    showVideoMenu.value = true;
-    showGradient.value = true;
-    setTimeout(() => {
-      showGradient.value = false;
-    }, 5000);
-  }
-});
-
-const videoPlayer = ref(null);
-
-// Related to Players
-const isFullScreen = ref(false);
-
-// Related to Chat
-const currentSessionId = ref(null);
-const chatQuery = ref("");
-
-// Related to search
-const searchContent = ref("");
-const searchSuggestions = ref(searchSuggestionsData);
-const showSearchResults = ref(false);
-
-const searchResultsLoading = ref(true);
-const searchResults = reactive({
-  hits: [],
-});
-
-// Methods
-const openChat = (options) => {
-  console.log(options);
-  if (options?.query) {
-    chatQuery.value = options.query;
-  }
-  const uid = uuidv4();
-  currentSessionId.value = uid;
-  if (videoPlayer.value) {
-    videoPlayer.value.pause();
-  }
-};
-
-const handleBackButton = () => {
-  searchContent.value = "";
-  currentSessionId.value = null;
-};
-
-const handleSearchChange = (query) => {
-  searchContent.value = query;
-  searchResultsLoading.value = true;
-  debounce(function (query) {
-    const newValue = query.trim();
-    if (!newValue || newValue.length < 2) {
-      searchResults.hits = [];
-    } else {
-      searchResults.hits = searchResultsData.hits;
-    }
-    searchResultsLoading.value = false;
-  }, 500)(query);
-};
-
-const handleSearchSubmit = (query) => {
-  searchContent.value = query;
-};
-
-const handleFullScreenChange = (value) => {
-  isFullScreen.value = value;
-  if (value) {
-    document.documentElement.requestFullscreen();
-  } else {
-    document.exitFullscreen();
-  }
-};
-</script>
-
-<template>
-  <div>
-    <div class="relative">
-      <!-- Video Player -->
-      <div
-        class="w-full bg-black flex justify-center items-center"
-        v-if="videoData"
-      >
-        <div
-          :class="isFullScreen ? 'w-screen h-screen' : 'videoPlayerContainer'"
-        >
-          <VideoDBPlayer
-            ref="videoPlayer"
-            :class="isFullScreen ? 'w-screen h-screen' : ''"
-            :stream-url="videoData?.stream_url"
-            :default-overlay="false"
-            @fullScreenChange="handleFullScreenChange"
-          >
-            <template v-slot:overlay>
-              <BigCenterButton class="absolute top-1/2 left-1/2" />
-              <SearchInsideMedia
-                :search-content="searchContent"
-                :search-suggestions="searchSuggestions"
-                :search-results="searchResults"
-                :search-results-loading="searchResultsLoading"
-                :show-search-results="showSearchResults"
-                @toggle-results="showSearchResults = $event"
-                @search-change="handleSearchChange"
-                @search-submit="handleSearchSubmit"
-              />
-            </template>
-          </VideoDBPlayer>
-        </div>
-      </div>
-
-      <!-- Video Player Loading -->
-      <div v-else class="w-full bg-[#EEEFF2] flex justify-center items-center">
-        <div class="videoPlayerContainer">
-          <div class="w-full h-full animate-pulse aspect-video"></div>
-        </div>
-      </div>
-
-      <!-- Video Menu -->
-      <video-menu
-        v-if="showVideoMenu"
-        class="flex w-full md:w-auto md:block md:absolute md:top-1/2 md:-translate-y-1/2 md:right-16"
-        :show-gradient="showGradient"
-        :options="[
-          {
-            icon: 'https://avatars.githubusercontent.com/u/153916972',
-            title: 'Open chat',
-            click: openChat,
-            query: null,
-          },
-          {
-            icon: 'https://avatars.githubusercontent.com/u/153916972',
-            title: 'Generate thumbnail',
-            click: openChat,
-            query: 'Generate a thumbnail for this video',
-          },
-          {
-            icon: 'https://avatars.githubusercontent.com/u/153916972',
-            title: 'Search',
-            click: openChat,
-            query: 'Search in this video',
-          },
-          {
-            icon: 'https://avatars.githubusercontent.com/u/153916972',
-            title: 'Summarize',
-            click: openChat,
-            query: 'Summarize this video',
-          },
-        ]"
-        @openChat="openChat"
-      />
-    </div>
-    <!-- Video Details -->
-    <!-- <div class="xl:px-200 lg:px-142 sm:px-56 md:px-88 px-12"> -->
-    <VideoDetails
-      :is-loading="!videoData || !collectionData"
-      :video-title="videoData?.name"
-      :collection-share-url="`${appRootUrl}/${collectionData?.id}`"
-      :video-share-url="`${appRootUrl}/${collectionData?.id}/video/${videoData?.id}`"
-      :collection-name="collectionData?.name"
-      :collection-image="collectionData?.image"
-      :collection-publish-date="collectionData?.pub_date"
-    />
-
-    <chat-interface
-      v-if="currentSessionId"
-      assistant-image="https://avatars.githubusercontent.com/u/153916972"
-      :search-suggestions="chatSuggestionData"
-      :share-url="`${appRootUrl}/chat/${currentSessionId}`"
-      :chat-hook-config="{
-        sessionId: currentSessionId,
-        collectionId: collectionData?.id,
-        videoId: videoData?.id,
-        url: `${BACKEND_URL}/chat`,
-        debug: true,
-      }"
-      @backBtnClick="handleBackButton"
-    />
-  </div>
-</template>
-
-<style>
-.videoPlayerContainer {
-  width: 100%;
-  height: 55vh;
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-
-@media (min-width: 640px) {
-  .videoPlayerContainer {
-    width: 90%;
-    height: auto;
-    margin: auto;
-    position: relative;
-  }
-}
-
-@media (min-width: 1024px) {
-  .videoPlayerContainer {
-    width: 80%;
-    height: auto;
-  }
-}
-
-@media (min-width: 1280px) {
-  .videoPlayerContainer {
-    width: 70%;
-    height: auto;
-  }
-}
-</style>
\ No newline at end of file
