diff --git a/frontend/src/App.css b/frontend/src/App.css
index 74f96c1..8d19db0 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -12,14 +12,28 @@ input.instantUpdate {
 }
 .navbarOffset {
   padding-top: 60px !important;
-  right: 20;
 }
-/* .toastContainer {
-  position: fixed;
-} */
+.toastContainer {
+  position: fixed !important;
+  padding: 5px;
+}
 .notificationToast {
   background-color: rgba(114, 214, 253, 0.5) !important;
 }
 .exceptionToast {
   background-color: rgba(216, 41, 18, 0.678) !important;
-}
\ No newline at end of file
+}
+.buttonComponent {
+  float: left !important;
+  margin-right: 10px !important;
+}
+.stringComponent {
+  float: left !important;
+  margin-right: 10px !important;
+}
+.numberComponent {
+    float: left !important;
+    margin-right: 10px !important;
+    width: 270px !important;
+}
+
diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx
index 7a50a0e..c848600 100644
--- a/frontend/src/components/AsyncMethodComponent.tsx
+++ b/frontend/src/components/AsyncMethodComponent.tsx
@@ -91,7 +91,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   return (
     <div className="align-items-center asyncMethodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <h5>
         Function: {name}
diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx
index 4200915..70b87d3 100644
--- a/frontend/src/components/ButtonComponent.tsx
+++ b/frontend/src/components/ButtonComponent.tsx
@@ -37,7 +37,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   return (
     <div className={'buttonComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
 
       <DocStringComponent docString={docString} />
@@ -49,7 +49,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
         value={parentPath}
         disabled={readOnly}
         onChange={(e) => setChecked(e.currentTarget.checked)}>
-        <p>{buttonName}</p>
+        {buttonName}
       </ToggleButton>
     </div>
   );
diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx
index 0e2c15e..c6f5cfc 100644
--- a/frontend/src/components/ColouredEnumComponent.tsx
+++ b/frontend/src/components/ColouredEnumComponent.tsx
@@ -42,7 +42,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
   return (
     <div className={'enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       <Row>
diff --git a/frontend/src/components/ConnectionToast.tsx b/frontend/src/components/ConnectionToast.tsx
index 2fc748c..483d8a7 100644
--- a/frontend/src/components/ConnectionToast.tsx
+++ b/frontend/src/components/ConnectionToast.tsx
@@ -68,7 +68,7 @@ export const ConnectionToast = React.memo(
     const { message, bg, delay } = getToastContent();
 
     return (
-      <ToastContainer position="bottom-center">
+      <ToastContainer position="bottom-center" className="toastContainer">
         <Toast
           show={show}
           onClose={handleClose}
diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index 4899fbd..f6c7376 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -39,7 +39,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   return (
     <div className={'enumComponent'} id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       <Row>
diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx
index 30f17d0..30834d8 100644
--- a/frontend/src/components/ImageComponent.tsx
+++ b/frontend/src/components/ImageComponent.tsx
@@ -31,6 +31,9 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
 
   return (
     <div className={'imageComponent'} id={id}>
+      {process.env.NODE_ENV === 'development' && (
+        <div>Render count: {renderCount.current}</div>
+      )}
       <Card>
         <Card.Header
           onClick={() => setOpen(!open)}
diff --git a/frontend/src/components/ListComponent.tsx b/frontend/src/components/ListComponent.tsx
index 9b96c82..ee65ecb 100644
--- a/frontend/src/components/ListComponent.tsx
+++ b/frontend/src/components/ListComponent.tsx
@@ -26,7 +26,7 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
   return (
     <div className={'listComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       {value.map((item, index) => {
diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx
index 5d4c429..c0daa65 100644
--- a/frontend/src/components/MethodComponent.tsx
+++ b/frontend/src/components/MethodComponent.tsx
@@ -76,7 +76,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   return (
     <div className="align-items-center methodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <h5 onClick={() => setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}>
         Function: {name}
@@ -84,11 +84,9 @@ export const MethodComponent = React.memo((props: MethodProps) => {
       </h5>
       <Form onSubmit={execute}>
         {args}
-        <div>
-          <Button variant="primary" type="submit">
-            Execute
-          </Button>
-        </div>
+        <Button variant="primary" type="submit">
+          Execute
+        </Button>
       </Form>
 
       <Collapse in={!hideOutput}>
diff --git a/frontend/src/components/NotificationsComponent.tsx b/frontend/src/components/NotificationsComponent.tsx
index 990f541..d46c645 100644
--- a/frontend/src/components/NotificationsComponent.tsx
+++ b/frontend/src/components/NotificationsComponent.tsx
@@ -25,10 +25,7 @@ export const Notifications = React.memo((props: NotificationProps) => {
   } = props;
 
   return (
-    <ToastContainer
-      className="navbarOffset toastContainer"
-      position="top-end"
-      style={{ position: 'fixed' }}>
+    <ToastContainer className="navbarOffset toastContainer" position="top-end">
       {showNotification &&
         notifications.map((notification) => (
           <Toast
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 117cf40..44f3062 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -289,8 +289,8 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
 
   return (
     <div className="numberComponent" id={id}>
-      {process.env.NODE_ENV === 'development' && showName && (
-        <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       <div className="d-flex">
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index 491f435..c911400 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -106,7 +106,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   return (
     <div className="sliderComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
 
       <DocStringComponent docString={docString} />
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index f4423f6..cd76487 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -60,7 +60,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   return (
     <div className={'stringComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       <InputGroup>