diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 18fc0f5a86..c971468947 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -131,11 +131,17 @@ const App = () => {
               </CustomAccordionToggle>
             </div>
             <Accordion.Collapse eventKey="0">
-              <div className="pl-3 pt-3 border-top-0">
+              <div className="pt-2">
                 <Form>
-                  <div className="d-flex flex-row gap-5 mb-3 mt-2">
-                    <Form.Check inline id="remote-compiler" data-id="remote-compiler" type="radio" name="remote" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} label="Remote Compiler" className={`${state.environment === 'remote' ? 'd-flex mr-4' : 'd-flex mr-4 cursor-status'}`} />
-                    <Form.Check inline id="local-compiler" data-id="local-compiler" checked={state.environment === 'local'} type="radio" name="local" value={state.environment} onChange={() => setEnvironment('local')} label="Local Compiler" className={`${state.environment === 'local' ? '' : `cursor-status`}`} />
+                  <div className="d-flex flex-row justify-content-around mb-1 mt-2">
+                    <div className={`custom-control custom-radio ${state.environment === 'remote' ? 'd-flex mr-4' : 'd-flex mr-4 cursor-status'}`}>
+                      <input type="radio" id="remote-compiler" data-id="remote-compiler" name="remote" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} className={`custom-control-input  ${state.environment === 'remote' ? 'd-flex mr-4' : 'd-flex mr-4 cursor-status'}`} />
+                      <label htmlFor="remote-compiler" className="form-check-label custom-control-label">Remote Compiler</label>
+                    </div>
+                    <div className={`custom-control custom-radio ${state.environment === 'local' ? '' : `cursor-status`}`}>
+                      <input id="local-compiler" data-id="local-compiler" checked={state.environment === 'local'} type="radio" name="local" value={state.environment} onChange={() => setEnvironment('local')} className={`custom-control-input  ${state.environment === 'local' ? '' : `cursor-status`}`} />
+                      <label htmlFor="local-compiler" className="form-check-label custom-control-label">Local Compiler</label>
+                    </div>
                   </div>
                 </Form>
               </div>
diff --git a/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts b/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
index 68e62915c5..0528aeda0a 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
@@ -28,7 +28,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
   onContentChanged: () => void
   onFileClosed: (name: string) => void
   statusChanged: (data: { key: string, title?: string, type?: string }) => void
-  
+
   setSolJsonBinData: (urls: iSolJsonBinData) => void
 
   initCompilerApi () {
@@ -336,7 +336,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
             await this.call('editor', 'addAnnotation', pos, file)
           }
         }
-      }     
+      }
     }
     this.compiler.event.register('compilationFinished', this.data.eventHandlers.onCompilationFinished)
 
@@ -360,6 +360,8 @@ export const CompilerApiMixin = (Base) => class extends Base {
           else this.compileTabLogic.runCompiler(undefined)
         } else if (this.currentFile && this.currentFile.endsWith('.circom')) {
           await this.call('circuit-compiler', 'compile', this.currentFile)
+        } else if (this.currentFile && this.currentFile.endsWith('.vy')) {
+          await this.call('vyper', 'vyperCompileCustomAction', this.currentFile)
         }
       }
     }
@@ -370,7 +372,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
     return new Promise((resolve) => {
       if (!data.contracts || (data.contracts && Object.keys(data.contracts).length === 0)) {
         return resolve({
-          contractMap: {}, 
+          contractMap: {},
           contractsDetails: {},
           target: source.target
         })
@@ -386,7 +388,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
         )
       })
       return resolve({
-        contractMap, 
+        contractMap,
         contractsDetails,
         target: source.target
       })