diff --git a/apps/builder/app/builder/features/components/components.tsx b/apps/builder/app/builder/features/components/components.tsx
index 362ce3f21cf6..21051ca1a801 100644
--- a/apps/builder/app/builder/features/components/components.tsx
+++ b/apps/builder/app/builder/features/components/components.tsx
@@ -55,6 +55,7 @@ type Meta = {
   label: string;
   description: undefined | string;
   icon?: string;
+  firstInstance: { component: string; tag?: string };
 };
 
 const $metas = computed(
@@ -87,6 +88,7 @@ const $metas = computed(
         order: componentMeta.order,
         label: getInstanceLabel({ component: name }, componentMeta),
         description: componentMeta.description,
+        firstInstance: { component: name },
       });
     }
     for (const [name, templateMeta] of templates) {
@@ -103,6 +105,7 @@ const $metas = computed(
         continue;
       }
 
+      availableComponents.add(name);
       metas.push({
         name,
         category: templateMeta.category ?? "hidden",
@@ -113,6 +116,7 @@ const $metas = computed(
           getInstanceLabel({ component: name }, templateMeta),
         description: templateMeta.description,
         icon: templateMeta.icon,
+        firstInstance: templateMeta.template.instances[0],
       });
     }
     const metasByCategory = mapGroupBy(metas, (meta) => meta.category);
@@ -339,7 +343,7 @@ export const ComponentsPanel = ({
                       icon={
                         <InstanceIcon
                           size="auto"
-                          instance={{ component: meta.name }}
+                          instance={meta.firstInstance}
                           // for cases like Sheet template
                           icon={meta.icon}
                         />
diff --git a/apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx b/apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx
index 993f0e47e37e..2e9acf45b79f 100644
--- a/apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx
+++ b/apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx
@@ -79,15 +79,15 @@ export const TagControl = ({ meta, prop }: ControlProps<"tag">) => {
     >
       {options.length > 10 ? (
         <Combobox<string>
-          defaultHighlightedIndex={0}
           getItems={() => options}
+          itemToString={(item) => item ?? options[0]}
+          value={value ?? computedTag}
+          selectedItem={computedTag}
+          onChange={(value) => setValue(value ?? undefined)}
           onItemSelect={(item) => {
             updateTag(item);
             setValue(undefined);
           }}
-          itemToString={(item) => item ?? options[0]}
-          value={value ?? computedTag}
-          onChange={(value) => setValue(value ?? undefined)}
           getDescription={(item) => (
             <Box css={{ width: theme.spacing[28] }}>
               {elementsByTag[item ?? ""]?.description}
diff --git a/apps/builder/app/builder/features/settings-panel/controls/text-content.tsx b/apps/builder/app/builder/features/settings-panel/controls/text-content.tsx
index be27c01278ae..ae96f3241aa8 100644
--- a/apps/builder/app/builder/features/settings-panel/controls/text-content.tsx
+++ b/apps/builder/app/builder/features/settings-panel/controls/text-content.tsx
@@ -1,7 +1,15 @@
-import { useId, useMemo } from "react";
+import { useMemo } from "react";
 import { useStore } from "@nanostores/react";
 import { computed } from "nanostores";
-import { Flex, rawTheme, Text, TextArea } from "@webstudio-is/design-system";
+import {
+  DialogClose,
+  DialogMaximize,
+  DialogTitle,
+  DialogTitleActions,
+  Flex,
+  rawTheme,
+  Text,
+} from "@webstudio-is/design-system";
 import type { Instance } from "@webstudio-is/sdk";
 import { AlertIcon } from "@webstudio-is/icons";
 import { $instances } from "~/shared/nano-states";
@@ -10,6 +18,7 @@ import {
   BindingPopover,
 } from "~/builder/shared/binding-popover";
 import { updateWebstudioData } from "~/shared/instance-utils";
+import { CodeEditor } from "~/builder/shared/code-editor";
 import {
   type ControlProps,
   useLocalValue,
@@ -55,7 +64,6 @@ export const TextContent = ({
       updateChildren(instanceId, "text", value);
     }
   });
-  const id = useId();
 
   const { scope, aliases } = useStore($selectedInstanceScope);
   let expression: undefined | string;
@@ -107,15 +115,24 @@ export const TextContent = ({
       }
     >
       <BindingControl>
-        <TextArea
-          id={id}
-          disabled={overwritable === false}
-          autoGrow
+        <CodeEditor
+          title={
+            <DialogTitle
+              suffix={
+                <DialogTitleActions>
+                  <DialogMaximize />
+                  <DialogClose />
+                </DialogTitleActions>
+              }
+            >
+              <Text variant="labelsTitleCase">Text Content</Text>
+            </DialogTitle>
+          }
+          size="small"
+          readOnly={overwritable === false}
           value={localValue.value}
-          rows={1}
           onChange={localValue.set}
-          onBlur={localValue.save}
-          onSubmit={localValue.save}
+          onChangeComplete={localValue.save}
         />
         {expression !== undefined && (
           <BindingPopover
diff --git a/apps/builder/app/builder/shared/code-editor-base.tsx b/apps/builder/app/builder/shared/code-editor-base.tsx
index 0b1105a40f64..7086a61698e2 100644
--- a/apps/builder/app/builder/shared/code-editor-base.tsx
+++ b/apps/builder/app/builder/shared/code-editor-base.tsx
@@ -81,7 +81,7 @@ const editorContentStyle = css({
   boxSizing: "border-box",
   color: theme.colors.foregroundMain,
   borderRadius: theme.borderRadius[4],
-  border: `1px solid ${theme.colors.borderMain}`,
+  border: `1px solid transparent`,
   background: theme.colors.backgroundControls,
   paddingTop: 4,
   paddingBottom: 2,
@@ -89,6 +89,9 @@ const editorContentStyle = css({
   paddingLeft: theme.spacing[3],
   // required to support copying selected text
   userSelect: "text",
+  "&:hover": {
+    borderColor: theme.colors.borderMain,
+  },
   "&:focus-within": {
     borderColor: theme.colors.borderFocus,
   },
diff --git a/apps/builder/app/builder/shared/code-editor.tsx b/apps/builder/app/builder/shared/code-editor.tsx
index 48b95650cb47..b9ef1b4fe8ca 100644
--- a/apps/builder/app/builder/shared/code-editor.tsx
+++ b/apps/builder/app/builder/shared/code-editor.tsx
@@ -43,7 +43,7 @@ const wrapperStyle = css({
   variants: {
     size: {
       default: getMinMaxHeightVars({ minHeight: "160px", maxHeight: "320px" }),
-      keyframe: getMinMaxHeightVars({ minHeight: "60px", maxHeight: "120px" }),
+      small: getMinMaxHeightVars({ minHeight: "16px", maxHeight: "120px" }),
     },
   },
   defaultVariants: {
@@ -120,7 +120,7 @@ export const CodeEditor = forwardRef<
   Omit<ComponentProps<typeof EditorContent>, "extensions"> & {
     lang?: "html" | "markdown" | "css-properties";
     title?: ReactNode;
-    size?: "default" | "keyframe";
+    size?: "default" | "small";
   }
 >(({ lang, title, size, ...editorContentProps }, ref) => {
   const extensions = useMemo(() => {
diff --git a/apps/builder/app/builder/shared/instance-label.tsx b/apps/builder/app/builder/shared/instance-label.tsx
index 5f0270813a53..2765c85c8c06 100644
--- a/apps/builder/app/builder/shared/instance-label.tsx
+++ b/apps/builder/app/builder/shared/instance-label.tsx
@@ -5,6 +5,7 @@ import {
   BodyIcon,
   BoldIcon,
   BoxIcon,
+  BracesIcon,
   ButtonElementIcon,
   CalendarIcon,
   FormIcon,
@@ -42,6 +43,7 @@ const htmlIcons: Record<string, undefined | string> = {
   h6: HeadingIcon,
   p: TextAlignLeftIcon,
   blockquote: BlockquoteIcon,
+  code: BracesIcon,
   ul: ListIcon,
   ol: ListIcon,
   li: ListItemIcon,
diff --git a/apps/builder/app/shared/content-model.ts b/apps/builder/app/shared/content-model.ts
index f75834a7b25a..97751828708a 100644
--- a/apps/builder/app/shared/content-model.ts
+++ b/apps/builder/app/shared/content-model.ts
@@ -422,6 +422,7 @@ export const richTextPlaceholders: Map<undefined | string, string> = new Map([
   ["h6", "Heading 6"],
   ["p", "Paragraph"],
   ["blockquote", "Blockquote"],
+  ["code", "Code Text"],
   ["li", "List item"],
   ["a", "Link"],
   ["span", ""],
diff --git a/packages/html-data/bin/aria.ts b/packages/html-data/bin/aria.ts
index 1e1a382ab9e8..ed7f1f2c47f0 100644
--- a/packages/html-data/bin/aria.ts
+++ b/packages/html-data/bin/aria.ts
@@ -1,6 +1,7 @@
 import { aria } from "aria-query";
 import { mkdir, writeFile } from "node:fs/promises";
 import {
+  coreMetas,
   createScope,
   elementComponent,
   Prop,
@@ -152,12 +153,12 @@ await writeFile(
   generateWebstudioComponent({
     name: "Page",
     scope: createScope(),
+    metas: new Map(Object.entries(coreMetas)),
     instances,
     props,
     dataSources: new Map(),
     rootInstanceId: instance.id,
     classesMap: new Map(),
     parameters: [],
-    metas: new Map(),
   }) + "export { Page }"
 );
diff --git a/packages/html-data/bin/attributes.ts b/packages/html-data/bin/attributes.ts
index 58f581615141..4598df5f0aab 100644
--- a/packages/html-data/bin/attributes.ts
+++ b/packages/html-data/bin/attributes.ts
@@ -1,5 +1,6 @@
 import { mkdir, writeFile } from "node:fs/promises";
 import {
+  coreMetas,
   createScope,
   elementComponent,
   type Instance,
@@ -54,6 +55,9 @@ const overrides: Record<
     target: { required: true },
     download: { type: "boolean", required: true },
   },
+  blockquote: {
+    cite: { required: true },
+  },
   form: {
     action: { required: true },
     method: { required: true },
@@ -263,13 +267,13 @@ await writeFile(
   generateWebstudioComponent({
     name: "Page",
     scope: createScope(),
+    metas: new Map(Object.entries(coreMetas)),
     instances,
     props,
     dataSources: new Map(),
     rootInstanceId: body.id,
     classesMap: new Map(),
     parameters: [],
-    metas: new Map(),
   }) + "export { Page }"
 );
 
diff --git a/packages/html-data/src/__generated__/attributes.ts b/packages/html-data/src/__generated__/attributes.ts
index 6fcfcb72999f..a0e4ab5331ea 100644
--- a/packages/html-data/src/__generated__/attributes.ts
+++ b/packages/html-data/src/__generated__/attributes.ts
@@ -322,6 +322,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       description:
         "Link to the source of the quotation or more information about the edit",
       type: "string",
+      required: true,
     },
   ],
   button: [
@@ -378,6 +379,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       description: "Type of button",
       type: "select",
       options: ["submit", "reset", "button"],
+      required: true,
     },
     {
       name: "value",
@@ -526,6 +528,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
         "multipart/form-data",
         "text/plain",
       ],
+      required: true,
     },
     {
       name: "method",
diff --git a/packages/sdk-components-react/src/blockquote.template.tsx b/packages/sdk-components-react/src/blockquote.template.tsx
deleted file mode 100644
index 43562aea2dfe..000000000000
--- a/packages/sdk-components-react/src/blockquote.template.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type TemplateMeta, $ } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "typography",
-  description:
-    "Use to style a quote from an external source like an article or book.",
-  order: 3,
-  template: <$.Blockquote></$.Blockquote>,
-};
diff --git a/packages/sdk-components-react/src/code-text.ws.ts b/packages/sdk-components-react/src/code-text.ws.ts
index f6a983ab792d..9221be12e72d 100644
--- a/packages/sdk-components-react/src/code-text.ws.ts
+++ b/packages/sdk-components-react/src/code-text.ws.ts
@@ -39,9 +39,6 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "general",
-  description:
-    "Use this component when you want to display code as text on the page.",
   icon: BracesIcon,
   contentModel: {
     category: "instance",
@@ -49,7 +46,6 @@ export const meta: WsComponentMeta = {
   },
   states: defaultStates,
   presetStyle,
-  order: 5,
   initialProps: ["id", "class", "lang", "code"],
   props: {
     ...props,
diff --git a/packages/sdk-components-react/src/heading.template.tsx b/packages/sdk-components-react/src/heading.template.tsx
deleted file mode 100644
index db6f78010d2e..000000000000
--- a/packages/sdk-components-react/src/heading.template.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type TemplateMeta, $ } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "typography",
-  description:
-    "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
-  order: 1,
-  template: <$.Heading></$.Heading>,
-};
diff --git a/packages/sdk-components-react/src/list-item.template.tsx b/packages/sdk-components-react/src/list-item.template.tsx
deleted file mode 100644
index ae2fcdfa6dba..000000000000
--- a/packages/sdk-components-react/src/list-item.template.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type TemplateMeta, $ } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "typography",
-  description: "Adds a new item to an existing list.",
-  order: 5,
-  template: <$.ListItem></$.ListItem>,
-};
diff --git a/packages/sdk-components-react/src/list.template.tsx b/packages/sdk-components-react/src/list.template.tsx
deleted file mode 100644
index e9f24026fbf2..000000000000
--- a/packages/sdk-components-react/src/list.template.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { type TemplateMeta, $, PlaceholderValue } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "typography",
-  description: "Groups content, like links in a menu or steps in a recipe.",
-  order: 4,
-  template: (
-    <$.List>
-      <$.ListItem>
-        {new PlaceholderValue("List Item text you can edit")}
-      </$.ListItem>
-      <$.ListItem>
-        {new PlaceholderValue("List Item text you can edit")}
-      </$.ListItem>
-      <$.ListItem>
-        {new PlaceholderValue("List Item text you can edit")}
-      </$.ListItem>
-    </$.List>
-  ),
-};
diff --git a/packages/sdk-components-react/src/paragraph.template.tsx b/packages/sdk-components-react/src/paragraph.template.tsx
deleted file mode 100644
index 2290723e03f8..000000000000
--- a/packages/sdk-components-react/src/paragraph.template.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type TemplateMeta, $ } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "typography",
-  description: "A container for multi-line text.",
-  order: 2,
-  template: <$.Paragraph></$.Paragraph>,
-};
diff --git a/packages/sdk-components-react/src/separator.ws.ts b/packages/sdk-components-react/src/separator.ws.ts
index db3ea8068e9e..6e7d8aeccab7 100644
--- a/packages/sdk-components-react/src/separator.ws.ts
+++ b/packages/sdk-components-react/src/separator.ws.ts
@@ -10,7 +10,6 @@ import type { defaultTag } from "./separator";
 const presetStyle = {
   hr: [
     ...hr,
-
     {
       property: "height",
       value: { type: "keyword", value: "1px" },
@@ -39,12 +38,8 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "general",
-  description:
-    "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   states: defaultStates,
   presetStyle,
-  order: 3,
   initialProps: ["id", "class"],
   props,
 };
diff --git a/packages/sdk-components-react/src/templates.ts b/packages/sdk-components-react/src/templates.ts
index 2b59e2396fe6..9c5881d8965a 100644
--- a/packages/sdk-components-react/src/templates.ts
+++ b/packages/sdk-components-react/src/templates.ts
@@ -1,14 +1,8 @@
 export { meta as ContentEmbed } from "./content-embed.template";
 export { meta as MarkdownEmbed } from "./markdown-embed.template";
-export { meta as Text } from "./text.template";
-export { meta as Heading } from "./heading.template";
-export { meta as Paragraph } from "./paragraph.template";
 export { meta as Link } from "./link.template";
 export { meta as Button } from "./button.template";
 export { meta as Form } from "./webhook-form.template";
-export { meta as Blockquote } from "./blockquote.template";
-export { meta as List } from "./list.template";
-export { meta as ListItem } from "./list-item.template";
 export { meta as Label } from "./label.template";
 export { meta as RadioButton } from "./radio-button.template";
 export { meta as Checkbox } from "./checkbox.template";
diff --git a/packages/sdk-components-react/src/text.template.tsx b/packages/sdk-components-react/src/text.template.tsx
deleted file mode 100644
index 229051148ba2..000000000000
--- a/packages/sdk-components-react/src/text.template.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type TemplateMeta, $, PlaceholderValue } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "typography",
-  description:
-    "A generic container for any text content that is not a heading or a link.",
-  order: 0,
-  template: <$.Text>{new PlaceholderValue("The text you can edit")}</$.Text>,
-};
diff --git a/packages/sdk/src/__generated__/normalize.css.ts b/packages/sdk/src/__generated__/normalize.css.ts
index d4214d607f28..eef4c853a3d8 100644
--- a/packages/sdk/src/__generated__/normalize.css.ts
+++ b/packages/sdk/src/__generated__/normalize.css.ts
@@ -133,23 +133,6 @@ export const body: StyleDecl[] = [
 export const hr: StyleDecl[] = [
   { property: "height", value: { type: "unit", unit: "number", value: 0 } },
   { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
-  {
-    property: "border-top-width",
-    value: { type: "unit", unit: "px", value: 1 },
-  },
-  {
-    property: "border-right-width",
-    value: { type: "unit", unit: "px", value: 1 },
-  },
-  {
-    property: "border-bottom-width",
-    value: { type: "unit", unit: "px", value: 1 },
-  },
-  {
-    property: "border-left-width",
-    value: { type: "unit", unit: "px", value: 1 },
-  },
 ];
 
 export const b: StyleDecl[] = [
diff --git a/packages/sdk/src/core-templates.tsx b/packages/sdk/src/core-templates.tsx
index b368569373f7..46a0cfda5c9a 100644
--- a/packages/sdk/src/core-templates.tsx
+++ b/packages/sdk/src/core-templates.tsx
@@ -46,7 +46,7 @@ const descendantMeta: TemplateMeta = {
 const BlockTemplate = ws["block-template"];
 
 const blockMeta: TemplateMeta = {
-  category: "typography",
+  category: "general",
   template: (
     <ws.block>
       <BlockTemplate ws:label="Templates">
@@ -105,9 +105,99 @@ const blockMeta: TemplateMeta = {
   ),
 };
 
+const typography: Record<string, TemplateMeta> = {
+  heading: {
+    category: "typography",
+    order: 1,
+    description:
+      "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
+    template: <ws.element ws:tag="h1"></ws.element>,
+  },
+
+  paragraph: {
+    category: "typography",
+    order: 2,
+    description: "A container for multi-line text.",
+    template: <ws.element ws:tag="p"></ws.element>,
+  },
+
+  blockquote: {
+    category: "typography",
+    order: 3,
+    description:
+      "Use to style a quote from an external source like an article or book.",
+    template: (
+      <ws.element
+        ws:tag="blockquote"
+        ws:style={css`
+          margin-left: 0;
+          margin-right: 0;
+          padding: 10px 20px;
+          border-left: 5px solid rgb(226 226 226 / 1);
+        `}
+      ></ws.element>
+    ),
+  },
+
+  list: {
+    category: "typography",
+    order: 4,
+    description: "Groups content, like links in a menu or steps in a recipe.",
+    template: (
+      <ws.element ws:tag="ul">
+        <ws.element ws:tag="li"></ws.element>
+        <ws.element ws:tag="li"></ws.element>
+        <ws.element ws:tag="li"></ws.element>
+      </ws.element>
+    ),
+  },
+
+  list_item: {
+    category: "typography",
+    order: 5,
+    description: "Adds a new item to an existing list.",
+    template: <ws.element ws:tag="li"></ws.element>,
+  },
+
+  code_text: {
+    category: "typography",
+    order: 6,
+    template: (
+      <ws.element
+        ws:tag="code"
+        ws:style={css`
+          display: block;
+          white-space-collapse: preserve;
+          text-wrap-mode: wrap;
+          padding-left: 0.2em;
+          padding-right: 0.2em;
+          background-color: rgb(238 238 238);
+        `}
+      ></ws.element>
+    ),
+  },
+
+  thematic_break: {
+    category: "typography",
+    order: 7,
+    description:
+      "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
+    template: (
+      <ws.element
+        ws:tag="hr"
+        ws:style={css`
+          color: gray;
+          border-style: none none solid;
+        `}
+      ></ws.element>
+    ),
+  },
+};
+
 export const coreTemplates = {
   [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
+  ...typography,
 };
diff --git a/packages/sdk/src/normalize.css b/packages/sdk/src/normalize.css
index 9fdc8ca69c41..3311d7f4a3fd 100644
--- a/packages/sdk/src/normalize.css
+++ b/packages/sdk/src/normalize.css
@@ -103,9 +103,6 @@ hr {
   height: 0;
   /* 2 */
   color: inherit;
-  /* webstudio custom opinionated presets */
-  box-sizing: border-box;
-  border-width: 1px;
 }
 
 /**
@@ -138,8 +135,8 @@ kbd,
 samp,
 pre {
   /* 1 */
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
-    monospace;
+  font-family:
+    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   /* 2 */
   font-size: 1em;
   /* webstudio custom opinionated presets */