diff --git a/docs/components/home/Basic.vue b/docs/components/home/Basic.vue
index 4a7812f3..193f9701 100644
--- a/docs/components/home/Basic.vue
+++ b/docs/components/home/Basic.vue
@@ -42,12 +42,12 @@ const { onPaneReady } = useVueFlow({
       label: 'animated edge',
       target: '2',
       animated: true,
-      class: (el: GraphEdge) => {
-        const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
+      class: (el) => {
+        const classes = ['transition-colors duration-300', (<GraphEdge>el).sourceNode.selected ? 'font-semibold' : '']
         return classes.join(' ')
       },
-      style: (el: GraphEdge) => {
-        const sourceNodeSelected = el.sourceNode.selected
+      style: (el) => {
+        const sourceNodeSelected = (<GraphEdge>el).sourceNode.selected
         return {
           transition: 'stroke ease-in-out 300ms',
           stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
@@ -59,12 +59,12 @@ const { onPaneReady } = useVueFlow({
       source: '1',
       target: '3',
       label: 'default edge',
-      class: (el: GraphEdge) => {
-        const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
+      class: (el) => {
+        const classes = ['transition-colors duration-300', (<GraphEdge>el).sourceNode.selected ? 'font-semibold' : '']
         return classes.join(' ')
       },
-      style: (el: GraphEdge) => {
-        const sourceNodeSelected = el.sourceNode.selected
+      style: (el) => {
+        const sourceNodeSelected = (<GraphEdge>el).sourceNode.selected
         return {
           transition: 'stroke ease-in-out 300ms',
           stroke: el.selected || sourceNodeSelected ? 'red' : undefined,
@@ -77,12 +77,12 @@ const { onPaneReady } = useVueFlow({
       target: '4',
       type: 'step',
       animated: true,
-      class: (el: GraphEdge) => {
-        const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
+      class: (el) => {
+        const classes = ['transition-colors duration-300', (<GraphEdge>el).sourceNode.selected ? 'font-semibold' : '']
         return classes.join(' ')
       },
-      style: (el: GraphEdge) => {
-        const sourceNodeSelected = el.sourceNode.selected
+      style: (el) => {
+        const sourceNodeSelected = (<GraphEdge>el).sourceNode.selected
         return {
           transition: 'stroke ease-in-out 300ms',
           stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index 219d1db4..dfc170e9 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -137,6 +137,7 @@ onPaneReady(({ fitView }) => {
             <a class="link group bg-purple-500" href="/examples"> Check The Examples </a>
           </div>
           <Handle type="target" :position="Position.Top" />
+          <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
         </template>
       </template>
     </VueFlow>
diff --git a/docs/components/home/RGB.vue b/docs/components/home/RGB.vue
index bd5fbe05..9666488b 100644
--- a/docs/components/home/RGB.vue
+++ b/docs/components/home/RGB.vue
@@ -89,7 +89,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
       <template #node-rgb-output="rgbOutputProps">
         <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
       </template>
-      <Controls class="transform scale-75 md:scale-100 origin-bottom-left" />
+      <Controls class="hidden md:block" />
       <Background
         :variant="BackgroundVariant.Lines"
         :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"