diff --git a/src/App.vue b/src/App.vue
index 7552b8f..da451e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@ import { RouterView } from 'vue-router'
 </template>
 
 <style scoped>
+/* base measurements for any screen size */
   .content-container {
     display: flex;
     justify-content: center;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6584f5b..240acb2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+// Variables for shortening logic
 const url = ref<string>('')
 const shortUrl = ref<string>('')
 
+
+// Logic for shortening needs to be added here
 const handleShorten = (): void => {
-  // Logik hier einfügen
   console.log('Shortening:', url.value)
 }
 
@@ -17,6 +19,7 @@ const handleCopy = async (): Promise<void> => {
 }
 </script>
 
+
 <template>
   <div class="page-layout">
     <div class="content-wrapper">
@@ -49,6 +52,7 @@ const handleCopy = async (): Promise<void> => {
               placeholder="Short URL appears here..."
               class="text-input readonly"
             />
+
             <button @click="handleCopy" class="btn-primary">
               Copy <span class="copy-icon pi pi-copy"></span>
             </button>
@@ -60,14 +64,14 @@ const handleCopy = async (): Promise<void> => {
 </template>
 
 <style scoped>
-/* Grundlayout: Zentriert alles auf der Seite */
+/* Base centering layout */
 .page-layout {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   width: 100%;
-  background-color: #05080f; /* Sehr dunkles Blau/Schwarz */
+  background-color: #05080f;
   margin: 0;
   font-family:
     'Inter',
@@ -75,7 +79,7 @@ const handleCopy = async (): Promise<void> => {
     sans-serif;
 }
 
-/* Container für Logo + Panel */
+/* Container for Logo + Panel */
 .content-wrapper {
   display: flex;
   flex-direction: column;
@@ -86,7 +90,7 @@ const handleCopy = async (): Promise<void> => {
   padding: 20px;
 }
 
-/* Logo Styling mit Glow */
+/* Logo Styling */
 .logo {
   color: var(--primary-color);
   font-size: 6rem;
@@ -96,7 +100,7 @@ const handleCopy = async (): Promise<void> => {
   text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
 }
 
-/* Das Panel */
+/* Panel */
 .panel {
   background-color: var(--panel-color);
   border: 1px solid var(--border-color);