diff --git a/ActiveBOWeb/src/components/BaseLayout.vue b/ActiveBOWeb/src/components/BaseLayout.vue
deleted file mode 100644
index 2a82599..0000000
--- a/ActiveBOWeb/src/components/BaseLayout.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <TopBar/>
-  <SideBar/>
-  <SubLayout/>
-  <RosBar/>
-</template>
-
-<script setup>
-import TopBar from '@/components/TopBar.vue';
-import RosBar from '@/components/RosBar.vue';
-import SideBar from '@/components/SideBar.vue';
-import SubLayout from "@/components/SubLayout.vue";
-</script>
-
-<style scoped>
-
-</style>
diff --git a/ActiveBOWeb/src/components/ControlPanel.vue b/ActiveBOWeb/src/components/ControlPanel.vue
deleted file mode 100644
index db68e28..0000000
--- a/ActiveBOWeb/src/components/ControlPanel.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <v-row class="flex-row">
-    <v-col class="flex-col px-4">
-      <v-row class="d-flex justify-space-evenly">
-        <v-select
-          :items="envs"
-          label="Environments"
-          v-model="envSelector"
-        ></v-select>
-        <v-select
-          :items="metrics"
-          label="Metric"
-          v-model="metricSelector"
-        ></v-select>
-      </v-row>
-      <v-slider
-        class="control-slider"
-        label="maximum steps"
-        v-model="maxStepComp"
-        :step="1"
-        :min="10"
-        :max="500"
-        thumb-label
-      />
-      <v-slider
-        class="control-slider"
-        label="nr base funcs"
-        v-model="baseFuncsComp"
-        :step="1"
-        :min="2"
-        :max="20"
-        thumb-label
-      />
-      <v-slider
-        class="control-slider"
-        label="nr episodes"
-        v-model="cstore.nr_episodes"
-        :step="1"
-        :min="1"
-        :max="500"
-        thumb-label
-      />
-      <v-slider
-        class="control-slider"
-        label="nr runs"
-        v-model="cstore.nr_runs"
-        :step="1"
-        :min="1"
-        :max="100"
-        thumb-label
-      />
-      <v-select
-        class="justify-space-evenly"
-        :items="acq_funs"
-        label="Acquisition Function"
-        v-model="acqSelector"
-      ></v-select>
-      <v-row class="flex-row px-4 py-0" style="max-height: 80px">
-        <v-slider
-          class="control-slider"
-          :label="cstore.metrics_label[cstore.metric]"
-          v-model="cstore.metric_parameter"
-          :step="cstore.metric_limits[cstore.metric][2]"
-          :min="cstore.metric_limits[cstore.metric][0]"
-          :max="cstore.metric_limits[cstore.metric][1]"
-          thumb-label
-        />
-        <v-col class="pa-0 ba-0" cols="2">
-          <v-select
-            v-if="cstore.metric === 'improvement'"
-            label="nr episodes"
-            v-model="cstore.improvement_2"
-            :items="[5, 10, 15, 20, 25, 30, 35, 40, 45, 50]"
-            variant="outlined"
-          />
-        </v-col>
-      </v-row>
-      <v-row class="justify-space-evenly px-1 py-0 ma-0 ba-0">
-        <v-checkbox
-          class="py-0 my-0"
-          v-model="cstore.fixed_seed"
-          label="fixed seed"
-        />
-        <v-checkbox
-          class="py-0 my-0"
-          v-model="cstore.overwrite"
-          label="overwrite"
-        />
-        <v-checkbox
-          class="py-0 my-0"
-          v-model="cstore.save_result"
-          label="save_result"
-        />
-      </v-row>
-      <v-row class="d-flex justify-space-evenly py-0 ma-0">
-        <v-btn
-          class="py-0 my-0"
-          color="primary"
-          @click="cstore.setSendWeights()"
-          >Send Weights</v-btn
-        >
-        <v-btn class="py-0 my-0" color="secondary" @click="cstore.setRunner()"
-          >Run</v-btn
-        >
-      </v-row>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-import { usePStore } from "@/store/PolicyStore";
-import { useCStore } from "@/store/ControlStore";
-import { computed } from "vue";
-
-const pstore = usePStore();
-const cstore = useCStore();
-
-const envs = cstore.envs;
-const metrics = cstore.metrics;
-const acq_funs = cstore.acq_funs;
-
-const maxStepComp = computed({
-  get: () => pstore.max_steps,
-  set: (value) => pstore.setMaxSteps(value),
-});
-
-const baseFuncsComp = computed({
-  get: () => pstore.nr_weights,
-  set: (value) => pstore.setNrWeights(value),
-});
-
-const envSelector = computed({
-  get: () => cstore.env,
-  set: (value) => cstore.setEnv(value),
-});
-
-const metricSelector = computed({
-  get: () => cstore.metric,
-  set: (value) => cstore.setMetric(value),
-});
-
-const acqSelector = computed({
-  get: () => cstore.acq_fun,
-  set: (value) => cstore.setAcq(value),
-});
-</script>
-
-<style scoped>
-.control-slider {
-}
-</style>
diff --git a/ActiveBOWeb/src/components/PolicyPlot.vue b/ActiveBOWeb/src/components/PolicyPlot.vue
deleted file mode 100644
index 221ca05..0000000
--- a/ActiveBOWeb/src/components/PolicyPlot.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <canvas id="policy-chart" />
-</template>
-
-<script setup>
-import { onMounted, watch } from "vue";
-import { usePStore } from "@/store/PolicyStore";
-import { Chart } from "chart.js/auto";
-import { computeRbfCurve } from "@/js_funs/online_rbf_policy";
-import { useRLStore } from "@/store/RLStore";
-
-const store = usePStore();
-const rlstore = useRLStore();
-
-let chartHandle;
-
-let verticalLinePlugin = {
-  id: "verticalLinePlugin",
-  afterDraw: function (chart, args, options) {
-    let y_Scale = chart.scales["y"];
-    let x_Scale = chart.scales["x"];
-
-    let ctx = chart.ctx;
-    let xValue = options.xValue;
-    let x = x_Scale.getPixelForValue(xValue);
-    let top = y_Scale.top;
-    let bottom = y_Scale.bottom;
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.moveTo(x, top);
-    ctx.lineTo(x, bottom);
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "#00ff00";
-    ctx.stroke();
-    ctx.restore();
-  },
-};
-Chart.register(verticalLinePlugin);
-
-function buildChart() {
-  const policy = store.getPolicy;
-  const policy_labels = Array(policy.length)
-    .fill(0)
-    .map((_, i) => i);
-  const RewardPlot = {
-    data: {
-      datasets: [
-        {
-          type: "line",
-          xAxisID: "x",
-          yAxisID: "y",
-          data: policy,
-          borderColor: "#3DC47A",
-          borderWidth: 2,
-          pointRadius: 0,
-        },
-      ],
-    },
-    options: {
-      maintainAspectRatio: false,
-      responsive: true,
-      animation: {
-        duration: 0,
-      },
-      plugins: {
-        legend: {
-          display: false,
-        },
-        verticalLinePlugin: {
-          xValue: rlstore.getCurrentTime,
-        },
-      },
-      lineTension: 0,
-      tooltip: {
-        mode: "label",
-      },
-      scales: {
-        x: {
-          grid: {
-            display: false,
-          },
-          labels: policy_labels,
-          ticks: {
-            autoSkip: true,
-          },
-        },
-        y: {
-          type: "linear",
-          ticks: {
-            beginAtZero: true,
-          },
-        },
-      },
-    },
-  };
-  const ctx = document.getElementById("policy-chart");
-  // eslint-disable-next-line no-new
-  chartHandle = new Chart(ctx, RewardPlot);
-}
-
-onMounted(() => {
-  buildChart();
-});
-
-watch(
-  () => rlstore.current_time,
-  () => {
-    const policy = store.getPolicy;
-    chartHandle.options.scales.x.labels = Array(policy.length)
-      .fill(0)
-      .map((_, i) => i);
-    chartHandle.data.datasets[0].data = policy;
-    chartHandle.options.plugins.verticalLinePlugin.xValue =
-      rlstore.current_time;
-
-    chartHandle.update();
-  }
-);
-watch(
-  () => store.getTrigger,
-  () => {
-    const policy = computeRbfCurve(store.getMaxSteps, store.getWeights);
-    store.setPolicy(policy);
-
-    chartHandle.options.scales.x.labels = Array(policy.length)
-      .fill(0)
-      .map((_, i) => i);
-    chartHandle.data.datasets[0].data = policy;
-    chartHandle.options.plugins.verticalLinePlugin.xValue =
-      rlstore.current_time;
-
-    chartHandle.update();
-  }
-);
-</script>
-
-<style scoped></style>
diff --git a/ActiveBOWeb/src/components/RLCanvas.vue b/ActiveBOWeb/src/components/RLCanvas.vue
deleted file mode 100644
index f5bd0b1..0000000
--- a/ActiveBOWeb/src/components/RLCanvas.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <canvas id="MCcanvas" width="480" height="320" />
-</template>
-
-<script setup>
-import { onMounted, ref, watch } from "vue";
-import { useRLStore } from "@/store/RLStore";
-
-const rlstore = useRLStore();
-
-const imageData = ref(null);
-
-const renderImage = (width, height) => {
-  const red = rlstore.getRed;
-  const green = rlstore.getGreen;
-  const blue = rlstore.getBlue;
-
-  const rgbData = new Uint8ClampedArray(height * width * 4);
-  for (let i = 0; i < height * width; i++) {
-    const j = i * 4;
-    rgbData[j] = red[i];
-    rgbData[j + 1] = green[i];
-    rgbData[j + 2] = blue[i];
-    rgbData[j + 3] = 255;
-  }
-
-  imageData.value = rgbData;
-};
-
-const drawImage = (width, height) => {
-  if (imageData.value) {
-    const canvas = document.getElementById("MCcanvas");
-    const context = canvas.getContext("2d");
-
-    const image = new ImageData(imageData.value, width, height);
-    context.putImageData(image, 0, 0);
-  }
-};
-
-onMounted(() => {
-  const height = rlstore.getHeight;
-  const width = rlstore.getWidth;
-  renderImage(width, height);
-  drawImage(width, height);
-});
-
-watch(
-  () => rlstore.trigger,
-  () => {
-    const height = rlstore.getHeight;
-    const width = rlstore.getWidth;
-    renderImage(width, height);
-    drawImage(width, height);
-  }
-);
-</script>
-
-<style scoped></style>
diff --git a/ActiveBOWeb/src/components/RewardPlot.vue b/ActiveBOWeb/src/components/RewardPlot.vue
deleted file mode 100644
index 2e4336b..0000000
--- a/ActiveBOWeb/src/components/RewardPlot.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <canvas id="reward-chart" />
-</template>
-
-<script setup>
-import { onMounted, watch } from "vue";
-import { Chart } from "chart.js/auto";
-import { useRStore } from "@/store/RewardStore";
-
-const store = useRStore();
-
-let chartHandle;
-
-function buildChart() {
-  const reward_mean = store.getMean;
-  const reward_std = store.getStd;
-  const upper_bound = Array(reward_mean.length)
-    .fill(0)
-    .map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
-  const lower_bound = Array(reward_mean.length)
-    .fill(0)
-    .map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
-  const reward_labels = Array(reward_mean.length)
-    .fill(0)
-    .map((_, i) => i);
-  const RewardPlot = {
-    data: {
-      datasets: [
-        {
-          label: "Reward",
-          type: "line",
-          xAxisID: "x",
-          yAxisID: "y",
-          fill: false,
-          data: reward_mean,
-          borderColor: "#3DC47A",
-          borderWidth: 2,
-          pointRadius: 0,
-        },
-        {
-          type: "line",
-          xAxisID: "x",
-          yAxisID: "y",
-          fill: 0,
-          data: upper_bound,
-          pointRadius: 0,
-          borderColor: "transparent",
-          backgroundColor: "rgba(61,196,122,0.5)",
-        },
-        {
-          type: "line",
-          xAxisID: "x",
-          yAxisID: "y",
-          fill: 0,
-          data: lower_bound,
-          pointRadius: 0,
-          borderColor: "transparent",
-          backgroundColor: "rgba(61,196,122,0.5)",
-        },
-      ],
-    },
-    options: {
-      plugins: {
-        legend: {
-          display: false,
-        },
-      },
-      maintainAspectRatio: false,
-      responsive: true,
-      animation: {
-        duration: 0,
-      },
-      lineTension: 0,
-      tooltip: {
-        mode: "label",
-      },
-      scales: {
-        x: {
-          grid: {
-            display: false,
-          },
-          labels: reward_labels,
-          ticks: {
-            autoSkip: true,
-          },
-        },
-        y: {
-          type: "linear",
-          ticks: {
-            beginAtZero: false,
-            min: -110,
-            max: 0,
-          },
-        },
-      },
-    },
-  };
-  const ctx = document.getElementById("reward-chart");
-  // eslint-disable-next-line no-new
-  chartHandle = new Chart(ctx, RewardPlot);
-}
-
-onMounted(() => {
-  buildChart();
-});
-
-watch(
-  () => store.getTrigger,
-  () => {
-    const reward_mean = store.getMean;
-    const reward_std = store.getStd;
-    const upper_bound = Array(reward_mean.length)
-      .fill(0)
-      .map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
-    const lower_bound = Array(reward_mean.length)
-      .fill(0)
-      .map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
-
-    chartHandle.options.scales.x.labels = Array(reward_mean.length)
-      .fill(0)
-      .map((_, i) => i);
-    chartHandle.data.datasets[0].data = reward_mean;
-    chartHandle.data.datasets[1].data = upper_bound;
-    chartHandle.data.datasets[2].data = lower_bound;
-
-    chartHandle.update();
-  }
-);
-</script>
-
-<style scoped></style>
diff --git a/ActiveBOWeb/src/components/RosBar.vue b/ActiveBOWeb/src/components/RosBar.vue
deleted file mode 100644
index 8cb2b19..0000000
--- a/ActiveBOWeb/src/components/RosBar.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-  <v-navigation-drawer v-model="store.rosBarOpened" temporary location="right">
-    <v-container fluid>
-      <v-row justify="space-between">
-        <v-col cols="6" md="12">
-          <v-text-field
-            v-model="formState.ipaddress"
-            label="IP Address"
-            :disabled="connectionState"
-          />
-          <v-text-field
-            v-model="formState.port"
-            label="Port"
-            :disabled="connectionState"
-          />
-          <v-switch
-            @change="updateConnectionState"
-            true-value="connected"
-            false-value="not connected"
-            :label="`${formState.connect}`"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-navigation-drawer>
-</template>
-
-<script setup>
-import * as ROS from "roslib";
-import { useBWStore } from "@/store/BaseWebsiteStore";
-import { usePStore } from "@/store/PolicyStore";
-import { useCStore } from "@/store/ControlStore";
-import { useRStore } from "@/store/RewardStore";
-import { useRLStore } from "@/store/RLStore";
-
-import { reactive, ref, watch } from "vue";
-
-const store = useBWStore();
-const pstore = usePStore();
-const cstore = useCStore();
-const rstore = useRStore();
-const rlstore = useRLStore();
-
-const formState = reactive({
-  ipaddress: "localhost",
-  port: "9090",
-  connect: "not connected",
-  // connectionState: computed(() => formState.connect !== 'not connected'),
-});
-
-const connectionState = ref(false);
-const stateCounter = ref([0, 0, 0]);
-
-// Open Connection to ROSBridge and subscribe the topics.
-const ros = new ROS.Ros();
-const ros_eval = new ROS.Ros();
-
-ros.on("connection", () => {
-  stateCounter.value[0] += 1;
-});
-ros_eval.on("connection", () => {});
-
-ros.on("error", (error) => {
-  stateCounter.value[1] += 1;
-  console.log(error);
-});
-ros_eval.on("error", () => {});
-
-ros.on("close", () => {
-  stateCounter.value[2] += 1;
-});
-ros_eval.on("close", () => {});
-
-function updateConnectionState() {
-  connectionState.value = !connectionState.value;
-  if (formState.connect === "not connected") {
-    formState.connect = "connected";
-    const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
-    ros.connect(rosUrl);
-    ros_eval.connect(rosUrl);
-  } else {
-    formState.connect = "not connected";
-    ros.close();
-    ros_eval.close();
-  }
-}
-
-const lastStateCounter = [0, 0, 0];
-
-// ROS2 State Observer
-watch(stateCounter.value, (newValue) => {
-  let currentState = 0;
-  for (let i = 0; i < lastStateCounter.length; i += 1) {
-    if (newValue[i] - lastStateCounter[i] === 1) {
-      currentState = i;
-    }
-    lastStateCounter[i] = newValue[i];
-  }
-  if (currentState === 0) {
-    store.setRosConState("connected");
-  } else if (currentState === 1) {
-    store.setRosConState("error");
-  } else if (currentState === 2) {
-    store.setRosConState("not connected");
-  }
-});
-
-// State Subscriber
-const state_subscriber = new ROS.Topic({
-  ros: ros,
-  name: "/active_bo_state",
-  messageType: "active_bo_msgs/msg/ActiveBOState",
-});
-
-state_subscriber.subscribe((msg) => {
-  rlstore.setCurrentRun(msg.current_run);
-  rlstore.setCurrentEpisode(msg.current_episode);
-  rlstore.setBestReward(msg.best_reward);
-  rlstore.setLastUserReward(msg.last_user_reward);
-
-  if (msg.current_episode === 1) {
-    pstore.resetWeights_Fixed();
-  }
-});
-
-// RL Service + Feedback Subscriber
-const rl_feedback_subscriber = new ROS.Topic({
-  ros: ros,
-  name: "/rl_feedback",
-  messageType: "active_bo_msgs/msg/ImageFeedback",
-});
-
-rl_feedback_subscriber.subscribe((msg) => {
-  rlstore.setDim(msg.height, msg.width);
-  rlstore.setRgbArrays(msg.red, msg.green, msg.blue);
-  rlstore.setCurrentTime(msg.current_time);
-});
-
-const active_rl_eval_sub = new ROS.Topic({
-  ros: ros_eval,
-  name: "/active_rl_eval_request",
-  messageType: "active_bo_msgs/msg/ActiveRLEvalRequest",
-});
-
-const pendingRequest = ref(false);
-active_rl_eval_sub.subscribe((msg) => {
-  pstore.setPolicy(msg.policy);
-  pstore.setWeights(msg.weights);
-  pendingRequest.value = true;
-});
-
-const active_rl_eval_pub = new ROS.Topic({
-  ros: ros_eval,
-  name: "/active_rl_eval_response",
-  messageType: "active_bo_msgs/msg/ActiveRLEvalResponse",
-});
-
-watch(
-  () => cstore.getSendWeights,
-  () => {
-    if (!pendingRequest.value) {
-      return;
-    }
-    console.log("Button pressed!");
-    const active_eval_response = new ROS.Message({
-      policy: pstore.policy,
-      weights: pstore.weights,
-      overwrite_weight: pstore.weights_fixed,
-    });
-
-    console.log(active_eval_response);
-
-    active_rl_eval_pub.publish(active_eval_response);
-    console.log("New Policy/ Weights published");
-    pendingRequest.value = false;
-  }
-);
-
-const active_bo_pending = ref(false);
-
-const active_bo_request = new ROS.Topic({
-  ros: ros,
-  name: "/active_bo_request",
-  messageType: "active_bo_msgs/msg/ActiveBORequest",
-});
-
-const active_bo_response = new ROS.Topic({
-  ros: ros,
-  name: "/active_bo_response",
-  messageType: "active_bo_msgs/msg/ActiveBOResponse",
-});
-
-active_bo_response.subscribe((msg) => {
-  pstore.setPolicy(msg.best_policy);
-  pstore.setWeights(msg.best_weights);
-  rstore.setMean(msg.reward_mean);
-  rstore.setStd(msg.reward_std);
-  active_bo_pending.value = false;
-});
-
-watch(
-  () => cstore.getRunner,
-  () => {
-    const request_msg = new ROS.Message({
-      env: cstore.env,
-      metric: cstore.metric,
-      fixed_seed: cstore.fixed_seed,
-      nr_weights: pstore.nr_weights,
-      max_steps: pstore.max_steps,
-      nr_episodes: cstore.nr_episodes,
-      nr_runs: cstore.nr_runs,
-      acquisition_function: cstore.acq_fun,
-      metric_parameter: cstore.metric_parameter,
-      metric_parameter_2: cstore.improvement_2,
-      save_result: cstore.save_result,
-      overwrite: cstore.overwrite,
-    });
-    active_bo_pending.value = true;
-    active_bo_request.publish(request_msg);
-  }
-);
-</script>
-
-<style scoped></style>
diff --git a/ActiveBOWeb/src/components/SideBar.vue b/ActiveBOWeb/src/components/SideBar.vue
deleted file mode 100644
index ef2bf5f..0000000
--- a/ActiveBOWeb/src/components/SideBar.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <v-navigation-drawer class="nav-drawer" permanent width="64">
-    <v-list class="py-3">
-      <v-list-item style="padding: 0" class="py-2">
-        <div class="tile">
-          <span
-            style="
-              font-size: 14px;
-              text-align: center;
-              word-wrap: break-word;
-              padding: 0;
-            "
-            >Current <br />
-            Run <br />
-            {{ rlstore.current_run }}</span
-          >
-        </div>
-      </v-list-item>
-      <v-list-item style="padding: 0" class="py-2">
-        <div class="tile">
-          <span
-            style="
-              font-size: 14px;
-              text-align: center;
-              word-wrap: break-word;
-              padding: 0;
-            "
-            >Current <br />
-            Episode <br />
-            {{ rlstore.current_episode }}</span
-          >
-        </div>
-      </v-list-item>
-      <v-list-item style="padding: 0" class="py-2">
-        <div class="tile">
-          <span
-            style="
-              font-size: 14px;
-              text-align: center;
-              word-wrap: break-word;
-              padding: 0;
-            "
-            >Best <br />
-            Reward <br />
-            {{ rlstore.best_reward.toFixed(1) }}</span
-          >
-        </div>
-      </v-list-item>
-      <v-list-item style="padding: 0" class="py-2">
-        <div class="tile">
-          <span
-            style="
-              font-size: 14px;
-              text-align: center;
-              word-wrap: break-word;
-              padding: 0;
-            "
-            >User <br />
-            Reward <br />
-            {{ rlstore.last_user_reward.toFixed(1) }}</span
-          >
-        </div>
-      </v-list-item>
-    </v-list>
-  </v-navigation-drawer>
-</template>
-
-<script setup>
-import { useRLStore } from "@/store/RLStore";
-const rlstore = useRLStore();
-</script>
-
-<style scoped>
-.tile {
-  width: 63px;
-  height: 64px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid rgba(255, 255, 255, 0.12);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-}
-</style>
diff --git a/ActiveBOWeb/src/components/SubLayout.vue b/ActiveBOWeb/src/components/SubLayout.vue
deleted file mode 100644
index a4a2377..0000000
--- a/ActiveBOWeb/src/components/SubLayout.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <v-container fluid class="sub-layout">
-    <v-row no-gutters>
-      <v-col cols="12" md="8">
-        <v-row no-gutters>
-          <v-col cols="12">
-            <v-card
-              class="tile"
-              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
-            >
-              <policy-plot />
-            </v-card>
-          </v-col>
-          <v-col cols="12">
-            <v-card
-              class="tile"
-              :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
-            >
-              <weight-tuner />
-            </v-card>
-          </v-col>
-          <v-col cols="12">
-            <v-card
-              class="tile"
-              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
-            >
-              <reward-plot />
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-col>
-      <v-col cols="12" md="4">
-        <v-row no-gutters>
-          <v-col cols="12">
-            <v-card
-              class="tile"
-              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
-            >
-              <RLCanvas />
-            </v-card>
-          </v-col>
-          <v-col cols="12">
-            <v-card
-              class="tile"
-              :style="{ height: 'calc(60vh - 48px)', width: '100%' }"
-            >
-              <control-panel />
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script setup>
-import WeightTuner from "@/components/WeightTuner.vue";
-import RewardPlot from "@/components/RewardPlot.vue";
-import PolicyPlot from "@/components/PolicyPlot.vue";
-import ControlPanel from "@/components/ControlPanel.vue";
-import RLCanvas from "@/components/RLCanvas.vue";
-</script>
-
-<style scoped>
-.sub-layout {
-  padding: 0;
-  margin: 1px 0 0 0;
-}
-.tile {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: 1px solid #333;
-}
-</style>
diff --git a/ActiveBOWeb/src/components/WeightTuner.vue b/ActiveBOWeb/src/components/WeightTuner.vue
deleted file mode 100644
index d2d8b3e..0000000
--- a/ActiveBOWeb/src/components/WeightTuner.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <v-row no-gutters justify="center" class="weight-tuner">
-    <!-- eslint-disable-next-line -->
-    <v-col v-for="(_ , idx) in weights" :key="idx">
-      <div class="weight-container">
-        <vue-slider
-          class="slider-margin-bottom"
-          v-model="weights[idx]"
-          @change="updateWeight(idx, $event)"
-          direction="btt"
-          :height="100"
-          :min="-1"
-          :max="1"
-          :interval="0.01"
-          :disabled="store.weights_fixed[idx]"
-        />
-        <v-checkbox
-          class="ma-0 checkbox-bottom"
-          v-model="store.weights_fixed[idx]"
-        />
-      </div>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-import { usePStore } from "@/store/PolicyStore";
-
-import VueSlider from "vue-slider-component";
-import "vue-slider-component/theme/default.css";
-import { computed } from "vue";
-
-const store = usePStore();
-
-const weights = computed({
-  get: () => store.weights,
-  set: (value) => store.setWeights(value),
-});
-
-const updateWeight = (index, newValue) => {
-  const newWeights = weights.value.slice();
-  newWeights[index] = newValue;
-  store.setWeights(newWeights);
-  store.setTrigger();
-};
-</script>
-
-<style scoped>
-.weight-tuner {
-  height: 140px;
-}
-.weight-container {
-  height: 180px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-}
-.slider-margin-bottom {
-  margin-bottom: 0; /* adjust this value as necessary */
-}
-.checkbox-bottom {
-  //position: absolute;
-  //bottom: 0;
-  padding: 5px 0 0 0;
-}
-</style>
diff --git a/ActiveBOWeb/src/js_funs/online_rbf_policy.js b/ActiveBOWeb/src/js_funs/online_rbf_policy.js
deleted file mode 100644
index a531f1b..0000000
--- a/ActiveBOWeb/src/js_funs/online_rbf_policy.js
+++ /dev/null
@@ -1,19 +0,0 @@
-function rbf(x, centre, sigma) {
-  return Math.exp(-Math.pow(x - centre, 2) / (2 * Math.pow(sigma, 2)));
-}
-
-export function computeRbfCurve(nrPoints, weights) {
-  const centers = Array.from(
-    { length: weights.length },
-    (_, i) => (i * nrPoints) / (weights.length - 1)
-  );
-  const sigma = centers[1] / (2 * Math.sqrt(2 * Math.log(2)));
-
-  let policy = Array(nrPoints).fill(0);
-  for (let x = 0; x < nrPoints; x++) {
-    for (let i = 0; i < centers.length; i++) {
-      policy[x] += weights[i] * rbf(x, centers[i], sigma);
-    }
-  }
-  return policy;
-}
diff --git a/ActiveBOWeb/src/store/ControlStore.js b/ActiveBOWeb/src/store/ControlStore.js
deleted file mode 100644
index b269dde..0000000
--- a/ActiveBOWeb/src/store/ControlStore.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useCStore = defineStore("Control Store", {
-  state: () => {
-    return {
-      env: "Mountain Car",
-      envs: ["Mountain Car", "Cartpole", "Acrobot", "Pendulum"],
-      metric: "random",
-      metrics: ["random", "regular", "improvement", "max_acquisition"],
-      metrics_label: {
-        random: "Probability",
-        regular: "Repetition",
-        improvement: "Improvement Threshold",
-        max_acquisition: "Threshold",
-      },
-      metric_limits: {
-        random: [0.0, 1.0, 0.01],
-        regular: [1, 100, 1],
-        improvement: [0.0, 1.0, 0.01],
-        max_acquisition: [1, 200, 1],
-      },
-      acq_fun: "Expected Improvement",
-      acq_funs: [
-        "Expected Improvement",
-        "Probability of Improvement",
-        "Upper Confidence Bound",
-      ],
-      nr_episodes: 50,
-      nr_runs: 10,
-      metric_parameter: 0.5,
-      improvement_2: 5,
-      sendWeights: false,
-      runner: false,
-      fixed_seed: false,
-      save_result: false,
-      overwrite: false,
-    };
-  },
-  getters: {
-    getEnv: (state) => state.env,
-    getMetric: (state) => state.metric,
-    getNrEpisodes: (state) => state.nr_episodes,
-    getNrRuns: (state) => state.nr_runs,
-    getMetricParameter: (state) => state.metric_parameter,
-    getSendWeights: (state) => state.sendWeights,
-    getRunner: (state) => state.runner,
-    getAcq: (state) => state.acq_fun,
-  },
-  actions: {
-    setEnv(value) {
-      this.env = value;
-    },
-    setMetric(value) {
-      this.metric = value;
-    },
-    setNrEpisodes(value) {
-      this.nr_episodes = value;
-    },
-    setNrRuns(value) {
-      this.nr_runs = value;
-    },
-    setMetricParameter(value) {
-      this.metric_parameter = value;
-    },
-    setSendWeights() {
-      this.sendWeights = !this.sendWeights;
-    },
-    setRunner() {
-      this.runner = !this.runner;
-    },
-    setAcq(value) {
-      this.acq_fun = value;
-    },
-  },
-});
diff --git a/ActiveBOWeb/src/store/PolicyStore.js b/ActiveBOWeb/src/store/PolicyStore.js
deleted file mode 100644
index e41c867..0000000
--- a/ActiveBOWeb/src/store/PolicyStore.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { defineStore } from "pinia";
-
-export const usePStore = defineStore("Policy Store", {
-  state: () => {
-    return {
-      policy: Array(10).fill(0),
-      nr_weights: 5,
-      weights: [0, 0, 0, 0, 0],
-      weights_fixed: [false, false, false, false, false],
-      max_steps: 100,
-      trigger: false,
-    };
-  },
-  getters: {
-    getPolicy: (state) => state.policy,
-    getNrWeights: (state) => state.nr_weights,
-    getWeights_Fixed: (state) => state.weights_fixed,
-    getWeights: (state) => state.weights,
-    getMaxSteps: (state) => state.max_steps,
-    getTrigger: (state) => state.trigger,
-  },
-  actions: {
-    setPolicy(value) {
-      this.policy = null;
-      this.policy = value;
-    },
-    setNrWeights(value) {
-      this.nr_weights = value;
-      this.weights = Array(this.nr_weights).fill(0);
-      this.weights_fixed = Array(this.nr_weights).fill(false);
-      this.trigger = !this.trigger;
-    },
-    setWeights(value) {
-      this.weights = value;
-    },
-    setMaxSteps(value) {
-      this.max_steps = value;
-      this.trigger = !this.trigger;
-    },
-    setTrigger() {
-      this.trigger = !this.trigger;
-    },
-    resetWeights_Fixed() {
-      this.weights_fixed = Array(this.nr_weights).fill(false);
-    },
-  },
-});
diff --git a/ActiveBOWeb/src/store/RLStore.js b/ActiveBOWeb/src/store/RLStore.js
deleted file mode 100644
index 0851e5c..0000000
--- a/ActiveBOWeb/src/store/RLStore.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useRLStore = defineStore("RL Store", {
-  state: () => {
-    return {
-      red: Array(153600).fill(120),
-      green: Array(153600).fill(120),
-      blue: Array(153600).fill(120),
-      width: 480,
-      height: 320,
-      current_time: 0,
-      current_run: 0,
-      current_episode: 0,
-      best_reward: 0.0,
-      last_user_reward: 0.0,
-      trigger: false,
-    };
-  },
-  getters: {
-    getRed: (state) => state.red,
-    getGreen: (state) => state.green,
-    getBlue: (state) => state.blue,
-    getHeight: (state) => state.height,
-    getWidth: (state) => state.width,
-    getCurrentTime: (state) => state.current_time,
-    getCurrentRun: (state) => state.current_run,
-    getCurrentEpisode: (state) => state.current_episode,
-    getBestReward: (state) => state.best_reward,
-    getLastUserReward: (state) => state.last_user_reward,
-  },
-  actions: {
-    setRgbArrays(red, green, blue) {
-      this.red = red;
-      this.green = green;
-      this.blue = blue;
-      this.trigger = !this.trigger;
-    },
-    setDim(height, width) {
-      this.height = height;
-      this.width = width;
-    },
-    setCurrentTime(value) {
-      this.current_time = value;
-    },
-    setCurrentRun(value) {
-      this.current_run = value;
-    },
-    setCurrentEpisode(value) {
-      this.current_episode = value;
-    },
-    setBestReward(value) {
-      this.best_reward = value;
-    },
-    setLastUserReward(value) {
-      this.last_user_reward = value;
-    },
-  },
-});
diff --git a/ActiveBOWeb/src/store/RewardStore.js b/ActiveBOWeb/src/store/RewardStore.js
deleted file mode 100644
index 7648a84..0000000
--- a/ActiveBOWeb/src/store/RewardStore.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useRStore = defineStore("Reward Store", {
-  state: () => {
-    return {
-      reward_mean: [],
-      reward_std: [],
-      trigger: false,
-    };
-  },
-  getters: {
-    getMean: (state) => state.reward_mean,
-    getStd: (state) => state.reward_std,
-    getTrigger: (state) => state.trigger,
-  },
-  actions: {
-    setMean(value) {
-      this.reward_mean = value;
-    },
-    setStd(value) {
-      this.reward_std = value;
-      this.trigger = !this.trigger;
-    },
-    addMeanManually(value) {
-      this.reward_mean[this.reward_mean.length] = value;
-      this.reward_std[this.reward_std.length] = 0;
-      this.trigger = !this.trigger;
-    },
-  },
-});
diff --git a/ActiveBOWeb/.eslintrc.cjs b/FanucWeb/.eslintrc.cjs
similarity index 100%
rename from ActiveBOWeb/.eslintrc.cjs
rename to FanucWeb/.eslintrc.cjs
diff --git a/ActiveBOWeb/.gitignore b/FanucWeb/.gitignore
similarity index 100%
rename from ActiveBOWeb/.gitignore
rename to FanucWeb/.gitignore
diff --git a/ActiveBOWeb/.prettierrc.json b/FanucWeb/.prettierrc.json
similarity index 100%
rename from ActiveBOWeb/.prettierrc.json
rename to FanucWeb/.prettierrc.json
diff --git a/ActiveBOWeb/.vscode/extensions.json b/FanucWeb/.vscode/extensions.json
similarity index 100%
rename from ActiveBOWeb/.vscode/extensions.json
rename to FanucWeb/.vscode/extensions.json
diff --git a/ActiveBOWeb/README.md b/FanucWeb/README.md
similarity index 100%
rename from ActiveBOWeb/README.md
rename to FanucWeb/README.md
diff --git a/ActiveBOWeb/env.d.ts b/FanucWeb/env.d.ts
similarity index 100%
rename from ActiveBOWeb/env.d.ts
rename to FanucWeb/env.d.ts
diff --git a/ActiveBOWeb/index.html b/FanucWeb/index.html
similarity index 91%
rename from ActiveBOWeb/index.html
rename to FanucWeb/index.html
index 2ad8df9..3fe71f1 100644
--- a/ActiveBOWeb/index.html
+++ b/FanucWeb/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/CPS_White.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Active BO</title>
+    <title>Fanuc Web</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/ActiveBOWeb/package.json b/FanucWeb/package.json
similarity index 100%
rename from ActiveBOWeb/package.json
rename to FanucWeb/package.json
diff --git a/ActiveBOWeb/public/CPS_White.ico b/FanucWeb/public/CPS_White.ico
similarity index 100%
rename from ActiveBOWeb/public/CPS_White.ico
rename to FanucWeb/public/CPS_White.ico
diff --git a/ActiveBOWeb/public/favicon.ico b/FanucWeb/public/favicon.ico
similarity index 100%
rename from ActiveBOWeb/public/favicon.ico
rename to FanucWeb/public/favicon.ico
diff --git a/ActiveBOWeb/src/App.vue b/FanucWeb/src/App.vue
similarity index 100%
rename from ActiveBOWeb/src/App.vue
rename to FanucWeb/src/App.vue
diff --git a/ActiveBOWeb/src/assets/CPS_Logo_Black.png b/FanucWeb/src/assets/CPS_Logo_Black.png
similarity index 100%
rename from ActiveBOWeb/src/assets/CPS_Logo_Black.png
rename to FanucWeb/src/assets/CPS_Logo_Black.png
diff --git a/ActiveBOWeb/src/assets/CPS_Logo_White.png b/FanucWeb/src/assets/CPS_Logo_White.png
similarity index 100%
rename from ActiveBOWeb/src/assets/CPS_Logo_White.png
rename to FanucWeb/src/assets/CPS_Logo_White.png
diff --git a/FanucWeb/src/components/BaseLayout.vue b/FanucWeb/src/components/BaseLayout.vue
new file mode 100644
index 0000000..22561c2
--- /dev/null
+++ b/FanucWeb/src/components/BaseLayout.vue
@@ -0,0 +1,15 @@
+<template>
+  <TopBar />
+  <SideBar />
+  <SubLayout />
+  <RosBar />
+</template>
+
+<script setup>
+import TopBar from "@/components/TopBar.vue";
+import RosBar from "@/components/RosBar.vue";
+import SideBar from "@/components/SideBar.vue";
+import SubLayout from "@/components/SubLayout.vue";
+</script>
+
+<style scoped></style>
diff --git a/FanucWeb/src/components/RosBar.vue b/FanucWeb/src/components/RosBar.vue
new file mode 100644
index 0000000..0a09d8c
--- /dev/null
+++ b/FanucWeb/src/components/RosBar.vue
@@ -0,0 +1,104 @@
+<template>
+  <v-navigation-drawer v-model="store.rosBarOpened" temporary location="right">
+    <v-container fluid>
+      <v-row justify="space-between">
+        <v-col cols="6" md="12">
+          <v-text-field
+            v-model="formState.ipaddress"
+            label="IP Address"
+            :disabled="connectionState"
+          />
+          <v-text-field
+            v-model="formState.port"
+            label="Port"
+            :disabled="connectionState"
+          />
+          <v-switch
+            @change="updateConnectionState"
+            true-value="connected"
+            false-value="not connected"
+            :label="`${formState.connect}`"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import * as ROS from "roslib";
+import { useBWStore } from "@/store/BaseWebsiteStore";
+
+import { reactive, ref, watch } from "vue";
+
+const store = useBWStore();
+
+const formState = reactive({
+  ipaddress: "localhost",
+  port: "9090",
+  connect: "not connected",
+  // connectionState: computed(() => formState.connect !== 'not connected'),
+});
+
+const connectionState = ref(false);
+const stateCounter = ref([0, 0, 0]);
+
+// Open Connection to ROSBridge and subscribe the topics.
+const ros = new ROS.Ros();
+const ros_eval = new ROS.Ros();
+
+ros.on("connection", () => {
+  stateCounter.value[0] += 1;
+});
+ros_eval.on("connection", () => {});
+
+ros.on("error", (error) => {
+  stateCounter.value[1] += 1;
+  console.log(error);
+});
+ros_eval.on("error", () => {});
+
+ros.on("close", () => {
+  stateCounter.value[2] += 1;
+});
+ros_eval.on("close", () => {});
+
+function updateConnectionState() {
+  connectionState.value = !connectionState.value;
+  if (formState.connect === "not connected") {
+    formState.connect = "connected";
+    const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
+    ros.connect(rosUrl);
+    ros_eval.connect(rosUrl);
+  } else {
+    formState.connect = "not connected";
+    ros.close();
+    ros_eval.close();
+  }
+}
+
+const lastStateCounter = [0, 0, 0];
+
+// ROS2 State Observer
+watch(stateCounter.value, (newValue) => {
+  let currentState = 0;
+  for (let i = 0; i < lastStateCounter.length; i += 1) {
+    if (newValue[i] - lastStateCounter[i] === 1) {
+      currentState = i;
+    }
+    lastStateCounter[i] = newValue[i];
+  }
+  if (currentState === 0) {
+    store.setRosConState("connected");
+  } else if (currentState === 1) {
+    store.setRosConState("error");
+  } else if (currentState === 2) {
+    store.setRosConState("not connected");
+  }
+});
+
+// ROS Topics and services below here
+
+</script>
+
+<style scoped></style>
diff --git a/FanucWeb/src/components/SideBar.vue b/FanucWeb/src/components/SideBar.vue
new file mode 100644
index 0000000..400c25b
--- /dev/null
+++ b/FanucWeb/src/components/SideBar.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-navigation-drawer class="nav-drawer" permanent width="64">
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+.tile {
+  width: 63px;
+  height: 64px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+</style>
diff --git a/FanucWeb/src/components/SubLayout.vue b/FanucWeb/src/components/SubLayout.vue
new file mode 100644
index 0000000..8fcdcb1
--- /dev/null
+++ b/FanucWeb/src/components/SubLayout.vue
@@ -0,0 +1,19 @@
+<template></template>
+
+<script setup></script>
+
+<style scoped>
+.sub-layout {
+  padding: 0;
+  margin: 1px 0 0 0;
+}
+.tile {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #333;
+}
+</style>
diff --git a/ActiveBOWeb/src/components/TopBar.vue b/FanucWeb/src/components/TopBar.vue
similarity index 100%
rename from ActiveBOWeb/src/components/TopBar.vue
rename to FanucWeb/src/components/TopBar.vue
diff --git a/ActiveBOWeb/src/main.ts b/FanucWeb/src/main.ts
similarity index 100%
rename from ActiveBOWeb/src/main.ts
rename to FanucWeb/src/main.ts
diff --git a/ActiveBOWeb/src/store/BaseWebsiteStore.js b/FanucWeb/src/store/BaseWebsiteStore.js
similarity index 100%
rename from ActiveBOWeb/src/store/BaseWebsiteStore.js
rename to FanucWeb/src/store/BaseWebsiteStore.js
diff --git a/ActiveBOWeb/tsconfig.config.json b/FanucWeb/tsconfig.config.json
similarity index 100%
rename from ActiveBOWeb/tsconfig.config.json
rename to FanucWeb/tsconfig.config.json
diff --git a/ActiveBOWeb/tsconfig.json b/FanucWeb/tsconfig.json
similarity index 100%
rename from ActiveBOWeb/tsconfig.json
rename to FanucWeb/tsconfig.json
diff --git a/ActiveBOWeb/vite.config.ts b/FanucWeb/vite.config.ts
similarity index 100%
rename from ActiveBOWeb/vite.config.ts
rename to FanucWeb/vite.config.ts