diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
index 23eae179b3..2d05f1fead 100644
--- a/apps/vyper/src/app/app.css
+++ b/apps/vyper/src/app/app.css
@@ -262,3 +262,7 @@ html, body, #root, main {
   padding: 0;
   border-radius: 0;
 }
+
+.vyper-panel-width {
+  width: 94%;
+}
diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index c971468947..165e9a4735 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -149,7 +149,7 @@ const App = () => {
           </div>
         </Accordion>
         <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
-        <span className="px-3 mt-1 mb-1 small text-warning">
+        <span className="px-3 mt-3 mb-3 small text-warning">
           Specify the{' '}
           <a className="text-warning" target="_blank" href="https://remix-ide.readthedocs.io/en/latest/vyper.html#specify-vyper-version">
             compiler version
diff --git a/apps/vyper/src/app/components/CompileErrorCard.tsx b/apps/vyper/src/app/components/CompileErrorCard.tsx
index 761d64f6e8..e9489c6e1e 100644
--- a/apps/vyper/src/app/components/CompileErrorCard.tsx
+++ b/apps/vyper/src/app/components/CompileErrorCard.tsx
@@ -5,11 +5,8 @@ export function CompileErrorCard(props: any) {
   return (
     <div
       id="vyperErrorResult"
-      className=" d-flex flex-column p-2 alert alert-danger error vyper-compile-error"
+      className=" d-flex flex-column p-2 alert alert-danger error vyper-compile-error vyper-panel-width"
       title={props.output?.title}
-      style={{
-        width: '94%'
-      }}
     >
       <span
         data-id="error-message"
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index a1f799cfb0..0efc4afc28 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -58,9 +58,8 @@ function VyperResult({ output, plugin }: VyperResultProps) {
 
   return (
     <>
-      <div className="border border-top"></div>
-      <div className="d-flex justify-content-center px-2 w-100 flex-column">
-        <button data-id="compilation-details" className="btn btn-secondary w-100" onClick={async () => {
+      <div className="d-flex justify-content-center mx-3 mb-3 mt-1 vyper-panel-width flex-column">
+        <button data-id="compilation-details" className="btn btn-secondary d-block btn-block" onClick={async () => {
           await plugin?.call('vyperCompilationDetails', 'showDetails', output)
         }}>
           <span>Compilation Details</span>