diff --git a/components/Cloud.vue b/components/Cloud.vue
index 7882a76..f27d9ad 100644
--- a/components/Cloud.vue
+++ b/components/Cloud.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="p-4 bg-japonica-500 dark:bg-japonica-700">
+  <div class="p-4 dark:bg-black bg-white rounded-lg border-2 border-[#5FD6D0] shadow-lg">
     <h2>
       <button class="flex items-center justify-between w-full" @click.prevent="accordionOpen = !accordionOpen"
         :aria-expanded="accordionOpen" aria-controls="accordion-text-01">
         <div>
           <div class="flex flex-col">
-            <h1 class="font-bold text-2xl text-black">CLOUD TRANSFER</h1>
+            <h1 class="font-bold text-2xl">CLOUD TRANSFER</h1>
           </div>
         </div>
         <div>
diff --git a/layouts/default.vue b/layouts/default.vue
index 4190604..33a2267 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,22 @@
 <template>
     <div>
+        <header class="dark:bg-black dark:text-white bg-white text-black h-full">
+            <div class="flex justify-between p-4">
+                <div class="text-3xl font-bold font-sans">
+                    <h1>MagicDrop</h1>
+                </div>
+                <div class="text-3xl font-bold font-sans">
+                    <UButton :icon="$colorMode.value === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'" size="xl"
+                        color="white" variant="link" @click="switchColorMode" />
+                </div>
+            </div>
+        </header>
         <slot />
     </div>
-</template>
\ No newline at end of file
+</template>
+<script setup>
+const colorMode = useColorMode();
+function switchColorMode () {
+    colorMode.value = colorMode.value === "dark" ? "light" : "dark";
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 36c4a33..f7ca9a1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,69 +1,19 @@
 <template>
   <div>
-    <header class="bg-[#3d405b] text-white h-36">
-      <div class="flex justify-between p-4">
-        <div class="text-6xl font-bold font-sans">
-          <h1>MagicDrop</h1>
+    <main class="p-4">
+      <div class="flex w-full mb-2">
+        <div class="w-1/2 h-40 rounded-lg bg-downy-300 mr-1 hover:w-3/4 text-center flex justify-center items-center">
+          <NuxtLink to="/Send">
+            <h1 class="text-3xl text-bold">Sender</h1>
+          </NuxtLink>
         </div>
-        <div class="text-6xl font-bold font-sans">
-          <UButton :icon="$colorMode.value === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'" size="xl" color="white"
-            variant="link" @click="switchColorMode" />
+        <div class="w-1/2 h-40 rounded-lg bg-blue-500 ml-1 hover:w-3/4 flex justify-center items-center">
+          <NuxtLink to="/Receive">
+            <h1 class="text-3xl text-bold">Receiver</h1>
+          </NuxtLink>
         </div>
       </div>
-    </header>
-    <main>
-      <div class="w-full min-h-12 bg-[#f2cc8f] text-black p-4 flex justify-between">
-        <div>
-          <h1 class="font-bold text-2xl">RECEIVING</h1>
-          <p class="text-sm">
-            Your device will shown as <b>{{ characterName }}</b>
-          </p>
-        </div>
-        <div>
-          <UToggle size="md" :model-value="true" />
-        </div>
-      </div>
-      <div>
-        <Peers :data="data" :loading="pending" />
-        <Cloud :characterName="characterName" />
-      </div>
+      <Cloud :characterName="'Data'" />
     </main>
   </div>
 </template>
-
-<script setup>
-import Peer from "peerjs";
-import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator";
-const characterName = uniqueNamesGenerator({
-  dictionaries: [adjectives, starWars],
-}).replace(/\s/g, "");
-
-const { data, pending, refresh } = await useFetch(
-  "http://192.168.137.1:9000/peerjs/peers",
-  {
-    transform (data) {
-      return data.filter((el) => el !== characterName);
-    },
-  }
-);
-useIntervalFn(() => {
-  console.log("Refreshing...");
-  refresh();
-}, 10000);
-
-let myPeer = null;
-
-// Connect to the PeerJS Server using the configured URL
-const serverUrl = process.env.PEERJS_SERVER_URL || "192.168.137.1:9000";
-const options = {
-  host: serverUrl.split(":")[0],
-  port: serverUrl.split(":")[1],
-  path: "/",
-  debug: 3,
-};
-myPeer = new Peer(characterName, {}); // Connect to server
-const colorMode = useColorMode();
-function switchColorMode () {
-  colorMode.value = colorMode.value === "dark" ? "light" : "dark";
-}
-</script>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1a2ceb6..552aee7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,73 +4,18 @@ export default <Partial<Config>>{
   theme: {
     extend: {
       colors: {
-        "gun-powder": {
-          "50": "#f5f6f9",
-          "100": "#e7eaf2",
-          "200": "#d5dae8",
-          "300": "#b8c2d8",
-          "400": "#95a3c5",
-          "500": "#7c89b5",
-          "600": "#6a73a6",
-          "700": "#5e6497",
-          "800": "#50547d",
-          "900": "#3d405b",
-          "950": "#2c2d3f",
-        },
-
-        grandis: {
-          "50": "#fdf8ef",
-          "100": "#fbf0d9",
-          "200": "#f6ddb2",
-          "300": "#f2cc8f",
-          "400": "#e9a44e",
-          "500": "#e48a2b",
-          "600": "#d57121",
-          "700": "#b1581d",
-          "800": "#8d461f",
-          "900": "#723b1c",
-          "950": "#3d1c0d",
-        },
-
-        "bay-leaf": {
-          "50": "#f4f9f6",
-          "100": "#dcebe3",
-          "200": "#b9d6c6",
-          "300": "#81b29a",
-          "400": "#669b82",
-          "500": "#4c8069",
-          "600": "#3b6654",
-          "700": "#325345",
-          "800": "#2b443a",
-          "900": "#273a33",
-          "950": "#13201c",
-        },
-
-        japonica: {
-          "50": "#fdf5f3",
-          "100": "#fbeae5",
-          "200": "#f9d8cf",
-          "300": "#f3bcae",
-          "400": "#eb957e",
-          "500": "#e07a5f",
-          "600": "#ca5738",
-          "700": "#a9462c",
-          "800": "#8d3c27",
-          "900": "#753727",
-          "950": "#3f1a10",
-        },
-        "quarter-spanish-white": {
-          "50": "#f9f7ed",
-          "100": "#f4f1de",
-          "200": "#e2d8a6",
-          "300": "#d1bd73",
-          "400": "#c3a54c",
-          "500": "#b3913f",
-          "600": "#9a7434",
-          "700": "#7c572c",
-          "800": "#68482b",
-          "900": "#5a3d29",
-          "950": "#342014",
+        downy: {
+          "50": "#f1fcfa",
+          "100": "#d1f6f2",
+          "200": "#a4ebe5",
+          "300": "#5fd6d0",
+          "400": "#40c1bf",
+          "500": "#27a5a4",
+          "600": "#1d8284",
+          "700": "#1b686a",
+          "800": "#1a5355",
+          "900": "#1a4547",
+          "950": "#09272a",
         },
       },
     },