diff --git a/packages/apps/client/package.json b/packages/apps/client/package.json
index 1f1dd10..0296aa3 100644
--- a/packages/apps/client/package.json
+++ b/packages/apps/client/package.json
@@ -41,6 +41,7 @@
         "eventemitter3": "^5.0.1",
         "mdast-util-directive": "^3.0.0",
         "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.1.0",
         "micromark-extension-directive": "^3.0.0",
         "mobx": "^6.10.2",
         "mobx-react-lite": "^4.0.5",
diff --git a/packages/apps/client/src/CurrentRundown/CurrentRundown.module.scss b/packages/apps/client/src/CurrentRundown/CurrentRundown.module.scss
new file mode 100644
index 0000000..37f0d18
--- /dev/null
+++ b/packages/apps/client/src/CurrentRundown/CurrentRundown.module.scss
@@ -0,0 +1,70 @@
+.SegmentLineList {
+	display: grid;
+	grid-template-columns: 1fr 3em 4em 2fr 5fr 1fr 1fr;
+	padding: 0;
+	margin: 0;
+	--table-gap-size: 2px;
+	gap: var(--table-gap-size);
+}
+
+.SegmentContainer {
+	padding: 0;
+	margin: 0;
+	display: contents;
+}
+
+.SegmentIdentifier {
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.LineContainer {
+	padding: 0;
+	margin: 0;
+	grid-column: 2 / 8;
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-template-rows: auto;
+	gap: var(--table-gap-size);
+}
+
+.Line {
+	grid-column: 1 / 7;
+	display: grid;
+	grid-template-columns: subgrid;
+	gap: var(--table-gap-size);
+	padding: 0;
+	margin: 0;
+}
+
+.LineItem {
+	background: var(--color-dark-2);
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.LineIdentifier {
+	--dummy: 1;
+}
+
+.LineType {
+	--dumy: 1;
+}
+
+.LineSlug {
+	composes: LineItem;
+}
+
+.LineScript {
+	composes: LineItem;
+}
+
+.LineDuration {
+	composes: LineItem;
+}
+
+.LineDuration2 {
+	composes: LineItem;
+}
diff --git a/packages/apps/client/src/CurrentRundown/CurrentRundown.tsx b/packages/apps/client/src/CurrentRundown/CurrentRundown.tsx
index 2f1f97f..9f72f1b 100644
--- a/packages/apps/client/src/CurrentRundown/CurrentRundown.tsx
+++ b/packages/apps/client/src/CurrentRundown/CurrentRundown.tsx
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { AppStore } from '../stores/AppStore'
 import { Segment } from './Segment'
 import { Button } from 'react-bootstrap'
+import classes from './CurrentRundown.module.scss'
 
 const CurrentRundown = observer((): React.JSX.Element => {
 	const openRundown = AppStore.rundownStore.openRundown
@@ -24,9 +25,9 @@ const CurrentRundown = observer((): React.JSX.Element => {
 					Close
 				</Button>
 			</p>
-			<ul>
+			<ul className={classes.SegmentLineList}>
 				{openRundown.segmentsInOrder.map((segment) => (
-					<li key={segment.id}>
+					<li key={segment.id} className={classes.SegmentContainer}>
 						<Segment segment={segment} />
 					</li>
 				))}
diff --git a/packages/apps/client/src/CurrentRundown/Line.tsx b/packages/apps/client/src/CurrentRundown/Line.tsx
index b7af6d3..2b1e140 100644
--- a/packages/apps/client/src/CurrentRundown/Line.tsx
+++ b/packages/apps/client/src/CurrentRundown/Line.tsx
@@ -1,10 +1,20 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 import { UILine } from '../model/UILine'
+import classes from './CurrentRundown.module.scss'
 
 const Line = observer(({ line }: { line: UILine | undefined }): React.JSX.Element | null => {
 	if (!line) return null
-	return <p>{line.slug}</p>
+	return (
+		<>
+			<div className={classes.LineIdentifier}></div>
+			<div className={classes.LineType}></div>
+			<div className={classes.LineSlug}>{line.slug}</div>
+			<div className={classes.LineScript}>{line.script}</div>
+			<div className={classes.LineDuration}></div>
+			<div className={classes.LineDuration2}></div>
+		</>
+	)
 })
 Line.displayName = 'Line'
 
diff --git a/packages/apps/client/src/CurrentRundown/Segment.tsx b/packages/apps/client/src/CurrentRundown/Segment.tsx
index e227618..8b74dfc 100644
--- a/packages/apps/client/src/CurrentRundown/Segment.tsx
+++ b/packages/apps/client/src/CurrentRundown/Segment.tsx
@@ -2,16 +2,17 @@ import React from 'react'
 import { observer } from 'mobx-react-lite'
 import { UISegment } from '../model/UISegment'
 import { Line } from './Line'
+import classes from './CurrentRundown.module.scss'
 
 const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Element | null => {
 	if (!segment) return null
 
 	return (
 		<>
-			<p>{segment.name}</p>
-			<ul>
+			<div className={classes.SegmentIdentifier}>{segment.name}</div>
+			<ul className={classes.LineContainer}>
 				{segment.linesInOrder.map((line) => (
-					<li key={line.id}>
+					<li key={line.id} className={classes.Line}>
 						<Line line={line} />
 					</li>
 				))}
diff --git a/packages/apps/client/src/ScriptEditor/Editor.tsx b/packages/apps/client/src/ScriptEditor/Editor.tsx
index 04f267d..f307525 100644
--- a/packages/apps/client/src/ScriptEditor/Editor.tsx
+++ b/packages/apps/client/src/ScriptEditor/Editor.tsx
@@ -60,8 +60,10 @@ export function Editor({
 						lineId: randomId(),
 					},
 					[
-						schema.node(schema.nodes.lineTitle, undefined, schema.text('Line title')),
-						schema.node(schema.nodes.paragraph, undefined, schema.text('Script...')),
+						schema.node(schema.nodes.lineTitle, undefined, [schema.text('Line title')]),
+						...fromMarkdown(
+							'Raz _dwa **trzy**_. :reverse[Cztery.]\n\nPięć _sześć_ siedem.  \nRaz\n\n\n\n\n Some more :reverse[Markdown **Here**]'
+						),
 					]
 				),
 				schema.node(
diff --git a/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts b/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts
index ef133f8..e0abea6 100644
--- a/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts
+++ b/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts
@@ -1,5 +1,7 @@
 import { Plugin } from 'prosemirror-state'
 import { UILineId } from '../../model/UILine'
+import { Node } from 'prosemirror-model'
+import { schema } from '../scriptSchema'
 
 export function updateModel(onChange?: (lineId: UILineId, contents: SomeContents) => void) {
 	return new Plugin({
@@ -20,7 +22,13 @@ export function updateModel(onChange?: (lineId: UILineId, contents: SomeContents
 								if (!parent) return
 								if (parent.type.name !== 'line') return
 
-								if (onChange) onChange(lineId, parent.toString())
+								const allNodes: Node[] = []
+								parent.content.forEach((node) => {
+									if (node.type === schema.nodes.lineTitle) return
+									allNodes.push(node)
+								})
+								console.log(allNodes)
+								if (onChange) onChange(lineId, allNodes)
 							})
 						})
 					})
diff --git a/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css b/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css
index 61ab30f..4f9e1e9 100644
--- a/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css
+++ b/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css
@@ -13,12 +13,15 @@
 
 .Divider {
 	grid-column: Divider;
-	--test: 1;
 	cursor: ew-resize;
 }
 
-.Divider:hover,
 .DividerActive {
+	composes: Divider;
+	background-color: var(--bs-primary);
+}
+
+.Divider:hover {
 	background-color: var(--bs-primary);
 }
 
diff --git a/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx b/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx
index 66316aa..e733933 100644
--- a/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx
+++ b/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx
@@ -19,11 +19,13 @@ export function SplitPanel({
 	const beginCoords = useRef<{ x: number; y: number } | null>(null)
 	const initialPos = useRef<number>(position ?? 0.5)
 	const container = useRef<HTMLDivElement>(null)
+	const divider = useRef<HTMLDivElement>(null)
 	const contRect = useRef<DOMRect | null>(null)
 
 	const defaultedPosition = position ?? 0.5
 
 	function onMouseDown(e: React.MouseEvent) {
+		if (e.button !== 0) return
 		setIsResizing(true)
 		beginCoords.current = { x: e.clientX, y: e.clientY }
 		contRect.current = container.current?.getBoundingClientRect() ?? null
@@ -55,7 +57,8 @@ export function SplitPanel({
 			e.preventDefault()
 		}
 
-		function onMouseUp(_e: MouseEvent) {
+		function onMouseUp(e: MouseEvent) {
+			if (e.button !== 0) return
 			setIsResizing(false)
 		}
 
@@ -83,10 +86,28 @@ export function SplitPanel({
 		initialPos.current = defaultedPosition
 	}, [isResizing, defaultedPosition])
 
+	useEffect(() => {
+		if (isResizing) {
+			if (!divider.current) return
+			const style = window.getComputedStyle(divider.current)
+			document.body.style.cursor = style.cursor
+		} else {
+			document.body.style.cursor = ''
+		}
+
+		return () => {
+			document.body.style.cursor = ''
+		}
+	}, [isResizing])
+
 	return (
 		<div className={`${className ?? ''} ${classes.SplitPane}`} style={style} ref={container}>
 			<div className={classes.PaneA}>{childrenBegin}</div>
-			<div className={isResizing ? classes.DividerActive : classes.Divider} onMouseDown={onMouseDown}></div>
+			<div
+				className={isResizing ? classes.DividerActive : classes.Divider}
+				ref={divider}
+				onMouseDown={onMouseDown}
+			></div>
 			<div className={classes.PaneB}>{childrenEnd}</div>
 		</div>
 	)
diff --git a/packages/apps/client/src/index.scss b/packages/apps/client/src/index.scss
index dce3267..36b41c3 100644
--- a/packages/apps/client/src/index.scss
+++ b/packages/apps/client/src/index.scss
@@ -1,7 +1,9 @@
 /* The following line can be included in a src/App.scss */
 $primary: #1769ff;
 //$dark: #252627; // this is Origo's original dark color
-$dark: #1d1d1d;
+$dark-1: #1d1d1d;
+$dark-2: #2a2a2a;
+$dark: $dark-1;
 $body-bg-dark: $dark;
 
 $font-family-sans-serif: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
@@ -29,4 +31,6 @@ $theme-colors: (
 
 :root {
 	-webkit-font-smoothing: antialiased;
+	--color-dark-1: #{$dark-1};
+	--color-dark-2: #{$dark-2};
 }
diff --git a/packages/apps/client/src/lib/mdExtensions/everyLineAParagraph.ts b/packages/apps/client/src/lib/mdExtensions/everyLineAParagraph.ts
new file mode 100644
index 0000000..ea29a1e
--- /dev/null
+++ b/packages/apps/client/src/lib/mdExtensions/everyLineAParagraph.ts
@@ -0,0 +1,12 @@
+import { Extension, CompileContext, Token } from 'mdast-util-from-markdown'
+import { TokenTypeMap } from 'micromark-util-types'
+
+export function everyLineAParagraph(): Extension {
+	return {
+		enter: {
+			['lineEnding']: function (this: CompileContext, token: Token) {
+				console.log(token, this)
+			},
+		},
+	}
+}
diff --git a/packages/apps/client/src/lib/prosemirrorDoc.ts b/packages/apps/client/src/lib/prosemirrorDoc.ts
index 5434175..85c8bf6 100644
--- a/packages/apps/client/src/lib/prosemirrorDoc.ts
+++ b/packages/apps/client/src/lib/prosemirrorDoc.ts
@@ -1,25 +1,88 @@
-import { fromMarkdown as mdastFromMarkdown } from 'mdast-util-from-markdown'
-import type { Node, Parent } from 'mdast'
+import { fromMarkdown as mdAstFromMarkdown } from 'mdast-util-from-markdown'
+import { toMarkdown as mdAstToMarkdown } from 'mdast-util-to-markdown'
+import type { Node as MdAstNode, Parent as MdAstParent, Literal as MdAstLiteral } from 'mdast'
+import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { directive } from 'micromark-extension-directive'
-import { directiveFromMarkdown } from 'mdast-util-directive'
+import { schema } from '../ScriptEditor/scriptSchema'
+import { directiveFromMarkdown, directiveToMarkdown } from 'mdast-util-directive'
+import { everyLineAParagraph } from './mdExtensions/everyLineAParagraph'
 
-export function fromMarkdown(text: string): void {
-	const ast = mdastFromMarkdown(text, 'utf-8', {
+export function fromMarkdown(text: string): ProsemirrorNode[] {
+	const ast = mdAstFromMarkdown(text, 'utf-8', {
 		extensions: [directive()],
-		mdastExtensions: [directiveFromMarkdown()],
+		mdastExtensions: [everyLineAParagraph(), directiveFromMarkdown()],
 	})
 
-	traverseNodes(ast.children)
+	return traverseMdAstNodes(ast.children)
 }
 
-function traverseNodes(nodes: Node[]) {
+export function toMarkdown(doc: ProsemirrorNode[]): string {
+	return mdAstToMarkdown(
+		{
+			type: 'root',
+			children: [],
+		},
+		{
+			extensions: [directiveToMarkdown()],
+		}
+	)
+}
+
+function mdastToEditorSchemaNode(node: MdAstNode, children?: ProsemirrorNode[]): ProsemirrorNode[] {
+	if (node.type === 'paragraph') {
+		return [schema.node(schema.nodes.paragraph, undefined, children)]
+	} else if (isLeafDirective(node) && node.name === 'emptyPara') {
+		return [schema.node(schema.nodes.paragraph, undefined, [])]
+	} else if (node.type === 'text' && isLiteral(node)) {
+		return [schema.text(node.value)]
+	} else if (node.type === 'strong' && children) {
+		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.bold)]))
+	} else if (node.type === 'emphasis' && children) {
+		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.italic)]))
+	} else if (isTextDirective(node) && node.name === 'reverse' && children) {
+		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.reverse)]))
+	} else if (node.type === 'break') {
+		return [schema.text('\n')]
+	} else {
+		console.warn(node)
+		return [schema.text('[UNKNOWN]')]
+	}
+}
+
+function traverseMdAstNodes(nodes: MdAstNode[]): ProsemirrorNode[] {
+	const result: ProsemirrorNode[] = []
 	for (const childNode of nodes) {
-		console.dir(childNode)
-		if (isParent(childNode)) traverseNodes(childNode.children)
+		let children: ProsemirrorNode[] = []
+		if (isParent(childNode)) {
+			children = traverseMdAstNodes(childNode.children)
+		}
+		result.push(...mdastToEditorSchemaNode(childNode, children))
 	}
+
+	return result
 }
 
-function isParent(node: Node): node is Parent {
+function isParent(node: MdAstNode): node is MdAstParent {
 	if ('children' in node && Array.isArray(node.children)) return true
 	return false
 }
+
+function isLiteral(node: MdAstNode): node is MdAstLiteral {
+	if ('value' in node) return true
+	return false
+}
+
+function isTextDirective(node: MdAstNode): node is MdAstTextDirective {
+	if (node.type === 'textDirective' && 'name' in node) return true
+	return false
+}
+
+function isLeafDirective(node: MdAstNode): node is MdAstTextDirective {
+	if (node.type === 'leafDirective' && 'name' in node) return true
+	return false
+}
+
+interface MdAstTextDirective extends MdAstNode {
+	name: string
+	attributes: Record<string, string>
+}
diff --git a/yarn.lock b/yarn.lock
index 8ff631d..ce6c27e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1955,6 +1955,7 @@ __metadata:
     eventemitter3: "npm:^5.0.1"
     mdast-util-directive: "npm:^3.0.0"
     mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.1.0"
     micromark-extension-directive: "npm:^3.0.0"
     micromark-util-types: "npm:^2.0.0"
     mobx: "npm:^6.10.2"
@@ -8153,7 +8154,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-to-markdown@npm:^2.0.0":
+"mdast-util-to-markdown@npm:^2.0.0, mdast-util-to-markdown@npm:^2.1.0":
   version: 2.1.0
   resolution: "mdast-util-to-markdown@npm:2.1.0"
   dependencies: