diff --git a/cypress/e2e/example.cy.ts b/cypress/e2e/Ticker.cy.ts
similarity index 55%
rename from cypress/e2e/example.cy.ts
rename to cypress/e2e/Ticker.cy.ts
index 2ed38e7..3606dcc 100644
--- a/cypress/e2e/example.cy.ts
+++ b/cypress/e2e/Ticker.cy.ts
@@ -2,7 +2,7 @@
 
 describe('Page navigation', () => {
   it('visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'Stock Tracker')
-  })
-})
+    cy.visit('/');
+    cy.get('[data-cy="ticker"]').contains('(Coinbase)');
+  });
+});
diff --git a/package-lock.json b/package-lock.json
index 4b0a27d..0ca9da0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "name": "stock-tracker",
       "version": "0.0.1",
       "dependencies": {
-        "axios": "^1.7.2",
         "vue": "^3.4.21"
       },
       "devDependencies": {
@@ -2394,7 +2393,8 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -2424,6 +2424,7 @@
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
       "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dev": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -2434,6 +2435,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -2446,7 +2448,8 @@
     "node_modules/axios/node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
@@ -2816,6 +2819,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -3189,6 +3193,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -4084,6 +4089,7 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5372,6 +5378,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -5380,6 +5387,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -9337,7 +9345,8 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -9361,6 +9370,7 @@
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
       "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dev": true,
       "requires": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -9371,6 +9381,7 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
           "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "dev": true,
           "requires": {
             "asynckit": "^0.4.0",
             "combined-stream": "^1.0.8",
@@ -9380,7 +9391,8 @@
         "proxy-from-env": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-          "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+          "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+          "dev": true
         }
       }
     },
@@ -9625,6 +9637,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -9921,7 +9934,8 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true
     },
     "diff-sequences": {
       "version": "29.6.3",
@@ -10573,7 +10587,8 @@
     "follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "dev": true
     },
     "foreground-child": {
       "version": "3.1.1",
@@ -11498,12 +11513,14 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
diff --git a/package.json b/package.json
index 099fbac..0e349c0 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "axios": "^1.7.2",
     "vue": "^3.4.21"
   },
   "devDependencies": {
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 64ce11a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      A basic stock & crypto tracker made with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts
deleted file mode 100644
index d3dfa4a..0000000
--- a/src/components/__tests__/HelloWorld.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Stock Tracker' } })
-    expect(wrapper.text()).toContain('Stock Tracker')
-  })
-})
diff --git a/src/components/__tests__/Ticker.spec.ts b/src/components/__tests__/Ticker.spec.ts
new file mode 100644
index 0000000..26f01f7
--- /dev/null
+++ b/src/components/__tests__/Ticker.spec.ts
@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Ticker from '@/views/Ticker.vue';
+
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Ticker);
+    expect(wrapper.text()).toContain('(Coinbase)');
+  });
+});
diff --git a/src/views/Chart.vue b/src/views/Chart.vue
deleted file mode 100644
index 1da19cf..0000000
--- a/src/views/Chart.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <header>
-    <div class="wrapper">
-      <HelloWorld msg="Stock Tracker" />
-    </div>
-  </header>
-</template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/src/views/Grid.vue b/src/views/Grid.vue
deleted file mode 100644
index 1da19cf..0000000
--- a/src/views/Grid.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <header>
-    <div class="wrapper">
-      <HelloWorld msg="Stock Tracker" />
-    </div>
-  </header>
-</template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/src/views/Ticker.vue b/src/views/Ticker.vue
index 539c8e5..c4949aa 100644
--- a/src/views/Ticker.vue
+++ b/src/views/Ticker.vue
@@ -1,36 +1,49 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import axios from 'axios';
-import HelloWorld from '../components/HelloWorld.vue';
-
-const tickerPrice = ref({});
-const fetchingData = ref(false);
-
-async function fetchPrice() {
-  fetchingData.value = true;
-  await axios
-    .get('https://api.coinbase.com/v2/prices/ETH-USD/spot')
-    .then((res) => {
-      //console.log(res);
-      tickerPrice.value = JSON.stringify(res.data);
-    })
-    .catch((errors) => {
-      console.log(errors);
-    });
-  const autoReloadInterval = setTimeout(fetchPrice, 1000);
-  //clearInterval(autoReloadInterval); // stop the auto refresh
+import { ref } from 'vue';
+
+interface ticker {
+  id: string;
+  price: string;
+  volume: string;
 }
 
-onMounted(async () => {
-  await fetchPrice();
-});
+const subscribeMessage = {
+  type: 'subscribe',
+  product_ids: ['ETH-USD'],
+  channels: [
+    'heartbeat',
+    {
+      name: 'ticker',
+      product_ids: ['ETH-USD']
+    }
+  ]
+};
+
+const tickerData = ref({} as ticker);
+
+const socket = new WebSocket('wss://ws-feed.exchange.coinbase.com');
+socket.onopen = () => {
+  socket.send(JSON.stringify(subscribeMessage));
+};
+
+socket.onmessage = (e) => {
+  const msg = JSON.parse(e.data);
+  if (msg['type'] == 'ticker') {
+    tickerData.value.id = msg['product_id'];
+    tickerData.value.price = msg['price'];
+    tickerData.value.volume = msg['volume_24h'].split('.')[0];
+  }
+};
 </script>
 
 <template>
   <header>
     <div class="wrapper">
-      <HelloWorld msg="Stock Tracker" />
-      {{ tickerPrice }}
+      <div class="info">
+        <h1 data-cy="ticker">{{ tickerData.id }} (Coinbase)</h1>
+        <h1 class="green">${{ tickerData.price }}</h1>
+        <h1>Volume: ${{ tickerData.volume }}</h1>
+      </div>
     </div>
   </header>
 </template>
@@ -52,4 +65,27 @@ header {
     flex-wrap: wrap;
   }
 }
+
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.info h1,
+.info h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .info h1,
+  .info h3 {
+    text-align: left;
+  }
+}
 </style>