diff --git a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po
index 665bd29..11fccaa 100644
--- a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po
+++ b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po
@@ -39,6 +39,7 @@ msgstr ""
 #. Default: "Text"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -54,6 +55,7 @@ msgstr ""
 #: components/blocks/Accordion/EditItem
 #: components/blocks/Accordion/schema
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -148,7 +150,7 @@ msgstr ""
 msgid "redturtle__volto-blocks__text7_img_column_width_title"
 msgstr ""
 
-#. Default: "Text 7"
+#. Default: "Image and Text Boxes"
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Text7/schema
 msgid "redturtle__volto-blocks__text7_title"
diff --git a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po
index e457596..84a7276 100644
--- a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po
+++ b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po
@@ -39,6 +39,7 @@ msgstr ""
 #. Default: "Text"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -54,6 +55,7 @@ msgstr "Testo"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/Accordion/schema
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -148,7 +150,7 @@ msgstr ""
 msgid "redturtle__volto-blocks__text7_img_column_width_title"
 msgstr ""
 
-#. Default: "Text 7"
+#. Default: "Image and Text Boxes"
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Text7/schema
 msgid "redturtle__volto-blocks__text7_title"
diff --git a/packages/volto-blocks/locales/volto.pot b/packages/volto-blocks/locales/volto.pot
index 1d4dc1a..1d269da 100644
--- a/packages/volto-blocks/locales/volto.pot
+++ b/packages/volto-blocks/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-09-04T09:08:41.235Z\n"
+"POT-Creation-Date: 2024-09-04T13:48:23.392Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -41,6 +41,7 @@ msgstr ""
 #. Default: "Text"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -56,6 +57,7 @@ msgstr ""
 #: components/blocks/Accordion/EditItem
 #: components/blocks/Accordion/schema
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -150,7 +152,7 @@ msgstr ""
 msgid "redturtle__volto-blocks__text7_img_column_width_title"
 msgstr ""
 
-#. Default: "Text 7"
+#. Default: "Image and Text Boxes"
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Text7/schema
 msgid "redturtle__volto-blocks__text7_title"
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx
index 866107f..220060e 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx
@@ -1,9 +1,9 @@
-import { Icon, SidebarPortal } from '@plone/volto/components';
+import type { BlockEditProps } from '@plone/types';
+import { Icon, SidebarPortal, UniversalLink } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import cx from 'classnames';
 import { defineMessages, useIntl } from 'react-intl';
-
-import type { BlockEditProps } from '@plone/types';
+import placeholder from './placeholder.png';
 
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
@@ -13,7 +13,7 @@ import {
 } from '@redturtle/volto-rt-slate';
 
 import config from '@plone/registry';
-// import EditItem from './EditItem';
+import EditItem from './EditItem';
 
 type ImageAndTextBoxEditProps = Omit<BlockEditProps, 'data'> & {
   data: ImageAndTextBoxData;
@@ -55,23 +55,24 @@ export default function Edit(props: ImageAndTextBoxEditProps) {
         className={cx('block-imageandtextbox', styles.imageandtextbox)}
         aria-label={data.title}
       >
-        <Container
-          className={cx(
-            'block-imageandtextbox-container',
-            styles['block-imageandtextbox-container'],
-          )}
-        >
-          {data.image ? (
-            <Image
-              className={cx('block-imageandtextbox-image', styles.image)}
-              // TODO serialize image brain in the backend
-              src={`${data.image}/@@images/image/large`}
-              loading="lazy"
-              alt=""
-            />
-          ) : (
-            <div className="image-add">Upload image</div>
-          )}
+        {data.image ? (
+          <Image
+            className={cx('block-imageandtextbox-image', styles.image)}
+            // TODO serialize image brain in the backend
+            src={`${data.image}/@@images/image/large`}
+            loading="lazy"
+            alt=""
+          />
+        ) : (
+          <Image
+            className={cx('block-imageandtextbox-image', styles.image)}
+            // TODO serialize image brain in the backend
+            src={placeholder}
+            loading="lazy"
+            alt=""
+          />
+        )}
+        <Container className={cx(styles['block-imageandtextbox-container'])}>
           <div className={cx('box-wrapper', styles['box-wrapper'])}>
             <TextEditorWidget
               {...props}
@@ -86,6 +87,8 @@ export default function Edit(props: ImageAndTextBoxEditProps) {
               }}
               showToolbar={false}
               placeholder={intl.formatMessage(messages.title)}
+              onFocusPreviousBlock={onFocusPreviousBlock}
+              onFocusNextBlock={onFocusNextBlock}
             />
             <TextEditorWidget
               {...props}
@@ -96,8 +99,42 @@ export default function Edit(props: ImageAndTextBoxEditProps) {
                 setSelectedField('title');
               }}
               placeholder={intl.formatMessage(messages.text)}
