diff --git a/assets/css/index.scss b/assets/css/index.scss
index 8970654..0cfac92 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -82,11 +82,9 @@ main {
   letter-spacing: 1;
   border-radius: 10px;
   width: 100%;
-  white-space: pre-wrap;
-  word-wrap: break-word;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   overflow: hidden;
   z-index: 2;
   color: $text;
@@ -95,8 +93,12 @@ main {
     padding: 8px;
   }
 
-  span {
+  span.content-text {
     font-family: CommitMono !important;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
   }
 
   .image {
diff --git a/pages/index.vue b/pages/index.vue
index 7b44826..fc4c925 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -47,7 +47,7 @@
           <img :src="pageOgImage" alt="Image" class="image" />
         </div>
         <OverlayScrollbarsComponent v-else class="content">
-          <span>{{ selectedItem?.content || "" }}</span>
+          <span class="content-text">{{ selectedItem?.content || "" }}</span>
         </OverlayScrollbarsComponent>
         <OverlayScrollbarsComponent
           class="information"