diff --git a/app/components/content/Alert.vue b/app/components/content/Alert.vue
new file mode 100644
index 0000000..5132f9f
--- /dev/null
+++ b/app/components/content/Alert.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  type?: 'info' | 'warning' | 'tip' | 'danger'
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+})
+
+const iconMap = {
+  info: 'i-heroicons-information-circle',
+  warning: 'i-heroicons-exclamation-triangle',
+  tip: 'i-heroicons-light-bulb',
+  danger: 'i-heroicons-x-circle',
+}
+const colorMap = {
+  info: 'info',
+  warning: 'warning',
+  tip: 'success',
+  danger: 'error',
+}
+</script>
+
+<template>
+  <UAlert
+    :icon="iconMap[props.type]"
+    :color="colorMap[props.type] as any"
+    variant="soft"
+    class="my-4"
+  >
+    <template #description>
+      <ContentSlot :use="$slots.default" unwrap="p" />
+    </template>
+  </UAlert>
+</template>
diff --git a/app/components/content/ProseImg.vue b/app/components/content/ProseImg.vue
new file mode 100644
index 0000000..c71b862
--- /dev/null
+++ b/app/components/content/ProseImg.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  alt?: string
+  title?: string
+  width?: string | number
+  height?: string | number
+}
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+})
+</script>
+
+<template>
+  <NuxtImg
+    :src="props.src"
+    :alt="props.alt"
+    :title="props.title"
+    :width="props.width"
+    :height="props.height"
+    class="rounded-lg w-full"
+    sizes="sm:600px md:800px lg:1000px"
+  />
+</template>