+              onFocusPreviousBlock={onFocusPreviousBlock}
+              onFocusNextBlock={onFocusNextBlock}
             />
-            {/* {data.boxes ? <EditItem /> : ''} */}
+            <div className={cx('block-imageandtextbox-boxes', styles.boxes)}>
+              {data.boxes?.length > 0 &&
+                data.boxes.map((item) => (
+                  <EditItem
+                    data={item}
+                    focusOn={selectedField}
+                    setFocusOn={setSelectedField}
+                    onChange={(id, field, value) => {
+                      onChangeBlock(block, {
+                        ...data,
+                        boxes: data.boxes.map((i) =>
+                          i['@id'] === id ? { ...i, [field]: value } : i,
+                        ),
+                      });
+                    }}
+                    // @ts-expect-error TODO fix type in @plone/types
+                    selected={selected}
+                  />
+                ))}
+            </div>
+            {data.linkHref?.[0] && (
+              <div className={cx(styles['block-imageandtextbox-cta'])}>
+                <UniversalLink
+                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                  openLinkInNewTab={false}
+                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                    e.preventDefault();
+                  }}
+                >
+                  {data.linkTitle}
+                </UniversalLink>
+              </div>
+            )}
           </div>
         </Container>
       </section>
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx
index 261e75a..c5526e9 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx
@@ -5,6 +5,7 @@ import type { ArrayElement } from '@plone/types';
 
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
+import { TextEditorWidget } from '@redturtle/volto-rt-slate';
 
 type Props = {
   data: ArrayElement<ImageAndTextBoxData['boxes']>;
@@ -23,11 +24,46 @@ export default function EditItem({
 }: Props) {
   const intl = useIntl();
 
-  if (__SERVER__) {
-    return <div />;
-  }
-
-  return <div className={cx('block-imageandtextbox', styles.item)}>BOX</div>;
+  return (
+    <div className={cx(styles['block-imageandtextbox-box'])}>
+      <TextEditorWidget
+        wrapClass={cx('block-imageandtextbox-box-title')}
+        as="h3"
+        block={data['@id']}
+        data={data}
+        fieldName="title"
+        selected={selected && focusOn === 'title' + data['@id']}
+        setSelected={() => setFocusOn('title' + data['@id'])}
+        onChangeBlock={(id: string, value: { title: string }) => {
+          onChange(id, 'title', value.title);
+        }}
+        showToolbar={false}
+        placeholder={intl.formatMessage(messages.title)}
+      />
+      <TextEditorWidget
+        wrapClass={cx('block-accordion-item-text')}
+        as="div"
+        block={data['@id']}
+        data={data}
+        fieldName="text"
+        selected={selected && focusOn === 'text' + data['@id']}
+        setSelected={() => setFocusOn('text' + data['@id'])}
+        onChangeBlock={(id: string, value: { text: string }) => {
+          onChange(id, 'text', value.text);
+        }}
+        placeholder={intl.formatMessage(messages.text)}
+      />
+    </div>
+  );
 }
 
-const messages = defineMessages({});
+const messages = defineMessages({
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  text: {
+    id: 'Text',
+    defaultMessage: 'Text',
+  },
+});
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx
index 4cbdf73..38397ab 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx
@@ -1,9 +1,13 @@
 import type { BlockViewProps } from '@plone/types';
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import cx from 'classnames';
 
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
 import ViewItem from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/ViewItem';
+import placeholder from './placeholder.png';
 
 import config from '@plone/registry';
 
@@ -13,27 +17,68 @@ type Props = Omit<BlockViewProps, 'data'> & {
 
 export default function View({ data, className, style }: Props) {
   const Container = config.getComponent('Container').component || 'div';
+  const Image = config.getComponent('Image').component;
 
   return (
     <section
-      className={cx('block-imageandtextbox', styles.block, className)}
-      style={style}
+      className={cx('block-imageandtextbox', styles.imageandtextbox)}
       aria-label={data.title}
     >
-      <Container
-        className={cx('block-imageandtextbox-container', styles.container)}
-      >
-        {data.title && (
-          <h2 className={cx('block-imageandtextbox-title', styles.title)}>
-            {data.title}
-          </h2>
-        )}
-        <div className={cx('block-qubica-wrapper', styles.wrapper)}>
+      {data.image ? (
+        <Image
+          className={cx('block-imageandtextbox-image', styles.image)}
+          // TODO serialize image brain in the backend
+          src={`${data.image}/@@images/image/large`}
+          loading="lazy"
+          alt=""
+        />
+      ) : (
+        <Image
+          className={cx('block-imageandtextbox-image', styles.image)}
+          // TODO serialize image brain in the backend
+          src={placeholder}
+          loading="lazy"
+          alt=""
+        />
+      )}
+      <Container className={cx(styles['block-imageandtextbox-container'])}>
+        <div className={cx('box-wrapper', styles['box-wrapper'])}>
+          {data.title && (
+            <h2 className={cx('block-imageandtextbox-title', styles.title)}>
+              {data.title}
+            </h2>
+          )}
+          {data.text && (
+            <div className={cx('block-imageandtextbox-text', styles.text)}>
+              <TextBlockView data={{ value: data.text ?? {} }} />
+            </div>
+          )}
+        </div>
+        <div className={cx('block-imageandtextbox-boxes', styles.boxes)}>
           {data.boxes?.length > 0 &&
             data.boxes.map((item) => (
               <ViewItem key={item['@id']} data={item} />
             ))}
         </div>
+        {data.linkHref?.[0] && (
+          <div
+            className={cx(
+              'block-imageandtextbox-cta',
+              styles['block-imageandtextbox-cta'],
+            )}
+          >
+            <UniversalLink
+              href={
+                data.linkHref
+                  ? flattenToAppURL(data.linkHref[0]['@id'])
+                  : undefined
+              }
+              openLinkInNewTab={false}
+            >
+              {data.linkTitle}
+            </UniversalLink>
+          </div>
+        )}
       </Container>
     </section>
   );
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx
index d98d758..70cc768 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 
 import type { ArrayElement } from '@plone/types';
-
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
 
@@ -10,5 +10,22 @@ type Props = {
 };
 
 export default function ViewItem({ data }: Props) {
-  return <div className={cx('block-imageandtextbox', styles.item)}>BOX</div>;
+  return (
+    <div className={cx(styles['block-imageandtextbox-box'])}>
+      {data.title && (
+        <div className={cx(styles['box-title'])}>
+          {data.title && (
+            <h3 className={cx('block-imageandtextbox-title', styles.title)}>
+              {data.title}
+            </h3>
+          )}
+        </div>
+      )}
+      {data.text && (
+        <div className={cx('block-iconsandtext-text', styles.text)}>
+          <TextBlockView data={{ value: data.text ?? {} }} />
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/placeholder.png b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/placeholder.png
new file mode 100644
index 0000000..d57c4b6
Binary files /dev/null and b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/placeholder.png differ
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts
index fb85b31..ef14819 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts
@@ -15,7 +15,7 @@ export interface ImageAndTextBoxData extends CtaBlockExtender {
 const messages = defineMessages({
   title: {
     id: 'redturtle__volto-blocks__text7_title',
-    defaultMessage: 'Text 7',
+    defaultMessage: 'Image and Text Boxes',
   },
   images_title: {
     id: 'redturtle__volto-blocks__text7_images_title',
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css
index 38de9f6..03802d4 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css
@@ -1,10 +1,12 @@
 .imageandtextbox {
   position: relative;
+  display: flex;
   width: 100%;
-  height: 300px;
-  /* overflow: hidden; */
+  min-height: 300px;
+  align-items: center;
+  justify-content: flex-end;
 }
-.block-imageandtextbox-container img {
+.imageandtextbox img {
   position: absolute;
   z-index: 0;
   top: 0;
@@ -14,14 +16,35 @@
   object-fit: cover;
 }
 
-.box-wrapper {
+.block-imageandtextbox-container {
   position: relative;
   z-index: 1;
-  top: 50%;
-  right: 100px;
-  width: 30%;
-  padding: 20px;
+  width: 40%;
+  height: 80%;
+  padding: 1em;
   border-radius: 5px;
-  background-color: white;
-  float: right;
+  margin-top: 10%;
+  margin-right: 3%;
+  margin-bottom: 10%;
+  background-color: #ffffff;
+}
+
+.boxes {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.block-imageandtextbox-box {
+  box-sizing: border-box; /* Include padding and border in width calculation */
+  flex: 1 1 33%; /* Flex-grow, flex-shrink, and flex-basis */
+  padding: 10px;
+}
+
+.block-imageandtextbox-box h3 {
+  border-bottom: 1px solid #ddd;
+}
+
+.block-imageandtextbox-cta {
+  margin-top: 1em;
+  text-align: center;
 }